/*cuando reproduce el audio no muestra el iframe, para no llenar la pantalla de iframe*/
iframe
{
	display:none;
}

.selected{
   box-shadow:0px 12px 22px 1px #666;
}

.panel-texto
{
  position: absolute; top: 5%; left: 35%; width: 80%; height: 8%; display: flex; flex-flow: row wrap; font-size: 18px;
}
/*área de juego*/
.escuela 
{
    padding: 0px;
    margin: auto;
    width: 850px;
    height: 650px;
    background-image: url("../img/fondo.jpg");
    background-size: 850px 650px;

  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.oficina 
{
    padding: 0px;
    margin: auto;
    width: 850px;
    height: 650px;
    background-image: url("../img/oficina.png");
    background-size: 850px 650px;

  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.casa 
{
    padding: 0px;
    margin: auto;
    width: 850px;
    height: 650px;
    background-image: url("../img/casa.jpg");
    background-size: 850px 650px;

  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.proyector
{
position: relative;
top: 55px; 
left: -95px;

}
.computadora
{
   position: relative;
    top: 1%;
    left: -39%;
}
.grabadora
{
   position: relative;
    top: 2%;
    left: 24%;
}


.instrucciones
{
 position: absolute; top: 5%; left: 30%; width: 4%; height: 5%; display: flex; flex-flow: row wrap;
}

.selected
{
    box-shadow:0px 12px 22px 1px #444;
}

.stereo
{
  position: relative;
    top: -37%;
    left: 17%;

}

.tv
{

  position: relative;
    top: -34%;
    left: 27%;

}
.dvd
{

  position: relative;
    top: -12%;
    left: -8%;
   
}
.camara
{

  position: relative;
    top: 27%;
    left: -27%;
    
}
.telefono
{

  position: relative;
    top: 27%;
    left: -18%;
 
}

.impresora
{
  position: relative;
    top: -22%;
    left: 27%;
}
.celular
{
  position: relative;
    top: -12%;
    left: 26%;
}
.laptop
{
  position: relative;
    top: -10%;
    left: 25%;
}
.scanner
{
  position: relative;
    top: 17%;
    left: 10%;
}
.telefono3
{
  position: relative;
    top: 38%;
    left: -28%;
}

.repetir
{

  position: relative;
    top: 42%;
    left: -96%;
}

/*Hacer Responsivo el sitio*/
@media (max-width:320px)
{
	.escuela, .oficina, .casa, .proyector, .computadora, .grabadora, .instrucciones
	{
		width:100%;
	}
}

#main {max-width:960px; min-width:320px; margin:0 auto;}