:root {
--menu-gap: 20px; /* main-menu */
--main-menu-height: 80px;
--main-menu-padding-y: 0;
--main-menu-padding-x: 0;
--main-menu-bg-color: var(--color-1-alt); /* menu-items */
--menu-item-padding-x: 16px;
--menu-item-height: 38px;
--menu-item-bg: transparent;
--menu-item-bg-hover: #e5ece836;
--menu-item-color: #fff;
--menu-item-color-hover: #fff;
--menu-item-radius: 0; /* upper-menu */
--upper-menu-height: 30px; /* menu-right */
--menu-right-gap: var(--menu-gap); /* Sub-menu ul */
--sub-menu-padding: 0;
--sub-menu-bg-color: var(--color-1-alt);
--sub-menu-radius: 0;
--sub-menu-radius-border-width: 0;
--sub-menu-radius-border-color: #ddd;
--sub-menu-box-shadow: var(--shadow-2); /* sub-menu-items */
--sub-menu-item-color: #fff;
--sub-menu-item-color-hover: #fff;
--sub-menu-item-padding: 8px 16px;
--sub-menu-item-bg: transparent;
--sub-menu-item-bg-hover: #e5ece836;
--sub-menu-item-radius: 0;
--sub-menu-item-font-weight: 400; /* btn-menu (phone call + search) */
--btn-topbar-bg: #BD5B5B;
--btn-topbar-bg-hover: #692727;
--btn-topbar-color: #ffffff;
--btn-topbar-border-color: #692727;
--btn-topbar-border-width: 1px;
--btn-topbar-radius: 20px;
--btn-topbar-transform: normal;
--btn-menu-gap: var(--menu-gap); /* slide-menu after breckpoint */
--slide-menu-bg: var(--color-1);
--slide-menu-width: 380px; /* burger*/
--burger-size: 60px;
--burger-color: white; /* icon-menu */
--icon-menu-color: #444;
--icon-menu-color-hover: #212529;
--icon-menu-size: 20px;
--icon-menu-gap: var(--menu-gap); /* mega-menu */
--megamenu-column: 3;
--megamenu-padding: 20px;
--megamenu-margin: 250px;
--megamenu-column-rule:;
--megamenu-column-gap: 40px; /* upper-menu items text style */
--upper-menu-font-size: 16px;
--upper-menu-font-weight: inherit;
--upper-menu-font-style: normal;
--upper-menu-text-transform: none; /* level0-menu items text style */
--level0-menu-font-size: 16px;
--level0-menu-font-weight: light;
--level0-menu-font-style: normal;
--level0-menu-text-transform: uppercase; /* Sub-title text style */
--sub-title-font-size: 12px;
--sub-title-font-weight: normal;
--sub-title-font-style: italic;
--sub-title-text-transform: none;
--sub-title-color: #ddd; /* Link-image */
--link-image-width: 255px;
--link-image-gap: 0; /* icons */
--icon-size: 16px;
--icon-padding-top: 4px;
--icon-gap: 16px; /* arrows */
--menu-arrow-stroke: 2;
--menu-arrow-submenu-display: block;
}
/* Topbar button (phone) */
@media {
.btn-topbar {
background-color: var(--btn-topbar-bg);
color: var(--btn-topbar-color);
border: var(--btn-topbar-border-width) var(--btn-topbar-border-color) solid;
border-radius: var(--btn-topbar-radius);
}

.btn-topbar:hover {
background-color: var(--btn-1-bg-hover);
color: var(--btn-1-color);
}
}
/* main-menu */
@media {
main {
margin-top: var(--main-menu-height);
}

#main-menu {
background: var(--main-menu-bg-color);
display: flex;
align-items: center;
justify-content: space-between;
height: var(--main-menu-height);
padding: var(--main-menu-padding-y) var(--main-menu-padding-x);
position: fixed;
z-index: 100;
top: 0;
width: 100%;
white-space: nowrap;
}

.menu-left {
height: 100%;
background: white;
display: flex;
padding-left: 1.5rem;
align-items: center;
width: 250px;
}

.menu-right {
padding-right: 1.5rem;
}
}
/* logo */
@media {
#main-menu .logo > img {
height: 75px;
}
@media {
#main-menu.menu-breakpoint .logo > img {
height: 60px;
}

