@import url("../font/stylesheet.css");

/* CSS Document */
  html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
	  font-family: 'Love Ya Like A Sister Solid', Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  

/*//////////paginas//////////////*/

.pag {
      width: 100%;
      height: 100%;
	  position:relative;
	   }
.pag p{
	  font-size: 1.6rem;
      color:#000;
	  padding:3.5% 7% 0 7%;
	  text-align:center;
	 margin:1% 0;
    }
.pag p span{
	  /*display:inline-block;*/
	  color:#000
	  /*border:solid 1px #333;
	 overflow:hidden;*/
    }	
.pag img{
      width: 100%;
    }
@keyframes aparecePage {
   from{opacity:0 }
   to{ opacity:100 }
}
	
@keyframes pintaRojo {
   0%{ color:#000; }
   50%{ color:#FF0004; text-shadow:0px 0px 7px #FF0000}
   100%{ color:#FF0004;}
}		
/*//////////pagina0//////////////*/	

#pag0 .ilustracion1{ width: 100%; height: 100%; background:#ad97c8}	

/*//////////pagina1//////////////*/	

#pag1 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#FFF; opacity:0; padding-top:9%}
#pag1 p{font-size: 1.5rem;}
#pag1 .animada .ilustracion1 {
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

#pag1 .animada .rojo1 {
	  animation: pintaRojo 500ms 3800ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag1 .animada .rojo2 {
	  animation: pintaRojo 500ms 6900ms 1 ease-in;
	  animation-fill-mode: forwards
    }
	
/*//////////pagina2//////////////*/	

#pag2 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#36a448}
#pag2 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2; opacity:0}
#pag2 .ilustracion3{ width: 100%; height: 100%; position:absolute; z-index:3; opacity:0}
#pag2 .ilustracion4{ width: 100%; height: 100%; position:absolute; z-index:4; opacity:0}

#pag2 .animada .ilustracion2 {
	 animation: aparecePage 200ms 1800ms 1 ease-in;
	 animation-fill-mode: forwards
    }
#pag2 .animada .ilustracion3 {
	 animation: aparecePage 200ms 1900ms 1 ease-in;
	 animation-fill-mode: forwards
	}
#pag2 .animada .ilustracion4 {
	 animation: aparecePage 200ms 2000ms 1 ease-in;
	 animation-fill-mode: forwards
	}
	
/*//////////pagina3//////////////*/	

#pag3 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1;
	background-position:center; background-image: url(fd_pagina3.jpg); background-size: cover; background-repeat:no-repeat
}

/*#pag3 .ilustracion1 img { width: 100%;}*/
#pag3 .cofres { width: 100%; position:relative; top:50%;}
#pag3 .cofres img{ width: 7%; position:absolute;}

#pag3 .cofres .cofre1{z-index:2; margin-left:-55px; margin-top:-15px}
#pag3 .cofres .cofre2{z-index:3; margin-left:-30px;}
#pag3 .cofres .cofre3{z-index:4; margin-top:-15px}
#pag3 .cofres .cofre4{z-index:5; margin-left:-10px; margin-top:-40px}
#pag3 .cofres .cofre5{z-index:6; margin-left:-45px; margin-top:-40px}



#pag3 .animada .cofre1 {
	animation: cofre1 400ms 5000ms 1 ease-in;
	animation-fill-mode: forwards
    }
#pag3 .animada .cofre2 {
	animation: cofre2 400ms 9300ms 1 ease-in;
	animation-fill-mode: forwards
    }	
#pag3 .animada .cofre3 {
	animation: cofre3 400ms 15400ms 1 ease-in;
	animation-fill-mode: forwards
    }
#pag3 .animada .cofre4 {
	animation: cofre4 400ms 20800ms 1 ease-in;
	animation-fill-mode: forwards
    }
#pag3 .animada .cofre5 {
	animation: cofre5 400ms 25600ms 1 ease-in;
	animation-fill-mode: forwards
    }
