.section-header-webc {
position: absolute;
width: 100%;
z-index: 99;
background: #FFFFFFE5;
padding: 11px 0 20px;
transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 1199px) {
.section-header-webc {
padding: 10px 0 10px;
}
}
@media (min-width: 1200px) {
.section-header-webc .container {
max-width: 1360px;
}
}
.section-header-webc__row {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
min-height: 80px;
transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 1199px) {
.section-header-webc__row {
align-items: center;
}
}
.section-header-webc__nav { min-width: 0;
}
@media screen and (max-width: 1330px) {
.section-header-webc__nav {
flex: auto;
}
}
.section-header-webc__nav--left {
display: flex;
justify-content: flex-end;
padding-right: 30px;
}
.section-header-webc__nav--right {
display: flex;
justify-content: flex-end;
padding-left: 30px;
}
@media screen and (max-width: 1199px) {
.section-header-webc__nav--right {
padding-left: 0px;
}
}
.section-header-webc__menu,
.section-header-webc__mobile-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.section-header-webc__menu {
gap: 28px;
}
.section-header-webc__menu > li {
position: relative;
margin: 0;
}
.section-header-webc__menu > li > a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--theme-black);
text-decoration: none;
transition: color 300ms ease;
font-family: var(--theme-font);
font-weight: 400;
font-size: 16px;
line-height: 20.8px;
letter-spacing: 3px;
vertical-align: middle;
text-transform: uppercase;
border-bottom: 4px solid transparent;
transition: border-color 0.2s ease;
}
.section-header-webc__menu > li > a:hover {
border-bottom-color: var(--theme-black);
}
.section-header-webc__menu > li.menu-item-has-children > a::after {
content: '';
display: inline-block;
width: 8.77px;
height: 12px;
background-image: url('data:image/svg+xml,%3Csvg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5.77559 7.48226C5.28894 6.99561 4.86311 6.53937 4.46771 6.11355C3.55524 5.10984 2.64277 4.10611 1.69988 3.13281C1.27406 2.70699 0.848243 2.28118 0.392008 1.88578C-0.0338118 1.52079 -0.125058 1.42954 0.179099 0.973306C0.392009 0.638733 -0.00339437 0.334573 0.300762 0C2.7036 1.9466 4.80228 4.22778 7.02263 6.35688C7.87427 5.83981 10.0642 3.68029 10.49 2.98073C10.0642 2.342 10.0642 2.15952 10.6421 1.5512C11.3721 1.79453 11.4329 2.37243 11.3112 3.1024C11.5546 3.01116 11.7371 2.9199 11.9804 2.82866C12.0716 3.31531 11.8283 3.61946 11.585 3.8932C10.6421 4.89692 9.69921 5.90064 8.72591 6.93477C8.513 7.14768 8.3305 7.36059 8.17843 7.5735C8.20884 7.66475 8.17843 7.72558 8.20884 7.756C8.09881 7.75598 8.12477 7.75598 8.20884 7.756C8.12477 7.90806 7.97269 8.21222 7.97269 8.3643C7.82061 8.51638 7.82061 8.46568 7.66853 8.51638C7.2123 8.66845 6.99221 8.7293 6.99221 8.7293C6.99221 8.7293 6.90814 8.82053 6.75606 8.7293C6.51058 8.58205 6.75606 8.86594 6.60399 8.65301C6.45191 8.65301 6.39758 8.47197 6.45191 8.51638C6.60399 8.66845 6.82407 8.82053 6.45191 8.51638C6.29983 8.3643 6.45191 8.65324 6.29983 8.3643C6.0597 7.90806 6.14775 7.90806 5.77559 7.48226Z" fill="black"/%3E%3C/svg%3E%0A');
background-repeat: no-repeat;
background-size: contain;
transform: translateY(0px) rotate(0deg);
transition: transform 300ms ease;
}
.section-header-webc__menu > li:hover > a::after,
.section-header-webc__menu > li.is-open > a::after {
transform: translateY(-1.5px) rotate(180deg);
}
.section-header-webc__menu > li > .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 150px;
max-height: unset;
background: var(--theme-white);
box-shadow: 2px 2px 4px 0px #00000040;
list-style: none;
margin: 0;
padding: 10px 11.5px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease;
z-index: 100;
}
.section-header-webc__menu > li > .sub-menu li {
margin: 0;
}
.section-header-webc__menu > li > .sub-menu li a {
display: block;
font-family: var(--theme-font);
color: var(--theme-black);
font-weight: 400;
font-size: 16px;
line-height: 34px;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: color 250ms ease, background 250ms ease;
border-bottom: 4px solid transparent;
}
.section-header-webc__menu > li > .sub-menu li a:hover {
border-bottom-color: var(--theme-black);
}
.section-header-webc__menu > li:hover > .sub-menu,
.section-header-webc__menu > li.is-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.section-header-webc__nav--right .section-header-webc__menu {
justify-content: flex-start;
}
.section-header-webc__logo-wrap {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
.section-header-webc__logo {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.section-header-webc__logo-img {
max-height: 80px;
width: auto;
display: block;
}
@media screen and (max-width: 1199px) {
.section-header-webc__logo-img {
max-height: 72px;
}
}
.section-header-webc__logo-text {
font-family: var(--theme-font);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--theme-black);
}
.section-header-webc__lang-wrap {
flex: 0 0 auto;
display: flex;
align-items: center;
min-width: 100px;
justify-content: flex-end;
}
.section-header-webc__lang {
display: inline-flex;
align-items: center;
background: var(--theme-black);
}
.section-header-webc__lang .gtranslate_wrapper,
.section-header-webc__lang .gt_switcher_wrapper,
.section-header-webc__lang > * {
display: inline-flex;
align-items: center;
}
.section-header-webc__lang a,
.section-header-webc__lang .gt_current,
.section-header-webc__lang .glink {
font-family: var(--theme-font);
font-weight: 200;
font-size: 16.7px;
line-height: 16px;
letter-spacing: 7%;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
color: #FFFFFFE5;
text-decoration: none;
transition: color 250ms ease;
padding: 5px 6px;
}
.section-header-webc__lang a:hover,
.section-header-webc__lang .gt_current:hover,
.section-header-webc__lang .glink:hover {
text-decoration: underline;
}
.section-header-webc__lang a:first-child::after,
.section-header-webc__lang .gt_current:first-child::after,
.section-header-webc__lang .glink:first-child::after {
content: '/';
display: inline-block;
margin-left: 8px;
color: #FFFFFFE5;
font-weight: 400;
}
.section-header-webc__lang .gt-current-lang {
font-weight: 900;
}
.section-header-webc__mobile-actions {
display: flex;
align-items: center;
justify-content: flex-start;
}
@media screen and (max-width: 1199px) {
.section-header-webc__mobile-actions {
width: 70px;
}
}
.section-header-webc__hamburger,
.section-header-webc__close {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--theme-black);
}
.section-header-webc__mobile-menu {
position: fixed;
inset: 0;
z-index: 9999;
background: #000000F2;
color: var(--theme-white);
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
padding: 37px 20px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
}
.section-header-webc__mobile-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.section-header-webc__mobile-top {
display: flex;
align-items: center;
justify-content: flex-start;
}
.section-header-webc__close {
color: var(--theme-accent);
}
.section-header-webc__close svg {
width: 28px;
height: 28px;
}
.section-header-webc__mobile-nav {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.section-header-webc__mobile-list {
flex-direction: column;
align-items: center;
gap: 0;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
.section-header-webc__mobile-list > li {
position: relative;
margin: 0;
width: 100%;
}
.section-header-webc__mobile-list > li > a {
display: inline-block;
padding: 13.5px 0;
font-family: var(--theme-font);
font-weight: 400;
font-size: 16px;
line-height: 20.8px;
letter-spacing: 3px;
vertical-align: middle;
text-transform: uppercase;
color: var(--theme-white);
text-decoration: none;
transition: color 250ms ease;
}
.section-header-webc__mobile-list > li .sub-menu {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 350ms ease, padding 350ms ease;
}
.section-header-webc__mobile-list > li .sub-menu > li {
margin: 0;
}
.section-header-webc__mobile-list > li .sub-menu > li a {
display: inline-block;
font-family: var(--theme-font);
font-weight: 400;
font-size: 16px;
line-height: 20.8px;
letter-spacing: 3px;
vertical-align: middle;
text-transform: uppercase;
color: var(--theme-white);
text-decoration: none;
white-space: nowrap;
transition: color 250ms ease, background 250ms ease;
padding: 13.5px 0;
}
.section-header-webc__mobile-list > li .sub-menu > li a:hover {
opacity: 0.8;
}
.section-header-webc__mobile-list > li.menu-item-has-children {
position: relative;
}
.section-header-webc__mobile-list .menu-item-has-children.is-open .sub-menu {
max-height: 500px !important;
padding: 10px 0;
overflow: visible !important;
}
.section-header-webc__sub-toggle {
position: absolute;
right: 30%;
top: 15px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--theme-white);
transition: transform 300ms ease;
}
.section-header-webc__sub-toggle::after {
content: '';
display: inline-block;
width: 8.77px;
height: 12px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8.77" viewBox="0 0 12 8.77"%3E%3Cpath id="Trazado_1787" data-name="Trazado 1787" d="M5.776,7.482C5.289,7,4.863,6.539,4.468,6.114c-.912-1-1.825-2.007-2.768-2.981C1.274,2.707.848,2.281.392,1.886-.034,1.521-.125,1.43.179.973.392.639,0,.335.3,0,2.7,1.947,4.8,4.228,7.023,6.357A18.315,18.315,0,0,0,10.49,2.981c-.426-.639-.426-.821.152-1.43.73.243.791.821.669,1.551.243-.091.426-.183.669-.274a1.179,1.179,0,0,1-.4,1.065C10.642,4.9,9.7,5.9,8.726,6.935a5.109,5.109,0,0,0-.547.639c.03.091,0,.152.03.182h0a1.823,1.823,0,0,0-.236.608c-.152.152-.152.1-.3.152-.456.152-.676.213-.676.213s-.084.091-.236,0c-.245-.147,0,.137-.152-.076-.152,0-.206-.181-.152-.137.152.152.372.3,0,0-.152-.152,0,.137-.152-.152A2.741,2.741,0,0,0,5.776,7.482Z" fill="%23fff"/%3E%3C/svg%3E%0A');
background-repeat: no-repeat;
background-size: contain;
transform: translateY(0px) rotate(0deg);
transition: transform 300ms ease;
}
.is-open > .section-header-webc__sub-toggle {
top: 10px;
transform: rotate(180deg);
}
.section-header-webc__mobile-lang {
margin-top: 30px;
text-align: center;
padding: 16px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.section-header-webc__mobile-lang .gtranslate_wrapper,
.section-header-webc__mobile-lang .gt_switcher_wrapper {
display: inline-flex;
}
.section-header-webc__mobile-lang a,
.section-header-webc__mobile-lang .gt_current,
.section-header-webc__mobile-lang .glink {
color: var(--theme-white);
font-family: var(--theme-font);
font-size: 0.85rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 4px 8px;
}
.section-header-webc__mobile-lang a.gt_current,
.section-header-webc__mobile-lang .gt_current.gt_current,
.section-header-webc__mobile-lang .glink.gt_current {
background: var(--theme-white);
color: var(--theme-black);
}
@media (max-width: 991.98px) {
.section-header-webc__row {
min-height: 60px;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
}
}
.section-header-webc.section-header-webc_sticky {
position: fixed;
top: 0px;
left: 50%;
transform: translateX(-50%);
animation: stickySlideDown 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
z-index: 99;
width: 100%;
padding: 5px 0 10px;
}
.section-header-webc.section-header-webc_sticky .section-header-webc__row {
min-height: 60px;
}
.section-header-webc.section-header-webc_sticky .section-header-webc__row .section-header-webc__logo-wrap a img {
max-height: 60px;
transition: max-height 0.5s ease-in-out;
}
.section-header-webc.section-header-webc_menu-open {
height: 100vh;
}
@keyframes stickySlideDown {
from {
opacity: 0;
transform: translateX(-50%) translateY(-30px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.section-header-webc--not-home {
border-bottom: 0.5px solid #000000;
}