*{
	
	margin:0px;
	padding:0px;
}

body
{
background:#444;	
color:black;	
	
}

#contenedor{
width:960px;	
margin:auto;	
margin-top:20px;	
margin-bottom:20px;
border-radius:20px;
overflow:hidden;
}

header{
height:150px;	
background: #000;	
color:#FFF;	
}

header h1{
font-size:50px;	
text-align:center;	
line-height:150px;	
}

nav
{
background:orange;	
height:100px;
color:#FFF;	
}

nav h2 
{
	font-size:50px;	
	text-align:center;	
	line-height:60px;	
}
#contenido{
width:700px;	
height:690px;	
float:left;
background:white;	
margin-top:10px;
margin-right:10px;	
}

#contenido h2 
{
	font-size:30px;	
	text-align:center;	
	line-height:25px;	
	color:black;	
}




aside{
	width:250px;
	height:690px;
	background:orange;
	margin-top:10px;
	float:right;
	color:#FFF;
}

aside h2
{
	font-size:40px;	
	text-align:center;	
	line-height:500px;		
}

footer{
margin-top:10px;
background: #000;	
clear: both;		
}

footer{
	font-size:10px;	
	text-align:center;	
	padding:20px;	
	font-style:italic;
	height:10px;
	color:white;
}

#contenido p
{
	
	text-align:center;	
	line-height:25px;	
	color:black;
	 margin-right:10px;	
	 margin-left:10px;	
}

#contenedor nav ul li 
{
margin-top:10px;	
text-align:center;	
 margin-right:10px;	
 margin-left:10px;			
}


#contenedor nav ul li 
{

list-style:none;	

}

#contenedor nav ul li 
{
float:left;
}

#contenedor nav ul li 
{
padding:10px 20px;
	display:block;
    background: #FFF;
	color:orange;
text-decoration:none
}

#contenedor nav ul li a
{
	color:orange;
}

#contenedor  nav ul li a
{
overflow:hidden;
}

#contenido ul li
 {
	 list-style:none; 
 }

#contenido ul li 
 {
	 float:center;
}

#contenido  ul li a
{
padding:10px 20px;
    display:block;
    background: orange;
	color:white;
text-decoration:none;
}

#contenido ul li a:hover{
background:#444444;	
}

#contenido ol{
list-style:none; 	
margin-top:100px;	
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 980px) {
	#contenedor {
		width: 95%;
	}

	#contenido {
		width: 60%;
		height: auto;
		float: left;
	}

	aside {
		width: 35%;
		height: auto;
		float: right;
	}

	aside h2 {
		line-height: normal;
		padding: 20px 10px;
	}

	header h1 {
		font-size: 36px;
	}

	nav {
		height: auto;
		padding: 10px 0;
	}

	#contenedor nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
	}

	#contenedor nav ul li {
		float: none;
		margin: 4px;
	}
}

/* Mobile */
@media (max-width: 600px) {
	#contenedor {
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		border-radius: 0;
	}

	header {
		height: auto;
		padding: 16px 10px;
		text-align: center;
	}

	header img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: auto;
	}

	header h1 {
		font-size: 24px;
		line-height: normal;
		padding: 10px 0;
	}

	nav {
		height: auto;
		padding: 10px 0;
	}

	#contenedor nav ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
	}

	#contenedor nav ul li {
		float: none;
		width: 90%;
		margin: 4px auto;
		text-align: center;
	}

	#contenido {
		width: 100%;
		height: auto;
		float: none;
		margin-right: 0;
	}

	aside {
		width: 100%;
		height: auto;
		float: none;
		margin-top: 10px;
	}

	aside h2 {
		line-height: normal;
		padding: 20px;
		font-size: 28px;
	}

	footer {
		height: auto;
		padding: 16px;
		text-align: center;
	}

	footer img {
		display: inline-block;
		margin: 4px;
	}

	#contenido ul li a {
		padding: 12px 16px;
	}
}