/* CSS Document */
/*-------------------------------------------*/

.sector
{
	background-color: #eceff1;
    border-radius: 12px;
    height: 136px;
    width: 101%;
    position: absolute;
    bottom: -3px;
    left: 9px;
}
.verificar
{
	position: relative;
    bottom: 189px;
    width: 25%;
    margin: 0px auto;
    background-color: rgba(255, 255, 255, 0.66);
    padding: 2px;
    padding-bottom: 12px;
    border-radius: 12px;
	display:none;
}
.icono-sonido
{
	width: 30px;
    position: absolute;
    left: 297px;
    top: 18px;
    z-index: 2;
}

.definir
{
	background-color: rgba(255, 255, 255, 0.79);
    border-radius: 28px;
    font-family: roboto;
    font-size: 16px;
    text-align: left;
    padding: 12px;
}

.nubep
{
	position: fixed;
    left: 362px;
    top: 135px;
    width: 35px;
    z-index: -1;
}

.letras
{
	width: 38px;
    height: 38px;
    float: left;
    border-radius: 50%;
    background-color: rgb(25, 118, 210);
    text-align: center;
    font-size: 28px;
    margin: 5px;
    color: white;
    font-family: chewy;
    cursor: url(../images/cursor/hand.cur) , auto!important;
}

.cajastexto .letras
{
 margin: -1px;
}

.resp
	{
		background-color: white;
		border-radius: 50%;
		text-align: center;
		color: #DD2C00;
		font-family: Roboto;
		font-weight: bold;
		width: 25px;
		height: 25px;
		float: left;
		font-size: 16px;
		padding: 1px;
		margin: 2px;
	}	  
	
	.grises{
filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.grises:hover { 
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}  
.caja {
    width: 45px;
    height: 36px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid rgb(186, 186, 186);
    font-family: Chewy !important;
    font-size: 23px;
    padding: 2px;
    margin-top: 11px;
}
.personajenube2
{
	    position: absolute;
    right: -18px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.selector{
		position: relative;
    top: -88px;
    left: 45%;
	}
	.selector2{
		position: relative;
    top: -101px;
    left: 32%;
	}
	.selector3{
	    position: relative;
    top: -50px;
    left: -27px;
    width: 35px;
	}
.siguiente
	{
		
	  text-align: center;
	  width: 125px;
   	  height: 66px;
	  background-image: url(../images/iconos/boton_siguiente.png);
	  background-size: 100% 100%;
	  padding: 12px;
	  font-family: Chewy;
	  color: white;
	  cursor: url(../images/cursor/hand.cur) , auto!important;
	 
	}
.atras
	{
		
	  text-align: center;
	  width: 125px;
   	  height: 66px;
	  background-image: url(../images/iconos/boton_atras.png);
	  background-size: 100% 100%;
	  padding: 12px;
	  font-family: Chewy;
	  color: white;
	  cursor: url(../images/cursor/hand.cur) , auto!important;
	 
	}


/*Pantalla 2*/	
.recuadro
{
	    width: 100%;
    display: table;
    margin-left: 15px;
    background-color: #DD2C00!important;
    border-radius: 20px;
    margin: 10px;
    padding-left: 7px;
    padding-bottom: 10px;
}
.recuadro_interno
{
	background-color: #FF9800;
    margin: 2px;
    width: 32%;
    float: left;
    border-radius: 20px;
}
	
	
.boton{
        color: white;
		    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
    width: 100px;
    height: 50px;
    text-align: center;
    font-family: Chewy;
    font-size: 19px;
	background-color: #FFC107;
    border-radius: 20px 7px 20px 7px;
    padding: 12px;
    cursor: url(../images/cursor/hand.cur) , auto!important;
}

.boton:hover{
        color: white;
}

.intros div
{
	cursor: inherit!important;
	margin: 2px!important;
}

.nivel{dispaly:none!important;}

/* Puzzle */




#puzzle {
    margin: -20px 0px 4px 0px;
}

#puzzle img {
	
	animation: initial;
}

.contenedorPieza {
	border: 3px dashed #FF9100;
    width: 98%;
    height: 56px;
    margin: 0px auto;
    margin-top: -1px;
    border-radius: 12px;
    background-color: rgb(220, 217, 217);
    background-size: 100% 100%;
}

.cajastexto
{
	width: 38px;
    height: 38px;
	border-radius:50%;
    float: left;
    text-align: center;
    margin-right: 5px;
    background-color: rgba(175, 175, 175, 0.68);
    border: 1px dashed white;
}


.contenedorPieza img {
	margin:0px!important;
	padding:0px!important;
}

#puzzle #uno { position: absolute;  left: 37px; top: 39px; background-image: url(../images/tema/arrastraaqui1.png);}
#puzzle #dos { position: absolute;   left: 104px;  top: 14px; background-image: url(../images/tema/arrastraaqui2.png);}
#puzzle #tres { position: absolute;  left: 197px;  top: 16px; background-image: url(../images/tema/arrastraaqui3.png);}
#puzzle #cuatro { position: absolute;  left: 269px; top: 36px; background-image: url(../images/tema/arrastraaqui4.png);}
#puzzle #cinco { position: absolute;   left: 122px;   top: 100px; background-image: url(../images/tema/arrastraaqui5.png);}
#puzzle #seis { position: absolute;   left: 193px;   top: 101px; background-image: url(../images/tema/arrastraaqui6.png);}
#puzzle #siete {  position: absolute;   left: 142px;    top: 198px; background-image: url(../images/tema/arrastraaqui7.png); }
#puzzle #ocho {   position: absolute;   left: 51px;    top: 187px; background-image: url(../images/tema/arrastraaqui8.png);}
#puzzle #nueve {  position: absolute;   left: 235px;   top: 186px; background-image: url(../images/tema/arrastraaqui9.png);}

#contenedorPuzzle img {
    margin: 2px;
    width: 78px;
  /*  float: left;*/
}

#manito{
	color: #ffc107;
    font-size: 37px;
    padding: 12px 5px 12px 12px;
    animation: 3s aum infinite;
    z-index: 2;	
}

#contenedorPuzzle img
	{
	   	width: 100%;
     	height: 100%;
	}
	

.contenedorPieza img
{
	background-color:white;
}
#contenedorPiezas img
{
	background-color:initial!important;
	    width: 100px;
    height: 120px;
}

@keyframes aum {
   
   50% { opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */}
}
@keyframes latido{
       from { right: 90px;}
    50% { right: 100px;}
    to {right: 90px; }
}