#ciudad {
  transform: translate(150px, -130px);
  -webkit-transform: translate(150px, -130px);
}

#agua {
  animation: olas 5s infinite;
  -webkit-animation: olas 5s infinite;
}

@keyframes olas {

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

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

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

@-webkit-keyframes olas {

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

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

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

#tuberia {
  stroke :white;
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-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;  

} 

#tuberia2 {
  @-webkit-fill: #ff9900;
  @-webkit-fill-opacity: 0;
  @-moz-fill: #ff9900;
  @-moz-fill-opacity: 0;
  @-o-fill: #ff9900;
  @-o-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;  
} 


@keyframes fill-in {
 from { stroke: white; }
  to { stroke: #ff9900; }
}

@-webkit-keyframes fill-in {
 from { stroke: white; }
  to { stroke: #ff9900; }
}

#pist1, #pist3, #pist5, #pist7, #pist9, #base1, #base3, #base5, #base7, #base9 {
   animation: pist-mov 2s infinite;
   animation-delay: 4s;

   -webkit-animation: pist-mov 2s infinite;
   -webkit-animation-delay: 4s;
}

#pist2, #pist4, #pist6, #pist8, #base2, #base4, #base6, #base8 {

   animation: pist-mov-2 2s infinite;
   animation-delay: 4s;

   -webkit-animation: pist-mov-2 2s infinite;
   -webkit-animation-delay: 4s;

}

#cuadro1, #cuadro3, #cuadro5, #cuadro7, #cuadro9 {
    animation: fill-in-combustion 4s infinite;
    animation-delay: 5s;
    fill: #ff6600;
     fill-opacity: 0;


    -webkit-animation: fill-in-combustion 4s infinite;
    -webkit-animation-delay: 5s;
    -webkit-fill: #ff6600;
    -webkit-fill-opacity: 0;

}

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

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


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



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

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


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

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



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

#energia, #energia2, #energia3, #energia4, #energia5, #energia6, #humo, #humo3, #humo2, #humo4, #aire, #burbujas, #burbujas2   {
  opacity: 0;
}


#humo {
  animation: humocaldera 5s infinite;
  animation-delay: 5.5s;
  animation-timing-function: none;

  -webkit-animation: humocaldera 5s infinite;
  -webkit-animation-delay: 5.5s;
  -webkit-animation-timing-function: none;
}

#humo2 {
  animation: humocaldera2 5s infinite;
  animation-delay: 6s;
  animation-timing-function: none;

  -webkit-animation: humocaldera2 5s infinite;
  -webkit-animation-delay: 6s;
  -webkit-animation-timing-function: none;
}

#humo3 {
  animation: humocaldera3 5s infinite;
  animation-delay: 7s;
  animation-timing-function: none;

  -webkit-animation: humocaldera3 5s infinite;
  -webkit-animation-delay: 7s;
  -webkit-animation-timing-function: none;
}


@keyframes humocaldera {

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

    20% {
      opacity: 1;
    }

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

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

@keyframes humocaldera2 {

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

    10% {
      opacity: 1;
    }

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

    100% {
    transform: translate(-100px, -350px);
    opacity: 0; 
  }
}
@keyframes humocaldera3 {

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

    10% {
      opacity: 1;
    }

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

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



@-webkit-keyframes humocaldera {

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

    20% {
      opacity: 1;
    }

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

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

@-webkit-keyframes humocaldera2 {

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

    10% {
      opacity: 1;
    }

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

    100% {
    transform: translate(-100px, -350px);
    opacity: 0; 
  }
}
@-webkit-keyframes humocaldera3 {

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

    10% {
      opacity: 1;
    }

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

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

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

  -webkit-animation: ebullicion 3s infinite;
  -webkit-animation-delay: 7s;
}

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

  -webkit-animation: ebullicion 2s infinite;
  -webkit-animation-delay: 8s;
}

@keyframes ebullicion {

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

  10% {
    opacity: 1;
  }

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

@-webkit-keyframes ebullicion {

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

  10% {
    opacity: 1;
  }

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


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

  -webkit-animation: rotacion 0.1s infinite;
  -webkit-animation-delay: 6s;
  -webkit-animation-timing-function: ease-out;
}

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

  -webkit-animation: rotacion 0.1s infinite;
  -webkit-animation-delay: 9s;
  -webkit-animation-timing-function: ease-out;
}

@keyframes rotacion {

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

}

@-webkit-keyframes rotacion {

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

}


#aire {
  animation: airecaldera 3s infinite;
  animation-delay: 9s;
  animation-timing-function: none;

  -webkit-animation: airecaldera 3s infinite;
  -webkit-animation-delay: 9s;
  -webkit-animation-timing-function: none;
}


@keyframes airecaldera {

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

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

    40% {
      transform: translate(65px, -14px);
    }

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

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

@-webkit-keyframes airecaldera {

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

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

    40% {
      transform: translate(65px, -14px);
    }

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

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


#energia {
  animation: moving 1s infinite;
  animation-delay: 10s;
  animation-timing-function: none;

  -webkit-animation: moving 1s infinite;
  -webkit-animation-delay: 10s;
  -webkit-animation-timing-function: none;
}

#energia2 {
  animation: moving 1s infinite;
  animation-delay: 10.5s;
  animation-timing-function: none;

  -webkit-animation: moving 1s infinite;
  -webkit-animation-delay: 10.5s;
  -webkit-animation-timing-function: none;
}

#energia3 {
  animation: moving2 1s infinite;
  animation-delay: 11.5s;
  animation-timing-function: none;

  -webkit-animation: moving2 1s infinite;
  -webkit-animation-delay: 11.5s;
  -webkit-animation-timing-function: none;
}

#energia4 {
  animation: moving2 1s infinite;
  animation-delay: 12s;
  animation-timing-function: none;

  -webkit-animation: moving2 1s infinite;
  -webkit-animation-delay: 12s;
  -webkit-animation-timing-function: none;
}

#energia5 {
  animation: moving3 1s infinite;
  animation-delay: 13s;
  animation-timing-function: none;

  -webkit-animation: moving3 1s infinite;
  -webkit-animation-delay: 13s;
  -webkit-animation-timing-function: none;
}

#energia6 {
  animation: moving3 1s infinite;
  animation-delay: 13.5s;
  animation-timing-function: none;

  -webkit-animation: moving3 1s infinite;
  -webkit-animation-delay: 13.5s;
  -webkit-animation-timing-function: none;
}



@keyframes moving {

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

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

}

@keyframes moving2 {

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

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

}

@keyframes moving3 {

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

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

}

@-webkit-keyframes moving {

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

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

}

@-webkit-keyframes moving2 {

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

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

}

@-webkit-keyframes moving3 {

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

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

}


#arrow {
  animation: flash 1s infinite;
  animation-delay: 12s;
  fill: white;

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

#arrow2 {
  animation: flash 1s infinite;
  animation-delay: 15s;
  fill:; white;

  -webkit-animation: flash 1s infinite;
  -webkit-animation-delay: 15s;
  -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: 15.5s;
  opacity: 0;
  stroke: #FFFF00;

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

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

  -webkit-animation: fill-in2 1s infinite;
  -webkit-animation-delay: 16s;
  -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; }
}