@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Humnst777 BlkCn BT';
    src: url('fonts/Humanist777BT-BlackCondensedB.eot');
    src: url('fonts/Humanist777BT-BlackCondensedB.eot?#iefix') format('embedded-opentype'),
        url('fonts/Humanist777BT-BlackCondensedB.woff') format('woff'),
        url('fonts/Humanist777BT-BlackCondensedB.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

.clear { width: 100%; height: 1px; clear: both; overflow: hidden}

.redes { position: absolute; top: 30px; right: 30px}
.icon-menu { position: absolute; top: 22px; left: 20px}

/*body*/
body {font-family: 'Open Sans', sans-serif; font-size:14px; line-height:150%;background: #fff;}
i { font-style:normal}
h1 {font-family: 'Humnst777 BlkCn BT'; color: #fff; font-size: 80px;text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); font-style: italic; margin-bottom:0; text-transform: uppercase}
h2, h3 {font-family: 'PT Sans', sans-serif; font-weight:700}
h2, h3, h4, h5, h6 { margin-bottom:10px; color:#ddd}
h1 { font-size:42px; line-height:130%;}
h2 { font-size:32px; line-height:120%;}
h3 { font-size:22px; line-height:120%;}
h4 { font-size:18px; line-height:120%;}
h5 { font-size:16px; line-height:120%;}
h6 {font-size:14px; line-height:120%;}

p, ul li, ul li a { font-family: opens sans, sans-serif; font-size:16px; line-height:140%; color:#ddd}
ul li { color: #ddd}


.cl-1 h2 {font-size:42px; line-height:120%;}
.cl-2 h2 {font-size:32px; line-height:120%;}
.cl-3 h2 {font-size:22px; line-height:120%;}
.cl-4 h2 {font-size:18px; line-height:120%;}
.cl-5 h2 {font-size:16px; line-height:120%;}
.cl-6 h2 {font-size:14px; line-height:120%;}

figure { position:relative}
.etiqueta { color:#fff; background:rgba(0,0,0,0.8);padding:8px 12px; box-sizing: border-box; position:absolute }

/*header*/
#header { width:100%; background:#C42027; position: fixed; top: 0; z-index: 30000}
#header inner { width:1280px; margin:0 auto; text-align: center; padding: 10px 0; display: block}

/*menu*/
.menu { background: rgba(0,0,0,0.8); width: 100%; text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd}
.menu li span, .menu li a { float: left; line-height: 45px;}
.menu li [class*="icon-"] { position: relative; width: 30px; height: 30px;}
.menu li .icon-facebook {}
.icon-facebook:before{ color: #fff; font-size: 20px}
.menu li:nth-last-child(2) .txt {position: relative}

/*slider*/
.slider, .slides { height: 100% !important}
.slider .slides li {opacity: 0; position: absolute;top: 0; left: 0;z-index: 1;width: 100%;height: inherit; overflow: hidden;}
.slider .slides li.active { z-index: 2}
.slider .slides li img {height: 100%;width: 100%;background-size: cover;background-position: 0; object-fit: cover}
.slider .slides li .caption {color: #fff;position: absolute;bottom:30px;right: 30px; width:calc(100% - 320px);opacity: 0; background: rgba(0,0,0,0.8);padding: 15px;box-sizing: border-box;}
.slider .indicators { position: absolute;text-align: center; bottom: 0; right: 30px; z-index: 300; width: calc(100% - 320px)}
.slider .indicators .indicator-item {display: inline-block; position: relative;cursor: pointer;height: 10px;width: 10px;margin: 0 12px 12px;background-color: #666;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    border-radius: 50%;
}
.slider .indicators .indicator-item.active {background-color: #ccc;}

.banners {background: rgba(0,0,0,0.8); padding: 30px; position: fixed; left: 0; top: 126px; width: 200px; height: calc(100% - 126px); z-index: 30000}
.banner {background: rgba(0,0,0,1); width: 180px; height: 180px; margin: 0 0 20px 10px}

/*cuerpo*/
.cuerpo { width:100%;  clear:both; overflow:hidden}

/*pie*/
#footer{ width:100%; height:150px;}
#footer inner { width:1280px; margin:0 auto}

/*sistema de grilla*/
.bloque { width:calc(100% - 300px); margin:0 20px 0 0; display:flex; flex-wrap: wrap; box-sizing: border-box; height: 100%; float: right}
.bloque header{ padding:20px 0; box-sizing: border-box; width:100%}
.c-banner-300x250 .cont { width:calc(100% - 300px); padding-right:3%;box-sizing: border-box; float:left}
.banner-300x250 { width:300px; height:250px; float:left}
.contacto .bloque { justify-content: center}
.bloque100 { width:100%; margin-bottom:30px }

.d3n-1d-2p { display: block; flex-wrap: nowrap}
.d3n-1d-2p .cl-12 { position: relative; left: 25.507922387054894%}
.d3n-1d-2p .cl-6:nth-child(2) { position: relative; left: -51.136063090572481%}
.d3n-1d-2p .cl-6:last-child { margin-right: 0}
.d3n-1d-2p .cl-12 figure { height: 100%}
.d3n-1d-2p .cl-12 figure img { object-fit: cover}

/*efectos bloque de notas*/
.sombra figure::after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:100%; display:block; z-index:300;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 65%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 65%,rgba(0,0,0,1) 100%);}

.header-on header { position:absolute; color:#fff; z-index:301; padding: 0 15px}
.header-on.pleno header { position:absolute; color:#fff;background:rgba(0,0,0,0.8)}

/*ceteo*/
.header-on .fecha { display:none}

.header-on.h-50 header { width:50%}
.header-on.h-60 header{ width:60%}
.header-on.h-70 header{ width:70%}
.header-on.h-80 header{ width:80%}

.pleno header { background:#000; color:#fff}

.resaltado h1, .resaltado h2 { color:#fff; background:rgba(0,10,0,0.7); display:inline;box-shadow:rgba(0,0,0,0.7) 10px 0 0 0, rgba(0,0,0,0.7) -15px 0 0 0; padding:5px; line-height:170%;}

.text-center { text-align:center}
.text-right { text-align:right}

.hover{ overflow:hidden;}
.hover h2 {transition: all 0.5s}
.hover:hover h2 { opacity:0}
.hover p { position:absolute; bottom:-100%;  background:rgba(0,10,0,0.8); left:0; width:100%; height:100%; box-sizing: border-box; transition: all 0.5s; color:#fff; padding:15px; z-index:300}
.hover:hover p { bottom:0}

.h-top header, .h-bottom header, .h-left header, .h-right header { position:absolute}
.h-top header { top:15px; bottom:auto}
.h-bottom header { bottom:15px; top:auto}
.h-left header { left:15px; right:auto}
.h-right header { right:15px; left:auto; text-align:right}

.e-100 .etiqueta { width:100%;display:block }
.e-100-r .etiqueta { width:100%;display:block; position:relative }

.e-100-r.e-bottom figure{display: flex; flex-direction: column;}
.e-100-r.e-bottom .etiqueta { order:2; bottom:0}
.e-100-r.e-bottom img { order:1}

.e-top .etiqueta { top:15px}
.e-bottom .etiqueta { bottom:15px}
.e-left .etiqueta { left:15px}
.e-right .etiqueta { right:15px}

.e-100.e-top .etiqueta { top:0}
.e-100.e-bottom .etiqueta { bottom:0}
.e-100.e-left .etiqueta { left:0}
.e-100.e-right .etiqueta { right:0}

.tabs {position: relative;overflow-x: auto; overflow-y: hidden;height: 50px;width: 100%;margin: 0 auto;white-space: nowrap; text-align: center}
.tabs.tabs-transparent {background-color: transparent}
.tabs.tabs-transparent .tab a,
.tabs.tabs-transparent .tab.disabled a,
.tabs.tabs-transparent .tab.disabled a:hover {color: rgba(255, 255, 255, 0.7)}
.tabs.tabs-transparent .tab a:hover,
.tabs.tabs-transparent .tab a.active {color: #fff}
.tabs.tabs-transparent .indicator {background-color: #fff}
.tabs.tabs-fixed-width {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex}
.tabs.tabs-fixed-width .tab { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1;flex-grow: 1}
.tabs .tab {display: inline-block;text-align: center;line-height: 45px;height: 45px;padding: 0;margin: 0;text-transform: uppercase}
.tabs .tab a {color: rgba(255, 255, 255, 0.5);display: block;width: 100%;height: 100%;padding: 0 24px;font-size: 14px;text-overflow: ellipsis;overflow: hidden;
    -webkit-transition: color .28s ease;transition: color .28s ease; box-sizing: border-box;}
.tabs .tab a:hover,
.tabs .tab a.active {background-color: transparent;color: #fff}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {color: rgba(238, 110, 115, 0.7);cursor: default}
.tabs .indicator {position: absolute;bottom: 1px;height: 3px;background-color: #FF0000;will-change: left, right}

.titulo { background: #000; font-size: 26px; color: #ddd; display: block; padding: 20px 0; width:100%; margin: 0 auto 40px; text-align: center}

.carousel {overflow: hidden;position: fixed;width: 100%;height:calc(100% - 126px)!important;-webkit-perspective: 500px;perspective: 500px; margin: 0 auto;top: 126px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

.carousel .carousel-item {display: none; width: 100%; height: 100%;position: absolute;top: 0;left: 0;}

@media only screen and (min-width: 1024px) {
[class*="cl-"] { float:left; margin-right:2.392344497607656%}
[class*="cl-"] img { width: 100%}
[class*="cl-"] header { padding: 15px 0 0}
.cl-1 { width:1.7587939698492463%}
.cl-2 {width: 6.030150753768844%}
.cl-3 {width: 10.301507537688442%}
.cl-4 {width: 14.572864321608039%}
.cl-5 {width: 18.08110552764%}
.cl-6 {width: 23.115577889447238%}
.cl-7 {width: 27.386934673366838%}
.cl-8 {width: 31.65829145728643%}
.cl-9 {width: 35.92964824120603%}
.cl-10 {width: 40.20100502512563%}
.cl-11 {width: 44.472361809045225%}
.cl-12 {width: 48.743718592964825%}
.cl-13 {width: 53.015075376884425%}
.cl-14 {width: 57.286432160804026%}
.cl-15 {width: 61.55778894472361%}
.cl-16 {width: 65.82914572864321%}
.cl-17 {width: 70.10050251256281%}
.cl-18 {width: 74.37185929648241%}
.cl-19 {width: 78.64321608040201%}
.cl-20 {width: 82.91457286432161%}
.cl-21 {width: 87.1859296482412%}
.cl-22 {width: 91.4572864321608%}
.cl-23 {width: 95.7286432160804%}
.cl-24 {width: 100%}
}

.icon-menu {display: none}
.margin-0 {margin-right: 0}

/*Servicios*/
.servicios { background: #821F22; clear: both; overflow:hidden; padding: 30px 0 40px}
.productos, .contacto { background: #fff; padding: 30px 0 0}
[id*='test-swipe-'] {padding-top: 156px}

.productos .cl-8 { border: 1px solid #ccc; padding: 10px; box-sizing: border-box; margin-bottom: 30px}

.servicios figure {margin-bottom: 20px}
.servicios img { background: #000; padding: 10px; box-sizing: border-box}
.servicios .cl { margin-bottom: 40px}

.servicios .bloque { min-height: 600px}

.productos figure span { position: absolute; top: 60px; left: 35px; color: #D2101A; font-family: 'Open sans', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 600}

#contFrm { float: left; margin-right: 50px; width: auto}
.errormsg { width: 400px;margin: 0 auto;height: auto;padding-bottom: 0;color: red;}
.campos { clear: both; overflow: hidden; margin: 0 auto 30px; width: 400px; margin: 0 auto 10px}
label { color: #333; width: 100%; display: block; padding-bottom: 5px}
input, textarea {border: 1px solid #e2e2e2; padding: 0 10px; line-height: 30px; color: #333; box-sizing: border-box; width: 100%}
textarea { line-height: 130%; height: 100px; margin-bottom: 30px}
.campos.but input, .volver { border: none; background: #5F0000; color: #fff; padding: 0 30px; float: right; width: auto; cursor: pointer}
.volver { float: none; display: inline-block}
.campos.but input:hover { background: #333} 
.exito { width: 300px; margin: 0 auto 30px}
.exito p { margin-bottom: 20px}

.dire { margin-bottom: 30px}
.dire figure { margin-bottom: 15px}
.dire figure img { width: 100%}
.dire p { color: #333; font-family: 'Open Sans', sans-serif; font-size: 12px}

::-webkit-input-placeholder{color:#fff;}
:-moz-placeholder{color:#fff;}
:-ms-input-placeholder{color:#fff;}

.ubicacion .icon-point, .ubicacion .txt { display: inline-block; position: relative}
.ubicacion .icon-point { position: relative; top: -18px; left: -5px }
.ubicacion .txt { padding-left: 24px; padding-top: 10px}

.popup img { width: 100%}
.popup { background-color: #C42027;width: 0;height: auto;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);padding: 0; position: fixed;
    z-index: 300000; opacity: 0; -moz-box-shadow: 0px 0px 10px 1px #000;-webkit-box-shadow: 0px 0px 10px 1px #000; box-shadow: 0px 0px 10px 1px #000;
    transition: all 0.5s}
    .popup.show { width: 60%; height: 0; opacity: 1; padding: 3px 3px 40.2%}

.overlay {background: #000000;top: 0;left: 0;position: fixed;z-index: -1;width: 100%;height: 100%;transition: all 0.5s;opacity: 0}
    .overlay.show { width: 100%; height: 100%;opacity:0.5; z-index: 100000}

a.close {cursor: pointer; float: right; width: 30px; height: 30px;right: -10px;position: absolute;top: -15px;text-align: center;line-height: 30px; z-index: 30000;
    font-weight: 700;background: #000;color: #fff;font-size: 20px;border-radius: 50%}
    .ver{ color: #fff; font-size: 14px; z-index: 3000; opacity: 0.7; cursor: pointer; margin: 0 0 20px 10px; display: block}
    .ver:hover{opacity: 1}

@media only screen and (max-width: 1200px) {
    .icon-menu {display: block;top: 25px; left: 25px; z-index: 3000}
	.bloque { width:calc(100% - 40px); margin: 0 auto; float: none}
    #header inner, .menu, #footer inner { width: 100%}
    .carousel .carousel-item { height: 100%}
    
    .banners{ transition: all 0.5s ease; left: -280px}
    .banners.open { left: 0}
    
    .slider .indicators { width: 100%}
}

@media only screen and (max-width: 1024px) {
    .productos figure span { position: absolute;top: 45px;left: 20px;}
}

@media only screen and (max-width: 1023px) {
    .popup.show { width:90%; padding-bottom: 60.5%}
    .slider .slides li .caption { width: calc(100% - 60px)}
    .slider .indicators { width: 100%}

    .productos figure span { position: absolute;top: 70px;left: 30px;}
    .bloque { width:calc(100% - 20px)}
	.cl-5, .cl-6{ width:31.3333%;}
	.cl-4, .cl-5:nth-child(1), .cl-5:nth-child(2){ width:48.5%;}
	.cl-5:nth-child(2), .cl-5:last-child, .cl-4:nth-child(2n), .cl-6:nth-child(3n) { margin-right:0}
	 
    .d3n-1d-2p { display: block; flex-wrap: nowrap}
    .d3n-1d-2p .cl-2 { width: 100%; margin-right:0; position: relative; left: auto}
    .d3n-1d-2p .cl-4:nth-child(2) { position: relative; left:auto;margin-right:3%; }
    .d3n-1d-2p .cl-4:last-child { margin-right: 0}
    
    .productos .cl-8 { clear: none; overflow: hidden; width: 48%;float: left; margin-right: 4%;}
    .productos .cl-8:nth-child(2n) { margin-right: 0}
    .productos .cl-8 figure { display: inline-block}
    .productos .cl-8 figure img { width: 100%}
    
}

@media only screen and (max-width: 992px) {
    .tabs {display: -webkit-box; display: -webkit-flex;display: -ms-flexbox;display: flex}
    .tabs .tab {-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1}
    .tabs .tab a {padding: 0 4%}
}

@media only screen and (max-width: 767px) {
    [id*='test-swipe-'] { padding-top: 85px}
    .icon-menu {display: block;top: 10px;left: 10px;}
    .banners { height: calc(100% - 104px); top: 52px; box-sizing: border-box; width: 275px}
    .redes { position: absolute;top: 60px;right: 50%;transform: translateX(50%);}
    .mfp-content .mfp-with-anim.detalle { height: 100%}
    textarea { margin-bottom:0}
    input, textarea, .campos, .productos .cl-8 { width: 100%; margin-right: 0}
    .slider .indicators { bottom: 60px; right: 0}
    .servicios img { width: 100%}
    #header inner { padding: 10px 0}
    .slider .slides li { height: 100%; background: #000}
    .slider .slides li img { width: 100%; background-position: center; height: calc(100% - 100px); position: relative; top: 50px; object-fit: cover}
    .menu li  {width: 16%; text-align: center}
    .menu li span { font-size: 0}
    .menu li [class*="icon-"] {margin: 0 auto; float: none; display: block}
    h1 { font-size: 22px; position: relative;top: 0; z-index: 200}
    .bloque { width:calc(100% - 10px); height: calc(100% - 70px)}
    .productos .bloque { overflow-y: auto}
    .cl-1, .cl-2, .cl-3, .cl-4, .cl-5, .cl-5:nth-child(1), .cl-5:nth-child(2), .cl-6, .cl-7, .cl-8, .cl-9 { width:100%; margin-right:0; margin-bottom:20px}
    .campos { margin-bottom: 20px}
    ::-webkit-input-placeholder{color:#aaa;}
:-moz-placeholder{color:#aaa;}
:-ms-input-placeholder{color:#aaa;}
    label{ display: none}
    #contFrm { margin-right: 0}
    .menu { position: fixed; bottom: 0; left: 0}
    .tabs { height: 50px}
    .tabs .tab {height: 50px; line-height: 50px}
    
    .titulo { padding: 10px 0; margin-bottom: 20px}
    
    .carousel { top: 51px; height: calc(100% - 51px) !important}
    .slider .slides li .caption { bottom: 80px}
    .nosotros .slider .slides li .caption { bottom: 100px; top: auto; height:auto;}
    .direcciones { padding-bottom: 60px}

    .slider-css { overflow-x: auto;white-space: nowrap;overflow-y: hidden; width:100%; display:block;}
    .slider-css>div { float:none; display:inline-block; width:85% !important}
    .slider-css>div header{white-space: normal;}

    ::-webkit-scrollbar {width: 0px; height:0;background: transparent;}
    ::-webkit-scrollbar-thumb {background: none;}
}