/* PARALLAX SCROLLING EXPERIMENT
   Master Styles
   Author: Jonathan Nicol (f6design.com)
*****************************************************************/
@font-face {
 font-family: BrainFlower;
 src: url(http://www.lanzawebs.com/alcohol/BrainFlower.ttf) format(‘truetype’);                        /* requerido */

}

/* Global reset
   http://meyerweb.com/eric/tools/css/reset/ 
*****************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Extended base styles (site specific)
*****************************************************************/

html { 
	height:100%;
	overflow-y: scroll;
	
	}
body {
height:100%;
	background: black;
	overflow-y: scroll;
	line-height: 1.5;
	color: #fff;
	font-size: 14px;
	font-family: BrainFlower, Verdana;
}
h1 {
	color: black;
}
a, a:link,
a:active,
a:visited {
	-webkit-transition: color 0.25s ease-out;
	-moz-transition: color 0.25s ease-out;
	-o-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
	color:#21a97e;
	outline: none;
	text-decoration:none;
	}
	a:hover { 
		color:#000;
		}
img { 
	display:block;
	}
p {
	margin:1em 0;
	}

/* Common shared styles
*****************************************************************/

hr {
	margin: 0;
	border: none;
	border-top: 1px solid #3b3b3b;
	border-bottom: 1px solid #3b3b3b;
	height: 3px;
}

/* Page structure
*****************************************************************/

#wrapper {
	position: absolute;
	background: black;
	height:100%;
	width:100%;
	overflow-x: hidden;
	overflow-y: hidden;
}

#video1{z-index:21;display:block; position: absolute; top: 396px;left: 346px;width:0px;cursor: pointer;
			transform : rotate(-10deg);-moz-transform : rotate(-10deg); -webkit-transform : rotate(-10deg);
				
					}
#logo {z-index:40; position: absolute; top: 0%;left: 74%;width:12%;}					



