body
{ background-image: url(img/gplaypattern_@2X.png);
font-size: 16px;}

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

h1 
    {font-size: 1.5rem;
     text-align: center;
     margin-top: 20px;
    color:#dedede;}
h2 
    {font-size: 0.75rem;}

.cajavacia 
    {width: 98%; 
    height: 6px;}

nav a li:hover { color: #fff;}


header
    { width: 98%; 
    height: 120px;
    margin: 0 auto;
    background:#bcbab9; 
    padding-left: 18px;
    padding-top: 29px;}

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

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

main
    {width: 100%; 
     height: 505px;}

section
    {width: 100%; 
     height: 450px;
     background: rgba(23, 23, 23, 0.74);
     padding-top: 55px;
     font-family: sans-serif;}

article 
    { width: 60%;
    height: 320px;
    background: rgba(226, 219, 219, 0.18);
    margin: 0 auto;
    border-radius: 10px;}

.col1 
    {width: 35%; 
     height: 290px;
     margin: 3% 1% 2% 2%;
     float: left;}

.col2
    { width: 29%; 
    height: 287px;
    background:#bababa; 
    margin: 3% 0 1% 1%;
    float: left;}


.titular 
    { width: 94%;
    height: 40px;
    background: #5dad9c;
    padding: 1% 0 0 6%;}


.materias { width: 100%;
            height: 290px;
            padding: 1% 0 0 5%;
            font-family: sans-serif;
            font-size: 0.63rem;
            line-height: 13px;}

.col3 { width: 28%; 
        height: 287px;
        background:#bababa; 
        margin: 3% 0% 1% 2%;
        float: left;}
  
.fotoperfil 
            { width: 100%; }

.logogrupal
    { width: 130px;
      margin: 2% 0 0 9%;
      padding: 0;
       float:left;}


svg{ width:130px;
         margin-left: 20%;
        float:left;}

footer{ width: 100%;
        height: 50px;
        background: #ccc;
        font-family:  sans-serif;
        font-size: 0.65rem;
        text-align: center;
        padding-top: 20px;}





/* responsive */

@media  screen and (min-width: 322px) and ( max-width: 768px) { 
   
    header {padding: 0;
            width: 100%;
            height: 100px;}
    
    nav{ height: 78px;}
    
    li { width:13%;
        margin:3% 1% 0 2.5%}
    
    .logogrupal
    { width: 120px;
      margin: 2% 0 0 3%;
      padding: 0;
       float:left;}
    
    
 .logogrupal
    { 
      margin: 3% 0 0 40%;}
    
   .titular {width: 94%;
       
              }


    
    
    svg{ display:none; }
    
    h1 
    {font-size: 1.3rem;}
    
 article{
        width: 97%;
        height:480px;
        padding-left: 2%;
        margin: 0;
        padding-top: 2%;}

   
   
    section{ 
        width: 98%; 
        height: 950px;
        padding: 1%;
        margin: 0;
         }
    
    .col1 { width:47%;
           height: 100%;
           padding:0;
           margin: 0 0 0 26px;
        
           }
    
    .col2 { width:40%;
            height: 302px;
            margin:0 0 0 3%;
            
          }
    .col3 { width:40%;
            height: 150px;
            margin: 2% 0 0 3%;}
  
    .fotoperfil {width: 100%;
                 
                 }
   
    
   .materias {width: 90%;
              padding: 0 0 0 3%;}
    
    footer{ display: none; }
    

}

@media screen  and ( max-width: 320px){ 
    
   header {padding: 0;
            width: 100%;
            height: 100px;}
    
    nav{ height: 257px}
    
    li { width:40%;
        margin:10px 6% 0 30%;
      
         }
    h1 
    {font-size: 1.3rem;}
    
 article{
        width: 98%;
        height:385px;
        padding-left: 0;
        margin: 0;
        padding-top: 2%;}

   
   
    section{ 
        width: 98%; 
        height: 957px;
        padding: 1%;
        margin: 0;
         }
    
    .col1 { width:90%;
           height: 100%;
           padding-left:0%;
           margin-left: 5%;
           margin-top: 3%;
        
           }
    
    .col2 { width:96%;
            height: 290px;
            margin:0 0 0 3%;
            
          }
    .col3 { width:96%;
            height: 160px;
            margin: 5% 0 0 3%;}
  
    .fotoperfil {width: 100%;
                 padding-left:0;
                 margin: 0 ;
                 
                 }
    .logogrupal
    { 
      margin: 4% 0 0 28%;}
    
   .titular {width: 94%;
       
              }
    
   .materias {width: 90%;
              padding: 0 0 0 3%;}
    
    footer{ display: none; }
    svg{ display:none; }
}