#vastas2, #vastas3, #vastas4, #energia1, #energia2, #energia3, #energia4, #energia5, #energia6, #viento, #viento2, #viento3, #viento4, #rueda2 {
  opacity: 0;
}  


#viento {
  animation: vientopegando 1s infinite;

  -webkit-animation: vientopegando 1s infinite;
}
#viento2 {
  animation: vientopegando 1s infinite;
  animation-delay:0.6s;

  -webkit-animation: vientopegando 1s infinite;
  -webkit-animation-delay:0.6s;
}
#viento3 {
  animation: vientopegando 1s infinite;
  animation-delay:1.2s;

  -webkit-animation: vientopegando 1s infinite;
  -webkit-animation-delay:1.2s;
}
#viento4 {
  animation: vientopegando 1s infinite;
  animation-delay:1.8s;

  -webkit-animation: vientopegando 1s infinite;
  -webkit-animation-delay:1.8s;
}

@keyframes vientopegando {
  0% {
    opacity: 1;
    transform: translate(0,0);
  }

  100% {
    transform: translate(100px, -100px);
    opacity: 0;
  }
}

@-webkit-keyframes vientopegando {
  0% {
    opacity: 1;
    transform: translate(0,0);
  }

  100% {
    transform: translate(100px, -100px);
    opacity: 0;
  }
}

#vastas1 {
  animation: vastasrotation 1.5s infinite;
  animation-delay: 3s;

  -webkit-animation: vastasrotation 1.5s infinite;
  -webkit-animation-delay: 3s;
}


@keyframes vastasrotation {

  0% {
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes vastasrotation {

  0% {
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


#vastas2 {
  animation: vastasrotation2 1.5s infinite;
  animation-delay: 3s;

  -webkit-animation: vastasrotation2 1.5s infinite;
  -webkit-animation-delay: 3s;
}


@keyframes vastasrotation2 {

  0% {
    opacity: 0;
  }

  24% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  49% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes vastasrotation2 {

  0% {
    opacity: 0;
  }

  24% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  49% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


#vastas3 {
  animation: vastasrotation3 1.5s infinite;
  animation-delay: 3s;

  -webkit-animation: vastasrotation3 1.5s infinite;
  -webkit-animation-delay: 3s;
}


@keyframes vastasrotation3 {

  0% {
    opacity: 0;
  }


  49% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  74% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


@-webkit-keyframes vastasrotation3 {

  0% {
    opacity: 0;
  }


  49% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  74% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


#vastas4 {
  animation: vastasrotation4 1.5s infinite;
  animation-delay: 3s;

  -webkit-animation: vastasrotation4 1.5s infinite;
  -webkit-animation-delay: 3s;
}


@keyframes vastasrotation4 {

  0% {
    opacity: 0;
  }

  74% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

 99% {
  opacity: 1;
 }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes vastasrotation4 {

  0% {
    opacity: 0;
  }

  74% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

 99% {
  opacity: 1;
 }

  100% {
    opacity: 0;
  }
}



#energia1 {

  animation: energiamoving 5s infinite;
  animation-delay: 4s;
  -webkit-animation: energiamoving 5s infinite;
  -webkit-animation-delay: 4s;
}

@keyframes energiamoving {

    0% {
      opacity: 0;
      transform: translate(0,0);
    }

    10% {
      opacity: 1;
      transform: translate(3px, -19px);
    }

    20% {
      transform: translate(30px, 5px);
    }

    30% {
     transform: translate(30px, 35px);
    }

    50% {
      transform: translate(-30px, 80px);
    }

    70% {
      transform: translate(-5px, 350px);
    }

    85% {
      transform: translate(130px, 250px);
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate(80px, 180px);
    }
}

@-webkit-keyframes energiamoving {

    0% {
      opacity: 0;
      transform: translate(0,0);
    }

    10% {
      opacity: 1;
      transform: translate(3px, -19px);
    }

    20% {
      transform: translate(30px, 5px);
    }

    30% {
     transform: translate(30px, 35px);
    }

    50% {
      transform: translate(-30px, 80px);
    }

    70% {
      transform: translate(-5px, 350px);
    }

    85% {
      transform: translate(130px, 250px);
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate(80px, 180px);
    }
}

#energia2 {

  animation: energiamoving2 3s infinite;
  animation-delay: 2s;

  -webkit-animation: energiamoving2 3s infinite;
  -webkit-animation-delay: 2s;
}  

#energia3 {
  animation: energiamoving2 3s infinite;
  animation-delay: 4.5s;

  -webkit-animation: energiamoving2 3s infinite;
  -webkit-animation-delay: 4.5s;
}


@keyframes energiamoving2 {

  0% {
    opacity: 1;
    transform: translate(0,0);
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-330px, -230px);
  }

}

@-webkit-keyframes energiamoving2 {

  0% {
    opacity: 1;
    transform: translate(0,0);
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-330px, -230px);
  }

}

#energia4 {
  animation: energiamoving3 2s infinite;
  animation-delay: 7s;

  -webkit-animation: energiamoving3 2s infinite;
  -webkit-animation-delay: 7s;
}

