/* ----------------------------------------- */
/* Avion */
/* ----------------------------------------- */

 @-webkit-keyframes avion {
  0%, 100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    top: 75px;
  }
  25% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    top: 50px;
  }
  35% {
    -webkit-transform: translateY(0) rotateX(180deg) scale(1.2);
            transform: translateY(0) rotateX(180deg) scale(1.2);
  }
  45% {
    -webkit-transform: translateY(0) rotateX(180deg) scale(1);
            transform: translateY(0) rotateX(180deg) scale(1);
  }
  60% {
    -webkit-transform: translateY(0) rotateX(180deg) scale(1);
            transform: translateY(0) rotateX(180deg) scale(1);
    top: 100px;
  }
  70% {
    -webkit-transform: translateY(0) rotateX(0) scale(0.8);
            transform: translateY(0) rotateX(0) scale(0.8);
  }
  80% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
  }
}

@keyframes avion {
  0%, 100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    top: 75px;
  }
  25% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    top: 50px;
  }
  35% {
    -webkit-transform: translateY(0) rotateX(180deg) scale(1.2);
            transform: translateY(0) rotateX(180deg) scale(1.2);
  }
  45% {
    -webkit-transform: translateY(0) rotateX(180deg) scale(1);
            transform: translateY(0) rotateX(180deg) scale(1);
  }
  60% {
    -webkit-transform: translateY(0) rotateX(180deg) scale(1);
            transform: translateY(0) rotateX(180deg) scale(1);
    top: 100px;
  }
  70% {
    -webkit-transform: translateY(0) rotateX(0) scale(0.8);
            transform: translateY(0) rotateX(0) scale(0.8);
  }
  80% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
  }
}





/* ----------------------------------------- */
/* Coche */
/* ----------------------------------------- */

 @-webkit-keyframes coche {
  0%, 100% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    left: 8%;
  }
  25% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
    left: 18%;
  }
  35% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
  }
  45% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
  }
  60% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
    left: 1%;
  }
  70% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
  }
  80% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
  }
}

@keyframes coche {
  0%, 100% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    left: 8%;
  }
  33% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
    left: 20%;
  }
  35% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
  }
  45% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
  }
  68% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
    left: 2%;
  }
  70% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
  }
  80% {
    -webkit-transform: translateY(0) rotateY(0) scale(1);
            transform: translateY(0) rotateY(0) scale(1);
  }
}





/* ----------------------------------------- */
/* Puzle */
/* ----------------------------------------- */

@-webkit-keyframes puzle {
  0%, 100% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    top: 80px;
    opacity: 1;
  }
  9% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    top: 80px;
  }
  10% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    top: 90px;
  }
  19% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    top: 90px;
  }
  20% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 100px;
  }
  29% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 100px;
  }
  30% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 110px;
  }
  39% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 110px;
  }
  40% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 120px;
  }
  49% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 120px;
  }
  50% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 130px;
  }
  59% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 130px;
  }
  60% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 140px;
  }
  69% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 140px;
  }
  70% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 150px;
  }
  79% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 150px;
  }
  80% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 160px;
  }
  89% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 160px;
  }
  90% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 170px;
    opacity: 1;
  }
  99% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 170px;
    opacity: 0;
  }
}

@keyframes puzle {
  0%, 100% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    top: 80px;
    opacity: 1;
  }
  9% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    top: 80px;
  }
  10% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    top: 90px;
  }
  19% {
    -webkit-transform: translateY(0) rotateZ(90deg) scale(1);
            transform: translateY(0) rotateZ(90deg) scale(1);
    top: 90px;
  }
  20% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 100px;
  }
  29% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 100px;
  }
  30% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 110px;
  }
  39% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 110px;
  }
  40% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 120px;
  }
  49% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 120px;
  }
  50% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 130px;
  }
  59% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 130px;
  }
  60% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 140px;
  }
  69% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 140px;
  }
  70% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 150px;
  }
  79% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 150px;
  }
  80% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 160px;
  }
  89% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 160px;
  }
  90% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 170px;
    opacity: 1;
  }
  99% {
    -webkit-transform: translateY(0) rotateZ(180deg) scale(1);
            transform: translateY(0) rotateZ(180deg) scale(1);
    top: 170px;
    opacity: 0;
  }
}





/* ----------------------------------------- */
/* Burbuja azul */
/* ----------------------------------------- */

@-webkit-keyframes burbuja-azul {
  0%, 100% {
    top: 140px;
    right: 33%;
    opacity: 1;
  }
  17% {
    top: 125px;
    right: 30%;
  }
  33% {
    top: 110px;
    right: 32%;
  }
  50% {
    top: 95px;
    right: 31%;
  }
  67% {
    top: 85px;
    right: 33%;
  }
  83% {
    top: 70px;
    right: 30%;
    opacity: 1;
  }
  99% {
    top: 55px;
    right: 33%;
    opacity: 0;
  }
  99.9% {
    top: 140px;
    right: 33%;
    opacity: 0;
  }
}

@keyframes burbuja-azul {
  0%, 100% {
    top: 140px;
    right: 33%;
    opacity: 1;
  }
  17% {
    top: 125px;
    right: 30%;
  }
  33% {
    top: 110px;
    right: 32%;
  }
  50% {
    top: 95px;
    right: 31%;
  }
  67% {
    top: 85px;
    right: 33%;
  }
  83% {
    top: 70px;
    right: 30%;
    opacity: 1;
  }
  99% {
    top: 55px;
    right: 33%;
    opacity: 0;
  }
  99.9% {
    top: 140px;
    right: 33%;
    opacity: 0;
  }
}





