#tuberiainicial {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-fill-opacity: 0;
  fill: #ff9900;
  fill-opacity: 0;
  @-webkit-animation-name: fill-in;
  @-webkit-animation-duration: 5s; 
  @-webkit-animation-fill-mode: forwards;
  @-moz-animation-name: fill-in;
  @-moz-animation-duration: 5s; 
  @-moz-animation-fill-mode: forwards;
  @-o-animation-name: fill-in;
  @-o-animation-duration: 5s; 
  @-o-animation-fill-mode: forwards;  
  animation-name: fill-in;
  animation-duration: 5s; 
  animation-fill-mode: forwards;  
} 

#tubini2 {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-fill-opacity: 0;
  fill: #FFF200;
  fill-opacity: 0;
  @-webkit-animation-name: fill-in;
  @-webkit-animation-duration: 5s; 
  @-webkit-animation-fill-mode: forwards;
  @-moz-animation-name: fill-in;
  @-moz-animation-duration: 5s; 
  @-moz-animation-fill-mode: forwards;
  @-o-animation-name: fill-in;
  @-o-animation-duration: 5s; 
  @-o-animation-fill-mode: forwards;  
  animation-name: fill-in;
  animation-duration: 5s; 
  animation-fill-mode: forwards;  
} 


#tuberiaprinc {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-fill-opacity: 0;
  fill: #ff9900;
  fill-opacity: 0;
  @-webkit-animation-name: fill-in;
  @-webkit-animation-duration: 5s; 
  @-webkit-animation-fill-mode: forwards;
  @--animation-delay: 2s;
  @-moz-animation-name: fill-in;
  @-moz-animation-duration: 5s; 
  @-moz-animation-fill-mode: forwards;
  @-moz-animation-delay: 1s;
  @-o-animation-name: fill-in;
  @-o-animation-duration: 5s; 
  @-o-animation-fill-mode: forwards;  
  animation-name: fill-in;
  animation-duration: 5s; 
  animation-fill-mode: forwards;  
  animation-delay: 1s;
} 

#tuberiamed {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-fill-opacity: 0;
  fill: #ff9900;
  fill-opacity: 0;
  @-webkit-animation-name: fill-in;
  @-webkit-animation-duration: 3s; 
  @-webkit-animation-fill-mode: forwards;  
  @-webkit-animation-delay: 2s;
  @-o-animation-name: fill-in;
  @-o-animation-duration: 3s; 
  @-o-animation-fill-mode: forwards;  
  @-o-animation-delay: 2s;
  @-moz-animation-name: fill-in;
  @-moz-animation-duration: 3s; 
  @-moz-animation-fill-mode: forwards;  
  @-moz-animation-delay: 2s;
  animation-name: fill-in;
  animation-duration: 3s; 
  animation-fill-mode: forwards;  
  animation-delay: 2s;  
} 

#tubmed2 {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-fill-opacity: 0;
  fill: #FFF200;
  fill-opacity: 0;
  @-webkit-animation-name: fill-in;
  @-webkit-animation-duration: 3s; 
  @-webkit-animation-fill-mode: forwards;  
  @-webkit-animation-delay: 2s;
  @-o-animation-name: fill-in;
  @-o-animation-duration: 3s; 
  @-o-animation-fill-mode: forwards;  
  @-o-animation-delay: 2s;
  @-moz-animation-name: fill-in;
  @-moz-animation-duration: 3s; 
  @-moz-animation-fill-mode: forwards;  
  @-moz-animation-delay: 2s;
  animation-name: fill-in;
  animation-duration: 3s; 
  animation-fill-mode: forwards;  
  animation-delay: 2s;  
} 

#tuberiafin {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-fill-opacity: 0;
  fill: #ff9900;
  fill-opacity: 0;
  @-webkit-animation-name: fill-in;
  @-webkit-animation-duration: 3s; 
  @-webkit-animation-fill-mode: forwards;  
  @-webkit-animation-delay: 3s;
  @-o-animation-name: fill-in;
  @-o-animation-duration: 3s; 
  @-o-animation-fill-mode: forwards;  
  @-o-animation-delay: 3s;
  @-moz-animation-name: fill-in;
  @-moz-animation-duration: 3s; 
  @-moz-animation-fill-mode: forwards;  
  @-moz-animation-delay: 3s;
  animation-name: fill-in;
  animation-duration: 3s; 
  animation-fill-mode: forwards;  
  animation-delay: 3s;
  } 


#tubfin2 {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-fill-opacity: 0;
  fill: #FFF200;
  fill-opacity: 0;
  @-webkit-animation-name: fill-in;
  @-webkit-animation-duration: 3s; 
  @-webkit-animation-fill-mode: forwards;  
  @-webkit-animation-delay: 3s;
  @-o-animation-name: fill-in;
  @-o-animation-duration: 3s; 
  @-o-animation-fill-mode: forwards;  
  @-o-animation-delay: 3s;
  @-moz-animation-name: fill-in;
  @-moz-animation-duration: 3s; 
  @-moz-animation-fill-mode: forwards;  
  @-moz-animation-delay: 3s;
  animation-name: fill-in;
  animation-duration: 3s; 
  animation-fill-mode: forwards;  
  animation-delay: 3s;
  } 

