/* Only the site's existing custom header menu is affected. */
.mobile-nav .menu-items > li.menu-item-has-children {
    position: relative;
}

.mobile-nav .menu-items > li.menu-item-has-children > .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 8px;
}

@media (min-width: 769px) {
    .mobile-nav,
    .mobile-nav .menu-items {
        overflow: visible;
    }

    .mobile-nav .menu-items > li.menu-item-has-children > .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10000;
        min-width: 210px;
      /*  background: #fff;*/
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .20);
    }

    .mobile-nav .menu-items > li > .sub-menu > li + li {
        margin-top: 4px;
    }

    .mobile-nav .menu-items > li > .sub-menu a {
        white-space: nowrap;
    }

}

@media (hover: hover) and (min-width: 769px) {
    .mobile-nav .menu-items > li.menu-item-has-children:hover > .sub-menu {
        display: block;
    }
}

@media (min-width: 769px) {
    .mobile-nav .menu-items > li.menu-item-has-children:focus-within > .sub-menu {
        display: block;
    }
}

@media (max-width: 768px) {
    .mobile-nav .menu-items > li.menu-item-has-children > .sub-menu {
        display: block;
        position: static;
        width: auto;
        min-width: 0;
        padding: 0 0 0 18px;
        background: #222;
    }

    .mobile-nav .menu-items > li > .sub-menu a {
        padding-left: 20px;
        font-size: .85em;
    }
}