*{margin:0; padding:0;}
body{background-color:white; margin:0 auto;}


#contenedor{width:80%; background-color:white; margin: 0 auto;
max-width:1028px;  }
#logotipo img {width: 100%}

.main {float:top; width: 100%; font-size:120%; }
#articulo{width:98%; margin:2%;padding:2%;  font-size:200%; font-family:garamond; }

.pie{width:95%;  margin-bottom:1%; margin-left:1%; margin-right:1%; padding-top:1%; padding-left:2%; padding-right:2%; padding-bottom:3%; height:20%; font-size: 80%; font-family: garamond; background:#0070C0; color:white;  }
 .pie img  {width:7%; height:7%; padding-right:2%;  }

header {width: 100%;}
header nav {width: 95%; max-width: 1000px; margin:20px auto; background: #0070C0;}
.menu_bar{display:none;}
header nav ul {overflow:hidden; list-style:none;}
header nav ul li {float:left; }
header nav ul li a {color:#fff; padding:20px; text-decoration:none; display:block;}

header nav ul li span {margin-right:10px; }
header nav ul li a:hover {background:#5C96BF; }
section { padding:20px; }

@media screen and (max-width:800px){
		#contenedor{width:100%; }

	header nav {
		width:80%;
		height:100%;
		left:-100%;
		margin:0;
		position: fixed;
		margin-left:10%;
		z-index: 10;
	}
	header nav ul li {
		display: block;
		float:none;
		border-bottom:1px solid rgba(255, 255, 255, 0.3);
	}
	.menu_bar {
		display:block;
		width: 100%;
		background:#ccc;
	}
	.menu_bar .bt-menu {
	 display:block;
	 padding:20px;
	 background:#0070C0;
	 color:#fff;
	 text-decoration: none;
	 font-weight: bold;
	 font-size: 25px;
	 -webkit-box-sizing:border-box;
	 -moz-box-sizing:border-box;
	 box-sizing: border-box;
	}
	.menu_bar span{
		float:right;
		font-size:40px;
	}