#piedras, #piedras2, #piedras4, #piedras5, #piedras6, #camion, #camion2, #carga, #carga2, #humo, #humo2, #humo3, #humo4, #humo5, #burbujas, #burbujas2, #burbujasaire, #burbujasizq, #energy, #energy2, #energy3, #energy4, #energy5, #energy6, #energy7, #energygrande, #burbujascond, #gota, #gota2, #gota3, #tuboagua, #tuboagua2, #btnF_1_ {
    opacity: 0;
}

#carbon {
    animation: conveyor 20s infinite;
    animation-timing-function: linear;
    -webkit-animation: conveyor 20s infinite;
    -webkit-animation-timing-function: linear;
}

#carbon3 {
    animation: conveyor2 15s infinite;
    animation-timing-function: linear;
    -webkit-animation: conveyor2 15s infinite;
    -webkit-animation-timing-function: linear;
}

#piedras {
    animation: caida 1s infinite;
    -webkit-animation: caida 1s infinite;
}

#piedras2 {
    animation: caida2 6s infinite;
    animation-delay: 2s;
    -webkit-animation: caida2 6s infinite;
    -webkit-animation-delay: 2s;
}

#piedras3 {
    animation: caida3 2s infinite;
    animation-timing-function: linear;
    -webkit-animation: caida3 2s infinite;
    -webkit-animation-timing-function: linear;
}

#piedras4 {
    animation: caida 2s infinite;
    animation-timing-function: linear;
    animation-delay: 4s;
    -webkit-animation: caida 2s infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 4s;
}

#piedras5 {
    animation: caida 1s infinite;
    animation-delay: 4s;
    -webkit-animation: caida 1s infinite;
    -webkit-animation-delay: 4s;
}

#carbonceniza {
    animation: conveyor3 15s infinite;
    animation-timing-function: linear;
    animation-delay: 5s;
    -webkit-animation: conveyor3 15s infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 5s;
}

#carboncaldera {
    animation: conveyor4 15s infinite;
    animation-timing-function: linear;
    animation-delay: 4s;
    -webkit-animation: conveyor4 15s infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 4s;
}

#carboncaldera2-1 {
    animation: conveyor6 3s infinite;
    animation-timing-function: linear;
    animation-delay: 4s;
    -webkit-animation: conveyor6 3s infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 4s;
}

#carboncaldera2-2 {
    animation: conveyor7 4s infinite;
    animation-timing-function: linear;
    animation-delay: 4s;
    -webkit-animation: conveyor7 4s infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 4s;
}

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

    2% {
        opacity: 1;
    }

    40% {
        transform: translate(30px, 10px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    2% {
        opacity: 1;
    }

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

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

    50% {
        transform: translate(25px, -2px);
    }

    70% {
        opacity: 1;
    }

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

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

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

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

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

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

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

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

    100% {
        transform: translate(12px,-6px);
    }
}

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

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

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

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

@-webkit-keyframes caida2 {
    0% {
        transform: translate(0, 0);
    }

    2% {
        opacity: 1;
    }

    40% {
        transform: translate(30px, 10px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes caida {
    0% {
        transform: translate(0, 0);
    }

    2% {
        opacity: 1;
    }

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

@-webkit-keyframes caida3 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(25px, -2px);
    }

    70% {
        opacity: 1;
    }

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

@-webkit-keyframes conveyor {
    0% {
        transform: translate(0,0);
    }

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

@-webkit-keyframes conveyor2 {
    0% {
        transform: translate(0,0);
    }

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

@-webkit-keyframes conveyor6 {
    0% {
        transform: translate(0,0);
    }

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

@-webkit-keyframes conveyor7 {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(12px,-6px);
    }
}

@-webkit-keyframes conveyor3 {
    0% {
        transform: translate(0,0);
    }

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

@-webkit-keyframes conveyor4 {
    0% {
        transform: translate(0,0);
    }

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

#tractor {
    animation: tractormov 6s infinite;
    -webkit-animation: tractormov 6s infinite;
}

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

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

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

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

@-webkit-keyframes tractormov {
    0% {
        transform: translate(0,0);
    }

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

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

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

#fuego {
    animation: flama 0.5s infinite;
    -webkit-animation: flama 0.5s infinite;
    transform-origin: bottom right;
}

@keyframes flama {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.99);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes flama {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

#carga {
    animation: llenado 8s infinite;
    animation-delay: 4.5s;
    -webkit-animation: llenado 8s infinite;
    -webkit-animation-delay: 4.5s;
}

#camion {
    animation: camionmov 8s infinite;
    animation-delay: 4.5s;
    -webkit-animation: camionmov 8s infinite;
    -webkit-animation-delay: 4.5s;
}

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

    20% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    10% {
        opacity: 1;
    }

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

    40% {
        transform: translate(150px,0);
    }

    65% {
        transform: translate(370px,0);
    }

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

    85% {
        opacity: 1;
    }

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

@-webkit-keyframes llenado {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

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

    10% {
        opacity: 1;
    }

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

    40% {
        transform: translate(150px,0);
    }

    65% {
        transform: translate(370px,0);
    }

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

    85% {
        opacity: 1;
    }

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

#humo {
    animation: humocaldera 5s infinite;
    animation-delay: 2s;
    -webkit-animation: humocaldera 5s infinite;
    -webkit-animation-delay: 2s;
}

#humo2 {
    animation: humocaldera2 5s infinite;
    animation-delay: 2.5s;
    -webkit-animation: humocaldera2 5s infinite;
    -webkit-animation-delay: 2.5s;
}

#humo3 {
    animation: humocaldera3 5s infinite;
    animation-delay: 3s;
    -webkit-animation: humocaldera3 5s infinite;
    -webkit-animation-delay: 3s;
}

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

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

    50% {
        transform: translate(260px,-95px);
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(260px,10px);
    }
}

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

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

    50% {
        transform: translate(200px,-95px);
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(200px,10px);
    }
}

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

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

    40% {
        transform: translate(90px,-95px);
    }

    70% {
        transform: translate(90px,3px);
    }

    80% {
        opacity: 1;
    }

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

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

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

    50% {
        transform: translate(260px,-95px);
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(260px,10px);
    }
}

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

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

    50% {
        transform: translate(200px,-95px);
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(200px,10px);
    }
}

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

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

    40% {
        transform: translate(90px,-95px);
    }

    70% {
        transform: translate(90px,3px);
    }

    80% {
        opacity: 1;
    }

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

