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

@charset "utf-8";
/* CSS Document */
  html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #FFF;
      font-family: 'Love Ya Like A Sister Solid', Helvetica, Arial, sans-serif;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
	 /* width:640px;
	  height:640px;*/
	  position:absolute;
	  /*top:50%;
	  left:50%;
	  margin:-50% 0 0 -50%;*/
	  
    }
@media (min-width:768px){
	    body {
      background: #000;
    }
	.swiper-container {
      width: 74%;
      height: 100%;
	  margin-left:13%;
	  position:absolute;
	  overflow:hidden

    }
}
    .swiper-slide {
      text-align: center;
      /* 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;
	  background:#FFF
    }
/*//////////pagina0//////////////*/	

#pag0 .pag {background:#e31e27}
#pag0 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1;}
#pag0 .ilustracion1 img{ width: 100%;}

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

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

#pag1 .ilustracion1 img, #pag1 .ilustracion2 img{width: 100%;}

#pag1 .animada .ilustracion1, #pag1 .animada .ilustracion2{
	  animation: apareceTexto 400ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }
	
@keyframes apareceTexto {
   from{opacity:0 }
   to{ opacity:100 }
}
#pag1 .animada .ilustracion2 img{
	  animation: agrandaSi 600ms 10500ms 1 ease-in;
	  animation-fill-mode: forwards
    }
@keyframes agrandaSi {
   0%, 100%{width:100%; transform: rotate(0deg); }
   50%{width:135%; margin-top:-40%; margin-left:-20%; transform: rotate(-5deg);}
}

/*//////////pagina2//////////////*/	

#pag2 .ilustracion1{
      width: 100%;
      height: 100%;
	  overflow:hidden;
	  background:#8ec63f;
	  text-align:center;
    }

#pag2 .ilustracion1 img{
      display:block;
	  width:100%;
	  position:absolute;
	  bottom:0px
	  
    }
#pag2 .animada .ilustracion1 img{
	animation-name:agrandaCara;
	animation-iteration-count:1;
	animation-delay:1s;
   animation-duration: 1800ms; 
   animation-fill-mode: forwards
    }
	
@keyframes agrandaCara {
   from{ width: 100%; }
   to{ width: 150%; margin-left:-25%; bottom:-10%;}
}

#pag2 .ilustracion2{
      width: 100%;
      height: 100%;
	  overflow:hidden;
	  position:absolute;
	  bottom:-10%;
	  z-index:2;
	  text-align:center;
    }
#pag2 .ilustracion2 img{
	display:block;
	  width:150%;
	  margin-left:-25%;
	  position:absolute;
	  bottom:0px;
	  opacity:0
	}
#pag2 .animada .ilustracion2 img{
	   animation: apareceTexto 30ms 2800ms 1 ease-in;
	   animation-fill-mode: forwards
	}

/*//////////pagina3//////////////*/	

#pag3 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#8ec63f}
#pag3 .ilustracion1 img{opacity:0; width: 100%;}
#pag3 .animada .ilustracion1 img{
	  animation: apareceTexto 500ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

/*//////////pagina4//////////////*/	

#pag4 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background: url(pag4.jpg) no-repeat right bottom #FFF; background-size:contain}	
#pag4 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2; background:#8ec63f; opacity:0}	

#pag4 .ilustracion1 img{
      position:absolute;
	  display:block;
	  bottom:0;
	  left:0;
	  width:100%;
	  opacity:0 
    }
	
