/* Animação de página estilo vídeo,
    * Por Xalalau.
    */

/* ---------
    * FUNDO
    * ---------
*/

:root {
    --scene-width: 900px;
    --scene-height: 748px;
}

.content-box {
    overflow: hidden;
    height: var(--scene-height);
}

.content-box-text {
    overflow: hidden;
}

#play {
    background-color: black;
    background-image: url('/assets/image/pages/matrix/letras4.png');
    background-position: 0px 0px;
    background-repeat: repeat-x;
    text-align: center;
    width: 100%;
    height: var(--scene-height);
    margin: -15px 0 -15px -15px;
    padding: 0 15px 0 15px;
}

#play-button {
    margin-top: 299px;
    width: 128px;
    height: 128px;
}

#play-button:hover {
    width: 138px;
    height: 138px;
    margin-top: 293px;
}

#audiotrack {
    opacity: 0.4;
}

#inicial {
    display: none;
    width: var(--scene-width);
    height: var(--scene-height);
    margin: -15px -15px -15px -15px;
    text-align: left;
    background-color: black;
    background-image: url('/assets/image/pages/matrix/background2.png');
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: mover 3600s linear infinite;
    -ms-animation: mover 3600s linear infinite;
    -moz-animation: mover 3600s linear infinite;
    -webkit-animation: mover 3600s linear infinite;
    -o-animation: mover 3600s linear infinite;
    transition: 3s;
}
@-moz-document url-prefix() { 
    #inicial {
        height: 1250px;
        margin: -15px -15px -550px -15px;
    }
    
    .content-box-text {
        overflow: hidden;
    }
}

@keyframes mover {
    from { background-position: 0 0; }
    to { background-position: 150000px 0; } }
@-webkit-keyframes mover {
    from { background-position: 0 0; }
    to { background-position: 150000px 0; } }
@-ms-keyframes mover {
    from { background-position: 0 0; }
    to { background-position: 150000px 0; } }
@-moz-keyframes mover {
    from { background-position: 0 0; }
    to { background-position: 150000px 0; } }
@-o-keyframes mover {
    0% { background-position: 0 0; }
    100% { background-position: 150000px 0; } }


/* ---------------
    * COISAS PASSANDO
    * ---------------

DELAYS DE PORTAS:
2º ~= 12.18s
3º ~= 42.88s (+30.7s)
4º ~= 73.58s
5º ~= 104.28s

*/

.formatar {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
}

#porta {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: porta;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 42.88s;            /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: porta;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 42.88s;                    /* DELAY */
    animation-play-state: running;
}

#porta2 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: porta;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 104.28s;           /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: porta;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 104.28s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes porta {
    0%   {left:7811px; top:312px;}
    100% {left:9189px; top:312px;}}
/* Standard syntax */
@keyframes porta {
    0%   {left:7811px; top:312px;}
    100% {left:9189px; top:312px;}}

#dedo {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: dedo;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 12.07s;            /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: dedo;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 12.07s;                    /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dedo {
    0%   {left:7811px; top:280px;}
    100% {left:9189px; top:280px;}}
/* Standard syntax */
@keyframes dedo {
    0%   {left:7811px; top:280px;}
    100% {left:9189px; top:280px;}}

#neo {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: neo;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;                /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: neo;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 0s;                        /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes neo {
    0%   {left:8011px; top:300px;}
    100% {left:9389px; top:300px;}}
/* Standard syntax */
@keyframes neo {
    0%   {left:8011px; top:300px;}
    100% {left:9389px; top:300px;}}

#dedobalao {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: dedobalao;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 17.07s;            /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: dedobalao;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 17.07s;                    /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dedobalao {
    0%   {left:8011px; top:150px;}
    100% {left:9389px; top:150px;}}
/* Standard syntax */
@keyframes dedobalao {
    0%   {left:8011px; top:150px;}
    100% {left:9389px; top:150px;}}


#arquiteto {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: arquiteto;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;                /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: arquiteto;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 0s;                        /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes arquiteto {
    0%   {left:8211px; top:365px;}
    100% {left:9589px; top:365px;}}
/* Standard syntax */
@keyframes arquiteto {
    0%   {left:8211px; top:365px;}
    100% {left:9589px; top:365px;}}