/* Parallax
*****************************************************************/
		#entrar{z-index:29;display:none; position: absolute; top: 64%;left: 63%;width:10%;}
		#entrar:hover{z-index:29;width:23%;}
						
	/* ****************ONDAS*************************************************/
		#ondas{z-index:21;display:none; position: absolute; top: 495px;left: 546px;width:0px;cursor: pointer;
				-webkit-animation-name: ondular;-webkit-animation-duration: 3s;animation-name: ondular;animation-duration: 3s;animation-delay:3s;
					animation-timing-function: linear; animation-iteration-count: 20;animation-direction: alternate;
					}
					@-webkit-keyframes ondular {
						0%   {width:154px;top: 495px;left: 546px;}  		
						100% {width:384px;top: 380px;left: 431px;}}
					@keyframes ondular {
						0%   {width:154px;top: 495px;left: 546px;}  		
						100% {width:384px;top: 380px;left: 431px;}}
		#ondas2{z-index:21;display:none; position: absolute; top: 495px;left: 546px;width:0px;cursor: pointer;
			
				-webkit-animation-name: ondular2;-webkit-animation-duration: 4s;animation-name: ondular2;animation-duration: 4s;animation-delay:4s;
					animation-timing-function: linear; animation-iteration-count: 20;animation-direction: alternate;
					}
					@-webkit-keyframes ondular2 {
						0%   {width:154px;top: 495px;left: 546px;}  		
						100% {width:384px;top: 380px;left: 431px;}}
					@keyframes ondular2 {
						0%   {width:184px;top: 495px;left: 546px;}  		
						100% {width:384px;top: 380px;left: 431px;}}
	/* ****************MAGNETOFONO*************************************************/	
		#magnetofono{z-index: 21;display:block; position: absolute; top: 10%;left: 28%;width:13%;cursor: pointer;
			-webkit-animation-name: entramagne;-webkit-animation-duration: 1.5s;
			animation-name: entramagne;animation-duration: 1.5s;}
			@-webkit-keyframes entramagne {0%  (width:0%) 100% {width: 13%;}}
			@keyframes entramagne {0%   {width:0%}  100% {width:13%;}}
		#magnetofono:hover{width: 14%;}
		
		#cajonmagne2{z-index:17; display:none;cursor:pointer;position: absolute;top:19%; left: 12%; width: 26%;margin: 0px;border:0px;
			-webkit-animation-name: agranda-caja;-webkit-animation-duration: 3s;animation-name: agranda-caja;animation-duration: 3s;}
			@-webkit-keyframes agranda-caja {0%  (width:14%;left: 28%;) 100% { left: 12%; width: 26%;}}
			@keyframes agranda-caja {0%   {width:14%;left: 28%;}  100% { left: 12%; width: 26%;}}	
		#magne2{z-index:19;display:none;position: absolute;top:0%; left: 0%; width: 100%;margin: 0px;border:0px;}
			
		
		#rueda{z-index:24;display:block; position:absolute;top:0%; left:0%; width:100%;}


		
		#magne3{z-index:19;display:none; cursor:pointer;position: absolute;top: 67%;left: 75%; width: 8%;margin: 0px;border:0px;
			-webkit-animation-name: amenu-magne;-webkit-animation-duration: 3s;animation-name: amenu-magne;animation-duration: 3s;}
			@-webkit-keyframes amenu-magne {0%  (top: 10%;left: 24%;width:13%;) 100% {top: 67%;left: 75%; width: 8%;}}
			@keyframes amenu-magne {0%   {top: 10%;left: 24%;width:13%;}  100% {top: 67%;left: 75%; width: 8%;}}
		
			
			
		/* magne4 es la segunda posicion del menu */
		#magne4{z-index:19;display:none; cursor:pointer;position: absolute;top:28%; left: 75%; width: 7%;margin: 0px;border:0px;
			-webkit-animation-name: amenu-segunda;-webkit-animation-duration: 3s;animation-name: amenu-segunda;animation-duration: 3s;}
			@-webkit-keyframes amenu-segunda {0%  (top: 10%;left: 24%;width:13%;) 100% {top:28%; left: 75%; width: 7%;}}
			@keyframes amenu-segunda {0%   {top: 10%;left: 24%;width:14%;}  100% {top:28%; left: 75%; width: 7%;}}
		#magne44{z-index:29;display:none; cursor:pointer;position: absolute;top:28%; left: 75%; width: 7%;margin: 0px;border:0px;
				-webkit-animation-name: apar-magnemenulengua;-webkit-animation-duration: 2s;animation-name: apar-magnemenulengua;animation-duration: 2s;
				}
			@-webkit-keyframes apar-magnemenulengua {0%  (top:28%; left: 75%;width:0%;) 100% {top:28%; left: 75%; width: 7%;}}
			@keyframes apar-magnemenulengua {0%   {top:28%; left: 75%;width:0%;}  100% {top:28%; left: 75%; width: 7%;}}
		
		#magne5{z-index:19;display:none; cursor:pointer;position: absolute;top:48%; left: 75%; width: 7%;margin: 0px;border:0px;
			-webkit-animation-name: amenu-tercera;-webkit-animation-duration: 3s;animation-name: amenu-tercera;animation-duration: 3s;}
			@-webkit-keyframes amenu-tercera {0%  (top: 10%;left: 24%;width:13%;) 100% {top: 48%;left: 75%; width: 7%;}}
			@keyframes amenu-tercera {0%   {top: 10%;left: 24%;width:13%;}  100% {top: 48%;left: 75%; width: 7%;}}
		#magne55{z-index:29;display:none; cursor:pointer;position: absolute;top:48%; left: 75%; width: 7%;margin: 0px;border:0px;
			-webkit-animation-name: apar-magnemenumicro;-webkit-animation-duration: 2s;animation-name: apar-magnemenumicro;animation-duration: 2s;
				}
			@-webkit-keyframes apar-magnemenumicro {0%  (top:48%; left: 75%; width: 0%;) 100% {top:48%; left: 75%; width: 7%;}}
			@keyframes apar-magnemenumicro {0%   {top:48%; left: 75%; width: 0%;}  100% {top:48%; left: 75%; width: 7%;}}
		#magne6{z-index:19;display:none; cursor:pointer;position: absolute;top:9%; left: 75%; width: 7%;margin: 0px;border:0px;
			-webkit-animation-name: amenu-cuarta;-webkit-animation-duration: 3s;animation-name: amenu-cuarta;animation-duration: 3s;}
			@-webkit-keyframes amenu-cuarta {0%  (top: 10%;left: 24%;width:13%;) 100% {top: 9%;left: 75%; width: 7%;}}
			@keyframes amenu-cuarta {0%   {top: 10%;left: 24%;width:13%;}  100% {top: 9%;left: 75%; width: 7%;}}
		#magne66{z-index:29;display:none; cursor:pointer;position: absolute;top:9%; left: 75%; width: 7%;margin: 0px;border:0px;
			-webkit-animation-name: apar-magnemenutecla;-webkit-animation-duration: 2s;animation-name: apar-magnemenutecla;animation-duration: 2s;
				}
			@-webkit-keyframes apar-magnemenutecla {0%  (top:9%; left: 75%; width: 0%;) 100% {top:9%; left: 75%; width: 7%;}}
			@keyframes apar-magnemenutecla {0%   {top:9%; left: 75%; width: 0%;}  100% {top:9%; left: 75%; width: 7%;}}
		#magne7{z-index:19;display:none; cursor:pointer;position: absolute;top:65%; left: 75%; width: 7%;margin: 0px;border:0px;
			-webkit-animation-name: amenu-quinta;-webkit-animation-duration: 3s;animation-name: amenu-quinta;animation-duration: 3s;}
			@-webkit-keyframes amenu-quinta {0%  (top: 10%;left: 24%;width:13%;) 100% {top: 65%;left: 75%; width: 7%;}}
			@keyframes amenu-quinta {0%   {top: 10%;left: 24%;width:13%;}  100% {top: 65%;left: 75%; width: 7%;}}
		#magne77{z-index:29;display:none; cursor:pointer;position: absolute;top:65%; left: 75%; width: 7%;margin: 0px;border:0px;
			-webkit-animation-name: apar-magnemenuguita;-webkit-animation-duration: 2s;animation-name: apar-magnemenuguita;animation-duration: 2s;
				}
			@-webkit-keyframes apar-magnemenuguita {0%  (top:65%; left: 75%; width: 0%;) 100% {top:65%; left: 75%; width: 7%;}}
			@keyframes apar-magnemenuguita {0%   {top:65%; left: 75%; width: 0%;}  100% {top:65%; left: 75%; width: 7%;}}	
		#magne16{z-index:29;display:none; cursor:pointer;position: absolute;top:19%; left: 12%; width: 26%;margin: 0px;border:0px;
			-webkit-animation-name: demenu-amagnegrande;-webkit-animation-duration: 3s;animation-name: demenu-amagnegrande;animation-duration: 3s;}
			@-webkit-keyframes demenu-amagnegrande {0%  (top: 67%;left: 75%; width: 8%;) 100% {left: 12%; width: 26%;}}
			@keyframes demenu-amagnegrande {0%   {top: 67%;left: 75%; width: 8%;}  100% {left: 12%; width: 26%;}}
		#cajamagne {display:block;z-index:13;position: absolute;top: 24%;left: 12%;cursor:pointer;width:18%;
			-webkit-transition-name: entracajamagne;-webkit-transition-duration: 2s;
			transition-name: entracajamagne;transition-duration: 2s;}
			@-webkit-keyframes entracajamagne {0%  (top: 0%;width:0%;left: 10%;) 80%  (top: 0%;width:0%;left: 10%;) 100% {top: 22%;width: 17%;left: 10%;}}
			@keyframes entracajamagne {0%   {top: 0%;width:0%;left: 10%;} 80%  (top: 0%;width: 0%;left: 10%;)  100% {top: 22%;width:17%;left: 10%;}}
		#cajamagne:hover{width:18%;z-index:30;}	
		#cajamagnemover {display:none;z-index:3;position: absolute;top: 18%;left: 44%;width:20%;
			-webkit-animation-name: movercaja1;-webkit-animation-duration: 4s;animation-name: movercaja1;animation-duration: 4s;}
			@-webkit-keyframes movercaja1 {0%  (top: 22%;left: 10%;width:20%; ) 100% {top: 18%;left: 44%;width:20%;}}
			@keyframes movercaja1 {0%   {top: 22%;left: 10%;width:20%;}  100% {top: 18%;left: 44%;width:20%;}}
		#textomagne {display:none;z-index:3;position: absolute;top: 31%;left: 46%;width:18%;
			-webkit-animation-name: aparece-texto1;-webkit-animation-duration: 5s;animation-name: aparece-texto1;animation-duration: 5s;}
			@-webkit-keyframes aparece-texto1 {0%  (width:0%;) 100% {width:18%;}}
			@keyframes aparece-texto1 		{0%   {width:0%;}  100% {width:18%;}}
