body, html {width: 100%; height:100%; margin:0 auto; padding:0; }

@font-face { font-family: gillsansmt; src: url(../fonts/gillsansmt.ttf); } 
@font-face { font-family: gillsansmtbold; src: url(../fonts/gillsansmtbold.ttf); }
@font-face { font-family: helvetica; src: url(../fonts/helvetica.ttf); } 

/* ............................*/

#nav {border:0px; background:#1F2244;}
.navbar_contenedor_grande {width:100%; }
.navbar_contenedor {width:100%; max-width: 1200px; padding: 20px 0px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.sin_padding {padding: 0px 0px;}

.navbar-header {line-height:47px;}
.nav img {height:25px; position:relative; top:-2px; }

.logoloco {height:60px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; }
.logoloco2 {height:40px;}

#myNavbar ul li a {font-family:gillsansmt; font-size:1em; padding:10px 15px; line-height: 30px; color:#fff; cursor:pointer; outline:0;}
#myNavbar ul li a:link, a:visited {text-decoration: none; color:#FFF; outline:0; }
#myNavbar ul li a:hover {color:#5F9FD5;}
#myNavbar ul li.active a {background:#5F9FD5;}

/* En resoluciones menores a 768px */
@media screen and (max-width: 768px){
.navbar_contenedor, #myNavbar, #myNavbar ul {padding:0px; margin:0px auto; }	

.navbar-header {padding-left:40px; text-align:center;}
#myNavbar ul li a { border-bottom: solid 1px #5F9FD5; text-align:center; }
#myNavbar ul li a:hover {color:#5F9FD5;}
#myNavbar ul li.active a {background:#1F2244;}
.logoloco {height:38px; }
}

/* ............................*/
	
#inicio {padding-top:0px; width:100%; height:100%; background-color: #fff; text-align:center;  }
#inicio_slider {width:100%; height: 100%; box-shadow: 0px 50px 50px #000;}
#swiper-slide_on {width:100%; height:100%; text-align: center; display:table;}
#swiper-slide_on_on {display: table-cell; vertical-align:middle;}
#swiper-slide_on_on img {height: 300px;}
#swiper-slide_on_on p {font-family:gillsansmt; font-size:2em; color:#fff; text-shadow: 0px 0px 10px #000; padding: 10px 30px;}

.slide_01 {background:#c6c2bd; background-image:url(../img/fondo_inicio_01.jpg); background-size:cover; background-position:center;}
.slide_02 {background:#c2b9ab; background-image:url(../img/fondo_inicio_02.jpg); background-size:cover; background-position:center;}

@media screen and (max-width: 768px){
#inicio {padding-top:50px; }
#inicio_slider {box-shadow: 0px 20px 20px #000; }
#swiper-slide_on_on img {width: 50%; height:auto; }
}

/* ............................*/
	
#quienessomos {padding:50px 0px 0px 0px; width:100%; height:100%; background-color: #D1D3D4; text-align:center; background-image:url(../img/fondo_somos.jpg); background-size:cover; background-position: center; background-attachment:fixed; }

#quienessomos_contenedor {width:100%; height:100%; max-width:1200px; padding:0px;  }

#quienessomos_contenedor_2 { height:100%; display:table; padding:0px; }
#quienessomos_contenedor_2_on { display:table-cell; vertical-align:middle; text-align:left; padding: 0px; }
#quienessomos_contenedor_2_on h3 {font-family:gillsansmt; font-size:1.5em; color: #fff; line-height:1.5em; padding:0px 0px 0px 10px; margin:0 auto; text-shadow: 0px 0px 10px #000}

@media screen and (max-width: 1200px){
#quienessomos {padding:50px 30px 0px 30px }
}

@media screen and (max-width: 768px){
#quienessomos {height:auto; padding: 50px 20px 0px 20px;}
#quienessomos_contenedor_2_on {text-align: center; padding: 0px;}
#quienessomos_contenedor_2_on h3 {padding: 0px 0px 50px 0px;}
}

/* ............................*/
	
#productos {padding:50px 0px 100px 0px; text-align:center; background: #fff; /* For browsers that do not support gradients */     background: -webkit-linear-gradient(#fff, #D4D1C2); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#fff, #D4D1C2); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#fff, #D4D1C2); /* For Firefox 3.6 to 15 */ background: linear-gradient(#fff, #D4D1C2); /* Standard syntax (must be last) */}
#productos_contenedor {width:100%; height:100%; max-width:1200px; display:inline-block; text-align:left; padding:0px; }
#productos_titulo h2 {font-family:gillsansmtbold; font-size:4em; color: #000; padding:40px 20px; margin:0 auto;  text-align:center; text-shadow: -3px -3px 0px #FFFDDE; }

#productos_detalle { padding: 0px; }
.productos_detalle_1 { background:#F92D52; }
.productos_detalle_2 { background:#F93B2F; }
.productos_detalle_3 { background:#F99205; }
.productos_detalle_4 { background:#FCC803; }
.productos_detalle_5 { background:#4ED55F; }
.productos_detalle_6 { background:#5AC4F6; }
.productos_detalle_7 { background:#36A6D6; }
.productos_detalle_8 { background:#0376F7; }

#productos_detalle_img { padding: 0px; text-align:center; }
#productos_detalle_img img { width:100%; height: auto; max-height: 250px; max-width: 250px; padding:10px; }

#productos_detalle_txt {}
#productos_detalle_txt h3 {font-family: gillsansmtbold; font-size:1.2em; color:#fff; padding-top: 50px;}
#productos_detalle_txt h4 {font-family: gillsansmt; font-size:1.2em; color:#fff;}

@media screen and (max-width: 1200px){
#productos_detalle_txt h3 {padding-top:20px;}
}

@media screen and (max-width: 768px){
#productos {padding:50px 0px 0px 0px; background: #333;}
#productos_titulo h2 {font-size:2.8em; padding: 20px 0px 60px 0px; text-align:center; color:#fff; text-shadow: none;}
#productos_detalle_txt h3 {font-size:1em; padding-top:0px;}
#productos_detalle_txt h4 {font-size:1em; }
}

/* ............................*/
	
#contacto {padding:50px 0px 0px 0px; height: calc(100% - 80px); text-align:center; background-color: #fff; background-image:url(../img/fondo_contacto.jpg); background-size:cover; background-position:center; }
#contacto_contenedor {width:100%; height:100%; max-width:1200px; display:inline-block; text-align:left; padding:0px; }
#contacto_data {height:100%; display:table; padding:0px 10px 0px 0px; }
#contacto_data_on {display:table-cell; vertical-align:middle;}
#contacto_data_on h2 {font-family:gillsansmtbold; font-size:4em; color: #000; padding:0px 0px 10px 0px; margin:0 auto; text-shadow: -3px -3px 0px #FFFDDE; }
#contacto_data_on h3 { font-family:gillsansmt; font-size:1.5em; color:#000; padding:10px 0px; margin:0 auto; }
#contacto_data_on h3 strong {font-family:gillsansmtbold; }
#contacto_data_on h3 a:link, a:visited {font-family:gillsansmtbold; text-decoration: none; outline:0; color:#000; }
#contacto_data_on img {height:20px; width:auto; padding-right:8px; position:relative; top:-2px; }

#contacto_formulario {height:100%; display:table; padding:0px; }
#contacto_formulario_on {display:table-cell; vertical-align:middle; text-align:right; padding:50px 0px 0px 0px;  }
#form_nombre, #form_email, #form_telefono, #form_mensaje {width: 100%; color: #000; margin:10px 0px; padding:10px 0px; font-family:gillsansmt; font-size:1.5em; text-indent:10px; display:inline-block;}
#submit {width: 25%; margin:10px 0px; padding:10px 0px; font-family:gillsansmt; font-size:1.5em; background:#231F20; color:#FFF; display:inline-block; transition-duration: 0.4s; border: 0px;}
#submit:hover {background:#FFF; color: #231F20; border: 0px;}

@media screen and (max-width: 1200px){
#contacto {padding:50px 30px 0px 30px }
}
	
@media screen and (max-width: 768px){
#contacto {height:auto; padding:50px 20px 0px 20px }
#contacto_contenedor {height:auto; }
#contacto_data {height:auto; padding: 20px 0px 0px 0px;}
#contacto_data_on h2 {font-size:2.8em; padding: 10px 0px;}
#contacto_data_on h3 {font-size:1.2em; padding: 10px 0px;}

#contacto_formulario {height:auto; padding: 0px 0px 50px 0px; width: 100%;}
#contacto_formulario_on {padding:20px 0px 0px 0px; }
#form_nombre, #form_email, #form_telefono, #form_mensaje { font-size:1.2em; padding:5px 0px; margin:5px 0px;}
#submit {font-size:1.2em; padding:5px 0px;}
}

/* ............................*/
	
#footer {width:100%; height:80px; background:#231F20; text-align:center; }
#footer a:link, a:visited {font-family:gillsansmt; font-size:.8em; margin:0 auto; line-height:80px; color:#fff; text-decoration: none; outline:0;}
#footer a:link strong, a:visited strong {font-family:gillsansmtbold; color:#C49A6C; }
#footer a:hover {color:#C49A6C; }
#footer a:hover strong {color:#fff; }


/* ............................*/


creditos_jlx {display:none; }