/*--------------------ESTILO GENERAL--------------------*/
body
{
	background-image: url("../img/background.jpg");
	text-align: center;
}
header, footer, #menu, #mundos, #informacion, #extras
{
	background-color: rgb(67, 89, 124, 0.5);
	border: 2px solid black;
	border-radius: 7px;
	color: white;
}
#banner
{
	width: 20%;
	height: 190px;
}
ul li {list-style: none;}
a{text-decoration:none; color: white;}
a:visited
{
	color: white;
	text-decoration: none
}

/*----------------------MENÚ HORIZONTAL----------------------*/
#menu ul {
	padding: 0;
  margin: 0;
	display: inline-flex;
	margin-left: 5.5%
}
#titulo{width: 300px}
#menu li { padding: .5em 1em}
#menu ul li:hover
{background: rgb(102, 130, 175, 0.5)}

/*----------------------CONTENIDO----------------------*/
#centro{display: flex; flex-direction: row}
#mundos{flex-basis: 20%; height: 1020px}
#mundos li :hover{opacity: 0.7}
#informacion{flex-basis: 60%; height: 1020px; max-width: 1000px;}
#extras{flex-basis: 20%; height: 1020px}
#Cont{ width: 100%;height: 100%}
#mundos ul{align-items: center}
.mundos{height: 140px;
width: 200px;}

/*---------------EXTRAS---------------*/
#YTVideo
{
	margin-top: 5%;
	margin-bottom: 5%;
	width: 100%;
	height: 15%;
}
.cita {
	margin-top: 15%;
  font-style: italic;
}

/*----------------------PANTALLAS PEQUEÑAS----------------------*/
@media only screen and (max-width: 900px) {
	#banner
	{
		width: 60%;
		height: 190px;
	}
	#menu ul {flex-direction: column;}
  .cita{display: none}
	#centro{flex-direction: column}
	#informacion{order: 1}
	#mundos{order: 2}
	#extras{order: 3}
	#mundos, #informacion, #extras{width: 100%;}
	#YTVideo{height: 300px}
	#informacion
	{
        max-width: 100%;
        height: auto;
    }
		.mundos{height: 100px;
		width: 150px;}
}