@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html,
body {
	color: white;
	font-family: 'Opens Sans', helvetica;
	height: 100%;
	width: 100%;
	margin: 0px;
}
iframe {
	display: none;
}
.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%;
}

.btniniciar {
	position: absolute;
	top: 70%;
	left: 60%;
	width: 150px;
	height: 130px;
	display: flex;
	flex-flow: row wrap;
}

.imagenfrasco {
	width: 55px;
	height: 65px;
}
.imagentabla {
	top: 20%;
	width: 45%;
	height: 30%;
	display: flex;
	flex-flow: row wrap;
}

.panel-index {
	width: 100%;
	height: 100%;
}

.panel-letras {
	position: absolute;
	top: 5%;
	left: 20%;
	width: 65%;
	height: 20%;
	display: flex;
	flex-flow: row wrap;
	font-size: 35px;
	color: black;
}
.bocina {
	position: absolute;
	top: 8%;
	left: 10%;
	width: 8%;
	height: 10%;
	display: flex;
	flex-flow: row wrap;
}

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

#panel-figuras {
	position: absolute;
	top: 0%;
	left: 15%;
	width: 70%;
	height: 48%;
	display: flex;
	flex-flow: row wrap;
}
#panel-respuestas {
	position: absolute;
	top: 51%;
	left: 5%;
	width: 90%;
	height: 48%;
	display: flex;
	flex-flow: row wrap;
}
#resp1 {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 20%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
}

#resp2 {
	position: absolute;
	top: 0%;
	left: 24%;
	width: 20%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
}
#resp3 {
	position: absolute;
	top: 0%;
	left: 48%;
	width: 20%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
}
#resp4 {
	position: absolute;
	top: 0%;
	left: 72%;
	width: 20%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
}
#ResCorrecta {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 12%;
	height: 3%;
	display: flex;
	flex-flow: row wrap;
}