ol { color: white; } /*--------------------------------------------resets and Aux Styles---------------------------------------*/ @import url("animate.css"); html, body, div, img, a, p, h1, h2, h3, h4, h5, form, dl, dt, dd, code, * { margin:0px; padding:0px; border:none; } ul { list-style-type:none;} .noborder { border: none!important; } .t_right { text-align: right; } .t_left { text-align: left; } .t_center { text-align: center; } .f_left { float: left; } .f_right { float: right; } .m_boton { margin-bottom:10px; } .overflow-hidden { overflow:hidden; } .overflow-visible { overflow:visible; } .margin-10 { margin:10px } .margin-top-25 { margin-top: 25px; } .clear { clear:both; } a { text-decoration:none; } /* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /*--------------------------------------------reset---------------------------------------*/ /* ---------- GENERAL ---------*/ html { background:#000; } body { font-family: 'Oswald', sans-serif !important; font-size:14px; background: #000;} .wrapper { margin:0 auto;} /* --------- HEADER ----------*/ #header { height: 15vh; background: url(../../img/web/header/shadow.png) center bottom no-repeat; background-size: 85% auto; z-index: 3; position: absolute; top: 0; -webkit-animation: fadeInDown 0.5s ease-in-out; -o-animation: fadeInDown 0.5s ease-in-out; animation: fadeInDown 0.5s ease-in-out; -webkit-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;} #header .top-bar{ height: 100%;} #header .top-bar .title-area{ float: left; position: absolute; left: 50%; margin-left: -7%; padding: 0; width: 14%;} .top-bar-section{ height: 6vh; position: absolute; bottom: 1vh; width: 100%;} .top-bar-section .has-dropdown > a:after{ display: none;} #header nav{ height: 100%; background: url(../../img/web/header/border-bottom-header.png) center 15vh no-repeat; background-size: 100% auto;} #header nav ul{ margin: 0;} #header nav ul li{ text-align: center; font-family: 'Oswald', sans-serif; position: relative; background:none; padding: 0; transition: 0.3s; } #header nav ul li a:hover{ background-color: #db2129; } #header nav ul li a:hover p{ background-color: #db2129; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } #header nav ul li.active a{ background-color: #db2129; cursor: pointer; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; } #header nav ul li.active a p{ background-color: #db2129; cursor: pointer; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out;} #header nav ul li a{ background: none; font-family: 'Oswald', sans-serif; font-size: 0.9em; padding: 3px 10px !important; font-weight: 300; position: relative; z-index: 1; line-height: 1em; padding: 5px 10px; display: inline-block; width: auto;} #header nav ul li a p{ font-weight: 300; font-size: 1.1em;} #header nav ul li.has-dropdown a{ padding-right: inherit;} #header nav ul li.has-dropdown ul.dropdown{ background: url(../../img/web/header/pointer.png) center top no-repeat; padding-top: 15px; width: 135px; left: 50%; margin-left: -67.5px;} #header nav ul li.has-dropdown:hover ul.dropdown{ -webkit-animation: fadeInDown 0.5s ease-in-out; -o-animation: fadeInDown 0.5s ease-in-out; animation: fadeInDown 0.5s ease-in-out;} #header nav ul li.has-dropdown ul li{ background: #fcd9cde6;} #header nav ul li.has-dropdown ul li:first-child{ padding-top: 10px; background-image: url(../../img/web/header/pointer.png); background-position: center -14.5px; background-repeat: no-repeat;} #header nav ul li.has-dropdown ul li:last-child{ padding-bottom: 10px;} #header nav ul li.has-dropdown ul li a{ background: none !important; color: #7d6259; font-weight: 300; font-size: 0.9em; padding: 0.9375rem !important; display: block; width: 100%;} #header nav ul li.has-dropdown ul li a:hover{ background:none; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none;} #header nav ul li.has-dropdown ul li:hover{ background-color: #db2129;} #header nav ul li.has-dropdown ul li:hover a{ color: #f5dfc6;} #header nav ul li.has-dropdown ul li a strong{} #header nav ul li.has-dropdown ul li.has-dropdown{} #header nav ul li.has-dropdown ul li.has-dropdown ul.dropdown{ left: 150%; background: #db2129; color: #f5dfc6; padding-top: 0; top: 0; } #header nav ul li.has-dropdown ul li.has-dropdown:hover ul.dropdown{ -webkit-animation: fadeInLeft 0.5s ease-in-out; -o-animation: fadeInLeft 0.5s ease-in-out; animation: fadeInLeft 0.5s ease-in-out;} #header nav ul li.has-dropdown ul li.has-dropdown ul li{ background: #db2129; padding: 0;} #header nav ul li.has-dropdown ul li.has-dropdown ul li:first-child{ background-image: none;} #header nav ul li.has-dropdown ul li.has-dropdown ul li a{ color: #f5dfc6;} #header nav ul li.has-dropdown ul li.has-dropdown ul li:hover{ background: #540c0a;} #header nav ul li.has-dropdown ul li.has-dropdown ul li:hover a{ color: #f5dfc6;} #header nav ul li.has-dropdown ul li.has-dropdown ul li a strong{} #header nav ul li.active ul li a{ -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none;} /* ---------- CONTENT ---------*/ .redes{ width: auto; position: fixed; top: 25%; right: 0; max-width: 86px; overflow: hidden; z-index: 3; -webkit-animation: bounceInRight 0.5s ease-in-out; -o-animation: bounceInRight 0.5s ease-in-out; animation: bounceInRight 0.5s ease-in-out; -webkit-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;} .redes ul{ float: left; margin: 0;} .redes ul li{ background: url(../../img/web/content/bg-redes.png) left center no-repeat; position: relative; right: -50px; margin-bottom: 3px; height: 26px; line-height: 26px; width: 86px; float: left; -webkit-transition: ease-in-out 0.5s all; -o-transition: ease-in-out 0.5s all; transition: ease-in-out 0.5s all;} .redes ul li:hover{ right: 0;} .redes ul li i{ float: left; margin:0 6px; color: #560907; width: 26px; line-height: 26px; text-align: center;} .redes ul li i.flag{ float: left; width: 26px; height: 13px; background: url(../../img/web/content/idioma.png) center no-repeat; margin: 7px 6px;} .redes ul li:hover i.fa-facebook{ color: #3B5998;} .redes ul li:hover i.fa-twitter{ color: #4099FF;} .redes ul li span{ color: #FFF; font-size: 13px; font-weight: 300; margin-right: 6px;} .redes ul li:hover {} .redes ul li:hover span{ } .redes ul li:hover i.flag{ background: url(../../img/web/content/hover-flag.png) center no-repeat;} #content { width: 100%; float: left; height: 100vh; overflow: hidden; -webkit-animation: fadeIn 0.5s ease-in-out; -o-animation: fadeIn 0.5s ease-in-out; animation: fadeIn 0.5s ease-in-out; -webkit-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;} #content.historia {background: url(../../img/web/content/bg_historia.jpg) center no-repeat;background-size: cover;padding-top: 13vh;} #content.mision {background: url(../../img/web/content/bg_mision.jpg) center no-repeat;background-size: cover;padding-top: 13vh;} #content.vision { background: url(../../img/web/content/bg_vision.jpg) center no-repeat; background-size: cover; padding-top: 13vh;} #content.rse { background: url(../../img/web/content/bg_rse.jpg) center no-repeat; background-size: cover; padding-top: 13vh;} #content.estrategicos { background: url(../../img/web/content/bg_estrategicos.jpg) center no-repeat; background-size: cover; padding-top: 13vh;} #content.misionales { background: url(../../img/web/content/bg_misionales.jpg) center no-repeat; background-size: cover; padding-top: 13vh;} #content.apoyo { background: url(../../img/web/content/bg_apoyo.jpg) center no-repeat; background-size: cover; padding-top: 13vh;} #content.contacto { background: url(../../img/web/content/bg_contacto.jpg) center no-repeat; background-size: cover; padding-top: 13vh;} #content.enlinea { background: url(../../img/web/content/bg_enlinea.jpg) center no-repeat; background-size: cover; padding-top: 13vh;} #content .stage{ width: 100%; height: 100vh; overflow: hidden; position: absolute; top: 0; left: 0;} #content .anthome {position: absolute; font-size: 60px; color: #FFF; text-shadow: 2px 2px 2px rgba(0,0,0,0.3); left: 2%; top: 50%; margin-top: -30px; z-index: 3;} #content .sighome {position: absolute; font-size: 60px; color: #FFF; text-shadow: 2px 2px 2px rgba(0,0,0,0.3); right: 2%; top: 50%; margin-top: -30px; z-index: 3;} #content h2{font-size: 3.5em;text-align: center;margin: 1rem 0;padding: 0.5rem 0;color: #ffeeef;font-weight: 300;font-family: 'Oswald', sans-serif;/* background-image: url(../../img/web/content/border-top-w.png), url(../../img/web/content/border-bottom-w.png); */background-position: center top, center bottom;background-repeat: no-repeat;text-transform: uppercase;-webkit-animation: fadeIn 0.8s ease-in-out;-o-animation: fadeIn 0.8s ease-in-out;animation: fadeIn 0.8s ease-in-out;-webkit-animation-delay: 1.5s;-o-animation-delay: 1.5s;animation-delay: 1.5s;-webkit-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;text-shadow: 2px 2px 2px #000000;} #content h2 span{font-weight: 700;} #content.colombiano h2{ font-size: 5.5em; text-align: center; margin: 1rem 0; padding: 0.5rem 0; color: #8b6841; font-weight: 300; font-family: 'Oswald', sans-serif; background-image: url(../../img/web/content/border-top-b.png), url(../../img/web/content/border-bottom-b.png); background-position: center top, center bottom; background-repeat: no-repeat;} #content.colombiano h2 span{ font-weight: 700;} #content.en-linea h2{ font-size: 5.5em; text-align: center; margin: 1rem 0; padding: 0.5rem 0; color: #8b6841; font-weight: 300; font-family: 'Oswald', sans-serif; background-image: url(../../img/web/content/border-top-b.png), url(../../img/web/content/border-bottom-b.png); background-position: center top, center bottom; background-repeat: no-repeat;} #content.en-linea h2 span{ font-weight: 700;} #content .modulo{} #content .modulo .menu{ -webkit-animation: fadeInRight 0.5s ease-in-out; -o-animation: fadeInRight 0.5s ease-in-out; animation: fadeInRight 0.5s ease-in-out; -webkit-animation-delay: 1.7s; -o-animation-delay: 1.7s; animation-delay: 1.7s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;} #content .modulo .menu ul{ margin: 0; margin-top: 1.5rem;} #content .modulo .menu ul li{ width: 100%; float: left; margin-bottom: 0.8rem; font-style: italic;} #content .modulo .menu ul li a{ width: 100%; float: left; height: 20px; padding: 0 0 0 1rem; background: url(../../img/web/content/bg-menu.png) left center no-repeat; background-size: 100% auto; color: #FFF; font-size: 1.05em; line-height: 20px;} #content .modulo .menu ul li:hover a{ background: url(../../img/web/content/bg-menu-active.png); background-size: 100% auto;} #content .modulo .menu ul li a.active{ background: url(../../img/web/content/bg-menu-active.png); background-size: 100% auto;} #content .modulo .menu ul li .submenu{ width: 100%; float: left; height: 0; overflow: hidden; margin:0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .menu ul li .submenu.open{ height: auto; margin-top: 0.7rem;} #content .modulo .menu ul li .submenu li{ margin-bottom: 0.3rem;} #content .modulo .menu ul li .submenu li a{ background: none; font-size: 0.9em; padding: 0 0.5rem; text-align: right; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .menu ul li .submenu li a:hover{ background: url(../../img/web/content/bg-submenu.png); background-size: 100% auto;} #content .modulo .menu ul li .submenu li a.active{ background: url(../../img/web/content/bg-submenu.png); background-size: 100% auto;} #content .modulo .contenido{ height: auto; padding: 0; position: relative; -webkit-animation: fadeIn 0.8s ease-in-out; -o-animation: fadeIn 0.8s ease-in-out; animation: fadeIn 0.8s ease-in-out; -webkit-animation-delay: 1.7s; -o-animation-delay: 1.7s; animation-delay: 1.7s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;} #content .modulo .contenido .content-display-container{ position: absolute; left: 0; top: 0;} #content .modulo .contenido .coffee{ position: absolute; left: 0; top: 0;} #content .modulo .contenido .left_side{ } #content .modulo .contenido .left_side .ornamental{ background: url(../../img/web/content/ornamental1.png) left top no-repeat; background-size: 70% auto; width: 100%; float: left; height: 11px; margin-bottom: 0.5rem;} #content .modulo .contenido .left_side .titulo{ font-size: 1.5em; font-weight: 500; font-style: italic; font-family: 'Oswald', sans-serif; color: #f5dfc6; margin-bottom: 0.5rem;} #content .modulo .contenido .left_side .image{ width:100%;text-align: center; position: relative;} #content .modulo .contenido .left_side .image a{ width: 32%; border-radius: 50%; position: absolute; top: 50%; margin-top: -17.5%; left: 50%;} #content .modulo .contenido .left_side .image a:hover{ filter: sepia(1); -webkit-filter: sepia(1); -moz-filter: sepia(1); -o-filter: sepia(1); -ms-filter: sepia(1);} #content .modulo .contenido .right_side{ } #content .modulo .contenido .right_side table{ background: none; border: none;} #content .modulo .contenido .right_side table th{ font-size: 0.9em; color: #FFF; background: #ae1814; text-align: center; font-weight: 300; padding: 0.3rem; line-height: 1.2em;} #content .modulo .contenido .right_side table th.ft-small{ font-size: 0.75em; width: 15%; } #content .modulo .contenido .right_side table td{ color: #553e25; padding: 0.4rem; background: #f5dfc6; text-align: center;} #content .modulo .contenido .right_side .info{ padding: 1rem; overflow-x: hidden; overflow-y: auto; height: 265px; margin: 2rem;} #content .info::-webkit-scrollbar{ background: url(../../img/web/content/scroll-bg.png) center bottom no-repeat;} #content .info::-webkit-scrollbar-track{ background: url(../../img/web/content/scroll-bg.png) center no-repeat;} #content .info::-webkit-scrollbar-thumb{width: 23px;border-radius:10px;background: url(../../img/web/content/scroll-bar.png) #db2129 center no-repeat;} #content .modulo .contenido .right_side .info h3{ font-family: 'Oswald', sans-serif; font-size: 3em; font-weight: 500; color: #ffffff; /* font-style: italic; */ text-shadow: 2px 2px 2px #000000; } #content .modulo .contenido .right_side .info p{ font-family: 'Oswald', sans-serif; font-size: 1.4em; color: #ffffff; font-weight: 300; line-height: 1.3em; scroll-padding-block: auto; text-align: justify; } #content .modulo .contenido .right_side .info p a{ font-weight: 500; color: #FFF;} #content .modulo .contenido .right_side .info p a:hover{ color: #f5dfc6;} #content .modulo .contenido .right_side .info dl{ width: 100%; float: left; margin-bottom: 2px;} #content .modulo .contenido .right_side .info dl dd{ width: 45.2%; background: #f5dfc6; padding: 0.5rem; text-align: right; font-size: 1.125em; color: #957149; font-weight: 300; float: left; margin-bottom: 0; min-height: 44px;} #content .modulo .contenido .right_side .info dl dt{ width: 54.5%; float: right; padding: 0.5rem; margin-bottom: 0; background: rgba(245,223,198,0.3); min-height: 44px; font-size: 1.1em; color: #FFF; font-weight: 300; line-height: 1.2;} #content .modulo .contenido .right_side .info dl dt p{ font-size: 1em; color: #FFF; font-weight: 300; line-height: 1.1; margin: 0;} #content .modulo .contenido .right_side .info dl dt dl{} #content .modulo .contenido .right_side .info dl dt dl dd{ font-size: 0.9em; min-height: 30px; padding: 0.3rem; color: #FFF; background: rgba(0,0,0,0.3);} #content .modulo .contenido .right_side .info dl dt dl dt{ font-size: 0.9em; min-height: 31px; line-height: 21px; padding: 0.3rem; background: rgba(0,0,0,0.5);} #content .modulo .contenido .cafe-verde { background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .cafe-especial { background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .taza-medida { background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .taza-medida form{ border:none;} #content .modulo .contenido .taza-medida form fieldset{ border:none; margin:0;} #content .modulo .contenido .taza-medida .left_side{} #content .modulo .contenido .taza-medida .left_side .titulo{ width: 100%; margin-bottom: 0.3rem; font-size: 1.5em; font-style: italic; color: #FFF;} #content .modulo .contenido .taza-medida .left_side p{ font-size: 1.125em; color: #FFF; line-height: 1.1em; font-weight: 300; margin-bottom: 20px;} #content .modulo .contenido .taza-medida .left_side .seleccionador{ width: 100%;} #content .modulo .contenido .taza-medida .left_side .seleccionador .numero{ } #content .modulo .contenido .taza-medida .left_side .seleccionador .numero .head{background: rgba(174,24,20,0.8); color: #FFF; font-weight: 300; font-size: 0.8em; padding: 0.5rem 0.3rem; text-align: center; margin-bottom: 0.1rem; width: 100%; float: left; min-height: 32px;} #content .modulo .contenido .taza-medida .left_side .seleccionador .numero .item{ background: #f5dfc6; font-size: 1.125em; color: #000; font-weight: 700; text-align: center; padding: 0.23rem 0.3rem; margin-bottom: 0.1rem; width: 100%; float: left; min-height: 32px;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas{} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna{ width: 19%; float: left; margin-left: 0.15rem;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna .head{ background: rgba(174,24,20,0.8); color: #FFF; font-weight: 300; font-size: 0.8em; padding: 0.3rem; text-align: center; margin-bottom: 0.1rem; width: 100%; float: left; min-height: 32px;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna .item{ background: #f5dfc6; font-size: 0.85em; color: #553e25; font-weight: 300; position: relative; margin-bottom: 0.1rem; height: auto; float: left; width: 100%; min-height: 32px; cursor: pointer;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna .item input{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 2; margin: 0; cursor: pointer;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna .item label{ width: 100%;float: left; z-index: 2; padding: 0.3rem; background: #f5dfc6; margin: 0; text-align: center; cursor: pointer;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna .item:hover label{ background: #bcd800;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna .item.active label{ background: #bcd800;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna input[type=radio]:checked + label{ background: #bcd800;} #content .modulo .contenido .taza-medida .left_side p small{ font-size: 0.85em; color: #f5dfc6; font-style: italic; margin-top: 1rem; text-align: right; width: 100%; float: left;} #content .modulo .contenido .taza-medida .right_side{} #content .modulo .contenido .taza-medida .right_side .info-taza{ border: 1px dashed #FFF; margin-bottom: 0.5rem; padding: 0.5rem;} #content .modulo .contenido .taza-medida .right_side .info-taza .line{ border-right: 1px solid #FFF;} #content .modulo .contenido .taza-medida .right_side .info-taza .line p{ color: #FFF; text-align: right;} #content .modulo .contenido .taza-medida .right_side .info-taza p{ font-size: 0.75em; color: #bcd800;} #content .modulo .contenido .taza-medida .right_side input[type=text]{ background: #96110d; box-shadow: none; border: none; margin-bottom: 0.5rem; color:#efcc9b;} #content .modulo .contenido .taza-medida .right_side input[type=email]{ background: #96110d; box-shadow: none; border: none; margin-bottom: 0.5rem; color:#efcc9b;} #content .modulo .contenido .taza-medida .right_side input[type=submit]{ width: 100%; font-size: 1.5em; color: #FFF; font-style: italic; font-weight: 600; text-align: center; border: 2px solid #FFF; background: url(../../img/web/content/bg-lines.png) center no-repeat; text-transform: capitalize; padding: 0.3rem; background-size: 90% auto; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .taza-medida .right_side input[type=submit]:hover{ background-color: rgba(255,255,255,0.2);} #content .modulo .contenido .taza-medida .right_side input::-webkit-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content .modulo .contenido .taza-medida .right_side input::-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* firefox 19+ */ #content .modulo .contenido .taza-medida .right_side input:-ms-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* ie */ #content .modulo .contenido .taza-medida .right_side input:-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content .modulo .contenido .industria-nacional{ background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .industria-nacional .image img{ border: 0.2rem solid #f5dfc6; margin: 2rem;} #content .modulo .contenido .mision { background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .mision .image img{ border: 0.2rem solid #f5dfc6; margin: 2rem;} #content .modulo .contenido .mision .info h3{ font-family: 'Oswald', sans-serif; font-size: 3em; font-weight: 500; color: #f5dfc6; font-style: italic;} #content .modulo .contenido .mision .info h3 span{ width: 60%; float: right; height: 1px; background: #f5dfc6; margin: 2rem 0 0;} #content .modulo .contenido .historia{width: 100%;background: rgba(139, 126, 126, 0.29);padding: 0.9375rem;border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;border: 0px solid #000000;} #content .modulo .contenido .historia .slide{ position: relative; height: 300px;} #content .modulo .contenido .historia .slide .ventana{ width: 83%; overflow: hidden; margin: 1rem auto 0;} #content .modulo .contenido .historia .slide .ventana .track{ width: 700%; float: left; white-space: nowrap; margin: 0; height: 100%; position: relative;} #content .modulo .contenido .historia .slide .ventana .track li{ width: 14.285%; height: 100%; display: inline-block; white-space: normal;} #content .modulo .contenido .historia .slide .ventana .track li .image{ border: 0.2rem solid #f5dfc6; padding:0; height: 96%; overflow: hidden;} #content .modulo .contenido .historia .slide .ventana .track li .image img{ width: 100%; } #content .modulo .contenido .historia .slide .ventana .track li .info{ height: 96%;} #content .modulo .contenido .historia .slide .ventana .track li .info h3{font-family: 'Oswald', sans-serif;font-size: 3em;font-weight: 500;color: #ffffff;/* font-style: italic; */text-shadow: 2px 2px 2px #000000;} #content .modulo .contenido .historia .slide .ventana .track li .info h3 span{ width: 60%; float: right; height: 1px; background: #f5dfc6; margin: 2.5rem 0 0;} #content .modulo .contenido .historia .slide .ventana .track li .info p{font-family: 'Oswald', sans-serif;font-size: 1.2em;color: #ffffff;font-weight: 300;line-height: 1.1em;text-align: justify;} #content .modulo .contenido .historia .slide .ventana .anio{position: absolute;width: 9%;height: 29.7%;background: url(../../img/web/content/circle-bg.png) center no-repeat;background-size: 100% auto;font-family: 'Lobster Two', cursive;font-size: 1.875em;text-align: center;color: #FFF;padding: 1.5rem 0;right: -2rem;top: -40px;text-shadow: 3px 2px 2px #000000;} #content .modulo .contenido .historia .slide .ventana .anio span{width: 100%;/* background: url(../../img/web/content/bg-lineas.png) top center no-repeat; */background-size: auto 100%;height: 100%;float: left;} #content .modulo .contenido .historia .slide .timeline{ width: 100%; height: 16%; background: url(../../img/web/content/timeline.png) center no-repeat; text-align: center; padding: 1.5rem 0 0;} #content .modulo .contenido .historia .slide .timeline a{ display: inline-block; width: 10px; position: relative; margin: 0 27px;} #content .modulo .contenido .historia .slide .timeline a .circle{ width: 7px; height: 7px; border-radius: 50%; background: #f5dfc6; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .historia .slide .timeline a span{position: relative;bottom: -5px;color: #ae1814;font-size: 12px;font-family: 'Lobster Two', cursive;font-weight: 700;left: -0.5rem;opacity:0;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} #content .modulo .contenido .historia .slide .timeline a:hover .circle{ background: #ae1814; box-shadow: 0px 0px 0px 2px #f5dfc6;} #content .modulo .contenido .historia .slide .timeline a.active .circle{ background: #ae1814; box-shadow: 0px 0px 0px 2px #f5dfc6; -webkit-animation: pulseBig 1s ease-in-out infinite; -o-animation:pulseBig 1s ease-in-out infinite; animation: pulseBig 1s ease-in-out infinite;} #content .modulo .contenido .historia .slide .timeline a:hover span{opacity: 1;} #content .modulo .contenido .historia .slide .timeline a.active span{ opacity: 1;} #content .modulo .contenido .historia .slide a.ant{ width: 32px; height: 32px; background: rgba(255,255,255,0.8); position: absolute; left: 3%; top: 50%; margin-top: -16px; text-align: center; line-height: 32px; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .historia .slide a.ant i{ font-size: 24px; color: #bb9b76; line-height: 30px; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .historia .slide a.ant:hover{ background: rgba(255,255,255,1);} #content .modulo .contenido .historia .slide a.ant:hover i{ color: #ae1814;} #content .modulo .contenido .historia .slide a.sig{ width: 32px; height: 32px; background: rgba(255,255,255,0.8); position: absolute; right: 3%; top: 50%; margin-top: -16px; text-align: center; line-height: 32px; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .historia .slide a.sig i{ font-size: 24px; color: #bb9b76; line-height: 30px; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .historia .slide a.sig:hover{ background: rgba(255,255,255,1);} #content .modulo .contenido .historia .slide a.sig:hover i{ color: #ae1814;} #content .modulo .contenido .proposito{ background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .proposito .image img{ border: 0.2rem solid #f5dfc6; margin: 2rem;} #content .modulo .contenido .valores{ width: 100%; background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .valores .slide{ position: relative; height: 345px;} #content .modulo .contenido .valores .slide .ventana{ width: 83%; height: 83%; overflow: hidden; margin: 1rem auto 0;} #content .modulo .contenido .valores .slide .ventana .track{ width: 700%; float: left; white-space: nowrap; margin: 0; height: 100%; position: relative;} #content .modulo .contenido .valores .slide .ventana .track li{ width: 14.285%; height: 100%; display: inline-flex; white-space: normal; align-items: center; float: left;} #content .modulo .contenido .valores .slide .ventana .track li .image{ border: 0.2rem solid #f5dfc6; padding:0; height: auto; overflow: hidden;} #content .modulo .contenido .valores .slide .ventana .track li .image img{ width: 100%; } *, *:before, *:after{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #content .modulo .contenido .valores .slide .ventana .track li .image .award{ position: absolute; height: 0px; width: 0px; border-top: 0rem solid rgba(245,213,198,0.9); border-left: 6rem solid rgba(245,213,198,0.9); border-right: 3rem solid transparent; border-bottom: 6rem solid transparent; top: 0; left: 0; } #content .modulo .contenido .valores .slide .ventana .track li .image .award i{ position: absolute; font-size: 1.5em; margin-left: -3em; margin-top: 1rem; color: #f5dfc6; text-shadow: 3px 2px 5px rgba(0,0,0,0.5);} #content .modulo .contenido .valores .slide .ventana .track li .info{ height: auto;} #content .modulo .contenido .valores .slide .ventana .track li .info h3{ font-family: 'Oswald', sans-serif; font-size: 3em; font-weight: 500; color: #f5dfc6; font-style: italic;} #content .modulo .contenido .valores .slide .ventana .track li .info h3 span{ width: 60%; float: right; height: 1px; background: #f5dfc6; margin: 2.5rem 0 0;} #content .modulo .contenido h3 span{ width: 60%; float: right; height: 1px; background: #f5dfc6; margin: 2.5rem 0 0;} #content .modulo .contenido .valores .slide .ventana .track li .info h4{ font-family: 'Oswald', sans-serif; color: #FFF; font-weight: 700; font-size: 1.5em; font-style: italic;} #content .modulo .contenido .valores .slide .ventana .track li .info p{ font-family: 'Oswald', sans-serif; font-size: 1.5em; color: #FFF; font-weight: 300; line-height: 1.1em;} #content .modulo .contenido .valores .slide .ventana .anio{ position: absolute; width: 11%; height: 26.7%; background: url(../../img/web/content/circle-bg.png); background-size: cover; font-family: 'Lobster Two', cursive; font-size: 1.875em; text-align: center; color: #FFF; padding: 1.5rem 0; right: -2rem; top: -53px;} #content .modulo .contenido .valores .slide .timeline{ width: 100%; height: 16%; text-align: center; padding: 1rem 0 0;} #content .modulo .contenido .valores .slide .timeline a{ display: inline-block; position: relative; margin: 0 27px; width: 7px; height: 7px; border-radius: 50%; background: #f5dfc6; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .valores .slide .timeline a span{ position: relative; bottom: -5px; color: #d2ba9e; font-size: 12px; font-family: 'Lobster Two', cursive; font-weight: 700; left: -0.5rem; opacity:0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .valores .slide .timeline a:hover { background: #ae1814; } #content .modulo .contenido .valores .slide .timeline a.active{ background: #ae1814; -webkit-animation: pulse 1s ease-in-out infinite; -o-animation:pulse 1s ease-in-out infinite; animation: pulse 1s ease-in-out infinite;} #content .modulo .contenido .valores .slide .timeline a:hover span{opacity: 1;} #content .modulo .contenido .valores .slide .timeline a.active span{ opacity: 1;} #content .modulo .contenido .valores .slide a.ant{ width: 32px; height: 32px; background: rgba(255,255,255,0.8); position: absolute; left: 3%; top: 50%; margin-top: -16px; text-align: center; line-height: 32px; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .valores .slide a.ant i{ font-size: 24px; color: #bb9b76; line-height: 30px; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .valores .slide a.ant:hover{ background: rgba(255,255,255,1);} #content .modulo .contenido .valores .slide a.ant:hover i{ color: #ae1814;} #content .modulo .contenido .valores .slide a.sig{ width: 32px; height: 32px; background: rgba(255,255,255,0.8); position: absolute; right: 3%; top: 50%; margin-top: -16px; text-align: center; line-height: 32px; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .valores .slide a.sig i{ font-size: 24px; color: #bb9b76; line-height: 30px; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .valores .slide a.sig:hover{ background: rgba(255,255,255,1);} #content .modulo .contenido .valores .slide a.sig:hover i{ color: #ae1814;} #content .modulo .contenido .reconocimientos{ width: 100%; background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .reconocimientos .slide{ position: relative; height: 345px;} #content .modulo .contenido .reconocimientos .slide .ventana{ width: 83%; height: 83%; overflow: hidden; margin: 1rem auto 0;} #content .modulo .contenido .reconocimientos .slide .ventana .track{ width: 500%; float: left; white-space: nowrap; margin: 0; height: 100%; position: relative;} #content .modulo .contenido .reconocimientos .slide .ventana .track li{ width: 20%; height: 100%; display: inline-flex; margin: 0; white-space: normal; align-items:center; float: left;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .image{ padding:0.2rem; height: auto; overflow: hidden; background: #f5dfc6;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .image img{ width: 100%;} *, *:before, *:after{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .image .award{ position: absolute; height: 0px; width: 0px; border-top: 0rem solid rgba(245,213,198,0.9); border-left: 6rem solid rgba(245,213,198,0.9); border-right: 3rem solid transparent; border-bottom: 6rem solid transparent; top: 0; left: 0; } #content .modulo .contenido .reconocimientos .slide .ventana .track li .image .award i{ position: absolute; font-size: 1.5em; margin-left: -3em; margin-top: 1rem; color: #f5dfc6; text-shadow: 3px 2px 5px rgba(0,0,0,0.5);} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info{ height: auto;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h3{ font-family: 'Oswald', sans-serif; font-size: 3em; font-weight: 500; color: #f5dfc6; font-style: italic;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h3 span{ width: 60%; float: right; height: 1px; background: #f5dfc6; margin: 2.5rem 0 0;} #content .modulo .contenido h3 span{ width: 60%; float: right; height: 1px; background: #f5dfc6; margin: 2.5rem 0 0;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h4{ font-family: 'Oswald', sans-serif; color: #FFF; font-weight: 700; font-size: 1.5em; font-style: italic;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info p{ font-family: 'Oswald', sans-serif; font-size: 1.5em; color: #FFF; font-weight: 300; line-height: 1.1em;} #content .modulo .contenido .reconocimientos .slide .ventana .track li:nth-child(5){ flex-wrap:wrap;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .video{ padding-bottom: 37%; position: relative;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .video iframe{ position: absolute;height: 100%;width: 100%;left: 0;top: 0;} #content .modulo .contenido .reconocimientos .slide .ventana .anio{ position: absolute; width: 11%; height: 26.7%; background: url(../../img/web/content/circle-bg.png); background-size: cover; font-family: 'Lobster Two', cursive; font-size: 1.875em; text-align: center; color: #FFF; padding: 1.5rem 0; right: -2rem; top: -53px;} #content .modulo .contenido .reconocimientos .slide .timeline{ width: 100%; height: 16%; text-align: center; padding: 1rem 0 0;} #content .modulo .contenido .reconocimientos .slide .timeline a{ display: inline-block; position: relative; margin: 0 27px; width: 7px; height: 7px; border-radius: 50%; background: #f5dfc6; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .reconocimientos .slide .timeline a span{ position: relative; bottom: -5px; color: #d2ba9e; font-size: 12px; font-family: 'Lobster Two', cursive; font-weight: 700; left: -0.5rem; opacity:0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .reconocimientos .slide .timeline a:hover { background: #ae1814; } #content .modulo .contenido .reconocimientos .slide .timeline a.active{ background: #ae1814; -webkit-animation: pulse 1s ease-in-out infinite; -o-animation:pulse 1s ease-in-out infinite; animation: pulse 1s ease-in-out infinite;} #content .modulo .contenido .reconocimientos .slide .timeline a:hover span{opacity: 1;} #content .modulo .contenido .reconocimientos .slide .timeline a.active span{ opacity: 1;} #content .modulo .contenido .reconocimientos .slide a.ant{ width: 32px; height: 32px; background: rgba(255,255,255,0.8); position: absolute; left: 3%; top: 50%; margin-top: -16px; text-align: center; line-height: 32px; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .reconocimientos .slide a.ant i{ font-size: 24px; color: #bb9b76; line-height: 30px; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .reconocimientos .slide a.ant:hover{ background: rgba(255,255,255,1);} #content .modulo .contenido .reconocimientos .slide a.ant:hover i{ color: #ae1814;} #content .modulo .contenido .reconocimientos .slide a.sig{ width: 32px; height: 32px; background: rgba(255,255,255,0.8); position: absolute; right: 3%; top: 50%; margin-top: -16px; text-align: center; line-height: 32px; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .reconocimientos .slide a.sig i{ font-size: 24px; color: #bb9b76; line-height: 30px; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .modulo .contenido .reconocimientos .slide a.sig:hover{ background: rgba(255,255,255,1);} #content .modulo .contenido .reconocimientos .slide a.sig:hover i{ color: #ae1814;} #content .modulo .contenido .catacion{ width: 100%; background: rgba(139, 126, 126, 0.29); padding: 0.9375rem; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000; } #content .modulo .contenido .catacion .image img{ border: 0.2rem solid #f5dfc6; margin: 2rem;} #content .modulo .contenido .calidad{ background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .calidad .image img{ border: 0.2rem solid #f5dfc6; margin: 2rem;} #content.colombiano .modulo .contenido h4{ font-size: 1.875em; color: #41311e; color: #41311e; font-weight: 300; font-family: 'Oswald', sans-serif;} #content.colombiano .modulo .contenido .right_side .info{ height: 255px; margin: 0 2rem 1.5rem;} #content.colombiano .modulo .contenido a{ width: 12%; height: 33%; padding: 1.3rem 0.5rem; border-radius: 50%; position: absolute; font-size: 1.125em; color: #efcc9b; font-weight: 300; bottom: -18%; left: 50%; margin-left: -6%; line-height: 1.4em; text-align: center;} #content.colombiano .modulo .contenido a strong{ color: #FFF; display: inline-block;} #content.colombiano .modulo .contenido a .linea{ width: 25%; height: 1px; background: #efcc9b; display: inline-block; margin: 0.4rem 0.1rem;} #content.colombiano .modulo .contenido a:hover{ filter: sepia(1); -webkit-filter: sepia(1); -moz-filter: sepia(1); -o-filter: sepia(1); -ms-filter: sepia(1);} #content .modulo .contenido .acidez{ background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .cuerpo{ background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content .modulo .contenido .balance{ background: rgba(0,0,0,0.33); padding: 0.9375rem;} #content.contacto{} #content.contacto #map{ z-index: 2; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223); visibility: visible; display: block; height: 14vh; width: 100%; left: 0; top: 0; border: 4px solid #96110d; float: left;} #content.contacto .mapa{} #content.contacto .mapa .info{ z-index: 2; padding: 1rem 0; position: relative; right: 0; margin: 0; background-color: #96110d;} #content.contacto .mapa .info p{ font-size: 1.25em; color: #FFF; font-weight: 300; line-height: 1.1em; display: inline-block; padding: 0.5rem; width: 100%;} #content.contacto .mapa .info p strong{ font-weight: 700; font-size: 0.9em;} #content.contacto .mapa .info p small{ font-size: 0.95em; color: #c5a373; border-left: 1px solid #c5a373; text-align: center; width: 100%; float: left; padding: 1rem 0;} #content.contacto .mapa img{ position: absolute; z-index: 1; top: 0; left: 0;} #content.contacto .mapa table{ position: relative; z-index: 2; background: none; border: none; width: 100%; margin-top: 0.5rem; float: left; margin-bottom: 0; border-spacing: 1px;} #content.contacto .mapa table th{ background-color: #96110d; color: #efcc9b; text-align: center; text-transform: uppercase; font-weight: 300; padding: 0.3rem;} #content.contacto .mapa table td{ padding: 0 0.5rem; background: rgba(139,104,65,0.95); color: #efcc9b; font-weight: 300; font-size: 1em;} #content.contacto .mapa table tr{ background: none;} #content.contacto .titulo{ width: 100%; text-align: center; font-size: 1.875em; color: #8b6841; font-weight: 300; line-height: 1.1em; padding: 1.5rem 0; background-image: url(../../img/web/content/border-bottom-b.png), url(../../img/web/content/border-top-b.png); background-position: center bottom, center top; background-repeat: no-repeat;} #content.contacto .titulo span{ font-weight: 700; font-size: 0.9em;} #content.contacto form{} #content.contacto form fieldset{ border: none;} #content.contacto form input[type=text]{ background: #96110d; border: none; box-shadow: none; color:#efcc9b;} #content.contacto form input[type=email]{ background: #96110d; border: none; box-shadow: none; color:#efcc9b;} #content.contacto form input::-webkit-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content.contacto form input::-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* firefox 19+ */ #content.contacto form input:-ms-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* ie */ #content.contacto form input:-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content.contacto form input[type=submit]{ font-family: 'Oswald', sans-serif; width: 100%; padding: 1rem; border: 2px solid #8b6841; background: url(../../img/web/content/bg-lines.png) center no-repeat; background-size: 95% auto; color: #8b6841; font-size: 2.250em; font-style: italic; text-align: center; font-weight: 500; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content.contacto form input[type=submit]:hover{ background-color: #8b6841; color:#efcc9b; border-color: #efcc9b;} #content.contacto form .select1{ width: 100%; position: relative;margin: 0 0 1rem 0;} #content.contacto form .select1 select{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 2;} #content.contacto form .select1 .select1-fondo{position:relative; background:url(../../img/web/content/select.png) 98% center no-repeat #96110d;color: #efcc9b;font-family: 'Oswald', sans-serif;font-size: 1.125em;border: none;font-weight: 200;text-transform: uppercase; z-index: 1; display: block;height: 2.3125rem;padding: 0.5rem;} #content.contacto form textarea{ background: #96110d; border: none; box-shadow: none; color:#efcc9b;} #content.contacto form textarea::-webkit-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content.contacto form textarea::-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* firefox 19+ */ #content.contacto form textarea:-ms-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* ie */ #content.contacto form textarea:-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content .login form{} #content .login form fieldset{ border: none;} #content .login form input[type=text]{ background: #96110d; border: none; box-shadow: none; color:#efcc9b;} #content .login form input[type=password]{ background: #96110d; border: none; box-shadow: none; color:#efcc9b;} #content .login form input::-webkit-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content .login form input::-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* firefox 19+ */ #content .login form input:-ms-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* ie */ #content .login form input:-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content .login form input[type=submit]{ font-family: 'Oswald', sans-serif; width: 100%; padding: 1rem; border: 2px solid #8b6841; background: url(../../img/web/content/bg-lines.png) center no-repeat; background-size: 95% auto; color: #8b6841; font-size: 2.250em; font-style: italic; text-align: center; font-weight: 500; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #content .login form input[type=submit]:hover{ background-color: #8b6841; color:#efcc9b; border-color: #efcc9b;} #content .login form textarea{ background: #96110d; border: none; box-shadow: none; color:#efcc9b;} #content .login form textarea::-webkit-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} #content .login form textarea::-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* firefox 19+ */ #content .login form textarea:-ms-input-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* ie */ #content .login form textarea:-moz-placeholder { color:#efcc9b; font-size: 1.125em; font-weight: 300;} /* ---------- FCK ---------*/ .fck { } .fck a { } .fck a:hover { } .fck p { } .fck ul { } .fck ol { } /* ---------- FOOTER -----------*/ #footer { width: 100%; position: absolute; bottom: 0; padding: 10px 0; background-color: rgba(0,0,0,0.2); -webkit-animation: bounceInUp 0.5s ease-in-out; -o-animation: bounceInUp 0.5s ease-in-out; animation: bounceInUp 0.5s ease-in-out; -webkit-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;} #footer p{ text-align: center; color: #eed2a7; font-size: 12px; font-weight: 300;} #footer p a{ color: #eed2a7; margin: 0 5px;} #footer p a:hover{ color: #540c0a; font-weight: 400;} #footer p .copy{ display: inline-block; color: #FFF; font-size: 12px; font-weight: 300; margin-left: 20px;} #footer p .copy img{ margin-right: 10px;} #footer.en-linea p .copy{ color: #767676;} #footer.procesos p { color: #4c3823;} #footer.procesos p a{ color: #4c3823;} #footer.contacto p { color: #8b6841;} #footer.contacto p a{ color: #8b6841;} #footer.contacto p .copy{ color: #8b6841;} /* ------ LIGHTBOX ----------*/ #lightbox{ width: 100%; height: 100%; position: fixed; background: url(../../img/web/content/pattern.png); z-index: 100; top: 0; left: 0; -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px);} .overlay{ width: 85%; padding: 3rem; position: fixed; border: thin dashed #FFF; z-index: 101; top: 5%; left: 50%; margin-left: -42.5%;max-height: 90vh;} .overlay .cerrar{ width: auto; float: right; border: 1px solid #FFF; font-size: 1.5em; color: #f5dfc6; font-style: italic; font-weight: 600; text-align: center; padding: 0.5rem; overflow: hidden; position: relative; min-width: 20%;} .overlay .cerrar strong{ color: #8c1612; font-weight: 400; margin-left: 1rem;} .overlay .cerrar span{ width: 100%; position: absolute; left: -150%; top:0; height: 100%; background: #FFF; z-index: -1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .overlay .cerrar:hover span{ left: 0;} .overlay .cerrar:hover{ color: #8c1612;} .overlay .cerrar:hover strong{ color: #767676;} .overlay .titulo{ width: 60%; float: left;} .overlay .titulo h2{ font-family: 'Oswald', sans-serif; font-size: 3em; color: #FFF; font-weight: 300; text-align: right;} .overlay .titulo h2 span{ font-weight: 700;} .overlay .titulo h3{ font-family: 'Oswald', sans-serif; font-size: 1.5em; font-style: italic; color: #FFF; padding: 0.3rem 0; float: right; width: 100%; text-align: right; margin-bottom: 1rem; background: url(../../img/web/content/ornamental1.png) no-repeat right top;} .overlay .grafico{ padding-top: 1rem;} .overlay .informacion{ padding-top: 1rem;} .overlay .seleccionador{ margin:0;} .overlay .seleccionador .numero{ } .overlay .seleccionador .numero .head{background: rgba(174,24,20,0.8); color: #FFF; font-weight: 300; font-size: 0.8em; padding: 0.5rem 0.3rem; text-align: center; margin-bottom: 0.1rem; width: 100%; float: left; height: 1.6rem;} .overlay .seleccionador .numero .item{ background: #f5dfc6; font-size: 1.125em; color: #000; font-weight: 700; text-align: center; padding: 0rem 0.3rem; margin-bottom: 0.1rem; width: 100%; float: left; min-height: 1.55rem;} .overlay .seleccionador .caracteristicas{} .overlay .seleccionador .caracteristicas .columna{ width: 19%; float: left; margin-left: 0.15rem;} .overlay .seleccionador .caracteristicas .columna .head{ background: rgba(174,24,20,0.8); color: #FFF; font-weight: 300; font-size: 0.8em; padding: 0.3rem; text-align: center; margin-bottom: 0.1rem; width: 100%; float: left; min-height: 1rem;} .overlay .seleccionador .caracteristicas .columna .item{ background: #f5dfc6; font-size: 0.85em; color: #553e25; font-weight: 300; position: relative; margin-bottom: 0.1rem; height: auto; float: left; width: 100%; min-height: 1rem; cursor: pointer;} .overlay .seleccionador .caracteristicas .columna .item input{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 2; margin: 0;} .overlay .seleccionador .caracteristicas .columna .item label{ width: 100%;float: left; z-index: 2; padding: 0.3rem; background: #f5dfc6; margin: 0; text-align: center; cursor: pointer; font-size: 0.8em;} .overlay .seleccionador .caracteristicas .columna .item.active label{ background: #bcd800;} .overlay .grafico table{ width: 100%; float: left; margin: 0; background: none; border: none;} .overlay .grafico table th{ background: rgba(174,24,20,0.8); color: #FFF; padding: 0.3rem; font-weight: 300; text-align: center;} .overlay .grafico table tr{ background: none !important;} .overlay .grafico table tr td:nth-of-type(1){ background: rgba(174,24,20,0.8); color: #FFF;} .overlay .grafico table tr td{ background: #f5dfc6; color: #553e25; padding: 0.3rem; font-size: 0.8em; text-align: center;} .overlay .grafico table tr td.active{ background: #bcd800;} .overlay.graph .row{ display: flex; align-items: stretch;} .overlay.graph .informacion{ display: flex; align-items: center;} .overlay.acidez{ height: 90vh; top: 50%; margin-top: -45vh; width: 95%; margin-left: -47.5%;} .overlay.acidez .grafico{ height: 63vh; overflow: hidden;} .overlay.acidez .grafico .mapa{ height: 50%; overflow: hidden; padding: 0.5rem 0;} .overlay.acidez .grafico .mapa .map{ overflow: hidden; height: 100%;} .overlay.acidez .grafico .mapa .info{ overflow-x: hidden; overflow-y: auto; height: 100%; background: rgba(0,0,0,0.3); padding: 0.9375rem; color: #FFF;} .overlay.acidez .grafico .mapa .info h4{ font-family: 'Oswald', sans-serif; color: #FFF; font-weight: 700; font-size: 1.2em;} .overlay.acidez .grafico .mapa .info dl{ } .overlay.acidez .grafico .mapa .info dl dd{ background: rgba(174,24,20,0.5); color: #FFF; font-weight: 400; margin-bottom: 2px; padding: 0.2rem;} .overlay.acidez .grafico .mapa .info dl dt{ background: rgba(187,155,118,0.5); color: #FFF; font-weight: 300; margin-bottom: 2px; padding: 0.2rem; } .overlay.acidez .grafico .organico{ height: 50%; overflow-x: hidden; overflow-y: auto; padding: 0.5rem 0;} .overlay.acidez .grafico .organico .grafica{ height: 100%;} .overlay.acidez .grafico .organico .info{ height: 100%; overflow-x: hidden; overflow-y: auto;} .overlay.acidez .informacion{ } .overlay.acidez .informacion table{ background: none; border: none; width: 100%;} .overlay.acidez .informacion table th{ padding:0.2rem; padding: 0.2rem; background: rgba(174,24,20,0.8); color: #FFF; font-weight: 300; text-align: center; font-size: 0.9em;} .overlay.acidez .informacion table tbody tr{ background: none !important; } .overlay.acidez .informacion table td{ padding: 0.2rem; background: rgba(245,223,198,0.95); color: #553e25; font-weight: 300; text-align: center;} .overlay.acidez .informacion table tr td:nth-of-type(1){ background: rgba(174,24,20,0.6); color: #FFF;} .overlay.acidez .informacion table td a{ color:rgba(255,255,255,0.7);} .overlay.acidez .informacion table td a:hover{ background: rgba(174,24,20,0.8); font-weight: 400; color: #FFF;} .overlay.acidez .informacion table td a.active{ background: rgba(174,24,20,0.8); font-weight: 400; color: #FFF;} .overlay.acidez .informacion table td i.mitaca{ width: 10px; height: 10px; border-radius: 50%; border:1px solid #553e25; display: inline-block;} .overlay.acidez .informacion table td i.main{ width: 10px; height: 10px; border-radius: 50%; background: #553e25; display: inline-block;} .overlay.acidez .informacion .convenciones{ } .overlay.acidez .informacion .convenciones .mensaje{ position: relative; margin-bottom: 1rem;} .overlay.acidez .informacion .convenciones .mensaje .pointer-down{ position: absolute; border: 10px solid rgba(245,223,198,0.75); border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; bottom: -20px; left: 24%;} .overlay.acidez .informacion .convenciones .mensaje p{ background: rgba(245,223,198,0.75); border-radius: 10px; padding: 0.5rem; line-height: 1rem; font-weight: 300; color: #553e25;} .overlay.acidez .informacion .convenciones .listado{ } .overlay.acidez .informacion .convenciones .listado dl{ width: 100%; float: left;} .overlay.acidez .informacion .convenciones .listado dl dt{ background: rgba(245,223,198,0.75); margin-bottom: 2px; text-align: center; width: 75%; float: right; color: #553e25;} .overlay.acidez .informacion .convenciones .listado dl dd .circle.main{ width: 10px; height: 10px; border-radius: 50%; border:1px solid #553e25; display: inline-block;} .overlay.acidez .informacion .convenciones .listado dl dd{ background: rgba(245,223,198,0.75); margin-bottom: 2px; text-align: center; width: 24%; float: left; height: 1.57rem; padding: 0.5rem 0;} .overlay.acidez .informacion .convenciones .listado dl dd .circle.mitaca{ width: 10px; height: 10px; border-radius: 50%; background: #553e25; display: inline-block;} .overlay.cuerpo{ height: 90vh; top: 50%; margin-top: -45vh; width: 95%; margin-left: -47.5%;} .overlay.cuerpo .grafico{ height: 63vh; overflow: hidden;} .overlay.cuerpo .grafico .mapa{ height: 50%; overflow: hidden; padding: 0.5rem 0;} .overlay.cuerpo .grafico .mapa .map{ overflow: hidden; height: 100%;} .overlay.cuerpo .grafico .mapa .info{ overflow-x: hidden; overflow-y: auto; height: 100%; background: rgba(0,0,0,0.3); padding: 0.9375rem; color: #FFF;} .overlay.cuerpo .grafico .mapa .info h4{ font-family: 'Oswald', sans-serif; color: #FFF; font-weight: 700; font-size: 1.2em;} .overlay.cuerpo .grafico .mapa .info dl{ } .overlay.cuerpo .grafico .mapa .info dl dd{ background: rgba(174,24,20,0.5); color: #FFF; font-weight: 400; margin-bottom: 2px; padding: 0.2rem;} .overlay.cuerpo .grafico .mapa .info dl dt{ background: rgba(187,155,118,0.5); color: #FFF; font-weight: 300; margin-bottom: 2px; padding: 0.2rem; } .overlay.cuerpo .grafico .organico{ height: 50%; overflow-x: hidden; overflow-y: auto; padding: 0.5rem 0;} .overlay.cuerpo .grafico .organico .grafica{ height: 100%;} .overlay.cuerpo .grafico .organico .info{ height: 100%; overflow-x: hidden; overflow-y: auto;} .overlay.cuerpo .informacion{ } .overlay.cuerpo .informacion table{ background: none; border: none; width: 100%;} .overlay.cuerpo .informacion table th{ padding:0.2rem; padding: 0.2rem; background: rgba(174,24,20,0.8); color: #FFF; font-weight: 300; text-align: center; font-size: 0.9em;} .overlay.cuerpo .informacion table tbody tr{ background: none !important; } .overlay.cuerpo .informacion table td{ padding: 0.2rem; background: rgba(245,223,198,0.95); color: #553e25; font-weight: 300; text-align: center;} .overlay.cuerpo .informacion table tr td:nth-of-type(1){ background: rgba(174,24,20,0.6); color: #FFF;} .overlay.cuerpo .informacion table td a{ color:rgba(255,255,255,0.7);} .overlay.cuerpo .informacion table td a:hover{ background: rgba(174,24,20,0.8); font-weight: 400; color: #FFF;} .overlay.cuerpo .informacion table td a.active{ background: rgba(174,24,20,0.8); font-weight: 400; color: #FFF;} .overlay.cuerpo .informacion table td i.mitaca{ width: 10px; height: 10px; border-radius: 50%; border:1px solid #553e25; display: inline-block;} .overlay.cuerpo .informacion table td i.main{ width: 10px; height: 10px; border-radius: 50%; background: #553e25; display: inline-block;} .overlay.cuerpo .informacion .convenciones{ } .overlay.cuerpo .informacion .convenciones .mensaje{ position: relative; margin-bottom: 1rem;} .overlay.cuerpo .informacion .convenciones .mensaje .pointer-down{ position: absolute; border: 10px solid rgba(245,223,198,0.75); border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; bottom: -20px; left: 24%;} .overlay.cuerpo .informacion .convenciones .mensaje p{ background: rgba(245,223,198,0.75); border-radius: 10px; padding: 0.5rem; line-height: 1rem; font-weight: 300; color: #553e25;} .overlay.cuerpo .informacion .convenciones .listado{ } .overlay.cuerpo .informacion .convenciones .listado dl{ width: 100%; float: left;} .overlay.cuerpo .informacion .convenciones .listado dl dt{ background: rgba(245,223,198,0.75); margin-bottom: 2px; text-align: center; width: 75%; float: right; color: #553e25;} .overlay.cuerpo .informacion .convenciones .listado dl dd .circle.main{ width: 10px; height: 10px; border-radius: 50%; border:1px solid #553e25; display: inline-block;} .overlay.cuerpo .informacion .convenciones .listado dl dd{ background: rgba(245,223,198,0.75); margin-bottom: 2px; text-align: center; width: 24%; float: left; height: 1.57rem; padding: 0.5rem 0;} .overlay.cuerpo .informacion .convenciones .listado dl dd .circle.mitaca{ width: 10px; height: 10px; border-radius: 50%; background: #553e25; display: inline-block;} .overlay.balance{ height: 90vh; top: 50%; margin-top: -45vh; width: 95%; margin-left: -47.5%;} .overlay.balance .grafico{ height: 63vh; overflow: hidden;} .overlay.balance .grafico .mapa{ height: 50%; overflow: hidden; padding: 0.5rem 0;} .overlay.balance .grafico .mapa .map{ overflow: hidden; height: 100%;} .overlay.balance .grafico .mapa .info{ overflow-x: hidden; overflow-y: auto; height: 100%; background: rgba(0,0,0,0.3); padding: 0.9375rem; color: #FFF;} .overlay.balance .grafico .mapa .info h4{ font-family: 'Oswald', sans-serif; color: #FFF; font-weight: 700; font-size: 1.2em;} .overlay.balance .grafico .mapa .info dl{ } .overlay.balance .grafico .mapa .info dl dd{ background: rgba(174,24,20,0.5); color: #FFF; font-weight: 400; margin-bottom: 2px; padding: 0.2rem;} .overlay.balance .grafico .mapa .info dl dt{ background: rgba(187,155,118,0.5); color: #FFF; font-weight: 300; margin-bottom: 2px; padding: 0.2rem; } .overlay.balance .grafico .organico{ height: 50%; overflow-x: hidden; overflow-y: auto; padding: 0.5rem 0;} .overlay.balance .grafico .organico .grafica{ height: 100%;} .overlay.balance .grafico .organico .info{ height: 100%; overflow-x: hidden; overflow-y: auto;} .overlay.balance .informacion{ } .overlay.balance .informacion table{ background: none; border: none; width: 100%;} .overlay.balance .informacion table th{ padding:0.2rem; padding: 0.2rem; background: rgba(174,24,20,0.8); color: #FFF; font-weight: 300; text-align: center; font-size: 0.9em;} .overlay.balance .informacion table tbody tr{ background: none !important; } .overlay.balance .informacion table td{ padding: 0.2rem; background: rgba(245,223,198,0.95); color: #553e25; font-weight: 300; text-align: center;} .overlay.balance .informacion table tr td:nth-of-type(1){ background: rgba(174,24,20,0.6); color: #FFF;} .overlay.balance .informacion table td a{ color:rgba(255,255,255,0.7);} .overlay.balance .informacion table td a:hover{ background: rgba(174,24,20,0.8); font-weight: 400; color: #FFF;} .overlay.balance .informacion table td a.active{ background: rgba(174,24,20,0.8); font-weight: 400; color: #FFF;} .overlay.balance .informacion table td i.mitaca{ width: 10px; height: 10px; border-radius: 50%; border:1px solid #553e25; display: inline-block;} .overlay.balance .informacion table td i.main{ width: 10px; height: 10px; border-radius: 50%; background: #553e25; display: inline-block;} .overlay.balance .informacion .convenciones{ } .overlay.balance .informacion .convenciones .mensaje{ position: relative; margin-bottom: 1rem;} .overlay.balance .informacion .convenciones .mensaje .pointer-down{ position: absolute; border: 10px solid rgba(245,223,198,0.75); border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; bottom: -20px; left: 24%;} .overlay.balance .informacion .convenciones .mensaje p{ background: rgba(245,223,198,0.75); border-radius: 10px; padding: 0.5rem; line-height: 1rem; font-weight: 300; color: #553e25;} .overlay.balance .informacion .convenciones .listado{ } .overlay.balance .informacion .convenciones .listado dl{ width: 100%; float: left;} .overlay.balance .informacion .convenciones .listado dl dt{ background: rgba(245,223,198,0.75); margin-bottom: 2px; text-align: center; width: 75%; float: right; color: #553e25;} .overlay.balance .informacion .convenciones .listado dl dd .circle.main{ width: 10px; height: 10px; border-radius: 50%; border:1px solid #553e25; display: inline-block;} .overlay.balance .informacion .convenciones .listado dl dd{ background: rgba(245,223,198,0.75); margin-bottom: 2px; text-align: center; width: 24%; float: left; height: 1.57rem; padding: 0.5rem 0;} .overlay.balance .informacion .convenciones .listado dl dd .circle.mitaca{ width: 10px; height: 10px; border-radius: 50%; background: #553e25; display: inline-block;} .overlay .grafico .info::-webkit-scrollbar{ background: url(../../img/web/content/scroll-bg.png) center no-repeat; width: 23px;} .overlay .grafico .info::-webkit-scrollbar-track{ background: url(../../img/web/content/scroll-bg.png) center no-repeat;} .overlay .grafico .info::-webkit-scrollbar-thumb{ width: 23px; height: 23px; background: url(../../img/web/content/scroll-bar.png) #ae1814 center no-repeat;} .overlay.politica{ height: 90vh;} .overlay .title{width: 100%; float: left;} .overlay .title h3{ text-align: center; font-size: 3em; color: #FFF; font-weight: 300; font-family: 'Oswald', sans-serif;} .overlay .title h3 span{ font-weight: 700;} .overlay .contenido{ height: 60vh; overflow: auto; width: 100%; float: left; margin-top: 4vh;} .overlay .contenido::-webkit-scrollbar{ background: url(../../img/web/content/scroll-bg.png) center no-repeat; width: 23px; background-size: auto 100%;} .overlay .contenido::-webkit-scrollbar-track{ background: url(../../img/web/content/scroll-bg.png) center no-repeat; background-size: auto 100%;} .overlay .contenido::-webkit-scrollbar-thumb{ width: 23px; height: 23px; background: url(../../img/web/content/scroll-bar.png) #ae1814 center no-repeat;} .overlay .contenido h4{ font-size: 1.5em; font-weight: 300; color: #e7d2bb; font-family: 'Oswald', sans-serif; margin-bottom: 1rem;} .overlay .contenido p{ font-size: 1.3em; font-weight: 300; color: #FFF; font-family: 'Oswald', sans-serif; line-height: 1.1em; margin-bottom: 1rem; padding: 0 0.5rem 0 0;} .overlay .contenido ul{} .overlay .contenido ul li{ width: 100%; float: left; border-bottom: 1px solid #7d7d7d; padding: 1rem 0;} .overlay .contenido ul li .empresa{ color: #e7d2bb; font-weight: 300; font-size: 1.5em; margin-bottom: 1rem;} .overlay .contenido ul li .direccion{ font-size: 1.125em; color: #FFF;} .overlay .contenido ul li a{ font-size: 1.125em; color: #ae1814;} .overlay.indicadores { height: 90vh;} .overlay.indicadores .contenido ul li{ border-bottom: none; background: #e7d2bb; padding: 0.5rem; margin-bottom: 0.2rem;} .overlay.indicadores .contenido ul li .t_left{ font-size: 1.3em; color: #96110d; font-weight: 700;} .overlay.indicadores .contenido ul li .t_right{ font-size: 1.2em; color: #282828; font-weight: 300;} .overlay.indicadores .contenido ul li .t_right span{ color: #96110d; font-weight: 700; margin-right: 8px;} .overlay .fecha{ width: 100%; float: left;} .overlay .fecha .mes{ width: 23%; margin: 0 auto; background: url(../../img/web/content/ribbon.png) center top no-repeat; background-size: 100% auto; height: 3rem; color: #FFF; font-size: 1.25em; text-align: center; font-family: 'Lobster Two', cursive; display: flex; justify-content: center;} .overlay .fecha .mes span{ display: inline-block; height: 1px; background: #ff4a45; margin: 1rem 5px; width: 20px;} .overlay .fecha .dia{ width: 4%; margin: 0 auto; background: #e7d2bb; border-radius: 50%; padding: 0.5rem 0; text-align: center; position: absolute; left: 50%; margin-left: -2%; margin-top: -1.6rem; height: 2.2rem; font-size: 1.15em; color: #96110d; border: 2px solid #e6e6e6; line-height: 1em;} .overlay.aviso { height: 90vh;} .overlay.enlaces { height: 90vh;} .overlay.ciclo .contenido { overflow: hidden;} .overlay.ciclo .contenido .texto{ height: 60vh;overflow: auto;} .overlay.trilladoras{ height: 90vh; top: 50%; margin-top: -45vh;} .overlay.trilladoras .cerrar{ position: absolute; right: 2rem; top: 2rem;} .overlay.trilladoras .contenido{ height: 65vh; margin-top: 2vh; overflow: inherit; text-align: center; display:flex; align-items:center;} .overlay.trilladoras .contenido img{ height: auto; max-height: 522px;} .overlay-contacto{ width: 50%; padding: 2rem; position: fixed; border: thin dashed #FFF; z-index: 101; top: 50%; left: 50%; margin-left: -25%; height: 50vh; margin-top: -25vh; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center;} .overlay-contacto h3{ font-size: 3em; text-align: center; color: #FFF; font-family: 'Oswald', sans-serif; font-weight: 700; float: left; margin: 2rem auto 1rem; width: 100%;} .overlay-contacto i.fa-check{ font-size: 3em; color: #5bd509; border: 2px solid #5bd509; border-radius: 50%; width: 69px; height: 69px; line-height: 69px; text-align: center;} .overlay-contacto i.fa-close{ font-size: 3em; color: #e00202; border: 2px solid #e00202; border-radius: 50%; width: 69px; height: 69px; line-height: 69px; text-align: center;} .overlay-contacto p{ font-size: 1.8em; color: #FFF; font-weight: 300; font-family: 'Oswald', sans-serif; line-height: 1.1; text-align: center;} .overlay-contacto .cerrar{ width: auto; float: right; border: 1px solid #FFF; font-size: 1.5em; color: #f5dfc6; font-style: italic; font-weight: 600; text-align: center; padding: 0.5rem; overflow: hidden; position: absolute; right: 1rem; top: 1rem;} .overlay-contacto .cerrar strong{ color: #8c1612; font-weight: 400; margin-left: 1rem;} .overlay-contacto .cerrar span{ width: 100%; position: absolute; left: -150%; top:0; height: 100%; background: #FFF; z-index: -1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .overlay-contacto .cerrar:hover span{ left: 0;} .overlay-contacto .cerrar:hover{ color: #8c1612;} .overlay-contacto .cerrar:hover strong{ color: #767676;} #overlay-inicio{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 101; background: rgba(0,0,0,0.75); display: flex; align-items:center; justify-content:center; } #overlay-inicio .contenido{ width: 80%; max-width: 560px; padding-bottom: 25%; position: relative; border: 2px solid #FFF; } #overlay-inicio .contenido .cerrar{ width: 25px; height: 25px; line-height: 25px; text-align: center; color: #FFF; font-size: 18px; background: #e00202; position: absolute; right: -25px; top: -25px; } #overlay-inicio .contenido iframe{ position: absolute; width: 100%; left: 0; top: 0; } .loading{ width: 100%; height: 100%; position: fixed;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d21f27+0,471d00+100 */ background: #d21f27; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #d21f27 0%, #471d00 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#d21f27), color-stop(100%,#471d00)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #d21f27 0%,#471d00 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #d21f27 0%,#471d00 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #d21f27 0%,#471d00 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #d21f27 0%,#471d00 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d21f27', endColorstr='#471d00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ z-index: 100; top: 0; left: 0; -webkit-animation: fadeIn 0.5s ease-in-out; -o-animation: fadeIn 0.5s ease-in-out; animation: fadeIn 0.5s ease-in-out;} .loading .content{ width: 310px; height: 348px; position: absolute; top: 50%; left: 50%; margin-left: -155px; margin-top: -174px; background: url(../../img/web/content/logo-loading.png), url(../../img/web/content/loading.gif) center no-repeat;} /*--------- TABLET -----*/ @media only screen and (min-width: 40.063em) and (max-width: 64em) { #header{ background: none;} #header nav{ width: 100%; background: none; float: left; height: auto;} #header .top{ background: url(../../img/web/header/shadow.png) center bottom no-repeat; background-size: 85% auto; width: 100%; float: left; text-align: center;} #header .top .title-area{ display: inline-block; background: url(../../img/web/header/border-bottom-header.png) center no-repeat; background-size: 100% auto; width: 100%; padding: 0.5rem 0;} #header .bottom{ background: #ae1814; width: 100%; float: left; height: auto; position: relative; margin-top: 0.4rem;} #header .bottom ul{ width: 100%; float: left; text-align: center;} #header .bottom ul li{display: inline-block; width: auto; float: none; margin: 0.5rem 1rem; } #header .bottom ul li:hover{ } #header nav .bottom ul li a{ -webkit-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out;} #header nav .bottom ul li.active a {opacity: 1;-ms-transform: none;-webkit-transform: none;transform: none;background: #ae1814;} #header nav .bottom ul li:hover a {opacity: 1;-ms-transform: none;-webkit-transform: none;transform: none;background: #ae1814;} #header nav .bottom ul li.active a p{ -ms-transform: none; -webkit-transform: none; transform: none;} #header nav .bottom ul li:hover a p{ -ms-transform: none; -webkit-transform: none; transform: none;} #header nav .bottom ul li.title{ display: none;} #header nav .bottom ul li.parent-link{ display: none !important;} #header .bottom ul li a{ color: #FFF;} #header .bottom ul li.has-dropdown{} #header .bottom ul li.has-dropdown .dropdown{} #header .bottom ul li.has-dropdown ul li{ background: #f5dfc6; margin: 0; width: 100%;} #header .bottom ul li.has-dropdown .dropdown li.has-dropdown > a:after { border: none; content: "\00bb"; top: 0.16667rem; right: 5px;} #header .redes{ display: block; position: absolute; right: 5%; max-width: none;} #header .redes ul{ } #header .redes ul li{ width: 30px; height: 30px; background-color: #96110d; border-radius: 50%; text-align: center; line-height: 30px; right: 0; margin: 0 0.25rem;} #header .redes ul li a{ padding: 0 !important;} #header .redes ul li span{ display:none;} #header .redes ul li i{ margin: 0; font-size: 18px; line-height: 30px;} #header .redes ul li i.flag{ padding: 0; margin: 0; text-align: center;} #header .redes ul li:hover{ width: auto; border-radius: 30px; padding: 0.3rem;} #header .redes ul li:hover span{ display: block; float: left; margin-right: 5px;} #header .redes ul li:hover i{ -ms-transform: none; -webkit-transform: none; transform: none; float: left; line-height: 20px;} #header .redes ul li:hover a{ background: none; -ms-transform: none; -webkit-transform: none; transform: none; float: left;} .redes{ display: none;} #content {height: auto; min-height: 100vh;} #content .modulo .contenido{ height: auto; margin-bottom: 3rem;} #content .modulo .contenido .content-display-container{ position: relative;} #content .modulo .contenido .coffee{ position: relative;} #content .modulo .contenido .left_side .image a{ padding: 0;} #content .modulo .contenido .left_side .image a span{ display: none;} #content .modulo .contenido .right_side .info{ height: auto;} #content .modulo .menu ul{ margin-top: 1.5rem; width: 80%; margin: 1.5rem auto 0;} #content .modulo .menu ul li { width: 100%; float: left; margin-bottom: 0.3rem; font-style: italic;} #content .modulo .menu ul li a { width: 100%; float: left; height: 40px; padding: 0 0 0 1rem; background: #bb9b76; background-size: 100% auto; color: #FFF; font-size: 1.05em; line-height: 40px;} #content .modulo .menu ul li:hover a { background: #ae1814;} #content .modulo .menu ul li .submenu li a{ text-align: left; background: rgba(0,0,0,0.5);} #content .modulo .menu ul li .submenu li:hover a{ background: rgba(174,24,20,0.5);} #content .modulo .contenido .mision{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .historia{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .valores{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .reconocimientos{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .cafe-verde{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .cafe-especial{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .taza-medida{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .industria-nacional{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .catacion{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .calidad{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .acidez{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .cuerpo{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content .modulo .contenido .balance{ width: 80%; margin: 0 auto; float: none; left: inherit;} #content.colombiano .modulo .contenido a{ position: relative; padding: 0; width: 20%; height: auto; bottom: 0; margin: -10%;} /*#content.contacto #map{ top: 3rem; left: 3%;} #content.contacto .mapa .info{ width: 36%; margin-top: 4rem; float: left; margin-left: 5%;} #content.contacto .mapa table{}*/ #content.contacto .mapa { margin-top: 3rem;} .overlay.trilladoras .cerrar{ position: relative;} .overlay .title{ width: 75%;} #overlay-inicio .contenido{ padding-bottom: 32%; } } @media only screen and (min-width: 40.063em) and (max-width: 804px){ #header .bottom ul li{margin: 0.5rem 0;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .video{ padding-bottom: 48%; } } @media only screen and (min-width: 900px) and (max-width: 64em) { body{ overflow: auto;} #content .modulo .contenido{ height: auto; margin-bottom: 3rem;} #content .modulo .contenido .historia .slide{ height: auto;} #content .modulo .contenido .historia .slide .ventana .anio{ right: 0; top: 0; height: 25.7%;} #content .modulo .contenido .historia .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .historia .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .historia .slide .timeline{ background: url(../../img/web/content/timeline.png) center 56% no-repeat;} #content .modulo .contenido .valores .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .valores .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .mision .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .mision .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .calidad .image img{ margin: 1rem;} #content .modulo .contenido .right_side .info{ margin: 1rem;} #content.colombiano .modulo .contenido .right_side .info{ margin: 0 1rem; height: auto;} .overlay.acidez { height: auto; top: 5%; margin-top: 0; position: absolute; width: 95%; margin-left: -47.5%;max-height: inherit;} .overlay.cuerpo { height: auto; top: 5%; margin-top: 0; position: absolute; width: 95%; margin-left: -47.5%;} .overlay.balance { height: auto; top: 5%; margin-top: 0; position: absolute; width: 95%; margin-left: -47.5%;} .overlay.graph .row{ flex-wrap:wrap;} .overlay{ max-height: inherit; height: auto;} } @media only screen and (min-width: 40.063em) and (max-width: 900px){ .overlay.graph .row{ flex-wrap:wrap;} .overlay{ max-height: inherit; height: auto; position: absolute; top: 1%;} #content .modulo .contenido .left_side{ width: 100%;} #content .modulo .contenido .left_side .ornamental{ width: 42%;} #content .modulo .contenido .right_side {width: 100%;} #overlay-inicio .contenido{ padding-bottom: 39%; } } @media only screen and (min-width: 40.063em) and (max-width: 899px) { body{ overflow: auto;} #content .modulo .contenido{ height: auto;} #content .modulo .contenido .historia .slide{ height: auto;} #content .modulo .contenido .historia .slide .ventana .anio{ right: 0; top: 0; width: 11%; height: 25.7%; font-size: 1.6em; line-height: 1.2em;} #content .modulo .contenido .historia .slide .ventana{ width: 79%;} #content .modulo .contenido .historia .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .historia .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .historia .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .historia .slide .timeline{ background: url(../../img/web/content/timeline.png) center 56% no-repeat;} #content .modulo .contenido .valores .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .valores .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .valores .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .mision .slide .ventana .track li .info h3{ font-size: 2.5em;} #content .modulo .contenido .mision .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .mision .slide .ventana .track li .info p{ font-size: 1.3em;} #content .modulo .contenido .calidad .image img{ margin: 1rem;} #content .modulo .contenido .right_side .info{ margin: 0;} #content.colombiano .modulo .contenido .right_side .info{ margin: 0;} #content.colombiano .modulo .contenido a{ width: 16%; margin-left: -8%;} #content.contacto .mapa .info{ width: 52%; margin-top: 5rem;} .overlay .contenido{height: 54vh;} .overlay .titulo{ width: 71%;} .overlay.acidez { height: auto; top: 5%; margin-top: 0; position: absolute; width: 95%; margin-left: -47.5%; padding:2rem;} .overlay.cuerpo { height: auto; top: 5%; margin-top: 0; position: absolute; width: 95%; margin-left: -47.5%; padding:2rem;} .overlay.balance { height: auto; top: 5%; margin-top: 0; position: absolute; width: 95%; margin-left: -47.5%; padding:2rem;} .overlay-contacto{ width: 70%; margin-left: -35%;} } @media only screen and (min-width: 40em) and (max-width: 828px) { #content.contacto .mapa .info{ width: 100%; margin-top: 1rem;} #content.contacto .mapa img{ left: 44%; height: 94%;} #content.contacto .mapa #map{} } /*---------- MOVIL ------------*/ @media only screen and (max-width: 40em) { .contain-to-grid{ background: url(../../img/web/header/shadow.png) center bottom no-repeat; background-size: auto 150%;} .tab-bar{ background: none; height: 8vh;} .tab-bar .title img{ height: 2.8125rem;} .left-off-canvas-menu{ background: #ae1814;} .left-submenu{ background: #8c0a06;} .left-off-canvas-menu ul.off-canvas-list li a{ border-bottom-color:rgba(0,0,0,0.2); color: #FFF; font-family: 'Oswald', sans-serif; font-weight: 300;} .left-submenu .back > a{ background: rgba(0,0,0,0.3);} .left-off-canvas-menu i{ float: left; margin:0 6px; color: #560907; width: 26px; line-height: 26px; text-align: center;} .left-off-canvas-menu i.flag{ float: left; width: 26px; height: 13px; background: url(../../img/web/content/hover-flag.png) center no-repeat; margin: 7px 6px;} .left-off-canvas-menu i.fa-facebook{ color: #3B5998;} .left-off-canvas-menu i.fa-twitter{ color: #4099FF;} .tab-bar .menu-icon{ background: #ae1814;} .redes{ display:none;} #content{ height: auto; min-height: 90vh; padding-top: 8vh !important;} #content.racafe{ padding-top: 10vh;} #content.colombiano{ padding-top: 10vh;} #content.procesos{ padding-top: 10vh;} #content.contacto{ padding-top: 10vh;} #content.en-linea{ padding-top: 10vh;} #content h2{ font-size: 2.5em; background-size: 82% auto;} #content.colombiano h2{ font-size: 2.5em;} #content.en-linea h2{ font-size: 2.5em;} #content .stages{ height: 100%;} #content .modulo .menu ul{ margin: 0;} #content .modulo .menu ul li { width: 100%; float: left; margin-bottom: 0.3rem; font-style: italic;} #content .modulo .menu ul li a { width: 100%; float: left; height: 40px; padding: 0 0 0 1rem; background: #bb9b76; background-size: 100% auto; color: #FFF; font-size: 1.05em; line-height: 40px;} #content .modulo .menu ul li:hover a { background: #ae1814;} #content .modulo .menu ul li .submenu li a{ text-align: left; background: rgba(0,0,0,0.5);} #content .modulo .menu ul li .submenu li:hover a{ background: rgba(174,24,20,0.5);} #content .modulo .contenido{ height: auto;} #content .modulo .contenido .historia .slide{ height: auto;} #content .modulo .contenido .valores .slide{ height: auto;} #content .modulo .contenido .reconocimientos .slide{ height: auto;} #content .modulo .contenido .reconocimientos .slide .ventana{ width: 70%; height: auto;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h3{ font-size: 2em;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .reconocimientos .slide .ventana .track li .info p{ font-size: 1.15em;} #content .modulo .contenido .historia .slide .ventana{ width: 70%;} #content .modulo .contenido .historia .slide .ventana .anio{ position: absolute; width: 24%; height: 20.7%; background: url(../../img/web/content/circle-bg.png) center no-repeat; background-size: 100% auto; font-family: 'Lobster Two', cursive; font-size: 1.5em; text-align: center; color: #FFF; padding: 1.5rem 0; right: 0px; top: 0px; line-height: 1.25em;} #content .modulo .contenido .historia .slide .ventana .track li{ float: left;} #content .modulo .contenido .historia .slide .ventana .track li .info{ height: auto; padding: 0;} #content .modulo .contenido .historia .slide .ventana .track li .info h3{ font-size: 2em;} #content .modulo .contenido .historia .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .historia .slide .ventana .track li .info p{ font-size: 1.15em;} #content .modulo .contenido .historia .slide .timeline{ display: none;} #content .modulo .contenido .mision .image img{ margin:0;} #content .modulo .contenido .mision .slide .ventana .track li .info h3{ font-size: 2em;} #content .modulo .contenido .mision .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .mision .slide .ventana .track li .info p{ font-size: 1.15em;} #content .modulo .contenido .right_side .info{ padding: 0; margin: 1rem; height: auto;} #content .modulo .contenido .valores .slide .ventana{ width: 71%;} #content .modulo .contenido .valores .slide .ventana .track li{ float: left; margin: 0;} #content .modulo .contenido .valores .slide .ventana .track li .info{ padding: 0;} #content .modulo .contenido .valores .slide .ventana .track li .info h3{ font-size: 2em;} #content .modulo .contenido .valores .slide .ventana .track li .info h3 span{ display: none;} #content .modulo .contenido .valores .slide .ventana .track li .info p{ font-size: 1.15em;} #content .modulo .contenido .valores .slide .timeline{ display: none;} #content .modulo .contenido .right_side{ padding:0;} #content.colombiano .modulo .contenido .right_side .info{ height: auto; margin: 0;} #content.colombiano .modulo .contenido a{ width: 18%; position: relative; float: left; margin-left: -14.5%; height: 5.5rem;} #content .modulo .contenido .content-display-container{ position: relative;} #content .modulo .contenido .coffee{ position: relative;} #content.contacto .mapa .info{ width: 50%; margin-top: 1rem;} #content.contacto .mapa img{ left: 0; height: auto;} #content.contacto .mapa #map{} #content.contacto .titulo{ font-size: 1.3em;} #footer{ position: relative; float: left;} .overlay{ width: 95%; padding: 0.3rem; position: absolute; border: thin dashed #FFF; z-index: 101; top: 1%; left: 50%; margin-left: -47.5%;} .overlay.acidez{ height: 98vh; position: fixed; top: 5px; margin-top: 0; overflow: auto; overflow-x: hidden; overflow-y: scroll; width: 98%; margin-left: -49%;} .overlay.cuerpo{ height: 98vh; position: fixed; top: 5px; margin-top: 0; overflow: auto; overflow-x: hidden; overflow-y: scroll; width: 98%; margin-left: -49%;} .overlay.balance{ height: 98vh; position: fixed; top: 5px; margin-top: 0; overflow: auto; overflow-x: hidden; overflow-y: scroll; width: 98%; margin-left: -49%;} .overlay .cerrar{ margin-bottom: 0.5rem; width: 60%; margin: 0.5rem auto; right: 50%; margin-right: -30%;} .overlay .titulo{ width: 100%; margin: 1rem 0;} .overlay .titulo h2{ font-size: 1.8em; text-align: center; line-height: 1.1em; margin-bottom: 0.5rem;} .overlay .titulo h3{ margin-bottom: 0;} .overlay.acidez .grafico{ height: auto;} .overlay.cuerpo .grafico{ height: auto;} .overlay.balance .grafico{ height: auto;} .overlay .title h3{ font-size: 1.8em;} .overlay .fecha .mes{ width: 66%;} .overlay .fecha .dia{ width: 12%; margin-left: -6%;} .overlay .contenido{ height: 54vh;} .overlay .contenido ul { margin-left: 0;} .overlay.indicadores{ height: auto;} .overlay.indicadores .contenido{ height: auto;} .overlay.indicadores .contenido ul li .t_left{ font-size: 1em;} .overlay.indicadores .contenido ul li .t_right{ font-size: 1em;} .overlay .contenido ul li .empresa{ font-size: 1em;} .overlay .contenido ul li .direccion{ font-size: 1em;} .overlay .contenido ul li a{ font-size: 1em;} .overlay.acidez .informacion table th{ padding: 0.05rem;} .overlay.acidez .informacion table td{ padding: 0.05rem;} .overlay.balance .informacion table th{ padding: 0.05rem;} .overlay.balance .informacion table td{ padding: 0.05rem; font-size: 12px;} .overlay.cuerpo .informacion table th{ padding: 0.05rem;} .overlay.cuerpo .informacion table td{ padding: 0.05rem;} .overlay.ciclo{ width: 90%;padding: 0.3rem;position: fixed;border: thin dashed #FFF;z-index: 101;top: 1%;left: 50%;margin-left: -45%;max-height: inherit;height: 96vh;min-height: 94vh;} .overlay.ciclo .contenido{ height: 73vh;} .overlay.ciclo .contenido .texto {height: 41vh;} .overlay-contacto{ width: 90%; margin-left: -45%; height: 60vh; margin-top: -30vh;} .overlay.trilladoras { height: auto; top: 2%; margin-top: 0; position: fixed; min-height: 96vh;} .overlay.trilladoras .cerrar{ position: relative; right: 50%; top: 0;} .overlay.trilladoras .contenido{ height: 76vh; overflow: auto;} .overlay.trilladoras .contenido img { height: auto; max-height: 522px; width: 90%; max-width: 564px;} .overlay.graph .row{ flex-wrap:wrap;} .overlay{ max-height: inherit; height: auto;} #overlay-inicio .contenido{ padding-bottom: 45%; } } @media only screen and (max-width: 600px) { #content .modulo .contenido .reconocimientos .slide .ventana .track li .video{ padding-bottom: 56%; } } @media only screen and (max-width: 420px) { #content.colombiano .modulo .contenido a{ width: 50%; height: auto; margin-left: -25%; top: -5%; padding: 0;} #content.contacto .mapa .info{ width: 100%; margin-top: 1rem; text-align: center;} #content.contacto .mapa img{ display: none;} #content.contacto .mapa #map{ width: 100%;height: 210px; left: 0; margin-left: 0;} #content.contacto .mapa .info p small{ border: none;} .overlay.politica{height: 96vh;} .overlay.politica .contenido{height: 66vh;} .overlay.enlaces{height: 96vh;} .overlay.enlaces .contenido{height: 69vh;} .overlay.aviso{height: 96vh;} .overlay.aviso .contenido{height: 69vh;} .overlay.indicadores{height: 96vh;display: flex; flex-wrap: wrap; align-items: center;} #content .modulo .contenido .taza-medida .left_side .seleccionador .caracteristicas .columna .item label{ font-size: 9px; padding: 0.1rem; } #content .modulo .contenido .industria-nacional .image img{ margin: 0;} #content .modulo .contenido .proposito .image img{ margin: 0;} #content .modulo .contenido .catacion .image img{ margin: 0;} #content .modulo .contenido .right_side .info dl dd{width: 100%; height: auto !important;} #content .modulo .contenido .right_side .info dl{ margin: 0; margin-bottom: 2px;} #content .modulo .contenido .right_side .info dl dd{ width: 100%; height: auto !important;} #content .modulo .contenido .right_side .info dl dt{ width: 100%; height: auto !important;} #content .modulo .contenido .right_side .info dl dt dl dd{ width: 50%;} #content .modulo .contenido .right_side .info dl dt dl dt{ width: 50%;} #content .modulo .contenido .reconocimientos .slide .ventana .track li{flex-wrap:wrap;} #content .modulo .contenido .valores .slide .ventana .track li{flex-wrap:wrap;} } .img_efecto { /* filter: url(filters.svg#grayscale); Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ -webkit-transition: all .8s ease-in-out; } .img_efecto:hover { filter: none; -webkit-filter: grayscale(0); -webkit-transform: scale(1.2); }