#sanic {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: sanic;
    -webkit-animation-duration: 1s;             /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 30s;               /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: sanic;
    animation-duration: 1s;                     /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 30s;                       /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sanic {
    0%   {left:7811px; top:430px;}
    100% {left:9189px; top:430px;}}
/* Standard syntax */
@keyframes sanic {
    0%   {left:7811px; top:430px;}
    100% {left:9189px; top:430px;}}

#lhamapenis {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: lhamapenis;
    -webkit-animation-duration: 70s;            /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 50s;               /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: lhamapenis;
    animation-duration: 70s;                    /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 50s;                       /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes lhamapenis {
    0%   {left:9189px; top:550px;}
    100% {left:7711px; top:550px;}}
/* Standard syntax */
@keyframes lhamapenis {
    0%   {left:9189px; top:550px;}
    100% {left:7711px; top:550px;}}

#sweedeveryday {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: sweedeveryday;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 65s;               /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: sweedeveryday;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 65s;                       /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sweedeveryday {
    0%   {left:7511px; top:440px;}
    100% {left:9089px; top:440px;}}
/* Standard syntax */
@keyframes sweedeveryday {
    0%   {left:7511px; top:440px;}
    100% {left:9089px; top:440px;}}


#tf2time {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: tf2time;
    -webkit-animation-duration: 32.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 75s;               /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: tf2time;
    animation-duration: 32.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 75s;                       /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes tf2time {
    0%   {left:7531px; top:520px;}
    100% {left:9109px; top:520px;}}
/* Standard syntax */
@keyframes tf2time {
    0%   {left:7531px; top:520px;}
    100% {left:9109px; top:520px;}}

#gmanlingua {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: gmanlingua;
    -webkit-animation-duration: 55s;            /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 95s;               /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: gmanlingua;
    animation-duration: 55s;                    /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 95s;                       /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gmanlingua {
    0%   {left:7811px; top:100px;}
    100% {left:9189px; top:100px;}}
/* Standard syntax */
@keyframes gmanlingua {
    0%   {left:7811px; top:100px;}
    100% {left:9189px; top:100px;}}

#gabeni {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: gabeni;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 125s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: gabeni;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 125s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gabeni {
    0%   {left:7311px; top:10px;}
    100% {left:9189px; top:600px;}}
/* Standard syntax */
@keyframes gabeni {
    0%   {left:7311px; top:10px;}
    100% {left:9189px; top:600px;}}


#refundo {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: refundo;
    -webkit-animation-duration: 50.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 150s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: refundo;
    animation-duration: 50.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 150s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes refundo {
    0%   {left:7011px; top:0px;}
    100% {left:9189px; top:60px;}}
/* Standard syntax */
@keyframes refundo {
    0%   {left:7011px; top:0px;}
    100% {left:9189px; top:60px;}}


#fogodefeito {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: fogodefeito;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 155s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: fogodefeito;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 155s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fogodefeito {
    0%   {left:7811px; top:300px;}
    100% {left:9189px; top:300px;}}
/* Standard syntax */
@keyframes fogodefeito {
    0%   {left:7811px; top:300px;}
    100% {left:9189px; top:300px;}}

#gatopreto {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: gatopreto;
    -webkit-animation-duration: 16.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 195s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: gatopreto;
    animation-duration: 16.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 195s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gatopreto {
    0%   {left:7531px; top:580px;}
    100% {left:9109px; top:580px;}}
/* Standard syntax */
@keyframes gatopreto {
    0%   {left:7531px; top:580px;}
    100% {left:9109px; top:580px;}}

#cogumelo {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: cogumelo;
    -webkit-animation-duration: 195s;           /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 65s;               /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: cogumelo;
    animation-duration: 195s;                   /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 65s;                       /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes cogumelo {
    0%   {left:7511px; top:560px;}
    100% {left:9089px; top:560px;}}
/* Standard syntax */
@keyframes cogumelo {
    0%   {left:7511px; top:560px;}
    100% {left:9089px; top:560px;}}