@-webkit-keyframes fill-in {
 from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@-moz-keyframes fill-in {
 from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@-o-keyframes fill-in {
 from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@keyframes fill-in {
 from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

@-webkit-keyframes fill-in-combustion {
   0% {fill-opacity: 0;}
25% { fill-opacity: 1; fill:#ff6600;}
50% { fill-opacity: 0;}
75% {fill-opacity:1; fill:#0099ff;   }
100% { fill-opacity: 0;}
}

@-moz-keyframes fill-in-combustion {
   0% {fill-opacity: 0;}
25% { fill-opacity: 1; fill:#ff6600;}
50% { fill-opacity: 0;}
75% {fill-opacity:1; fill:#0099ff;   }
100% { fill-opacity: 0;}
}

@-o-keyframes fill-in-combustion {
   0% {fill-opacity: 0;}
25% { fill-opacity: 1; fill:#ff6600;}
50% { fill-opacity: 0;}
75% {fill-opacity:1; fill:#0099ff;   }
100% { fill-opacity: 0;}
}

@keyframes fill-in-combustion {
    0% {fill-opacity: 0;}
25% { fill-opacity: 1; fill:#ff6600;}
50% { fill-opacity: 0;}
75% {fill-opacity:1; fill:#0099ff;   }
100% { fill-opacity: 0;}
}

@-webkit-keyframes fill-in-combustion2 {
   0% {fill-opacity: 0;}
25% {fill-opacity:1; fill:#0099ff;   }
50% { fill-opacity: 0;}
75% { fill-opacity: 1; fill:#ff6600;}
100% { fill-opacity: 0;}
}

@-moz-keyframes fill-in-combustion2 {
     0% {fill-opacity: 0;}
25% {fill-opacity:1; fill:#0099ff;   }
50% { fill-opacity: 0;}
75% { fill-opacity: 1; fill:#ff6600;}
100% { fill-opacity: 0;}
}

@-o-keyframes fill-in-combustion2 {
     0% {fill-opacity: 0;}
25% {fill-opacity:1; fill:#0099ff;   }
50% { fill-opacity: 0;}
75% { fill-opacity: 1; fill:#ff6600;}
100% { fill-opacity: 0;}
}

@keyframes fill-in-combustion2 {
    0% {fill-opacity: 0;}
25% {fill-opacity:1; fill:#0099ff;   }
50% { fill-opacity: 0;}
75% { fill-opacity: 1; fill:#ff6600;}
100% { fill-opacity: 0;}
}



@-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; }
}




#piston1, #piston3, #piston5, #piston7, #piston9, #base1, #base3, #base5, #base7, #base9 {
   @-webkit-animation: pist-mov 2s infinite;
   @-webkit-animation-delay: 5s;
   @-moz-animation: pist-mov 2s infinite;
   @-moz-animation-delay: 5s;
   @-o-animation: pist-mov 2s infinite;
   @-o-animation-delay: 5s;
   animation: pist-mov 2s infinite;
   animation-delay: 5s;
}

#piston2, #piston4, #piston6, #piston8, #base2, #base4, #base6, #base8 {
   @-webkit-animation: pist-mov-2 2s infinite;
   @-webkit-animation-delay: 5s;
   @-moz-animation: pist-mov-2 2s infinite;
   @-moz-animation-delay: 5s;
   @-o-animation: pist-mov-2 2s infinite;
   @-o-animation-delay: 5s;
   animation: pist-mov-2 2s infinite;
   animation-delay: 5s;

}

#cuadro1, #cuadro3, #cuadro5, #cuadro7, #cuadro9 {

    @-webkit-animation: fill-in-combustion 4s infinite;
    @-webkit-animation-delay: 6s;
    @-moz-animation: fill-in-combustion 4s infinite;
    @-moz-animation-delay: 6s;
    @-o-animation: fill-in-combustion 4s infinite;
    @-o-animation-delay: 6s;
    animation: fill-in-combustion 4s infinite;
    animation-delay: 6s;
    fill: #ff6600;
     fill-opacity: 0;

}

#cuadro2, #cuadro4, #cuadro6, #cuadro8 {

   animation: fill-in-combustion2 4s infinite;
    animation-delay: 5s;
    fill: #0099ff;
     fill-opacity: 0;
}



@keyframes pist-mov {
  0%, 100% {
    transform: translate(0, 0px);
  }
  
  50% {
    transform: translate(0, -14px);
  }
  
}

@keyframes pist-mov-2 {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(0, 14px);
  }
  
}

#linea3, #energia, #energia2, #energia3, #energia4, #energia5, #energia6, #energia7, #energia8, #humo, #humo1, #humo3, #humo2, #humo4, #humo5, #burbujas, #burbujas2, #burbujas3, #burbujas4 {
  opacity: 0;
}


#linea1, #linea1-2, #linea2, #linea2-2 {
  animation: rotacion 0.1s infinite;
  animation-delay: 6s;
  animation-timing-function: ease-out;
}

#linea1-2, #linea2-2, #linea3-1, #linea3-2 {
  animation: rotacion 0.1s infinite;
  animation-delay: 9s;
  animation-timing-function: ease-out;
}

@keyframes rotacion {

  0% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(0, 12px);
  }
  100%{
    transform: translate (0, 2px);
  }

}

#humo {
  animation: humocaldera 3s infinite;
  animation-delay: 6.5s;
  animation-timing-function: none;
}

#humo1 {
  animation: humocaldera2 3s infinite;
  animation-delay: 7s;
  animation-timing-function: none;
}

#humo3 {
  animation: humocaldera3 3s infinite;
  animation-delay: 8s;
  animation-timing-function: none;
}


@keyframes humocaldera {

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

    30% {
      opacity: 1;
    }

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

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

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

@keyframes humocaldera2 {

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

    30% {
      opacity: 1;
    }

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

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

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

@keyframes humocaldera3 {

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

    30% {
      opacity: 1;
    }

    50% {
      transform: translate(-125px, 0);
    }

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

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

#humo2 {
  animation: humoatmos 3s infinite;
  animation-delay: 7s;
}

#humo4 {
  animation: humoatmos 2.5s infinite;
  animation-delay: 8s;
}

#humo5 {
  animation: humoatmos 3s infinite;
  animation-delay: 9.5s;
}

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

  50% {
    opacity: 1;
  }

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


#burbujas {
  animation: ebullicion 3s infinite;
  animation-delay: 7s;
}

#burbujas2 {
  animation: ebullicion 2s infinite;
  animation-delay: 8s;
}

#burbujas3 {
  animation: ebullicion 3.5s infinite;
  animation-delay: 7.5s;
}

#burbujas4 {
  animation: ebullicionderecha 1s infinite;
  animation-delay: 8s;
}


@keyframes ebullicion {

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

  10% {
    opacity: 1;
  }

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

@keyframes ebullicionderecha {
  0% {
    transform: translate(0px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(50px, 0);
    opacity: 1;
  }
}

#helices {
  animation: apagar 0.1s;
  animation-delay: 10s;
  transform-origin: center;
  animation-fill-mode: forwards;
}

#rueda_1_ {
  animation: fill-in 0.2s infinite;
  animation-delay:10s;
  fill: #8C8C8C;
  fill-opacity:0;
}




@keyframes apagar {

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

}


#energia {
  animation: energialuz 3s infinite;
  animation-delay: 8s;
} 

#energia2 {
  animation: energialuz2 3s infinite;
  animation-delay: 10s;
}

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

  10% {
    opacity: 1;
  }

  30% {

    transform: translate(55px, 0); 
  }

  60% {

    transform: translate(55px, -70px); 

  }

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

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

  10% {
    opacity: 1;
  }

  30% {

    transform: translate(65px, 0); 
  }

  60% {

    transform: translate(65px, 70px); 

  }

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


