.fadeIn {
  transition: opacity 1s ease-in-out;
  opacity: 0;
}
.fadeIn.enter {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}
.slideLeft {
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  opacity: 0;
  transform: translateX(100%);
}
.slideLeft.enter {
  transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
  transform: translateX(0);
}
.slideUp {
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  opacity: 0;
  transform: translateY(100%);
}
.slideUp.enter {
  transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
  transform: translateY(0);
}

.slideIn {
  animation-duration: 3s;
  animation-delay: 1;
  animation-name: slidein;
}

.myFadeIn{
  animation-duration: 3s;
  animation-delay: 1;
  animation-name: myFadeIn;
}

@keyframes myFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slidein {
  from {
    margin-right: 20%;
    opacity: 0;
  }

  to {
    margin-left: 0%;
    opacity: 1;
  }
}
@media (print), (prefers-reduced-motion: reduce) {
  .fadeIn,
  .slideLeft,
  .slideIn,
  .slideUp {
    transition: none;
    opacity: 1;
    transform: none;
  }
}