.menuBg {
    max-width: 100% !important;
    box-shadow: 0 0 50px #00000080;
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    transition: all 0.5s cubic-bezier(0.82, 0.19, 0.16, 0.8) !important;
}

.menuBg * {
    font-family: var(--fontNormal) !important;
}

.menuBg > *:not(.menuCloseButton) {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    flex-shrink: 0;
    transition: all 0.5s ease !important;
}

.menuLogoContainer > div {
    height: 100% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 120px !important;
    max-width: 90%;
}

body .menuOpenButton {
    background-color: #000000 !important;
    box-shadow: 0 0 0 2px #ffffff40;
    transition: all 0.3s ease;
}
body.hasHover .menuOpenButton:hover {
    box-shadow: 0 0 0 4px #ffffff80;
}
/* Menu Middle - START */
:root {
    --menuItemPadding: 1rem 2rem;
    --menuItemBgNormal: transparent;
    --menuItemTextNormal: #ffffffa0;
    --menuItemBgHover: var(--colorPrimary);
    --menuItemTextHover: var(--colorWhite);
    --menuItemTransition: all 0.3s ease;
    --menuCategoryIcon: url('data:image/svg+xml,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.6 5.65375L0 1.05375L1.05375 0L6.7075 5.65375L1.05375 11.3075L0 10.2538L4.6 5.65375Z" fill="white"/></svg>');
}

.menuMiddle {
    flex: 1 1 auto;
    min-height: 0;
    position: relative !important;
    width: 100% !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to bottom, #00000040 0%, transparent 50px, transparent calc(100% - 50px), #00000040 100%);
    height: auto !important;
}

.menuMiddle > * {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
}

.menuCategories {
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.82, 0.19, 0.16, 0.8) !important;
}
.menuBg.menuShow2Level .menuCategories {
    margin-left: -100%;
}

/* Menu Items */
.menuCategories > div {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    width: 100% !important;
}
.menuBackButton,
.menuBackButton > div,
.menuItem,
.menuItem > div {
    font-size: 1rem !important;
    font-weight: 300 !important;
    text-align: left !important;
}
.menuItem > div {
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    white-space: normal !important;
}
.menuBackButton {
    padding: var(--menuItemPadding) !important;
    overflow: hidden !important;
}
.menuItem {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    background-color: var(--menuItemBgNormal) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    padding: var(--menuItemPadding) !important;
}
.menuItem.title > div {
    cursor: default !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #fff !important;
}
div:has(> .menuItem.title):not(:first-child) {
    margin-top: 1rem;
    /* padding-top: 2rem !important; */
    border-top: solid 1px #ffffff20 !important;
}

.menuCategoryName:not(.title) {
    background-image: var(--menuCategoryIcon);
    background-repeat: no-repeat;
    background-position: calc(100% - 30px) center;
}

body.hasHover .menuItem:hover:not(.title) {
    background-color: var(--menuItemBgHover) !important;
    color: var(--menuItemTextHover) !important;
    transition: all 0s !important;
    transition: background-position 0.3s ease !important;
    background-position: calc(100% - 20px) center;
}

/* 2 Level - START */
.menu2LevelContainer {
    margin-left: 100%;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto !important;
    transition: all 0.3s cubic-bezier(0.82, 0.19, 0.16, 0.8) !important;
}

.menu2LevelContainer > * {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    position: relative !important;
}
.menuNodeCloner {
    pointer-events: all !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
}
.menuNodeCloner > * {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}
.menuBg.menuShow2Level .menu2LevelContainer {
    margin-left: 0;
}
/* 2 Level - FINISH  */

/* Menu Middle - FINISH */

/* Closed Menu - START */
.menuClosed {
    /* left: -370px !important; */
    left: -400px !important;
}
.menuClosed .menuLogoContainer {
    margin-top: -100px;
    opacity: 0 !important;
}

.menuClosed .menuMiddle * {
    pointer-events: none !important;
}
.menuClosed .menuMiddle {
    opacity: 0 !important;
}

.menuClosed .menuBottom {
    margin-bottom: -100px;
    opacity: 0 !important;
}

/* Closed Menu - FINISH */

.menuBottom {
    box-sizing: border-box !important;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.menuBottom > div {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Mobile */
@media (max-height: 575.98px), (max-width: 575.98px) {
    .menuBottom {
        height: 70px !important;
    }
    .menuLogoContainer {
        display: none !important;
    }
    .menuCounter {
        display: none !important;
    }
}

@media (max-width: 440px) {
    .menuBg {
        /* width: 100% !important; */
    }
    .menuBg.menuClosed {
        /* left: calc(-100% + 25px) !important; */
        left: calc(-100% + 0px) !important;
    }
    .menuBg:not(.menuClosed) .menuOpenButton {
        right: auto !important;
        /* left: calc(100% - 35px) !important; */
        left: calc(100% - 0px) !important;
    }
}

.menuMiddle .ggskin_subelement.ggskin_scrollarea {
    width: calc(100% + 1px) !important;
}

/* Menu items */

.nodeImage {
    border-radius: var(--borderRadius);
    overflow: hidden !important;
}

.menuIconVisited {
    border-radius: var(--borderRadius);
}

.nodeTitle,
.menuCategoryName {
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.nodeTitle > div,
.menuCategoryName > div {
    font-size: 1rem !important;
}

.nodeTitleHovered,
.menuCategoryNameHovered {
    transition: all 0s ease !important;
}

.nodeTitleActive {
    background-image: linear-gradient(to right, var(--colorSecondary) 5px, transparent 5px) !important;
}

.nodeTitleActive > .ggskin_svg {
    filter: invert(100%);
}

.nodeImage {
    overflow: hidden;
    filter: grayscale(1);
}

.nodeImage > img {
    transition: all 0.3s ease;
}

.nodeImageHovered {
    filter: grayscale(0);
    box-shadow: 0 0 0 1px #ffffff;
}

.nodeImageHovered > img {
    transform: scale(1.1) !important;
}

.nodeImageActive {
    filter: grayscale(0);
    box-shadow: 0 0 0 3px #ffffff80;
}

.nodeTitle:focus-visible,
.menuBackButton:focus-visible,
.menuCategoryName:not(.title):focus-visible {
    background-color: var(--menuItemBgHover) !important;
    color: var(--menuItemTextHover) !important;
}

/* Share */
.shareContainer {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    height: auto !important;
    bottom: 55px !important;
    left: 0 !important;
    top: auto !important;
    z-index: 1 !important;
    gap: 1px;
}

.shareContainer > div {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 0px !important;
}

.socialFb {
    background-color: #0165e1 !important;
}

.socialTwitter {
    background-color: #000000 !important;
}

.socialYoutube {
    background-color: #ff0000 !important;
}

.socialInsta {
    background-color: #e1306c !important;
}

.socialLinkedin {
    background-color: #0a66c2 !important;
}

body.hasHover .shareContainer > div:hover {
    z-index: 1;
}

/* Share */

/* Counter */
.menuCounter .ggskin_text > div {
    font-size: 0.8rem !important;
}

/* Counter */