#pag4 .animada .ilustracion1 .domino1{animation:apareceDom 1 20ms forwards; z-index:2}	
#pag4 .animada .ilustracion1 .domino2{animation:apareceDom 1 400ms 700ms forwards; z-index:3}	
#pag4 .animada .ilustracion1 .domino3{animation:apareceDom 1 400ms 1300ms forwards; z-index:4}	
#pag4 .animada .ilustracion1 .domino4{animation:apareceDom 1 400ms 1800ms forwards; z-index:5}	
#pag4 .animada .ilustracion1 .domino5{animation:apareceDom 1 400ms 2250ms forwards; z-index:6}	
#pag4 .animada .ilustracion1 .domino6{animation:apareceDom 1 400ms 2700ms forwards; z-index:7}	
#pag4 .animada .ilustracion1 .domino7{animation:apareceDom 1 400ms 3100ms forwards; z-index:8}	
#pag4 .animada .ilustracion1 .domino8{animation:apareceDom 1 400ms 3300ms forwards; z-index:9}	
#pag4 .animada .ilustracion1 .domino9{animation:apareceDom 1 400ms 3700ms forwards; z-index:10}	
#pag14 .animada .ilustracion1 .domino10{animation:apareceDom 1 800ms 42000ms forwards; z-index:11}	
	
@keyframes apareceDom {
   from{opacity:0 }
   to{ opacity:100 }
}
#pag4 .animada .ilustracion2{ 
	opacity:0;
	animation: apareceTexto 700ms 4500ms 1 ease-in;
	animation-fill-mode: forwards
	}
#pag4 .animada .ilustracion2 img{ 
	opacity:0;
	width:100%;
	animation: apareceSiDomino 300ms 5000ms 1 ease-in;
	animation-fill-mode: forwards
	}
@keyframes apareceSiDomino {
   from{opacity:0; width:130%; margin-top:25%; margin-left:-15%}
   to{ opacity:100; width:100%; margin-top:45%; margin-left:0 }
 
}

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

#pag5 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#ffcb02;}
#pag5 .ilustracion1 img{opacity:0; width: 100%;}
#pag5 .animada .ilustracion1 img{
	  animation: apareceTexto 700ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }

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

#pag6 .ilustracion1{
      width: 100%;
      height: 100%;
	  overflow:hidden;
	  position:relative;
	  background:#fff;
	  text-align:center;
    }

#pag6 .ilustracion1 .fondo{
      width: 100%;
	  display:block;
	  position:absolute;
	  z-index:1;
	  bottom:0px;
    }
#pag6 .ilustracion1 .cierraOjosimg{
	width: 160%;
	margin-left:-28%;
	  display:block;
	  position:absolute;
	  z-index:2;
	  bottom:-35%;
	  opacity:100
    }
#pag6 .animada .ilustracion1 .fondo{
      animation: agrandaHelado 500ms 500ms 1;
	  animation-fill-mode: forwards;
    }	

@keyframes agrandaHelado {
   from{ width: 100%; margin-left:0; bottom:0}
   to{ width: 160%; margin-left:-28%; bottom:-35% }
}
#pag6 .estatica .ilustracion1 .cierraOjosimg{
	  opacity:0
    }
#pag6 .animada .ilustracion1 .cierraOjosimg{
	 animation: cierraOjos 20ms 1000ms 1;
	  animation-fill-mode: forwards;
	  opacity:0
    }
 
 @keyframes cierraOjos {
   from{opacity:0 }
   to{ opacity:100 }
}
#pag6 .estatica .ilustracion3 {
	 position:absolute;
	 opacity:0
    }
#pag6 .animada .ilustracion3 {
	 opacity:100;
	 position:absolute;
	 z-index:3;
	 width:100%;
	 height:0;
	 background:#ffcb02;
	/*animation:tapaAmarilla 3300ms 500ms 1 ease-in-out fowards;*/
	animation: tapaAmarilla 300ms 4000ms 1 ease-in;
	animation-fill-mode: forwards
    }
@keyframes tapaAmarilla {
   from{height:0; }
   to{ height:100%; }
}
#pag6 .animada .ilustracion3 img{
	 opacity:0;
	 width:100%;
	animation: apareceSi 800ms 4300ms 1 ease-in;
	animation-fill-mode: forwards
    }