#energia5 {
  animation: energiamoving3 2.5s infinite;
  animation-delay: 8s;

  -webkit-animation: energiamoving3 2.5s infinite;
  -webkit-animation-delay: 8s;
}
#energia6 {
  animation: energiamoving3 2s infinite;
  animation-delay: 8.5s;

  -webkit-animation: energiamoving3 2s infinite;
  -webkit-animation-delay: 8.5s;
}
@keyframes energiamoving3 {

   0% {
    opacity: 1;
    transform: translate(0,0);
  }

  60% {
    transform: translate(220px, -150px);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(220px, -250px);
  }
}

@-webkit-keyframes energiamoving3 {

   0% {
    opacity: 1;
    transform: translate(0,0);
  }

  60% {
    transform: translate(220px, -150px);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(220px, -250px);
  }
}


#flecha {
  animation: flash 1s infinite;
  animation-delay: 9s;
  fill: white;

  -webkit-animation: flash 1s infinite;
  -webkit-animation-delay: 9s;
  -webkit-fill: white;
}

@keyframes flash {
0% {fill:white;}
50% { fill: #FFFF00;}
100% { fill: white;}
}

@-webkit-keyframes flash {
0% {fill:white;}
50% { fill: #FFFF00;}
100% { fill: white;}
}


#luces {
  animation: fill-in2 1s infinite;
  animation-delay: 8s;
  opacity: 0;
  stroke: #FFFF00;

  -webkit-animation: fill-in2 1s infinite;
  -webkit-animation-delay: 8s;
  -webkit-opacity: 0;
  -webkit-stroke: #FFFF00;
}

#luces2 {
  animation: fill-in2 1s infinite;
  animation-delay: 10.5s;
  opacity: 0;
  stroke:#FFFF00;

  -webkit-animation: fill-in2 1s infinite;
  -webkit-animation-delay: 10.5s;
  -webkit-opacity: 0;
  -webkit-stroke:#FFFF00;
}


@-webkit-keyframes fill-in2 {
 0%, 100% {
  opacity: 0;
 }
  50% { opacity: 1; }
}

@-moz-keyframes fill-in2 {
 0%, 100% {
  opacity: 0;
 }
  50% { opacity: 1; }
}

@-o-keyframes fill-in2 {
 0%, 100% {
  opacity: 0;
 }
  50% { opacity: 1; }
}

@keyframes fill-in2 {
 0%, 100% {
  opacity: 0;
 }
  50% { opacity: 1; }
}

#rueda1 {

  animation: giragira 0.3s infinite;
  animation-delay:3s;

  -webkit-animation: giragira 0.3s infinite;
  -webkit-animation-delay:3s;
}


@keyframes giragira {

    0% {
      opacity: 0;
    }
    49% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    99% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
}

@-webkit-keyframes giragira {

    0% {
      opacity: 0;
    }
    49% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    99% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
}

#rueda2 {

  animation: giragira2 0.3s infinite;
  animation-delay:3s;

  -webkit-animation: giragira2 0.3s infinite;
  -webkit-animation-delay:3s;
}


@keyframes giragira2 {

    0% {
      opacity: 1;
    }

    49%{
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
}

@-webkit-keyframes giragira2 {

    0% {
      opacity: 1;
    }

    49%{
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
}