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.2rem; text-align: center;}
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: left; color: #279989;margin-bottom: 1rem; 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;}
a{text-decoration: none;}

/*PANEL DE MENÚ LATERAL*/
aside{width: 20%; background-color: white; float: left; position: relative; box-shadow: 3px 3px 3px black; padding: 1rem;}
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;}
footer h5{text-align: center;}
#animacion{margin:0 auto; width:60%;}

/*DOCUMENTO PROYECTOS*/

#arq-int{width: 100%; overflow: hidden;}
.proyecto-arq{width: 50%; float: left; padding: 2rem;}
.proyecto-arq p{color: #666; font-weight: bold;}
#bloque-proceso{overflow: hidden;}

/*DOCUMENTO PROYECTO RECAMARA*/
#bloque-antes{width: 100%; overflow: hidden;}
.foto-antes,.foto-proceso,.foto-despues{width: 50%; float: left; padding: 2rem;}

.foto-sola{width: 65%; margin: 1rem auto;}

/*DOCUMENTO PROYECTO JARDÍN*/
.foto-sola-vertical{width: 40%; margin: 0 auto;}

/*REMODELACIONES*/
.remodelaciones{overflow: hidden;}
.remo{width: 33%; padding: .5rem; text-align: center; float: left;}
.imagen-remo{width: 100%; display: block; padding: 1rem;}
.titulo-remo{width: 100%;}
.titulo-remo a{color: gray; display: block;}
.titulo-remo h2{text-align: center;}
.remo-fotos{width: 100%;  overflow: hidden;}
.tercio{width: 33%; float: left; padding: .5rem;}
.duo{width: 50%; float: left; padding: .5rem;}
.subtitulo{text-align: left; color: gray; font-weight: bolder;}
.descripcion p{text-align: left; color: #2F2A2A;}
.btn-regreso{width: 100%; margin: 0 auto; padding: .3rem; background-color: #666; color: white; font-weight: bolder;}

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


@media screen and (max-width:930px)
{
    body{padding: 0;}
    .boton{width:100%;}
    .proyecto-arq{padding: 1rem;}
    .tercio{width: 95%; float: none; margin: 0 auto;}
    .duo{width: 95%; float: none; margin: 0 auto;}
    .remodelaciones{display: block; width: 100%;}
    .remo{width: 85%; margin: 0 auto;}
    
}


@media screen and (max-width:768px)
{
    aside{display: none;}
    #menu-pie,#menu-redes{display: block;}
    header,section,footer{float: none; width:90%; margin: 0 auto;}
    .foto-antes,.foto-proceso,.foto-despues{float: none; width: 90%; margin: 0 auto; padding: 1rem;}
    .foto-sola{width: 85%;}
    /*PORTADA PROYECTOS*/
    

    

}

@media screen and (max-width:525px)
{
    header,section,footer{width: 90%; margin: 0 auto;}
    .menu-alterno{width: 50%;}
     .proyecto-arq{float: none; width: 90%; margin: 0 auto; padding: .5rem 0;}
    section{padding: .5rem;}


}