/* hoja de ESTILOS de ALUMNO 3 JUAN MARCOS CARBONE*/

*{margin: 0;}

.pagina{max-width: 960px;
        margin: 0 auto
            }

body{background: #FFF;}

/* arranca HEADER */

nav{width: 100%; 
    height: 50px; 
    background: #262626;}

header{width: 100%; 
    height: 50px; 
    background: #262626; }
	
header h1 {
	
color:#FFF;
padding:0.5rem;
padding-left:1rem;
font-size:2rem;
font-family: Helvetica, Arial, sans-serif;
font-weight:100;
text-decoration: overline;
}

header h1 a { color: #fff; } /* NEW! */
header h1 a, header h1 a:visited, header h1 a:active { color: #fff; } /* NEW! */

/* termina HEADER */




main{width: 100%; 
    min-height: 400px; 
    background: #FFF;}



section{width: 100%; 
    min-height: 400px; 
    background: #FFF; 
    margin: 0 auto; 
    /*display: inline-block; eliminar esto quitó el espacio blanco horizontal*/}

section article{width: 33.3333333333333333333333%; 
    /*display: inline-block; me recomendó que lo saquemos "incluso se lo podes sacar a los article tambien y sigue funcionando porque tienen float"*/
    height: 320px; 
    background: #262626; 
    float: left; 
    margin: 0 auto;}


article img { max-width: 100%; }


                
aside{width: 100%; 
    min-height: 300px;  
    background: #000; 
    margin: 0 auto;
	float:left;}





footer{
    width: 100%; 
    height: 60px; 
    background: #FFF;
	float:left;}


p { color:#FFF;
padding:1rem;
padding-top:0;
font-family: Helvetica, Arial, sans-serif;}

.bold {
	font-weight:bold;	
	
	}

.italic{
font-style: italic;
}

p.negro { color:#000;
padding:1rem;
font-size:0.7rem;
font-style:italic;
font-family: Helvetica, Arial, sans-serif;}

p.cuadrado {
    padding:1rem;
    font-size: 0.8rem;
font-family: Helvetica, Arial, sans-serif;
}

/* <p class="cuadrado">cuerpo de texto.</p> */



h2 {color:#FFF;
padding-top: 1rem;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 0;
font-size:1.5rem;
font-family: Helvetica, Arial, sans-serif;
font-weight:100;


}


/* Responsive */
/* Si es menor a 768px
@media screen and (max-width:970px) {

    section{width: 100%;
    
    width: 100%; 
    min-height: 500px; 
    background: #000; 
    margin: 0 auto;
    
    }
    section article{ background: #000;width: 50%; height: 50%;  }
    article img { min-width: 100%;}
}
*/

/* Responsive */
/* Si es menor a 768px */
@media screen and (max-width:768px) {

    section{width: 100%;
    
    width: 100%; 
    min-height: 200px; 
    background: #262626; 
    margin: 0 auto;
    
    }
    section article{ background: #262626;width: 50%; }
    article img { min-width: 100%;display: block;}
}

/* Responsive */
/* Moto G 720 - iphone 6 750/  */
@media screen and (max-width:655px) {
	section{width: 100%;
    min-height: 300px; 
    width: 100%; 
    background: #262626; 
    margin: 0 auto;
    }
    section article{ background: #262626; width: 100%;}
    article img { min-width: 100%; display: block;}
}


/* Responsive */
/* Si es menor a 320px */
@media screen and (max-width:320px) {

    section{width: 100%;
    
    width: 100%; 
    min-height: 400px; 
    background: #262626; 
    margin: 0 auto;
    }
    section article{ 
	background: #262626;
	width: 100%;}
	 
    article img { min-width: 100%; display: block;}
    
}