@keyframes cofre1 {
   35% {width:12%; margin-left:-75px}
   100% {width:7%; }
}
@keyframes cofre2 {
   35% {width:15%; margin-left:-45px}
   100% {width:7%; }
}
@keyframes cofre3 {
   35% {width:15%;}
   100% {width:7%; }
}
@keyframes cofre4 {
   35% {width:15%; margin-top:-50px; margin-left:-20px}
   100% {width:7%; }
}
@keyframes cofre5 {
   35% {width:15%; margin-top:-50px; margin-left:-65px}
   100% {width:7%; }
}
	
/*//////////pagina4//////////////*/	

#pag4 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#FFF; opacity:0; padding-top:8%}
#pag4 p{font-size: 1.4rem;}
#pag4 .animada .ilustracion1 {
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

#pag4 .animada .rojo1 {
	  animation: pintaRojo 1500ms 4500ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag4 .animada .rojo2 {
	  animation: pintaRojo 1500ms 13500ms 1 ease-in;
	  animation-fill-mode: forwards
    }

/*//////////pagina5//////////////*/	

#pag5 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#FFF; opacity:0; padding-top:5%}
#pag5 p{font-size: 1.3rem;}

#pag5 .animada .ilustracion1 {
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

#pag5 .animada .rojo1 {
	  animation: pintaRojo 2500ms 17500ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag5 .animada .rojo2 {
	  animation: pintaRojo 800ms 8000ms 1 ease-in;
	  animation-fill-mode: forwards
    }

/*//////////pagina6//////////////*/	

#pag6 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#a9282c}
#pag6 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2;}
#pag6 .ilustracion3{ width: 100%; height: 100%; position:absolute; z-index:3;}
#pag6 .ilustracion4{ width: 100%; height: 100%; position:absolute; z-index:4;}

#pag6 .ilustracion2 img, #pag6 .ilustracion3 img, #pag6 .ilustracion4 img {opacity:0;height:100%;}

#pag6 .animada .ilustracion2{
	  animation: salenSecretos 2000ms 2000ms 2 linear;
	  animation-fill-mode: forwards
    }
#pag6 .animada .ilustracion2 img{
	  animation: salenSecretosIm 2000ms 2000ms 2 linear;
	  animation-fill-mode: forwards
    }
#pag6 .animada .ilustracion3{
	  animation: salenSecretos 1700ms 1000ms 1 linear;
	  animation-fill-mode: forwards
    }
#pag6 .animada .ilustracion3 img{
	  animation: salenSecretosIm 1700ms 1000ms 1 linear;
	  animation-fill-mode: forwards
    }
#pag6 .animada .ilustracion4{
	  animation: salenSecretos 1300ms 3000ms 1 linear;
	  animation-fill-mode: forwards
    }
#pag6 .animada .ilustracion4 img{
	  animation: salenSecretosIm 1300ms 4000ms 1 linear;
	  animation-fill-mode: forwards
    }
@keyframes salenSecretos {
   0%{top:0;height:80%}
   30%{top:-200px; height:100%}
   60%{top:-260px; height:80%}
   100%{top:-550px; height:100%}
}
@keyframes salenSecretosIm {
   0%{opacity:0}
   30%{opacity:100}
   60%{opacity:100}
   100%{opacity:0 }
}
	
/*//////////pagina7//////////////*/	

#pag7 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#d0c7e2}
#pag7 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2;}
#pag7 .ilustracion3{ width: 100%; height: 100%; position:absolute; z-index:3;}
#pag7 .ilustracion4{ width: 100%; height: 100%; position:absolute; z-index:4; opacity:0;}

#pag7 p{font-size: 1.3rem;
		padding-top:8%;
		position:absolute;
		opacity:0;
		z-index:5
}
#pag7 .animada p{
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

#pag7 .animada .ilustracion2 {
	  animation: tiraTrenza 1200ms 6000ms 1 ease-in-out;
	  animation-fill-mode: forwards
    }
#pag7 .animada .ilustracion4 {
	  animation: tiemblaBoca 100ms 6500ms 10;
    }
	
@keyframes tiemblaBoca {
   0%, 50%{opacity:0;}
   1%, 49%{opacity:100;}
}
@keyframes tiraTrenza {
   0%,100% {left:0; bottom:0}
   50% {left:60px; bottom:-40px}

}

/*//////////pagina8//////////////*/	

