body
{ background-image: url(img/fondo6.png);
   font-size: 16px;
}

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

h2{
    font-size: 0.8rem;
    padding-left: 2%;
    margin: 0;
    color:#47bccb;
    text-align: left;
    line-height: 0;
}

p { font-size: 0.75rem;
    padding-left: 6%;
    line-height: 15px;
}

a { color: #000;
}

.col1{ padding: 5% 0 0 5%;
    text-align: left;
}

.col2{ padding: 5% 5% 0 6%;
    text-align: left;
}

.col3 {padding: 4% 0 0 3%;
     padding-left: 9%;
}

header{  width: 100%; 
    height: 150px;
    margin: 0 auto;
    background:#fff; 
    padding-left: 18px;
    padding-top: 29px;
    box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);
}

nav{width: 100%;
    height: 50px;
    background:rgba(90, 228, 222, 0.82);
 }

a li {  width: 10%; 
    height: 28px;
    float: left;
    margin:1% 1% 0 4.5% ;
    font-family:"Arial" ;
    font-size: 0.8rem;
    padding-top: 4px;
    text-align: center;
    color: #000;
    line-height: 25px;
    list-style: none;
    border-radius: 2px;
    }

article li{font-size: 0.75rem;
}
    
.materia{width: 50%;
    align-content: center;
}

main{ width: 100%; 
    height: 505px;
    box-shadow: 20px;
    box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);
}

section{width: 100%; 
        height: 500px;
        background: rgba(255, 255, 255, 0.84);
        font-family: sans-serif;
        }

article {width: 20%;
        height: 400px;
        margin: 0 auto;
        float: left;
}

.logogrupal{ width: 16%;
        padding-left: 4%;
        padding-top: 3%;
     }

footer{ width: 95%;
        height: 50px;
        background: #fff;
        text-align: center;
        font-family:  sans-serif;
        font-size: 0.65rem;        
        padding: 20px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);
}


/* responsive---------------------------------------------------------- */


@media screen and (max-width: 768px) { 
    
header {width: 100%;
        height: 20%;
}
    
nav {width: 100%;
    height: 35px;
    font-size: 0.6rem;
}
    
li { width:10%;
    margin: 0;
 }
   
article { width: 100%;
        height:100px;
        margin: 0;
       }
 
section { 
     width: 100%; 
     height: 450px;
     margin: 0;
 }
    
.col1 { width:20%;
       height: 100%;
        margin:0 auto;
}
    
.col2 { width:20%;
        height: 290px;
        margin:0 auto;
 }

.col3 { width:20%;
        height: 160px;
        margin: 0 auto;}
  
.logogrupal  { width: 12%;
               margin: auto;
               margin-bottom: 5%;
    }
    
footer{display: none;    
} 
}