@charset "UTF-8";

/*----------------------------------
  Gradation
 ----------------------------------*/
.ngr-c-grad-a {
  background: linear-gradient(
    60deg,
    hsla(104, 60%, 80%, 1) 0,
    hsla(210, 97%, 85%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-b {
  background: linear-gradient(
    60deg,
    hsla(210, 97%, 85%, 1) 0,
    hsla(210, 69%, 69%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-c {
  background: linear-gradient(
    60deg,
    hsla(210, 69%, 69%, 1) 0,
    hsla(328, 100%, 83%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-d {
  background: linear-gradient(
    60deg,
    hsla(42, 100%, 65%, 1) 0,
    hsla(80, 57%, 73%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-e {
  background: linear-gradient(
    60deg,
    hsla(92, 49%, 77%, 1) 0,
    hsla(149, 72%, 70%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-f {
  background: linear-gradient(
    60deg,
    hsla(169, 78%, 63%, 1) 0,
    hsla(192, 100%, 80%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-g {
  background: linear-gradient(
    60deg,
    hsla(27, 100%, 81%, 1) 0,
    hsla(42, 100%, 65%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-h {
  background: linear-gradient(
    60deg,
    hsla(328, 100%, 83%, 1) 0,
    hsla(25, 100%, 81%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-i {
  background: linear-gradient(
    60deg,
    hsla(293, 100%, 87%, 1) 0,
    hsla(300, 100%, 94%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-grad-j {
  background: linear-gradient(
    60deg,
    hsla(328, 100%, 76%, 1) 0,
    hsla(7, 100%, 68%, 0.7) 60%
  );
  background-size: 200% 200%;
}

.ngr-c-gradAnim-1 {
  animation: grad1 10s ease infinite;
}

@keyframes grad1 {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}