/*--------------------------------------------------------------
Base CSS for the menu
--------------------------------------------------------------*/
.main-navigation {
    display: block;
    float: left;
    width: 100%;
    z-index: 99999;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
    width: 100%;
    float:left;
    background-color: #f2f2f2;
    border-bottom: 3px solid #ccc;
    z-index: 99999;
}

.main-navigation li {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    background: #f2f2f2;
    z-index: 99999;
    font-weight:500;
}

.main-navigation a {
    display: block;
    text-decoration: none;
    padding: 15px 13px;
    color: #231f20;
    font-size: 1.4rem;
    font-weight: 500;
}

.main-navigation ul ul {
    border-top: 1px solid #cecece;
    border-left: 1px solid #cecece;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    display: none;
    z-index: 99999;
}

.main-navigation ul ul ul {
    display: none;
    top: 0;
}

.main-navigation ul ul li {
    background: #eaeaea;
}

/** Hover styles **/
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul a:hover,
.main-navigation ul a.focus,
.main-navigation ul li.menu-item-has-children a:hover{
    background-color: #e1e1e1;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
    background-color: #efefef;
}

ul.sub-menu {
    width: 100%;
    border: none!important;
}

/** Toggle **/
.main-navigation ul ul li.menu-item-has-children {
    background: #eaeaea url('chevron_down_black.png') no-repeat right 20px top 15px;
    color: #fff;
}

.main-navigation ul li.menu-item-has-children,
.main-navigation ul li.menu-item-toggled{
    background: #f2f2f2 url('chevron_down_black.png') no-repeat right 20px top 15px;
    color: #fff;
}

/** This is affecting how the li gets highlighted on and off on mobile vs pc **/
.main-navigation ul li.menu-item-has-children a:hover,
.main-navigation ul li.menu-item-has-children a.focus {
    background-color: transparent;
    color: #fca30c;
}

.main-navigation ul li.menu-item-toggled a:hover,
.main-navigation ul li.menu-item-toggled a.focus{
    background: #fff url('chevron_down_black.png') no-repeat right 20px top 15px;
    color: #fca30c;
}

/** Search **/
.main-navigation li.search a{
    background: url('../../images/search.png') no-repeat center center;
    color: #F2F2F2;
}

.main-navigation li.search a:hover{
    opacity: 0.5;
}

/*--------------------------------------------------------------
Small menu
--------------------------------------------------------------*/
.menu-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 10px;
    padding:0.5em 1em;
    font-weight: 700;
    font-size: 1.2rem;
    background: #fca30c;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius:  0 0 4px 4px;
    color: #ffffff;
    text-decoration: none;
    border:none;
}

.menu-toggle:hover {
    background: #ffea00;
    color: #e58c00;
}

/*--------------------------------------------------------------
Overrides for desktop menu
--------------------------------------------------------------*/

@media screen and (min-width: 992px) {
    .main-navigation {
        clear: both;
        display: block;
        float: left;
        width: 100%;
        z-index: 99999;
        background: #f2f2f2;
        border:1px solid #ffffff;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        margin-bottom: 1.5em;
    }

    .menu-toggle {
        display: none;
    }
    .main-navigation ul {
        display: block;
        border: 0;
    }

    .main-navigation ul li:hover > ul,
    .main-navigation ul li.focus > ul {
        display: block;
    }

    .main-navigation li {
        width: auto;
        position: relative;
        white-space: nowrap;
        border:none;
        background: transparent;
        margin-right:5px;
    }

    ul.sub-menu {
        width: auto;
        position: absolute;
        padding-left: 0;
    }

    ul.sub-menu a {
        margin-left:0; margin-right:0;
    }

    .sub-menu .menu-item {
        float: none;
    }

    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_ancestor > a {
        background-color: #efefef;
        border-radius: 4px;
    }

    /** Toggle **/
    .main-navigation ul li.menu-item-has-children,
    .main-navigation ul li.menu-item-toggled{
        background: transparent;
    }

    /** This is affecting how the li gets highlighted on and off on mobile vs pc **/
    .main-navigation ul li.menu-item-has-children a:hover,
    .main-navigation ul li.menu-item-has-children a.focus {
        background-color: transparent;
    }

    .main-navigation ul li.menu-item-toggled a:hover,
    .main-navigation ul li.menu-item-toggled a.focus{
        background: transparent;
    }

    .main-navigation ul ul li {
        background: transparent;
        margin-right:0;
    }

    .main-navigation ul ul li.menu-item-has-children {
        background: transparent;
    }
}