@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Asap:400,400italic);

* img{max-width: 100%;
width: auto;}

.pagina {
    max-width: 50em;
    margin: auto;
    font-family: 'Asap', sans-serif;
    background-image: url(imagenes/fondo.jpg);
    background-size: cover;
}

main{ 
    background-color: rgba(255, 255, 255, 0.37);
    color: black;
    height: auto;
    clear: both;
    overflow: auto;
}

header{padding-top: 1em;}

#dgpc {float: right;}

header nav ul li{
    display: inline-block;
}

header nav ul li a {
    display: block;
    background-color: rgba(237, 27, 82, 0.8);
    color: beige;
    text-decoration: none;
    padding: 1em;
    text-align: center;
}

header nav ul li a:hover{
    background-color: beige;
    color: rgb(237, 27, 82);
    
}


.articulo{
    line-height: 1.5; 
    font-size: 1em
    }

.titulocolor{
    color:rgb(166, 0, 57);}
 
article {
    margin-left: 1.85em;
}

section {
    float: left;
    padding-left: 1.85em}

section a {
    text-decoration: none;
    max-width: 100%;
}

section a h3:hover{
    background-color: rgb(166, 0, 57);
    color: rgb(242, 237, 120);
}

section h3{
    text-align: center;
    background-color: rgb(242, 237, 120);
    color: rgb(166, 0, 57);
    padding: 1em;
}

.recicla{
    padding: 1em 10.8em;
    height: auto;    
}

.recicla img{
    max-width: 100%;}

.recicla a
{text-decoration: none;
    }

.recicla h3{
    text-align: center;
    background-color: rgb(28, 167, 167);
    color: rgb(237, 231, 89);
    padding: 1em;
}

.recicla h3:hover{
    text-align: center;
    background-color: rgb(237, 231, 89);
    color: rgb(28, 167, 167);
    padding: 1em;
}


footer {
    padding: 1em 1.85em;
    background-color: rgba(255, 255, 255, 0.6);
    color: rgb(237, 27, 82);
    clear: both;
    overflow: auto;
}




@media screen and (max-width: 500px){
    
    #dgpc {
    width: 30%;}
    
    #logo {
    width: 45%;}
    
    article, section{ margin-right: 1.7em }
    
    .pagina {
    margin: 1em;
    }
    
    .recicla{
    padding: 0em;
    width: 100%;}
}
 
@media screen and (max-width: 835px){
    
    .pagina {
    margin: 1em;
    }
        
    header nav ul{
    padding: 0;
    }
    
    header nav ul li{
    display: block}  
   
}