/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,700);


* { margin: 0; padding: 0; border: 0; -webkit-text-stroke: 0.3px; }
html, body { height: 100%; width: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
strong { font-weight: bold; }
body {
	color: #0081C6;
	font-size: 13px;
	line-height: 19px;
	text-align: left;
	font-family: "Titillium Web", Thonburi, Arial, Helvetica, sans-serif; 
	background-color: #FFF;
}
input, textarea, select { font-family: "Titillium Web", Thonburi, Arial, Helvetica, sans-serif;  outline: 0; font-size: 12px; line-height: 22px; }
input:focus, textarea:focus, select:focus { outline: 0; }

a { text-decoration: none; color: #12B5EA; cursor: pointer; }
a:hover { color: #D5DF3D; cursor: pointer; }
a * { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; cursor: default; text-transform: uppercase; }

ul { list-style: none; }

.clear { clear: both; }
.none { display: none; }
.uppercase { text-transform: uppercase; }
	



/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------- DEFINICIÓN DE BASE ---------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.wrapperavg { width: 990px; margin: 0 auto 0 auto; }
header, .background, .cuerpo, footer { left: 0; position: absolute; width: 100%; }


header { height: 90px; overflow: hidden; z-index: 100; position: fixed; top: 0; left: 0; width: 100%; background-color: #FFF; }
header .wrapperavg { height: 95px; position: relative; }

header h1 { float: left; margin: 12px 0 0 55px; height: 64px; width: 164px; overflow: hidden; }
header h1 a { display: block; height: 64px; width: 164px; overflow: hidden; text-indent: -9998px; background-position: 0px 0px; background-repeat: none; background-image: url(../img/transclor.png); }
header h1 a:hover { background-position: 0px -64px; }

header nav { width: 700px; height: 30px; margin: 32px 10px 0 0; float: right; }
header nav ul { overflow: auto; }
header nav ul li { margin-right: 5px; text-transform: uppercase; float: left; line-height: 22px; font-size: 12px; padding: 3px; color: #12B5EA; }
header nav ul li.active { border-bottom: 1px solid #0081C6; }
header nav ul li:hover { color: #0081C6; cursor: pointer; }

header .idioma { position: absolute; top: 0; right: 0; background-color: #D5DF3D; width: 90px; height: 18px; overflow: hidden; text-transform: uppercase; text-align: center; }
header .idioma p { line-height: 18px; font-size: 10px; color: #8FAA2D; cursor: default; }
header .idioma a { line-height: 14px; padding: 2px; font-size: 10px; color: #FFF; }
header .idioma a:hover { color: #12B5EA; }

.background { height: 530px; top: 95px; z-index: -50; }
.background .wrapperavg { background-position: top left; background-repeat: no-repeat; height: 530px; }

.cuerpo { z-index: 2; }

.cuerpo.enbase { top: 195px; overflow-y: auto; overflow-x: hidden; color: #FFF; }
.cuerpo.enbase .wrapperavg { overflow-y: auto; overflow-x: hidden; }
.cuerpo.enbase section { overflow: auto; padding-bottom: 35px; }

.cuerpo.enbase .colizq { margin: 48px 0 0 55px; width: 450px; float: left; }
.cuerpo.enbase .colder { margin: 35px 70px 0 0; width: 370px; float: right; }
.cuerpo.enbase .colder p { margin-bottom: 8px; }

.secrrhh .cuerpo.enbase .sec02 { padding-bottom: 55px; }
.cuerpo.enbase .colunica { margin: 48px 0 0 55px; width: 750px; float: left; }
.secrrhh .cuerpo.enbase .sec02 .colunica { margin-top: 18px; }
.cuerpo.enbase .colunica p { font-size: 30px; line-height: 28px; text-transform: uppercase; margin-bottom: 10px; }
.secrrhh .cuerpo.enbase .colunica p { font-size: 22px; }
.cuerpo.enbase .colunica p.menor { font-size: 18px; line-height: 22px; margin-bottom: 20px; width: 830px; color: #D6ECFB;  }
.cuerpo.enbase .colunica p a { text-transform: none; font-weight: 200; color: #FFF; }
.secrrhh .cuerpo.enbase .colunica p a { text-transform: none; font-weight: 200; color: #FFF; font-size: 28px; }
.cuerpo.enbase .colunica p a:hover { color: #D5DF3D; }

.cuerpo.enbase .colizq h2 { font-size: 40px; line-height: 38px; font-weight: 200; }
.cuerpo.enbase .colizq h3 { color: #D6ECFB; font-size: 30px; line-height: 28px; margin-top: 5px; }

footer { height: 50px; overflow: hidden; z-index: 99; top: auto; bottom: 0; background-color: #FFF; position: fixed; }
footer p { margin: 15px 40px 0 55px; font-size: 12px; color: #666; cursor: default; }

.cuerpo.long, .cuerpo.short { top: 195px; overflow-y: auto; overflow-x: hidden; color: #0081C6; }
.cuerpo.long .wrapperavg, .cuerpo.short .wrapperavg { overflow-y: auto; overflow-x: hidden; }
.cuerpo.long section, .cuerpo.short section { overflow: auto; padding-bottom: 35px; margin-left: 145px; margin-right: 145px; }

.cuerpo.long section h2 { line-height: 36px; font-size: 36px; color: #12B5EA; }
.cuerpo.long section h3 { line-height: 17px; font-size: 17px; color: #C1D72E; }
.cuerpo.short section { margin-left: 55px; }





/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* ---------- PARA CADA SECCIÓN ---------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */

.desplegable { overflow: hidden; }

.seccalidad .cuerpo section, .secrrhh .cuerpo section, .seclogistica .cuerpo section { background-color: #12B5EA; background-color: rgba(18,181,234,0.8); }
.secrse .cuerpo section { background-color: #8FAA2B; background-color: rgba(143,170,45,0.8); }

.seccontacto .cuerpo section.sec02 { background-color: #E7ECE9; }
.secrse .cuerpo section.sec02 { background-color: #FFF; color: #8B9A92; }
.secrse .cuerpo section.sec03 { padding: 0; }
.secrse .cuerpo section.sec03 img { display: block; }

.slide { background-size: 100% auto; background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.secprehome { background-image: url(../img/bg/prehome.jpg); }
.sechome { background-image: url(../img/bg/home.jpg); }
.secnosotros { background-image: url(../img/bg/nosotros.jpg); }
.secplantas { background-image: url(../img/bg/plantasb.jpg); }
.secproductos { background-image: url(../img/bg/productos.jpg); }
.seclogistica { background-image: url(../img/bg/logistica.jpg); }
.seccalidad { background-image: url(../img/bg/calidad.jpg); }
.secrse { background-image: url(../img/bg/medioambiente.jpg); }
.secrrhh { background-image: url(../img/bg/rrhh.jpg); }
.seccontacto { background-image: url(../img/bg/contacto.jpg); }


.secprehome h2, .sechome ul { text-transform: uppercase; margin-right: 250px; }
.secprehome h2 { line-height: 48px; font-size: 52px; color: #FFF; padding-top: 5px; }
.secprehome .idioma { color: #FFF; margin-top: 20px; display: block; width: 200px; }
.sechome ul li, .sechome ul li a { line-height: 52px; font-size: 52px; color: #FFF; }
.sechome ul li.less, .sechome ul li.less a { line-height: 24px; font-size: 14px; color: #12B5EA; margin-left: 3px; }
.sechome ul li.firstless, .sechome ul li.firstless a { padding-top: 3px; }
.sechome ul li:hover, .secprehome .idioma:hover, .sechome ul li:hover a { color: #0081C6; cursor: pointer; }


.secnosotros .cuerpo.long section { margin: 0; width: 990px; background-color: #12b5ea;  }
.secnosotros .cuerpo.long section h2, .secnosotros .cuerpo.long section p { color: #FFF; margin: 30px 245px 15px 145px; }
.secnosotros .cuerpo.long .sec01 { background-color: #1283EA; background-color: rgba(18,181,234,0.5); }
.secnosotros .cuerpo.long .sec01 a { color: #FFF; }
.secnosotros .cuerpo.long .sec01 a:hover { color: #DFF0F4; }
.secnosotros .cuerpo.long .sec03, .secnosotros .cuerpo.long .sec04 { background-color: #FFF; }
.secnosotros .cuerpo.long .sec03 { padding-top: 30px; padding-bottom: 10px; }
.secnosotros .cuerpo.long .sec03 p, .secnosotros .cuerpo.long .sec04 p { color: #0097cf; margin-top: 10px; font-size: 16px; line-height: 20px; }
.secnosotros .cuerpo.long .sec04 p { color: #12b5ea; }






.seclogistica .desplegar { background-color: #FFF; } 
.seclogistica .desplegar a { height: 100px; background-image: url(../img/desplegar.png); background-position: center 20px; background-repeat: no-repeat; margin: 0 auto 0 auto; display: block; text-indent: -9998px; } 
.seclogistica .desplegar a:hover { background-position: center -180px; background-color: #FBFCEB; } 

.seclogistica .desplegable { height: 594px; position: relative; background-color: #FFF; background-image: url(../img/logistica/camion.jpg); background-position: center top; background-repeat: no-repeat; }
.seclogistica .desplegable .layer { height: 530px; position: absolute; top: 0; left: 0; background-color: rgba(20,150,220,.25); width: 990px; /*new*/ background: none; overflow: auto; }
.seclogistica .desplegable .layer ul { margin: 35px 40px 0 43px; height: 100px; width: 280px; float: right; }
.seclogistica .desplegable .layer ul li { margin: 0 10px 0 10px; border-bottom: 2px solid #FFF; text-transform: uppercase; color: #FFF; font-size: 28px; line-height: 26px; width: 275px; padding-bottom: 13px; text-align: right; color: #AFDEF8; }
.seclogistica .desplegable .layer ul li:last-child { border: 0; padding-top: 13px; }

.secplantas .sec01, .secplantas .sec02 { background-color: #FFF; background-color: rgba(255,255,255,0.8); padding-top: 20px; }
.secplantas .sec01 { margin-bottom: 15px; }
.secplantas .sec01 h3, .secplantas .sec02 h2 { margin-bottom: 35px; }

.secplantas section ul { height: 464px; width: 700px; position: relative; margin-top: 35px; }
.secplantas section ul li { position: absolute; width: 228px; }
.secplantas section ul li a { display: block; background-position: center; background-repeat: no-repeat; text-align: right; margin: 0 5px 0 0; line-height: 75px; font-size: 100px; color: #FFF; text-indent: -9998px; text-align: left; width: 228px; overflow: hidden; }
.secplantas section ul li a:hover { text-indent: 0; text-align: right; }

.secplantas .sec01 ul li.opc1 { top: 0; left: 0; height: 464px; }
.secplantas .sec01 ul li.opc1 a { height: 464px; background-image: url(../img/plantas/pilar/1.jpg); }
.secplantas .sec01 ul li.opc2 { top: 0; left: 236px; height: 280px; }
.secplantas .sec01 ul li.opc2 a { height: 280px; background-image: url(../img/plantas/pilar/2.jpg); }
.secplantas .sec01 ul li.opc3 { bottom: 0; left: 236px; height: 176px; }
.secplantas .sec01 ul li.opc3 a { height: 176px; background-image: url(../img/plantas/pilar/3.jpg); }
.secplantas .sec01 ul li.opc4 { top: 0; right: 0; height: 217px; }
.secplantas .sec01 ul li.opc4 a { height: 217px; background-image: url(../img/plantas/pilar/4.jpg); }
.secplantas .sec01 ul li.opc5 { bottom: 0; right: 0; height: 239px; }
.secplantas .sec01 ul li.opc5 a { height: 239px; background-image: url(../img/plantas/pilar/5.jpg); }

.secplantas .sec02 ul li.opc1 { top: 0; left: 0; height: 159px; }
.secplantas .sec02 ul li.opc1 a { height: 159px; background-image: url(../img/plantas/bernal/1.jpg); }
.secplantas .sec02 ul li.opc2 { bottom: 0; left: 0; height: 297px; }
.secplantas .sec02 ul li.opc2 a { height: 297px; background-image: url(../img/plantas/bernal/2.jpg); }
.secplantas .sec02 ul li.opc3 { top: 0; left: 236px; height: 281px; }
.secplantas .sec02 ul li.opc3 a { height: 281px; background-image: url(../img/plantas/bernal/3.jpg); }
.secplantas .sec02 ul li.opc4 { bottom: 0; left: 236px; height: 176px; }
.secplantas .sec02 ul li.opc4 a { height: 176px; background-image: url(../img/plantas/bernal/4.jpg); }
.secplantas .sec02 ul li.opc5 { top: 0; right: 0; height: 209px; }
.secplantas .sec02 ul li.opc5 a { height: 209px; background-image: url(../img/plantas/bernal/5.jpg); }
.secplantas .sec02 ul li.opc6 { bottom: 0; right: 0; height: 247px; }
.secplantas .sec02 ul li.opc6 a { height: 247px; background-image: url(../img/plantas/bernal/6.jpg); }


.secproductos .cuerpo.long section { padding-bottom: 0; height: 226px; background-position: top left; background-repeat: no-repeat; /*new*/ background-color: #FFF; background-color: rgba(255,255,255,0.8); margin: 0; width: 990px;  }
.secproductos .cuerpo.long section > div { height: 226px; }

.secproductos .cuerpo.long .sec00 { height: auto; }
.secproductos .cuerpo.long .sec00 h2 { color: #12B5EA; margin: 30px 245px 15px 145px; font-size: 28px; line-height: 28px; }
.secproductos .cuerpo.long .sec00 p { color: #0097CF; margin: 0 155px 35px 145px; font-size: 17px; line-height: 20px; }
.secproductos .cuerpo.long div > section { background-position: top left; background-repeat: no-repeat; margin-left: 0; padding-left: 145px; }
.secproductos .cuerpo.long .sec00 { padding-left: 0; }
.secproductos .cuerpo.long .sec01 { background-image: url(../img/productos/cl2.jpg); }
.secproductos .cuerpo.long .sec02 { background-image: url(../img/productos/naoh.jpg); }
.secproductos .cuerpo.long .sec03 { background-image: url(../img/productos/hcl.jpg); }
.secproductos .cuerpo.long .sec04 { background-image: url(../img/productos/nacl0.jpg); }
.secproductos .cuerpo.long .sec05 { background-image: url(../img/productos/pca.jpg); }
.secproductos .cuerpo.long .sec06 { background-image: url(../img/productos/koh.jpg); }
.secproductos .cuerpo.long .sec07 { background-image: url(../img/productos/cacl2.jpg); }
.secproductos .cuerpo.long .sec08 { background-image: url(../img/productos/pca_sol.jpg); }


.secproductos section .colizq { width: 345px; float: left; margin: 0; }
.secproductos section .colder { width: 350px; float: right; margin: 0; height: 226px; }
.secproductos section .colizq h2, .secproductos section .colizq h3 { margin-left: 30px; color: #FFF; font-size: 37px; line-height: 35px; text-transform: none; font-weight: 200; }
.secproductos section .colizq a { color: #FFF; font-size: 12px; line-height: 14px; margin-left: 30px; }
.secproductos section .colizq a:hover { color: #EEE; }
.secproductos section .colizq h2 { margin-top: 30px; }
.secproductos section .colizq h3 { text-transform: none; font-weight: bold; margin-bottom: 15px; }
.secproductos section .colder p { color: #FFF; margin: 25px 25px 30px 25px; }

.secproductos section > div { width: 695px; }

.secproductos .sec01 > div { background-color: #007AC2; background-color: rgba(0,122,194,0.7); } /* Cl2 */
.secproductos .sec02 > div { background-color: #A3348B; background-color: rgba(163,52,139,0.8);  } /* NaOH */
.secproductos .sec03 > div { background-color: #EE7336; background-color: rgba(238,115,54,0.7); } /* HCl */
.secproductos .sec04 > div { background-color: #6FB52B; background-color: rgba(111,181,43,0.7); } /* NaClO */
.secproductos .sec05 > div { background-color: #2FB3E8; background-color: rgba(47,179,232,0.8); } /* Liquido */
.secproductos .sec06 > div { background-color: #FFBC00; background-color: rgba(255,188,0,0.9); } /* KOH */
.secproductos .sec07 > div { background-color: #9D9C9C; background-color: rgba(157,156,156,0.9); } /* CaCl2 */
.secproductos .sec08 > div { background-color: #DC2A2A; background-color: rgba(220,42,42,0.7); } /* Solido */
.secproductos .sec02 .colder, .secproductos .sec04 .colder, .secproductos .sec06 .colder { background-color: #FFF; }
.secproductos .sec02 .colder p { color: #933E97; }
.secproductos .sec04 .colder p { color: #57B947; }
.secproductos .sec06 .colder p { color: #F7911D; }



.seccontacto .sec01 form#form_contacto .filaform { overflow: auto; margin-top: 10px; }
.seccontacto .sec01 form#form_contacto .filaform > div { height: 22px; line-height: 22px; }
.seccontacto .sec01 form#form_contacto .flizq { float: left; display: block; width: 130px; text-align: right; }
.seccontacto .sec01 form#form_contacto .flizq.datoobligatorio { margin-left: 140px; text-align: left; margin-top: 2px; }
.seccontacto .sec01 form#form_contacto .flder { float: right; width: 280px; text-align: left; margin-right: 30px; background-color: #FFF; background-color: rgba(255,255,255,0.8); color: #444; }
.seccontacto .sec01 form#form_contacto .flder:focus, .seccontacto .sec01 form#form_contacto .flder:active, .seccontacto .sec01 form#form_contacto .flder:hover { background-color: #FFF; color: #000; }
.seccontacto .sec01 h2.flder { margin-left: 140px; }
.seccontacto .sec01 form#form_contacto .flder#form_mensaje { height: 80px; line-height: 20px; }
.seccontacto .sec01 form#form_contacto .flder#form_boton { background-color: #FFF; width: 120px; color: #12B5EA; text-transform: uppercase; text-align: center; font-size: 14px; cursor: pointer; }
.seccontacto .sec01 form#form_contacto .flder#form_boton:hover { background-color: #D5DF3D; color: #0081C6; }
.seccontacto .sec01 .colizq { margin-top: 0; }
.seccontacto .sec01 .colder { margin-top: 12px; }

.seccontacto .sec02 .colizq { width: 300px; }
.seccontacto .sec02 .colder { width: 500px; padding-bottom: 30px; }
.seccontacto .sec02 .colizq h2 { color: #8B9A92; }


#popup_contacto { background-image: url(../img/bg/popupcontacto_ok.jpg); background-size: 100% auto; background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#popup_contacto.algunerror { background-image: url(../img/bg/popupcontacto_error.jpg); }
#popup_contacto .cuerpo.enbase { top: 0; margin-top: 70px; }
#popup_contacto .wrapperavg { width: 100%; }
#popup_contacto .sec01 .colizq { width: 180px; }
#popup_contacto .sec01 .colder { width: 300px; margin-top: 52px; }


.cuerpo, div.cuerpo, div.slide, .cuerpo .long, .enbase, .short, .cuerpo.short, .cuerpo.enbase.short, .cuerpo.enbase.long, .cuerpo.enbase, .cuerpo.long, div.slide div.cuerpo, div.slide div.enbase, div.slide div.long, div.slide div.short {  margin-top: 0; position: relative; top: auto; }
.cuerpo {  padding-top: 180px; }
.cuerpo, div.cuerpo, div.slide div.cuerpo, div.slide div.enbase, div.slide div.long, div.slide div.short { margin-top: 0; }
div.cuerpo { z-index: 0; }



.ipad.slide { position: relative; float: none; clear: both; }
.ipad.cuerpo { position: relative; }
footer.ipad, header.ipad { position: relative; float: none; clear: both; }

.ipad.secprehome, .ipad.sechome { height: 100%; }

.ipad.sechome, .ipad.secnosotros, .ipad.secplantas, .ipad.secproductos, .ipad.seclogistica, .ipad.seccalidad, .ipad.secrse, .ipad.secrrhh, .ipad.seccontacto { padding-bottom: 80px; padding-top: 80px; }

.ipad .cuerpo { top: 0; }

.ipad.secprehome .cuerpo .wrapperavg, .ipad.sechome .cuerpo .wrapperavg { margin-top: 10%; }

.ipad.slide { *zoom: 0.85; zoom: 0.85; border-bottom: 2px solid #FFF; }

.ipad.linkarriba { display: block; color: #8FAA2D; position: absolute; width: 100px; height: 30px; font-size: 14px; line-height: 30px; text-transform: uppercase; background-color: #D5DF3D; bottom: 0; right: 0; text-align: center; }
.ipad.linkarriba:hover { color: #12B5EA; }

.ipad.secplantas section { margin-left: 0; margin-right: 0; }
.ipad.secplantas section h2, .ipad.secplantas section h3, .ipad.secplantas section p, .ipad.secplantas section ul { margin-left: 145px; margin-right: 145px; }