#slide-menu .logo {
display: none;
}
}
/* slide-menu */
@media {
#slide-menu {
height: 100%;
display: flex;
flex-direction: column;
padding: 0 16px;
align-items: flex-start;
}

.menu-breakpoint > #slide-menu {
position: fixed;
z-index: 100;
top: var(--main-menu-height);
left: 100%;
height: calc(100vh - var(--main-menu-height));
background-color: var(--slide-menu-bg);
width: var(--slide-menu-width);
padding: 16px;
transition: all ease 0.2s;
}

.menu-breakpoint > #slide-menu.menu-open {
left: calc(100% - var(--slide-menu-width));
}

#main-menu:not(.menu-breakpoint).menu-align-left #slide-menu {
margin-right: auto;
}

#main-menu:not(.menu-breakpoint).menu-align-left #slide-menu > ul {
justify-content: flex-start;
}

#main-menu:not(.menu-breakpoint).menu-align-right #slide-menu {
margin-left: auto;
}

#main-menu:not(.menu-breakpoint).menu-align-right #slide-menu > ul {
justify-content: flex-end;
}
}
/* upper-menu*/
@media {
#main-menu:not(.menu-breakpoint) #slide-menu > ul.upper-menu > li > a {
font-size: var(--upper-menu-font-size);
font-weight: var(--upper-menu-font-weight);
text-transform: var(--upper-menu-text-transform);
font-style: var(--upper-menu-font-style);
height: 100%;
}

#main-menu:not(.menu-breakpoint) #slide-menu > ul.upper-menu > li {
height: 100%;
}

#main-menu:not(.menu-breakpoint) #slide-menu > ul.upper-menu {
height: var(--upper-menu-height);
}
}
/* down-menu */
@media {
#slide-menu:not(.menu-breakpoint) > ul:not(.upper-menu) > li > a {
font-size: var(--level0-menu-font-size);
font-weight: var(--level0-menu-font-weight);
text-transform: var(--level0-menu-text-transform);
font-style: var(--level0-menu-font-style);
}
}
/* sub-title */
@media {
#slide-menu a .menu-sub-title {
font-size: var(--sub-title-font-size);
font-weight: var(--sub-title-font-weight);
text-transform: var(--sub-title-text-transform);
font-style: var(--sub-title-font-style);
}
}
/* menu right */
@media {
#main-menu .menu-right {
display: flex;
gap: var(--menu-right-gap);
align-items: center;
}

#main-menu.menu-breakpoint .menu-right {
padding-right: calc(var(--burger-size) + var(--menu-right-gap));
}
}
/* icon-menu */
@media {
#icon-menu {
display: flex;
align-items: center;
gap: var(--icon-menu-gap);
}

#icon-menu a {
color: var(--icon-menu-color);
font-size: var(--icon-menu-size);
}

#icon-menu a:hover {
color: var(--icon-menu-color-hover);
}

#icon-menu.menu-collapsed {
padding-bottom: var(--icon-menu-gap);
}
}
/* menu-level-0 */
@media {
.menu-level-0 {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
}
/* .menu-level-0 > li {
        height: 100%;
    } */

.menu-level-0 > li > a {
height: var(--menu-item-height);
display: block;
padding: 0 var(--menu-item-padding-x);
background: var(--menu-item-bg);
display: flex;
align-items: center;
transition: background 0.2s ease;
border-radius: var(--menu-item-radius);
color: var(--menu-item-color) !important;
}

.menu-level-0 > li:hover > a {
background: var(--menu-item-bg-hover);
color: var(--menu-item-color-hover) !important;
}

.menu-breakpoint .menu-level-0 {
flex-direction: column;
align-items: flex-start;
flex: 0 0 auto;
}

.menu-breakpoint .menu-level-0 > li {
width: 100%;
height: auto;
}

.menu-breakpoint .menu-level-0 a {
padding: 16px;
height: max-content;
}
}
/* menu-level-1+ */
@media {
.sub-menu {
position: relative;
}

.sub-menu ul {
display: none;
flex-direction: column;
position: absolute;
padding: var(--sub-menu-padding);
background-color: var(--sub-menu-bg-color);
border-radius: var(--sub-menu-radius);
width: max-content;
border: var(--sub-menu-radius-border-width) solid var(--sub-menu-radius-border-color);
}

#main-menu:not(.megamenu).sub-menu ul {
box-shadow: var(--sub-menu-box-shadow);
}