@keyframes apareceSi {
   0%{opacity:100;margin-top:40%;width:130%; transform: rotate(0deg);}
   50%{ opacity:100;margin-top:35%;width:100%; transform: rotate(8deg);}
   100%{ opacity:100;margin-top:35%;width:100%; transform: rotate(0deg);}
}

/*//////////pagina7//////////////*/	

#pag7 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#fff;}
#pag7 .ilustracion1 img{opacity:0; width: 100%;}
#pag7 .animada .ilustracion1 img{
	  animation: apareceTexto 700ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }
/*//////////pagina8//////////////*/	

#pag8 .estatica .paneo{
     position:absolute;
	 bottom:0;
	 opacity:0
    }
#pag8 .animada .paneo{
     position:absolute;
	 bottom:0;
	 opacity:100;
	 animation:paneoSube 2500ms 10ms 1 ease-out;
	 animation-fill-mode: forwards
    }
	
@keyframes paneoSube {
   from{bottom:0;}
   to{bottom:-100px;}
}
#pag8 .ilustracion1{width: 100%;height: 100%;position:relative;overflow:hidden}
#pag8 .ilustracion2{width: 100%;height: 100%;position:absolute;z-index:2;}
#pag8 .ilustracion1 img, #pag8 .ilustracion2 img, #pag8 .ilustracion3 img, #pag8 .ilustracion4 img{width:100%}
#pag8 .estatica .ilustracion2 img{position:absolute;width:100%;}

#pag8 .estatica .ilustracion2 {opacity:0}
#pag8 .animada .ilustracion2 img{
	animation: balanceo 2500ms infinite;
}

@keyframes balanceo {
0%, 100% {transform: rotate(0deg);}
50% {transform: rotate(6deg);}
}
#pag8 .ilustracion3{width: 100%;height: 100%;position:absolute;z-index:3;}
#pag8 .estatica .ilustracion4{width: 100%;height: 100%;position:absolute;z-index:4;opacity:0;}

#pag8 .animada .ilustracion4{
      width: 100%;
      height: 100%;
	  position:absolute;
	  z-index:4;
	  opacity:0;
	  animation-name:cierraOjos2;
	animation-iteration-count:infinite;
	animation-delay:500ms;
   animation-duration:3000ms; 
   animation-fill-mode: forwards
    }
@keyframes cierraOjos2 {
   0%{opacity:100;}
   48%{opacity:100;}
   50%{opacity:0;}
   98%{opacity:0;}
   100%{ opacity:100;}
}
#pag8 .estatica .ilustracion5 {
	 opacity:0;
	 position:absolute;
	 z-index:5;
	 width:100%;
	 height:100%;
	 background:#fff;
    }
#pag8 .animada .ilustracion5 {
	 opacity:0;
	 position:absolute;
	 z-index:5;
	 width:100%;
	 height:100%;
	 background:#fff;
	animation: apareceDom 300ms 3300ms 1 ease-in;
	animation-fill-mode: forwards
    }
@keyframes tapaBlanca {
   0%{height:0; top:100%}
   100%{ height:100%; Top:0 }
}

#pag8 .animada .ilustracion5 img{
	 opacity:0;
	animation: apareceSi2 400ms 3600ms 1 ease-out;
	width:80%;
	animation-fill-mode: forwards
    }
@keyframes apareceSi2 {
   0%{opacity:100;margin-top:80px; margin-right:-500px }
   100%{ opacity:100;margin-top:80px; margin-right:0 }
}

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

#pag9 .ilustracion1{ width: 100%; height: 100%; position:absolute; z-index:1; background:#8ec63f}
#pag9 .ilustracion2{ width: 100%; height: 100%; position:absolute; z-index:2;}

#pag9 .ilustracion1 img, #pag9 .ilustracion2 img{width: 100%; opacity:0}

#pag9 .animada .ilustracion1 img{
	  animation: apareceTexto 700ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag9 .animada .ilustracion2 img{
	  animation: apareceSiPapa 300ms 1500ms 1 ease-in;
	  animation-fill-mode: forwards
    }
