:root {
    --menu-gap                  : 20px;
    /* main-menu */
    --main-menu-height          : 120px;
    --main-menu-padding-y       : 0;
    --main-menu-padding-x       : 12px;
    --main-menu-bg-color        : #5275b4;
    /* menu-items */
    --menu-item-padding-x       : 16px;
    --menu-item-height          : 100%;
    --menu-item-bg              : transparent;
    --menu-item-bg-hover        : rgba(0, 0, 0, 0.2);
    --submenu-item-bg-hover     : rgba(0, 0, 0, 0.1);
    --submenu-item-color-hover  : black;
    --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          : 8px;
    --sub-menu-bg-color         : #fff;
    --sub-menu-radius           : 0;
    --sub-menu-border-width     : 0;
    --sub-menu-border-color     : #ddd;
    --sub-menu-box-shadow       : var(--shadow-2);
    /* sub-menu-items */
    --sub-menu-item-color       : #212529;
    --sub-menu-item-color-hover : #212529;
    --sub-menu-item-padding     : 8px 16px;
    --sub-menu-item-bg          : transparent;
    --sub-menu-item-bg-hover    : var(--bg-light);
    --sub-menu-item-radius      : 0;
    /* 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              : #fff;
    /* 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           : 2;
    --megamenu-padding          : 0;
    --megamenu-margin           : 100px;
    --megamenu-column-rule      : none;
    --megamenu-column-gap       : 48px;
    /* 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     : 15px;
    --level0-menu-font-weight   : normal;
    --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          : 300px;
    --link-image-gap            : 16px;
    /* 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;
        flex-direction : column-reverse;
        align-items    : center;
        justify-content: space-between;
        height         : var(--main-menu-height);
        padding        : 0 0 0 120px;
        position       : fixed;
        z-index        : 100;
        top            : 0;
        width          : 100%;
        white-space    : nowrap;
        filter:var(--drop-shadow-2);
    }
    #main-menu.menu-breakpoint {
        --main-menu-height: 60px;
        height            : 60px;
        padding           : 0;
        filter:none;
        box-shadow        : var(--shadow-2);
    }
    #main-menu.menu-breakpoint + main {
        margin-top: 60px;
    }
}
/* logo */
@media {
    #main-menu .logo > img {
        height    : var(--main-menu-height);
        background: #fff;
        position  : absolute;
        top       : 0;
        left      : 0;
        padding   : 14px;
    }
    #main-menu.menu-breakpoint .logo img {
        padding: 3px;
    }
    #slide-menu .logo {
        display: none;
    }
}
/* slide-menu */
@media {
    #slide-menu {
        height        : 60px;
        width         : 100%;
        display       : flex;
        flex-direction: column;
        padding       : 0 16px;
        background    : #0B5AA0;
    }
    .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 {
        justify-content: space-between;
        align-items    : center;
        display        : flex;
        gap            : var(--menu-right-gap);
        align-items    : center;
        width          : 100%;
        height         : 60px;
        padding        : 0 48px 0 16px;
    }
    #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);
        order      : 3;
    }
    #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 {
        height: var(--menu-item-height);
    }
    .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: 10px 5px;
        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-border-width) solid var(--sub-menu-border-color);
    }
    .sub-menu ul.link-image {
        padding-left: var(--link-image-width);
        left        : -120%;
    }
    @media (max-width:1200px) {
        .sub-menu ul.link-image {
            padding: 0;
        }
        .sub-menu ul.link-image {
            padding-left: 0;
            left        : auto;
        }
    }
    #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 {
        z-index: 1;
        display: flex;
    }
    .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;
        text-transform: uppercase;
    }
    .menu-breakpoint .sub-menu li a {
        color: #fff !important;
    }
    .sub-menu li.active a {
        color: var(--color-2) !important;
    }
    .sub-menu li:not(.btn-item) a {
        margin-left: var(--sub-menu-padding);
    }
    .sub-menu li:not(.active) a:hover {
        background: var(--sub-menu-item-bg-hover);
        color     : var(--submenu-item-color-hover) !important;
    }
    .menu-collapsed .sub-menu li:not(.active) a:hover {
        color: #fff!important;
    }
    .menu-collapsed .sub-menu li:not(.active) a:hover {
        color: #fff !important;
    }
    .sub-menu li.btn-item {
        position: absolute;
        top     : 100%;
        left    : 0;
        width   : 100%;
    }
    .sub-menu.highlight-2 li.btn-item {
        width: 50%;
    }
    .sub-menu.highlight-2 li.btn-item + li.btn-item {
        left: 50%;
    }
    @media (max-width:1200px) {
        .sub-menu li.btn-item,
        .sub-menu.highlight-2 li.btn-item,
        .sub-menu.highlight-2 li.btn-item + li.btn-item {
            position: relative;
            top     : 100%;
            left    : unset;
            width   : 100%;
        }
    }
    .menu-breakpoint .sub-menu li.btn-item,
    .menu-breakpoint .sub-menu.highlight-2 li.btn-item,
    .menu-breakpoint .sub-menu.highlight-2 li.btn-item + li.btn-item {
        position  : relative;
        top       : unset;
        left      : unset;
        margin-top: 16px;
        width     : auto;
    }
    .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;
    }
    .menu-breakpoint .return > a {
        font-weight: bolder;
        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);
        order  : 2;
    }
    #btn-menu.menu-collapsed {
        flex-wrap     : wrap;
        padding-bottom: var(--btn-menu-gap);
        z-index       : 0;
    }
}
/* search */
@media {
    #search [type="search"] {
        border-radius: 0;
        border-right : none !important;
        min-width    : 64px;
    }
    #search {
        flex-wrap: nowrap;
        min-width: 175px;
    }
    #search [type="submit"] {
        background   : #fff;
        border-radius: 0;
        height       : 38px;
        border       : var(--form-border-width) solid var(--form-border-color) !important;
        border-left  : none !important;
    }
}
/* 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;
    }
    #slide-menu ul ul li.link-image {
        width         : var(--link-image-width);
        margin        : 0;
        padding-bottom: 0;
        border-radius : 0;
        overflow      : hidden;
        position      : absolute;
        top           : 0;
        left          : 0;
        height        : 100%;
    }
    @media (max-width:1200px) {
        #slide-menu ul ul li.link-image {
            display: none;
        }
    }
    /* 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);
        white-space: normal;
    }
    #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: bold;
    }
    .megamenu:not(.menu-breakpoint) #slide-menu > ul > li > ul {
        padding: var(--megamenu-padding);
        margin : 0 var(--megamenu-margin);
        width  : calc(100% - var(--megamenu-margin) - var(--megamenu-margin));
        left   : 0;
    }
    .megamenu:not(.menu-breakpoint) .sub-menu {
        position: unset;
        /* page-break-inside: avoid; */
        /* break-inside: avoid-column; */
    }
    .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;
    }
}
.menu-dots {
    position: absolute;
    right   : 16px;
    bottom  : 24px;
}
@media (max-width:1460px) {
    .menu-dots {
        display: none;
    }
}