/* Hide mobile hamburger */
#menu-icon, #close-menu-button, #mobile-menu {
    display:none; /*hide menu icon initially*/
}

/* Primary navigation menu styles */


#menu-primary {
    list-style-type: none;
    padding:0;
    margin-top: 28px;
    text-align: right;
}

#menu-primary li {
    display: inline-block;
    margin: 12px 0 12px;
}

#menu-primary li a, #menu-primary li a:visited {
    color: #535353;
    padding:9px 18px;
    text-decoration:none;
}

/* underline current page title*/
#menu-primary li.current_page_item a {
    border-bottom: solid 4px #009F9E;
    color: #009F9E;
    padding: 9px 0 0 0;
    margin: 0 20px;
}

/* Submenu */
#menu-primary ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
    text-align: left;
}

#menu-primary ul li {
    margin: 0;
}

#menu-primary li:hover {
    position:relative;
}

#menu-primary li a:hover, #menu-primary li a:active {
    color: #009F9E;
}

#menu-primary li ul {
    opacity: 0;
}

#menu-primary li:hover ul {
    left:0px;
    top: 32px;
    color: #009F9E;
    padding:0px;
    opacity: 1;
    z-index: 200;
}


#menu-primary li:hover ul li a {
    background-color:#006766;
    color: #FFF;
    display:block;
    font-weight: 100;
    padding:7px 5px;
    text-indent:15px;
    width:168px;
}

#menu-primary li:hover ul li a:hover {
    background:#009F9E;
}

#menu-primary .menu-item-has-children > a {
    -webkit-transition: none;
    -ms-transition: none;
    transition: none;
}

#menu-primary .menu-item-has-children:hover > a {
    background-color: #006766;
    border-radius: 6px 6px 0 0;
    color: #FFF;
}

.menu-item-has-children ul {
    border-radius: 0 6px 6px 6px;
    overflow: hidden;
}

/* undo current page styles for submenus */
#menu-primary .menu-item-has-children .current_page_item a {
    background-color: #009F9E;
    border-bottom: none;
    color: #fff;
    padding: 7px 5px;
    margin: 0;
}


#menu-primary .menu-item-has-children > a /* menu item with DropDown Arrow */
{
    background-image: url('../images/dropdown_sprite.png');
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: right 15px top 19px;
    padding: 9px 33px 9px 18px;
}

#menu-primary .menu-item-has-children:hover > a /* DropDown Arrow */
{
    background-position: right 15px top -24px;
}



/* Mobile menu */
#mobile-menu-container {
    display: none;
    height: 100%;
    background-color: #006766;
    position: fixed;
    overflow: hidden;
    width: 240px;
    z-index: 1500;
    right: 0px;
    top:0;
}

#mobile-menu {
    color: #FFF;
    list-style-type: none;
    overflow-y: scroll;
    margin: 82px 0 0;
    height: 100%;
    position: fixed;
    right: 0;
    top:0;
    text-align: right;
    width: 240px;
    -ms-overflow-style: none;
}

#mobile-menu::-webkit-scrollbar {
    width: 0 !important;
}

#mobile-menu li {
    display: list-item;
    font-weight: 100;
    padding: 0;
    cursor: pointer;
    text-transform: uppercase;
    width: 100%;
}

#mobile-menu a, #mobile-menu a:visited {
    color: #FFF;
    display: block;
    padding: 10px 25px;
    width: 100%;
}

#mobile-menu a, #mobile-menu a:visited {

}

#mobile-menu a:hover, #mobile-menu a:active {
    text-decoration: none;
}


#mobile-menu li a:hover {
    color: #FFF;
    background-color: #009F9E;
    border: none;
}

#mobile-menu .no-url {
    display: none;
}



.grey-background {
    background-color: #DDD;
}

@media screen and (max-width: 992px) {

    #menu-primary li:hover ul {
        top: 28px;
    }

}


@media screen and (max-width: 768px) {

    #menu-primary {
        display: none;
    }

    #header-logo {
        float: left;
    }

    #menu-icon {
        display: block; /*or inline-block*/
        /*make the icon align to the right*/

        float: right;
        height: 70px;
        padding: 8px;
        width: 70px;
        margin-right: -22px;
    }

    .nav-menu-icon {
        height: 40px;
        margin: 11px auto 0;
    }


    #close-menu-button {
        height: 60px;
        margin: 15px;
        padding: 15px 15px 15px 0;
        position: fixed;
        right: 0;
        top: 0;
        width: auto;
        z-index: 1100;
    }

    #page-dark-overlay {
        background-color: rgba(33, 33, 33, 0.5);
        display: none;
        height: 1000px;
        left: 0;
        position: fixed;
        top: 0;
        width: 1000px;
        z-index: 1000;
    }

}