.atras{
  position:absolute;
  height:33px;
  width:102px;
  top: 520px;
  left : 298px;
  z-index: 1;
}
.responsive {
  width: 100%;
  height: auto;
  }

.portada{
 position:absolute;
  height:10%;
  width:20%;
  top: 50%;
  left : 80%;
  z-index: 1;
}


.t_prologo{
  position:absolute;
  height:40%;
  width:40%;
  top: 7%;
  left : 8%;
  z-index: 1;
}

.prologo{
  position:absolute;
  height:100%;
  width:60%;
  top: 28%;
  left : 10%;
  z-index: 1;
}

.engranajes{
  position:absolute;
  height:15%;
  width:auto;
  top: 19%;
  left : 10%;
  z-index: 1;
}

.engranajes1{
  position:absolute;
  height:10%;
  width:auto;
  top: 16%;
  left : 16%;
  z-index: 1;
}

.nino{
  position:absolute;
  height:95%;
  width:138%;
  top: 0%;
  left : 0%;
  z-index: 1;
}

.imagenes{
   position:absolute;
  height:60px;
  width:102px;
  top: 60%;
  left : 50%;
  z-index: 1;
}

.delante{
  position:absolute;
  height:33px;
  width:102px;
  top: 520px;
  left : 401px;
  z-index: 1;
}

.autores{
  position:absolute;
  height:100%;
  width:40%;
  top: 30%;
  left : 5%;
  z-index: 1;
}

.atrasi{
  position:absolute;
  height:5%;
  width:13%;
  top: 92%;
  left : 37%;
  z-index: 1;
}

.heaven
{
  position:absolute;
  height:600px;
  width:800px;
  z-index: -1;
}
.heavenportada
{
  position:absolute;
  top: 10px;
  left : 280px;
  height:600px;
  width:800px;
  z-index: -1;
}

/*///////////////////////////////////////////////*/


.img-contenedor img {
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
    width:100%;
}

.img-contenedor:hover img {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}

.img-contenedor,.img-contenedor2,.img-contenedor3 {/*Ancho y altura son modificables al requerimiento de cada uno*/
    overflow:hidden;
}

/*Ejemplo 2*/
.img-contenedor2 img {
    -webkit-transition:all 1.9s ease; /* Safari y Chrome */
    -moz-transition:all 1.9s ease; /* Firefox */
    -o-transition:all 1.9s ease; /* IE 9 */
    -ms-transition:all 1.9s ease; /* Opera */
    width:100%;
}
.img-contenedor2:hover img {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);
}
/*Ejemplo 3*/
.img-contenedor3 img {
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
    width:100%;
}

.img-contenedor3:hover img {
    -webkit-transform:scale(0.85);
    -moz-transform:scale(0.85);
    -ms-transform:scale(0.85);
    -o-transform:scale(0.85);
    transform:scale(0.85);
}
.img-contenedor5:hover img {
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
}
/*//////////////////////////////////////////*/

@keyframes rotate {from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}}
.imgr{
    -webkit-animation: 3s rotate linear infinite;
    animation: 3s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;}
.imgr2 {
     -webkit-animation-direction: reverse;
     animation-direction: reverse;}
/* //////////////////////////////////////////////////////////////// */


div#animation {
    width: 100%;
    height: 100%;
    background: url("img/bg.png") left top;
    position: absolute;
}

/* ////////////////Subiendo Vertical//////////////////////// */
div#procont {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: procont-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}

@-moz-keyframes procont-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@-webkit-keyframes procont-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes procont-animation {
     0% {top: 950px;}
    30% {top: 375px;}
    85% {top: 0; background-position: 0 0; }
    100% {top: 240px; background-position: 10px 0; }
}

/*************************************************************************************/
.paguno{
  position:absolute;
  height:100%;
  width:100%;
  top: 8%;
  left : 0%;
  z-index: 1;
}
div#paguno {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: paguno-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes paguno-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@-webkit-keyframes paguno-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes paguno-animation {
     0% {top: 950px;}
    30% {top: 375px;}
    85% {top: 0; background-position: 0 0; }
    100% {top: 40px; background-position: 10px 0; }
}


/*************************************************************************************/

