@font-face {
  font-family: gameFont;
  src: url('../fonts/PressStart2P.ttf');
}
*{
  box-sizing: border-box;
}

/*cuando reproduce el audio no muestra el iframe, para no llenar la pantalla de iframe*/
iframe
{
  display:none;
}
.bocina{  position: absolute; top: 10%; left: 0%; width: 20%; height: 90%; display: flex; flex-flow: row wrap;

}
.imagen
{
  width: 100%;
  height: 99%; 
  display: flex;
  flex-flow: row wrap;
  position: absolute;
  top: 0%;
  left: 0%;
}
body{
  background-image: url('../image/fondo.jpg');
  /*max-width: 100%;
  height: auto;
  background-repeat: no-repeat;
  position: absolute;
  top: 10%;  
  left: 150%;*/
  width: 400px;
  height: 400px;
  background-size: 100% 200%;

    background-repeat: no-repeat;
}
.imagen
{
  width: 95%;
  height: 85%; 
  display: flex;
  flex-flow: row wrap;
  position: absolute;
  top: 8%;
  left: 2%;
}
.panel-imagen
{
  position: absolute;
  top: 15%;
  left: 30%;
  width: 33%;
  height: 43%;
  display: flex;
  flex-flow: row wrap;
/*border: 10px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;*/

}

.panel-letrero
{
  position: absolute;
  top: 0%;
  left: 25%;
  width: 45%;
  height: 20%;
  display: flex;
  flex-flow: row wrap;
color: green;
font-size: 40px;
}


.letrero
{
  position: absolute;
  top: 0%;
  left: 20%;
  width: 80%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
}
.panel-respuesta
{
  position: absolute;
  top: 8%;
  left: 70%;
  width: 15%;
  height: 60%;
  display: flex;
  flex-flow: row wrap;
  /*border: 10px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;*/
}

.panel-palabra
{
  position: absolute;
  top: 58%;
  left: 30%;
  width: 35%;
  height: 28%;
  display: flex;
  flex-flow: row wrap;

}

#rspta1{ position: absolute; top: 20%;    width: 19%; height: 45%;  flex-flow: row wrap;
/*border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 1px;*/
}
#rspta2{ position: absolute; top: 20%;    width: 19%; height: 45%;  flex-flow: row wrap;
/*border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 1px;*/
}
#rspta3{ position: absolute; top: 20%;   width: 19%; height: 45%;  flex-flow: row wrap;
/*border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 1px;*/
}




.letra1{ position: absolute; top: 1%;  left: 8%;  width: 38%; height: 25%; display: flex; flex-flow: row wrap;}
.letra2{ position: absolute; top: 1%;  left: 54%; width: 38%; height: 25%; display: flex; flex-flow: row wrap;}
.letra3{ position: absolute; top: 35%; left: 8%;  width: 38%; height: 25%; display: flex; flex-flow: row wrap;}
.letra4{ position: absolute; top: 35%; left: 54%; width: 38%; height: 25%; display: flex; flex-flow: row wrap;}
.letra5{ position: absolute; top: 65%; left: 8%;  width: 38%; height: 25%; display: flex; flex-flow: row wrap;}
.letra6{ position: absolute; top: 65%; left: 54%; width: 38%; height: 25%; display: flex; flex-flow: row wrap;}

div[class^='col']
{
  width: 14.28%;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  align-items: center;

}




/* For mobile phones: 
[class*="imagen"] {
  width: 10%;
  height: 10%
}

*/
@media only screen and (min-width: 600px) 
{

}
@media only screen and (min-width: 768px) {
  /* For desktop: */

}