@charset "utf-8";
/* CSS Document */
/* ---------------------------------------------------------------- HTML -- */
* {
	margin:0;
	padding:0;
	}
body {
	background:url(../../images/fondo-9.png);
    font-family: 'minyaRegular' !important;
	color:#F93;
	}
a {
	cursor:pointer;
	text-decoration:none;
	}
section {
	text-align:center;
	width:99.5%;
	height:400px;
	}
/* -------------------------------------------------------  */
#sel-cara nav {
	margin-top:5%;
	}
#sel-cara img {
	width:10%;
	}
#sel-partes {
	display:none;
	}
/* -------------------------------------------------------  */
#btn-cara-1 {
	background:url(../caras/btn-cara-1.png);
	}
#btn-cara-2 {
	background:url(../caras/btn-cara-2.png);
	}
#btn-cara-3 {
	background:url(../caras/btn-cara-3.png);
	}
.cara {
	position:absolute;
	background-size:100% 100% !important;
	background-repeat:no-repeat !important;
	background-position:center !important;
	width:40%;
	height:60%;
	top:190px;
	left:5%;
	display:none;
	}
.home {
	position:fixed;
	left:0;
	top:1%;
	}
#jugar {
	cursor:pointer;
	}
#borrar {
	cursor:pointer;
	}
/* ----------------------------------------------------------------------------- */
nav {
	border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	-o-border-radius:20px;
	-webkit-border-radius:20px;
	background:#FFF;
	padding:0.5%;
	height:350px !important;
	}
/* ----------------------------------------------------------------------------- */
.pelo, .ojo, .nariz, .boca { 
	position:absolute;
	top:250px !important;
	height:auto !important;
	z-index:999999999999999999999;
	}
#pelo, #ojo, #nariz, #boca {
	position:absolute;
	width:100%;
	text-align:center;
	}
/* ----------------------------------------------------------------------------- PELO */
.pelo {
	width:5%;
	left:90%;
	}
.pelo a {
	height:auto;
	float:left;
	}
.pelo img {
	width:100%;
	}
#pelo {
	top:-20%;
	left:-5%;
	z-index:99999 !important;
	}
#pelo img {
	width:112%;
	height:50%;
	}
/* ----------------------------------------------------------------------------- OJO */
.ojo {
	width:5%;
	left:80%;
	}
.ojo a {
	height:auto;
	float:left;
	}
.ojo img {
	width:100%;
	}
#ojo {
	top:10%;
	}
#ojo img {
	width:60%;
	height:auto;
	}
/* ----------------------------------------------------------------------------- BOCA */
.boca {
	width:5%;
	left:70%;
	}
.boca a {
	height:auto;
	float:left;
	}
.boca img {
	width:100%;
	}
#boca {
	bottom:5%;
	}
#boca img {
	width:30%;
	height:auto;
	}
/* ------------------------------------------------------------ CARGADOR-- */
#cargando {
    position:fixed;
    left:0;
	right:0;
	top:0;
	bottom:0;
    background:#FFF url(../../images/fondo.jpg);
	z-index:99999999999999999999999999999999999999999999999 !important;
	text-align:center;
	font-size:1em;
	color:#FFF;
	padding-top:10%;
	overflow:hidden;
	}
/* -------------------------------------------------------  */
@font-face {
    font-family: 'minyaRegular';
    src: url(../../fonts/Minya-Regular.eot);
    src: url(../../fonts/Minya-Regular.eot?#iefix) format('embedded-opentype'),
         url(../../fonts/Minya-Regular.woff2) format('woff2'),
         url(../../fonts/Minya-Regular.woff) format('woff'),
         url(../../fonts/Minya-Regular.ttf) format('truetype'),
         url(../../fonts/Minya-Regular.svg#minyaRegular) format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (min-width: 599px) and (max-width: 1024px) { 
	header {height:100px;background-size:100% 100%;	}
	header a, header div {float:left;text-align:center;	margin-left:2%;	}
	header a {padding:0.5%;	margin-top:1%;font-size:1em !important;	}
	header div {padding-top:50px;width:100px;height:80px;font-size:1.2em;background-size:100% 100%;	}
	footer {padding:5px;}
	footer a {font-size:0.7em;}
}
@media screen and (min-width: 300px) and (max-width: 598px) { 
	header {height:70px;background-size:100% 100%;	}
	header a, header div {float:left;text-align:center;	margin-left:2%;	}
	header a {padding:0.5%;	margin-top:1%;font-size:0.8em !important;	}
	header div {display:none;}
	/* ------------------------------------------------------------------------------------ NAV */
	#nav {top:50px;width:80px;}
	#nav a {padding:5%;left:-15px; font-size:1em;}
	#nav .material-docente {top:40px;}
	#nav .contacto {top:90px;}
	/* ------------------------------------------------------------------------------------ FOOTER */
	footer {padding:5px; text-align:center;}
	.img-logo {display:none;}
	footer a {font-size:0.7em;}
}