/* ****************GUITARRA*************************************************/	
		#guitarra{z-index:10;display:block; position: absolute;top: 46%;left: 24%; width:18%;cursor: pointer;
		-webkit-animation-name: entraguita;-webkit-animation-duration: 1.5s;
			animation-name: entraguita;animation-duration: 1.5s;}
			@-webkit-keyframes entraguita {0%  (width:0%;) 100% {width: 18%;}}
			@keyframes entraguita {0%   {width:0%;}  100% {width:18%;}}
		#guitarra:hover{width:20%;}

		#guita2{z-index: 10;display:none; cursor:pointer;position: absolute;top: 59%;left: 74%; width: 12%;margin: 0px;border:0px;
			transform : rotate(98deg);-moz-transform : rotate(98deg); -webkit-transform : rotate(98deg);
			-webkit-animation-name: empeque-caja3;-webkit-animation-duration: 3s;animation-name: empeque-caja3;animation-duration: 3s;}
			@-webkit-keyframes empeque-caja3 {
				0%  (top: 38%;left: 19%;width:22%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 
				100% {left: 74%;top: 59%; width: 12%;transform : rotate(98deg);-moz-transform : rotate(98deg); -webkit-transform : rotate(98deg);}}
			@keyframes empeque-caja3 		{
				0%   {top: 38%;left: 19%;width:22%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  
				100% {left: 74%;top: 59%; width: 12%;transform : rotate(98deg);-moz-transform : rotate(98deg); -webkit-transform : rotate(98deg);}}
				
		#guita3{z-index: 19;display:none; cursor:pointer;position: absolute;top:22%; left: 14%; width: 30%;margin: 0px;border:0px;
			-webkit-animation-name: ampliar-guita;-webkit-animation-duration: 3s;animation-name: ampliar-guita;animation-duration: 3s;}
			@-webkit-keyframes ampliar-guita {
				0%  (top: 38%;left: 19%; width:18%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 
				100% {top:22%; left: 14%; width: 30%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}}
			@keyframes ampliar-guita 		{
				0%   {top: 38%;left: 19%; width:18%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  
				100% {top:22%; left: 14%; width: 30%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}}
		#guita10{z-index: 23;display:none; cursor:pointer;position: absolute; top:22%; left: 14%; width: 30%;margin: 0px;border:0px;		
			-webkit-animation-name: demenu-guita;-webkit-animation-duration: 3s;animation-name: demenu-guita;animation-duration: 3s;}
			@-webkit-keyframes demenu-guita {
				0%  (top: 62%;left: 74%; width: 12%;transform : rotate(98deg);-moz-transform : rotate(98deg); -webkit-transform : rotate(98deg);) 
				100% {top:22%; left: 14%; width: 30%;}}
			@keyframes demenu-guita 		{
				0%   {top: 62%;left: 74%; width: 12%;transform : rotate(98deg);-moz-transform : rotate(98deg); -webkit-transform : rotate(98deg);}  
				100% {top:22%; left: 14%; width: 30%;}}
		#guita20{z-index: 30;display:none; cursor:pointer;position: absolute; top: 59%;left: 74%; width: 12%;margin: 0px;border:0px;
				transform : rotate(98deg);-moz-transform : rotate(98deg); -webkit-transform : rotate(98deg);
		}
		#cajaguita {z-index:3;display:block;position: absolute;top: 63%;left: 12%;width:21%; }
		#cajaguita:hover {z-index:14;;width:24%; }	
		#cajaguitamover {display:none;z-index:3;position: absolute;top: 21%;left: 42%;width:22%;
			-webkit-animation-name: movercaja2;-webkit-animation-duration: 4s;animation-name: movercaja2;animation-duration: 4s;}
			@-webkit-keyframes movercaja2 {0%  (top: 63%;left: 12%;width:22%; ) 100% {top: 21%;left: 42%;}}
			@keyframes movercaja2 {0%   {top: 63%;left: 12%;width:22%;}  100% {top: 21%;left: 42%;}}
		#textoguita {display:none;z-index:3;position: absolute;top: 31%;left: 44%;width:20%;
			-webkit-animation-name: aparece-texto2;-webkit-animation-duration: 5s;animation-name: aparece-texto2;animation-duration: 5s;}
			@-webkit-keyframes aparece-texto2 {0%  (width:0%;) 100% {width:20%;}}
			@keyframes aparece-texto2 		{0%   {width:0%;}  100% {width:20%;}}
			/* ****************LENGUA*************************************************/	
		#lengua{z-index: 23;display:block; position: absolute;top: 34%;left: 45%;width:14%; cursor: pointer;
			-webkit-animation-name: entralengua;-webkit-animation-duration: 1.5s;
			animation-name: entralengua;animation-duration: 1.5s;}
			@-webkit-keyframes entralengua {0%  (width:0%;left: 47%;) 100% {width: 14%;left: 45%;}}
			@keyframes entralengua {0%   {width:0%;left: 46%;}  100% {width:14%;left: 45%;}}
		#lengua:hover{width:15%;animation-duration: 3s;}
		#lengu2{z-index: 17;display:none; cursor:pointer;position: absolute;top:31%; left: 74%; width: 8%;margin: 0px;border:0px;
			-webkit-animation-name: empeque-lengu2;-webkit-animation-duration: 3s;animation-name: empeque-lengu2;animation-duration: 3s;}
			@-webkit-keyframes empeque-lengu2 {0%  (top: 34%;left: 47%;width:16%;) 100% {top:31%;left: 74%;width:8%;}}
			@keyframes empeque-lengu2 		{0%   {top: 34%;left: 47%;width:16%;}  100% {top:31%;left: 74%;width:8%;}}
		#lengu3{z-index: 20;display:none; cursor:pointer;position: absolute;top:27%; left: 10%; width: 32%;margin: 0px;border:0px;
			-webkit-animation-name: agranda-lengu2;-webkit-animation-duration: 3s;animation-name: agranda-lengu2;animation-duration: 3s;}
			@-webkit-keyframes agranda-lengu2 {0%  (top: 34%;left: 42%;width:16%;) 100% {top:27%; left: 10%; width: 32%;}}
			@keyframes agranda-lengu2 		{0%   {top: 34%;left: 42%;width:16%;}  100% {top:27%; left: 10%; width: 32%;}}
		#lengu10{z-index: 23;display:none; cursor:pointer;position: absolute;top:27%; left: 10%; width: 32%;margin: 0px;border:0px;		
			-webkit-animation-name: demenu-lengu;-webkit-animation-duration: 3s;animation-name: demenu-lengu;animation-duration: 3s;}
			@-webkit-keyframes demenu-lengu {
				0%  (top:32%; left: 74%; width: 10%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 
				100% {top:27%; left: 10%; width: 32%;}}
			@keyframes demenu-lengu 		{
				0%   {top:32%; left: 74%; width: 10%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  
				100% {top:27%; left: 10%; width: 32%;}}
		#lengu20{z-index: 30;display:none; cursor:pointer;position: absolute;top:31%; left: 74%; width: 8%;margin: 0px;border:0px;
		}
	/* -----------------caja lengua azul----------------*/			
		#cajalengu {display:block; z-index: 12; position: absolute;top: 58%;left: 45%; width:18%;
			transform : rotate(-15deg);-moz-transform : rotate(-15deg); -webkit-transform : rotate(-15deg);
			}
		#cajalengu:hover { z-index: 22;  width:20%;}	
		#cajalengumover {display:none;z-index:3;position: absolute;top: 25%;left: 46%;width:22%;
			-webkit-animation-name: movercaja3;-webkit-animation-duration: 4s;animation-name: movercaja3;animation-duration: 4s;}
			@-webkit-keyframes movercaja3 {0%  (top: 49%;left: 46%; width:18%;) 100% {top: 25%;left: 46%;width:22%;}}
			@keyframes movercaja3 {0%   {top: 49%;left: 46%; width:18%;}  100% {top: 25%;left:46%;width:22%;}}
		#textolengu {display:none;z-index:3;position: absolute;top: 36%;left: 50%;width:20%;
			-webkit-animation-name: aparece-texto3;-webkit-animation-duration: 5s;animation-name: aparece-texto3;animation-duration: 5s;}
			@-webkit-keyframes aparece-texto3 {0%  (width:0%;) 100% {width:20%;}}
			@keyframes aparece-texto3 		{0%   {width:0%;}  100% {width:20%;}}
	/* -----------------labios animacion----------------*/	
		#labiosup1{display:none; z-index: 22; position: absolute;top: 116px;left: 208px;width:400px; height:225px;
				-webkit-animation-name: labio1;-webkit-animation-duration: 3s; 
			animation-iteration-count: 20;animation-direction: alternate;	
			animation-name: labio1;animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes labio1 {0%  (top: 116px;left: 225px;width:380px; height:158px;) 100% {top: 166px;left: 220px;width:380px; height:98px;transform : rotate(-20deg);-moz-transform : rotate(-20deg); -webkit-transform : rotate(-20deg);}}
			@keyframes labio1 {0%   {top: 116px;left: 225px;width:380px; height:158px;}  100% {top: 166px;left: 220px;width:380px; height:98px;transform : rotate(-20deg);-moz-transform : rotate(-20deg); -webkit-transform : rotate(-20deg);}}
		#labiosup2{display:none; z-index: 22; position: absolute;top: 116px;left: 208px;width:400px; height:225px;
				-webkit-animation-name: labio2;-webkit-animation-duration: 3s; 
			animation-iteration-count: 20;animation-direction: alternate;	
			animation-name: labio2;animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes labio2 {0%  (top: 116px;left: 562px;width:380px; height:158px;) 100% {top: 166px;left: 560px;width:380px; height:98px;transform : rotate(20deg);-moz-transform : rotate(20deg); -webkit-transform : rotate(20deg);}}
			@keyframes labio2 {0%   {top: 116px;left: 562px;width:380px; height:158px;}  100% {top: 166px;left: 560px;width:380px; height:98px;transform : rotate(20deg);-moz-transform : rotate(20deg); -webkit-transform : rotate(20deg);}}
	
		#labioinf {display:none; z-index: 20; position: absolute;top: 124px;left: 280px;width:480px; 
				-webkit-animation-name: labioinf;-webkit-animation-duration: 3s; 
			animation-iteration-count: 20;animation-direction: alternate;	
			animation-name: labioinf;animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes labioinf {0%  (top: 124px;left: 280px;width:480px; height:358px;) 100% {top: 124px;left: 280px;width:480px;height:378px; }}
			@keyframes labioinf {0%   {top: 124px;left: 280px;width:480px; height:358px;}  100% {top: 124px;left: 280px;width:480px;height:378px; }}
	
		#letrasboca {display:none; z-index: 20; position: absolute;top: 200px;left: 480px;width:480px; }	
		

	/* ****************MICRO*************************************************/	
		#micro{z-index:4;display:block; position: absolute;top:55%;left: 62%;width:11%; cursor: pointer;
			-webkit-animation-name: entramicro;-webkit-animation-duration: 1.5s;
			animation-name: entramicro;animation-duration: 1.5s;}
			@-webkit-keyframes entramicro {0%  (width:0%;left: 62%;) 100% {width: 11%;left: 62%;}}
			@keyframes entramicro {0%   {width:0%;left: 62%;}  100% {width:11%;left: 62%;}}
		#micro:hover{width:13%;}

		#micro2{z-index: 16;display:none; cursor:pointer;position: absolute; left: 74%;top:44%; width: 9%;margin: 0px;border:0px;
			transform : rotate(30deg);-moz-transform : rotate(30deg);-webkit-transform : rotate(30deg);
			-webkit-animation-name: empeque-caja4;-webkit-animation-duration: 3s;animation-name: empeque-caja4;animation-duration: 3s;}
			@-webkit-keyframes empeque-caja4 {
				0%  (top:56%;left: 6%;width:11%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 
				100% {left: 74%;top:44%; width: 9%;rotate(30deg);-moz-transform : rotate(30deg); -webkit-transform : rotate(30deg);}}
			@keyframes empeque-caja4 		{
				0%   {top:56%;left: 56%;width:11%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  
				100% {left: 74%;top:44%; width: 9%;rotate(30deg);-moz-transform : rotate(30deg); -webkit-transform : rotate(30deg);}}
		#micro3{z-index: 19;display:none; cursor:pointer;position: absolute; left: 15%;top:11%; width: 28%;margin: 0px;border:0px;		
			-webkit-animation-name: agranda-micro;-webkit-animation-duration: 3s;animation-name: agranda-micro;animation-duration: 3s;}
			@-webkit-keyframes agranda-micro {
				0%  (top:56%;left: 56%;width:11%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 
				100% {left: 15%;top:11%; width: 28%}}
			@keyframes agranda-micro 		{
				0%   {top:56%;left: 56%;width:11%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  
				100% {left: 15%;top:11%; width: 28%;}}
		#micro10{z-index: 23;display:none; cursor:pointer;position: absolute; top:17%; left: 17%; width: 26%;margin: 0px;border:0px;		
			-webkit-animation-name: demenu-micro;-webkit-animation-duration: 3s;animation-name: demenu-micro;animation-duration: 3s;}
			@-webkit-keyframes demenu-micro {
				0%  (left: 74%;top:44%; width: 9%;transform : rotate(30deg);-moz-transform : rotate(30deg); -webkit-transform : rotate(30deg);) 
				100% {top:17%; left: 17%; width: 26%;}}
			@keyframes demenu-micro 		{
				0%   {left: 74%;top:44%; width: 9%;transform : rotate(30deg);-moz-transform : rotate(30deg); -webkit-transform : rotate(30deg);}  
				100% {top:17%; left: 17%; width: 26%;}}
		#micro20{z-index: 30;display:none; cursor:pointer;position: absolute;left: 74%;top:44%; width: 9%;margin: 0px;border:0px;
		transform : rotate(30deg);-moz-transform : rotate(30deg);-webkit-transform : rotate(30deg);
		}
		#cajamicro {z-index:3;display:block;position: absolute;top: 66%;left: 68%; width:20%;}
		#cajamicro:hover {z-index:13; width:22%;}			
		#cajamicromover {display:none;z-index:3;position: absolute;top: 20%;left: 50%; width:20%;
			-webkit-animation-name: movercaja4;-webkit-animation-duration: 4s;animation-name: movercaja4;animation-duration: 4s;}
			@-webkit-keyframes movercaja4 {0%  (width:20%; ) 100% {width:20%;}}
			@keyframes movercaja4 {0%   {width:20%;}  100% {width:20%;}}
		#textomicro {display:none;z-index:3;position: absolute;top: 31%;left: 50%;width:20%;
			-webkit-animation-name: aparece-texto4;-webkit-animation-duration: 5s;animation-name: aparece-texto4;animation-duration: 5s;}
			@-webkit-keyframes aparece-texto4 {0%  (width:0%;) 100% {width:20%;}}
			@keyframes aparece-texto4 		{0%   {width:0%;}  100% {width:20%;}}
