.animated,
.wow {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    translate: 0 60px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    translate: 0 -60px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    translate: -60px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    translate: 60px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 60px 0;
  }
}

.fadeOutRight {
  animation-name: fadeOutRight;
}

@media (prefers-reduced-motion: reduce) {
  .animated,
  .wow {
    animation: none !important;
  }
}