#navespacial {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: navespacial;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 185s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: navespacial;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 185s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes navespacial {
    0%   {left:7511px; top:300px;}
    10%  {left:8311px; top:100px;}
    20%  {left:7811px; top:700px;}
    30%  {left:8711px; top:500px;}
    40%  {left:8711px; top:600px;}
    50%  {left:7411px; top:367px;}
    60%  {left:7441px; top:220px;}
    70%  {left:9000px; top:10px;}
    80%  {left:7200px; top:700px;}
    90%  {left:7311px; top:300px;}
    100% {left:9189px; top:300px;}}
/* Standard syntax */
@keyframes navespacial {
    0%   {left:7511px; top:300px;}
    10%  {left:8311px; top:100px;}
    20%  {left:7811px; top:700px;}
    30%  {left:8711px; top:500px;}
    40%  {left:8711px; top:600px;}
    50%  {left:7411px; top:367px;}
    60%  {left:7441px; top:220px;}
    70%  {left:9000px; top:10px;}
    80%  {left:7200px; top:700px;}
    90%  {left:7311px; top:300px;}
    100% {left:9189px; top:300px;}}

#crazyf {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: crazyf;
    -webkit-animation-duration: 1s;             /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 210s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: crazyf;
    animation-duration: 1s;                     /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 210s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes crazyf {
    0%   {left:7811px; top:450px;}
    100% {left:9189px; top:450px;}}
/* Standard syntax */
@keyframes crazyf {
    0%   {left:7811px; top:450px;}
    100% {left:9189px; top:450px;}}

/* -------------------------------------
    * INÍCIO DA PARTE 2 DAS COISAS PASSANDO
    * -------------------------------------
*/

#parabens {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: parabens;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 187s;              /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: parabens;
    animation-duration: 38.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 187s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes parabens {
    0%   {left:7811px; top:630px;}
    100% {left:9389px; top:630px;}}
/* Standard syntax */
@keyframes parabens {
    0%   {left:7811px; top:630px;}
    100% {left:9389px; top:630px;}}

#porta3 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: porta;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 227.1s;            /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: porta;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 227.1s;                    /* DELAY 42.88s */
    animation-play-state: running;
}

#porta4 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: porta;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 288.7s;            /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: porta;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 288.7s;                    /* DELAY 104.28s */
    animation-play-state: running;
}

#programas_tv {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: dedo;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 227.1s;            /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: dedo;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 227.1s;                    /* DELAY */
    animation-play-state: running;
}

#winner {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: winner;
    -webkit-animation-duration: 46.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 187s;              /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: winner;
    animation-duration: 46.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 187s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes winner {
    0%   {left:6711px; top:100px;}
    100% {left:9389px; top:100px;}}
/* Standard syntax */
@keyframes winner {
    0%   {left:6711px; top:100px;}
    100% {left:9389px; top:100px;}}

#finished {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: finished;
    -webkit-animation-duration: 46.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 187s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: finished;
    animation-duration: 46.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 187s;                      /* DELAY */
    animation-play-state: running;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes finished {
    0%   {left:7111px; top:300px;}
    100% {left:9589px; top:300px;}}
/* Standard syntax */
@keyframes finished {
    0%   {left:7111px; top:30px;}
    100% {left:9589px; top:30px;}}

#finish_him {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: finish_him;
    -webkit-animation-duration: 46.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 187s;              /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: finish_him;
    animation-duration: 46.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 187s;                      /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes finish_him {
    0%   {left:6811px; top:100px;}
    100% {left:9589px; top:100px;}}
/* Standard syntax */
@keyframes finish_him {
    0%   {left:6811px; top:100px;}
    100% {left:9589px; top:100px;}}

#nyangato {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: nyangato;
    -webkit-animation-duration: 70s;            /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 224.22s;           /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: nyangato;
    animation-duration: 70s;                    /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 224.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes nyangato {
    0%   {left:9089px; top:550x;}
    100% {left:7411px; top:550px;}}
/* Standard syntax */
@keyframes nyangato {
    0%   {left:9089px; top:550px;}
    100% {left:7411px; top:550px;}}

#metalalchbrother {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: metalalchbrother;
    -webkit-animation-duration: 33.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 249.22s;           /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: metalalchbrother;
    animation-duration: 33.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 249.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes metalalchbrother {
    0%   {left:7511px; top:400px;}
    100% {left:9089px; top:400px;}}