#piedras6 {
    animation: caida 1s infinite;
    animation-delay: 5.5s;
    -webkit-animation: caida 1s infinite;
    -webkit-animation-delay: 5.5s;
}

#carga2 {
    animation: llenado 8s infinite;
    animation-delay: 7.5s;
    -webkit-animation: llenado 8s infinite;
    -webkit-animation-delay: 7.5s;
}

/*
#camion2 {
  animation: camionmov2 8s infinite;
  animation-delay:6s;
}

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

  10% {
    opacity: 1;
  }

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

  75% {
    opacity: 1;
  }

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

#humo4 {
    animation: humochimenea 3s infinite;
    animation-delay: 5s;
    -webkit-animation: humochimenea 3s infinite;
    -webkit-animation-delay: 5s;
}

#humo5 {
    animation: humochimenea 3s infinite;
    animation-delay: 6.5s;
    -webkit-animation: humochimenea 3s infinite;
    -webkit-animation-delay: 6.5s;
}

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

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

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

    60% {
        transform: translate(120px,45px);
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(120px,-200px);
    }
}

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

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

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

    60% {
        transform: translate(120px,45px);
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(120px,-200px);
    }
}

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

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

#burbujasaire {
    animation: ebullicion 2s infinite;
    animation-delay: 6s;
    -webkit-animation: ebullicion 2s infinite;
    -webkit-animation-delay: 6s;
}

#burbujasizq {
    animation: ebullicionizq 2s infinite;
    animation-delay: 7s;
    -webkit-animation: ebullicionizq 2s infinite;
    -webkit-animation-delay: 7s;
}

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

    10% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

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

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

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

    70% {
        opacity: 1;
    }

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

@-webkit-keyframes ebullicion {
    0% {
        transform: translate(0, 7px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

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

@-webkit-keyframes ebullicionizq {
    0% {
        transform: translate(0,0);
    }

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

    70% {
        opacity: 1;
    }

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

#helicesturbina {
    animation: shutdown 0.1s forwards;
    animation-delay: 9s;
    opacity: 1;
    -webkit-animation: shutdown 0.1s forwards;
    -webkit-animation-delay: 9s;
    -webkit-opacity: 1;
}

@keyframes shutdown {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes shutdown {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#rueda1 {
    animation: fill-in 0.2s infinite;
    animation-delay: 9s;
    fill: #8C8C8C;
    fill-opacity: 0;
    -webkit-animation: fill-in 0.2s infinite;
    -webkit-animation-delay: 9s;
    -webkit-fill: #8C8C8C;
    -webkit-fill-opacity: 0;
}

@keyframes fill-in {
    from {
        fill-opacity: 0;
    }

    to {
        fill-opacity: 1;
    }
}

@keyframes fill-in3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fill-in {
    from {
        fill-opacity: 0;
    }

    to {
        fill-opacity: 1;
    }
}

@-webkit-keyframes fill-in3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#burbujascond {
    animation: movdown 2s infinite;
    animation-delay: 10s;
    -webkit-animation: movdown 2s infinite;
    -webkit-animation-delay: 10s;
}

#gota {
    animation: movdown 2s infinite;
    animation-delay: 11s;
    -webkit-animation: movdown 2s infinite;
    -webkit-animation-delay: 11s;
}

#gota2 {
    animation: movdown 2s infinite;
    animation-delay: 11.5s;
    -webkit-animation: movdown 2s infinite;
    -webkit-animation-delay: 11.5s;
}

#gota3 {
    animation: movdown 2s infinite;
    animation-delay: 12s;
    -webkit-animation: movdown 2s infinite;
    -webkit-animation-delay: 12s;
}

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

    10% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

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

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

    10% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

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

#tuboagua {
    animation: fill-in3 3s forwards;
    animation-delay: 13s;
    -webkit-animation: fill-in3 3s forwards;
    -webkit-animation-delay: 13s;
}

#tuboagua2 {
    animation: fill-in3 3s forwards;
    animation-delay: 14.5s;
    -webkit-animation: fill-in3 3s forwards;
    -webkit-animation-delay: 14.5s;
}

#linea3-1, #linea3-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;
}

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

@keyframes rotacion {
    0% {
        trasform: translate(0,0);
    }

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

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

@-webkit-keyframes rotacion {
    0% {
        trasform: translate(0,0);
    }

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

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

#energy {
    animation: movizq 1s infinite;
    animation-delay: 11s;
    -webkit-animation: movizq 1s infinite;
    -webkit-animation-delay: 11s;
}

#energy2 {
    animation: movizq 1s infinite;
    animation-delay: 12s;
    -webkit-animation: movizq 1s infinite;
    -webkit-animation-delay: 12s;
}

#energy3 {
    animation: movizq 1s infinite;
    animation-delay: 12.5s;
    -webkit-animation: movizq 1s infinite;
    -webkit-animation-delay: 12.5s;
}

#energy4 {
    animation: movizq 1s infinite;
    animation-delay: 12s;
    -webkit-animation: movizq 1s infinite;
    -webkit-animation-delay: 12s;
}

#energygrande {
    animation: movizqmore 1s infinite;
    animation-delay: 13s;
    -webkit-animation: movizqmore 1s infinite;
    -webkit-animation-delay: 13s;
}

#energy5 {
    animation: movup 1s infinite;
    animation-delay: 14s;
    -webkit-animation: movup 1s infinite;
    -webkit-animation-delay: 14s;
}

#energy6 {
    animation: movup 1s infinite;
    animation-delay: 14.5s;
    -webkit-animation: movup 1s infinite;
    -webkit-animation-delay: 14.5s;
}

#energy7 {
    animation: movup 1s infinite;
    animation-delay: 14s;
    -webkit-animation: movup 1s infinite;
    -webkit-animation-delay: 14s;
}

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

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

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

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

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

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

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

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

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

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

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

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

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

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

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

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

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

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

#flecha {
    animation: flash 1s infinite;
    animation-delay: 14s;
    fill: white;
    -webkit-animation: flash 1s infinite;
    -webkit-animation-delay: 14s;
    -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: 15s;
    opacity: 0;
    stroke: #FFFF00;
    -webkit-animation: fill-in2 1s infinite;
    -webkit-animation-delay: 15s;
    -webkit-opacity: 0;
    -webkit-stroke: #FFFF00;
}

#luces2 {
    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;
}

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

    50% {
        opacity: 1;
    }
}

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

    50% {
        opacity: 1;
    }
}

#lineasagua {
    animation: lineasmoving 24s infinite;
    animation-timing-function: linear;
    opacity: 0.7;
    -webkit-animation: lineasmoving 24s infinite;
    -webkit-animation-timing-function: linear;
    -webkit-opacity: 0.7;
}

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

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

@-webkit-keyframes lineasmoving {
    0% {
        transform: translate(0,0);
    }

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