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

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

/* links  */ 

a { color: white; -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; margin-right: 10px; margin-top: 20px; font-weight: 500; padding: 10px; border: 2px solid white; border-radius: 5px; }
.link1:hover { background-color: white; color: #666; }

.link2 { display: inline-block; color: #333; background-color: #ffcc00; height: 40px; padding: 12px 18px; font-weight: 600; }
.link2:hover { background-color: #333; color: white; }

.link22 { color: white; }
.link22:hover { text-decoration: underline; color: white; }


/* títulos y texto */ 

p { line-height: 27px; }
h1 { font-weight: 700; font-size: 24px; }
h2 { font-weight: 300; font-size: 20px; margin-bottom: 50px; }
h3 { font-weight: 500; font-size: 15px; }
h4 { font-weight: 600; font-size: 18px; }

hr, .hr_white { margin: 30px auto; border-bottom: 1px solid #333; width: 40px;  }
.hr_white { border-bottom: 1px solid white; }
italic { font-weight: 600; font-style: italic; }
strong { font-family: 'Montserrat', sans-serif; font-weight: 600; }

/* colores  */ 

.clr_gray1 { color: #333; }
.clr_gray2 { color: #999; }
.clr_yellow { color: #ffcc00; }
.clr_white { color: white; }
.clr_red { color: #ff0000; }

.bg_gray1 { background-color: #333; }
.bg_gray2 { background-color: #666; }

/* arreglos  */ 

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

.center { text-align: center; }
.padding { padding: 82px 0; }
.fullscreen { height: 100%; height: 100vh; overflow: hidden; }
.image:hover { opacity: 0.7; }
.ancho { display: block; width: 100%; }
.right { text-align: right; }
.listado { float: left; width: 100%; -ms-display: flex; display: -webkit-flex; display: flex; align-items: flex-start; justify-content:space-between; flex-wrap: wrap; vertical-align: top; }
 
/* estructura  */ 

.main { position: absolute; width: 100%;  }
.section { position: relative; float: left; width: 100%; min-width: 1280px; }
.cont { margin: 0 auto; width: 1100px; }

/* header  */ 

.header { position: fixed; width: 100%; min-width: 1280px; height: 142px; border-bottom: 1px solid rgba(255,255,255,0.3); z-index: 3000; }
.logo { float: left; height: 100%; padding: 0 30px; border-right: 1px solid rgba(255,255,255,0.3); }
.header_frase { float: left; padding: 30px; padding-top: 42px; font-size: 15px; font-weight: 500; }
.nav { float: right; height: 100%; padding: 0 30px; padding-top: 42px; border-left: 1px solid rgba(255,255,255,0.3); }
.nav li { float: left; height: 50px; font-family: 'Raleway', sans-serif; font-weight: 700; margin: 0 2px; }
.nav li a, .select { display: block; width: 100%; height: 100%; background-color: transparent; border-radius: 5px; color: white; padding: 10px 18px;  }
.nav li a:hover, .select {  background-color: white; color: #666; } 
.single { display: block; padding-top: 6px; }

.menu, .close { position: absolute; top: 40px; right: -30px; }

.bg_header { background-color: rgba(0,0,0,0.6); }

/* home  */ 

.slick div, .slick { height: 100%; position: relative; }
.slick div img { width: 100%; }
.down { position: absolute; left: 50%; margin-left: -27px; bottom: 0; }

.slick div p { text-align: center; position: absolute; color: #eee; width: 700px; left: 50%; margin-left: -350px; top: 50%; margin-top: -45px; font-family: 'Raleway', sans-serif; font-size: 64px; font-weight: 800; z-index: 1000; line-height: 64px; }
.slick div p small { display: block;  font-size: 25px; line-height: 40px; font-weight: 400; font-family: 'Montserrat', sans-serif; line-height: normal; }

.presenta { position: absolute; color: #eee; width: 700px; left: 50%; margin-left: -350px; top: 50%; margin-top: -45px; z-index: 1000; }
.presenta h1 { font-family: 'Raleway', sans-serif; font-size: 64px; font-weight: 800; margin-bottom: 0; }
.presenta p { font-size: 25px; line-height: 40px; }

/* somos  */ 

.somos { float: left; width: 100%; padding-bottom: 60px; margin-bottom: 80px; border-bottom: 1px solid #eee; }
.somos h1 { color: #333; font-size: 36px; margin-bottom: 30px;  }
.somos h2 { font-size: 28px; margin: 0; }
.col1 { float: left; width: 54%; margin-bottom: 82px; overflow: hidden; }
.col2 { float: right; width: 46%; padding-left: 60px; text-align: left; }
.col2 hr { margin: 0; margin-bottom: 30px; }

.foto_empresa { height: 360px; }

/* movimientos  */ 

.nav_movimientos { margin-top: 30px; }
.nav_movimientos li { display: inline-block; margin-bottom: 0 2px; width: 8px; height: 8px; background-color: #59502a; border-radius: 50%; }

/* servicios  */

.servicios { float: left; width: 33%; height: 120px; text-align: left; padding-right: 30px; }
.servicios p { font-size: 12px; }
.servicios h3 i, .servicios h3 { vertical-align: middle; }

/* banners  */

#banners { margin-top: 60px; }
.banner { position: relative; float: left; width: 33.333%; height: 360px; padding: 30px; background-repeat: no-repeat; background-size: 105% auto; }
.banner h1 { margin-bottom: 20px; }
#banner1 { background-image: url('imgs/img_banner1.jpg'); }
#banner2 { background-image: url('imgs/img_banner2.jpg'); }
#banner3 { background-image: url('imgs/img_banner3.jpg'); }

/* secciones  */

#portada { height: 40vw; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; }
.item { display: inline-block; vertical-align: top; width: 32%; margin-bottom: 40px; }
.item_img { position: relative; float: left; width: 100%; height: 260px; overflow: hidden; margin-bottom: 10px; }
.item_img img { width: 100%; }
.item p { font-size: 12px; line-height: 18px; }
.item .col1 { width: 50%; padding: 0; height: auto; margin: 0; }
.item .col2 { width: 50%; padding: 0; height: auto; margin: 0; text-align: right; }
.item h3 { font-weight: 500; }

.submenu { float: left; width: 100%; margin-bottom: 40px; border: 1px solid #CCC; border-radius: 5px; }
.submenu li { float: left; height: 100%; font-size: 12px; height: 40px;  }
.submenu li a { float: left; height: 100%; color: #666; padding: 11px 10px; border-right: 1px solid #CCC;  }
.submenu li a:hover, .select2 { background-color: #ffcc00; color: #333; }

/* footer  */

.footer { float: left; width: 100%; border-top: 4px solid #ffcc00; }
.logo_footer { float: left; padding-top: 44px; }
.creditos { float: left; width: 100%; }
.creditos img { vertical-align: middle; }

.datos { float: right; width: 65%; height: 210px; margin-top: 20px; background-repeat: no-repeat; background-image: url('imgs/img_map.jpg'); background-position: right top; padding-top: 55px; }
.datos_col { float: right; margin-left: 60px; }
.social { display: inline-block; }
.social li { display: inline-block; margin-right: 2px; }
.social li a { display: inline-block; height: 20px; width: 20px; border-radius: 50%; background-color: #ffcc00; color: #666; text-align: center; padding-top: 3px;  }
.social li a:hover { background-color: #333; color: white; }

.tapa { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.2); -ms-display: flex; display: -webkit-flex; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s ease; }
.tapa h1 { color: #333; text-align: center; font-size: 30px; font-weight: 600; height: 65px; width: 65px; border-radius: 50%; background-color: #ffcc00; padding-top: 12px; }
.tapa:hover { opacity: 1; }

#trabajo .cont .col1 { padding: 0; text-align: left; width: 50%; padding-right: 20px; font-size: 12px; }
#trabajo .cont .col2 { padding: 0; text-align: left; width: 50%; padding-left: 20px; font-size: 12px; }
#trabajo .cont .col1 .item { padding: 0; margin: 0; font-size: 12px; }

input, textarea { background-color: white; border: 2px solid #CCC; height: 40px; padding: 0 10px; margin-bottom: 30px; margin-top: 10px; width: 100%; }
textarea { padding: 10px; height: 136px;  }
button { margin: 0; border: 0; cursor: pointer; color: white; background-color: #ffcc00; padding: 12px 18px; font-size: 18px; font-weight: 600; margin-bottom: 82px; border-bottom: 3px solid #bf9d14; }
button:hover { background-color: #666; border-bottom: 3px solid #333; }

.cell1 { float: left; width: 66%; }
.cell2 { float: right; width: 32%; }

.item_movimientos { display: none; }

#slick_logos div, #slick_logos { height: 96px; text-align: center; }
#slick_logos div a img { display: inline-block; height: 100%; width: auto; }

.detalles_txt { padding-bottom: 40px; }
.detalles_txt hr { width: 100%;  border-bottom: 1px solid #eee;   }
.detalles_txt p { margin-bottom: 30px; }

.compartir { float: right; text-align: right; color: #333; font-weight: 600; margin-top: 12px; margin-bottom: 82px; }
.compartir li { display: inline-block; margin-left: 20px; }
.compartir li a { color: #333; }
.compartir li a:hover { color: #ffcc00; }

.thumb { display: inline-block; width: 24%; height: 100px; overflow: hidden; margin-top: 4px; }
.thumb img { height: 100%; }
.thumb:hover > .tapa { display: flex; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }

#map { width: 100%; height: 100%; }

.grises {
filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */ -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; }

.grises:hover { 
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.4s ease; transition: all 0.2s ease; }

@media (max-width: 900px) {

	body { font-size: 12px; }
	.menu { right: 20px; }
	.nav { float: none; width: 100vw; height: 100vh; text-align: center; position: fixed; top: 0; left: 0; padding: 20px; border: 0; background-color: rgba(0,0,0,0.7); padding-top: 20vh; display: none; }
	.nav li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.3); }
	.nav li a, .select { padding-top: 18px; font-size: 13px; }
	.nav li a br, .nav li .select br { display: none; }
	.single { padding: 0; }

	.cont { width: 100%; }
	.header, .section { min-width: 300px; }
	.padding { padding: 40px 20px; }
	.slick div img { width: auto; height: 100%; }

	.header { height: auto; }
	.logo { width: 50vw; }
	.logo img { width: 100px; }
	.header_frase { display: none; }
	
	p { line-height: 18px; }
	h1 { font-size: 16px; }
	h2 { font-size: 14px; margin-bottom: 30px; }
	h3 { font-size: 12px; }
	h4 { font-size: 14px; }

	hr, .hr_white { margin: 20px auto;  }

	.presenta { width: 60%; left: 20%; margin: 0; top: 50%; margin-top: -70px; }
	.presenta h1 { font-size: 28px; margin-bottom: 10px; }
	.presenta p { font-size: 14px; line-height: normal; }

	.slick div p { width: 60%; left: 20%; margin: 0; top: 50%; margin-top: -70px; font-size: 28px; line-height: normal; }
	.slick div p small { font-size: 14px; }
	
	#somos .cont { padding: 0; }

	.somos { padding-bottom: 30px; margin-bottom: 40px; padding: 0 20px; padding-bottom: 20px; }
	.somos h1 { font-size: 28px; margin-bottom: 20px;  }
	.somos h2 { font-size: 14px; }
	.col1 { float: left; width: 100%; margin-bottom: 20px; height: auto; }
	.col2 { float: left; width: 100%; padding: 20px; padding-bottom: 40px; height: auto; }
	.col2 hr { margin: 0; margin-bottom: 20px; }
	#logo_somos { width: 150px; }

	.servicios { width: 100%; height: auto; padding: 0; }

	#banners { margin-top: 40px; }
	.banner { width: 100%; height: auto; padding: 40px 20px; background-size: 100% auto; }
	.banner p { height: auto; }
	.banner h3 { margin-bottom: 10px; }

	.logo_footer { display: none; }
	.creditos { float: left; width: 100%; text-align: center; }
	.right { text-align: center; }
	.creditos img { vertical-align: middle; }
	
	.datos { float: right; width: 100%; height: auto; padding: 30px; margin: 0; text-align: center; }
	.datos_col { float: left; padding: 0; margin: 0; width: 100%; margin-bottom: 10px; }
	.creditos .col1, .creditos .col2 { padding: 0; }
	.creditos .col2 { padding-bottom: 40px; }

	#portada { height: 50vh;  background-size: auto 100%;}
	#portada .presenta { top: 150px; margin-top: 0; }
	.item { width: 100%; min-height: 300px; margin-bottom: 20px; }
	.item_img { height: auto; }

	.submenu { text-align: center; margin-bottom: 20px; }
	.submenu li { float: none; display: inline-block; height: auto; text-align: center;  }
	.submenu li a { float: none; display: inline-block; padding: 8px; border: 0; text-align: center; }

	input, textarea { margin-bottom: 20px; }
	#trabajo .cont .col1, #trabajo .cont .col2 { width: 100%; padding: 0; height: auto; margin: 0; min-height: 40px; }
	#trabajo .cont .col1 .item { padding: 0; margin: 0; width: 100%; height: auto; min-height: 40px; }
	#trabajo .cont .col2 h1 { display: none; }
	button { font-size: 14px; }

	.foto_empresa { height: auto; width: 100%; }
	.cell1, .cell2 { width: 100%; }
	.col2 .col2 { padding: 0; margin: 0; }
	.compartir { float: left; text-align: left; margin: 40px 0; }
	.compartir li { margin: 0; margin-right: 10px; }
	.detalles_txt h1 { padding-top: 30px; }

	#slick_logos div img { display: inline-block; height: 36px; width: auto; margin: 0 6px; }

	
}