/* Animations */
:root {
  --animation-duration: 2s;
  --animation-delay: 0s;
  --slide-percentage: 100%;
}
/* slide in left to right */
.slide-in-l-r {
    transform: translateX(-100%);
  }
  .play-animation.slide-in-l-r {
    transform: translateX(-100%);
    animation: slideInLR var(--animation-duration) forwards var(--animation-delay), fadeIn var(--animation-duration) forwards var(--animation-delay);
  }
  
  @keyframes slideInLR {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
  }
  
  /* slide in right to left */
  .slide-in-r-l {
    transform: translateX(100%);
  }
  .play-animation.slide-in-r-l {
    transform: translateX(100%);
    animation: slideInRL var(--animation-duration) forwards var(--animation-delay);
  }
  
  @keyframes slideInRL {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  /* slide in right to left */
  .slide-in-r-l-var {
    transform: translateX(var(--slide-percentage));
  }
  .play-animation.slide-in-r-l-var {
    transform: translateX(var(--slide-percentage));
    animation: slideInRLVar var(--animation-duration) forwards var(--animation-delay);
  }
  
  @keyframes slideInRLVar {
    0% {
      transform: translateX(var(--slide-percentage));
    }
    100% {
      transform: translateX(0);
    }
  }
  
  /* fade in */
  .fade-in {
    opacity: 0;
  }
  
  .play-animation.fade-in{
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: var(--animation-duration);
    animation-fill-mode: forwards;
    animation-delay: var(--animation-delay);
  }
  
  /* fade in and slide in left to right */
  .play-animation.fade-in.slide-in-l-r{
    animation: slideInLR var(--animation-duration) forwards var(--animation-delay), fadeIn var(--animation-duration) forwards var(--animation-delay);
  }
  /* fade in and slide in right to left */
  .play-animation.fade-in.slide-in-r-l{
    animation: slideInRL var(--animation-duration) forwards var(--animation-delay), fadeIn var(--animation-duration) forwards var(--animation-delay);
  }
  /* fade in and slide in right to left */
  .play-animation.fade-in.slide-in-r-l-var{
    animation: slideInRLVar var(--animation-duration) forwards var(--animation-delay), fadeIn var(--animation-duration) forwards var(--animation-delay);
  }
  
  @keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }
  
/* LOTTIE */
/* A default banner animation */
  #banner-animation{
    position: absolute;
    right:0;
    height:100%;
    width:100%;
  }
  #banner-animation-svg{
    position: absolute;
    height:100% !important;
    width:auto !important;
    right:0 !important;
  }