#led1, #led2 {
  fill: red;
  fill-opacity: 0;
  animation-name: fill-in;
  animation-duration: 1s; 
  animation-fill-mode: forwards;
  animation-delay: 11s; 
}



#linea { animation: 2s rotate360 infinite linear; animation-delay: 11s; } 

@keyframes rotate360 {
  0%, 100% {
   transform: translate(0px);
  }
   30% { 
     transform: translate(-5px); 
    }

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

#energia3 {
  animation: energialuz3 2s infinite;
  animation-delay: 12s;
}

@keyframes energialuz3 {

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

  10% {
    opacity: 1;
  }

  30% {

    transform: translate(0, 50px);

  }

  90% {
    opacity: 1;
  }

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


}


#energia4 {
  animation: energialuz4 2s infinite;
  animation-delay: 16s;

}


@keyframes energialuz4 {

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

  10% {
    opacity: 1;
  }

  30% {

    transform: translate(15px, 0); 
  }

  80% {
    opacity: 1;
  }
  
  100% {

    transform: translate(15px, -100px); 
    opacity: 0;

  }

}

#energia5, #energia6, #energia7, #energia8 {

    animation: energialuz5 2s infinite;
} 

#energia5 {
  animation-delay: 18s;
}
#energia6 {
  animation-delay: 19s;
}
#energia7 {
  animation-delay: 20s;
}
#energia8 {
  animation-delay: 21s;
}

@keyframes energialuz5 {

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

  20% {

    transform: translate(0, 10px); 
  }

  80% {
    opacity: 1;
  }
  
  100% {

    transform: translate(-60px, -80px); 
    opacity: 0;

  }
}

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

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



#arrow {
  animation: flash 1s infinite;
  animation-delay: 21s;
  stroke: white;
}

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




}