/*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{
   width: 100%;
  height: 100%; 
  background-color: #51d1f6;
  opacity: 0.4;
  filter: alpha(opacity=60);
}


#parteAbajo{
  top: 93%;
  left: 8%;
  width: 85%;
  height: 7%;
  background-color: #51d1f6;  
  position: absolute;
  border-radius: 10px 10px 0px 0px;
}

#imgNina{
  position: absolute;
  top: 72.55%;
  left: 10%;
  width: 30%;
  height: 25%;
}
#imgNino{
  position: absolute;
  width: 30%;
  height: 25%;
  top: 72.5%;
  left: 65%;
}

#imgLetras{
  position: absolute;
  left: 1%;
  width: 100%;
  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: 73%;
  left: 5.5%;
  width: 85%;
  height: 12%;

}

#imgBocina{
  position: absolute;
  top: 56%;
  left: 20%;
  width: 65%;
  height: 15%;
}
/*Los botonees donde estan las palabras*/
#btnPalabra{position: absolute; top: 20%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}      
#btnFavoritos{position: absolute; top: 26%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}
#btnE-mail{position: absolute; top: 33%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}
#btnGmail{position: absolute; top: 40%; left: 10%; width: 80%; font-weight: bolder; white-space: normal;}
#btnRegistrarte{position: absolute; top: 52%; 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: 5%;
  left: 30%;
  background-color: #00a9ff;
  border-color: transparent;
  width: 60%;
  font-size: 1.5em;
  font-weight: bolder;
  font-style: italic;
  display: none;
  white-space: normal;
}

/*Sirve para el boton que representa la frase 2*/
#btnFrase2{
  width: 60%;
  height: 60%;
  background-color: transparent;
  border-color: transparent;
  position: absolute;
  top: 15%;
  left: 30%;
  color: #000000;
  white-space: normal;
  font-size: 1.8em;
  font-weight: bolder;
  font-style: italic;
  text-shadow: 0em 0em #333;
  text-align: left;
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%;
  
  
}
#imgLetras2{
  position: absolute;
  left: 1%;
  width: 15%;
  height: 100%;
}

#colorAzulTrasparente2{
  width: 100%;
  height: 100%; 
  background-color: #51d1f6;
  opacity: 0.4;
  filter: alpha(opacity=60);
}

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

}

#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: 15%;
  left: 10%;
  
}
#botones button:hover{
  background-color: red;
  cursor: pointer;
}
#botones button{
  font-size: 12px;
}

#btnPalabra2{position: absolute; top: 20%; left: 10%; width: 15%; font-weight: bolder; white-space: normal;}      
#btnFavoritos2{position: absolute; top: 20%; left: 28%; width: 15%; font-weight: bolder; white-space: normal;}
#btnE-mail2{position: absolute; top: 20%; left: 46%; width: 15%; font-weight: bolder; white-space: normal;}
#btnGmail2{position: absolute; top: 20%; left: 64%; width: 15%; font-weight: bolder; white-space: normal;}
#btnRegistrarte2{position: absolute; top: 20%; left: 82%; width: 15%; font-weight: bolder; white-space: normal;}

#btnFraseArriba{
  position: absolute;
  top: 30%;
  left: 20%;
  background-color: #00a9ff;
  border-color: transparent;
  width: 60%;
  font-size: 1.5em;
  font-weight: bolder;
  font-style: italic;  
  white-space: normal;
  display: none;
  
}
#drop1{
  position: absolute;
  width:18%;
  height: 10%;
  top: 19%;
  left: 74%;
  

}
#drop2{
  position: absolute;
  width: 22%;
  height: 10%;
  top: 30.2%;
  left: 38.2%;
  
}
#drop3{
  position: absolute;
  width: 30%;
  height: 10%;
  top: 30.2%;
  left: 68.5%;
  
}

#palabras{
  position: absolute;
  width: 100%;
  height: 10%;
  left: 5%;
  top: 88%;

}

td{
  width: 40%;
}

#palabras label{
  font-size: 1.5em;
  color: blue;
}

.esti{
  font-size: 1.3em;
  color: blue;
}

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

}

#regresar{
  position: absolute; top:94%; left: 82.8% ; width: 10%; height: 5%; background-color: transparent;
  font-size: 70%;
}
/*Comienza los medias queries */

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

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

  #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%
}

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

  

}
@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: 1em;
  }
   #btnFrase1{
    font-size: 1em;
  }
  #btnIntrucciones{
    font-size: 0.8em;
  }
  #palabras label{
  font-size: 0.8em;
 
}
td{
  width: 30%;
}
#regresar{
  font-size: 40%
}
}