@font-face {
	font-family:'fuente';
	src:url(../fonts/fuente.ttf);
}



body {
	font:24px Helvetica;
	background:#ffffff;
	font-family:fuente;
}

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

#cuerpo > article {
	margin:4px;
	padding:5px;
	border:2px solid #6633ff;
	border-radius:7pt;
	background:#cccccc;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	order:2;
}

#cuerpo > nav {
	margin:4px;
	padding:5px;
	border:2px solid #6633ff;
	flex-grow:1;
	flex-shrink:6; /*cuanto más grande es el número más decrece*/
	border-radius:7pt;
	background:#cccccc;
	flex-basis:20%;
	order:1;
}

#menu {
	list-style-type:none; 
	margin:auto;
	padding:0;
}

#menu li {
	padding:15px;
	background-color:#6633ff;
	display:block; 
	text-align:center;
  margin-bottom:50%;
  border-radius:7pt;
  color:#ffffff;
  transition:all 1s linear;
}

#menu li:hover {
  color:#6633ff;
  background-color:#ffffff;
  border:2px solid #6633ff;
  transition:all 1s linear;
  box-shadow:2px 2px 4px #000;
}

a {
	text-decoration:none;
}

#cuerpo > aside {
	margin:4px;
	padding:5px;
	border:2px solid #6633ff;
	flex-grow:1;
	flex-shrink:6; 
	border-radius:7pt;
	background:#cccccc;
	flex-basis:20%;
	order:3;
}

.banner {
	margin-top:100%;
	width:100%;
}

.banner:hover {
	filter:grayscale(100%);
}

header, footer {
	display:flex;
	margin:4px;
	padding:5px;
	min-height:100px;
	border:2px solid #6633ff;
	border-radius:7pt;
	background:#ffffff;
}

footer {
	font-size:8pt;
}

.logo {
	width:638px;
	height:98px;
}


@media all and (max-width:640px) { /*Para todo lo que tenga máximo 640 px*/
	#cuerpo {
		flex-flow:column; 
	}
}