@import url(https://fonts.googleapis.com/css?family=Open+Sans);
iframe
{
  display:none;
}
html,body{
color:white;
  font-family:'Century Gothic';  
  font-weight: bold;
  height:100%;
  width:100%;
  margin: 0px;
}
.fondo{width: 100%; height: 100%; position: absolute; top: 0%; left: 0%;}
.imagen
{
  width: 100%;
  height: 99%; 
  display: flex;
  flex-flow: row wrap;
  position: absolute;
  top: 0%;
  left: 0%;
}




#cortina
{
    position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; display: flex; flex-flow: row wrap;

}


#mensaje
{
     position: absolute; top: 2%; left: 5%; width: 90%; height: 25%; display: flex; flex-flow: row wrap;
 
}

#letras{
     position: absolute; top: 0%; left: 15%; width: 85%; height: 99%; display: flex; flex-flow: row wrap; font-size: 30px; color: black;
}
.bocina{  position: absolute; top: 10%; left: 3%; width: 10%; height: 40%; display: flex; flex-flow: row wrap;

}


.btniniciar
{
     position: absolute; top: 50%; left: 44%; width: 12%; height: 10%; display: flex; flex-flow: row wrap;

}





.panel-juego{position: absolute; top: 2%; left: 5%; width: 90%; height: 95%; display: flex; flex-flow: row wrap;}

#panel-imagenes{position: absolute; top: 8%; left: 5%; width: 88%; height: 30%; display: flex; flex-flow: row wrap;}


#espacio1
{position: absolute; top: 0%; left: 0%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;
border: 1px solid #56aec2;
  background: rgba(86, 174, 194, 0.5);
  border-radius: 5px;}

#espacio2
{position: absolute; top: 0%; left: 28%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;
border: 1px solid #56aec2;
  background: rgba(86, 174, 194, 0.5);
  border-radius: 5px;}

#espacio3
{position: absolute; top: 0%; left: 54%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;
border: 1px solid #56aec2;
  background: rgba(86, 174, 194, 0.5);
  border-radius: 5px;}

#espacio4
{position: absolute; top: 0%; left: 80%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;
border: 1px solid #56aec2;
  background: rgba(86, 174, 194, 0.5);
  border-radius: 5px;}


#panel-opciones{position: absolute; top: 42%; left: 5%; width: 88%; height: 30%; display: flex; flex-flow: row wrap;}


#imagen1
{position: absolute; top: 0%; left: 0%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;}

#imagen2
{position: absolute; top: 0%; left: 28%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;}

#imagen3
{position: absolute; top: 0%; left: 54%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;}

#imagen4
{position: absolute; top: 0%; left: 80%; width: 20%; height: 99%; display: flex; flex-flow: row wrap;}



/*
border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;
*/