@charset "utf-8";
@import "reset.css";
@import "fonts/stylesheet.css";

body { margin: 0 auto; font-family: 'Swis721'; font-size: 15px; color: black; -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: #666; -webkit-transition: all 0.2s ease; }

.link1 { display: inline-block; background-color: white; color: black; width: 180px; height: 50px; padding-top: 16px; text-align: center; font-family: 'Swis721 Bold'; }
.link1:hover { background-color: black; color: white; } 

.link2 { display: inline-block; background-color: black; color: white; font-family: 'Swis721 Bold'; height: 50px; padding: 0 40px; padding-top: 16px; margin-top: 30px; }
.link2:hover { background-color: white; color: black; }

/* títulos y texto */ 

p { margin-bottom: 20px; }
h1 { font-family: 'Swis721 Bold'; font-size: 75px; color: white; }
h2 { font-family: 'Swis721 Bold'; font-size: 65px; line-height: 65px; }
h3 { font-family: 'Swis721 Bold'; font-size: 50px; }
h4 { font-family: 'Swis721 Bold'; font-size: 40px; }
h5 { font-family: 'Swis721 Bold'; font-size: 25px; }

strong { font-weight: normal; font-family: 'Swis721 Bold'; }
italic { font-family: 'Swis721 Bold Italic'; font-style: italic; }
.bajada { font-family: 'Swis721 Italic'; font-style: italic; font-size: 18px; }
hr { border-bottom: 1px solid black; margin: 15px 0; }

/* colores  */ 

.clr_white { color: white; }
.clr_gray { color: #848484; }
.clr_gray2 { color: #404041; }
.bg_gray { background-color: #848484; }

/* arreglos  */ 

.pre-load-web { width:100%; height: 100%; width: 100vw; height: 100vh; background-color: white; position:absolute; position:fixed; left:0; top:0; z-index:100000 }
.pre-load-web .imagen-load { left:50%; margin-left: -25px; position:absolute; top: 50%; margin-top: -25px; }

.center { text-align: center; }
.fullscreen { height: 100vh; }
.fullscreen2 { height: 83vh; }
.listado { float: left; width: 100%; height: 100%; -ms-display: flex; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.image:hover { opacity: 0.7; }
.top { margin-top: 50px; }
.ancho { display: block; margin: 30px 0; width: 100%; }

/* estructura  */ 

.main { position: absolute; width: 100%; }
.section { position: relative; float: left; width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; }
.cont { position: relative; margin: 0 auto; width: 1100px; padding: 60px 30px; vertical-align: top; }
.cont iframe { width: 100%; }

/* header  */ 

.header { position: fixed; top: 0; width: 100%; height: 150px; padding: 0 30px; background-color: white; -ms-display: flex; display: -webkit-flex; display: flex; align-items: center; justify-content:space-between; z-index: 3000; }
.logo { display: inline-block; }
.nav li { display: inline-block; margin-right: 40px; color: #666; }
.nav li ul { position: absolute; background-color: white; padding: 20px; padding-top: 10px; margin-left: -20px; display: none; }
.nav li ul li { display: block; margin-bottom: 10px; width: 100%; }
.show_submenu:hover > ul { display: block; }

.social { display: inline-block; font-size: 13px; }
.social li { display: inline-block; }
.social li a { margin-left: 10px; height: 25px; width: 25px; background-color: black; color: white; border-radius: 50%; padding-top: 6px; text-align: center; }
.social li a:hover { background-color: #848484; }

.close, .menu { float: right; display: none; margin-left: 20px; margin-top: 8px; }

.header_mini { height: 70px; }
.header_mini .logo img { width: 60px; }

/* home  */ 

.slick { width: 100%; height: 100%; }
.slick div { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; }
.slick div p { position: absolute; left: 70px; top: 45%; color: white; z-index: 1000; }
.slick div p small { display: block; font-family: 'Swis721 Bold'; font-size: 50px; }

.down { position: absolute; left: 50%; margin-left: -25px; bottom: 30px; }
.down:hover { bottom: 20px; }
.whatsapp { position: absolute; right: 30px; bottom: 60px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
.whatsapp img:hover { width: 55px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
.presenta { position: absolute; left: 70px; top: 45%; width: 300px; z-index: 1000; }

.emergente { position: relative; position: fixed; left: 50%; top: 180px; width: 440px; margin-left: -220px; padding: 20px; background-color: rgba(0,0,0,0.7); display: none; z-index: 2000; }
.close_emergente { position: absolute; top: 30px; right: 20px; z-index: 2000; cursor: pointer; }
/* nosotros  */ 

.cont_nosotros { float: left; width: 100%; height: 250px; margin: 60px 0; }
.nosotros_col_left { float: left; width: 38%; height: 100%;  -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: flex-start; background-image: url('imgs/linea1.svg'); background-repeat: no-repeat; background-position: right top;  }
.nosotros_col_right { float: right; width: 62%; height: 100%; -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: flex-start; padding-left: 60px; }

#slick_clientes div img { display: inline-block; margin: 0 30px; }

/* productos  */ 

#productos { padding-top: 80px;}
#productos_empresa { padding-botton: 80px; }
.item { display: inline-block; width: 31%; margin-bottom: 30px; }
.item_img { float: left; width: 100%; height: 260px; overflow: hidden; margin-bottom: 30px; }
.item_img img { width: 103%; }
.item_txt { float: left;  width: 100%; height: 220px;  }
.item_vermas { float: left; width: 100%; height: 50px; background-color: #848484; text-align: right; }
.item_vermas a { display: inline-block; height: 100%; background-color: black; padding: 20px; padding-left: 60px; padding-top: 16px; color: white; font-family: 'Swis721 Bold'; transition: all 0.2s ease; }
.item_vermas a:hover { width: 100%; transition: all 0.2s ease; }

/* contacto  */ 

#contacto h2 { margin-top: 30px; margin-bottom: 10px; }
input, textarea { display: inline-block; width: 100%; height: 50px; border: 0; border-bottom: 1px solid black; color: black; font-size: 20px; font-family: 'Swis721 Bold'; }
textarea { height: 200px; margin-top: 20px; margin-bottom: 30px; }
button { cursor: pointer; border: 0; margin: 0; font-size: 14px; display: inline-block; background-color: black; color: white; font-family: 'Swis721 Bold'; height: 50px; padding: 0 40px; }
button:hover { background-color: #848484; } 

.map { position: relative; float: left; width: 100%; height: 400px; height: 50vh; }
#map { width: 100%; height: 100%; }
.chapa { position: absolute; width: 100%; height: 100%; top: 0; z-index: 1000; }

.select-style { float: right; padding: 0; margin: 0; border: 0; width: 100%; border-radius: 0; overflow: hidden; background-color: transparent; border-bottom: 1px solid white; height: 50px; background: transparent url("imgs/arrow-down.png") no-repeat 99% 42%; margin-bottom: 22px; }
.select-style select { padding: 10px 0; width: 100%; border: none; box-shadow: none;  background-color: transparent; background-image: none;  -webkit-appearance: none; -moz-appearance: none;  appearance: none; font-size: 20px; border-radius: 0; font-family: 'Swis721 Bold'; color: white; cursor: pointer; }
.select-style select:hover { color: black; }

/* noticias  */ 

#noticias { background-image: url('imgs/bg_noticias.jpg'); }
#noticias h2 { border-bottom: 1px solid white; padding-bottom: 30px; }
.item_noticias { position: relative; float: left; width: 100%; padding: 20px 0; border-bottom: 1px solid white; color: white; }
.item_noticias:hover { color: yellow; }
.subtitulo { position: absolute; font-family: 'Swis721 Bold'; font-size: 18px; right: 30px; top: 80px; }
.fecha { position: absolute; right: 0; top: 25px; font-family: 'Swis721 Bold Italic'; font-style: italic; font-size: 16px; }

.compartir { margin: 40px 0; }
.compartir li { display: inline-block; text-align: center; margin-right: 10px; width: 120px; height: 120px; border-bottom: 10px solid #002d65;  }
.compartir li a { width: 100%; height: 100%; display: block; background-color: #d9dadd; padding-top: 35px;  }
.facebook a { color: #002d65; } 
.linkedin a { color: #008ec5; } 
.envelope a { color: black; } 
.whatsapp2 a { color: #39B44A; } 
.compartir li a:hover { background-color: #000; color: white; }

/* productos  */ 

.titulo { float: left; width: 100%; color: white; background-color: #848484; }
.titulo h1 { text-align: center; width: 40%; height: 100%; background-color: #404041; padding: 15px 0; }

.iconos { display: inline-block; width: 135px; vertical-align: top; margin: 40px; color: #404041; font-size: 18px; font-family: 'Swis721 Bold'; }
.iconos img { width: 100%; display: block; margin-bottom: 20px; }

#presupuesto { padding-bottom: 120px; font-size: 20px; font-family: 'Swis721 Bold'; }
#presupuesto .cont hr { border-bottom: 1px solid white; }
#presupuesto input, #presupuesto textarea, .emergente input, .emergente textarea { color: white; border-bottom: 1px solid white; margin-bottom: 30px; }
#presupuesto ::-webkit-input-placeholder, .emergente ::-webkit-input-placeholder { color: white; }
#presupuesto :-moz-placeholder, .emergente :-moz-placeholder  { color: white; }
#presupuesto ::-moz-placeholder, .emergente ::-moz-placeholder  { color: white; }
#presupuesto :-ms-input-placeholder, .emergente :-ms-input-placeholder { color: white; }
#presupuesto textarea { height: 100px; }
#presupuesto button, .emergente button  { background-color: white; color: black; float: right; }
#presupuesto button:hover, .emergente button:hover { background-color: black; color: white; }

.col20 { float: left; width: 35%; }
.col21 { float: left; width: 65%; padding-left: 40px; }

/* footer  */ 

#footer { background-color: black; color: white; }
#footer .cont { -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: flex-start; }

.nav_footer { display: inline-block; margin-left: 30px; }
.nav_footer li a { color: white; }
.nav_footer li a:hover { color: #848484; }
.ssl { position: absolute; right: 0; }

.emergente input { margin-bottom: 10px;  }

@media (max-width: 900px) {

	body { font-size: 12px; }
	.menu, .social { display: inline-block; float: right; }	
	.social { margin-top: 4px; }
	
	.header { height: 90px; display: block; padding-top: 28px; }
	.header .logo img { width: 60px; }
	
	.link1, .link2 { height: 40px; padding-top: 12px; }
	
	.cont { width: 100%; padding: 40px 20px; }
	.section, .slick div { background-size: auto 100%; }
		
	h1 { font-size: 30px; }
	h2 { font-size: 25px; line-height: 30px; }
	h3 { font-size: 20px; }
	h4 { font-size: 16px; }
	h5 { font-size: 14px; }
	
	.nav { float: none; margin: 0; right: 0; position: fixed; width: 100%; text-align: right; background-color: rgba(255,255,255,1); border-top: 1px solid black; height: 0; overflow: hidden; padding: 0 30px; top: 89px; padding-top: 20px; top: 85px; }
	.nav li { width: 100%; display: block; margin-bottom: 4px; }
	.nav li ul { position:static; display: block; padding: 0; margin: 0; margin-top: 4px; background-color: transparent; }
	.nav li ul li { display: block; margin-bottom: 4px; width: 100%; text-align: right;  }

	.presenta { left: 30px; top: 40%; width: 80%; }

	.slick div p { left: 30px; top: 40%; width: 80%; }
	.slick div p small { font-size: 20px; }

	.cont_nosotros { height: auto; width: 100%; margin: 20px 0; }
	.nosotros_col_left, .nosotros_col_right { width: 100%; height: auto; background-image: none; padding: 0; text-align: center; display: block; }
	.nosotros_col_left {  padding-bottom: 30px; }
	
	#slick_clientes div img { margin: 0 5px; width: 18vw; }

	#productos { padding: 40px 0; }
	.item { width: 100%; margin-bottom: 30px; }
	.item_img { height: 70vw; margin-bottom: 20px; }
	.item_txt { height: auto; padding-bottom: 20px; }
	.item_vermas { height: 40px; }
	.item_vermas a { padding: 20px; padding-left: 60px; padding-top: 12px; }

	#noticias h2 { padding-bottom: 10px; }
	.item_noticias { padding-bottom: 0; }
	.subtitulo { position: static; float: left; width: 100%; font-size: 14px; right: auto; top: auto; margin-top: 10px; }
	.fecha { position: static; right: auto; top: auto; font-size: 14px; float: left; width: 100%; margin-bottom: 5px; }
	.item_noticias h5 { margin-bottom: 5px; }

	#contacto .whatsapp { bottom: 34px; }
	#contacto h2 { margin-top: 20px;  }
	input, textarea { height: 40px; font-size: 14px; }
	textarea { height: 100px; width: 100%; }
	button { height: 40px; font-size: 12px; }

	.nav_footer, .logo_footer { display: none; }

	#footer .cont { text-align: center; }
	.ssl { position: static; right: auto; display: inline-block; margin: 0 auto; }
	
	.compartir { margin-top: 30px;  }
	.compartir li { margin-bottom: 5px; margin-right: 5px; width: 60px; height: 60px; font-size: 10px; }
	.compartir li a { background-color: #d9dadd; padding-top: 12px;  }


	.titulo h1 { width: auto; height: 100%; }
	.iconos { width: 28vw; margin: 20px; font-size: 12px; }
	.col20, .col21 { width: 100%; padding: 0; }
	.select-style select { font-size: 14px; }
	#presupuesto { font-size: 14px; }
	#presupuesto input, #presupuesto textarea  { margin-bottom: 20px; }	
	#presupuesto textarea { margin-top: 8px; }

	.cont iframe {  width: 100%; }


	
}