@keyframes apareceSiPapa {
   0%{opacity:0; width:220%; margin-top:-50%; margin-left:-25%}
   100%{ opacity:100; width:100%; margin:0 }
}

/*//////////pagina10//////////////*/	
#pag10 .pag{
	 background:#8ec63f
    }
#pag10 .estatica .zoom{
	 width: 100%; height: 100%; background:#8ec63f
    }
#pag10 .zoom img{
	 width: 100%;
	 position:absolute;
	 bottom:0;
	 left:50%;
	 margin-left:-50%;
    }
#pag10 .animada .zoom{
     width: 100%; height: 100%;
}
#pag10 .animada .zoom img{
	 animation:ZoomIn 1500ms 500ms 1 ease-in-out;
	 position:absolute;
	 animation-fill-mode: forwards
    }	
@keyframes ZoomIn {
   from{width: 100%;}
   to{width: 150%; margin-left:-90%;}
}
#pag10 .estatica .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100}
#pag10 .estatica .ilustracion2{width: 100%; height: 100%; position:absolute; z-index:2; opacity:0}
#pag10 .ilustracion3{width: 100%; height: 100%; position:absolute; z-index:3; opacity:0}

#pag10 .animada .ilustracion2{
	width: 100%; height: 100%; position:absolute; z-index:1; opacity:0;
	animation:sonrisa 1300ms 1900ms 1;
	 animation-fill-mode: forwards
	}
#pag10 .animada .ilustracion3{
	width: 100%; height: 100%; position:absolute; z-index:2; opacity:0;
	animation:guiniaOjo 1000ms 2800ms 1;
	}
@keyframes guiniaOjo {
   0%{opacity:100;}
   45%{opacity:100;}
   46%{opacity:0;}
}
@keyframes sonrisa {
   0%{opacity:0;}
   1%{opacity:100;}
   99%{opacity:100;}
   100%{opacity:0;}
}

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

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

#pag11 .ilustracion1 img{opacity:0; position:absolute; display:block; width:100%; top:0}
#pag11 .animada .ilustracion1 img{
	  animation: apareceTexto 700ms 200ms 1 ease-in;
	  animation-fill-mode: forwards
    }
#pag11 .animada .ilustracion2 { 
	animation: apareceTexto 700ms 200ms 1 ease-in;
	animation-fill-mode: forwards
	}
#pag11 .animada .ilustracion2 img{ 
	width:100%;
	margin-top:220px;
	margin-left:0;
	transform: rotate(-7deg);
	animation: agrandaNo 500ms 3900ms 1;
	animation-fill-mode: forwards
	}
	
@keyframes agrandaNo {
   0%, 100%{width:100%;margin-top:220px; transform: rotate(-7deg); }
   50%{width:130%; margin-top:100px; margin-left:-15%; transform: rotate(0deg);}
}
/*//////////pagina12//////////////*/	

#pag12 .pag{background:#8c73b5}
#pag12 .estatica .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100}
#pag12 .estatica .ilustracion2{width: 100%; height: 100%; position:absolute; z-index:2; opacity:0}
#pag12 .estatica .ilustracion3{width: 100%; height: 100%; position:absolute; z-index:3; opacity:0}
#pag12 .ilustracion4{width: 100%; height: 100%; position:absolute; z-index:4; opacity:0}

#pag12 .ilustracion1 img, #pag12 .ilustracion2 img, #pag12 .ilustracion3 img { width:100%; position:absolute; bottom:0; left:0}
	
#pag12 .animada .ilustracion2{
	width: 100%; height: 100%; position:absolute; opacity:0; z-index:2;
	animation:apareceFotograma1 330ms 500ms 1;
	animation-fill-mode: forwards
	}
