/*** Modulo Azul ***/
svg#modulo-azul:not(.animaSVG) .animable {
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-azul {
  animation: 1s 1 forwards ease-in slideRight;
  animation-delay: 1s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-nube {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) slideUp,
    1.5s Infinite linear floating;
  animation-delay: 1.2s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-figura {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) slideUp,
    3s Infinite linear shake;
  animation-delay: 1.3s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-flor {
  animation: 2s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    3.5s Infinite linear spin-flor;
  animation-delay: 1.2s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-flor2 {
  animation: 2s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    3.5s Infinite linear spin-flor;
  animation-delay: 1.6s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-libro {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    4.5s Infinite linear floating;
  animation-delay: 1.6s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-libro3 {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) slideUp,
    1.5s Infinite linear floating;
  animation-delay: 1.8s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-3 {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    4.5s Infinite linear destello1;
  animation-delay: 1.7s;
  opacity: 0;
}
svg#modulo-azul.animaSVG #svg-tigre {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    3.5s Infinite linear shake;
  animation-delay: 1.5s;
  opacity: 0;
}
/*** Modulo Rojo ***/
svg#modulo-rojo:not(.animaSVG) .animable {
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-rojo {
  animation: 1s 1 forwards ease-in slideLeft;
  animation-delay: 1s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-nubeR {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) slideUp,
    1.5s Infinite linear floating;
  animation-delay: 1.2s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-casa {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) slideUp,
    3s Infinite linear shake;
  animation-delay: 1.3s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-florR2 {
  animation: 2s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    3.5s Infinite linear spin-flor;
  animation-delay: 1.2s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-florR {
  animation: 2s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    3.5s Infinite linear spin-flor;
  animation-delay: 1.6s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-libroR {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    4.5s Infinite linear floating;
  animation-delay: 1.6s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-libroR2 {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) slideUp,
    1.5s Infinite linear floating;
  animation-delay: 1.8s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-3R {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    4.5s Infinite linear destello1;
  animation-delay: 1.7s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-torre {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    3.5s Infinite linear destello1;
  animation-delay: 1.8s;
  opacity: 0;
}
svg#modulo-rojo.animaSVG #svg-mano {
  animation: 1s 1 forwards cubic-bezier(0.36, -0.01, 0.5, 1.38) fadeIn,
    3.5s Infinite linear wind;
  animation-delay: 1.5s;
  opacity: 0;
}

/* Animaciones */
@keyframes nubes1 {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateX(-42px);
  }
  90% {
    transform: translateX(-62px);
  }
  95% {
    transform: translateX(-72px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes foto {
  0% {
    filter: brightness(1);
  }
  5% {
    filter: brightness(1.75);
  }
  10% {
    filter: brightness(1);
  }
  15% {
    filter: brightness(1.75);
  }
  20% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes destello1 {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1);
  }
  80% {
    filter: brightness(1);
  }
  90% {
    filter: brightness(1.75);
  }
  100% {
    filter: brightness(1);
  }
}
/*filter: brightness(1.75);*/
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: inherit;
  }
}
@keyframes floating {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes brincando {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    transform: translateY(9px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes pelotabasquet {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    transform: translateY(42px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes caminante-es {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-42px);
  }
  90% {
    transform: translateX(-62px);
  }
  95% {
    transform: translateX(-72px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes garzaInterna {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  50% {
    transform: translateX(62px);
  }
  90% {
    transform: translateX(92px);
  }
  95% {
    transform: translateX(122px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes chavo-interno {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  30% {
    opacity: 1;
    transform: translateX(50px);
  }
  90% {
    transform: translateX(0px);
  }
  100% {
    opacity: 1;
  }
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  30% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes wind {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}
@keyframes caminata {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  20% {
    transform: translateX(0px);
    opacity: 1;
  }
  40% {
    transform: translateX(30px);
  }
  70% {
    transform: translateX(50px);
    opacity: 1;
  }
  100% {
    transform: translateX(60px);
    opacity: 0;
  }
}
@keyframes brazo {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-0.5deg);
  }
}
@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes chicalibrero {
  0% {
    opacity: 1;
    transform: translateX(-5px);
  }
  30% {
    opacity: 1;
    transform: translateX(0px);
  }
  60% {
    opacity: 1;
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(-5px);
  }
}
@keyframes corredor {
  0% {
    opacity: 0;
    transform: translateX(0px) translateY(0px);
  }
  20% {
    opacity: 1;
    transform: translateX(-30px) translateY(30px);
  }
  90% {
    opacity: 1;
    transform: translateX(-60px) translateY(60px);
  }
  100% {
    opacity: 0;
    transform: translateX(-70px) translateY(70px);
  }
}
@keyframes chavabolso {
  0% {
    opacity: 0;
    transform: translateX(0px) translateY(0px);
  }
  20% {
    opacity: 1;
    transform: translateX(-10px) translateY(-10px);
  }
  50% {
    opacity: 1;
    transform: translateX(-20px) translateY(-20px);
  }
  90% {
    opacity: 1;
    transform: translateX(-30px) translateY(-30px);
  }
  100% {
    opacity: 0;
    transform: translateX(-40px) translateY(-40px);
  }
}
@keyframes chicoinfra1 {
  0% {
    opacity: 0;
    transform: translateX(40px) translateY(40px);
  }
  20% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
  90% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(0px) translateY(0px);
  }
}
@keyframes graduada {
  0% {
    opacity: 0;
    transform: translateX(-40px) translateY(-40px);
  }
  25% {
    opacity: 1;
    transform: translateX(-30px) translateY(-30px);
  }
  50% {
    opacity: 1;
    transform: translateX(-20px) translateY(-20px);
  }
  75% {
    opacity: 1;
    transform: translateX(-10px) translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateX(10px) translateY(10px);
  }
}
@keyframes garza {
  0% {
    opacity: 0;
    transform: translateX(-250px) translateY(250px);
  }
  25% {
    opacity: 1;
    transform: translateX(-150px) translateY(150px);
  }
  50% {
    opacity: 1;
    transform: translateX(-50px) translateY(50px);
  }
  75% {
    opacity: 1;
    transform: translateX(0px) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: translateX(120px) translateY(20px);
  }
}
@keyframes chicorojo1 {
  0% {
    opacity: 0;
    transform: translateX(-40px) translateY(-40px);
  }
  50% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
  90% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(0px) translateY(0px);
  }
}
@keyframes chicorojo2 {
  0% {
    opacity: 0;
    transform: translateX(40px) translateY(40px);
  }
  50% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
  90% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(0px) translateY(0px);
  }
}
@keyframes zoomOut {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes lightSpeedRight {
  from {
    transform: translate3d(50%, 0, 0) skewX(-20deg);
    opacity: 0;
  }
  60% {
    transform: skewX(10deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-2deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes caminatalarga {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(30px);
  }
}
@keyframes caminatalarga2 {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes spin-flor {
  from {
    transform: rotateX(90deg) rotateY(90deg);
  }
  to {
    transform: rotateX(0deg) rotateY(0deg);
  }
}
