/**
 *   loaders.css
 *
 *   Archivo de estilos propios del sitio que suplementan o modifican los de BS4.
 *
 *   Created on : 08/11/2019, 15:46:22
 *   Author     : E3 Sistema [ https://e3sistemas.com ]
 */

.loader-1 {
    width: 48px;
    height: 48px;
    border: 5px solid var(--primary, #0090f0);
    border-bottom-color: var(--secondary, #0090f0);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation-1 1s linear infinite;
}

@keyframes rotation-1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.loader-2 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}
.loader-2::before , .loader-2::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid var(--primary, #0090f0);
    animation: prixClipFix 2s linear infinite ;
}
.loader-2::after{
    inset: 8px;
    transform: rotate3d(90, 90, 0, 180deg );
    border-color: var(--secondary, #0090f0);
}

@keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
}

.loader-3 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate-3 1s linear infinite
}
.loader-3::before , .loader-3::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid var(--primary, #0090f0);
    animation: prixClipFix-3 2s linear infinite ;
}
.loader-3::after{
    border-color: var(--secondary, #0090f0);;
    animation: prixClipFix-3 2s linear infinite , rotate-3 0.5s linear infinite reverse;
    inset: 6px;
}

@keyframes rotate-3 {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix-3 {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

.loader-4 {
  width: 48px;
  height: 48px;
  border: 3px solid var(--primary, #0090f0);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation-4 1s linear infinite;
}
.loader-4::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid;
  border-color: var(--secondary, #0090f0) transparent;
}

@keyframes rotation-4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

.loader-5 {
  color: var(--primary, #0090f0);
  font-size: 45px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  animation: mltShdSpin-5 1.7s infinite ease, round-5 1.7s infinite ease;
}

@keyframes mltShdSpin-5 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em,
    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 
    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 
    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, 
    -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, 
    -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
     -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, 
     -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
     -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, 
     -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 
    0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes round-5 {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
 
.loader-6 {
  color: var(--primary, #0090f0);
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin-6 1.3s infinite linear;
  transform: translateZ(0);
}

@keyframes mulShdSpin-6 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 
    2em -2em 0 0em, 3em 0 0 -1em, 
    2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
    3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 
    2em -2em 0 0, 3em 0 0 0.2em, 
    2em 2em 0 0, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
     -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
     -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
     -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
    3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
    3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
  
.loader-7 {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: var(--primary, #0090f0);
}
.loader-7:before,
.loader-7:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spin-7 linear infinite;
}
.loader-7:after {
    color: var(--secondary, #0090f0);
    transform: rotateY(70deg);
    animation-delay: .4s;
}

@keyframes rotate-7 {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes rotateccw-7 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin-7 {
  0%,
  100% {
    box-shadow: .2em 0px 0 0px currentcolor;
  }
  12% {
    box-shadow: .2em .2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 .2em 0 0px currentcolor;
  }
  37% {
    box-shadow: -.2em .2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -.2em -.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0px -.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: .2em -.2em 0 0 currentcolor;
  }
}
   
.loader-8 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid var(--primary, #0090f0);
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation-8 1s linear infinite;
}
.loader-8::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-bottom: 4px solid var(--secondary, #0090f0);
  border-left: 4px solid transparent;
}
@keyframes rotation-8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

.loader-9 {
  width: calc(100px - 24px);
  height: 50px;
  position: relative;
  animation: flippx-9 2s infinite linear;
}
.loader-9:before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary, #0090f0);
  transform-origin: -24px 50%;
  animation: spin-9 1s infinite linear;
}
.loader-9:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  background: var(--primary, #0090f0);
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

@keyframes flippx-9 {
  0%, 49% {
    transform: scaleX(1);
  }
  50%, 100% {
    transform: scaleX(-1);
  }
}
@keyframes spin-9 {
  100% {
    transform: rotate(360deg);
  }
}

.loader-10 {
  width: 32px;
  height: 32px;
  transform: translateY(100%);
  border-radius: 50%;
  background: var(--primary, #0090f0);
  position: relative;
}
.loader-10:before , .loader-10:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary, #0090f0);
  left: 50%;
  transform: translateX(-50%);
  top: -200%;
}
.loader-10:after {
  animation: moveX-10 0.5s infinite linear alternate;
}

@keyframes moveX-10 {
  0% {
    top: 0% ;
    transform: translateX(-50%) scale(1.5);
  }
  50% {
    top: -75% ;
    transform: translateX(-50%) scale(0.5);
  }
  100% {
    top: -200%;
    transform: translateX(-50%) scale(1.5);
  }
}

.loader-11 {
  width: 82px;
  height: 18px;
  position: relative;
}
.loader-11::before , .loader-11::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translate(-50% , 10%);
  top: 0;
  background: var(--secondary, #0090f0);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  animation: jump-11 0.5s ease-in infinite alternate;
}

.loader-11::after {
  background: #0000;
  color: var(--primary, #0090f0);
  top: 100%;
  box-shadow: 32px -20px , -32px -20px;
  animation: split-11 0.5s ease-out infinite alternate;
}

@keyframes split-11 {
  0% { box-shadow: 8px -20px, -8px -20px}
  100% { box-shadow: 32px -20px , -32px -20px}
}
@keyframes jump-11 {
 0% { transform: translate(-50% , -150%)}
 100% { transform: translate(-50% , 10%)}
}

.loader-12, .loader-12:before, .loader-12:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut-12 1.8s infinite ease-in-out;
}
.loader-12 {
  color: var(--primary, #0090f0);
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader-12:before,
.loader-12:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader-12:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader-12:after {
  left: 3.5em;
}

@keyframes bblFadInOut-12 {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}

.loader-13 {
    animation: rotate-13 1s infinite;
    height: 50px;
    width: 50px;
}

.loader-13:before,
.loader-13:after {
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
}
.loader-13:before {
    animation: ball1-13 1s infinite;
    background-color: var(--primary, #0090f0);
    box-shadow: 30px 0 0 var(--secondary, #0090f0);
    margin-bottom: 10px;
}
.loader-13:after {
    animation: ball2-13 1s infinite;
    background-color: var(--secondary, #0090f0);
    box-shadow: 30px 0 0 var(--primary, #0090f0);
}

@keyframes rotate-13 {
    0% { transform: rotate(0deg) scale(0.8) }
    50% { transform: rotate(360deg) scale(1.2) }
    100% { transform: rotate(720deg) scale(0.8) }
}

@keyframes ball1-13 {
    0% {
      box-shadow: 30px 0 0 var(--secondary, #0090f0);
    }
    50% {
      box-shadow: 0 0 0 var(--secondary, #0090f0);
      margin-bottom: 0;
      transform: translate(15px, 15px);
    }
    100% {
      box-shadow: 30px 0 0 var(--secondary, #0090f0);
      margin-bottom: 10px;
    }
    }

    @keyframes ball2-13 {
    0% {
      box-shadow: 30px 0 0 var(--primary, #0090f0);
    }
    50% {
      box-shadow: 0 0 0 var(--primary, #0090f0);
      margin-top: -20px;
      transform: translate(15px, 15px);
    }
    100% {
      box-shadow: 30px 0 0 var(--primary, #0090f0);
      margin-top: 0;
    }
}

.loader-14 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin:15px auto;
  position: relative;
  color: var(--primary, #0090f0);
  box-sizing: border-box;
  animation: animloader-14 1s linear infinite alternate;
}

@keyframes animloader-14 {
  0% {
    box-shadow: -38px -12px ,  -14px 0,  14px 0, 38px 0;
  }
  33% {
    box-shadow: -38px 0px, -14px -12px,  14px 0, 38px 0;
  }
  66% {
    box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0;
  }
  100% {
    box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px;
  }
}


.loader-15 {
  width: 48px;
  height: 48px;
  border: 3px solid var(--secondary, #0090f0);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation-15 1s linear infinite;
}
.loader-15::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--primary, #0090f0);
  width: 16px;
  height: 16px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
}
    
@keyframes rotation-15 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader-16 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: var(--secondary, #0090f0) var(--secondary, #0090f0) transparent;
  box-sizing: border-box;
  animation: rotation-16 1s linear infinite;
}
.loader-16::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent var(--primary, #0090f0) var(--primary, #0090f0);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack-16 0.5s linear infinite;
  transform-origin: center center;
}

@keyframes rotation-16 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
    
@keyframes rotationBack-16 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.loader-17 {
  width: 48px;
  height: 48px;
  border: 3px dotted var(--primary, #0090f0);
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation-17 2s linear infinite;
}
.loader-17::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted var(--secondary, #0090f0);
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack-17 1s linear infinite;
  transform-origin: center center;
}
    
@keyframes rotation-17 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack-17 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
} 

.loader-18 {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}
.loader-18::after,
.loader-18::before {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--primary, #0090f0);
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader-18 2s linear infinite;
}
.loader-18::after {
  animation-delay: 1s;
}

@keyframes animloader-18 {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.loader-19 {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}
.loader-19::after,
.loader-19::before {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary, #0090f0);
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader-19 2s linear infinite;
}
.loader-19::after {
  animation-delay: 1s;
}

@keyframes animloader-19 {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.loader-20 {
    display: inline-block;
    transform: translateZ(1px);
}
.loader-20:after {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 8px;
  border-radius: 50%;
  background: var(--primary, #0090f0);
  animation: coin-flip-20 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes coin-flip-20 {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateY(3600deg);
  }
}

.loader-21 {
  width: 48px;
  height: 48px;
  position: relative;
  perspective: 500px;
}
.loader-21:before , .loader-21:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 48px;
  background: var(--primary, #0090f0);
  border-radius: 0 24px 24px 0;
  transform-origin: 0 0;
  animation: flip-21 2s linear infinite alternate;
}
.loader-21:after {
  left: 0;
  border-radius: 24px 0 0 24px;
  transform-origin: 100% 0;
  animation-delay: 1s;
}

@keyframes flip-21 {
    0% , 10% { transform: rotateY(0deg)}
    90%, 100% { transform: rotateY(-180deg)}
}

.loader-22 {
    width: 48px;
    height: 48px;
    background: var(--secondary, #0090f0);
    border-radius: 50%;
    position: relative;
    animation: roll-22 1s ease-in-out infinite alternate;
}
.loader-22:after{
    content:"";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 5px solid ;
    border-color: var(--primary, #0090f0) transparent;
}
@keyframes roll-22 {
    0% {
      transform: translateX(-150%) rotate(0deg) ;
    }
    100% {
      transform:  translateX(150%) rotate(360deg);
    }
}

.loader-23 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    box-sizing: border-box;
    animation: rotation-23 1s linear infinite;
  }
  .loader-23::after,
  .loader-23::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--secondary, #0090f0);
    width: 16px;
    height: 16px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
  }
  .loader-23::before {
    left: auto;
    right: 0;
    background: var(--primary, #0090f0);
    transform: translate(50%, 100%);
  }

@keyframes rotation-23 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

.loader-24 {
    position: relative;
    width: 75px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: linear-gradient(var(--secondary, #0090f0) 50px, transparent 0),
                      linear-gradient(var(--secondary, #0090f0) 50px, transparent 0),
                      linear-gradient(var(--secondary, #0090f0) 50px, transparent 0),
                      linear-gradient(var(--secondary, #0090f0) 50px, transparent 0),
                      linear-gradient(var(--secondary, #0090f0) 50px, transparent 0);
    background-size: 8px 100%;
    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
    animation: pillerPushUp-24 4s linear infinite;
  }
  .loader-24:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--primary, #0090f0);
    border-radius: 50%;
    animation: ballStepUp-24 4s linear infinite;
  }

@keyframes pillerPushUp-24 {
  0% , 40% , 100%{background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px}
  50% ,  90% {background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px}
}

@keyframes ballStepUp-24 {
  0% {transform: translate(0, 0)}
  5% {transform: translate(8px, -14px)}
  10% {transform: translate(15px, -10px)}
  17% {transform: translate(23px, -24px)}
  20% {transform: translate(30px, -20px)}
  27% {transform: translate(38px, -34px)}
  30% {transform: translate(45px, -30px)}
  37% {transform: translate(53px, -44px)}
  40% {transform: translate(60px, -40px)}
  50% {transform: translate(60px, 0)}
  57% {transform: translate(53px, -14px)}
  60% {transform: translate(45px, -10px)}
  67% {transform: translate(37px, -24px)}
  70% {transform: translate(30px, -20px)}
  77% {transform: translate(22px, -34px)}
  80% {transform: translate(15px, -30px)}
  87% {transform: translate(7px, -44px)}
  90% {transform: translate(0, -40px)}
  100% {transform: translate(0, 0);}
}