body { font-family: 'Roboto', sans-serif; }
img { max-width: 100%; height: auto;}

header { padding: 20px 0px; overflow: hidden; background: #F5BD47; }
nav { float: right; margin: 50px 0px 0px 0px;  }
nav li {display: inline-block;}
nav a { text-decoration: none; color:#424956; margin: 0px 5px 0px 0px; text-transform: uppercase; font-weight: 400; padding: 5px 10px;}
nav a:hover { color: white; }

footer { padding:40px; background:#424956; }
.redes { text-align: center; }
.redes li { display: inline-block; }
.redes a { color:#F5BD47; text-decoration: none; font-size: 28px; margin: 0px 10px 0px 0px; }
.redes a:hover { color: #ccc; }

.contenedor { max-width: 1100px; margin: 0px auto; }
.presionado { color: white; }
.flecha { text-decoration:none; display:block; font-size:35px; color: #F5BD47; position:fixed; bottom: 40px; right: 60px;  }

/*HOME*/
.logo { float: left;}
.home { position: relative; text-align: left; }
.textos { position: absolute; top:200px; text-transform: uppercase; padding: 30px 0px 0px 80px;}
.textos h2 { font-size: 18px; color: white; padding: 10px; background: #424956; margin: 0px 0px 8px 0px; display: inline-block; font-weight: 300; }
.textos h1 { font-size: 18px; color:#424956; padding: 10px; background: #F5BD47; margin: 0px 0px 8px 0px; display: inline-block; font-weight: 400; }
.textos a { text-decoration: none; font-size: 14px; padding: 8px; color: white; background:#F5BD47;  }
.textos a:hover { background: #ccc;  }
.boton { margin-top: 15px; }

.muestras { padding: 50px; text-align: center; background: #ccc; }
.muestras h2 { font-size: 25px; font-weight: 400; color:#424956; margin: 0px 0px 30px 0px; text-transform: uppercase;  }

/*EQUIPO*/
.equipo { padding: 40px 10%; }
.equipo h3, .clientes h3, .servicios h3 { font-size: 25px; color:#F5BD47; text-transform: uppercase; text-align: center; margin-bottom: 40px; }
.team { column-count: 3;}
.datos { background: #F5BD47; padding: 20px; text-align: center; }
.datos h4 { margin-bottom: 5px; }
.datos a { text-decoration: none; font-size: 13px; color:#424956; }
.datos a:hover { color: white; }
.datos p { margin-top: 10px; color:#424956; }

/*CLIENTES*/
.clientes { background:url(../imagenes/bg-clientes.jpg) no-repeat scroll center/cover; padding: 50px 10%; text-align: center; }
.clientes li { display: inline-block; margin: 0px 70px 40px 0px; }
.clientes li:last-child { margin: 0px 0px 40px 0px; }

/*SERVICIOS*/
.servicios { padding: 50px 10%; background:#68707e;  }
.icono { color:#F5BD47; font-size: 60px; margin-bottom: 20px; }
.ofrecemos { column-count: 3; text-align: center; padding: 50px;   }
.ofrecemos h4 { text-transform: uppercase; font-size: 23px; color:#F5BD47; margin-bottom: 20px;  }
.ofrecemos li { color: white; font-weight: 300; font-size: 18px; margin-bottom: 5px; }

/*TRABAJOS*/
.trabajos { padding: 50px 8%; background: #ccc; }
.trabajos li { display: inline-block; margin: 0px 10px 0px 0px; }
.trabajos a:hover { -webkit-filter: opacity(0.5); /* 0.5 = 50% */ filter: opacity(0.5); } 
.empresa { padding: 20px; background:#F5BD47; text-align: center; margin-bottom: 20px;  }
.empresa h3 { color:#333; font-weight: 700; margin-bottom: 10px;  }
.empresa h4 { display: inline-block; background:#333; padding:10px; color:#F5BD47; text-transform: uppercase; margin-bottom:10px;  }
.empresa p { color: white; margin-bottom: 5px; }
span { color:#F5BD47;  }
.obra { padding: 50px 8%; background: #ccc; }
.obra img { margin: 0px 5px 5px 0px; }
.obra h3 { color:#333; font-weight: 700; margin-bottom: 10px;  }
.obra p { color: white; margin-bottom: 5px; }
.lugar { text-align: left; padding: 20px 25px 30px 0px;}
.lugar h3 { display:block; color: #ccc; padding: 10px 7px; background: black; font-weight: 300; }
.volver a { display: inline-block; text-decoration: none; padding: 10px; color:#F5BD47; background:#424956; font-size: 15px; font-weight: 700; margin-top: 15px;  }
.volver a:hover { color:#424956; background:#F5BD47;   }


/*CONTACTO*/
.contacto { padding: 50px 6%; background:#68707e; overflow: hidden; }
.mensaje { float: right; width: 45%; }
.info { float: right; width: 45%; }
.mensaje h3, .info h3 { font-size: 23px; color:#F5BD47; font-weight: 300; margin-bottom: 50px;  }
.info li { color:#F5BD47; font-size: 16px; margin-bottom: 15px; }
input, textarea { width: 100%; margin: 0px 0px 10px 0px; padding:10px; box-sizing: border-box; background:#e7e7e7  }
input { padding:10px; border: none; }
textarea { height: 150px; border: 1px solid #ccc; }
button { background:none; border: 2px solid #F5BD47; padding: 7px 14px; color: white; cursor: pointer; font-size: 12px; }

.respuesta { padding: 150px 10%; position: relative; text-align: center; background:#68707e; }
.frase { top: 70px; width: 100%; margin: 0 auto;  }
.frase h3 { font-size: 35px ; color:#F5BD47;  margin: 0px 0px 15px 0px;  }
.frase p { font-size: 20px; color:#ccc; font-weight: 300; }
.frase a { text-decoration: none; font-size: 15px; display: inline-block; padding: 8px 10px; color:#68707e; background:#ccc;  }
.frase a:hover { color: white; background:#F5BD47;  }




@media screen and (max-width:800px) {
	header { text-align: center; }
	.logo { float: none; }
	nav, .mensaje, .info { float: none; width: 100%; margin: 0px; }
	.mensaje { margin-bottom: 40px; }
	.mensaje h3, .info h3 { margin-bottom: 30px; }
	.info li { font-size: 15px; line-height:18px; }
	.textos h1, .textos h2 { font-size: 14px; }
	.textos a { font-size: 12px; }
	.boton { margin-top: 5px; }
	.team, .ofrecemos { column-count: 1; }
	.datos { margin-bottom: 20px; }
	.ofrecemos ul { margin-bottom: 30px; }
	.ofrecemos { padding: 20px 10%; }
	.trabajos { column-count: 2; }

} 

@media screen and (max-width: 450px) {
	.textos { top: 80px; padding: 0px 10%; }
	.textos h1, .textos h2 { font-size: 13px; line-height: 15px; }
	.textos a { font-size: 11px; }
	.muestras h2 { font-size: 18px; font-weight: 500; }
	.contacto { text-align: center; }
	.datos { padding:20px 5px; }
	.datos a { font-size: 12px; }
	.clientes { padding: 50px 10%; }
	.clientes li { margin: 0px 0px 50px 0px; padding: 0px 40px; }
	.servicios h3 { font-size: 20px; line-height: 23px; }
	.ofrecemos li { font-size: 16px; }
	.trabajos { column-count: 1; }
	.obra { text-align: center; }
	.lugar { padding: 20px 0px; text-align: center; }
	.lugar p { font-size: 15px; }
	.frase h3 { font-size: 25px; }
	
	
}