#pag12 .animada .ilustracion3{
	width: 100%; height: 100%; position:absolute; opacity:0; z-index:3;
	animation:apareceFotograma1 330ms 700ms 1;
	animation-fill-mode: forwards
	}

#pag12 .animada .ilustracion4{ background:#000;width: 100%; height: 100%; position:absolute; opacity:0; z-index:4;
	animation:apareceFotograma1 900ms 900ms 1;
	animation-fill-mode: forwards
}
#pag12 .animada .ilustracion4 img{
	position:absolute; top:50%; left:50%; margin-top:-50%; margin-left:-50%; opacity:0;
	width:100%;
	animation:apareceNo 500ms 1100ms 1 ease-in;
	animation-fill-mode: forwards
}
@keyframes apareceFotograma1 {
   0%{opacity:0;}
   100%{opacity:100;}
}
@keyframes apareceNo {
   0%{width:900px; top:50%; left:50%; margin-top:-450px; margin-left:-450px; opacity:100;}
   45%{width:380px; top:50%; left:50%; margin-top:-190px; margin-left:-190px; opacity:100;}
   60%{width:620px; top:50%; left:50%; margin-top:-310px; margin-left:-310px; opacity:100;}
   100%{width:100%; top:50%; left:50%; margin-top:-50%; margin-left:-50%; opacity:100;}
}

/*//////////pagina13//////////////*/	
#pag13 .pag{overflow:hidden; background:#9d85bf}
#pag13 .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100}
#pag13 .ilustracion2{width: 100%; height: 100%; position:absolute; z-index:2; opacity:100; overflow:hidden}
#pag13 .ilustracion4{width: 100%; height: 100%; position:absolute; z-index:4; opacity:100}
#pag13 .ilustracion5{width: 100%; height: 100%; position:absolute; z-index:5; opacity:100}

#pag13 .ilustracion1 img, #pag13 .ilustracion4 img{position:absolute; bottom:-40px; left:0; width:100%}
#pag13 .ilustracion2 img{position:absolute;bottom:-60px; left:0; width:107%}
#pag13 .animada .ilustracion2 img{
	position:absolute;
	animation:tironeo 800ms 300ms infinite linear;
}
#pag13 .ilustracion5 img{ position:absolute; display:block; width: 100%; position:absolute; top:0; left:0;}

@keyframes tironeo {
   0%{left:0}
   50%{left:-6.8%}
   100%{left:0}
}
#pag13 .ilustracion4 img{
	animation: guiniaOjo 130ms 400ms infinite linear;
}
#pag13 .estatica .ilustracion5{opacity:0;}

#pag13 .animada .ilustracion5{
	opacity:0;
	animation: apareceTexto 700ms 500ms 1 ease-in;
	animation-fill-mode: forwards
}

/*//////////pagina14//////////////*/	
#pag14 .pag{overflow:hidden; background:#baa5cf}
#pag14 .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100;overflow:hidden}
#pag14 .ilustracion2{width: 100%; height: 100%; position:absolute; z-index:2; opacity:100; overflow:hidden}
#pag14 .ilustracion3{width: 100%; height: 100%; position:absolute; z-index:5; opacity:100}
#pag14 .ilustracion3 img{ position:absolute; display:block; width: 100%; position:absolute; top:0; left:0;}

#pag14 .ilustracion1 img{
	position:absolute;
	bottom:-25px;
	left:-90px;
	left:0;
	display:block; 
	width:100%
}
#pag14 .ilustracion2 img{
	position:absolute;
	bottom:95px;
	left:-80px;
	display:block; 
	width:48%
}
#pag14 .animada .ilustracion1 img{
	animation: juliEmpujada 1000ms 3750ms 1 ease-out;
	animation-fill-mode: forwards;
}
#pag14 .animada .ilustracion2 img{
	animation: empuja 400ms 3550ms 1 ease-out;
	animation-fill-mode: forwards;
}
@keyframes juliEmpujada {
   0%{left:-90; transform: rotate(0);}
   50%{left:70px; transform: rotate(5deg);}
   75%{left:80px; transform: rotate(1deg);}
   100%{left:90px; transform: rotate(0 );}
}
@keyframes empuja {
   0%{left:-100px;}
   50%{left:0px}
   100%{left:-15px}
}
#pag14 .estatica .ilustracion3{opacity:0;}