#pag8 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#FFF; opacity:0; padding-top:14%}


#pag8 .animada .ilustracion1 {
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

#pag8 .animada .rojo1 {
	  animation: pintaRojo 900ms 4800ms 1 ease-in;
	  animation-fill-mode: forwards
    }

/*//////////pagina9//////////////*/	

#pag9 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1;}
#pag9 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2; opacity:0;}
#pag9 .ilustracion3{ width: 100%; height: 100%; position:absolute; z-index:3; opacity:0;}
#pag9 .ilustracion4{ width: 100%; height: 100%; position:absolute; z-index:3; opacity:0;}

#pag9 .animada .ilustracion2 {
	  animation: tiemblaBoca 400ms 1000ms 7;
    }
#pag9 .animada .ilustracion3 {
	  animation: tiemblaBoca 100ms 2000ms 18;
    }
#pag9 .animada .ilustracion4 {
	  animation: tiemblaBoca 200ms 800ms 14;
    }

/*//////////pagina10//////////////*/	

#pag10 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1;}
#pag10 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2; opacity:0;}

#pag10 p{
	  padding:5% 14% 0 10%;
	  margin:0;
	  display:block;
	  position:absolute;
	  z-index:3;
	  font-size:24px;
	  opacity:0;
    }
#pag10 .animada p{
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

#pag10 .animada .ilustracion2 {
	  animation: aparecePage 400ms 4800ms 1 ease-in-out;
	  animation-fill-mode: forwards
    }

/*//////////pagina11//////////////*/	

#pag11 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#FFF; opacity:0; padding-top:12%}

#pag11 p{
	  padding:10% 7%
    }
	
#pag11 .animada .ilustracion1 {
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag11  .aparece1, #pag11  .aparece2, #pag11  .aparece3 {opacity:0}
#pag11  .aparecefrase1, #pag11  .aparecefrase2, #pag11  .aparecefrase3 {opacity:0}
#pag11 .animada .rojo1 {
	  animation: pintaRojo 800ms 2600ms 1 ease-in;
	  animation-fill-mode: forwards
    }
