/*
* style.css 
*/

:root {
  --animationDistance: 15px !important;
  --animationDistanceMinus: -15px !important;
}

/* Custom Slide Animations */

.customSlideDown {
  animation-name: customSlideDown;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideDown {
  0% {
    opacity: 0;
    transform: translateY(var(--animationDistance));
  }

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

.customSlideleft {
  animation-name: customSlideLeft;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideLeft {
  0% {
    opacity: 0;
    transform: translateX(var(--animationDistanceMinus));
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.customSlideRight {
  animation-name: customSlideRight;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideRight {
  0% {
    opacity: 0;
    transform: translateX(var(--animationDistance));
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.customSlideUp {
  animation-name: customSlideUp;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideUp {
  0% {
    opacity: 0;
    transform: translateY(var(--animationDistanceMinus));
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}