body { font-family: 'Lato', sans-serif; }
img { max-width: 100%; height:auto; }
header { padding: 50px 60px; overflow: hidden; }
nav { float: right; margin: 20px 0px 0px 0px; }
nav li { display: inline-block; }
nav a { text-decoration: none; color: #a7acae; margin: 0px 25px 0px 0px; font-size: 17px; padding: 0px 0px 7px 0px; font-weight: 400; letter-spacing: 2px; }
nav a:hover { color:#c0ae9c;  }
footer { padding: 40px 60px; }


.contenedor { max-width:1200px; margin: 0px auto; }
.presionado { border-bottom: solid 3px #c0ae9c; }
.flecha { text-decoration:none; display:block; width: 30px; height: 30px; padding: 15px; font-size:25px; color:white; background:#BCAC9C; text-align: center; position:fixed; bottom: 40px; right: 60px;  }


/*FOOTER*/
.info { overflow: hidden; }
.contacto { float: left; width: 35%; color: #a7acae; margin-bottom: 20px; }
.contacto li { display: inline-block; letter-spacing: 1px; padding-top: 4px; }
.social { float: right; width: 65%; }
.social li { display: inline-block; }
.social a {text-decoration: none; color: #a7acae; font-size: 25px; margin: 0px 10px 0px 0px; }
.social a:hover { color: #c0ae9c; }

/*ENCABEZADOS*/
.encabezado { padding: 40px 0px; }
.encabezado h4 { color:#a7acae; font-size: 15px; text-transform: uppercase; margin-bottom: 3px; font-weight: 700;  }
.encabezado h3 { color:#a7acae; font-size: 25px; text-transform: uppercase; font-weight: 700; }
.encabezado hr { width: 50px; margin: 10px 0px 0px 0px; background:#c0ae9c; height:4px; color: #c0ae9c; border:none; }

/*ESTUDIO*/
.estudio, .servicios { padding: 0px 10% 40px 10%; overflow: hidden; }
.arquitectos { float: left; width: 50%;  }
.presentacion { float: right; width:50%; background-color:#f4f4f4;  }
.presentacion h2 { text-align: center; font-size: 20px; color:#c0ae9c; padding: 40px 0px 0px 0px;  }
.presentacion p { padding: 30px 40px; color:#a7acae; font-size: 15px; line-height: 20px; text-align: center;  }
span { font-size: 18px; line-height: 50px;}
.equipo { padding: 20px 10% 80px 10%; column-count: 3; -moz-column-count:3; -webkit-column-count:3; text-align: center;  }
.equipo h3 { font-size: 17px; color: #898989; margin-bottom: 10px;  }
.equipo a { text-decoration: none; color: #a7acae; font-size: 17px; }
.equipo a:hover { color: #c0ae9c; }
.equipo p { color: #a7acae; margin: 5px 0px; font-size: 14px; }
.primero, .segundo { border-right: solid 3px #c0ae9c; }
.hacemos { column-count: 3; -moz-column-count:3; -webkit-column-count:3; }
.hacemos h2 { text-transform: uppercase; color:#c0ae9c; text-align: center; margin-bottom: 30px;  }
.viviendas, .reciclajes, .comercial { text-align: center; padding: 60px 30px; background: url(../imagenes/absurdidad.png);  }
.viviendas a:hover, .reciclajes a:hover, .comercial a:hover { -webkit-filter: opacity(0.5); -moz-filter: opacity(0.5); /* 0.5 = 50% */ filter: opacity(0.5); }

/*OBRAS*/
.obras { column-count: 3; -moz-column-count:3; -webkit-column-count:3; }
.obras img { margin-bottom: 10px;   }
.menu-comercial, .menu-viviendas, .menu-recicla { text-align: center; position: relative; /*filter: opacity(0.7);-webkit-filter: opacity (0.7);*/ }
.menu-comercial a:hover, .menu-viviendas a:hover, .menu-recicla a:hover { filter: opacity(0.7);-webkit-filter: opacity (0.7); }
.item { position: absolute; top:200px; width: 100%; }
.item h2 { text-transform: uppercase; color: white; font-size: 18px; line-height: 23px;  }

.galerias { padding: 0px 10% 40px 10%; }
.galerias h3 { color:#a7acae;  margin-top: 10px; }
.galerias li { display: inline-block; margin: 0px 10px 30px 0px; }
.galerias a:hover { filter: opacity(0.6);-webkit-filter: opacity (0.6); }
/*.estudio img { margin: 5px; }*/
.estudio a:hover { filter: opacity(0.6);-webkit-filter: opacity (0.6); }
.volver { padding: 0px 10% 40px 10%; }
.volver a { margin: 0px 0px 0px 5px; text-decoration: none; color:#c0ae9c; font-size: 16px; display: inline-block; padding:10px; background:none; border: 2px solid #c0ae9c;   }
.volver a:hover { color: white; background: #c0ae9c; }


/*CONTACTO*/
.datos { padding: 50px; text-align: center; column-count: 3; -moz-column-count:3; -webkit-column-count:3;  }
.datos h4 { text-transform: uppercase; color:#c0ae9c; margin-bottom: 10px;  }
.datos p { color: #a7acae;  }
.datos a { color: #a7acae; text-decoration: none; display: block; margin-bottom: 5px; }
.datos a:hover { color:#333;  }
.encontranos { padding: 30px 10%; overflow: hidden; }
.formulario { float: left; width: 45%;}
.mapa { float: right; width: 45%; }
input, textarea { width: 100%; margin: 0px 0px 10px 0px; padding:10px; box-sizing: border-box; background:none; border: 1px solid #c0ae9c ;  }
input { padding:10px;  }
textarea { height: 150px; border: 1px solid #c0ae9c; }
button { background:#c0ae9c; border: none; padding: 7px 14px; color: white; cursor: pointer; font-size: 12px; }

.respuesta { padding: 100px 10%; position: relative; text-align: center; background: url(../imagenes/absurdidad.png); }
.mensaje { top: 70px; width: 100%; margin: 0 auto;  }
.mensaje h3 { font-size: 35px ; color: #c0ae9c;  margin: 0px 0px 15px 0px;  }
.mensaje p { font-size: 20px; color:#ccc; font-weight: 300; }
.mensaje a { text-decoration: none; font-size: 15px; display: inline-block; padding: 8px 10px; color:#c0ae9c; background:none; border: 2px solid #c0ae9c;   }
.mensaje a:hover { color: white; background:#c0ae9c;  }


@media screen and (max-width: 800px){
	.contacto, .social, .arquitectos, .presentacion, .formulario, .mapa { float: none; width: 100%;  }
	.primero, .segundo { border: none; margin-bottom: 30px; }
	.equipo { column-count: 1; -moz-column-count:1; -webkit-column-count:1; padding: 20px 10% 40px 10%;  }
	.equipo a { color: #c0ae9c;  }
	.equipo a:hover { color:#898989;  }
	.hacemos, .obras, .datos  { column-count: 1; -moz-column-count:1; -webkit-column-count:1; }
	.viviendas, .reciclajes, .comercial { margin-bottom: 20px; padding: 40px 30px; }
	.datos h4 { margin-top: 20px; }
	.formulario { margin-bottom: 30px; }
	nav { float: none; }
	nav li { display: block;}
	nav a { display: block; padding: 0px 0px 7px 0px; margin-bottom: 10px;}
	.encabezado { padding: 20px 0px 40px 0px; }
	
}


@media screen and (max-width: 450px){
	header { padding: 50px; }
	footer { padding: 40px; }
	.info { padding: 0px; text-align: center; }
	.contacto p { letter-spacing: none; font-size: 14px; padding-bottom: 20px; }
	.presentacion p { font-size: 13px; }
	span { font-size: 15px; font-weight: 700; line-height: 0px; }
	.datos { padding: 20px 10%; }
	.item { top: 180px; }
	.volver { text-align: center; }
	.flecha { position: static; margin: 0px auto; }
	.mensaje h3 { font-size: 25px; }
}