@keyframes aparecePalabra {
   0%{ opacity:0 }
   50%{ opacity:100; text-shadow:0px 0px 7px #FF0000}
   100%{opacity:100;}
}
@keyframes apareceFrase {
   0%{ opacity:0 }
   50%{ opacity:100;}
   100%{opacity:100;}
}	
#pag11 .animada .aparecefrase1 {
	  animation: apareceFrase 400ms 4700ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag11 .animada .aparecefrase2 {
	  animation: apareceFrase 400ms 5800ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag11 .animada .aparecefrase3 {
	  animation: apareceFrase 600ms 7400ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag11 .animada .aparece1 {
	  color:#FF0004;
	  animation: aparecePalabra 400ms 8100ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag11 .animada .aparece2 {
	   color:#FF0004;
	  animation: aparecePalabra 600ms 9000ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag11 .animada .aparece3 {
	   color:#FF0004;
	  animation: aparecePalabra 700ms 10000ms 1 ease-in;
	  animation-fill-mode: forwards
    }
	
/*//////////pagina12//////////////*/	
#pag12 {background:#000}
#pag12 .escena1{ width: 100%; height:100%; overflow:hidden; background:#00b8de; position:relative;}


#pag12 .escena1 .ilustracion1 {position:absolute; z-index:1; width: 100%; height: 100%; overflow:hidden;}
#pag12 .escena1 .ilustracion2 { position:absolute; z-index:2; width: 100%; height: 100%;}
#pag12 .escena1 .ilustracion3 { position:absolute; z-index:3; width: 100%; height: 100%; left:320px; opacity:0}
#pag12 .escena1 .ilustracion4 { position:absolute; z-index:4; background:url(pagina12_secreto_globo.png) no-repeat; background-size:contain; left:15%; top:300px; width:15%; height:125px; opacity:0; text-align:right}

#pag12 .escena1 .ilustracion1 img{position:absolute; z-index:0; left:0; bottom:0; width:1425px}
#pag12 .escena1 .ilustracion4 img{ width:80%; margin:auto}

#pag12 .escena1 .ilustracion2 .cofre1{opacity:100; position:absolute; left:0; bottom:0; z-index:10}
#pag12 .escena1 .ilustracion2 .cofre2{opacity:0; position:absolute; left:0; bottom:0; z-index:11}
#pag12 .escena1 .ilustracion2 .cofre3{opacity:0; position:absolute; left:0; bottom:0; z-index:12}
#pag12 .escena1 .ilustracion2 .cofre4{opacity:0; position:absolute; left:0; bottom:0; z-index:13}
#pag12 .escena1 .ilustracion2 .cofre5{opacity:0; position:absolute; left:0; bottom:0; z-index:14}
#pag12 .escena1 .ilustracion2 .cofre5b{opacity:0; position:absolute; left:0; bottom:0; z-index:15}
#pag12 .escena1 .ilustracion2 .cofre6{opacity:0; position:absolute; left:0; bottom:0; z-index:16}
#pag12 .escena1 .ilustracion2 .cofre7{opacity:0; position:absolute; left:0; bottom:0; z-index:17}
#pag12 .escena1 .ilustracion2 .cofre8{opacity:0; position:absolute; left:0; bottom:0; z-index:18}
#pag12 .escena1 .ilustracion2 .cofre9{opacity:0; position:absolute; left:0; bottom:0; z-index:19}


#pag12 .animada .escena1 .ilustracion2 .cofre1{animation:cofre1 100ms 2300ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena1 .ilustracion2 .cofre2{animation:tipoGif 400ms 2000ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre3{animation:tipoGif 400ms 2300ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre4{animation:tipoGif 400ms 2600ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre5{animation:tipoGif 400ms 2900ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre5b{animation:tipoGif 400ms 3200ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre6{animation:tipoGif 400ms 3500ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre7{animation:tipoGif 400ms 3800ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre8{animation:tipoGif 400ms 4100ms 1 linear;}
#pag12 .animada .escena1 .ilustracion2 .cofre9{animation:tipoGifFinal 400ms 4400ms 1 linear; animation-fill-mode: forwards;}

@keyframes cofre1 {
   0%{opacity:100}
   100%{opacity:0}
}
@keyframes tipoGif {
   0%{opacity:0}
   25%,100%{opacity:100}
}
@keyframes tipoGifFinal {
   0%,100%{opacity:100}
}
#pag12 .animada .escena1 .ilustracion2 { 
	  animation: saleCofre 4000ms 4800ms 1 linear;
	  animation-fill-mode: forwards;
}
#pag12 .animada .escena1 .ilustracion1 img { 
	  animation: pasaFondo 11000ms 4800ms 1 linear;
	  animation-fill-mode: forwards
}
#pag12 .animada .escena1 .ilustracion4 { 
	  animation: nubeMala 12000ms 4600ms 1;
	  animation-fill-mode: forwards
}
#pag12 .animada .escena1 .ilustracion3 { 
		opacity:100;
	  animation: entranManos 2000ms 14600ms 1 ease-in-out;
	  animation-fill-mode: forwards
}
#pag12 .animada .escena1 { 
	  animation: fundidoCubre 1200ms 17000ms 1 ease-in-out;
	  animation-fill-mode: forwards
}

@keyframes saleCofre {
   0%{ left:0 }
   100%{left:-640px}
}
@keyframes pasaFondo {
   0%{ left:0 }
   100%{left:-785px}
}
@keyframes nubeMala {
   0%{opacity:0; left:15%; top:300px; width:15%; height:164px;}
   15%, 35%, 55%, 75% {opacity:100; left:10%; top:100px; width:80%; height:368px;}
   25%, 45%, 65%, 85%{opacity:100; left:10%; top:200px; width:80%; height:368px;}
   100%{opacity:100; left:45%; top:240px; width:35%; height:212px;}
}
@keyframes entranManos {
   0%{ left:320px }
   100%{left:0}
}
@keyframes fundidoCubre {
   0%{ opacity:100;}
   100%{opacity:0;}
}


