/*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 01 GLOBAL ///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ 01 GENERAL /////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ details,figcaption,figure,hgroup,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button, html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} html, body { align-items:flex-start; align-content:flex-start; display:flex; flex-flow:row wrap; justify-content:center; height:auto; min-height:100vh; text-align:left; position: relative; scroll-behavior:smooth; width:100%; } @media only screen and (max-width:620px) { html, body { overflow-x:hidden; }} /*------------------------------------------------------------------------ 01 COLORS /////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ :root { --color-back:#f2f4f6; --color-white:#fff; --color-white-90:rgba(255, 255, 255, 0.9); --color-white-80:rgba(255, 255, 255, 0.8); --color-white-70:rgba(255, 255, 255, 0.7); --color-white-60:rgba(255, 255, 255, 0.6); --color-white-50:rgba(255, 255, 255, 0.5); --color-white-40:rgba(255, 255, 255, 0.4); --color-white-30:rgba(255, 255, 255, 0.3); --color-white-20:rgba(255, 255, 255, 0.2); --color-white-10:rgba(255, 255, 255, 0.1); --color-black:#000; --color-black-90:rgba(0, 0, 0, 0.9); --color-black-80:rgba(0, 0, 0, 0.8); --color-black-70:rgba(0, 0, 0, 0.7); --color-black-60:rgba(0, 0, 0, 0.6); --color-black-50:rgba(0, 0, 0, 0.5); --color-black-40:rgba(0, 0, 0, 0.4); --color-black-30:rgba(0, 0, 0, 0.3); --color-black-20:rgba(0, 0, 0, 0.2); --color-black-10:rgba(0, 0, 0, 0.1); --color-whatsapp:#25d366; --color-facebook:#3b5998; --color-instagram:#cd486b; --color-youtube:#ff0000; --color-ubicacion:#ea4335; --color-twitter:#55acee; --color-x:#55acee; --color-linkedin:#007bb5; --gradient-main:linear-gradient(to top, var(--color-main) 0%, var(--color-main-soft) 180%); --gradient-main-soft:linear-gradient(to top, var(--color-main-softer) 0%, var(--color-white) 180%); --gradient-main-dark:linear-gradient(to top, var(--color-main-darker) 0%, var(--color-main) 180%); --gradient-second:linear-gradient(to top, var(--color-second) 0%, var(--color-second-soft) 180%); --gradient-second-soft:linear-gradient(to top, var(--color-second-softer) 0%, var(--color-white) 180%); --gradient-second-dark:linear-gradient(to top, var(--color-second-darker) 0%, var(--color-second) 180%); --gradient-neutro:linear-gradient(to top, var(--color-neutro-soft) 0%, var(--color-neutro) 180%); --gradient-neutro-soft:linear-gradient(to top, var(--color-neutro-softer) 0%, var(--color-neutro-soft) 180%); --gradient-neutro-dark:linear-gradient(to top, var(--color-neutro) 0%, var(--color-neutro-dark) 180%); --gradient-combinado-uno:linear-gradient(to right top, var(--color-main-soft) 0%, var(--color-main-softer) 40%, var(--color-second-softer) 80%); --gradient-combinado-dos:linear-gradient(to right top, var(--color-main) 0%, var(--color-main-soft) 40%, var(--color-second-soft) 80%); --gradient-combinado-tres:linear-gradient(to right top, var(--color-main-dark) 0%, var(--color-main) 40%, var(--color-second) 80%); --gradient-radial-uno:radial-gradient(circle at center center, #A6CEE2, #0066B2); --gradient-radial-dos:radial-gradient(circle at center center, #EDC1AE, #F26721); } /*------------------------------------------------------------------------ 01 FONTS AND TEXTS ////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* Font face ------------------------------*/ @font-face { font-display:swap; font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-300.woff2') format('woff2'); } /* montserrat-regular - latin */ @font-face { font-display:swap; font-family: 'Montserrat'; font-style:normal; font-weight:400; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-regular.woff2') format('woff2'); } @font-face { font-display:swap; font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-500.woff2') format('woff2'); } @font-face { font-display:swap; font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-600.woff2') format('woff2'); } /* Fuente primaria ------------------------------*/ html, body{ font-family:var(--font-main); } /* Fuente secundaria ------------------------------*/ h1, h2, h3, h4, h5, h6{ font-family:var(--font-second); text-wrap: balance; } /* Font size ------------------------------*/ html, body { font-size:24px; } @media only screen and (max-width:2200px) { html, body { font-size:20px; }} @media only screen and (max-width:1500px) { html, body { font-size:18px; }} @media only screen and (max-width:920px) { html, body { font-size:16px; }} @media only screen and (max-width:720px) { html, body { font-size:15px; }} @media only screen and (max-width:820px) { html, body { font-size:14px; }} @media only screen and (max-width:620px) { html, body { font-size:16px; }} @media only screen and (max-width:520px) { html, body { font-size:15px; }} @media only screen and (max-width:420px) { html, body { font-size:14px; }} /* H ------------------------------*/ h1, h2, h3, h4, h5, h6 { height:auto; margin:0px; padding:2px 0px; line-height:1em; width:100%; } h1 {font-size:2rem;} h2 {font-size:1.8rem;} h3 {font-size:1.6rem;} h4 {font-size:1.4rem;} h5 {font-size:1.2rem;} h6 {font-size:1rem;} /* Párrafos ------------------------------*/ p { color:inherit; height:auto; line-height:1.4rem; margin:0px 0px; padding:10px 0px; text-align:left; text-wrap: pretty; width:100%; } p strong, p b{ font-weight:bold; } p a, p a:hover{ color:inherit; } a.large, p.large, p.large a, span.large, span.large a { font-size: var(--fs-large); } a.medium, p.medium, p.medium a, span.medium, span.medium a { font-size: var(--fs-medium); } a.small, p.small, p.small a span.small, span.small a { font-size: var(--fs-small); } p.center { text-align:center; } p.left { text-align:left; } p.right { text-align:right; } /* label ------------------------------*/ label { font-size:inherit; font-family:inherit; font-weight:inherit; } /* ------------------------------*/ div.center { display:flex; flex-flow:row wrap; justify-content:center; } .uppercase{ text-transform:uppercase; } /* Punto suspensivos ------------------------------*/ .puntos-suspensivos{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* txt small ------------------------------*/ .txt-small { color:var(--color-neutro); font-size:0.7rem; line-height:1.2rem; } .txt-small > *{ color:inherit; font-size:inherit; text-decoration:none; } .txt-small > * .svg-icon{ display:inline-block; height:12px; width:12px; } p.add-columns { columns:2; column-gap:4%; text-align: justify; } @media only screen and (max-width:620px) { p.add-columns{ columns:1; column-gap:0px; text-align:left; }} /* Enlaces ------------------------------*/ a, a:visited{ margin:0px; padding:0px; text-decoration:underline; } a:hover { text-decoration:underline; } /* Listas ------------------------------*/ ul, ol { float:none; height: auto; margin:10px 0px; padding-left:18px; width:100%; } ul li, ol li{ float: none; height: auto; line-height:1.4em; margin: 0px; padding: 0px; width:100%; } ul li { list-style:disc; } ol li { list-style:decimal; } ul li a, ol li a{ color:inherit; } /* Fonts variables ------------------------------*/ :root { --fs-small:0.6rem; --fs-medium:0.8rem; --fs-regular:1rem; --fs-large:1.2rem; --fs-xlarge:1.4rem; --fs-xxlarge:1.6rem; --fw-thin:300; --fw-normal:400; --fw-bold:500; --fw-bolder:500; } /* ------------------------------------ --- TITLES DEFAULT /////////////// -------------------------------------*/ * .title { text-wrap: pretty; } .title.center, .title-1.center, .title-2.center, .title-3.center, .subtitle.center, .subtitle-1.center, .subtitle-2.center, .subtitle-3.center{ justify-content:center; text-align:center; } body#instalaciones .title-2, body#nosotros .title-2, body#servicios .title-2{ padding: 40px 0px 10px 0px; background-color: var(--color-main-softer); } body#nosotros .title-2{ padding: 40px 0px 20px 0px; background-color: var(--color-main-softer); } /*------------------------------------------------------------------------ 01 OTROS //////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* IMG ------------------------------*/ img{ display:block; height:auto; padding:0px; margin:0px; max-width:100%; } img:not([alt]) { outline:1px dashed pink; } .fancybox-content img:not([alt]) { outline:0px dashed pink; } /* Box shadow ------------------------------*/ :root { --box-shadow:0px 0px 6px rgba(0, 0, 0, 0.1); --box-shadow-small:0px 0px 2px rgba(0, 0, 0, 0.2); } /* iFrame ------------------------------*/ iframe { border:0px; width:100%!important; } /* Lazy ------------------------------*/ .lazyloading { opacity: 0; } .loading, .lazyload, .lazyloaded{ opacity: 1; transition: opacity 0.4s; } /* Transition ------------------------------*/ :root { --add-transition-very-slow:all 0.5s; --add-transition-slow:all 0.4s; --add-transition:all 0.3s; --add-transition-fast:all 0.2s; --add-transition-very-fast:all 0.1s; } /*-------------------------------------------------------------------------- ////////////////////////////////////////////////////// ---------- END GLOBAL --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 02 STRUCTURE ////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ 02 GENERAL ////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* Box sizing ------------------------------*/ *{ box-sizing:border-box!important; float: none; } /* Flexbox all ------------------------------*/ *[data-element='panel'], *[data-element='panel'] > div:not(.modal), footer, footer > div { display:flex; flex-flow:row wrap; } *[data-element='panel'].swiper, .swiper[data-element='panel'] { display:block!important; } /* Flexbox al centro ------------------------------*/ div.center, *[data-element='panel'].center, *[data-element='banner'].center .banner-box > *, .banner-box.center, .banner-box.center > *, ul.menu.center, section.center, footer.center { justify-content:center!important; } /* Scroll bar ------------------------------*/ .container, .main, *[data-element='banner'], *[data-element='banner-main'], *[data-element='panel'], { scrollbar-gutter: stable; } /* Gap ------------------------------*/ :root { --gap-inside-medium:8px; --gap-inside-small:6px; --gap-main:4vw; --gap-second:3vw; --gap-inside:12px; --gap-medium:8px; --gap-1x:1vw; --gap-2x:2vw; --gap-3x:3vw; --gap-4x:4vw; --gap-small:6px; --gap-very-small:4px; } .gap-1x { gap:var(--gap-1x); } .gap-2x { gap:var(--gap-2x); } .gap-3x { gap:var(--gap-3x); } .gap-4x { gap:var(--gap-3x); } .gap-main { gap:var(--gap-main); } .gap-second { gap:var(--gap-second); } .gap-medium { gap:var(--gap-medium); } .gap-small { gap:var(--gap-small); } /* Margins ------------------------------*/ :root { --margin-top-main:4vw; --margin-bottom-main:4vw; --margin-top-second:3vw; --margin-bottom-second:3vw; --margin-top-inside:12px; --margin-bottom-inside:12px; --margin-top-inside-medium:8px; --margin-top-inside-small:6px; --margin-top-medium:8px; --margin-bottom-medium:8px; --margin-top-small:6px; --margin-bottom-small:6px; --margin-top-very-small:4px; --margin-bottom-very-small:4px; } .margin-top-main { margin-top:var(--margin-top-main); } .margin-top-second { margin-top:var(--margin-top-second); } .margin-top-inside { margin-top:var(--margin-top-inside); } .margin-top-medium { margin-top:var(--margin-top-medium); } .margin-top-small { margin-top:var(--margin-top-small); } .margin-top-very-small { margin-top:var(--margin-top-very-small); } .margin-bottom-main { margin-bottom:var(--margin-bottom-main); } .margin-bottom-second { margin-bottom:var(--margin-bottom-second); } .margin-bottom-inside { margin-bottom:var(--margin-bottom-inside); } .margin-bottom-medium { margin-bottom:var(--margin-bottom-medium); } .margin-bottom-small { margin-bottom:var(--margin-bottom-small); } .margin-bottom-very-small { margin-bottom:var(--margin-bottom-very-small); } /* ------------------------------------ --- PANELS ////////////////////// -------------------------------------*/ *[data-element='panel'] { padding-bottom:20px; padding-top:20px; width:100%; z-index:10; } /* Container default ------------------------------*/ div.container { width:100%; z-index:10; } /* Article default ------------------------------*/ article { display:flex; flex-flow:row wrap; gap:var(--gap-inside); height:auto; width:100%; } /* ------------------------------------ --- ROUNDED /////////////////// -------------------------------------*/ :root { --rounded:16px; --rounded-top:16px 16px 0px 0px; --rounded-bottom:0px 0px 16px 16px; --rounded-left:16px 0px 0px 16px; --rounded-right:0px 16px 16px 0px; --rounded-none:0px 0px 0px 0px; --rounded-medium:8px; --rounded-medium-top:8px 8px 8px 8px; --rounded-medium-bottom:8px 8px 8px 8px; --rounded-medium-left:8px 8px 8px 8px; --rounded-medium-right:8px 8px 8px 0px; --rounded-medium-none:0px 0px 0px 0px; --rounded-small:6px; --rounded-small-top:6px 6px 0px 0px; --rounded-small-bottom:0px 0px 6px 6px; --rounded-small-left:6px 0px 0px 6px; --rounded-small-right:0px 6px 6px 0px; --rounded-small-none:0px 0px 0px 0px; --rounded-1x:2px; --rounded-2x:4px; --rounded-3x:6px; --rounded-4x:8px; --rounded-5x:10px; --rounded-6x:12px; } .rounded, .rounded-items .item{border-radius:var(--rounded);} .rounded-medium, .rounded-medium-items .item{border-radius:var(--rounded-medium);} .rounded-small, .rounded-small-items .item{border-radius:var(--rounded-small);} .rounded-1x, .rounded-1x-items .item {border-radius:var(--rounded-1x);} .rounded-2x, .rounded-2x-items .item {border-radius:var(--rounded-2x);} .rounded-3x, .rounded-3x-items .item {border-radius:var(--rounded-3x);} .rounded-4x, .rounded-4x-items .item {border-radius:var(--rounded-4x);} .rounded-5x, .rounded-5x-items .item {border-radius:var(--rounded-5x);} .rounded-6x, .rounded-6x-items .item {border-radius:var(--rounded-6x);} /*------------------------------------------------------------------------ 02 BLOQUES Y COLUMAS /////////////////////////////////////////////////// ------------------------------------------------------------------------*/ div.bloque, div.bloque > .col { gap:var(--gap-second); } /* ------------------------------------ --- BLQOUE DEFAULT ////////////// -------------------------------------*/ div.bloque { display:flex; flex-flow:row wrap; justify-content:flex-start; height:auto; width:100%; } /* ------------------------------------ --- COLUMNA DEFAULT ///////////// -------------------------------------*/ div.col { align-items:flex-start; align-content:flex-start; display:flex; flex-grow:99; flex-wrap:wrap; justify-content:flex-start; height:auto; min-width:300px; padding:0px; transition:all 0.12s; width:18%; /* but grow */ } /* ------------------------------------ --- INSERTAR DOS COLUMNAS /////// -------------------------------------*/ .insert-cols-2 > .col { width:40%; } /* ------------------------------------ --- INSERTAR TRES COLUMNAS /////// -------------------------------------*/ .insert-cols-3 > .col { min-width:120px; width:28%; } /* ------------------------------------ --- INSERTAR COLUMNA-ASIDE /////// -------------------------------------*/ .insert-cols-aside > div.col { width:60%; /* but grow */ } .insert-cols-aside > div.col-aside { width:30%; /* but grow */ } /* ------------------------------------ 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { .insert-cols-3 > div.col { min-width:300px; } } /* ------------------------------------ 100% 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { .insert-cols-2 > div.col { min-width:100%; } .insert-cols-3 > div.col { min-width:100%; } } /* ------------------------------------ --- IMG-COVER /////////////////// -------------------------------------*/ .img-cover > picture{ height:auto; overflow:hidden; position:absolute; bottom:0px; left:0px; right:0px; top:0px; width:auto; z-index:1; } .img-cover > picture img, .img-cover > img{ height:100%; width:100%; object-fit:cover; object-position:center center; } /* ------------------------------------ --- INSIDE /////////////////// -------------------------------------*/ .inside{ align-items:center; display:flex; flex-flow:row wrap; justify-content:center; height:auto; overflow:hidden; position:relative; width:100%; } /*------------------------------------------------------------------------ 02 DIV IN ////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ .in.full, .in-full, .in-full-to-none{ padding-left:3vw; padding-right:3vw; } .in.wide, .in-wide, .in-wide-to-none{ padding-left:6vw; padding-right:6vw; /*width:90vw;*/ } .in, .in-to-full, .in-to-wide, .in-to-thin, .in-to-none{ padding-left:10vw; padding-right:10vw; } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:20vw; padding-right:20vw; } /* ----------------------------------------- 2200 --- --------------------------------------------------*/ @media only screen and (max-width:2200px) { .in.full, .in-full, .in-full-to-none{ padding-left:3vw; padding-right:3vw; } .in.wide, .in-wide, .in-wide-to-none{ padding-left:3vw; padding-right:3vw; } .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:10vw; padding-right:10vw; /*width:80vw;*/ } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:20vw; padding-right:20vw; /*width:60vw;*/ } } /* ----------------------------------------- 1200 --- --------------------------------------------------*/ @media only screen and (max-width:1200px) { .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:15vw; padding-right:15vw; /*width:70vw;*/ } } /* ----------------------------------------- 1020 --- --------------------------------------------------*/ @media only screen and (max-width:1020px) { .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:3vw; padding-right:3vw; } } /* ----------------------------------------- 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:6vw; padding-right:6vw; } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:10vw; padding-right:10vw; } } /* ------------------------------------------ 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:3vw; padding-right:3vw; } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-non{ padding-left:8vw; padding-right:8vw; } } /* ------------------------------------------ 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { .in-full, .in-to-full, .in-thin-to-full{ padding-left:3vw; padding-right:3vw; } .in-wide, .in-to-wide, .in-thin-to-wide{ padding-left:3vw; padding-right:3vw; } .in{ padding-left:7vw; padding-right:7vw; } .in.thin, .in-thin, .in-to-thin{ padding-left:10vw; padding-right:10vw; } .in-full-to-none, .in-wide-to-none, .in-to-none, .in-thin-to-none{ padding-left:0vw; padding-right:0vw; } } /* ------------------------------------------ 520 --- --------------------------------------------------*/ @media only screen and (max-width:520px) { .in{ padding-left:5vw; padding-right:5vw; } .in.thin, .in-thin, .in-to-thin{ padding-left:9vw; padding-right:9vw; } } /* ------------------------------------------ 420 --- --------------------------------------------------*/ @media only screen and (max-width:420px) { .in{ padding-left:3vw; padding-right:3vw; } .in.thin, .in-thin, .in-to-thin{ padding-left:6vw; padding-right:6vw; } } /*------------------------------------------------------------------------ 02 MAS /////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* hr ------------------------------*/ hr, hr.wp-block-separator { background-color:var(--color-neutro-softer)!important; border:0px; padding:0px; margin:5px 0px; height:1px; width:100%; } hr.medium { height:3px; } hr.big { height:5px; } hr.space-2 {background-color:transparent!important; margin:1px 0px!important;} hr.space-4 {background-color:transparent!important; margin:2px 0px!important;} hr.space-6 {background-color:transparent!important; margin:3px 0px!important;} hr.space-8 {background-color:transparent!important; margin:4px 0px!important;} hr.space-10 {background-color:transparent!important; margin:5px 0px!important;} hr.space-20 {background-color:transparent!important; margin:10px 0px!important;} hr.space-30 {background-color:transparent!important; margin:15px 0px!important;} hr.space-40 {background-color:transparent!important; margin:20px 0px!important;} hr.space-60 {background-color:transparent!important; margin:30px 0px!important;} hr.space-80 {background-color:transparent!important; margin:40px 0px!important;} hr.space-grow { background:none; display:flex; flex-flow:row wrap; flex-grow:999; width:0%; } /* Al 100% ------------------------------*/ .w100 {width:100%!important;} /* Al 50% ------------------------------*/ .w50 {width:50%;} /* Formulario ------------------------------*/ .formulario { height:auto; width:100%; } /* Content visibility ------------------------------*/ *[data-element='panel'] img, *[data-element='panel'] svg, footer img, .svg-icon, video, iframe{ content-visibility: auto; } /* Esconder ------------------------------*/ .ocultar, .esconder, .hide { display:none; } /* If header fixed, First element ------------------------------*/ @media only screen and (max-width:620px) { .first{ margin-top:62px; /* = Tamaño de header movil */ } } /*------------------------------------------------------------------------- ////////////////////////////////////////////////// ---------- END STRUCTURE -------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 03 HEADER ///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /* 03 z-index ------------------------------*/ .movil-panel-menu.show {z-index:12;} div.block-opacity.show {z-index:11;} header {z-index:10!important;} .movil-panel-menu {z-index:0;} div.block-opacity {z-index:0;} /* -------------------------------------------------- ------------------------------------------- BASE --- ---------------------------------------------------*/ /* 00 - Z index y order ------------------------------*/ header {z-index:99;} header .logotipo {z-index:2;} header nav {z-index:1;} /* 01 General ------------------------------*/ header { align-items:center; align-content:center; display:flex; flex-flow:row wrap; height:auto; justify-content:space-between; gap:var(--gap-inside); max-width:100%; overflow-x:visible;/* necesary */ width:100%; } /* Altura ------------------------------*/ header { height:120px; } /* Logotipo ------------------------------*/ header a.logotipo{ align-items:center; display:flex; flex-flow:row wrap; flex-grow:0; height:auto; justify-content:center; width:auto; } /* Logotipo size ------------------------------*/ header a.logotipo img{ display:flex; /*height:60px;*/ height:auto; width:193px; } /*-------------------------------------------------- NAV //////////////////////////////////////////////// ---------------------------------------------------*/ header nav{ align-items:center; align-content:center; display:flex; flex-flow:row wrap; flex-grow:9; justify-content:flex-end; height:auto; position:relative; width:auto; } /* NAV UL ------------------------------*/ header nav > ul { align-items:center; align-content:center; display:flex; flex-direction:row; flex-wrap:wrap; flex-grow:9; gap:var(--gap-inside-small); justify-content:flex-end; list-style:none; margin:0px; padding:0px; width:auto; } /* NAV UL LI ------------------------------*/ header nav > ul > li, ul.menu-dropdown > li{ align-items:center; align-content:center; display:flex; flex-flow:row wrap; height:auto; justify-content:center; list-style:none; margin:0px; padding:0px; position:relative; text-align:center; width:auto; } /* Buttons ------------------------------*/ header nav > ul > li > *:not( ul, .button){ align-items:center; align-content:center; cursor:pointer; display:flex; flex-flow:row wrap; gap:var(--gap-inside-small); height:40px; line-height:40px; justify-content:flex-start; margin:0px; overflow:hidden; padding:0px 8px; position:relative; transition:var(----add-transition-very-fast); text-decoration:none; text-overflow:ellipsis!important; user-select: none; white-space:nowrap; width:auto; } header nav > ul > li > a { cursor:pointer; } header nav > ul > li > a:hover{ text-decoration:none; } /* Buttons + icons ------------------------------*/ header nav > ul > li > *:not(.button) .svg-icon, ul.menu-dropdown > li > * .svg-icon, ul.menu-dropdown li[data-seccion='back'] > label .svg-icon{ height:26px; width:26px; } /* Separator ------------------------------*/ header nav > ul > li[data-element='separator']{ margin:0px 10px; min-width:1px; width:1px!important; } /* ------------------------------------------ 2600 --- --------------------------------------------------*/ @media only screen and (max-width:2200px) { header{ height:100px; } } /* ------------------------------------------ 1600 --- --------------------------------------------------*/ @media only screen and (max-width:1600px) { header{ height:90px; } } ------------------------------------------ 920 --- --------------------------------------------------*/ @media only screen and (max-width:920px) { header{ height:90px; } } /* ------------------------------------------ 820 --- --------------------------------------------------*/ @media only screen and (max-width:920px) { header a.logotipo img{ height:auto; width:139px; } } /* ------------------------------------------ 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { header a.logotipo img{ width:170px; } } /* ------------------------------------- MOVIL 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { header { height:70px; position:initial; left:0px; top:0px; } header a.logotipo img{ width:170px; } } /* ---------------------------- BREAK BTN MOVIL 920 --- --------------------------------------------------*/ /* ---------------------------- BREAK TO MOVIL 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { header li:not(li[data-element='btn-whatsapp']){ display:none; } } /* ---------------------------- BREAK TO MOVIL 420 --- --------------------------------------------------*/ @media only screen and (max-width:520px) { header li[data-element='btn-whatsapp']{ display:none; } } /* -------------------------------------------------- ---------------------------------- IF CENTER BASE --- ---------------------------------------------------*/ /* 1 ... Agregar la clase center a header 2 ... Agregar segundo menu (ul) dentro de nav */ /* 00 - Z index y order ------------------------------*/ header.center nav ul.menu-1 {order:3;} header.center nav .logotipo {order:2;} header.center nav ul.menu-2 {order:1;} header.center { justify-content:space-between;!important; } /* Logotipo ------------------------------*/ header.center .logotipo { margin-left:-100px; position:absolute; bottom:auto; top:10px; left:50%; right:auto; } /* nav ------------------------------*/ header.center > nav{ justify-content:space-between; } header.center > nav > ul { border:1px solid red; max-width:38%; width:30%; } header.center > nav > ul.menu-1 { justify-content:flex-start; } header.center > nav > ul.menu-2 { justify-content:flex-end; } /* ------------------------------------- MOVIL 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { header.center .logotipo { margin-left:0px; position:relative; bottom:auto; top:auto; left:auto; right:auto; } header.center > nav{ justify-content:flex-start; } header.center > nav > ul { max-width:100%; width:100%; } } /*--------------------------------------------------- ////////// MENU MOVIL ////////// ---------------------------------------------------*/ /* Panel nav ------------------------------*/ ul.menu-movil, ul.menu-dropdown { align-items:center; align-content: center; display:flex; justify-content:flex-start; flex-flow:row wrap; height:auto; gap:var(--gap-inside-small); list-style:none; max-width:100%; margin:0px; padding:0px; width:100%; } ul.menu-movil li, ul.menu-dropdown li{ align-items:center; align-content:center; display:flex; flex-flow:row wrap; height:auto; justify-content:flex-start; margin:0px; padding:0px; width:100%; } ul.menu-movil > li > *:not(ul), ul.menu-movil > li > *:not(ul):hover, ul.menu-dropdown li > *, ul.menu-dropdown li > *:hover{ align-items:center; align-content:center; cursor:pointer; display:flex; flex-flow:row wrap; font-size:1.4em; gap:var(--gap-small); height:40px; line-height:40px; justify-content:flex-start; margin:0px 0px; position:relative; transition:var(----add-transition-very-fast); text-align:left; text-decoration:none; text-overflow:ellipsis!important; user-select: none; white-space:nowrap; width:100%; } ul.menu-movil > li > *:hover{ text-decoration:none; } /* Buttons icons ------------------------------*/ ul.menu-movil > li > *:not(.button) .svg-icon, ul.menu-dropdown > li > * .svg-icon, ul.menu-dropdown li[data-seccion='back'] > label .svg-icon{ height:32px; width:32px; } /*------------------------------------------------------------------------ 03 ELEMENTOS MOVILES //////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*--------------------------------------------------- ////////// MOVIL PANEL MENU ////////// ---------------------------------------------------*/ .movil-panel-menu{ display:none; } .movil-panel-menu{ align-content:center; align-items:center; flex-flow:row wrap; height:auto; gap:var(--gap-inside); min-height:100vh!important; justify-content:flex-start; margin:0px; overflow-y:scroll!important; padding:40px 8vw!important; position:fixed; transition:all 0.22s; transition-delay:0.16s; transition-timing-function:ease-in-out; bottom:auto; left:auto; right:auto; top:0px; } /* Ancho ------------------------------*/ .movil-panel-menu{ max-width:820px; width:80vw; } /* If boton close esta dentro ------------------------------*/ .movil-panel-menu .btn-close-menu-movil{ display:flex!important; position:absolute; bottom:auto; left:auto; top:20px; right:20px; } /* ------------------------------------- +++ SHOW ALL //////////////// -------------------------------------*/ .movil-panel-menu.show{ display:flex!important; visibility: visible!important; opacity:1.0!important;; position:fixed!important; transform:translateX(0vw)!important; transform:translateY(0vw)!important; z-index:99!important; } /* ------------------------------------- +++ SLIDE TO LEFT //////////////// -------------------------------------*/ .movil-panel-menu.slide-to-left { opacity:1.0; right:0px; transform:translateX(100vw); z-index:12; } /* ------------------------------------- +++ SLIDE TO RIGHT //////////////// -------------------------------------*/ .movil-panel-menu.slide-to-right { opacity:1.0; left:0px; transform:translateX(-100vw); z-index:12; } /* ------------------------------------- +++ SLIDE TO TOP //////////////// -------------------------------------*/ .movil-panel-menu.slide-to-top { opacity:1.0; top:0px; transform:translateY(100vH); z-index:12; } /* ------------------------------------- +++ FADE IN ///////////////////// -------------------------------------*/ .movil-panel-menu.fade-in { opacity:0.0; top:0px; z-index:0; } /* --- END */ /*--------------------------------------------------- ////////// BUTTON MOVIL OPEN ////////// ---------------------------------------------------*/ /* Escondemos ------------------------------------------*/ header li[data-element='btn-movil'], .btn-movil, .btn-movil + label { display:none; } /* --- END */ /*--------------------------------------------------- ////////// BLOCK OPACITY ////////// ---------------------------------------------------*/ div.block-opacity { visibility:hidden; } div.block-opacity { background-color:var(--color-black); display:block; height:100vh; opacity:0.6; transition:all 0.18s; position:fixed!important; bottom:0px; left:0px; right:0px; top:0px; max-width:100%; transition:all 0.16s; /*transition-delay:0.16s;*/ visibility:hidden; width:100vw; } /* Show ------------------------------*/ div.block-opacity.show{ visibility:visible!important; opacity:0.6!important; } /* --- END */ /*--------------------------------------------------- ////////// BODY LOCK ////////// ---------------------------------------------------*/ body.lock{ position:fixed!important; } /* --- END */ /*--------------------------------------------------- ////////// ACTIVAMOS ELEMENTOS MOVILES ////////// ---------------------------------------------------*/ @media only screen and (max-width:720px) { .movil-panel-menu{ display:flex!important; } header li[data-element='btn-movil'], .btn-movil +label { display:flex!important; } } /* --- END */ /*--------------------------------------------------- ////////// MENU MOVIL ////////// ---------------------------------------------------*/ /* (import: codex/header/css-menu-movil.css) */ /* --- END */ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////// ---------- / END HEADER --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 04 BANNERS /////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ BANNERS - ELEMENTS ///////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* A - General ------------------------------*/ *[data-element='banner'], *[data-element='banner-main']{ display:flex; flex-flow:row wrap; height:auto; max-width:100%; overflow:hidden; position:relative; width:100%; } /* Columnas ------------------------------*/ *[data-element='banner'] div.col, *[data-element='banner-main'] div.col { display:flex; flex-flow:row wrap; flex-grow:99; min-width:auto; overflow:hidden; position:relative; width:20%; } /* Altura ------------------------------*/ *[data-element='banner-main'] .define-altura { height:70vh; max-height:900px; min-height:320px; } *[data-element='banner'] .define-altura{ height:50vh; max-height:900px; min-height:320px; } /* ------------------------------------- MOVIL 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { /* Columnas ------------------------------*/ *[data-element='banner'] div.col, *[data-element='banner-main'] div.col { width:100%!important; } /* Altura predefinida ------------------------------*/ *[data-element='banner'] .define-altura, *[data-element='banner-main'] .define-altura { aspect-ratio: 4 / 3!important; height:auto; min-height:auto; } /* Columna info ------------------------------*/ *[data-element='banner'] .col-info, *[data-element='banner-main'] .col-info { height:auto; min-height:220px; padding:32px 5vw; order:2; position:relative; width:100%; bottom:auto; left:auto; top:auto; right:auto; } /* ------------------------------------- +++ BANNER MOVIL OPACITY /////////// -------------------------------------*/ *[data-element='banner'].movil-opacity .col-info, *[data-element='banner-main'].movil-opacity .col-info{ background:transparent!important; position:absolute; bottom:0px; left:0px; top:0px; right:0px; } *[data-element='banner'].movil-opacity picture.img-main, *[data-element='banner-main'].movil-opacity picture.img-main{ opacity:0.4!important; } /* Neutralizamos if animated */ *[data-element='banner'].movil-opacity picture.img-main.animated, *[data-element='banner-main'].movil-opacity picture.img-main.animated{ opacity:0.4!important; } /* ------------------------------------- +++ BANNER MOVIL GRADIENT /////////// -------------------------------------*/ *[data-element='banner'].movil-gradient .col-info, *[data-element='banner-main'].movil-gradient .col-info{ background:linear-gradient(to bottom, var(--color-black-20) 40%, var(--color-main) 102%)!important; align-content:flex-end; position:absolute; bottom:0px; left:0px; top:0px; right:0px; } /* Neutralizamos if animated */ *[data-element='banner'].movil-gradient .banner-box.animate, *[data-element='banner-main'].movil-gradient .banner-box.animate{ transform: translateY(0px)!important; } /* ------------------------------------- +++ BANNER MOVIL BOX /////////////// -------------------------------------*/ *[data-element='banner'].movil-box .col-info, *[data-element='banner-main'].movil-box .col-info{ position:absolute; bottom:0px; left:0px; top:auto; right:0px; } /* box */ *[data-element='banner'].movil-box .col-info, *[data-element='banner-main'].movil-box .col-info{ background-color:var(--color-black-50)!important; } /* neutralizamos if animated */ *[data-element='banner'].movil-box .banner-box.animate, *[data-element='banner-main'].movil-box .banner-box.animate{ transform: translateY(0px)!important; } /* ------------------------------------- +++ BANNER MOVIL BLOCK ////////////// -------------------------------------*/ *[data-element='banner'].movil-block .col-info, *[data-element='banner-main'].movil-block .col-info{ position:relative!important; } /* neutralizamos if animated */ *[data-element='banner'].movil-block .banner-box.animate, *[data-element='banner-main'].movil-block .banner-box.animate{ opacity:1.0!important; transform: translateY(0px)!important; } /* ------------------------------------- +++ DELETE DELAY ////////////// -------------------------------------*/ *[data-element='banner'] .animate, *[data-element='banner-main'] .animate{ transition-delay:0.0s!important; } } /*---------------------------------------------------------------- BANNERS - BOX ////////////////////////////////////////////////// ----------------------------------------------------------------*/ .banner-box { align-items:center; align-content:center; display:flex; flex-flow:row wrap; gap:var(--gap-inside-small); height:auto; justify-content:flex-start; z-index:10; width:50%; } .banner-box .title{ padding:0px; margin:0px; } .banner-box .subtitle{ padding:0px; margin:0px; } .banner-box > p{ text-align:left; padding:0px; margin:0px; } .banner-box .button{ margin-top:10px; } .banner-box > *:not(a){ width:100%; } /* If center ------------------------------------------*/ .banner-box.center{ justify-content:center; } .banner-box.center > * { text-align: center; } /* ------------------------------------- MOVIL 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { .banner-box{ justify-content:center; text-align: center; padding:0px 0vw 20px 0vw; width:100%; z-index:99; } .banner-box > *:not(a){ width:100%; } } /*------------------------------------------------------------------------ BANNER - COVER ////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* -------------------------------------------------- DO ---------------------------------------- ANCHO --- ---------------------------------------------------*/ /* Usamos las mismas clases predefinidas from: www/style.css para determinar padding laterales. none │ in-full │ in-full-to-none │ in-wide │ in │ in-thin │ in-to-wide │ in-thin-to-wide ejemplo: