:root{
  --anime-distancia: 80px;
  --anime-velocidad-rapida: 860ms;
  --anime-velocidad-media: 4s;
  --anime-velocidad-lenta: 8s;
}

@media only screen and (max-width: 1200px) {

  :root{
    --anime-distancia: 50px;
    --anime-velocidad-rapida: 630ms;
    --anime-velocidad-media: 3s;
    --anime-velocidad-lenta: 6s;
  }

} 


@media only screen and (max-width: 768px) {

  :root{
    --anime-distancia: 30px;
    --anime-velocidad-rapida: 430ms;
    --anime-velocidad-media: 2s;
    --anime-velocidad-lenta: 4s;
  }

} 

.animate{
  opacity: 0;
  transition: all var(--anime-velocidad-rapida) ease;
}

.animate.active{
  opacity: 1;
}

.animate-scale{
  transform: scale(0.9);
}

.animate-scale.active{
  transform: scale(1);
}

.animate-invert.active {
  filter: invert(100%);
}

.animate-start{
  transform: translateX(calc(-1 * var(--anime-distancia)));
}

.animate-end{
  transform: translateX( var(--anime-distancia));
}

.animate-top{
  transform: translateY(calc(-1 * var(--anime-distancia)));
}

.animate-bottom{
  transform: translateY( var(--anime-distancia));
}

.animate-start.active,
.animate-end.active{
  transform: translateX(0);
}

.animate-top.active,
.animate-bottom.active{
  transform: translateY(0);
}

.animate-rotate {
  animation: rotar var(--anime-velocidad-lenta); linear infinite;
}

.animate-downup {
  animation: floatUpDown var(--anime-velocidad-media) ease-in-out infinite;
}

.animate-updown {
  animation: floatDownUp var(--anime-velocidad-media) ease-in-out infinite;
}

.animate-leftright {
  animation: floatLeftRight var(--anime-velocidad-media) ease-in-out infinite;
}

.animate-saltos {
    display: inline-block;
    animation: saltos calc(var(--anime-velocidad-media) / 2) infinite ease-in-out;
}

@keyframes floatUpDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(calc(-1 * var(--anime-distancia))); }
    100% { transform: translateY(0); }
}

@keyframes floatDownUp {
    0% { transform: translateY(0); }
    50% { transform: translateY(var(--anime-distancia)); }
    100% { transform: translateY(0); }
}

@keyframes floatLeftRight {
    0% { transform: translateX(0); }
    50% { transform: translateX(calc(-1 * var(--anime-distancia))); }
    100% { transform: translateX(0); }
}

@keyframes rotar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes saltos {
  0%, 90% { transform: translateY(0); }
  92% { transform: translateY(-15px); }
  94% { transform: translateY(0); }
  96% { transform: translateY(-10px); }
  98% { transform: translateY(0); }
  100% { transform: translateY(0); }
}