#wrapper { background-color:#404449; color:#fff; overflow:auto;}
#scroller {background-color:#404449;}
#lienzo{padding: 20px;}

/* sound player */

.soundPlayer { z-index:999; }
.iPlayerReducido { display:block; width:15px; height:18px; background-image:url(../img/iPlayerReducido.png); background-repeat:no-repeat;}
.iPlay { background-position: center -34px;}
.iPause { background-position: center -7px;}

.errorSound { width:45px; height:28px; background: url(../img/errorSoundBlack.png) no-repeat center center; cursor:help;}
.errorSound { background: url(../img/errorSoundWhite.png) no-repeat center center;}

.errorSound{display:none;}

/* css letras */

body { font-family:"Segoe UI", Segoe, Optima, Candara, "DejaVu Sans", Calibri, Arial, sans-serif; }
.txtExplicacion {
	font-size: 15px;
	font-weight: bold;
	color: #FFF;
	line-height: 18px;
	text-align: center;
	padding:19px 0;
}
#letrasDisponibles, #letrasOrdenar { text-align:center; font-size:0; padding-bottom:5px;}
.cuadroLetras {  display:inline-block; width:26px; height:26px; margin:0 2px -5px;  background-color:#35383c; border-radius:2px; position:relative; }
.huecoLetras {  background-color:#34373b; margin:0 1px -5px; border:1px dashed #838589;
	-o-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
.huecoLetras .cajaLetras  { color:#fff;}
.completo { border:1px solid #404449;}
.cajaLetras { cursor:text;}
.huecoLetras .cajaLetras { background:none; box-shadow:none;}
.cajaLetras, .completo .cajaLetras { 

 font-size:16px;
 width:26px; line-height:26px; height:26px; text-transform:uppercase;
	-o-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
 position:absolute;  background-color:#fff; color:#333; text-align:center;  border-radius:2px; font-weight:bold;
 box-shadow:inset rgba(255,255,255,.8) 0 -1px, rgba(0,0,0,.35)0 1px 1px;
 
 background: rgb(255,255,255); 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(232,232,232,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(232,232,232,1))); 
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(232,232,232,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(232,232,232,1) 100%); 
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(232,232,232,1) 100%); 
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(232,232,232,1) 100%); 

}

.dragLetras .cajaLetras {cursor:move;
 	-o-transition: all 0s;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s;
}
.dragLetras .cajaLetras:hover {z-index:9; box-shadow:inset rgba(255,255,255,.4) 0 -1px, rgba(0,0,0,.6)0 5px 12px;	}

.contentPista { border-bottom:1px solid rgba(255,255,255,.17); padding:2px 6% 14px; margin-bottom:2px; font-size:20px; line-height:24px; text-align:center;}

@keyframes errorcajaLetras
{
	from {
			-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
	20% {	-webkit-transform:rotate(5deg);
			-moz-transform:rotate(5deg);
			-o-transform:rotate(5deg);
			-ms-transform:rotate(5deg);
		}
	40% {	-webkit-transform:rotate(-5deg);
			-moz-transform:rotate(-5deg);
			-o-transform:rotate(-5deg);
			-ms-transform:rotate(-5deg);}
	60% {	-webkit-transform:rotate(3deg);
			-moz-transform:rotate(3deg);
			-o-transform:rotate(3deg);
			-ms-transform:rotate(3deg);}
	80% {	-webkit-transform:rotate(-3deg);
			-moz-transform:rotate(-3deg);
			-o-transform:rotate(-3deg);
			-ms-transform:rotate(-3deg);
		}
	to {
		-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
}

@-moz-keyframes errorcajaLetras
{
	from {
			-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
	20% {	-webkit-transform:rotate(5deg);
			-moz-transform:rotate(5deg);
			-o-transform:rotate(5deg);
			-ms-transform:rotate(5deg);
		}
	40% {	-webkit-transform:rotate(-5deg);
			-moz-transform:rotate(-5deg);
			-o-transform:rotate(-5deg);
			-ms-transform:rotate(-5deg);}
	60% {	-webkit-transform:rotate(3deg);
			-moz-transform:rotate(3deg);
			-o-transform:rotate(3deg);
			-ms-transform:rotate(3deg);}
	80% {	-webkit-transform:rotate(-3deg);
			-moz-transform:rotate(-3deg);
			-o-transform:rotate(-3deg);
			-ms-transform:rotate(-3deg);
		}
	to {
		-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
}

@-webkit-keyframes errorcajaLetras 
{
	from {
			-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
	20% {	-webkit-transform:rotate(5deg);
			-moz-transform:rotate(5deg);
			-o-transform:rotate(5deg);
			-ms-transform:rotate(5deg);
		}
	40% {	-webkit-transform:rotate(-5deg);
			-moz-transform:rotate(-5deg);
			-o-transform:rotate(-5deg);
			-ms-transform:rotate(-5deg);}
	60% {	-webkit-transform:rotate(3deg);
			-moz-transform:rotate(3deg);
			-o-transform:rotate(3deg);
			-ms-transform:rotate(3deg);}
	80% {	-webkit-transform:rotate(-3deg);
			-moz-transform:rotate(-3deg);
			-o-transform:rotate(-3deg);
			-ms-transform:rotate(-3deg);
		}
	to {
		-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
}

@-o-keyframes errorcajaLetras 
{
	from {
			-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
	20% {	-webkit-transform:rotate(5deg);
			-moz-transform:rotate(5deg);
			-o-transform:rotate(5deg);
			-ms-transform:rotate(5deg);
		}
	40% {	-webkit-transform:rotate(-5deg);
			-moz-transform:rotate(-5deg);
			-o-transform:rotate(-5deg);
			-ms-transform:rotate(-5deg);}
	60% {	-webkit-transform:rotate(3deg);
			-moz-transform:rotate(3deg);
			-o-transform:rotate(3deg);
			-ms-transform:rotate(3deg);}
	80% {	-webkit-transform:rotate(-3deg);
			-moz-transform:rotate(-3deg);
			-o-transform:rotate(-3deg);
			-ms-transform:rotate(-3deg);
		}
	to {
		-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-o-transform:rotate(0);
			-ms-transform:rotate(0);
		}
}

.mal .cajaLetras { box-shadow:none;

background: rgb(226,75,23);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyNGIxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzM1MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(226,75,23,1) 0%, rgba(204,53,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,75,23,1)), color-stop(100%,rgba(204,53,0,1)));
background: -webkit-linear-gradient(top,  rgba(226,75,23,1) 0%,rgba(204,53,0,1) 100%);
background: -o-linear-gradient(top,  rgba(226,75,23,1) 0%,rgba(204,53,0,1) 100%);
background: -ms-linear-gradient(top,  rgba(226,75,23,1) 0%,rgba(204,53,0,1) 100%);
background: linear-gradient(to bottom,  rgba(226,75,23,1) 0%,rgba(204,53,0,1) 100%);

	animation: errorcajaLetras .6s;
	-moz-animation: errorcajaLetras .6s;
	-webkit-animation: errorcajaLetras .6s; 
	-o-animation: errorcajaLetras .6s; 
	
	color:#333;

}
.mal { 	border:1px solid #34373B;}

.used {
	background: #66696d;
	box-shadow:inset #36383a 0 1px;
}


@media all and (min-width:460px) {
	.contentPista { margin:0 0 2px; font-size:22px; line-height:26px;}
	.boxPTexto, .boxPAudio { padding:0 30px 20px;}
}
@media all and (min-width:600px) {
		.contentPista { font-size:26px; line-height:30px;}
		.boxPTexto, .boxPAudio { padding:0 50px 24px;}
}
#footAct .btn-primary  { margin-left:0;}
.pistaAudio { text-align:center; padding-top:8px;}
.errorSound { margin:0 auto;}

/* conImagen */
.pistaImagen img { width:56%; height:auto; }
.pistaImagen { max-height:182px; overflow:hidden;}
.conImagen .pistaTexto, .conImagen .pistaAudio { padding-top:10px;}

@media all and (min-width:460px) {
.conImagen { overflow:hidden;}

.conImagen .errorSound { margin:0;}
.pistaImagen { float:left; width:27%;}
.pistaImagen img { width:100%; height:auto;}

.conImagen .pistaTexto, .conImagen .pistaAudio {text-align:left; margin-left:32%; }
.conImagen .pistaTexto  { padding-top:16px;}

.cajaLetras, .completo .cajaLetras {  font-size:21px; width:36px; line-height:36px; height:36px; }
.cuadroLetras {  width:36px; height:36px;}
}

.click .cajaLetras { cursor:pointer;}

.click .cajaLetras:hover {
	z-index:9;
 box-shadow:inset rgba(255,255,255,.4) 0 -1px, rgba(0,0,0,.6)0 5px 12px;
}

/* foco */

.foco { border:1px solid #f3de69; box-shadow:rgba(255,231,100,.6) 0 0 3px; border-radius:4px;}
.mal.foco { border:1px solid #f25a26;}
.completo.foco { border-color:#ffc126;}

/* input mobile */
#ctrlInput { font-size:1px; height:1px; position:absolute;}

/* corrección */


#correccion { text-align:center; padding:30px 0;}
#correccion .cajaLetras { background:none; background-color:transparent; border-radius:0; border-bottom:1px solid #fff; color:#fff; box-shadow:none;}
.letraCorreccion { position:absolute; width:26px; line-height:20px; color:#D53838; font-size:16px; text-align:center; font-weight:bold; line-height:20px; margin-top:-20px; text-transform:uppercase;}
.letraCorreccion:after { display:block; content:" "; position:absolute; top:50%; width:100%; left:0; border-bottom:1px solid #D53838;

			-webkit-transform:rotate(120deg);
			-moz-transform:rotate(120deg);
			-o-transform:rotate(120deg);
			-ms-transform:rotate(120deg);
}
#correccion .cuadroLetras { background-color:transparent; padding-top:27px;}
#correccion .mal { border:none;}
#correccion .mal .cajaLetras { color:#575a5f;}



@media all and (min-width:460px) {
	.letraCorreccion {width:36px; font-size:22px; line-height:24px; margin-top:-26px; height:24px;}
	#correccion .cuadroLetras { padding-top:32px;}
}

#pistaResultado { padding-left:8%;}
#pistaResultado .contentPista { text-align:left;}
#pistaResultado { border-top:1px solid rgba(255, 255, 255, 0.17); padding:21px 0 8px;}
#pistaResultado .pistaImagen { float:none;}
#pistaResultado .conImagen .pistaTexto, #pistaResultado .conImagen .pistaAudio { margin-left:0;}

#pistaResultado .contentPista { font-size:19px; line-height:23px; padding:0 8% 20px;}
#pistaResultado .infoAdicional { padding:14px 0 0; font-size:14px; line-height:19px; color:#c9cacc;}

#pistaResultado .pistaImagen img { width:48%; height:auto;}
#pistaResultado .pistaImagen { width:100%; margin-bottom:10px;}

.escribir .cajaLetras, .escribir .completo .cajaLetras, .escribir .letraCorreccion {text-transform:none;} 
/* android 2.0*/
.android #wrapper {overflow:inherit; position:relative; bottom:0; top:0; padding-bottom:45px;}
.android #footAct { position:relative; position:fixed; bottom:0; z-index:9999;}
.android #contentPreActividad, .android #preLoad { z-index:99999; position:relative;}
/* marca de agua */
.mEduca { 
	height:30px; width:113px;
	bottom:8px; right:0px;
	z-index:9999;
	opacity:0;
	transition:all .6s;
	pointer-events: none;
    background-image:url(../img/mEducaWhite.png); background-repeat:no-repeat; position:absolute;
}
#bodyAct:hover .mEduca { opacity:1;}
@media all and (min-width:600px) {
	.mEduca {  	bottom:14px;}
}