#pag12 .escena2{position:absolute; z-index:5; width: 100%; height:100%; background:#00b2db; opacity:0}
#pag12 .escena2 .ilustracion1 {width: 100%; height: 100%; position:absolute; left:0}
#pag12 .escena2 .ilustracion2 {width: 100%; position:absolute; z-index:22; left:100%; bottom:-10px; opacity:0}
#pag12 .escena2 .ilustracion3 {width: 100%; position:absolute; z-index:23; left:0; bottom:-10px; opacity:0}



#pag12 .escena2 .ilustracion1 .chausecret1{opacity:100; position:absolute; left:0; bottom:0; z-index:10}
#pag12 .escena2 .ilustracion1 .chausecret2{opacity:0; position:absolute; left:0; bottom:0; z-index:11}
#pag12 .escena2 .ilustracion1 .chausecret3{opacity:0; position:absolute; left:0; bottom:0; z-index:12}
#pag12 .escena2 .ilustracion1 .chausecret4{opacity:0; position:absolute; left:0; bottom:0; z-index:13}
#pag12 .escena2 .ilustracion1 .chausecret5{opacity:0; position:absolute; left:0; bottom:0; z-index:14}
#pag12 .escena2 .ilustracion1 .chausecret6{opacity:0; position:absolute; left:0; bottom:0; z-index:15}
#pag12 .escena2 .ilustracion1 .chausecret7{opacity:0; position:absolute; left:0; bottom:0; z-index:16}
#pag12 .escena2 .ilustracion1 .chausecret8{opacity:0; position:absolute; left:0; bottom:0; z-index:17}
#pag12 .escena2 .ilustracion1 .chausecret9{opacity:0; position:absolute; left:0; bottom:0; z-index:18}
#pag12 .escena2 .ilustracion1 .chausecret10{opacity:0; position:absolute; left:0; bottom:0; z-index:19}
#pag12 .escena2 .ilustracion1 .chausecret11{opacity:0; position:absolute; left:0; bottom:0; z-index:20}
#pag12 .escena2 .ilustracion1 .chausecret12{opacity:0; position:absolute; left:0; bottom:0; z-index:21}


#pag12 .animada .escena2 .ilustracion1 .chausecret1{}
#pag12 .animada .escena2 .ilustracion1 .chausecret2{animation:tipoGifFinal 1120ms 18400ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret3{animation:tipoGifFinal 120ms 19500ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret4{animation:tipoGifFinal 120ms 19600ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret5{animation:tipoGifFinal 120ms 19700ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret6{animation:tipoGifFinal 120ms 19800ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret7{animation:tipoGifFinal 120ms 19900ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret8{animation:tipoGifFinal 120ms 20000ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret9{animation:tipoGifFinal 120ms 20100ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret10{animation:tipoGifFinal 120ms 20200ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret11{animation:tipoGifFinal 120ms 20300ms 1 linear; animation-fill-mode: forwards;}
#pag12 .animada .escena2 .ilustracion1 .chausecret12{animation:tipoGifFinal 120ms 20400ms 1 linear; animation-fill-mode: forwards;}

#pag12 .animada .escena2 { 
	  animation: fundidoDescubre 1200ms 18200ms 1 ease-in;
	  animation-fill-mode: forwards
}
#pag12 .animada .escena2 .ilustracion1{ 
	  animation: mueveFamilia 1500ms 21700ms 1 ease-in;
	  animation-fill-mode: forwards
}
#pag12 .animada .escena2 .ilustracion2{ 
	  animation: entraMama 1500ms 21700ms 1 ease-in;
	  animation-fill-mode: forwards;
}
#pag12 .animada .escena2 .ilustracion3{ 
	  animation: tiemblaBoca 1000ms 25100ms 2 linear;
	  animation-fill-mode: forwards
}

@keyframes fundidoDescubre {
   0%{ opacity:0;}
   100%{opacity:100;}
}
@keyframes mueveFamilia {
   0%{ left:0;}
   100%{left:-100%; bottom:0}
}
@keyframes entraMama {
   0%{ left:100%; opacity:100}
   100%{left:0; opacity:100}
}

/*//////////pagina13//////////////*/	

