.tte-document .animated:is(.fadeIn, .fadeInLeft, .fadeInRight, .fadeInUp) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
}

.tte-document .animated.fadeIn { animation-name: tte-fade-in; }
.tte-document .animated.fadeInLeft { animation-name: tte-fade-in-left; }
.tte-document .animated.fadeInRight { animation-name: tte-fade-in-right; }
.tte-document .animated.fadeInUp { animation-name: tte-fade-in-up; }

@keyframes tte-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tte-fade-in-left {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tte-fade-in-right {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tte-fade-in-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tte-document .animated:is(.fadeIn, .fadeInLeft, .fadeInRight, .fadeInUp) {
    animation: none;
  }
}