@charset "utf-8";

.wow {
  visibility: hidden;
  opacity: 0;
}

.wow.animated {
  visibility: visible;
}

/* ==== fadeIn ==== */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.wow.animated.fadeIn {
  animation-play-state: running;
}

/* ==== fadeInUp ==== */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

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

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.wow.animated.fadeInUp {
  animation-play-state: running;
}

/* ==== slideInLeft ==== */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.wow.animated.slideInLeft {
  animation-play-state: running;
}

/* ==== slideInRight ==== */
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }

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

.slideInRight {
  animation-name: slideInRight;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.wow.animated.slideInRight {
  animation-play-state: running;
}