﻿
/* HEADER */

#SiteHeader { width: 100%; position: fixed; top: 0; z-index: 4; background: #fff; transform: translateY(0); transition: 0.4s; }
#SiteHeader.hide { transform: translateY(-100%); display: block !important; }
.Header-Inner { padding: 0.521vw 9.896vw; display: flex; align-items: center; justify-content: space-between; }

.nav-wrapper .toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 30px; }
/*.search-btn::after { content: ""; height: 18px; width: 1px; background: #b6b4b4; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); }*/
.registrationForm a { display: flex; flex-flow: row-reverse wrap; gap: 10px; align-items: center; }

a.header-logo svg { min-width: 56px; min-height: 56px; height: 4.167vw; width: 4.167vw; }
.lang-text { font-size: .75rem; }
.nav-wrapper .toolbar a { color: #000; text-decoration: none; }
.toolbar .lang-btn { position: relative; margin-left: 32px; display: flex; align-items: center; }
.toolbar .lang-btn::after { content: ""; height: 18px; width: 1px; background: #b6b4b4; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); }
.toolbar .lang-btn svg { margin-left: 5px; }
.toolbar .lang-btn svg path { stroke: #000; }
.nav-wrapper .toolbar .socials a svg { max-height: 16px; max-width: 23px; }
.nav-wrapper .toolbar .socials a { display: flex; align-items: center; justify-content: center; }
.main-nav-link { font-size: clamp(0.9rem, 1.25vw,100rem); position: relative; display: inline-flex; align-items: center; font-family: var(--SecFont); }
.main-nav-link.active { color: var(--main-color); }
.main-nav-link:hover, .main-nav-link:focus { text-decoration: none; color: #000; }
.main-nav-link.active:hover, .main-nav-link.active:focus { color: var(--main-color); }
.toolbar .socials-link { margin-left: 13px; }
.toolbar .socials-link:last-of-type { margin: 0; }
.main-nav-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; }
.main-nav-item { margin-left: 40px; }
.main-nav-item:last-of-type { margin: 0; }
li.main-nav-item.has-sub { position: relative; }
.main-nav .sub-menu { position: absolute; top: 100%; z-index: 1; left: 50%; transform: translateX(-50%); padding: 0; display: flex; list-style: none; animation: fade-in 0.4s ease; flex-direction: column; border-radius: 4px; border: 0; background: var(--white, #FFF); max-height: 0; overflow: hidden; }

.sub-menu-item { width: 100%; }
.sub-menu-item a { color: #000; font-size: clamp(0.75rem,0.94vw,100rem); display: flex; line-height: 1; letter-spacing: 0.18px; justify-content: space-between; /* padding: 0.35vw 0; */ text-decoration: none; white-space: nowrap; }

.main-nav-link.has-sub.open + .sub-menu { display: flex; }
.socials { display: flex; }
/*#SiteHeader .search { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; transition: 0.4s; padding: 0; z-index: -1; }
#SiteHeader .search input { width: 100%; max-width: unset; font-size: 1.25rem; font-weight: 700; font-style: italic; padding: 0 13px; background: none; border: none; color: #fff; border-right: 2px solid #fff; border-radius: 0; }
#SiteHeader .search input::placeholder { color: #fff; opacity: 0.4; }
#SiteHeader .search input:focus {*/ /* outline: 1px solid #1a1a1a; */ /*outline: none; }
#SiteHeader .search-close { border: none; background: none; display: flex; align-items: center; justify-content: center; padding: 0; margin-right: 20px; }
#SiteHeader .search-close svg { width: 20px; height: 20px; }
#SiteHeader.search-open .search { width: 100%; padding: 0 80px; z-index: 1; }*/
.nav-toggle { appearance: none; border: none; background: none; width: 40px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 1px 5px; position: relative; align-items: center; transition: 0.4s; }
.nav-open .nav-toggle { /* justify-content:space-between; */ }
.toggle-bar { width: 30px; height: 3px; background: #000; display: block; transition: 0.4s; }
/*.search-wrapper { position: absolute; top: 0; left: 0; width: 0; height: 100%; transition: 0.4s; overflow: hidden; }*/
/*#SiteHeader.search-open .search-wrapper { width: 100%; z-index: 1; }*/
.nav-close-button { display: flex; justify-content: flex-start; align-items: center; gap: 6px; z-index: 2; }
.nav-close-button .nav-toggle { padding: 0; width: 24px; height: 24px; }
.nav-close-button span { line-height: normal; }


.search-wrapper { width: 61px; }
.search-wrapper.close { position: relative; display: flex; align-items: center; }
.search-wrapper.close button.search-close { opacity: 0; }
.search-wrapper.open { position: relative; height: 1.563vw; overflow: visible; }
button.search-btn, button.search-close { padding: 0; border: 0; background: #fff; }
button.search-btn { position: absolute; left: 0; display: flex; justify-content: flex-end; background: transparent; width: 100%; }
button.search-btn svg { background: #fff; }
.search-wrapper input.search-input { padding: 0; border: 0; }
.search-wrapper.open input.search-input { width: 20.104vw; outline: 0; }
.subOpen .search-wrapper.open #quick-search-container { width: 20.85vw; height: auto; top: 1.25vw; border: 1px solid var(--grey, #E8E8E8); border-top-color: #000; background: #fff; display:block;}
.search-wrapper.close input.search-input { width: 2.083vw; min-width: 40px; outline: 0; pointer-events: none }
.search-wrapper.open button.search-btn { display: none; }
.search-wrapper.open form.search { position: absolute; display: flex; left: 0; border-bottom: 1px solid; }
.finalResultItem { padding: 0.8vw 1.667vw 1vw; font-family: var(--SecFont); font-size: 1rem; line-height: 0.85; letter-spacing: 0.2px; text-decoration: underline; }


@media(min-width: 1025px) {
    .main-nav .open > .sub-menu { max-height: 10000px; padding: 1.1vw; border: 1px solid var(--grey, #E8E8E8); }
    button.search-close svg { width: 0.729vw; min-width: 9px; }
}

@media(min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.2) {
    .search-wrapper.open input.search-input { width: 14.833vw; }
    .search-wrapper.open #quick-search-container { width: 16.1vw; top: 1.7vw; }
    .subOpen .search-wrapper.open #quick-search-container { width: 15.633vw; top:1.6vw }
}

@media(min-width:1024px) and (max-width:1366px) {
    .search-wrapper.open input.search-input { width: 14.833vw; }
    .search-wrapper.open #quick-search-container { width: 16.1vw; top: 1.7vw; }
    .subOpen .search-wrapper.open #quick-search-container { width: 15.633vw; top: 1.6vw }
}

@media (max-width:1024px) {
    .nav-toggle-wrapper { display: flex; justify-content: flex-start; align-items: center; gap: 16px; background-color: #fff; padding: 12px; border-radius: 4px; border: 1px solid var(--grey, #E8E8E8); }

    .search-wrapper { transition: all 0.35s ease; }
    .search-wrapper.open { width: 53.333vw; height: 5.333vw; }
    .search-wrapper form.search { transition: all 0.35s ease; }
    .search-wrapper.open form.search { top: 0; width: 100%; }
    button.search-close { left: 0; }
    .search-wrapper.open input.search-input { width: 100%; }

    .subOpen .search-wrapper.open #quick-search-container { top: calc(100% + 20px); left: -2.667vw; width: 73.7vw; overflow: hidden; border-radius: 4px; border: 1px solid var(--grey, #E8E8E8); background: #FFF; backdrop-filter: blur(13.59000015258789px); }
    ul.searchResultsList { padding: 0 12px; }
    .resultContent a { padding-block: 12px;}
    .finalResultItem { padding: 14px 12px; font-size: 0.9rem; line-height: 0.95; letter-spacing: 0.18px; }
}


.type-navigation { list-style: none; display: flex; padding: 0; justify-content: center; margin: 0; padding-bottom: 15px; border-bottom: 1px solid #000; }

.type-navigation li { margin: 0 39px; font-size: 1rem; }
.type-navigation li a.active { color: #029246; font-weight: 700; }

.search-btn g, .search-btn line { transition: 0.3s; }
.nav-wrapper .toolbar .socials a ellipse, .nav-wrapper .toolbar .socials a path { transition: 0.3s; }
.nav-wrapper .toolbar .socials a:hover ellipse, .nav-wrapper .toolbar .socials a:focus ellipse, .nav-wrapper .toolbar .socials a:hover #Path_44910, .nav-wrapper .toolbar .socials a:focus #Path_44910 { fill: #000; }
.nav-wrapper .toolbar .socials a:hover ellipse, .nav-wrapper .toolbar .socials a:focus ellipse { }
.toolbar .lang-btn, .toolbar .lang-btn svg path { transition: 0.3s; }
.toolbar .lang-btn:hover, .toolbar .lang-btn:focus { color: #B1AFB0; }
.toolbar .lang-btn:hover svg path, .toolbar .lang-btn:focus svg path { stroke: #B1AFB0; }
.sub-menu-item a, .sub-menu-item a::after { transition: 0.3s; }
.sub-menu-item a.link { text-decoration: underline; }
.sub-menu-item a:hover::after, .sub-menu-item a:focus::after { filter: invert(1); }
#SiteHeader .search-close line { transition: 0.3s; }
#SiteHeader .search-close:hover line, #SiteHeader .search-close:focus line { stroke: var(--main-color); }
.submenu-toggle { border: 0; outline: 0; background: transparent; padding: 0; line-height: 0.8; height: auto; display: inline-flex; transform: rotate(270deg); }
.lang-btn .lang-text { margin-bottom: -2px; }
.nav-wrapper .toolbar .socials a:hover path, .nav-wrapper .toolbar .socials a:focus path { fill: #b1afaf !important; }



@media (max-width: 767px) {
    #SiteHeader { position: fixed; }
    .nav-wrapper { position: absolute; right: 0; top: 0; background: #fff; width: 100%; height: auto; display: flex; flex-direction: column; gap: 17px; padding: 20px; z-index: 1; transition: 0.6s cubic-bezier(0.4, 0, 0.25, 1); transform: translateY(-100%); }
    #SiteHeader.nav-open::after { content: ''; position: absolute; height: 100vh; width: 100%; top: 0; left: 0; background: #000; opacity: 0.16; pointer-events: none; }
    .search-btn.mobile::after { display: none; }
    .search-btn.mobile { margin: 0; height: 30px; }
    .header-logo .desktop { display: none; }
    .header-logo .mobile { max-width: 80%; height: auto; }
    .header-logo { text-align: center; }
    .Header-Inner { align-items: center; padding: 20px 20px 0; min-height: 0; }
    .search-btn.mobile svg { width: 30px; height: 30px; }
    .main-nav { padding-inline: 30px; /*border-bottom: 1px solid var(--grey);*/ }
    .nav-wrapper .toolbar { order: 2; margin: 0; justify-content: space-between; }
    .nav-wrapper .toolbar .search-btn { display: none; }
    .nav-wrapper .toolbar .socials { order: 1; width: 50%; justify-content: flex-end; }
    .toolbar .lang-btn { order: 2; margin: 0; }
    .toolbar .lang-btn::after { display: none; }
    .main-nav ul.pages-links { color: #000; flex-direction: column; align-items: flex-start; font-size: 1rem; font-family: var(--SecFont); }
    .main-nav ul, .main-nav ul.pages-links, .main-nav .whatsapp-link-wrapper { border-bottom: 1px solid var(--grey); padding-bottom: 15px; margin-bottom: 20px; }
    .main-nav .main-nav-list { flex-direction: column; align-items: flex-start; padding-bottom: 10px; }
    .main-nav .whatsapp-link-wrapper { display: flex; font-size: 0.65rem; color: #000; }    
    .main-nav ul.socials-links-wrapper { border: 0; gap: 24px; justify-content: flex-start; }

    .main-nav-item { margin-left: 0; position: relative; width: 100%; }
    .main-nav-link { justify-content: space-between; width: 100%; padding: 8px 0; font-size: 1.2rem; font-family: var(--SecFont); line-height: 0.95; letter-spacing: 0.24px; }
    li.main-nav-item.has-sub { display: flex; }
    .main-nav-item.has-sub.open .sub-menu .line-seperator { margin-block: -10px -5px; }


    a.main-nav-link.has-sub { width: auto; }
    .submenu-toggle::after { background: #000; width: 15px; height: 1px; margin: 0; display: block; position: absolute; left: 0; }
    .submenu-toggle::before { background: #000; right: auto; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; left: 7px; transition: 0.3s; z-index: 9999; display: block; position: absolute; }
    .main-nav-link.has-sub::after, .main-nav-link::before { display: none; }
    .main-nav-link:not(.has-sub)::before { display: none; }
    .main-nav .sub-menu { position: fixed; right: 0; top: 0; background: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 20px; z-index: 1; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(100%); max-height: unset; padding: 63px 20px 20px; }
    .main-nav-item.has-sub.open .sub-menu { transform: translateX(0); padding-inline: 50px; }
    .sub-menu-item { width: 100%; }
    .sub-menu-item a { letter-spacing: 0.15px; }
    .sub-menu-item a::after { display: none; }
    .sub-menu-item:last-of-type .sub-menu-link { border: none; }
    .sub-menu.open + .submenu-toggle::before { transform: rotate(90deg) translateX(-8px); }
    #SiteHeader.nav-open .nav-wrapper { transform: translateY(0); }
    .nav-open .toggle-bar:nth-of-type(1) { transform: rotate(45deg) translate(6px, 3px); }
    .nav-open .toggle-bar:nth-of-type(2) { transform: rotate(-45deg) translate(4px, -1px); width: 30px; }
    #SiteHeader.search-open .search { padding: 0 20px; }
    .nav-wrapper .toolbar .socials a svg g > path:first-of-type { fill: #000; }
    .nav-wrapper .toolbar .socials a svg ellipse, .nav-wrapper .toolbar .socials a svg g > path:first-of-type { fill: #000; }
    .nav-wrapper .toolbar a { color: #000; }
    .toolbar .lang-btn svg path { stroke: #000; }
    .type-navigation { padding-top: 15px; }
    .submenu-toggle { display: block; border: 0; outline: 0; padding: 0; width: 30px; background: transparent; transform: rotate(0deg); }
    .sub-menu-item a:hover, .sub-menu-item a:focus { background: #fff; color: #696969; }
    .main-nav-item.has-sub.open .main-nav-link { color: var(--main-color); }
    .sub-menu-link.active { color: var(--main-color); }
    .toolbar .lang-btn { display: none; }
    .lang-mobile { order: 2; position: relative; display: flex; font-weight: 700; font-size: 1rem; padding-top: 5px; }
    .lang-mobile .lang-link:last-of-type { margin-right: 20px; position: relative; }
    .lang-mobile .lang-link:last-of-type::before { content: ""; display: block; width: 2px; height: 65%; position: absolute; top: 50%; right: -10px; background: #000; transform: translateY(-50%); }
    .nav-wrapper .toolbar .socials a svg { max-height: 30px; max-width: 30px; height: 20px; width: 100%; }

    .lang-mobile { display: none; }
    .sub-menu-item .sub-menu-link.title-small { font-size: 0.9rem; line-height: 95%; letter-spacing: 0.18px; }

    .sub-menu-item + li.line-seperator { display: none; }

    header li.social-link svg { min-width: auto; min-height: auto; width: auto; height: auto; }
    .search-wrapper { width: 65px; }
}
