.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    animation-iteration-count: infinite;
  }
  
  .animated.delay-1s {
    animation-delay: 1s;
  }
  
  .animated.delay-2s {
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    animation-delay: 5s;
  }
  
  .animated.fast {
    animation-duration: 800ms;
  }
  
  .animated.faster {
    animation-duration: 500ms;
  }
  
  .animated.slow {
    animation-duration: 2s;
  }
  
  .animated.slower {
    animation-duration: 3s;
  }
  
  @media (print), (prefers-reduced-motion) {
    .animated {
      animation: unset !important;
      transition: none !important;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .fadeIn {
    animation-name: fadeIn;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .fadeInUp {
    animation-name: fadeInUp;
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  .fadeOut {
    animation-name: fadeOut;
  }

  @keyframes fadeOutDown {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  }
  
  .fadeOutDown {
    animation-name: fadeOutDown;
  }
  