#main-menu:not(.menu-breakpoint).megamenu #slide-menu > ul > li > ul {
box-shadow: var(--sub-menu-box-shadow);
}

#main-menu.menu-breakpoint .sub-menu ul {
box-shadow: none;
}

#slide-menu li > a + ul:hover,
#slide-menu li:hover > a + ul {
display: flex;
z-index: 1;
}

.sub-menu li a {
display: block;
padding: var(--sub-menu-item-padding);
background: var(--sub-menu-item-bg);
transition: background 0.2s ease;
border-radius: var(--sub-menu-item-radius);
color: var(--sub-menu-item-color) !important;
font-weight: var(--sub-menu-item-font-weight);
}

.sub-menu li a:hover {
background: var(--sub-menu-item-bg-hover);
color: var(--sub-menu-item-color-hover) !important;
}

.menu-level-2,
.menu-level-3,
.menu-level-4 {
top: 0;
left: 100%;
}

#slide-menu .return {
display: none;
}

#slide-menu.menu-breakpoint:not(.menu-open) ul {
box-shadow: none;
}

.menu-breakpoint .sub-menu ul {
position: fixed;
display: flex;
z-index: 100;
top: var(--main-menu-height);
left: 100%;
height: calc(100vh - var(--main-menu-height));
background-color: var(--slide-menu-bg);
width: var(--slide-menu-width);
padding: 16px;
transition: all ease 0.2s;
border-radius: 0;
border: none;
}

.menu-breakpoint .sub-menu.active > ul {
left: calc(100% - var(--slide-menu-width));
}

.menu-breakpoint #slide-menu .return {
display: block;
margin-bottom: 15px;
}

.menu-breakpoint .return > a {
font-weight: 500;
display: flex;
align-items: center;
gap: 16px;
}

.menu-breakpoint .sub-menu > a {
display: flex;
justify-content: space-between;
align-items: center;
}
}
/* svg menu-arrow */
@media {
.menu-breakpoint #slide-menu .return svg {
stroke: var(--menu-item-color);
stroke-width: 2;
transform: rotate(180deg);
}

svg.menu-arrow {
display: var(--menu-arrow-display);
stroke: var(--menu-item-color);
stroke-width: 2 var(--menu-arrow-stroke);
display: var(--menu-arrow-submenu-display);
align-self: center;
padding: var(menu-arrow-padding);
}

#main-menu.megamenu:not(.menu-breakpoint) svg.menu-arrow,
#main-menu:not(.menu-breakpoint) > #slide-menu > ul > li > a svg.menu-arrow {
display: none;
}

.menu-breakpoint svg.menu-arrow {
display: block;
}
}
/* burger */
@media {
#burger {
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
height: var(--burger-size);
width: var(--burger-size);
transition: transform 400ms;
user-select: none;
position: absolute;
right: var(--main-menu-padding-x);
}

.menu-breakpoint #burger {
display: flex;
}

#burger.active {
transform: rotate(45deg);
}

#burger .line {
fill: none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke: var(--burger-color);
stroke-width: 3;
stroke-linecap: round;
}

#burger .top {
stroke-dasharray: 40 121;
}

#burger .bottom {
stroke-dasharray: 40 121;
}

#burger.active .top {
stroke-dashoffset: -68px;
}

#burger.active .bottom {
stroke-dashoffset: -68px;
}
}
/* mask */
@media {
#mask {
display: none;
top: var(--main-menu-height);
left: 0;
position: fixed;
width: 100vw;
height: calc(100vh - var(--main-menu-height));
background-color: rgba(0, 0, 0, 0);
transition: all ease 0.2s;
}

#mask.active {
display: block;
background-color: rgba(0, 0, 0, 0.8);
}
}
/* phone */
@media (max-width:600px) {
:root {
--slide-menu-width: 100%;
}
}
/* btn-menu */
@media {
#btn-menu {
display: flex;
gap: var(--btn-menu-gap);
}

#btn-menu.menu-collapsed {
flex-wrap: wrap;
padding-bottom: var(--btn-menu-gap);
z-index: 0;
}
}
/* search */
@media {
#search [type="search"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none !important;
min-width: 64px;
}

