@keyframes InfiniteCarouselScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--carousel-distance, 0px)));
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceInTopLeft {
  0% {
    opacity: 0;
    transform: translate(-100%, -100%) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translate(0, 0) scale(1.05);
  }
  70% {
    opacity: 1;
    transform: translate(0, 0) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.slide-left {
  animation: slideLeft 0.6s ease-out forwards;
}
.slide-right {
  animation: slideRight 0.6s ease-out forwards;
}
.slide-up {
  animation: slideUp 0.6s ease-out forwards;
}
.slide-down {
  animation: slideDown 0.6s ease-out forwards;
}
.bounce-in-left {
  animation: bounceInTopLeft 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.ani-hid {
  opacity: 0;
  /* visibility: hidden; */
}
.ani-act {
  opacity: 1;
  /* visibility: visible; */
}