.main-menu {
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    background-color: var(--secondary-1);
    position: fixed;
    z-index: 110;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    top: calc(55px + var(--ribbon-height-mobile))
}

@media(min-width: 1023.5px) {
    .main-menu {
        overflow: visible
    }
}

.main-menu::-webkit-scrollbar {
    display: none
}

@media(min-width: 767.5px) {
    .main-menu {
        top: calc(56px + var(--ribbon-height-tablet))
    }
}

@media(min-width: 1023.5px) {
    .main-menu {
        top: calc(72px + var(--ribbon-height-desktop))
    }
}

.main-menu .main-menu-content {
    display: flex;
    align-items: center;
    font-size: 12px;
    box-sizing: border-box;
    max-width: 1360px;
    width: 100%;
    font-weight: bold;
    line-height: 18px;
    height: 50px
}

@media(min-width: 1023.5px) {
    .main-menu .main-menu-content {
        font-size: 14px;
        height: 56px
    }
}

.main-menu .main-menu-content a,
.main-menu .main-menu-content div[id^=menu-item-] {
    color: var(--primary-9);
    text-transform: uppercase;
    display: flex;
    white-space: nowrap;
    text-decoration: unset;
    cursor: pointer
}

.main-menu .main-menu-content a:not(:first-child),
.main-menu .main-menu-content div[id^=menu-item-]:not(:first-child) {
    margin-left: 15px
}

@media(min-width: 1023.5px) {
    .main-menu .main-menu-content a:not(:first-child),
    .main-menu .main-menu-content div[id^=menu-item-]:not(:first-child) {
        margin-left: 15px
    }
}

.main-menu .main-menu-content a:last-child,
.main-menu .main-menu-content div[id^=menu-item-]:last-child {
    padding-right: var(--spacing-16);
    margin-right: var(--spacing-16)
}

@media(min-width: 1023.5px) {
    .main-menu .main-menu-content a:last-child,
    .main-menu .main-menu-content div[id^=menu-item-]:last-child {
        padding-right: var(--spacing-24);
        margin-right: var(--spacing-24)
    }
}

.main-menu .main-menu-content a:hover,
.main-menu .main-menu-content a:active,
.main-menu .main-menu-content div[id^=menu-item-]:hover,
.main-menu .main-menu-content div[id^=menu-item-]:active {
    text-decoration: none;
    color: var(--secondary-3)
}

.main-menu .main-menu-content a .img-content,
.main-menu .main-menu-content div[id^=menu-item-] .img-content {
    position: relative;
    z-index: 100;
    height: 24px
}

.main-menu .main-menu-content a .tag,
.main-menu .main-menu-content div[id^=menu-item-] .tag {
    margin-left: 4px
}

.main-menu .main-menu-content a.selected,
.main-menu .main-menu-content div[id^=menu-item-].selected {
    color: var(--secondary-3)
}