#search {
flex-wrap: nowrap;
min-width: 175px;
}
}
/* image */
@media {
#slide-menu ul ul li.link-image a,
#slide-menu ul ul li.link-image img {
width: 100%;
height: 100%; /* object-fit: cover; */
margin-left: 2rem;
}

#slide-menu ul ul li.link-image {
width: var(--link-image-width);
margin: calc(var(--sub-menu-padding)* -1);
padding-bottom: var(--link-image-gap);
border-radius: var(--sub-menu-item-radius) var(--sub-menu-item-radius) 0 0; /* overflow      : hidden; */
position: absolute;
top: 0;
right: 0;
height: 100%;
}
/* img-left */

#main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul.link-image.img-left {
padding-left: calc(var(--link-image-width) + var(--link-image-gap));
}

#main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul li.link-image.img-left {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
border-radius: var(--sub-menu-item-radius) 0 0 var(--sub-menu-item-radius);
}
/* img-right */

#main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul.link-image.img-right {
padding-right: calc(var(--link-image-width) + var(--link-image-gap));
}

#main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul li.link-image.img-right {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
border-radius: 0 var(--sub-menu-item-radius) var(--sub-menu-item-radius) 0;
}
/* img-bottom */

#slide-menu:not(.megamenu) ul ul li.link-image.img-bottom {
order: 1;
padding-bottom: 0;
margin-top: var(--link-image-gap);
border-radius: 0 0 var(--sub-menu-item-radius) var(--sub-menu-item-radius);
}

#main-menu.menu-breakpoint #slide-menu.menu-open ul ul li.link-image {
border-radius: var(--sub-menu-item-radius);
padding: 0;
width: 100%;
margin: var(--link-image-gap) 0;
}
/* #main-menu.megamenu:not(.menu-breakpoint) #slide-menu > ul ul li.link-image {
        width        : 100%;
        border-radius: var(--sub-menu-item-radius);
        padding      : 0;
        margin       : unset;
    } */
}
/* icons */
@media {
#slide-menu a {
display: flex;
gap: var(--icon-gap);
}

#slide-menu a i {
font-size: var(--icon-size);
padding-top: var(--icon-padding-top);
}
}
/* logo-center menu */
@media {
#main-menu.logo-center:not(.menu-breakpoint) .menu-left .logo {
display: none;
}

#main-menu.logo-center:not(.menu-breakpoint) #slide-menu {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 100%;
grid-template-areas: "menu-1 image menu-2";
}

#main-menu.logo-center:not(.menu-breakpoint) #slide-menu.double-menu {
grid-template-rows: var(--upper-menu-height) var(--menu-item-height);
grid-template-areas: "menu-1 image menu-2" "menu-3 image menu-4";
}

#main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :first-child {
grid-area: image;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

#main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(2),
#main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(4) {
justify-content: flex-end;
}

#main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(3),
#main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(5) {
justify-content: flex-start;
}
}
/* megamenu */
@media {
.megamenu:not(.menu-breakpoint) .menu-level-1 > li > a > .menu-title {
font-weight: 500;
}

.megamenu:not(.menu-breakpoint) #slide-menu > ul > li > ul {
padding: var(--megamenu-padding);
margin: 0; /* width  : calc(100% - var(--megamenu-margin) - var(--megamenu-margin)); */
left: 0;
width: max-content;
top: 80px;
}

.megamenu:not(.menu-breakpoint) .sub-menu ul {
width: 100%;
}

.megamenu:not(.menu-breakpoint) .sub-menu ul li.breack-after {
break-after: column;
}

.megamenu:not(.menu-breakpoint) .sub-menu ul li.breack-before {
break-before: column;
}

.megamenu:not(.menu-breakpoint) #slide-menu .sub-menu:hover > ul {
display: block;
column-count: var(--megamenu-column);
column-rule: var(--megamenu-column-rule);
column-gap: var(--megamenu-column-gap);
column-fill: balance;
}

.megamenu:not(.menu-breakpoint) #slide-menu .sub-menu:hover > ul ul {
position: relative;
display: flex;
left: 0;
padding-left: 0;
padding-right: 0;
}
}