body{
	background:url(../img/fondo.png);
}

header {
	background-color:#00FFD4;
	width:80%;
	margin-left:10%;
	margin-right:10%;
	border:3px solid #008278;
	padding:25px;
	box-shadow:5px 5px 15px black,
	           -10px -10px 25px lightblue inset;
	text-shadow:5px 5px 5px white;
}

img.lobo {
	width:15%;
	height:15%;
	float:right;
	
	border-radius:200px;
}

@font-face {
	font-family:"Fuente";
	src:url(../font/Colleged.ttf);
}


h2.titulo {
	font-family:"Fuente";
	font-size:50px;
	text-align:"center";
	color:black;
}

#main {
	min-height:700px;
	margin:0px;
	padding:0px;
	display:flex;
	flex-direction:row;
}

nav {
	border:5px solid blue;
	margin-left:10%;
	padding:5px;
	border-radius:7pt;
	background: #ccccff;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:20%;
	order:0;
}


#menu {
	list-style-type:none;
}

#menu li {
	padding:15px;
	background:lightblue;
	display:inline-row;
	width:223px;
	text-align:center;
	margin-left:50px;
	margin-top:25%;
	margin-bottom:25%;
	border-radius:200px;
}

#menu li:hover {
	background:lightgreen;
	color:white;
}



article {
	margin-right:7%;
	padding:2px;
	border:5px solid #cccc33;
	border-radius:7pt;
	background:#7F98FF;
	flex-grow: 3;
	flex-shrink: 1;
	flex-basis:60%;
	order:1;
}

img.historia {
	border-radius:200px;
}

iframe.iframe {
	cover:all;
}

footer {
	background-color:#00FFD4;
	width:80%;
	margin-left:10%;
	margin-right:10%;
	border:3px solid #008278;
	padding:25px;
}
	
@media all and(max width:640px) {
	
	#main > nav{
	  order:1
	}
	
	#main > article{
		order:2
	}
	
	#main > aside{
		order:3
	}
}