/* ****************TECLADO*************************************************/		
		#teclado{z-index:301;display:block; position: absolute;top:19%;left: 62%;width:19%; cursor: pointer;
		transform : rotate(-15deg);-moz-transform : rotate(-15deg); -webkit-transform : rotate(-15deg);
			-webkit-animation-name: entratecla;-webkit-animation-duration: 1.5s;
			animation-name: entratecla;animation-duration: 1.5s;}
			@-webkit-keyframes entratecla {0%  (width:0%;left: 62%;) 100% {width: 19%;left: 62%;}}
			@keyframes entratecla {0%   {width:0%;left:62%;}  100% {width:19%;left: 62%;}}
		#teclado:hover{width:20%;}

		#tecla2{z-index: 18;display:none; cursor:pointer;position: absolute; top:12%;left: 74%; width: 10.5%;margin: 0px;border:0px;
			transform : rotate(-30deg);
				-moz-transform : rotate(-30deg); /* Firefox */
				-webkit-transform : rotate(-30deg); /* Chrome - Safari */
			-webkit-animation-name: empeque-caja5;-webkit-animation-duration: 3s;animation-name: empeque-caja5;animation-duration: 3s;}
			@-webkit-keyframes empeque-caja5 {
				0%  (top:22%;left: 58%;width:20%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);)  
				100% {top:12%;left: 74%; width: 10.5%;transform : rotate(-30deg);-moz-transform : rotate(-30deg); -webkit-transform : rotate(-30deg);}}
			@keyframes empeque-caja5 		{
				0%   {top:22%;left: 58%;width:20%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  
				100% {top:12%;left: 74%; width: 10.5%;transform : rotate(-30deg);-moz-transform : rotate(-30deg);-webkit-transform : rotate(-30deg);}}
		#tecla3{z-index: 19;display:none; cursor:pointer;position: absolute; left: 8%;top:26%; width: 31%;margin: 0px;border:0px;	
			transform : rotate(290deg);-moz-transform : rotate(290deg); -webkit-transform : rotate(290deg);		
			-webkit-animation-name: agranda-tecla;-webkit-animation-duration: 3s;animation-name: agranda-tecla;animation-duration: 3s;
			}
			@-webkit-keyframes agranda-tecla {
				0%  (top:22%;left: 58%;width:20%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 
				100% {left: 8%;top:26%; width: 31%;transform : rotate(290deg);-moz-transform : rotate(290deg); -webkit-transform : rotate(290deg);}}
			@keyframes agranda-tecla 		{
				0%   {top:22%;left: 58%;width:20%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  
				100% {left: 8%;top:26%; width: 31%;transform : rotate(290deg);-moz-transform : rotate(290deg); -webkit-transform : rotate(290deg);}}
		#tecla10{z-index: 23;display:none; cursor:pointer;position: absolute; left: 10%;top:26%; width: 32%;margin: 0px;border:0px;
			transform : rotate(290deg);-moz-transform : rotate(290deg); -webkit-transform : rotate(290deg);
			-webkit-animation-name: demenu-tecla;-webkit-animation-duration: 3s;animation-name: demenu-tecla;animation-duration: 3s;}
			@-webkit-keyframes demenu-tecla {
				0%  (top:12%;left: 74%; width: 10.5%;transform : rotate(290deg);-moz-transform : rotate(290deg); -webkit-transform : rotate(290deg);) 
				100% {left: 10%;top:26%; width: 32%;}}
			@keyframes demenu-tecla 		{
				0%   {top:12%;left: 74%; width: 10.5%;transform : rotate(290deg);-moz-transform : rotate(290deg); -webkit-transform : rotate(290deg);}  
				100% {left: 10%;top:26%; width: 32%;}}
		#tecla20{z-index: 28;display:none; cursor:pointer;position: absolute; top:12%;left: 74%; width: 10.5%;margin: 0px;border:0px;
				transform : rotate(-30deg);
				-moz-transform : rotate(-30deg); /* Firefox */
				-webkit-transform : rotate(-30deg);}		
				

		#cajatecla {z-index:300;display:block;position: absolute;top: 14%;left: 68%; width:24%;cursor:pointer;}	
		#cajatecla:hover { width:26%;z-index:302;}	
		#cajateclamover {display:none;z-index:3;position: absolute;top: 19%;left: 48%;width:22%;transform : rotate(2deg);-moz-transform : rotate(2deg); -webkit-transform : rotate(2deg);
			-webkit-animation-name: movercaja5;-webkit-animation-duration: 4s;animation-name: movercaja5;animation-duration: 4s;}
			@-webkit-keyframes movercaja5 {0%  (top: 13%;left: 64%; width:24%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 100% {top: 19%;left: 48%;width:22%;transform : rotate(2deg);-moz-transform : rotate(2deg); -webkit-transform : rotate(2deg);}}
			@keyframes movercaja5 {0%   {top: 13%;left: 64%; width:24%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  100% {top: 19%;left: 48%;width:22%;transform : rotate(2deg);-moz-transform : rotate(2deg); -webkit-transform : rotate(2deg);}}
		#textotecla {display:none;z-index:3;position: absolute;top: 61%;left: 30%;width:16.6%;
			-webkit-animation-name: aparece-texto5;-webkit-animation-duration: 5s;animation-name: aparece-texto5;animation-duration: 5s;}
			@-webkit-keyframes aparece-texto5 {0%  (width:0%;) 100% {width:16.6%;}}
			@keyframes aparece-texto5 		{0%   {width:0%;}  100% {width:16.6%;}}
		#cajateclamover2 {display:none;z-index:3;position: absolute;top: 50%;left: 48%;width:22%;transform : rotate(2deg);-moz-transform : rotate(2deg); -webkit-transform : rotate(2deg);
			-webkit-animation-name: movercaja52;-webkit-animation-duration: 4s;animation-name: movercaja52;animation-duration: 4s;}
			@-webkit-keyframes movercaja52 {0%  (top: 13%;left: 64%; width:24%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);) 100% {top: 50%;left: 48%;width:22%;transform : rotate(2deg);-moz-transform : rotate(2deg); -webkit-transform : rotate(2deg);}}
			@keyframes movercaja52 {0%   {top: 13%;left: 64%; width:25%;transform : rotate(0deg);-moz-transform : rotate(0deg); -webkit-transform : rotate(0deg);}  100% {top: 50%;left: 48%;width:22%;transform : rotate(2deg);-moz-transform : rotate(2deg); -webkit-transform : rotate(2deg);}}
	