/* Standard syntax */
@keyframes metalalchbrother {
    0%   {left:7511px; top:400px;}
    100% {left:9089px; top:400px;}}

#breakingbad {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: breakingbad;
    -webkit-animation-duration: 32.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 259.22s;           /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: breakingbad;
    animation-duration: 32.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 259.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes breakingbad {
    0%   {left:7531px; top:400px;}
    100% {left:9109px; top:400px;}}
/* Standard syntax */
@keyframes breakingbad {
    0%   {left:7531px; top:400px;}
    100% {left:9109px; top:400px;}}

#sparta {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: sparta;
    -webkit-animation-duration: 34s;            /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 279.22s;           /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: sparta;
    animation-duration: 34s;                    /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 279.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sparta {
    0%   {left:6811px; top:100px;}
    100% {left:9189px; top:100px;}}
/* Standard syntax */
@keyframes sparta {
    0%   {left:6811px; top:100px;}
    100% {left:9189px; top:100px;}}

#refundo2 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: refundo2;
    -webkit-animation-duration: 48.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 311.22;            /* DELAY */
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: refundo2;
    animation-duration: 48.00s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 311.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes refundo2 {
    0%   {left:8000px; top:0px;}
    100% {left:8000px; top:0px;}}
/* Standard syntax */
@keyframes refundo2 {
    0%   {left:8000px; top:0px;}
    100% {left:8000px; top:0px;}}

#chaves1 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: chaves;
    -webkit-animation-duration: 20.00s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 311.22s;           /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: chaves;
    animation-duration: 20.00s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 311.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes chaves {
    0%   {left:7511px; top:200px;}
    100% {left:9389px; top:200px;}}
/* Standard syntax */
@keyframes chaves {
    0%   {left:7511px; top:200px;}
    100% {left:9389px; top:200px;}}


#chaves2 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: chaves;
    -webkit-animation-duration: 20.00s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 321.22s;           /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: chaves;
    animation-duration: 20.00s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 321.22s;                   /* DELAY */
    animation-play-state: running;
}

#chaves3 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: chaves;
    -webkit-animation-duration: 20.00s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 331.22s;           /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: chaves;
    animation-duration: 20.00s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 331.22s;                   /* DELAY */
    animation-play-state: running;
}

#chaves4 {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: chaves;
    -webkit-animation-duration: 20.00s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 341.22s;           /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: chaves;
    animation-duration: 20.00s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 341.22s;                   /* DELAY */
    animation-play-state: running;
}

#missil {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: missil;
    -webkit-animation-duration: 5.00s;          /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 351.22s;           /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: missil;
    animation-duration: 5.00s;                  /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 351.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes missil {
    0%   {left:8400px; top:300px;}
    100% {left:8400px; top:300px;}}
/* Standard syntax */
@keyframes missil {
    0%   {left:8400px; top:300px;}
    100% {left:8400px; top:300px;}}

#explodiu {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: refundo2;
    -webkit-animation-duration: 3.00s;          /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 356.22s;           /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: refundo2;
    animation-duration: 3.00s;                  /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 356.22s;                   /* DELAY */
    animation-play-state: running;
}

#fim {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: fim;
    -webkit-animation-duration: 38.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 374.22;            /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: fim;
    animation-duration: 38.08s;                 /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 374.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fim {
    0%   {left:7811px; top:630px;}
    100% {left:9389px; top:630px;}}
/* Standard syntax */
@keyframes fim {
    0%   {left:7811px; top:630px;}
    100% {left:9389px; top:630px;}}

#morreu {
    float: left;
    margin-left: -8000px;                       /* Esconder imagem */
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: morreu;
    -webkit-animation-duration: 38.08s;         /* Tempo passando */
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 425.22s;           /* DELAY */
    -webkit-animation-play-state: running; 
    /* Standard syntax */
    animation-name: morreu;
    animation-duration: 42s;                    /* Tempo passando */
    animation-timing-function: linear;
    animation-delay: 425.22s;                   /* DELAY */
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes morreu {
    0%   {left:7611px; top:570px;}
    100% {left:9389px; top:570px;}}
/* Standard syntax */
@keyframes morreu {
    0%   {left:7611px; top:570px;}
    100% {left:9389px; top:570px;}}