/* Keep the logo and navigation inside one predictable header layout. */
#sp-header > .row {
    width: 100%;
    min-height: 100px;
    margin-right: 0;
    margin-left: 0;
    padding-right: 25px;
    padding-left: 25px;
    flex-wrap: nowrap;
    align-items: center;
}

#sp-header > .row > #sp-logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    height: 100px;
    margin-left: 0;
    padding: 0;
}

#sp-header > .row > #sp-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    width: auto !important;
    max-width: none;
    min-width: 0;
    height: 100px;
    padding: 0;
}

#sp-header #sp-menu .sp-column,
#sp-header #sp-menu .sp-megamenu-wrapper {
    width: 100%;
}

#sp-header #sp-menu .sp-megamenu-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#sp-header .sp-megamenu-parent {
    float: none;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    white-space: nowrap;
}

@media (min-width: 1100px) {
    #sp-header .sp-megamenu-parent.d-lg-block {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}

@media (max-width: 1099px) {
    #sp-header .sp-megamenu-parent.d-lg-block {
        display: none !important;
    }

    #sp-header #offcanvas-toggler {
        display: block !important;
        position: static;
        float: none;
        margin-right: 0;
        margin-left: auto;
    }
}