/*************************************************************************************/
.pagdos{
  position:absolute;
  height:100%;
  width:100%;
  top: 8%;
  left : 0%;
  z-index: 1;
}
div#pagdos {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  0 0;
    z-index: 20;

    /* Default */
    animation-name: pagdos-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@@-moz-keyframes pagdos-animation {
    0% {left: -500px;}
    30% {left: -100px;}
    60% {left: 375px;}
    85% {left: 375; background-position: 0 0;}
    100% {left: 950; width: 0; background-position: 0px 0;}
}
@-webkit-keyframes pagdos-animation {
    0% {left: -200px;}
    30% {left:-100px;}
    60% {left: 375px;}
    85% {left: 375; background-position: 0 0;}
    100% {left: 950; width: 0; background-position: 0px 0;}
}
@keyframes pagdos-animation {
     0% {left: -1000px;}
    30% {left: -500px;}
    85% {left: -100; background-position: 0 0; }
    100% {left: 20px; background-position: 10px 0; }
}

/*************************************************************************************/
/*************************************************************************************/
.pagcua{
  position:absolute;
  height:100%;
  width:100%;
  top: 0%;
  left : 0%;
  z-index: 1;
}
div#pagcua {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  0 0;
    z-index: 20;

    /* Default */
    animation-name: pagcua-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@@-moz-keyframes pagcua-animation {
    0% {left: -500px;top: 20px;}
    30% {left: -100px;top: 20px;}
    60% {left: 375px;top: 20px;}
    85% {left: 375;top: 20px; background-position: 0 0;}
    100% {left: 950;top: 20px; width: 0; background-position: 0px 0;}
}
@-webkit-keyframes pagcua-animation {
    0% {left: -200px;top: 20px;}
    30% {left:-100px;top: 20px;}
    60% {left: 375px;top: 20px;}
    85% {left: 375;top: 20px; background-position: 0 0;}
    100% {left: 950;top: 20px; width: 0; background-position: 0px 0;}
}
@keyframes pagcua-animation {
     0% {left: -200px;top: 20px;}
    30% {left:-100px;top: 20px;}
    60% {left: 375px;top: 20px;}
    85% {left: 375;top: 20px; background-position: 0 0;}
    100% {left: 950;top: 0px; width: 0; background-position: 0px 0;}
}
/*
@keyframes pagcua-animation {
     0% {left: -1000px;top: 20px;}
    30% {left: -500px;top: 10px;}
    85% {left: -100;top: 20px; background-position: 0 0; }
    100% {left: 20px;top: 10px; background-position: 10px 0; }
}
*/

.pagcin{
  position:absolute;
  height:71%;
  width:50%;
  top: 26%;
  left : 0%;
  z-index: 1;
}
div#pagcin {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: pagcin-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes pagcin-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@-webkit-keyframes pagcin-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes pagcin-animation {
     0% {top: 950px;}
    30% {top: 375px;}
    85% {top: 0; background-position: 0 0; }
    100% {top: 60px; background-position: 10px 0; }
}

.pagcino{
  position:absolute;
  height:100%;
  width:100%;
  top: 26%;
  left : 0%;
  z-index: 1;
}
div#pagcino {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: pagcino-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes pagcino-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: 200px 0;}
}
@-webkit-keyframes pagcino-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes pagcino-animation {
   0% {left: 950px;top: 20px;}
    30% {left:-100px;top: 20px;}
    60% {left: 375px;top: 20px;}
    85% {left: 375;top: 20px; background-position: 0 0;}
    100% {left: 200;top: 0px; width: 0; background-position: 0px 0;}
}


/******************************************************************************/

.pagdiesi{
  position:absolute;
  height:100%;
  width:100%;
  top: 0%;
  left : 0%;
  z-index: 1;
}
div#pagdiesi {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: pagdiesi-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes pagdiesi-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: 200px 0;}
}
@-webkit-keyframes pagdiesi-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes pagdiesi-animation {
   0% {left: 950px;top: -100px;}
    30% {left:-100px;top: 20px;}
    60% {left: 375px;top: 20px;}
    85% {left: 375;top: 20px; background-position: 0 0;}
    100% {left: 10;top: 0px; width: 0; background-position: 0px 0;}
}

