/* =============================================================================
   Site Navigation
   ========================================================================== */

.Menu-Navigation {
    display: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: var(--base-5px) solid var(--color-white-10);
    text-align: center;
    margin: 0;
    margin-bottom: var(--base-font-size);
    text-align: left;
    width: 100%;
    padding-left: var(--base-font-size);
    padding-right: var(--base-font-size);
}

    .Menu-Navigation * {
        -moz-transition: all ease-in 200ms;
        -webkit-transition: all ease-in 200ms;
        -o-transition: all ease-in 200ms;
        transition: all ease-in 200ms;
        text-decoration: none !important;
    }

    .Menu-Navigation li {
        position: relative;
        list-style-type: none;
    }

        .Menu-Navigation li.level-0 {
            border-bottom: var(--base-2px) solid var(--color-white-90);
            background-color: var(--color-white-90);
            text-align: center;
        }

            .Menu-Navigation li.level-0 > a {
                color: var(--fourth-color);
            }

        .Menu-Navigation li:not(.level-0) > a {
            color: var(--color-white-10);
            font-size: calc(var(--base-font-size) * 1.25);
            text-align: center;
        }

        .Menu-Navigation li.level-0:last-child {
            border-right: var(--base-border-tertiary);
        }

        .Menu-Navigation li.level-0:last-child {
            border-bottom: 0;
        }

        .Menu-Navigation li a,
        .Menu-Navigation li span {
            display: block;
            padding-top: var(--base-5px);
            padding-bottom: var(--base-5px);
            outline: 0;
        }

        .Menu-Navigation li span {
            cursor: default;
        }

        .Menu-Navigation li.level-0 > a,
        .Menu-Navigation li.level-0 > span {
            padding-top: var(--base-8px);
            padding-bottom: var(--base-8px);
            font-size: var(--base-font-size);
            text-transform: capitalize;
        }

        .Menu-Navigation li ul {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: none;
            z-index: 5;
            background-color: transparent;
        }

            .Menu-Navigation li ul li {
                white-space: nowrap;
                width: 100%;
            }

/* ACCOUNT MANAGEMET (MY ACCOUNT)*/
#SignInUserInfo > p,
#SignInUserInfoSignOut > .user-sign-out {
    color: var(--color-black-30);
}

/* Desktop Layout: 769px and up.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.Menu-Navigation {
    display: inline-block;
    border: 0;
    text-align: left;
    margin: 0 auto !important;
}

    .Menu-Navigation li {
        display: inline-block;
        width: auto;
    }

        .Menu-Navigation li.level-0 {
            background-color: var(--transparent);
            border-bottom: 0;
        }

        .Menu-Navigation li a,
        .Menu-Navigation li span {
            padding: var(--base-5px) var(--base-10px);
        }

            .Menu-Navigation li a:hover,
            .Menu-Navigation li span:hover,
            .Menu-Navigation li.expanded > a,
            .Menu-Navigation li.expanded > span {
                background-color: var(--primary-color);
                color: var(--color-white-10) !important;
            }

        .Menu-Navigation li.level-0 > a,
        .Menu-Navigation li.level-0 > span {
            padding: var(--base-5px) var(--base-10px);
        }

            .Menu-Navigation li.level-0 > a:hover,
            .Menu-Navigation li.level-0 > span:hover,
            .Menu-Navigation li.level-0.expanded > a,
            .Menu-Navigation li.level-0.expanded > span {
                background-color: var(--secondary-color);
                color: var(--color-white-10) !important;
            }

        .Menu-Navigation li:hover > ul {
            display: block;
        }

        .Menu-Navigation li.level-0 > ul {
            min-width: 100%;
            left: 0;
            top: 100%;
        }

        .Menu-Navigation li ul {
            background-color: var(--secondary-color);
            -webkit-box-shadow: var(--base-1px) var(--base-3px) var(--base-5px) rgba(0,0,0,0.25);
            box-shadow: var(--base-1px) var(--base-3px) var(--base-5px) rgba(0,0,0,0.25);
            margin: 0;
            position: absolute;
            left: 100%;
            top: 0;
        }

            .Menu-Navigation li ul li {
                display: block;
                text-align: left;
            }

        /* handle last menu item */
        .Menu-Navigation li.level-0:last-child ul {
            left: inherit;
            right: 0;
        }

            .Menu-Navigation li.level-0:last-child ul li ul {
                left: inherit;
                right: 100%;
            }
}