.slide-up {
    animation: slideUp ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* animation-delay: 1.5s; */

}

@keyframes slideUp {
    0%,
    100% {
    transform: translateY(100%);
    opacity: 0;
  }


      50%,
  100%  {
    transform: translateY(0);
    opacity: 1;

  }
}

.slide-down {
    animation: slideDown ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    z-index: 0;
    /* animation-delay: 1.5s; */
}

@keyframes slideDown{
    0%,
  100%  {
        transform: translateY(-50%);
      }
      50%,
  100% {
        transform: translateY(0%);
      }
}


.slide-right {
  animation: slideRight ease 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}

@keyframes slideRight {
    0%,
    100% {
    transform: translateX(100%);
    opacity: 0;
  }

  50%,
  100%  {
    transform: translateX(0);
    opacity: 1;

  }
}

.slide-left {
  animation: slideLeft ease 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}

@keyframes slideLeft {
    0%,
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }

  50%,
  100% {
    transform: translateX(0);
    opacity: 1;

  }
}