/******************************************************************************/

/******************************************************************************/

.paggeneral{
  position:absolute;
  height:100%;
  width:100%;
  top: 0%;
  left : 0%;
  z-index: 1;
}

/* ////////////////Subiendo Vertical//////////////////////// */
div#veritcalsub {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: procont-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}

@-moz-keyframes veritcalsub-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@-webkit-keyframes veritcalsub-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes veritcalsub-animation {
     0% {top: 950px;}
    30% {top: 375px;}
    85% {top: 375; background-position: 0 0; }
    100% {top: 40px; background-position: 10px 0; }
}

/*************************************************************************************/




div#izqder {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: izqder-animation;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes izqder-animation {
    0% {top: 50px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: 200px 0;}
}
@-webkit-keyframes izqder-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes izqder-animation {
   0% {left: 950px;top: -800px;}
    30% {left:-100px;top: 20px;}
    60% {left: 275px;top: 20px;}
    85% {left: 2375;top: 280px; background-position: 0 0;}
    100% {left: 10;top: 0px; width: 20; background-position: 0px 0;}
}

div#izqderd {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: izqderd-animation;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes izqderd-animation {
    0% {top: 50px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: 200px 0;}
}
@-webkit-keyframes izqderd-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes izqderd-animation {
   0% {left: 950px;top: -800px;}
    30% {left:-100px;top: 20px;}
    60% {left: 275px;top: 20px;}
    85% {left: 2375;top: 280px; background-position: 0 0;}
    100% {left: 10;top: 0px; width: 20; background-position: 0px 0;}
}


/******************************************************************************/
div#derizq {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: derizq-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes derizq-animation {
    0% {top: 50px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: 200px 0;}
}
@-webkit-keyframes derizq-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes derizq-animation {
   0% {left: -1000px;top: 800px;}
    30% {left:100px;top: 40px;}
    60% {left: 375px;top: 30px;}
    85% {left: 375;top: 80px; background-position: 0 0;}
    100% {left: 290;top: 80px; width: 0; background-position: 20px 20;}
}

/******************************************************************************/

.pagsei{
  position:absolute;
  height:100%;
  width:100%;
  top: 21%;
  left : 0%;
  z-index: 1;
}
div#pagsei {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: pagsei-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes pagsei-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@-webkit-keyframes pagsei-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -200px 0;}
}
@keyframes pagsei-animation {
     0% {top: 950px;}
    30% {top: 375px;}
    85% {top: 0; background-position: 0 0; }
    100% {top: 60px; background-position: 10px 0; }
}


/*/////////////////////////////////////////////*/
.pagtre{
  position:absolute;
  height:60%;
  width:50%;
  top: 30%;
  left : 50%;
  z-index: 1;
}
div#pagtre {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: pagtre-animation;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}
@-moz-keyframes pagtre-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: -0px 0;}
}
@-webkit-keyframes pagtre-animation {
    0% {top: 950px;}
    30% {top: 375px;}
    60% {top: 375px;}
    85% {top: 0; background-position: 0 0;}
    100% {top: 0; width: 0; background-position: 0px 0;}
}
@keyframes pagtre-animation {
     0% {top: 950px;}
    30% {top: 375px;}
    85% {top: 50px; background-position: 0 0; }
    100% {top: 50px; background-position: 20px 0; }
}
/*************************************************************************************/

/*************************************************************************************/


/* //////////////// FIN Subiendo Vertical//////////////////////// */

div#cloud {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: cloud-animation;
    animation-duration: 4s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}

div#clouda {
    position: absolute;
    background-repeat:  no-repeat;
    background-position:  120 50;
    z-index: 20;

    /* Default */
    animation-name: clouda-animation;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}

.portadaa{
  position:absolute;
  height:100%;
  width:100%;
  top: 38%;
  left : 10%;
  z-index: 1;
}

div#portadaa {
    width: 0%;
    height: 0%;
    background-repeat:no-repeat;
    background-position: 0 800px;
    position: absolute;
    bottom: 0px;
    left: -10px;

    
    /* Default */
    animation-name: portadaa-animation;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: forwards;

}

