/* Common trigger state */
.anim-box {
  opacity: 0;
}

/* When visible */
.anim-box.is-animated {
  opacity: 1;
}

/* Fade Up */
.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide In Right */
.slidein-right.is-animated {
  animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInRight {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* Slide In Left */
.slidein-left.is-animated {
  animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.delay01 {
  animation-delay: 0.3s;
}

.delay02 {
  animation-delay: 0.6s;
}

.delay03 {
  animation-delay: 0.7s;
}

.delay04 {
  animation-delay: 0.8s;
}

.delay05 {
  animation-delay: 0.85s;
}

.delay06 {
  animation-delay: 0.88s;
}

.delay07 {
  animation-delay: 0.9s;
}

.delay08 {
  animation-delay: 0.95s;
}

.delay09 {
  animation-delay: 1s;
}

.delay10 {
  animation-delay: 1.2s;
}

@media (max-width: 48em) {
  .slidein-right.is-animated,
  .slidein-left.is-animated {
    animation: none;
  }

  .frontCourse-mask.anim-box.slidein-right.is-animated,
  .frontCourse-mask.anim-box.slidein-left.is-animated {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
}

.animate {
  opacity: 0;
  transform: translateY(10px);
  transition: all 1.0s;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

.animate.show.delay01 {
  transition-delay: 0.1s;
}

.animate.show.delay02 {
  transition-delay: 0.3s;
}

.animate.show.delay03 {
  transition-delay: 0.6s;
}

.animate.show.delay04 {
  transition-delay: 0.9s;
}