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

body{
  background-image: url('../img/fondo.png');
  /*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: 100%;
  height: 85%; 
  display: flex;
  flex-flow: row wrap;
  position: absolute;
  top: 8%;
  left: 2%;
}
iframe
{
  display:none;
}
.bocina{  position: absolute; top: 28%; left: 30%; width: 6%; height: 8%; display: flex; flex-flow: row wrap;

}
.panel-botones
{
  position: absolute;
  top: 34%;
  left: 23%;
  width: 55%;
  height: 15%;
  display: flex;
  flex-flow: row wrap;
  /*border: 10px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;*/
}


.btn1{ position: absolute; top: 57%;  left: 0%;  width: 28%; height: 120%; display: flex; flex-flow: row wrap;}
.btn2{ position: absolute; top: 57%;  left: 35%;  width: 28%; height: 120%; display: flex; flex-flow: row wrap;}
.btn3{ position: absolute; top: 57%;  left: 70%;  width: 28%; height: 120%; 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: */

}