/*cuando reproduce el audio no muestra el iframe, para no llenar la pantalla de iframe*/
iframe
{
	display:none;
}

body{
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*área de juego*/
.contenido
{
    padding: 0px;
    margin: auto;
    width: 70%;
    height: 100%;
    background-image: url("../img/diccionario-28.png");
    background-size: 100% 100%;
    display: flex;
    position: absolute;
    left: 18%;
    
}
/*Para que el fondo se vea borroso*/
#cajaTrasparente{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.9;
    filter: alpha(opacity=60);
}

/*Parte izquierda del contenedor*/
.parteIzquierda{
  position: absolute;
  width: 20%;
  height: 100%;  
  top: 0%;
  left: 0%;
  

}
/*Parte el color rojo trasparente del lado izquierdo*/
#colorAzulTrasparente{
  width: 100%;
  height: 100%; 
  background-color: #a2ca48;
  opacity: 0.3;
  filter: alpha(opacity=60);
}

/*El el estilo para la imagen sin fondo amarrilla donde esta el nino*/
#imgArco{
  top: 0%;
  left: 5%;
  width: 90%;
  height: 100%;   
  position: absolute;  
}
/*Estilo para el nino que aparece en la imagen principal*/
#imgNino{
  position: absolute;
  width: 20%;
  height: 35%;
  top: 57.3%;
  left: 71%;
}



/*Estilo para las letras que aparecen en la parte roja, son 3 letras de colores*/
#imgLetras{
  position: absolute;
  left: 1%;
  width: 100%;
  height: 15%;
}
/*Es el efecto para el boton que pasa al siguiente paso o nivel*/
.efecto img:hover {

  transform: scale(0.9);
  -ms-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -o-transform: scale(0.9);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;

}

/*Imagen del boton siguiente*/
#imgBoton{
  position: absolute;
  top: 73%;
  left: 5.5%;
  width: 85%;
  height: 12%;

}
/*Estilo para la imagen de bocina*/
#imgBocina{
  position: absolute;
  top: 75%;
  left: 60%;
  width: 10%;
  height: 15%;
  -moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: "FlipH";
filter: FlipH;
}
/*Los botonees donde estan las palabras*/
#btnPalabra{position: absolute; top: 25%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}      
#btnFavoritos{position: absolute; top: 35%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}
#btnE-mail{position: absolute; top: 45%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}
#btnColumna{position: absolute; top: 55%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}
#btnCelda{position: absolute; top: 65%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}


/*Se coloca para que los botones cambien de color de un blanco a un rojo*/
.parteIzquierda button:hover{
  background-color: red;
  cursor: pointer;
}

/*Sirve para el boton que representa la frase 1*/
#btnFrase1{
  position: absolute;
  top: 10%;
  left: 25%;
  background-color: #00a9ff;
  border-color: transparent;
  width: 60%;
  font-size: 1em;
  font-weight: bolder;
  font-style: italic;
  display: none;
  white-space: normal;
}

/*Sirve para el boton que representa la frase 2*/
#btnFrase2{
  width: 60%;
  height: 30%;
  background-color: transparent;
  border-color: transparent;
  position: absolute;
  top: 10%;
  left: 25%;
  color: black;
  white-space: normal;
  font-size: 1.5em;
  font-weight: bolder;
  font-style: italic;
  text-shadow: 0.1em 0.1em #3333;
  text-align: left;
display: none;
}

/*Estilo par la imagen que sale con las frases*/
#imgFrase{
  position: absolute;
  width: 30%;
  height: 35%;
  top: 40%;
  left: 30%;
  display: none;
}

/*El div que se utiliza en la segunda parte en la parte de arriba*/
#divArriba2{
  position: absolute;
  width: 100%;
  height: 15%;  
  top: 0%;
  left: 0%;  
  display: none;
  
}
#imgLetras2{
  position: absolute;
  left: 1%;
  top: 0%;
  width: 19%;
  height: 100%;
}
/*El color trasparente para la parte de arriba*/
#colorAzulTrasparente2{
  position: absolute;
  width: 100%;
  height: 100%; 
  background-color: green;
  opacity: 0.3;
  filter: alpha(opacity=60);
}


#btnIntrucciones{
  width: 70%;
  height: 100%;
  background-color: transparent;
  border-color: transparent;
  position: absolute;
  top: 1%;
  left: 25%;
  color:black;
  white-space: normal;
  font-size: 1em;
  font-weight: bolder;
  font-style: italic;
  
  text-align: left;

}
/*Se coloca para la parte izquierda de la segunda ventana*/
#parteIzquierdaSegunda{
  position: absolute;
  width: 20%;
  height: 100%;  
  top: 0%;
  left: 0%;
  display: none;
}

