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