div#prologoat {
    width: 100%;
    height: 118%;
    background-image: url("img/po2.png");
    background-repeat:no-repeat;
    background-position: 0 800px;
    position: absolute;
    bottom: 0px;
    left: -10px;

    
    /* Default */
    animation-name: prologoat-animation;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: forwards;

}

div#messages {
    width: 300px;
    height: 100px;
    position: absolute;
    background: url("messages.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 300px;
    left: 350px;
    top: 180px;

    /* Firefox */
    -moz-animation-name: messages-animation;
    -moz-animation-duration: 33s;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-direction: normal;
    -moz-animation-fill-mode: forwards;

    /* Chrome / Safari */
    -webkit-animation-name: messages-animation;
    -webkit-animation-duration: 33s;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;

    /* Default */
    animation-name: messages-animation;
    animation-duration: 33s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: forwards;
}


div#rain {
    width: 200px;
    height: 400px;
    background-image: url("rain-background.png");
    background-repeat: no-repeat;
    background-position: 0 320%;
    margin:65px 0 0 0;

    /* Firefox */
    -moz-animation-name: rain-animation;
    -moz-animation-duration: 8s;
    -moz-animation-delay: 10s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-direction: normal;

    /* Chrome / Safari */
    -webkit-animation-name: rain-animation;
    -webkit-animation-duration: 8s;
    -webkit-animation-delay: 10s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;

    /* Default */
    animation-name: rain-animation;
    animation-duration: 8s;
    animation-delay: 10s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;

}

div#sun {
    background: url("sun.png") no-repeat top left;
    width: 70px;
    height: 70px;
    opacity: 0.2;
    position: absolute;
    top:20px;
    left: 700px;

    /* Firefox */
    -moz-animation-name: sun-animation;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 23s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-out;
    -moz-animation-direction: alternate;

    /* Chrome / Safari */
    -webkit-animation-name: sun-animation;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 23s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-direction: alternate;

    /* Default */
    animation-name: sun-animation;
    animation-duration: 2s;
    animation-delay: 23s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}


/* MESSAGES */
@-moz-keyframes messages-animation {
    0% {
        background-position: 0 0;
        opacity: 1;
    }

    2% {
        background-position: 0 0;
       opacity: 0;
    }

     3% {
           background-position: 0 -80px;
           opacity: 0;
     }

    5% {
        opacity: 1;
        background-position: 0 -80px;
    }

    7% {
        background-position: 0 -80px;
       opacity: 0;
    }

     8% {
           background-position: 0 -155px;
           opacity: 0;
     }


    10% {
        background-position: 0 -155px;
        opacity: 1;
    }

    12% {
        background-position: 0 -155px;
       opacity: 0;
    }

     13% {
           background-position: 0 -250px;
           opacity: 0;
     }

    15% {
        opacity: 1;
        background-position: 0 -250px;
    }

    17% {
       background-position: 0 -250px;
       opacity: 0;
    }

    95% {
        opacity: 0;
        background-position: 0 -350px;
    }
    100% {
    background-position: 0 -350px;
        opacity: 1;
    }
}

@-webkit-keyframes messages-animation {
    0% {
        background-position: 0 0;
        opacity: 1;
    }

    2% {
        background-position: 0 0;
       opacity: 0;
    }

     3% {
           background-position: 0 -80px;
           opacity: 0;
     }

    5% {
        opacity: 1;
        background-position: 0 -80px;
    }

    7% {
        background-position: 0 -80px;
       opacity: 0;
    }

     8% {
           background-position: 0 -155px;
           opacity: 0;
     }

    10% {
        background-position: 0 -155px;
        opacity: 1;
    }

    12% {
        background-position: 0 -155px;
       opacity: 0;
    }

     13% {
           background-position: 0 -250px;
           opacity: 0;
     }

    15% {
        opacity: 1;
        background-position: 0 -250px;
    }

    17% {
       background-position: 0 -250px;
       opacity: 0;
    }

    95% {
        opacity: 0;
        background-position: 0 -350px;
    }
    100% {
    background-position: 0 -350px;
        opacity: 1;
    }
}