/* ****************FLORES*************************************************/		

	/* ****************Flor 1 grande*************************************************/
		#flor1grande{z-index:2;display:block; position: absolute;top:324px;left: -298px;
			-webkit-animation-name: deriva1grande;-webkit-animation-duration: 10s; -webkit-animation-timing-function: linear;
			animation-name: deriva1grande;animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva1grande {0%  (top: -50px;left: 1680px;) 100% {top: 324px;left: -298px;}}
			@keyframes deriva1grande {0%   {top: -50px;left: 1680px;}  100% {top: 324px;left: -298px;;}}
		#flor1{z-index:1;display:block; position: absolute;top:324px;left: -128px;
			-webkit-animation-name: deriva1;-webkit-animation-duration: 12s; -webkit-animation-timing-function: linear;
			animation-name: deriva1;animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva1 {0%  (top: 460px;left: 1680px;) 100% {top: 324px;left: -128px;}}
			@keyframes deriva1 {0%   {top: 460px;left: 1680px;}  100% {top: 324px;left: -128px;;}}
		#flor1abajo{z-index:1;display:block; position: absolute;top:580px;left: -200px;
			-webkit-animation-name: deriva1abajo;-webkit-animation-duration: 12s; -webkit-animation-timing-function: linear;
			animation-name: deriva1abajo;animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva1abajo {0%  (top: 20px;left: 1600px;) 100% {top: 580px;left: -200px;}}
			@keyframes deriva1abajo {0%   {top: 20px;left: 1600px;}  100% {top: 580px;left: -200px;;}}
		#flor1peque{z-index:1;display:block; position: absolute;top:324px;left: -98px; width:100px;
			-webkit-animation-name: deriva1peque;-webkit-animation-duration: 13s; -webkit-animation-timing-function: linear;
			animation-name: deriva1peque;animation-duration: 13s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva1peque {0%  (top: -50px;left: 1380px; width:100px;) 100% {top: 324px;left: -98px; width: 100px;}}
			@keyframes deriva1peque {0%   {top: -50px;left: 1380px; width:100px;}  100% {top: 324px;left: -; width: 100px;}}
		#flor2grande{z-index:2;display:block; position: absolute;top:450px;left: -258px;
			-webkit-animation-name: deriva2grande;-webkit-animation-duration: 11s; -webkit-animation-timing-function: linear;
			animation-name: deriva2grande;animation-duration: 11s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva2grande {0%  (top: 10px;left: 2280px;) 100% {top: 450px;left: -258px;}}
			@keyframes deriva2grande {0%   {top: 10px;left: 2280px;}  100% {top: 450px;left: -258px;;}}
		#flor2{z-index:1;display:block; position: absolute;top:494px;left: -128px;
			-webkit-animation-name: deriva22;-webkit-animation-duration: 10s; 
			animation-name: deriva22;animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva22 {0%  (top: 460px;left: 1780px;) 100% {top: 494px;left: -128px;}}
			@keyframes deriva22 {0%   {top: 460px;left: 1780px;}  100% {top: 494px;left: -128px;;}}
		#flor2abajo{z-index:2;display:block; position: absolute;top:94px;left: -128px;
			-webkit-animation-name: deriva2abajo;-webkit-animation-duration: 12s; -webkit-animation-timing-function: linear;
			animation-name: deriva2abajo;animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva2abajo {0%  (top: 40px;left: 1780px;) 100% {top: 94px;left: -128px;}}
			@keyframes deriva2abajo {0%   {top: 40px;left: 1780px;}  100% {top: 94px;left: -128px;;}}
		#flor2peque{z-index:1;display:block; position: absolute;top:210px;left: -90px;width:100px;
					-webkit-animation-name: deriva2peque;-webkit-animation-duration: 14s; -webkit-animation-timing-function: linear;
			animation-name: deriva2peque;animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva2peque {0%  (top: 120px;left: 1980px; width:100px;) 100% {top: 210px;left: -90px; width: 100px;}}
			@keyframes deriva2peque {0%   {top: 120px;left: 1980px; width:100px;}  100% {top: 210px;left: -90px; width: 100px;}}
		#flor2pequeabajo{z-index:1;display:block; position: absolute;top:320px;left: -60px;width:100px;
			-webkit-animation-name: deriva;-webkit-animation-duration: 12s; -webkit-animation-timing-function: linear;
			animation-name: deriva;animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite;
			}
			@-webkit-keyframes deriva {0%  (top: 80px;left: 1380px; width:100px;) 100% {top: 320px;left: -60px; width: 100px;}}
			@keyframes deriva {0%   {top: 80px;left: 1380px; width:100px;}  100% {top: 320px;left: -60px; width: 100px;}}
			
		#flechamagne {display:none;z-index:3;position: absolute;top: 70%;left: 56%;width:6%;
			-webkit-animation-name: aparece-flecha;-webkit-animation-duration: 5s;animation-name: aparece-flecha;animation-duration: 5s;}
			@-webkit-keyframes aparece-flecha {0%  (width:0%;) 100% {width:6%;}}
			@keyframes aparece-flecha 		{0%   {width:0%;}  100% {width:6%;}}
		#flechaguita {display:none;z-index:3;position: absolute;top: 66%;left: 56%;width:6%;
			-webkit-animation-name: aparece-flecha;-webkit-animation-duration: 5s;animation-name: aparece-flecha;animation-duration: 5s;}
			@-webkit-keyframes aparece-flecha {0%  (width:0%;) 100% {width:6%;}}
			@keyframes aparece-flecha 		{0%   {width:0%;}  100% {width:6%;}}
		#flechalengua {display:none;z-index:3;position: absolute;top: 70%;left: 56%;width:6%;
			-webkit-animation-name: aparece-flecha;-webkit-animation-duration: 5s;animation-name: aparece-flecha;animation-duration: 5s;}
			@-webkit-keyframes aparece-flecha {0%  (width:0%;) 100% {width:6%;}}
			@keyframes aparece-flecha 		{0%   {width:0%;}  100% {width:6%;}}
		#flechalengua:hover {width:8%;}
		#flechatecla {display:none;z-index:3;position: absolute;top: 36%;left: 56%;width:6%;
			-webkit-animation-name: aparece-flecha;-webkit-animation-duration: 5s;animation-name: aparece-flecha;animation-duration: 5s;}
			@-webkit-keyframes aparece-flecha {0%  (width:0%;) 100% {width:6%;}}
			@keyframes aparece-flecha 		{0%   {width:0%;}  100% {width:6%;}}
		#flechamicro {display:none;z-index:3;position: absolute;top: 66%;left: 56%;width:6%;
			-webkit-animation-name: aparece-flecha;-webkit-animation-duration: 5s;animation-name: aparece-flecha;animation-duration: 5s;}
			@-webkit-keyframes aparece-flecha {0%  (width:0%;) 100% {width:6%;}}
			@keyframes aparece-flecha 		{0%   {width:0%;}  100% {width:6%;}}
		#flechatecla2 {display:none;z-index:3;position: absolute;top: 66%;left: 56%;width:6%;
			-webkit-animation-name: aparece-flecha;-webkit-animation-duration: 5s;animation-name: aparece-flecha;animation-duration: 5s;}
			@-webkit-keyframes aparece-flecha {0%  (width:0%;) 100% {width:6%;}}
			@keyframes aparece-flecha 		{0%   {width:0%;}  100% {width:6%;}}
			
		#pieza {display:block;z-index:1000;position: fixed;top: 96%;left: 10%;width:80%;text-align:center;height:4%;cursor:pointer;
				background-color:#03B3C0}
		.pieza {display:none;z-index:1000;position: fixed;top: 90%;left: 10%;height:10%;text-align:center;}
		#pieza a {color:white; font-size:12px;}
		#pieza:hover {top: 86%;}
		#pieza:hover .pieza {display:block;}