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

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

h1 
    {font-size: 0.8rem;
        padding-left: 2%;
        margin-top: 5%;
        color:#47bccb;
       text-align: left;
    line-height: 0;}
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: 2%;
        line-height: 15px;}



.cajavacia 
    {width: 100%; 
    height: 5px;
    background:#555;}

header
    { width: 98%; 
    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(239, 239, 239, 0.88);
    box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.31);}

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

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: 505px;
     background: rgba(255, 255, 255, 0.39);
     padding-top: 15px;
     font-family: sans-serif;}

article 
    {width: 100%;
     height: 505px;
     margin-top: 1%;}


.logogrupal
    { width: 150px;
      margin-left: 39%;
        margin-top: 3%;}
       


 .mapa{ margin: 5% 5% 5% 6% }



/* mapa....................................................................... */

main ul li { text-decoration: none;}

.col1{ width: 12%;
      margin-left: 3.2%;
        margin-top: 1%;
        float: left;
      font-size: 0.8rem;
    line-height: 20px;
    
}


.titulomapa  { width: 50%;
      margin-left: 36%;
        margin-top: 7%;
     
      font-size: 1.5rem;
}




.titular
{ width: 87%;
    height: 30px;
    margin-left: 6%;
    border-bottom: #ccc solid 3px;}


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


/* responsive */

@media  screen and (min-width: 331px) and ( max-width: 768px) { 
   
    header {padding: 0;
            width: 100%;
            height: 120px;}
    
    nav{ height: 100px;}
    
    li 
    {width: 15%; 
    height: 28px;
   
    float: left;
    margin:1% 6% 0 12% ;
    font-family:"Arial" ;
    font-size: 0.8rem;
    padding-top: 4px;
    text-align: center;
    
    color: #000;
    line-height: 25px;
    list-style: none;}

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


    section{ 
        width: 98%; 
        height: 950px;
        padding: 1%;
        margin: 0; }
    
article 
    {width: 100%;
     height: 505px;
     margin-top: 1%;}
    
    .logogrupal
    { margin: 3% 0 0 40%;}
    
   footer{ width: 100%;
        height: 50px;
        background: #fff;
        font-family:  sans-serif;
        font-size: 0.60rem;
        text-align: center;
        padding-top: 20px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);}

  
}

 @media screen and (min-width: 320px) and ( max-width: 330px){ 
    
     header {padding: 0;
            width: 100%;
            height: 120px;}
    
    nav{ height: 260px;}
    
    li { width:40%;
        margin:10px 6% 0 30%;}
      
 h2 
    {font-size: 0.8rem;
        padding-left: 2%;
        margin: 0;
        color:#47bccb;
    text-align: left;
    line-height: 1;}

   
    section{ 
        width: 98%; 
        height: 950px;
        padding: 3%;
        margin: 0; }
    
article 
    {width: 100%;
     height: 505px;
     margin-top: 3%;}
    
    .logogrupal
    { margin: 7% 0 0 28%;}
    
   

    footer{ display: none; }

}