@keyframes messages-animation {
    0% {
        background-position: 0 0;
        opacity: 1;
    }

    2% {
        background-position: 0 0;
       opacity: 0;
    }

     3% {
           background-position: 0 -80px;
           opacity: 0;
     }

    5% {
        opacity: 1;
        background-position: 0 -80px;
    }

    7% {
        background-position: 0 -80px;
       opacity: 0;
    }

     8% {
           background-position: 0 -155px;
           opacity: 0;
     }


    10% {
        background-position: 0 -155px;
        opacity: 1;
    }

    12% {
        background-position: 0 -155px;
       opacity: 0;
    }

     13% {
           background-position: 0 -250px;
           opacity: 0;
     }

    15% {
        opacity: 1;
        background-position: 0 -250px;
    }

    17% {
       background-position: 0 -250px;
       opacity: 0;
    }

    95% {
        opacity: 0;
        background-position: 0 -350px;
    }
    100% {
    background-position: 0 -350px;
        opacity: 1;
    }
}

/* CLOUD1 ANIMATION */
@-moz-keyframes clouda-animation {
    0% {left: 950px;}
    30% {left: 375px;}
    60% {left: 375px;}
    85% {left: 0; background-position: 0 0;}
    100% {left: 0; width: 0; background-position: -200px 0;}
}
@-webkit-keyframes clouda-animation {
    0% {left: 950px;}
    30% {left: 375px;}
    60% {left: 375px;}
    85% {left: 0; background-position: 0 0;}
    100% {left: 0; width: 0; background-position: -200px 0;}
}
@keyframes clouda-animation {
     0% {left: 950px;}
    30% {left: 375px;}
    85% {left: 0; background-position: 0 0; }
    100% {left: 100px; background-position: 10px 0; }
}

/* CLOUD ANIMATION */
@-moz-keyframes cloud-animation {
    0% {
        left: 950px;
    }

    10% {
        left: 750px;
        width: 200px;
    }

    30% {
        left: 375px;
    }

    60% {
        left: 375px;
    }

    85% {
        left: 0;
        width: 200px;
        background-position: 0 0;
    }

    100% {
        left: 0;
        width: 0;
        background-position: -200px 0;
    }
}

@-webkit-keyframes cloud-animation {
    0% {
        left: 950px;
    }

    10% {
        left: 750px;
        width: 200px;
    }

    30% {
        left: 375px;
    }

    60% {
        left: 375px;
    }

    85% {
        left: 0;
        width: 200px;
        background-position: 0 0;
    }

    100% {
        left: 0;
        width: 0;
        background-position: -200px 0;
    }
}

@keyframes cloud-animation {
    0% {
        left: 950px;
    }

    10% {
        left: 750px;
        width: 200px;
    }

    30% {
        left: 375px;
    }

    38% {
        top: 375px;
    }

    85% {
        left: 0;
        width: 200px;
        background-position: 0 0;
    }

    100% {
        left: 0;
        width: 0;
        background-position: -200px 0;
    }
}

/* RAIN ANIMATION */
@-moz-keyframes rain-animation {

    100% {
        background-position: 0 -220%;
    }
}

@-webkit-keyframes rain-animation {

    100% {
        background-position: 0 -220%;
    }
}

@keyframes rain-animation {

    100% {
        background-position: 0 -220%;
    }
}

/* SUN ANIMATION */
@-moz-keyframes sun-animation {

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes sun-animation {

    100% {
        opacity: 1;
    }
}

@keyframes sun-animation {

    100% {
        opacity: 1;
    }
}

/* portadaa ANIMATION */
@-moz-keyframes portadaa-animation {

    100% {
        background-position: 0 0;
    }
}

@-webkit-keyframes portadaa-animation {

    100% {
        background-position: 0 0;
    }
}

@keyframes portadaa-animation {

    100% {
        background-position: 0 0;
    }
}
/* prologoat ANIMATION */
@-moz-keyframes prologoat-animation {

    100% {
        background-position: 0 0;
    }
}

@-webkit-keyframes prologoat-animation {

    100% {
        background-position: 0 0;
    }
}

@keyframes prologoat-animation {

    100% {
        background-position: 0 0;
    }
}