/*
* 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);
    }
  }