* {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{ width:95%; font-size:130%; font-family:garamond; padding:2%; margin-top:2%;  }
 img {width:100%; }
.pie{width: 95%;  margin-bottom:2%; 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:5%; 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;
	}