@charset "utf-8";
/* CSS Document */
/* Hide button on desktop */
#menu-toggle{
    display:none;
}

/* Desktop */
#nav ul{
    display:flex;
    margin:0;
    padding:0;
    background:#9AC29A;
    list-style:none;
}

#nav li{
    position:relative;
    flex:1;
    
}

#nav li ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    background:#0C5C0C;
    min-width:220px;
}

#nav li:hover>ul{
    display:block;
}

#nav a{
    display:block;
    padding:15px;
    color:#0C5C0C;
    text-decoration:none;
}

#nav li ul a{
    color:#fff;
}

/* Mobile */
@media (max-width:768px){

    #menu-toggle{
        display:block;
        width:100%;
        padding:15px;
        font-size:28px;
        background:#0C5C0C;
        color:#fff;
        border:none;
        cursor:pointer;
        text-align:left;
    }

    #nav{
        display:none;
        width:100%;
    }

    #nav.show{
        display:block;
    }

    #nav ul{
        display:block;
        width:100%;
        background:#9AC29A;
    }

    #nav li{
        width:100%;
        border-bottom:1px solid #ccc;
    }

    #nav li ul{
        position:static;
        display:none;
        background:#2E7D32;
    }

    #nav li.open>ul{
        display:block;
    }

    #nav a{
        padding:15px;
        text-align:left;
    }
}