@charset "utf-8";
/* CSS Document */

* {
	box-sizing: border-box;
}

body{
	background: #686868;
	margin: 0;
	padding: 0;
	font-family: 'Open sans',Arial,helvetica;
}

.caja header{
	text-align: center;	
	color: #fff; /*color del texto */
	text-shadow: 6px 6px 2px black;
	font-family: serif;

	padding: 3px;
	margin: 3px;
}

.navegacion ul {
	padding: 15px;
	background: #acacac;
	margin: 1% auto;
	width: 96%;
	border: 2px solid black;
	list-style-type: none;
	border-radius: 10px;

	display: flex;
}

.navegacion ul li{
	margin: 10px;
	border: 1px solid #fff;
	background: #c9830a;
	flex-grow: 1;
}

.navegacion ul li a{
	display: block;
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-size: 20px;
	padding: 10px;
}

.navegacion ul li a:hover{
	color: #FFF;
	background-color: #666;
}

.contenedor{
	background: rgb(65 65 65);
	width: 60%;
	margin: 5px 10px;
	padding: 3px;
	border-radius: 10px;
	float: left;
}

.contenedor article div{
	background: #DCDCDC;
	padding: 10px 20px;
	margin: 10px;
	border-radius: 10px;
}

.contenedor article{
	display: flex;
	/*flex-direction: column;*/
}

.columna1{
	order:1 ;
	flex: 1;
}

.columna2{
	order: 2;
	flex: 1;
	align-self:center;
}

.columna3{
	order: 3;
	flex: 1;
	align-self: baseline;
}

aside{
	width: 35%;
	float: right;
	background-color: #00968B;

	padding: 10px;
	margin: 10px 15px 10px;
	border-radius: 10px;

	border-style: solid;
	border-width: 2px;
	border-color: black;

	font-size: 150%;
	color: white;
}

.relacionado p{
	font-size: 60%;
	font-family: 'serif';
}

footer{
	clear: both;

	margin: 10px;
	padding: 5px; 

	font-size: small;
	color: white;
}