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

body { margin: 0 auto; font-family: Helvetica, Arial, Sans-Serif; font-size: 13px; color: #58585a; -webkit-font-smoothing: antialiased; }

/* links  */ 

a { color: #1a171b; -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: #f7901e; -webkit-transition: all 0.2s ease; }

.link1, .link2, .link3 { display: inline-block; margin-right: 20px; color: white; font-family: 'Kiro'; font-size: 16px; font-style: italic; background-color: #cd7a21; width: 185px; text-align: center; height: 38px; padding-top: 10px; border-radius: 10px; margin-top: 10px; }
.link2 { background-color: #383238; } 
.link1:hover, .link3:hover { background-color: #383238; color: white; }
.link2:hover { background-color: #f7901e; color: white; }
.link3 { background-color: #b2b2b2; } 

/* títulos y texto */ 

p { line-height: 20px; }
h1, h2, h3, h4 { font-family: 'Kiro'; font-size: 80px; color: #f7901e; font-style: italic; line-height: 74px; margin-bottom: 20px; }
h2 { font-size: 20px; color: white; margin: 0; line-height: normal; }
h3 { font-size: 16px; color: #58585a; margin: 0; line-height: normal;  }
h4 { color: white; font-size: 600px; margin: 0; }

/* colores  */ 

.clr_white { color: white; }
.clr_orange { color: #f7901e; }

.bg_orange { background-color: #f7901e; color: white; }
.bg_black { background-color: black; color: white; }
.bg_white { background-color: white; }

/* arreglos  */ 

.pre-load-web { width:100%; height: 100%; width: 100vw; height: 100vh; position:absolute; position:fixed; left:0; top:0; -ms-display: flex; display: -webkit-flex; display: flex; align-items:center; justify-content: center; z-index:100000; }

.centrar_vertical { -ms-display: flex; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; } 

.center { text-align: center; }
.padding { padding: 100px 30px; }
.padding2 { padding: 30px; }
.fullscreen { height: 100vh; }
.image:hover { opacity: 0.7; }
.margin { margin-bottom: 30px; }
.columnas {  -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;  -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; font-size: 13px; width: 100%; display: block; }

/* estructura  */ 

.main { position: absolute; width: 100%; }
.section { position: relative; float: left; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; overflow: hidden; }
.cont { margin: 0 auto; width: 1050px; }
.cont_contacto { margin: 0 auto; width: 750px; padding-top: 50px; }
.col1, .col2 { float: left; width: 40%; height: 100vh; }
.col2 { width: 60%; }
.col3, .col4, .col5, .col6 { float: left; width: 50%; }
.col3 img { width: 90%; }
.col5 { width: 25%; }
.col6 { width: 75%; }

.fila { margin: 0 auto; width: 80%; margin-top: 60px; }

/* secciones  */ 

.header { position: fixed; width: 100%; height: 82px; padding-left: 40px; 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 { display: inline-block; }
.nav li { display: inline-block; margin-right: 30px; font-family: 'Kiro'; font-size: 14px; font-style: italic;  }

.social { display: inline-block; height: 100%; padding: 0 40px; -ms-display: flex; display: -webkit-flex; display: flex; align-items: center; justify-content:space-between; }
.social li { display: inline-block; margin: 0 5px; }
.social li a { color: white; }
.social li a:hover { color: black; }

.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; }
.down { position: absolute; left: 50%; margin-left: -42px; bottom: 30px; z-index: 1000; }

#quienes_item1, #quienes_item2 { background-image: url('imgs/linea.svg'); background-position: left center; background-size: auto 100%; background-size: 40vw; }
#quienes strong { font-family: 'Kiro'; font-size: 20px; font-style: italic; }
#valores strong { color: #58585a; font-family: 'Kiro'; font-size: 20px; font-style: italic; }

.back, .forward { position: absolute; top: 50%; margin-top: -50px; left: 30px; z-index: 1000; }
.forward { left: auto; right: 30px; }

#actividades { color: white; }
#actividades .section { background-size: 100% auto; }

#clientes { background-image: url('imgs/linea_naranja.svg'); background-position: left center; background-size: auto 100%; background-size: 40vw; }

.imagen { float: left; width: 33.333%; height: 19vw; overflow: hidden; }
.imagen img { width: 100%; }

#contacto { background-image: url('imgs/linea_naranja.svg'); background-position: left center; background-size: auto 100%; background-size: 40vw; }

input, textarea { border: 0; border-bottom: 1px solid #58585a; height: 38px; padding: 0; color: #58585a; margin-bottom: 15px; width: 100%; }
textarea { height: 100px; }

#contacto_col1 { width: 49%; }
#contacto_col2 { float: right; width: 49%; }

button { color: white; font-family: 'Kiro'; font-size: 16px; font-style: italic; background-color: #f7901e; width: 185px; text-align: center; height: 38px; border-radius: 10px; margin-top: 20px; border: 0; cursor: pointer; }
button:hover { background-color: #383238; }

.map { float: left; width: 100%; height: 50vh; }
#map { width: 100%; height: 100%; }

#footer { padding: 40px; }
.nav_footer { float: right; font-family: 'Kiro'; font-style: italic; }
.nav_footer li { display: block; color: #f7901e; margin-bottom: 5px; font-size: 14px; }
.nav_footer li a { color: #1a171b; }
.nav_footer li a:hover { color: #f7901e; }

#menu, #close { display: none; }
#aux_col p { color: #f7901e;  -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;  -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; }

@media (max-width: 900px) {

	#menu { display: block; }

	body { font-size: 12px; }
	h1 {  font-size: 28px; line-height: normal; text-align: center; }
	h2 {  font-size: 16px; }
	h3 {  font-size: 14px; }
	h4 {  font-size: 100px; }
	
	p { line-height: 15px; }
	
	.link1, .link2, .link3 { font-size: 13px; padding-top: 12px; }
	
	.centrar_vertical { display: block; }
		
	.nav { position: fixed; right: -190px; width: 180px; height: 100%; height: 100vh; padding: 20px; top: 0; margin-top: 82px; background-color: white; }
	.nav li { margin: 0; display: block; margin-bottom: 10px; border-bottom: 1px solid gray; padding-bottom: 10px; font-size: 12px; }

	.padding { padding: 30px; }

	.cont { width: 100%; }
	.cont_contacto { width: 100%; padding: 0; padding-top: 30px; }
	.col1, .col2, .col3, .col4, .col5, .col6 { float: left; width: 100%; height: auto; }
	.col1 { padding: 30px; padding-top: 60px; padding-bottom: 10px; }
	.col3 img { width: 100%; margin-bottom: 30px; }
	.col5 { margin-bottom: 20px; }
	.col5  img { width: 70px; }
	
	.header { height: 82px; padding-left: 30px; }
	.social { padding: 0 30px; width: 180px; overflow: hidden; }
	.social li { margin: 0; }
	
	.slick div { background-size: auto 100%; }
	.slick-dots { left: 30px; }
	
	#quienes, #valores { text-align: center; }
	#quienes .back, #quienes .forward { display: none; }

	.fila { margin: 0 auto; width: 80%; margin-top: 30px; text-align: center; }
	.back { left: 15px; margin-top: -30px; }
	.forward { right: 15px; margin-top: -30px; }
	.back img, .forward img { height: 60px; }
	
	#actividades .section { background-size: auto 100%; }
	#actividades .section .col1, #actividades .section .col2 { float: none; width: 70%; margin: 0 auto; text-align: center; }
	#actividades .section .col1 { padding-bottom: 10px; padding-top: 30px; }
	
	#clientes, #contacto { padding-bottom: 60px; }
	.imagen { height: 33vw; overflow: hidden; }
	.imagen img { height: 100%; width: auto; }
	
	#contacto h1 { margin-bottom: 30px; }
	.nav_footer, #logo_footer { display: none; }
	#footer { background-color: #f7901e; height: 82px; }

	#quienes strong, #valores strong { font-size: 16px;  }
	.columnas {  -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;  font-size: 11px; line-height: 16px; }

}