#switchon, #switchmed, #ventanasamarillas, #panel, #energia, #energia1-2, #energia1-3, #energia1-4, #energia2, #energia3, #energia4, #energia5, #energia6, #panelamarillo6, #panelamarillo, #panelamarillo2, #panelamarillo3, #panelamarillo4, #panelamarillo5, #bombitaluz, #positivo, #positivo2, #positivo3, #positivo4, #positivo5, #positivo6, #negativo, #negativo2, #negativo3, #negativo4, #negativo5, #negativo6, #rayos {
  opacity: 0;
}


/*#rayos {

  animation: lightFall 2s infinite;
  animation-delay: 1s;
}


@keyframes lightFall {

0% {
    transform: translate(0, 0);
  }
  
  10% { 
  opacity: 1;
 } 
  
  100% {
    transform: translate(50px,150px);
}
}
*/

#sun {
  animation: sunShine 10s infinite;
}

@keyframes sunShine {

  0% {
    transform: scale(0.8, 0.8);
  }

  50% {
    transform: scale(1.2, 1.2);
  }

  100% {
    transform: scale(0.8, 0.8);
  }
}


#signospositivos {

  animation: positive 1s forwards;
  animation-delay: 3s;
}


@keyframes positive {

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

#signosnegativos {

  animation: negative 1s forwards;
  animation-delay: 3s;
}


@keyframes negative {

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

#signosnegativos2 {

  animation: negative2 1s forwards;
  animation-delay: 3s;
}


@keyframes negative2 {

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

#negativo {

  animation: negativoUp 7s infinite;
  animation-delay: 4s;
  animation-timing-function: linear;
}

#negativo2 {

  animation: negativoUp 7s infinite;
  animation-delay: 5.2s;
  animation-timing-function: linear;
}

#negativo3 {

  animation: negativoUp 7s infinite;
  animation-delay: 6.4s;
  animation-timing-function: linear;
}

#negativo4 {

  animation: negativoUp 7s infinite;
  animation-delay: 7.6s;
  animation-timing-function: linear;
}

#negativo5 {

  animation: negativoUp 7s infinite;
  animation-delay: 8.8s;
  animation-timing-function: linear;
}

#negativo6 {

  animation: negativoUp 7s infinite;
  animation-delay: 10s;
  animation-timing-function: linear;
}


@keyframes negativoUp {

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

50% {
  transform: translate(93px, -122px);
}

70%{
  transform: translate(138px, -130px);
}
80% {
  transform: translate(175px, -115px);
  opacity: 1;
}

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

}


#positivo {

  animation: positivoUp 7s infinite;
  animation-delay: 4s;
  animation-timing-function: linear;
}

#positivo2 {

  animation: positivoUp 7s infinite;
  animation-delay: 5.2s;
  animation-timing-function: linear;
}

#positivo3 {

  animation: positivoUp 7s infinite;
  animation-delay: 6.4s;
  animation-timing-function: linear;
}

#positivo4 {

  animation: positivoUp 7s infinite;
  animation-delay: 7.6s;
  animation-timing-function: linear;
}

#positivo5 {

  animation: positivoUp 7s infinite;
  animation-delay: 8.8s;
  animation-timing-function: linear;
}

#positivo6 {

  animation: positivoUp 7s infinite;
  animation-delay: 10s;
  animation-timing-function: linear;
}

@keyframes positivoUp {

0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  
50% {
    transform: translate(75px,-95px);
} 

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

70%{
  transform: translate(94px, -60px);
}
80% {
  transform: translate(94px, -100px);
  opacity: 1;
}

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

#switchoff {
  animation: switching 0.5s forwards;
  animation-delay: 6s;
}

#switchmed {
  animation: switchingmed   1s forwards;
  animation-delay: 6s;
}

#switchon {
  animation: switchingok 0.5s forwards;
  animation-delay: 6.5s;
}

@keyframes switching {

    0% {
      opacity: 1;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
}


@keyframes switchingmed {

    0% {
      opacity: 0;
    }

    40% {
      opacity: 0;

    }

    50% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
}

@keyframes switchingok {

    0% {
      opacity: 0;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}



#bombitaluz {

  animation: lightness 1s infinite;
  animation-delay: 11s;

}

@keyframes lightness {

  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100%{
    opacity: 0.4;
  }
}

/*#panel {

  animation: paneles 2s infinite;
  animation-delay: 12s;
}

@keyframes paneles {

  0% {
    transform: translate(0,0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(97px,621px) scale(0.2);
    opacity: 1;
  }
}
*/
#panelamarillo {

  animation: panelesMoving 2s infinite;
  animation-delay: 14s;
  animation-timing-function: linear;
}

#panelamarillo3 {

  animation: panelesMoving 2s infinite;
  animation-delay: 18s;
  animation-timing-function: linear;
}

#panelamarillo5 {

  animation: panelesMoving 2s infinite;
  animation-delay: 22s;
  animation-timing-function: linear;
}
@keyframes panelesMoving {

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

  100% {
    transform: translate(108px, -150px);
    opacity: 1;
  }
}



#panelamarillo2 {

  animation: panelesMovingg 2s infinite;
  animation-timing-function: linear;
  animation-delay: 16s;
}

#panelamarillo4 {

  animation: panelesMovingg 2s infinite;
  animation-timing-function: linear;
  animation-delay: 20s;
}

#panelamarillo6 {

  animation: panelesMovingg 2s infinite;
  animation-timing-function: linear;
  animation-delay: 24s;
}


@keyframes panelesMovingg {

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

  100% {
    transform: translate(-112px, 155px);
    opacity: 1;
  }
}

#energia, #energia1-2, #energia1-3, #energia1-4 {
  animation: energiaMove 4.5s infinite;
  animation-delay: 26s;
}


@keyframes energiaMove {

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

  90% {
    opacity: 1;
  }

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


#energia3 {

  animation: energiaTransform 2s infinite;
  animation-delay: 30s;
  animation-timing-function: linear;
}

#energia4 {

  animation: energiaTransform 2s infinite;
  animation-delay: 28.5s;
  animation-timing-function: linear;
}

#energia5 {

  animation: energiaTransform 2s infinite;
  animation-delay: 29s;
  animation-timing-function: linear;
}


@keyframes energiaTransform {

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

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

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

}



#ventanasamarillas {
  animation: shine 1s infinite;
  animation-delay: 32s;
}


@keyframes shine {
 0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100%{
    opacity: 0
  }
}

#cajaluz {
  animation: shining 1s infinite;
  animation-delay: 32s;
  fill-opacity: 0;
  fill: #FFFFFF;
}


#luzluz, #luzluz2, #luzluz3, #luzluz4, #luzluz5 {
	animation: shining 1s infinite;
  animation-delay: 32s;	
  fill: #B6B6B6;
}

@keyframes shining {
   0% {fill-opacity: 1;fill: #B6B6B6;}
50% { fill-opacity: 1; fill:#FBED21;}
100% { fill-opacity: 1;fill: #B6B6B6;}
}