/* ----------------------------------------- */
/* Burbuja verde */
/* ----------------------------------------- */

@-webkit-keyframes burbuja-verde {
  0%, 100% {
    top: 160px;
    right: 27%;
    opacity: 1;
  }
  20% {
    top: 145px;
    right: 24%;
  }
  35% {
    top: 130px;
    right: 27%;
  }
  52% {
    top: 115px;
    right: 24%;
  }
  65% {
    top: 100px;
    right: 27%;
  }
  80% {
    top: 80px;
    right: 24%;
    opacity: 1;
  }
  99% {
    top: 65px;
    right: 27%;
    opacity: 0;
  }
  99.9% {
    top: 160px;
    right: 27%;
    opacity: 0;
  }
}

@keyframes burbuja-verde {
  0%, 100% {
    top: 160px;
    right: 27%;
    opacity: 1;
  }
  20% {
    top: 145px;
    right: 24%;
  }
  35% {
    top: 130px;
    right: 27%;
  }
  52% {
    top: 115px;
    right: 24%;
  }
  65% {
    top: 100px;
    right: 27%;
  }
  80% {
    top: 80px;
    right: 24%;
    opacity: 1;
  }
  99% {
    top: 65px;
    right: 27%;
    opacity: 0;
  }
  99.9% {
    top: 160px;
    right: 27%;
    opacity: 0;
  }
}





/* ----------------------------------------- */
/* Dragón */
/* ----------------------------------------- */

@-webkit-keyframes dragon {
  0%, 100% {
    -webkit-transform: translateY(0) rotateY(0) scale(0.9);
            transform: translateY(0) rotateY(0) scale(0.9);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    bottom: 50px;
    right: 14.2%;
  }
  24% {
    -webkit-transform: translateY(0) rotateY(0) scale(1.1);
            transform: translateY(0) rotateY(0) scale(1.1);
  }
  25% {
    -webkit-transform: translateY(0) rotateY(0) scale(0.9);
            transform: translateY(0) rotateY(0) scale(0.9);
    bottom: 20px;
    right: 22%;
  }
  26% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
    bottom: 20px;
    right: 22%;
  }
  50% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(0.9);
            transform: translateY(0) rotateY(180deg) scale(0.9);
    bottom: 50px;
    right: 14.2%;
  }
  75% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1.1);
            transform: translateY(0) rotateY(180deg) scale(1.1);
    bottom: 20px;
    right: 6%;
  }
  76% {
    -webkit-transform: translateY(0) rotateY(0deg) scale(1.1);
            transform: translateY(0) rotateY(0deg) scale(1.1);
    bottom: 20px;
    right: 6%;
  }
}

@keyframes dragon {
  0%, 100% {
    -webkit-transform: translateY(0) rotateY(0) scale(0.9);
            transform: translateY(0) rotateY(0) scale(0.9);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    bottom: 50px;
    right: 14.2%;
  }
  24% {
    -webkit-transform: translateY(0) rotateY(0) scale(1.1);
            transform: translateY(0) rotateY(0) scale(1.1);
  }
  25% {
    -webkit-transform: translateY(0) rotateY(0) scale(0.9);
            transform: translateY(0) rotateY(0) scale(0.9);
    bottom: 20px;
    right: 22%;
  }
  26% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1);
            transform: translateY(0) rotateY(180deg) scale(1);
    bottom: 20px;
    right: 22%;
  }
  50% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(0.9);
            transform: translateY(0) rotateY(180deg) scale(0.9);
    bottom: 50px;
    right: 14.2%;
  }
  75% {
    -webkit-transform: translateY(0) rotateY(180deg) scale(1.1);
            transform: translateY(0) rotateY(180deg) scale(1.1);
    bottom: 20px;
    right: 6%;
  }
  76% {
    -webkit-transform: translateY(0) rotateY(0deg) scale(1.1);
            transform: translateY(0) rotateY(0deg) scale(1.1);
    bottom: 20px;
    right: 6%;
  }
}





/* ----------------------------------------- */
/* Yayo */
/* ----------------------------------------- */

@-webkit-keyframes yayo {
  0%, 100% {
    right: 25%;
    transform: scaleX(-1);
  }
  10% {
    right: 26%;
    transform: scaleX(-1);
  }
  11% {
    right: 26%;
    transform: scaleX(1);
  }
  30% {
    right: 24%;
    transform: scaleX(1);
  }
  31% {
    right: 24%;
    transform: scaleX(-1);
  }
  45% {
    right: 25%;
    transform: scaleX(-1);
  }
}

@keyframes yayo {
  0%, 100% {
    right: 25%;
    transform: scaleX(-1);
  }
  10% {
    right: 26%;
    transform: scaleX(-1);
  }
  11% {
    right: 26%;
    transform: scaleX(1);
  }
  30% {
    right: 24%;
    transform: scaleX(1);
  }
  31% {
    right: 24%;
    transform: scaleX(-1);
  }
  45% {
    right: 25%;
    transform: scaleX(-1);
  }
}




/* ----------------------------------------- */
/* Latido */
/* ----------------------------------------- */

@-webkit-keyframes latido
{
  0%
  {
    transform: scale( 1.04 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( 1.04 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( 1.04 );
  }
  100%
  {
    transform: scale( 1.04 );
  }
}

@keyframes latido
{
  0%
  {
    transform: scale( 1.04 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( 1.04 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( 1.04 );
  }
  100%
  {
    transform: scale( 1.04 );
  }
}