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



body {
margin: 0%;
font-size: 16px;
font-family: 'Quicksand', sans-serif; text-decoration:none;
font-weight: 300;
background-image: url(imagenes/background1.jpg);
background-size: 1020px 772px;
background-color: #000;
}
    
header {width: 460px;
        height: 220px;
        margin: 20px 20px 20px 0;
       background-image: url(imagenes/header.png);
        float: left;
       
}

h1 {font-family: 'Quicksand';
    text-align: center;
    padding-top: 5px;
    font-size: 1.3em;
    
}

h2 {font-size: 0.9em;
    padding-left: 10px;
    padding-top: 10px;
}

h3{ font-family: 'Quicksand';
    text-align: center;
    padding-top: 5px;
    font-size: 1.3em;
    color: #311f42;
    text-decoration: none;
    
}

.textosocultos {
    font-family: 'Quicksand';
    text-align: center;
                color: #311f42;
               line-height: 1.7em;
    
}


section article {
               
                float: left;
                margin: 20px 20px 20px 0;
}
    
#agenda { background-image: url(imagenes/boton.jpg);
        width: 220px;
        height: 220px;
        position: relative;
}

#agendatexto {
    font-family: 'Quicksand';
    position: absolute;
    top: 90px;
    left: 56px;
    color: #fff;
    font-size: 1.5em;
     cursor: pointer;
}

#fecha {background-image: url(imagenes/fecha.png);
        width: 220px;
        height: 220px;
    
}

#noticias {border: solid;
        color: #fff;
        width: 214px;
        height: 458px;
         margin-top: 0;
    
}

.noticiastexto {font-family: 'Quicksand'; 
                font-size: 0.8em;
                padding-left: 10px;
               padding-right: 10px;
}




#academico {background-image: url(imagenes/boton.jpg);
            width: 220px;
            height: 220px;
         margin-top: 0;
         position: relative;
         display: inline-block;
       
    
}

#academicotexto {
    font-family: 'Quicksand';
    position: absolute;
    top: 90px;
    left: 37px;
    color: #fff;
    font-size: 1.5em;
     cursor: pointer;
}

#vacio1 {width: 220px;
        height: 220px;
         margin-top: 0;
}



#tps {background-image: url(imagenes/boton.jpg);
        width: 220px;
        height: 220px;
        margin-top: 0;
        position: relative;
      
        display: inline-block;
      
}

#tapadotps {width: 220px;
       height: 0px;
       background-image: url(imagenes/tps_2.png);
       position: absolute;
       margin: auto;
       display: inline-block;
     cursor: pointer;
}

#tapadoacademico {width: 220px;
       height: 0px;
       background-image: url(imagenes/ACADEMICO_2.png);
       position: absolute;
       margin: auto;
       display: inline-block;
}

#tptexto {
    font-family: 'Quicksand';
    position: absolute;
    top: 90px;
    left: 86px;
    color: #fff;
    font-size: 1.5em;
     cursor: pointer;
    
}
#slider {
         width: 220px;
         height: 220px;
         margin-top: 0;
}

#fotos {background-image: url(imagenes/boton_fotos.png);
         width: 220px;
         height: 220px;
         margin-top: 0;
         position: relative;
}

#fotostexto {
    font-family: 'Quicksand';
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 0.9em;
}

#clases {background-image: url(imagenes/boton.jpg);
         width: 220px;
         height: 220px;
        margin-top: 0;
         position: relative;
       
    
}

#clasestexto {
    font-family: 'Quicksand';
    position: absolute;
    top: 90px;
    left: 55px;
    color: #fff;
    font-size: 1.5em;
      cursor: pointer;
}

footer{width: 940px;
margin-top: 20px;
    background-color: #311f42;
    float: left;
    
}

.footer2 {float: left;
       
        margin-right: 20px;
    
}

.footer1 {width: 70px;
        float: left;
        margin-left: 10px;
}


.footertexto {font-size: 0.6em;
            color: #66ffa7;
            text-align: center;
            padding: 10px 70px 0px 70px;
    
}

.sociales{display: block;
    opacity: 0.3;
    margin-top: 20px;
    margin-left: auto;
        margin-right: auto;
}

.sociales:hover {display: block;
    opacity: 1;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

#footercentro { width: 330px;
    margin-left: auto;
                margin-right: auto;
                display: block;
}

@media screen and (max-width: 768px){
    
     header {background-image: url(imagenes/header_tablet.png);
        }
    
#fecha{display: none;}
#slider {display: none;}
    
#vacio1 {display: none;}
    
    
    
    
}


@media screen and (max-width: 320px){
    
.pagina{max-width: 960px;
        margin: 0 auto;
        }

        header {max-width: 100%;
                background-image: url(imagenes/header_mobile.png);
        }

#slider {display: none;}
    
#vacio1 {display: none;}
    
#fecha{display: none;}
    
#noticias{ display: none;}

    

}