#pag13 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1;}
#pag13 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2; opacity:0;}
#pag13 .ilustracion3{ width: 100%; height: 100%; position:absolute; z-index:3; opacity:0;}
#pag13 .ilustracion4{ width: 100%; height: 100%; position:absolute; z-index:4;}
#pag13 .ilustracion5{ width: 100%; height: 100%; position:absolute; z-index:5; opacity:0;}

#pag13 p{
	  padding:0 2%;
	  margin:0;
	  display:block;
	  position:absolute;
	  z-index:6;
	  font-size:21px;
	  line-height:41px;
	  opacity:0;
	  width:96%;
    }
#pag13 .animada p{
	  animation: aparecePage 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag13 .aparece1, #pag13 .aparece2, #pag13 .aparece3 {opacity:0}
#pag13 .aparece1 {position:absolute; left:0; width:100%; padding-top:11%}

#pag13 .animada .aparece1 {
	  color:#000; 
	  animation: aparecePalabraYseva 3500ms 300ms 1;
	  animation-fill-mode: forwards;
    }
@keyframes aparecePalabraYseva {
   0%{ opacity:0 }
   20%{ opacity:100; /*text-shadow:0px 0px 7px #FF0000*/}
   50%{opacity:100;}
   99%{opacity:0;}
}
#pag13 .animada .aparece2 {
	   color:#000;
	  animation: apareceFrase 800ms 3800ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag13 .animada .aparece3 {
	   color:#000;
	  animation: apareceFrase 800ms 6500ms 1 ease-in;
	  animation-fill-mode: forwards
    }
	
#pag13 .animada .ilustracion2{
	opacity:0;
	animation: resaltaBuenos 400ms 3800ms 1 ease-in;
	animation-fill-mode: forwards
}
#pag13 .animada .ilustracion3{
	opacity:0;
	animation: aparecePage 400ms 6000ms 1 ease-in;
	animation-fill-mode: forwards
}	
#pag13 .animada .ilustracion5{
	opacity:0;
	animation: resaltaBuenos 400ms 6800ms 1 ease-in;
	animation-fill-mode: forwards
}	
@keyframes resaltaBuenos {
   0%{ opacity:0 }
   50%{ opacity:100; margin-top:-35px}
   100%{opacity:100;}
}

#pag13 .animada .ilustracion4 img{
	opacity:0;
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	display:block;
	animation: nubeMalos 1700ms 6700ms infinite ease-in;
	animation-fill-mode: forwards
}
@keyframes nubeMalos {
   0% {opacity:100; margin-top:0; height:100%; width:100% }
   50%{margin-top:-15%; height:115%; width:100%}
   100% {margin-top:0; height:100%; width:100% }
}

/*////pagina 14////*/
	
#cont14 {width:100%; height:100%; background: #00b8de; color:#000; padding:15px; position:relative}
#cont14 h1{display: block; width:100%; font-size:23px; padding:0; margin:65px 0 0 0; color:#FFF}

#cont14 .juego-pregunta h3{
	padding:15px 7% 0 7%; 
	display:block;
	min-height:150px
	}
#cont14 .juego-pregunta .btn-si{
	width:130px;
	height:130px;
	display:inline-block;
	background:url(juego-btn-si.png) no-repeat top center;
	border-radius:65px;
	margin:0 15px
	}

#cont14 .juego-pregunta .btn-no{
	width:130px;
	height:130px;
	display:inline-block;
	background:url(juego-btn-no.png) no-repeat top center;
	border-radius:65px;
	margin:0 15px
	}

#cont14 .juego-respuesta{
	padding:0; 
	}
#cont14 .juego-respuesta h3{
	padding:10px 7%; 
	}
#cont14 .juego-respuesta .btn-cont{
	width:180px;
	height:112px;
	padding-top:68px;
	display:inline-block;
	background:#603b9c;
	color:#FFF;
	border-radius:90px;
	text-decoration:none;
	font-size:19px;
	margin:0 auto
	}

#cont14 .juego-respuesta .btn-cont2{
	width:75%;
	padding:20px 0;
	text-align:center;
	display:inline-block;
	background:#000;
	color:#FFF;
	border-radius:15px;
	text-decoration:none;
	font-size:19px;
	margin:50px auto 0 auto
	}