.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.delay-1s { animation-delay: 0.3s; }
.animated.delay-2s { animation-delay: 0.6s; }

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

@keyframes slideInDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.slideInDown { animation-name: slideInDown; }

@keyframes fadeInDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.fadeInRight { animation-name: fadeInRight; }

@keyframes fadeInLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.fadeInUp { animation-name: fadeInUp; }

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