/*http://www.tutorialized.com/tutorial/Responsive-Multi-Level-Flat-Menu/81104*/
.mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0.8em;
    background: #4B5D1D url(../images/icons/nav-icon-white.png) no-repeat 87% 45%;
    color: #fff !important;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 1px;
    outline: none;
    margin-top: -1px; /* hack to remove 1px line of scrolling content above the menu */
    text-decoration: none;
    box-shadow: 0 2px 2px #999;
    transition: all 0.2s ease-in-out 0s;
    z-index: 999;
}
.mobile-menu:hover {
    background: #AFA893 url(../images/icons/nav-icon-white.png) no-repeat 87% 45%;
    text-decoration: none;
}
.mobile-menu:focus { outline: none; }

.active { 
    background-color: #607037 !important;
    color: #fff !important;
}
#to-top {
    position: fixed;
    bottom: 5%;
    right: 5%;
}

nav{
    margin: 0;
    background: none;
    width: 100%;
    z-index: 100;
}     
.menu {
    display: none;
    margin: 3.5em auto 0 auto;
    padding: 0;
    width: 80%;
}        
.menu li { 
    display: block;
    background: #3DBEC5;
    border-bottom: 1px solid #344801;
    color: #2C8C91;
    margin: 0;
}   
.menu li a {
    display: block; 
    background: #fff;
    color: #344801;
    padding: 0.5em 0.7em 0.5em 0.4em;
    transition: all 0.2s ease-in-out 0s;
}     
.menu li a:hover, 
.menu li:hover > a,
.menu li a:active {
    background: #607037;
    color: #fff;
}
.menu li:first-child { border-top: none; }     
.menu ul li a {
    background-color: #67D1D6;
    color: #fff;
    font-weight: normal;
    margin: 0;
    padding-left: 1em;
} 

/*level 2 and 3 - make same width as all items*/
.menu ul {
    display:block;
    position:relative;
    top:0;
    left:0;
    margin: 0;
    padding: 0;
} 


@media (min-width: 40em) {         /* 640px */
    .menu{ 
        width: 50%;
    }
}

@media (min-width: 51.25rem) {         /* 820px */
    .mobile-menu { display: none; }
    .active { 
        background-color: #867D60 !important;
        color: #fff !important; 
    }
    .menu ul li a.active { 
        background-color: #ddd !important;
        color: #666 !important;  
    }
    nav {
        position: fixed;
        top: 0;
        text-align: center;
        width: 100%;
    }
    .menu { 
        display: block;
        background-color: #344801;
        margin: 0 auto;
        width: 100%;
    }
    .menu li {
        display: inline-block;
        position: relative;
        background-color: transparent;
        border-top: none;
        border-right: solid 1px #736B52;
        margin: 0;
        z-index: 100;
    }   
    .menu li:last-child {
        border-right: none;
    }
    .menu li a {
        background-color: transparent;
        border: none;
        text-decoration: none;
        color: #fff;
        margin: 0;
        margin-left: -0.24em;
        padding: 0.7em 0.45em 0.5em 0.45em;
    }
    .menu li a:hover, 
    .menu li:hover > a {
        background-color: #867D60;
    }  
    .menu li h3 {
        display: inline-block;
        background-color: transparent; /*#EC008C;*/
        color: #fff;
        font-weight: normal;
        margin: 0;
        margin-left: -0.25em;
        padding: 0.9em 0.67em 0.7em 0.67em;
    }    
    .menu li span { display: none; }

    /* hide the second level menu */
    .menu ul {
        display: none;
        margin: 0;
        padding: 0;
        width: 16em;
        position: absolute;
        top: 2.6em;
        left: -0.25em;
    }
    
    /* display second level menu on hover */
    .menu li:hover > ul{ display: block; } 
    .menu ul li {
        display: block;
        float: none;
        border-top: 1px solid #34A3A9;
        border-right: none;
        margin: 0;
        padding: 0;
        width: 16em;
    } 
    .menu ul li a {
        font-size: 1em;
        font-weight: normal;
        display: block;
    } 
    .menu ul li a:hover, 
    .menu ul li:hover > a {
        background: #34A3A9;
        color: #fff;
    }
    
}

@media (min-width: 55rem) {         /* 800px */

    .menu li a {
        margin-left: -0.24em;
        padding: 0.7em 0.7em 0.5em 0.7em;
    }

}
/*end media queries*/