/*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-12.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 derecha del contenedor*/
#colorAzulTrasparente{
  position: absolute;
  width: 20%;
  height: 100%; 
  background-color: #FFE092;
  opacity: 0.4;
  filter: alpha(opacity=60);
}



#imgNino{
  position: absolute;
  width: 30%;
  height: 20%;
  top: 60%;
  left: 30%;
  display: none;
}

#imgLetras{
  position: absolute;
  left: 1%;
  width: 20%;
  height: 15%;
}

.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: 76%;
  left: 5.5%;
  width: 85%;
  height: 12%;

}

/*Estilo para la imagen de bocina*/
#imgBocina{
  position: absolute;
  top: 75%;
  left: 80%;
  width: 10%;
  height: 15%;
  /*Efecto espejo en la imagen de bocina*/
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: "FlipH";
  filter: FlipH;
}

/*El el estilo para la imagen sin fondo amarrilla donde esta el nino*/
#imgArco{
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;   
  position: absolute;  
}
/*Los botonees donde estan las palabras*/
#btnInformacion{position: absolute; top: 17%; left: 10%; width: 80%; text-align: left; font-weight: bolder; white-space: normal; border-color: transparent; }      
#btnCarpeta{position: absolute; top: 21%; left: 10%; width: 80%; text-align: left;  font-weight: bolder; white-space: normal; border-color: transparent;}
#btnArchivo{position: absolute; top: 26%; left: 10%; width: 80%; text-align: left;  font-weight: bolder; white-space: normal; border-color: transparent; }
#btnDigital{position: absolute; top: 31%; left: 10%; width: 80%;  text-align: left; font-weight: bolder; white-space: normal; border-color: transparent;}
#btnUnidades{position: absolute; top: 38%; left: 10%; width: 80%; text-align: left;  font-weight: bolder; white-space: normal; border-color: transparent;}
#btnDisco{position: absolute; top: 50%; left: 10%; width: 80%; text-align: left;  font-weight: bolder; white-space: normal; border-color: transparent;}      
#btnCPU{position: absolute; top: 55%; left: 10%; width: 80%;  text-align: left; font-weight: bolder; white-space: normal; border-color: transparent;}
#btnProcesador{position: absolute; top: 61%; left: 10%; width: 80%; text-align: left; font-weight: bolder; white-space: normal; border-color: transparent;}
/*#btnFichas{position: absolute; top: 63%; left: 10%; width: 80%;text-align: left;  font-weight: bolder; white-space: normal; border-color: transparent;}*/
/*#btnGrupos{position: absolute; top: 68%; left: 10%; width: 80%;text-align: left;  font-weight: bolder; white-space: normal; border-color: transparent;}*/
/*Se coloca para que los botones cambien de color de un blanco a un rojo*/
.parteIzquierda button:hover{

  background: red;
  cursor: pointer;
}

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

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


/*El div que se utiliza en la segunda parte en la parte de arriba*/
#divArriba2{
  position: absolute;
  width: 75%;
  height: 10%;  
  top: 0%;
  left: 20%;

}

#colorAzulTrasparente2{
  width: 100%;
  height: 100%; 
  background-color: black;
  opacity: 0.4;
  filter: alpha(opacity=60);
  border-radius: 0px 0px 10px 10px;
}

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


}

#imgImagenes{
  position: absolute;
  display: none;
  width: 60%;
  height: 50%;
  background-color: red;
  top: 40%;
  left: 20%;
}
#imgIma{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
}
#botones{
  position: absolute;
  width: 90%;
  height: 5%;
  top: 6%;
  left: 10%;
  
}


#imgCorInco{position: absolute; width: 10%; height: 15%; top: 45%; left:70%; display: none;}
#imgFelicidades{
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  display: none;

}


input[type="radio"] {
  position: absolute;
margin: 10.5%;
    -ms-transform: scale(3); 
    -webkit-transform: scale(3); 
    transform: scale(3);
}
.uno{
  display: none;
height: : 10%;
  width: 10%;
  left:70%;
  top: 15%;
}
.dos{
display: none;
position: absolute;
width: 10%;
left:70%;
top: 53%;
}
.tamaño{
display: none;
position: absolute;
 width: 20%;
 height:20%;
  left: 50%;
  top: 20%;

}
.tamaño2{
display: none;
position: absolute;
 width: 20%;
 height:20%;
  left: 50%;
  top: 55%;

}
#btnText{
  position: absolute;
  left: 15%;
  top:80%;
width: 80%;
height:  10%;
background: transparent;
display: none;
border-color: transparent;
font-size: 210%;
color:#FE9B09;
}



@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;
  
}
 #btnIntrucciones{
    font-size: 1em;
  }

}

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

  
}
@media (max-width: 770px){
  .parteIzquierda button {
    font-size: 8px;
  }
  #botones button{
  font-size: 7.5px;
}
 #btnIntrucciones{
    font-size: 1em;
  }

  

}
@media (max-width: 550px){
  .parteIzquierda button {
    font-size: 5px;
  }
  
    #botones button{
  font-size: 5px;
}
#palabras label{
  font-size: 0.6em;
 
}
}


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