/*Tabla donde estan las palabras*/
#divArriba2 table
{

  width: 60%;
  height: 10%;
  position: absolute;
  top: 10%;
  left:20%;
  
  border-collapse: none;
  align-items: center;
  padding: 0px;
border-spacing: 0px;
}

/*El tamano de los label que estan en la columna*/
#divArriba2 td input{
  font-size: 70%;
  margin: 0px;
  
}

#btnHerramientas2{ width: 80%; height: 100% }      
#btnDatos2{ width: 80%; height: 100% }
#btnCPU2{ width: 80%; height: 100% }
#btnInformacion2{  width: 60%; }
#btnEscritorio2{  width: 60%; }
#btnBoton2{  width: 60%; }
#btnArchivo2{  width: 60%; }
#btnDocumentos2{ width: 60%; }
#btnCalculadora2{ width: 60%; }

#imgFelicidades{
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  display: none;

}
/*=====================0Comienza rompecabezas=====================*/

#btnFraseArriba{
  position: absolute;
  top: 20%;
  left: 30%;
  background-color: #00a9ff;
  border-color: transparent;
  width: 40%;
  font-size: 1em;
  font-weight: bolder;
  font-style: italic;
  
  white-space: normal;
  border-radius: 10px;
  display: none;
}


.est{
  display: none;
}

div#content{margin-top:10px; position: absolute; left: 20%}

div#conf{padding-bottom:10px; position: absolute; left: 30%; }

#div_content table{position: absolute; left: 40%; top: 40%;}

#div_content td.pieza{background:url(../img/diccionario-33.png); transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -webkit-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; cursor:pointer; }

div.posic{padding:5px;  width:30%; position:absolute; top:70px; overflow:auto; min-height:200px; max-height:250px; color: transparent;}

#barajar{position: absolute; width: 30%; height: 4%; top: 25%; left: 33%; border-radius: 30px; background-color: green; font-size: 1em; display: none; font-weight: bold; font-style: italic; opacity: 0.8;}
#lbInstrucciones{position: absolute; font-style: inherit; font-size: 1.2em; top: 8%; left: 25%; color: green;text-shadow: 0.1em 0.1em #3333; display:none;}

/*====================Termina rompecabezas========================*/




/*Comienza los medias queries */

@media (max-width: 1300px){
  .parteIzquierda button {
    font-size: 10px;
  }

  #btnFrase2{
    font-size: 1em;
  }
  #btnFrase1{
    font-size: 1em;
  }

  #palabras label{
  font-size: 1.5em;
  color: blue;
}
}
@media (max-width: 950px){
  #botones button{
  font-size: 10px;
}
#palabras label{
  font-size: 1em;
  
}
}

@media (max-width: 800px){
  #botones button{
  font-size: 8px;
}
#regresar{
  font-size: 50%
}

#div_content table{left: 20%;}
#divArriba2 td input{
  font-size: 50%;
  
}
 #lbInstrucciones{ left: 10%} 
 #imgArco{
  display: none;
}
}
@media (max-width: 770px){
  .parteIzquierda button {
    font-size: 8px;
  }
  #botones button{
  font-size: 7.5px;
}


  

}
@media (max-width: 400px){
  
  .contenido{
      width: 100%;
      height: 70%;
  }
  .parteIzquierda button {
    font-size: 5px;
  }
  
  #div_content table{left: 9%;top: 20%;}
  #btnFraseArriba{left: 27%; width: 50%; top: 18%;   font-size: 0.7em;}
    #botones button{
    font-size: 5px;
    }
    #palabras label{
    font-size: 0.6em;
 
    }
    td label{
    font-size: 60%
    }

    #divArriba2 td input{
    font-size: 50%;
    margin: 0px;
  
  }

  #divArriba2 table {
    width: 80%
  }

  #btnHerramientas2{ width: 100%; }  
  #btnDatos2{ width: 100%; height: 100%}
  #btnCPU2{ width: 100%; height: 100% }

}


@media (max-width: 640px){
  .contenido{
    left: 1%;
    height: 70%;
  }
  
  .parteIzquierda button {
    font-size: 5px;
  }
   #btnFrase2{
    font-size: 0.5em;
  }
   #btnFrase1{
    font-size: 0.7em;
  }
  #btnIntrucciones{
    font-size: 0.8em;
  }
  #palabras label{
  font-size: 0.8em;
 
}

#regresar{
  font-size: 40%
}
/*#div_content table{left: 2%;top: 20%;}*/
div.posic{top: 100%}
#divArriba2 table
{
  top: 0%;
}
#imgArco{
  display: none;
}
#barajar{top:115%; padding: 0px; font-size: 0.8em; height: 6%}
/*#btnFraseArriba{left: 20%; width: 50%; top: 22%;   font-size: 0.7em;}*/
#lbInstrucciones{ font-size: 0.8em; left: 20%}

#divArriba2 td input{
  font-size: 30%;
  margin: 0px;
  
}

}