.menu--desktop {
display: block;
}
.menu--mobile {
display: none;
}
@media (max-width: 1024px) {
.menu--desktop {
display: none;
}
.menu--mobile {
display: block;
}
}
.menu__item {
position: relative;
}
.menu__link {
letter-spacing: 2px;
}
.menu__link,
.menu__link:active,
.menu__link:focus,
.menu__link:hover {
text-decoration: none;
}
.menu__link--active-branch,
.menu__link--active-link {
font-weight: 700;
}
@media (min-width: 1025px) and (max-width: 1150px) {
.menu__link {
font-size: 0.833rem;
}
}
@media (max-width: 1024px) {
.menu__item {
display: block;
width: 100%;
}
.menu__link {
display: block;
font-size: 1.083rem;
}
}
.menu__item--depth-1 {
display: inline-block;
margin-left: 40px;
padding: 16px 0;
text-transform: uppercase;
}
.menu__item--depth-1 > .menu__link--active-link:after {
bottom: -3px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 100%;
}
@media (max-width: 1024px) {
.menu__item--depth-1 {
margin-left: 0 !important;
padding: 0;
}
.menu__item--depth-1 > .menu__link {
padding: 0.35rem 1.225rem;
}
.menu__item--depth-1 > .menu__link--active-link:after {
content: none;
}
}
.menu__submenu {
box-shadow: 0 34px 64px rgba(0, 0, 0, 0.35);
display: none;
left: 0;
padding: 22px !important;
position: absolute;
text-align: left;
text-transform: none;
top: 100%;
width: 270px;
z-index: 99;
}
.menu__item--open > .menu__submenu {
display: block;
}
.menu__item--depth-1:first-child .menu__submenu--level-2 {
transform: unset;
}
.menu__submenu .menu__item {
border-bottom: 1px solid #d1d6dc;
padding: 0;
width: 100%;
}
.menu__item--depth-1:first-child .menu__item:last-child {
border-bottom: 0 solid #d1d6dc;
}
.menu__submenu .menu__link {
display: block;
padding: 7px 0;
text-transform: uppercase;
transition: background-color 0.3s;
width: 100%;
}
.menu__submenu .menu__link img {
width: 100%;
}
.menu__submenu .menu__link img + span {
text-align: left;
width: 100%;
}
.menu__submenu--level-3 {
left: 100%;
top: 0;
}
.menu__item--depth-1:nth-last-child(-n + 2) .menu__submenu--level-3 {
left: auto;
right: 100%;
top: 0;
}
.menu__submenu .menu__item--has-submenu > .menu__link {
padding-right: 3rem;
}
@media (min-width: 1025px) {
li.menu__item.menu__item--depth-1.menu__item--has-submenu.hs-skip-lang-url-rewrite.menu__item--open
> a:after {
background: #fff;
bottom: -12px;
content: "";
display: block;
height: 20px;
left: 0;
margin: 0 auto;
overflow: hidden;
position: absolute;
right: 0;
transform: rotate(45deg);
transition: background-color 0.3s;
width: 20px;
z-index: 2;
}
.menu__item--depth-1:nth-child(2) .menu__submenu--level-2 {
min-width: 770px;
padding: 36px 35px !important;
transform: translate(-60%);
}
.menu__item--depth-1:nth-child(2) .menu__submenu--level-2 .menu__item {
display: inline-block;
position: unset;
width: auto;
}
.menu__item--depth-1:nth-child(2)
.menu__submenu--level-2
ul.menu__submenu.menu__submenu--level-3.no-list {
align-items: center;
background: #fff;
box-shadow: none;
display: flex;
flex-wrap: wrap;
left: 0;
opacity: 0;
padding-bottom: 0 !important;
text-align: center;
top: calc(100% - 45px);
visibility: hidden;
width: 100%;
}
.menu__item--depth-1:nth-child(2)
.menu__submenu--level-2
.menu__item:first-child
ul.menu__submenu.menu__submenu--level-3.no-list,
.menu__item--depth-1:nth-child(2)
.menu__submenu--level-2
.menu__item:hover
ul.menu__submenu.menu__submenu--level-3.no-list {
opacity: 1;
visibility: visible;
}
.menu__item--depth-1:nth-child(2)
.menu__submenu--level-2
ul.menu__submenu.menu__submenu--level-3.no-list
li.menu__item.menu__item--depth-3 {
border-bottom: 0;
margin-bottom: 20px;
margin-right: 10px;
width: calc(33.33% - 7px);
}
.menu__item--depth-1:nth-child(2)
.menu__submenu--level-2
ul.menu__submenu.menu__submenu--level-3.no-list
li.menu__item.menu__item--depth-3:nth-child(3n) {
margin-right: 0;
}
.menu__item--depth-1:nth-child(2) .menu__submenu--level-2:after {
background: #d1d6dc;
content: "";
height: 1px;
left: 36px;
position: absolute;
top: calc(100% - 36px);
width: calc(100% - 70px);
z-index: 999;
}
.menu__item--depth-1:nth-child(3) .menu__submenu--level-2 {
min-width: 770px;
padding: 36px 35px !important;
transform: translate(-30%);
}
.menu__item--depth-1:nth-child(3) .menu__submenu--level-2 .menu__item {
display: inline-block;
margin-right: -8px;
position: unset;
width: auto;
}
.menu__item--depth-1:nth-child(3)
.menu__submenu--level-2
ul.menu__submenu.menu__submenu--level-3.no-list {
align-items: center;
background: #fff;
box-shadow: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
left: 0;
opacity: 0;
padding-bottom: 0 !important;
text-align: center;
top: calc(100% - 45px);
visibility: hidden;
width: 100%;
}
.menu__item--depth-1:nth-child(3)
.menu__submenu--level-2
.menu__item:first-child
ul.menu__submenu.menu__submenu--level-3.no-list,
.menu__item--depth-1:nth-child(3)
.menu__submenu--level-2
.menu__item:hover
ul.menu__submenu.menu__submenu--level-3.no-list {
opacity: 1;
visibility: visible;
}
.menu__item--depth-1:nth-child(3)
.menu__submenu--level-2
ul.menu__submenu.menu__submenu--level-3.no-list
li.menu__item.menu__item--depth-3 {
border-bottom: 0;
margin-bottom: 20px;
width: calc(25% - 7px);
}
.menu__item--depth-1:nth-child(3) .menu__submenu--level-2:after {
background: #d1d6dc;
content: "";
height: 1px;
left: 36px;
position: absolute;
top: calc(100% - 36px);
width: calc(100% - 70px);
z-index: 999;
}
}
@media (min-width: 1380px) {
.menu__item--depth-1:nth-child(3) .menu__submenu--level-2 {
min-width: 770px;
padding: 36px 35px !important;
transform: translate(-20%);
}
}
@media (max-width: 1380px) {
.menu__item--depth-1 {
margin-left: 20px;
max-width: 100%;
}
.menu__item--depth-1:first-child {
margin-left: 0;
}
}
@media (max-width: 1024px) {
.menu__submenu {
border: none;
border-radius: 0;
box-shadow: none;
position: static;
transform: unset;
width: 100%;
}
.menu__submenu .menu__item {
background-color: #fff;
border-bottom: none;
border-top: 2px solid #ebeff3;
padding: 0;
}
.menu__submenu .menu__link {
display: block;
padding: 0.7rem 2rem;
transition: none;
width: 100%;
}
.menu__submenu .menu__item .menu__link:focus,
.menu__submenu .menu__item .menu__link:hover {
background-color: inherit;
transition: none;
}
.menu__item--has-submenu > .menu__link {
width: 70%;
}
.menu__submenu--level-3 .menu__item .menu__link {
padding: 0.7rem 3rem;
}
}
@media (min-width: 1025px) {
.menu__submenu .menu__child-toggle {
margin-left: auto;
padding: 0 1.05rem;
}
.menu__child-toggle {
position: absolute;
right: 5px;
top: 30px;
z-index: 2;
}
.menu__item--depth-1 > .menu__child-toggle {
position: static;
right: 0;
top: 0;
vertical-align: middle;
}
.menu__child-toggle-icon {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top-style: solid;
border-top-width: 7px;
display: block;
height: 0;
margin-left: 1px;
width: 0;
}
}
@media (max-width: 1024px) {
.menu__child-toggle {
background-position: center right 30px;
background-repeat: no-repeat;
background-size: 20px;
border: none;
cursor: pointer;
height: auto;
padding: 0;
position: absolute;
right: 0;
top: 6px;
width: 30%;
}
.menu__child-toggle-icon {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgc3Ryb2tlPSIjOTc5ODlGIiBzdHJva2Utd2lkdGg9IjIuNCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCB4PSIxLjIiIHk9IjkuNiIgd2lkdGg9IjE2LjgiIGhlaWdodD0iMSIgcng9Ii41Ii8+PHJlY3QgdHJhbnNmb3JtPSJyb3RhdGUoOTAgOS42IDkuNikiIHg9IjEuMiIgeT0iOS42IiB3aWR0aD0iMTYuOCIgaGVpZ2h0PSIxIiByeD0iLjUiLz48L2c+PC9zdmc+);
background-repeat: no-repeat;
display: block;
height: 20px;
margin-left: auto;
margin-right: 1.05rem;
transition: transform 0.4s;
width: 20px;
}
.menu__item--open > .menu__child-toggle .menu__child-toggle-icon {
transform: rotate(45deg);
transition: transform 0.4s;
}
.menu__item--depth-1,
.menu__submenu .menu__item:not(:last-child) {
margin-bottom: 10px;
}
.menu__submenu .menu__item {
border-top: 0;
}
.menu__submenu .menu__item > span {
padding: 0;
}
.menu__item--open .menu__submenu--level-3 {
display: flex;
flex-wrap: wrap;
}
li.menu__item.menu__item--depth-3 {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-right: 20px;
text-align: center;
width: 65%; }
li.menu__item.menu__item--depth-3 > .menu__link {
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
li.menu__item.menu__item--depth-3 > .menu__link img {
width: 90%;
}
li.menu__item.menu__item--depth-3 > .menu__link img + span {
padding-left: 20px;
}
.header__navigation > div {
height: calc(100vh - 190px);
overflow-y: auto;
}
body.header-open {
overflow: hidden;
}
}