@charset "utf-8";
@import "reset.css";

body { margin: 0 auto; font-family: 'Lato', sans-serif; font-size: 14px; color: #696969; -webkit-font-smoothing: antialiased; }

/* links  */ 

a { color: black; -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
a:hover { color: red; -webkit-transition: all 0.2s ease; }

.link25 { display: inline-block; background-color: #EBEBEB; color: #616161; padding: 10px; width: 135px; letter-spacing: 1px; margin: 20px 0; font-weight: 900; }
.link25:hover { background-color: red; color: white; }
.link_red { color: red; } .link_red:hover { color: black; }
.link2 { color: #696969; }

/* texto y colores  */ 

h1 { font-size: 38px; font-weight: 900; margin-bottom: 8px; }
h2 { font-size: 24px; }
.big { font-size: 25px; font-weight: 300; color: #5A5A5A; padding: 20px 30px; }
strong { font-weight: 900; }

.clr_red { color: red; }
.clr_white { color: white; }
.clr_blue { color: #202242; }
.bg_light { background-color: #FBF8F1; }
.bg_gray { background-color: #F9F9F9; }

/* flex  */ 

.flex { -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content:space-between; } 
.flex_center { width: 100%; height: 100%; -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: center; } 

/* gral  */ 

.goUp { position: fixed; z-index: 300; bottom: 58px; right: 58px; display: none; cursor: pointer; }
.padding { padding: 80px 0; }
.padding2 { padding: 40px 0; }
.center { text-align: center; }
.ancho { display: inline-block; width: 100%; }
.border {  }

.main { position: absolute; width: 100%; }
.section { float: left; width: 100%; }
.cont { margin: 0 auto; width: 1170px; display: table; }
#header { padding: 30px 0; background-color: white;  }
.logo { float: left; width: 20%; margin-top: -15px; }
.menu { position: fixed; color: red; top: 28px; right: -50px; display: none;  }
.social { float: right; width: 100%; text-align: right; }
.social li { display: inline-block; margin-left: 10px; }

.nav { float: right; margin-top: 14px; }
.nav li { display: inline-block; margin-left: 40px; color: red; font-weight: 700; font-size: 16px; }
.nav li a { color: #202242; font-weight: 400; }
.nav li a:hover { color: red; }

.slick { height: 100%; width: 100%; }
.slick div { width: 100%; height: 100%; position: relative; }
.slick div p { position: absolute; display: block; left: 0; color: white; width: 100%; text-align: center; top: 100px; z-index: 3000; }
.titulo1 { text-transform: uppercase; font-weight: 300; font-size: 24px; background-color: rgba(0,0,0,0.45); padding: 10px 50px; display: inline-block; }
.titulo2 { text-transform: uppercase; font-weight: 900; font-size: 62px; background-color: rgba(74,74,74,0.40); padding: 15px 80px; display: inline-block; }
.titulo3 { text-transform: uppercase; font-weight: 300; width: auto; font-style: normal; font-size: 32px; background-color: rgba(255,0,0,0.50); padding: 10px 70px; display: inline-block; }
.slick div img { width: 100%; }

/* nuestras obras  */ 

#obras { height: 480px; }
#obras img { height: 100%; }
.item { display: inline-block; width: 250px; margin: 0 50px; margin-top: 30px; vertical-align: top; }
.item_img { float: left; width: 100%; height: 250px; overflow: hidden; border-radius: 50%; margin-bottom: 30px; }
.item_img img { width: 100%; }
.item p {  width: 100%; height: 100px; }
.item h1 { font-size: 30px; margin: 0; }
.item hr { display: inline-block; border-bottom: 3px solid #8d8d99; width: 70px; margin: 20px 0; }

#portada_propiedades { background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; height: 45vw; color: white; font-size: 30px; height: 480px; font-family: 'Raleway', sans-serif;  }
#portada_propiedades h1 { font-family: 'Roboto Slab', serif; font-size: 46px; }
.bajada { float: left; width: 100%; background-color: #B5B5B5; color: red; font-size: 32px; text-align: center; padding: 10px; text-transform: uppercase; }

.item2 { display: inline-block; vertical-align: top; width: 50%; margin-bottom: 50px; }
.item2 hr { display: inline-block; border-bottom: 2px solid #D8D8D8; width: 55px; margin: 20px 0;  }
.item2 p { line-height: 30px;  }

.img { float: left; width: 25%; height: 200px; overflow: hidden; border: 2px solid #f9f9f9; }
.img img { height: 100%; }

#obras_destacadas h2 { margin-bottom: 50px; }

/* nosotros  */ 

#portada { color: #D9D9D9; font-size: 35px; font-weight: 300; background-image: url('imgs/bg_nosotros.jpg'); background-repeat: no-repeat; background-size: auto 100%; background-position: center center; padding: 90px 0; height: 480px; }
#portada h1 { font-size: 53px; margin: 0; }

/* contacto  */ 

#contacto { background-image: url('imgs/bg_contacto.jpg'); background-repeat: no-repeat; background-size: auto 100%; background-position: center center; padding: 80px 0; height: 550px; overflow: hidden; }
.contacto_col1 { float: left; width: 620px; }
.contacto_col2 { float: right; width: 500px; line-height: 25px; color: white; font-size: 15px; }
input, textarea { background-color: rgba(255,255,255,0.7); font-family: 'Lato', sans-serif; font-weight: 300; color: #696969; width: 100%; height: 45px; padding: 0 20px; margin-bottom: 15px;  }
textarea { padding: 20px; height: 140px; }
button { background-color: #EBEBEB; font-family: 'Lato', sans-serif; height: 45px; padding: 10px 20px; cursor: pointer; border: 0; margin: 0; font-weight: 700; font-size: 14px; }
button:hover { color: white; background-color: red; } 

/* footer  */ 

#footer { padding: 50px 0; background-image: url('imgs/bg_footer.jpg'); background-repeat: no-repeat; background-position: right top; background-size: auto 100%; color: black; height: 357px; background-color: #E5E5E6; font-size: 16px; }
.footer_col { float: left; width: 33.3333%; line-height: 40px; }
.footer_col .social { text-align: center; margin-top: 20px; }
.map { float: left; height: 100%; margin-right: 15px; }
.footer_col p { float: left; }
.nav_footer { float: right; text-align: right; color: red; }

@media (max-width: 900px) {

	body { font-size: 14px; }
	.menu { right: 20px; }
	.nav { float: none; position: fixed; height: 100vh; background-color: white; right: -600px; padding: 20px; padding-top: 30px; margin-top: 60px; }
	.nav li { display: block; font-size: 14px;  margin: 0;  margin-bottom: 25px; }
	
	.social { float: none; position: absolute; right: 20px; z-index: 2000; top: 57px; }
	#social_footer { display: none; }
	#header { position: fixed; z-index: 1000; }
	.cont { width: 100%; }
	.logo { margin: 0; margin-left: 20px; }
	.logo a img { width: 150px; } 
	.padding, .padding2 { padding: 20px; }

	.link25 { padding: 10px; width: 100%; margin: 20px 0; font-weight: 900; font-size: 13px; }

	h1 { font-size: 25px; margin: 0; }
	h2 { font-size: 18px; }
	.big { font-size: 14px; padding: 20px; }

	#footer { padding: 20px; width: 100%; height: auto; font-size: 12px; }
	#logo_footer { display: none; }
	.footer_col { width: 50%; line-height: 20px; }

	.slick { height: 100vh; }
	.slick div p { top: 160px; }
	.titulo1 { font-size: 16px; padding: 10px; }
	.titulo2 { font-size: 28px; padding: 20px; }
	.titulo3 { font-size: 20px; padding: 15px; }
	.slick div img { width: auto; height: 100%; }
	
	#obras { height: auto; }
	#obras img { height: auto; width: 100%; margin-top: 100px; }
	#obras_destacadas h2 { margin-bottom: 20px; }
	.item { display: inline-block; width: 50vw; margin: 0 10px; margin-top: 10px; }
	.item_img { height: 40%; height: 50vw; margin-bottom: 10px; }
	.item p { height: auto; }
	.item h1 { font-size: 18px; margin: 0; }
	.item h2 { font-size: 16px; margin: 0; margin-bottom: 0; }
	.item hr { border-bottom: 3px solid #8d8d99; width: 70px; margin: 10px 0; }

	#portada { font-size: 18px; padding: 20px;  margin-top: 100px; background-size: auto 100%; }
	#portada h1 { font-size: 18px; margin: 0; }
	
	#portada_propiedades { background-size: auto 100%; margin-top: 100px; font-size: 18px; padding-top: 50px; }
	#portada_propiedades h1 { font-size: 18px; }
	.bajada { font-size: 16px; }

	.item2 { width: 100%; margin-bottom: 20px; }
	.item2 hr { margin: 10px 0;  }
	.item2 h2 { font-size: 16px; }
	.img { height: 24vw; }

	#contacto { background-size: auto 100%; padding: 20px; margin-top: 120px; }
	.contacto_col1 { width: 100%; }
	.contacto_col2 { width: 100%; line-height: 25px; padding-bottom: 30px; }
	textarea { padding: 20px; height: 140px; }

	.nav_footer { font-size: 11px; }
}