html{box-sizing:border-box;}
*,*:after,*:before{box-sizing:inherit;}
div{box-sizing: border-box; }

body{font-family: sans-serif; background-image: linear-gradient(45deg,#CEE007,#339E35);
background: -webkit-linear-gradient(45deg,#CEE007,#339E35);
background: -moz-linear-gradient(45deg,#CEE007,#339E35);
background: -o-linear-gradient(45deg,#CEE007,#339E35);
 padding: 1rem;}

h1{font-size:2rem; text-align: center; color: #279989; font-weight: bolder;}
h2{font-size: 1.5rem; text-align: center; font-weight: bolder; color: grey;}
h3{text-align: center;clear: both; font-size: 1rem; margin-top:2em;}
h4{font-size:.9rem; text-align: center; }
h5{font-size:1.2rem; text-align: center; color: #279989; padding-top: 20px; clear: both;}
p{font-size: 1rem; margin-left: 1rem; margin-right: 1rem; text-align: center; line-height: 1.5rem;}
span{font-weight: bolder; font-size: 1.2rem;}
hr{width: 50%; margin: 0 auto; border: 2px dotted grey;}

/*PANEL DE MENÚ LATERAL*/
aside{width: 20%; background-color: white; float: left; position: relative; box-shadow: 3px 3px 3px black; padding: 1rem; position: fixed;}
aside a {text-decoration: none; color: white;}
aside a:visited{color: white;}
#panel{width:100%; margin: 0 auto; clear: both;}
.boton{color: white; width: 85%; margin: 10px auto; padding: .7rem; background-color: #339E35; border-radius:10px; box-shadow:3px 3px 3px black;}
.boton:hover{background-color:#cee007;}
.redes{width: 40%; margin: 10px auto;}


header{ width: 75%; float: right; padding-top: 1rem; padding-bottom: 1rem; background-color: white;}
section{width: 75%; float: right; background-color: white; overflow: hidden; padding: 1rem;}

/*MENÚ ALTERNO PARA REDIMENCIONAR*/
#menu-pie{width: 95%; overflow: hidden; background-color: white; margin: 2rem auto;}
#menu-pie a{text-decoration: none; color: white;}
.menu-alterno{width: 25%; float: left; background-color: #279989; color:white; border-radius: 8px; padding: .4rem 0 .4rem 0; border:2px solid white;}
.menu-alterno p{font-size: .8rem;}
#menu-redes{width: 95%; overflow: hidden; margin: 0 auto;}
#face,#twitter,#link{width: 33%; text-align: center; float: left;}
#face img,#twitter img,#link img{width: 40%;}
#menu-redes,#menu-pie{display: none;}

footer{width: 75%; float: right; background-color: white; border: 1px solid white;}
#animacion{margin:0 auto; width:60%;}

/*DOCUMENTO DE CAPACITACION CONTINUA*/

#trayectoria{width: 100%; overflow: hidden; padding: 1rem; }
.espacio-boton-trayectoria{width: 33%; float: left;}
#boton-academico,#boton-laboral,#boton-asesoria{width: 60%; margin: 0 auto; min-height: 100px; position: relative; text-align: center; font-weight: bolder;}
#boton-academico{background-color: #BAC405; box-shadow:3px 3px 5px gray;}
#boton-laboral{background-color: #339E35; box-shadow:3px 3px 5px gray;}
#boton-asesoria{background-color: #279989; box-shadow:3px 3px 5px gray;}
.espacio-boton-trayectoria h4{color: white; position: absolute; top:40%; width: 100%;}

/*DOCUMENTO DE ASESORIA*/

#foto-arq-bethy{width: 20%; margin: 0 auto;}

/*DOCUMENTO TRAYECTORIA ACADEMICA*/
.titulos{width: 50%; padding: 2rem; float: left;}
.cubo{width: 33%; padding: 1rem; float: left;}
.area{width: 100%; overflow: hidden;}

.imagen-sola{width: 60%; margin: 0 auto;}

/*TRAYECTORIA LABORAL*/
#tabla-resumen{width: 100%; padding:1rem;}
.linea{width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;  border: 1px solid lightslategray; padding: .5rem 0;}
.concepto{width: 33%; float: left;}
#tabla-inmo{width: 100%;}
.concepto-inmo{width: 25%; float: left;}




/*******************************************************************************************************************************/


@media screen and (max-width:930px)
{
    body{padding: 0;}
    .boton{width:100%;}
    .cubo{width: 50%;}
    .titulos{padding: 1rem;}
    .concepto p{font-size: .7rem;}
    .concepto-inmo p{font-size: .7rem;}
    
}


@media screen and (max-width:768px)
{
    aside{display: none;}
    #menu-pie,#menu-redes{display: block;}
    header,section,footer{float: none; width:85%; margin: 0 auto;}
    .bloque{width: 90%; float: none; margin: 0 auto;}
    #boton-academico,#boton-laboral,#boton-asesoria{width: 80%;}
    .imagen-sola{width: 80%;}
    .concepto p{font-size: .5rem;}
    .concepto-inmo p{font-size: .5rem;}
    

}

@media screen and (max-width:525px)
{
    header,section,footer{width: 90%; margin: 0 auto;}
    .menu-alterno{width: 50%;}
    #boton-academico,#boton-laboral,#boton-asesoria{width: 90%;}
    #foto-arq-bethy{width: 30%; margin: 0 auto;}
    #trayectoria{padding:0;}
    
    #boton-academico h4,#boton-laboral h4,#boton-asesoria h4{font-size: .7rem;}

}