@charset "UTF-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
 }
#contenedor{
 border: 1px solid #903;
 margin-left:auto;
margin-right:auto;
width:900px;
background-color:#FFF;
 padding: 5px;
 }
header {
border: 1px solid #903;
width:100%;
 margin-bottom: 15px;
 height: 150px;
background-color:rgba(0,255,255);
overflow: hidden;
 }
header .logo{
float: left;
margin: 10px;
margin-bottom: 5px;
width: 500px;
 }
header .logo img{
width: 95%;
 }
header h3{
 margin: 5px;
 }
nav{
 width: 100%;
 }
nav ul{
list-style: none;
 }
nav ul li{
float: left;
 width: 20%;
 text-align: center;
 }
nav ul li a{
   text-align: center;
 }
nav ul li a{
 display: block;
 padding-top: 8px;
 padding-bottom: 8px;
 font-weight: bold;
 color: white;
 background: #903;
 text-decoration: none;
 }
nav ul li a:hover{
 background-color: chocolate;
 }
section{
 border: 1px solid #903;
 width: 550px;
 float: left;
 height: 500px;
 margin-left: 15px;
 margin-bottom: 15px;
 }
section .foto{
margin: 10px;
margin-left: 50px;
width: 200px;
 }
section .foto img{
width: 100%;
 }
section h3{
 width: 55%;
float: right;
 text-align: justify;
 margin: 10px;
 }
section p{
 text-align: justify;;
margin: 5px;
 margin-bottom: 10px;
 }
section img{
 width: 100%;
 margin-bottom: 15px;
 }
aside{
 border: 1px solid #903;
 margin-right: 15px;
 width: 300px;
 float: right;
 height: 500px;
 margin-bottom: 15px;
 }
aside .fotoaside{
margin: 10px;
margin-left: 70px;
width: 150px;
 }
aside .fotoaside img{
width: 100%;
 }
aside h3{
 margin: 5px;
 }
aside p{
 margin: 5px;
 text-align: justify;
 }
footer {
 border: 1px solid #903;
 clear: both;
 width: 100%;
 height: 150px;
 background-color: rgba(0,255,255);
 }
footer textarea{
margin: 5px;
text-align: justify;
 }
footer p{
margin: 5px;
 }
@media screen and (max-width: 700px) {
 section {
 width: auto;
 float: none;
 }
 aside {
 width: auto;
 float: none;
 }
 }
@media screen and (max-width: 480px) {
#contenedor{
width: 100%;
 border:none;
 margin: 0px;
 padding: 0px;
 }
 header {
   margin: 0;
 }
 header .logo{
margin: auto;
 float: none;
 width: 100px;
 }
 nav{
 display: none;
 }
 header h3 {
 display: none;
 }
 aside {
 display: none;
 }
 section{
 width: 100%;
 margin: 0;
 padding: 5px;
 }
}