/* ==== NAVIGATION >>> HEADER ================================================================================================================================================================================= */ .menu-header { background: #fff; border-top: none; background: #fff; padding:0; min-width: 320px !important; } .scrolled { } .scrolled .menu-header .top-nav { position: fixed; top: 0; background: #fff; width: 100%; z-index: 99999999999; padding: 5px 0; } .scrolled .menu-header .top-nav .logo-holder { background: #fff; } .scrolled .menu-header .top-nav .logo-holder .logo { width: 90px; } /* ==== NAVIGATION >>> HEADER TOP BAR ========================================================================================================================================================================= */ .menu-header .top-nav { border-bottom: solid 2px rgba(94, 75, 60, 0.1); padding: 16px 0 15px 0; } /* NAVIGATION >>> TOP BAR >>> LOGO */ .menu-header .top-nav .logo-holder { position: relative; } .menu-header .top-nav .logo-holder .logo { width: 160px; height: 38px; line-height: 38px; display: block; background: url('../images/icons/head-logo-belle-new.svg') center center no-repeat; background-size: contain; margin: 0 auto; } /* NAVIGATION >>> TOP BAR >>> MENU NAV TRIGGER */ .menu-trigger-rsp-holder { display: block; position: absolute; top: 0; left: 20px; height: 38px; width: 22px; } .menu-trigger-rsp-holder .menu-trigger-rsp { position: absolute; height: 22px; width: 100%; top: 50%; margin-top: -11px; } .menu-trigger-rsp-holder .menu-trigger-rsp .bar { width: 100%; height: 3px; border-radius: 3px; background: #5e4b3c; left: 0; position: absolute; } .menu-trigger-rsp-holder .menu-trigger-rsp .bar.top { top: 0; } .menu-trigger-rsp-holder .menu-trigger-rsp .bar.mid { top: 50%; margin-top: -1.5px; } .menu-trigger-rsp-holder .menu-trigger-rsp .bar.bot { bottom: 0; } /* NAVIGATION >>> TOP BAR >>> MENU */ .menu-header .top-nav .menu-holder { text-align: right; position: relative; } .menu-header .top-nav .menu-holder > ul { display: inline-block; position: absolute; right: 20px; top: 50%; margin-top: -38px; } .menu-header .top-nav .menu-holder > ul > li { line-height: 24px; height: 24px; display: none; overflow: hidden; padding: 0; float: right; width: auto; } .menu-header .top-nav .menu-holder > ul > li.cart-holder { display: block; overflow: visible; position: relative; } .menu-header .top-nav .menu-holder > ul > li > a { font-size: 16px; color: #ff7f32; display: inline-block; font-weight: bold; text-transform: lowercase; } .menu-header .top-nav .menu-holder > ul > li > a:first-letter { text-transform: uppercase; } .menu-header .top-nav .menu-holder > ul > li.icon > a { width: 31px; height: 24px; position: relative; background-repeat: no-repeat; background-position: center center; } .menu-header .top-nav .menu-holder > ul > li.icon > a + a { position: absolute; } .menu-header .top-nav .menu-holder > ul > li.icon > a:before { position: absolute; width: 31px; height: 24px; text-align: center; line-height: 24px; color: rgba(0,0,0,1); left: 0; top: 0; display: block; font-family: 'cunicons'; font-size: 22px; font-weight: normal; } .menu-header .top-nav .menu-holder > ul > li.icon > a.search:before { content: "e"; } .menu-header .top-nav .menu-holder > ul > li.icon > a.cart:before { content: "h"; } .menu-header .top-nav .menu-holder > ul > li.icon a.lang { background-image: url('../images/icons/lang-es.png'); } .menu-header .top-nav .menu-holder > ul > li.icon > a.lang:before { } /* NAVIGATION >>> TOP BAR >>> CART CONTENT */ .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content { right: -15px; top: 45px; position: absolute; width: 280px; padding: 30px 10px 20px 30px !important; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content .inner .minicart-cta:after { content: ""; clear: both; display: table; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content .inner .scroller { padding: 10px 20px 10px 10px; max-height: 60vh; overflow: auto; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content .inner .scroller::-webkit-scrollbar-track { -webkit-box-shadow: none; border-radius: 3px; background-color: #F5F5F5; opacity: 0.2; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content .inner .scroller::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content .inner .scroller::-webkit-scrollbar-thumb { border-radius: 3px; -webkit-box-shadow: none; background-color: #ff7f32; opacity: 0.2; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:after, .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:before { position: absolute; top: -11px; right: 20px; content: ""; height: 24px; width: 24px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:before { z-index: 99999; background: #fff; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:after { background: rgba(0,0,0,0.1); z-index: 9; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.1); box-shadow: 0 0 7px 0 rgba(0,0,0,0.1); } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content.active { border: none !important; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content > .inner { zoom: 0.9; position: relative; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content .inner:before { position: absolute; top: -15px; left: 0; width: 100%; height: 19px; content: ""; background: #fff; z-index: 9999999; } /* NAVIGATION >>> PHONE LINKS */ .menu-header .top-nav .menu-holder > ol { display: none; } .menu-header .top-nav .menu-holder .phone-resp-trigger { position: absolute; top: -38px; right: 60px; font-size: 22px; line-height: 30px; height: 30px; width: 30px; text-align: center; display: block; border-right: 1px solid rgba(94, 75, 60, 0.15); cursor: pointer; } .float-numbers { padding: 10px 0; background: #f0f0f0; display: none; } .float-numbers ol li { padding: 10px 20px; text-align: center; } .float-numbers ol li a { color: rgba(0,0,0,1); font-weight: bold; font-size: 16px; line-height: 20px; } /* ==== NAVIGATION >>> HEADER BOTTOM BAR ====================================================================================================================================================================== */ .menu-header .bottom-nav { position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0); width: 100%; width: 100%; z-index: 999999999999; display: block; pointer-events: none; } .menu-header .bottom-nav.active { background: rgba(0, 0, 0, 0.4); pointer-events: all; } /* NAVIGATION >>> BOTTOM BAR >>> TOP LVL NAVIGATION */ .menu-header .bottom-nav .nav-holder > ul { display: block; background: #fff; width: 100%; max-width: 280px; height: 100vh; overflow: auto; padding-bottom: 120px; left: -280px; position: relative; } .menu-header .bottom-nav .nav-holder > ul > li.back-button { background: #fff; width: 100%; border-bottom: solid 1px #d9d7d5; } .menu-header .bottom-nav .nav-holder > ul > li.back-button a { display: block; background: url('../images/icons/head-logo-belle-new.svg') center center no-repeat; background-size: contain; height: 40px; width: 150px; margin: 14px 30px 15px 30px; border-bottom: none; } .scrolled .menu-header .bottom-nav.active .nav-holder > ul > li:first-child { border-top: 0; } .scrolled .menu-header .bottom-nav .nav-holder > ul > li.back-button a { margin: 4px 30px; width: 90px; height: 38px; } .menu-header .bottom-nav .nav-holder > ul > li.close-button { left: -280px; position: fixed; bottom: 0; background: #fff; width: 100%; max-width: 280px; padding: 30px; border-top: solid 1px #d9d7d5; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); } .menu-header .bottom-nav.active .nav-holder > ul > li.close-button { left: 0; display: none; } .menu-header .bottom-nav.active .nav-holder > ul > li.close-button a { color: #fff; border-bottom: none !important; text-align: center !important; letter-spacing: 1.5px; padding: 0 10px; } .menu-header .bottom-nav.active .nav-holder > ul > li.close-button a span { display: none; } .menu-header .bottom-nav.active .nav-holder > ul > li:first-child { border-top: 10px solid #5e4b3c; } .menu-header .bottom-nav.active .nav-holder > ul { position: relative; left: 0; } .menu-header .bottom-nav .nav-holder > ul > li { display: block; position: relative; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:before { position: absolute; right: 15px; top: 15px; content: "\f3d1"; display: block; width: 30px; height: 30px; font-family: 'Ionicons'; line-height: 30px; text-align: center; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); color: rgba(0,0,0,1); } .menu-header .bottom-nav .nav-holder > ul > li.active.has-submenu:before { -ms-transform: rotate( 90deg ); -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } .menu-header .bottom-nav .nav-holder > ul > li > a { line-height: 1.43; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(0,0,0,1); display: block; padding: 20px; padding-right: 60px; border-bottom: solid 1px #f0f0f0; } .menu-header .bottom-nav .nav-holder > ul > li.active > a { background: #f0f0f0; } /* HEADER >>> MENU > MEGAMENU NAVIGATION > DE TU A TU */ .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li .block-promo { display: none; } /* NAVIGATION >>> BOTTOM BAR >>> SECOND LVL NAVIGATION */ .menu-header .bottom-nav .nav-holder > ul { } .menu-header .bottom-nav .nav-holder > ul > li > ul { position: static; width: 100%; padding: 0; text-align: left; display: none; } .menu-header .bottom-nav .nav-holder > ul > li > ul > li { } .menu-header .bottom-nav .nav-holder > ul > li > ul > li > a { font-size: 12px; line-height: 1.67; letter-spacing: 1.5px; color: rgba(0,0,0,1); background: rgba( 240, 240, 240, 0.4 ); text-transform: uppercase; padding: 10px 20px; display: block; pointer-events: none; } .menu-header .bottom-nav .nav-holder > ul > li > ul > li.pais > a { pointer-events: all; } .menu-header .bottom-nav .nav-holder > ul > li > ul > li.promo-holder { display: none; } .menu-header .bottom-nav .nav-holder > ul > li > ul > li > ul { } .menu-header .bottom-nav .nav-holder > ul > li > ul > li > ul > li { border-bottom: solid 1px #f0f0f0; } .menu-header .bottom-nav .nav-holder > ul > li > ul > li > ul > li > a { background: #fff; display: block; font-size: 16px; line-height: 1.25; color: #ff7f32; padding: 20px 16px; } /* ==== NAVIGATION >>> FREE DIAGNOSE POP-UP ==================================================================================================================================================================== */ .free-diagnose-popup { position: relative; } /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> OVERLAY LAYOUT */ .free-diagnose-popup .overlay { background: rgba(0, 0, 0, 0.4); pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; opacity: 0; } .free-diagnose-popup .slide { position: fixed; right: -370px; width: 100%; max-width: 360px; height: 100vh; padding: 220px 20px 20px 20px; background: #fff; overflow: auto; -webkit-overflow-scrolling: touch; } .free-diagnose-popup.active .overlay { pointer-events: all; opacity: 1; } .free-diagnose-popup.active .slide { right: 0; } /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> HEADING */ .free-diagnose-popup .slide .heading-holder { position: absolute; top: 20px; left: 0; padding: 0 20px; } .free-diagnose-popup .slide .heading-holder h3 { margin-bottom: 10px; position: relative; padding-right: 30px; } .free-diagnose-popup .slide .heading-holder h3 a { position: absolute; top: 0; right: 0; } .free-diagnose-popup .slide .heading-holder p.copy { margin-bottom: 0; } /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> IFRAME */ .free-diagnose-popup .slide .iframe-holder { height: 1500px; } /* .free-diagnose-popup .slide .iframe-holder.requested { height: 300px; } */ .site-id-2 .free-diagnose-popup .slide .iframe-holder { position: relative; height: 1000px; width: 100%; } .free-diagnose-popup .slide .iframe-holder .loader.spinner-svg { position: absolute; top: 0; left: 50%; margin-left: -20px; } .free-diagnose-popup .slide .iframe-holder iframe { height: 100%; width: 100%; } /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> SUBTRIGGER */ .subtrigger { position: fixed; bottom: 0; right: 0%; background: #ff7f32; height: auto !important; z-index: 999998; padding: 0 !important; width: 100%; } .subtrigger span { display: block; line-height: 18px !important; padding: 15px 20px; font-size: 14px; text-transform: lowercase; } .subtrigger > span:first-letter { text-transform: uppercase; } .subtrigger span > span { padding: 0; display: inline-block; } .subtrigger span em { display: none; } /* ==== NAVIGATION >>> FOOTER ================================================================================================================================================================================= */ .menu-footer { } /* ==== NAVIGATION >>> FOOTER TOP BAR ========================================================================================================================================================================= */ .menu-footer .top-nav { background: #4c3a2c; padding: 30px 0; } .menu-footer .top-nav .nav-holder ul { display: block; max-width: 280px; margin: 0 auto; } .menu-footer .top-nav .nav-holder ul > li { text-align: center; border-bottom: 1px solid #5e4b3c; /* height: 45px; line-height: 45px; */ line-height: 20px; padding: 13px 0; } .menu-footer .top-nav .nav-holder ul > li:last-of-type { border-bottom: none; } .menu-footer .top-nav .nav-holder ul > li a { color: #d7a884; } .menu-footer .top-nav .nav-holder ul > li a:hover { color: #ff7f32; } /* ==== NAVIGATION >>> FOOTER SOCIAL BAR ====================================================================================================================================================================== */ .menu-footer .social-nav { background: #fff; padding: 60px 0 100px; } .menu-footer .social-nav .close-holder > ul { display: flex; justify-content: center; position: relative; flex-wrap: wrap; } .menu-footer .social-nav .close-holder > ul > li:first-of-type { width: 100%; flex: 0 1 auto; margin-bottom: 20px; } .menu-footer .social-nav .close-holder > ul > li { display: block; text-align: center; flex: 0 1 auto; height: 24px; line-height: 24px; padding: 0 8px; } .menu-footer .social-nav .close-holder > ul > li > span { font-size: 14px; font-weight: bold; color: rgba(0,0,0,1); } .menu-footer .social-nav .close-holder > ul > li > a { height: 24px; font-size: 24px; color: rgba(0,0,0,1); width: 34px; text-align: center; display: block; margin: 0 auto; } @media only screen and ( min-width : 24em ) { /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> OVERLAY LAYOUT */ .free-diagnose-popup .overlay { } .free-diagnose-popup .slide { right: -430px; max-width: 420px; padding: 200px 20px 20px 20px; } /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> HEADING */ .free-diagnose-popup .slide .heading-holder { position: absolute; top: 30px; left: 0; padding: 0 20px; } /* NAVIGATION >>> PHONE LINKS */ .menu-header .top-nav .menu-holder .phone-resp-trigger { right: 65px; width: 35px; text-align: left; border-right: 1px solid rgba(94, 75, 60, 0.15); } } @media only screen and ( min-width : 48em ) { .menu-header { border-top: none; } /* NAVIGATION >>> TOP BAR >>> LOGO */ .menu-header .top-nav .logo-holder { padding-left: 60px; } .menu-header .top-nav .logo-holder .logo { margin: 0; } /* NAVIGATION >>> TOP BAR >>> MENU */ .menu-header .top-nav .menu-holder > ul { position: static; margin-top: 0; padding-top: 7px; } .menu-header .top-nav .menu-holder > ul > li { padding: 0 10px; } .menu-header .top-nav .menu-holder > ul > li.icon { display: block; border-left: 1px solid rgba(94, 75, 60, 0.15); } .cart-holder .cart-contents .cart-contents-count { position: relative; top: -4px; left: 6px; } /* NAVIGATION >>> TOP BAR >>> SEARCH TRIGGER */ .menu-header .top-nav .menu-holder > ul > li.icon.search-holder { position: relative; overflow: visible; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:after, .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:before { width: 100%; height: 5px; background: #fff; content: ""; left: 0; display: block; position: absolute; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:after { bottom: -5px; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:before { top: -5px; } /* NAVIGATION >>> TOP BAR >>> SEARCH FORM */ .menu-header .top-nav .menu-holder > ul > li.icon.search-holder .searchform { width: 0; opacity: 0; display: inline-block; vertical-align: top; overflow: hidden; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder .searchform input { width: 100%; height: 24px; line-height: 24px; vertical-align: top; background: transparent; border: none; padding: 0 3px; font-size: 14px; color: rgba(0,0,0,1); } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder .searchform span { display: block; height: 24px; width: 24px; position: absolute; top:0; right: 10px; text-align: center; font-size: 14px; color: #4a4a4a; cursor: pointer; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder.active .searchform { width: 260px; opacity: 1; padding: 0 40px 0 0; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder.active { background: #f0f0f0; padding: 0 0 0 5px; border: none; left: 1px; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder.active:after, .menu-header .top-nav .menu-holder > ul > li.icon.search-holder.active:before { background: #f0f0f0; } /* NAVIGATION >>> TOP BAR >>> COUNTRY TRIGGER */ .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder { overflow: visible; position: relative; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder:hover:after { background: transparent; position: absolute; top: 18px; left: 0; width: 100%; height: 44px; content: ""; z-index: 1; display: block; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder:hover > a { position: relative; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder:hover > a:after, .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder:hover > a:before { position: absolute; top: 35px; left: 50%; content: ""; height: 24px; width: 24px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: -10px; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder:hover > a:after { z-index: 99999; background: #fff; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder:hover > a:before { background: rgba(0,0,0,0.3); z-index: 999; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); } /* NAVIGATION >>> TOP BAR >>> COUNTRY CONTENT */ .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder > ul { background: #fff; display: none; width: 220px; position: absolute; top: 45px; right: 0; padding: 35px 30px; text-align: left; z-index: 9999; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); opacity: 0; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder:hover > ul { display: block; opacity: 1; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder > ul > li { margin-bottom: 10px; width: 100%; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder > ul > li:last-child { margin-bottom: 0; } .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder > ul > li a { display: block; width: 100%; } /* NAVIGATION >>> TOP BAR >>> CART CONTENT */ .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content { right: -60px; top: 60px; position: absolute; width: 500px; padding: 30px; z-index: 9999; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:after, .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:before { position: absolute; top: -11px; right: 75px; content: ""; height: 24px; width: 24px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:before { z-index: 99999; background: #fff; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content:after { background: rgba(0,0,0,0.1); z-index: 9; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.1); box-shadow: 0 0 7px 0 rgba(0,0,0,0.1); } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content.active { border: none !important; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content > .inner { zoom: 1; } .menu-header .top-nav .menu-holder > ul > li.cart-holder .js-minicart-content .inner:before { top: -30px; height: 30px; } /* NAVIGATION >>> FOOTER SOCIAL BAR */ .menu-footer .social-nav { } .menu-footer .social-nav .close-holder > ul { flex-wrap: nowrap; background: } .menu-footer .social-nav .close-holder > ul > li:first-of-type { width: auto; margin-bottom: 0; } /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> OVERLAY LAYOUT */ .free-diagnose-popup .overlay { } .free-diagnose-popup .slide { right: -490px; max-width: 480px; padding: 200px 40px 40px 40px; } /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> HEADING */ .free-diagnose-popup .slide .heading-holder { position: absolute; top: 40px; left: 0; padding: 0 40px; } /* ==== NAVIGATION >>> FREE DIAGNOSE POP-UP ==================================================================================================================================================================== */ /* .free-diagnose-popup { } .free-diagnose-popup .overlay { background: rgba(0, 0, 0, 0.4); pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; opacity: 0; } .free-diagnose-popup .slide { position: fixed; right: -370px; width: 100%; max-width: 360px; height: 100vh; padding: 180px 0 20px 0; background: #fff; } .free-diagnose-popup .slide .heading-holder { position: absolute; top: 20px; left: 0; padding: 0 20px; } .free-diagnose-popup .slide .heading-holder h3 { margin-bottom: 10px; position: relative; padding-right: 30px; } .free-diagnose-popup .slide .heading-holder h3 a { position: absolute; top: 0; right: 0; } .free-diagnose-popup .slide .heading-holder p.copy { margin-bottom: 0; } .free-diagnose-popup .slide .iframe-holder { position: relative; height: 100%; } .free-diagnose-popup .slide .iframe-holder iframe { height: 100%; width: 100%; } .free-diagnose-popup.active .overlay { pointer-events: all; opacity: 1; } .free-diagnose-popup.active .slide { right: 0; } */ /* NAVIGATION >>> PHONE LINKS */ .float-numbers, .menu-header .top-nav .menu-holder .phone-resp-trigger { display: none !important; } .menu-header .top-nav .menu-holder { } .menu-header .top-nav .menu-holder > ol { position: absolute; bottom:50%; margin-bottom: -12px; right: 150px; display: block; } .menu-header .top-nav .menu-holder > ol > li { display: inline-block; padding: 0 10px; } .menu-header .top-nav .menu-holder > ol > li > a { color: rgba(0,0,0,1); font-weight: bold; font-size: 18px; line-height: 24px; } .menu-header .top-nav .menu-holder > ol > li:first-child { padding: 0 10px 0 40px; overflow: visible; } .menu-header .top-nav .menu-holder > ol > li:first-child:before { position: absolute; left: 0; top: -3px; height: 30px; width: 30px; background: #fff; font-size: 24px; content: 'n'; font-family: 'cunicons' !important; line-height: 30px; text-align: center; } .menu-header .top-nav .menu-holder > ol > li:first-child > a { } .menu-header .top-nav .menu-holder > ol > li:last-child { border-left: 1px solid rgba(94, 75, 60, 0.15); } .menu-header .top-nav .menu-holder > ol > li:last-child > a { } } @media only screen and ( min-width : 64em ) { /* NAVIGATION >>> TOP BAR >>> LOGO */ .menu-header .top-nav .logo-holder { padding-left: 20px; } .menu-header .top-nav .logo-holder .logo { width: 235px; height: 71px; line-height: 71px; } /* NAVIGATION >>> TOP BAR >>> MENU NAV TRIGGER */ .menu-trigger-rsp-holder { display: none; } /* NAVIGATION >>> TOP BAR >>> MENU */ .menu-header .top-nav .menu-holder > ul { text-align: right; } .menu-header .top-nav .menu-holder > ul > li { padding: 0 15px; } .menu-header .top-nav .menu-holder > ul > li.text { display: block; width: 100%; float: none; position: relative; top: -10px; margin-bottom: 5px; } /* NAVIGATION >>> TOP BAR >>> SEARCH TRIGGER */ .menu-header .top-nav .menu-holder > ul > li.icon.search-holder { } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:after, .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:before { height: 8px; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:after { bottom: -8px; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:before { top: -8px; } /* NAVIGATION >>> TOP BAR >>> SEARCH FORM */ .menu-header .top-nav .menu-holder > ul > li.icon.search-holder .searchform input { font-size: 16px; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder.active .searchform { width: 320px; } /* NAVIGATION >>> BOTTOM BAR */ .menu-header .bottom-nav { border-bottom: solid 2px rgba(94, 75, 60, 0.1); padding: 24px 0 21px 0; position: static; max-width: none; height: auto; overflow: visible; background: #fff; display: block !important; pointer-events: all; } .menu-header .bottom-nav.active { background: #fff; } /* NAVIGATION >>> BOTTOM BAR >>> TOP LVL NAVIGATION */ .menu-header .bottom-nav .nav-holder > ul { display: flex; justify-content: space-between; position: relative; max-width: none; height: auto; overflow: visible; padding: 0; left: 0; } .menu-header .bottom-nav.active .nav-holder > ul { left: 0; } .menu-header .bottom-nav .nav-holder > ul > li { padding: 0 10px !important; } .menu-header .bottom-nav .nav-holder > ul > li > a { } .menu-header .bottom-nav .nav-holder > ul > li:nth-child(2) { border-left: none; } .menu-header .bottom-nav .nav-holder > ul > li.close-button, .menu-header .bottom-nav .nav-holder > ul > li.back-button { display: none; } .menu-header .bottom-nav .nav-holder > ul > li { display: block; text-align: center; flex: 1 1 auto; border-left: 1px solid rgba(94, 75, 60, 0.1); padding-right: 0; border-bottom: none; position: static; } .menu-header .bottom-nav .nav-holder > ul > li > a { line-height: 21px; height: 21px; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(0,0,0,1); display: inline-block; padding: 0; border: none; } .menu-header .bottom-nav .nav-holder > ul > li.active > a { color: rgba(0,0,0,1); background: transparent; } .menu-header .bottom-nav .nav-holder > ul > li:hover > a { color: #d7a884; } .menu-header .bottom-nav .nav-holder > ul > li > ul { position: absolute; background: #fff; width: 100%; left: 0; top: 62px; padding: 30px 10px; text-align: left; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); display: none !important; justify-content: space-between; z-index: 999; opacity: 0 } /* NAVIGATION >>> BOTTOM BAR >>> SECOND LVL NAVIGATION */ .menu-header .bottom-nav .nav-holder > ul > li:hover > ul > li.promo-holder { display: block; } .menu-header .bottom-nav .nav-holder > ul { position: relative; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu { } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:before { display: none; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:after { display: block; position: absolute; top: 18px; left: 0; width: 100%; height: 44px; pointer-events: none; -webkit-transition:all 300ms ease-out;-moz-transition:all 300ms ease-out;-ms-transition:all 300ms ease-out;-o-transition:all 300ms ease-out;transition:all 300ms ease-out; content: ""; opacity: 0; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:hover:after { content: ""; z-index: 1; display: block; z-index: 999; opacity: 1; pointer-events: all; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:hover > a { position: relative; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:hover > a:after, .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:hover > a:before { position: absolute; top: 54px; left: 50%; content: ""; height: 24px; width: 24px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: -10px; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:hover > a:after { z-index: 9999; background: #fff; } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:hover > a:before { background: rgba(0,0,0,0.3); z-index: 99; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); box-shadow: 0 0 7px 0 rgba(0,0,0,0.3); } .menu-header .bottom-nav .nav-holder > ul > li.has-submenu:hover > ul { display: flex !important; opacity: 1; width: 100%; z-index: 99999999; } .menu-header .bottom-nav .nav-holder > ul > li > ul { } .menu-header .bottom-nav .nav-holder > ul > li > ul > li > a { background: transparent; } .menu-header .bottom-nav .nav-holder > ul > li > ul > li > ul > li { border-bottom: none; } /* HEADER >>> MENU > MEGAMENU NAVIGATION > REGULAR */ .menu-header .bottom-nav .nav-holder > ul > li.regular-submenu > ul > li { width: 33%; padding: 0 20px; border-left: 1px solid rgba(94, 75, 60, 0.15); } .menu-header .bottom-nav .nav-holder > ul > li.regular-submenu > ul > li:first-of-type { border: none !important; } .menu-header .bottom-nav .nav-holder > ul > li.regular-submenu > ul > li > a { letter-spacing: 3px; padding: 0; } .menu-header .bottom-nav .nav-holder > ul > li.regular-submenu > ul > li > ul { padding: 15px 0 0 0; } .menu-header .bottom-nav .nav-holder > ul > li.regular-submenu > ul > li > ul > li { padding: 0; pointer-events: none; color: rgba(0,0,0,1); margin-bottom: 15px; border-bottom: none; } .menu-header .bottom-nav .nav-holder > ul > li.regular-submenu > ul > li > ul > li > a { line-height: 1.25; font-size: 16px; color: #ff7f32; display: block; pointer-events: all; max-width: 320px; padding: 0; } .menu-header .bottom-nav .nav-holder > ul > li.regular-submenu > ul > li > ul > li > a:hover { color: #ff7f32; } /* HEADER >>> MENU > MEGAMENU NAVIGATION > BLOCK */ .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul { background: #fff; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li { } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li:first-of-type { width: 35%; padding: 20px; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li:last-of-type { width: 65%; padding: 10px 20px; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li:first-of-type > ul { } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li:first-of-type > ul > li { padding: 0; pointer-events: none; color: rgba(0,0,0,1); margin-bottom: 15px; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li:first-of-type > ul > li > a { line-height: 1.25; font-size: 16px; color: #ff7f32; display: block; pointer-events: all; padding: 0; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li:first-of-type > ul > li > a:hover { color: #ff7f32; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo { background: #fff; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo p.intro { font-size: 16px; line-height: 1.25; color: rgba(0,0,0,1); margin-bottom: 17px; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .box { background: #f5f5f5; box-shadow: 0 2px 1px 0 #d9d7d5; margin-bottom: 20px; position: relative; overflow: hidden; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .box .division { width: 50%; float: left; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .box .division.copy-box { padding: 41px; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .box .division.image-box .img-bg { width: 100%; height: 100%; width: 50%; position: absolute; right: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .box .division.image-box .img-bg img { float: right; display: block; margin: 0; } /* .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .box .division.image-box figure img { display: block; margin: 0; } */ .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .close-link { display: block; text-align: right; } .menu-header .bottom-nav .nav-holder > ul > li.block-submenu > ul > li .block-promo .close-link a { font-size: 16px; line-height: 1.25; height: 20px; } /* .menu-header .bottom-nav .nav-holder > ul > li:nth-child(8) { display: none !important; } */ .menu-header .bottom-nav .nav-holder > ul > li:nth-child(7) { display: none !important; } /* HEADER >>> MENU > MEGAMENU NAVIGATION > DE TU A TU */ /* .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li { width: 25%; padding: 0 20px; border-left: 1px solid rgba(94, 75, 60, 0.15); } */ .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li:first-of-type { width: 75%; padding: 0 20px; border: none !important; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li:last-of-type { width: 25%; padding: 0 20px; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul { padding: 15px 0 0 0; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul > li { padding: 0; pointer-events: none; color: rgba(0,0,0,1); margin-bottom: 15px; border-bottom: none; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul > li > a { line-height: 1.25; font-size: 16px; color: #ff7f32; display: block; pointer-events: all !important; max-width: 200px; padding: 0; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul > li > a:hover { color: #ff7f32; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li .block-promo { display: block; background: #fff; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li .archive-loop li a:first-letter { text-transform: uppercase; } /* .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul { background: red; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li { background: pink; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li:first-of-type { width: 65%; padding: 20px; background: orange; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li:last-of-type { width: 35%; padding: 10px 20px; background: green; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul > li { background: red; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul > li { padding: 0; pointer-events: none; color: rgba(0,0,0,1); margin-bottom: 15px; border-bottom: none; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul > li > a { line-height: 1.25; font-size: 16px; color: #ff7f32; display: block; pointer-events: all; background: #000; } .menu-header .bottom-nav .nav-holder > ul > li.blog-submenu > ul > li > ul > li > a:hover { color: #ff7f32; } */ /* NAVIGATION >>> PHONE LINKS */ .menu-header .top-nav .menu-holder { } .menu-header .top-nav .menu-holder > ol { top: initial; bottom: 23px; right: 150px; } .menu-footer .top-nav { } .menu-footer .top-nav .nav-holder ul { display: flex; justify-content: space-between; position: relative; max-width: none; } .menu-footer .top-nav .nav-holder ul > li { text-align: center; flex: 1 1 auto; border-left: 1px solid #5e4b3c; height: auto; line-height: 24px; border-bottom: none; padding: 0 10px; align-items: center; } .menu-footer .top-nav .nav-holder ul > li a { display: block; } .menu-footer .top-nav .nav-holder ul > li:first-of-type { border: none; } /* NAVIGATION >>> SCROLLED */ .scrolled .menu-header .top-nav { top: -76px; z-index: 999999999999999999; } .scrolled .menu-header .top-nav .logo-holder .logo { position: absolute; top: 70px; z-index: 999999999999; width: 80px; left: 30px; } .scrolled .menu-header .bottom-nav { background: #fff; position: fixed; top: 0; left: 0; z-index: 99999999; } .scrolled .menu-header .bottom-nav ul.ts > li:nth-child( 2 ) { padding-left: 110px !important; } /* .scrolled .menu-header .bottom-nav ul.ts li:nth-child( 2 ) { background: #000; } .scrolled .menu-header .bottom-nav .nav-holder > ul > li > ul { left: 0; } .scrolled .menu-header .bottom-nav .nav-holder > ul { background: transparent; } .scrolled .menu-header .bottom-nav .nav-holder > ul > li > ul { left: -30px; } */ } @media only screen and ( min-width : 75em ) { /* NAVIGATION >>> TOP BAR >>> MENU */ .menu-header .top-nav .menu-holder > ul { text-align: right; } .menu-header .top-nav .menu-holder > ul > li.text { display: block; width: auto; float: left; position: static; top: 0; margin-bottom: 0; } /* NAVIGATION >>> TOP BAR >>> SEARCH TRIGGER */ .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:after, .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:before { height: 10px; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:after { bottom: -10px; } .menu-header .top-nav .menu-holder > ul > li.icon.search-holder:before { top: -10px; } /* NAVIGATION >>> TOP BAR >>> SEARCH FORM */ .menu-header .top-nav .menu-holder > ul > li.icon.search-holder .searchform input { font-size: 18px; } /* NAVIGATION >>> PHONE LINKS */ .menu-header .top-nav .menu-holder { top: 0; } .menu-header .top-nav .menu-holder > ol { right: 30px; bottom: 6px; } /* NAVIGATION >>> SCROLLED */ .scrolled .menu-header .top-nav .logo-holder .logo { width: 100px; left: 0; } .scrolled .menu-header .bottom-nav { z-index: 99999999; } .scrolled .menu-header .bottom-nav ul.ts > li:nth-child( 2 ) { padding-left: 110px !important; } .scrolled .menu-header .bottom-nav .nav-holder > ul > li > ul { left: 0; } } @media only screen and ( min-width : 84em ) { /* NAVIGATION >>> FREE DIAGNOSE POP-UP >>> SUBTRIGGER */ .subtrigger { top: 50%; right: -1px; width: auto !important; height: 168px !important; z-index: 999998; padding: 0 !important; margin-top: -75px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .subtrigger span { display: block; max-width: 100px; white-space: normal !important; line-height: 18px !important; padding: 40px 0; font-size: 16px; letter-spacing: -1px; } .subtrigger span em { font-size: 11px; font-weight: normal; margin-top: 15px; text-decoration: underline; display: block; font-style: normal; letter-spacing: 0; } } @media only screen and ( min-width : 90em ) { /* NAVIGATION >>> TOP BAR >>> COUNTRY CONTENT */ .menu-header .top-nav .menu-holder > ul > li.icon.lang-holder > ul { left: 50%; margin-left: -110px; } }