#pag14 .animada .ilustracion3{
	opacity:0;
	animation: apareceTexto 300ms 500ms 1 ease-in;
	animation-fill-mode: forwards
}
/*//////////pagina15//////////////*/	
#pag15 .pag{background:#9d86be}

#pag15 .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100;overflow:hidden;}
#pag15 .ilustracion3{width: 100%; height: 100%; position:absolute; z-index:2; opacity:100}
#pag15 .ilustracion2{width: 100%; height: 110px; position:relative; z-index:5; opacity:100; background:#9d86be}

#pag15 .ilustracion1 img,  #pag15 .ilustracion3 img {width: 100%; position:absolute; bottom:0; left:0}

#pag15 .estatica .ilustracion2{opacity:0;}
#pag15 .ilustracion2 img{ position:absolute; display:block; width: 100%; top:0; left:0;}

#pag15 .animada .ilustracion2{
	opacity:0;
	animation: apareceTexto 300ms 500ms 1 ease-in;
	animation-fill-mode: forwards
}
#pag15 .animada .ilustracion3{
	opacity:0;
	animation: sonrisa 2000ms 1300ms 1 ease-in;
	animation-fill-mode: forwards
}

/*//////////pagina16//////////////*/	
#pag16 .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100; background:#8c72b5}
#pag16 .ilustracion2{width: 100%; height: 100%; position:absolute; z-index:2; opacity:100}
#pag16 .ilustracion3{width: 100%; height: 100%; position:absolute; z-index:3; opacity:0}
#pag16 .ilustracion4{width: 100%; height: 100%; position:absolute; z-index:4; opacity:0}
#pag16 .ilustracion5{width: 100%; height: 100%; position:absolute; z-index:5; opacity:100}

#pag16 .ilustracion1 img, #pag16 .ilustracion2 img, #pag16 .ilustracion3 img, #pag16 .ilustracion4 img {width: 100%; position:absolute; bottom:0; left:0}

#pag16 .animada .ilustracion2 {
	animation: JuliCabeza 300ms 2500ms 1 ease-in;
	animation-fill-mode: forwards;
	opacity:0
	}

@keyframes JuliCabeza {
   0%{opacity:0}
   100%{opacity:100}
}
@keyframes JuliCabeza2 {
   0%, 100%{margin-top:0}
   40%{margin-top:-9px}
}
#pag16 .animada .ilustracion3 {
	animation: apareceTexto 500ms 1000ms 1 ease-in;
	animation-fill-mode: forwards
	}
#pag16 .animada .ilustracion4 {
	animation: murmullo 800ms 1300ms infinite ease-in;
	animation-fill-mode: forwards
	}
@keyframes murmullo {
   0%, 100%{opacity:0}
   50%{opacity:100}
}
#pag16 .estatica .ilustracion5{opacity:0;}
#pag16 .animada .ilustracion5{
	opacity:0;
	animation: apareceTexto 300ms 500ms 1 ease-in;
	animation-fill-mode: forwards
}
#pag16 .ilustracion5 img{ position:absolute; display:block; width: 100%; top:0; left:0;}

/*//////////pagina17//////////////*/	
#pag17 .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100;overflow:hidden; background:#FF0004}
#pag17 .ilustracion1 img{ position:absolute; width:100%; opacity:0; bottom:0; left:0}

#pag17 .animada .ilustracion1 img{
	animation: apareceTexto 300ms 500ms 1 ease-in;
	animation-fill-mode: forwards
}

/*//////////pagina18//////////////*/	
#pag18 .ilustracion1{width: 100%; height: 100%; position:absolute; bottom:0; z-index:1; background:#a795c7}
#pag18 .ilustracion2{width: 100%; height: 100%; position:absolute; bottom:0; z-index:2; opacity:0}
#pag18 .ilustracion3{width: 100%; height: 100%; position:absolute; bottom:0; z-index:3}
#pag18 .ilustracion4{width: 100%; height: 100%; position:absolute; bottom:0; z-index:4; opacity:0}

#pag18 .ilustracion1 img, #pag18 .ilustracion2 img, #pag18 .ilustracion3 img {height: 100%; position:absolute; bottom:0; left:0}

#pag18 .animada .ilustracion2{
	animation: mueveDedo 1000ms 10ms infinite ease-in-out;
	}
@keyframes mueveDedo {
   0%,49%,100% {opacity:100}
   50%,99%{opacity:0}
}
#pag18 .animada .ilustracion3{
	animation: abrePupila 3000ms 500ms infinite ease-in;
	}
@keyframes abrePupila {
   0%{opacity:0;}
   45%{opacity:0;}
   46%{opacity:100;}
}
#pag18 .animada .ilustracion4{
	animation: apareceTexto 100ms 800ms 1 ease-in;
	animation-fill-mode: forwards
	}
	
#pag18 .animada .ilustracion4 img{
	animation: tiemblaBoca 160ms 900ms infinite linear;
	animation-fill-mode: forwards;
	height: 100%;
	}	
@keyframes tiemblaBoca {
   0%{margin-top:0}
   100%{margin-top:2px}
}

/*//////////pagina19//////////////*/	
#pag19 .pag {background:#ee1c25;}
#pag19 .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100;overflow:hidden;}
#pag19 .ilustracion1 img{position:absolute; display:block; width: 100%; top:0; left:0; opacity:0;}
#pag19 .animada .ilustracion1 img{
	animation: apareceTexto 300ms 500ms 1 ease-in;
	animation-fill-mode: forwards
}
/*//////////pagina20//////////////*/
#pag20 .pag {background:#ee1c25;}	
#pag20 .ilustracion1{width: 100%; height: 100%; position:absolute; z-index:1; opacity:100;overflow:hidden}
#pag20 .ilustracion2{width: 100%; height: 100%; position:absolute; z-index:2; opacity:0;overflow:hidden;}

#pag20 .ilustracion1 img, #pag20 .ilustracion2 img{position:absolute; display:block; width: 100%; bottom:0; left:0;}

#pag20 .animada .ilustracion2 {
	animation: apareceTexto 500ms 700ms 1 ease-in;
	animation-fill-mode: forwards
	}
#pag20 .animada .ilustracion2 img{
	opacity:100;
	left:0;
	bottom:100px;
	animation: noFinal 500ms 700ms 1 ease-in;
	animation-fill-mode: forwards
}
@keyframes noFinal {
   0%{width:90%; bottom:100px}
   50%{width:170%; margin-top:-25%; margin-left:-25%; transform:rotate(10deg)}
   100%{width:90%; bottom:100px; margin-top:0; margin-left:3%}
}

@media (max-width:768px){
}
/*//////////pagina21//////////////*/
	
#cont21 {width:100%; height:100%; background: url(juego_sino.png) no-repeat #8c73b5; color:#000; padding:15px; position:relative}
#cont21 h1{display: block; width:100%; font-size:23px; padding:0; margin:65px 0 0 0; color:#FFF}

#cont21 .juego-pregunta{
	padding:40px 0 0 0; 
	}
#cont21 .juego-pregunta h3{
	padding:40px 0; 
	}
#cont21 .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
	}

#cont21 .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
	}

#cont21 .juego-respuesta{
	padding:40px 0 0 0; 
	}
#cont21 .juego-respuesta h3{
	padding:40px 0; 
	}
#cont21 .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
	}

#cont21 .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
	}