nav
{
    width:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 10;
}

nav .full-length
{
    background-color: #008000;
    width: 100vw; /* make it 100% of the viewport width (vw) */
    margin-left: calc((100% - 100vw) / 2);  /* then remove the gap to the left of the container with this equation */    
    height: 100%;
    position: absolute;
    z-index: -1;
}

nav a
{
    color: #fff;
    text-decoration: none;
}

nav .menu,
nav .submenu
{
    list-style-type: none;
}

nav .submenu
{
    display: none;
    background-color:  #3fa435;
}



nav .show-submenu .submenu
{
    display: block;
}

nav .logo{
    display: flex;
    align-items: center;
}

nav .logo>div
{
    width:88px;
    height:48px;
    background: url(/gfx/logo.svg) center center no-repeat;
    background-size: contain;
 
}



nav .menu .item
{
    padding: 8px 24px;
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}

/*nav .menu .item a:hover,
nav .menu .item a:hover::after
{
    color:#ccc;
}*/

nav .menu .item:hover
{
    background-color:  #3fa435;
}

nav .menu .submenu .item:hover
{
    background-color:  #323332;
}

nav .menu .has-submenu > a
{
    cursor: pointer;
}

nav .menu .has-submenu > a::after
{
    
    font-family: FontAwesome;
    font-size: 1rem;
    padding-left: 8px;

    content: "\f078";
    color:#fff;
}


/** MOBILE MENU */
nav .menu
{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
}

nav .menu li a
{
    display: block;
    padding:16px 24px;
    
}



nav .toggle
{
    order:1;
    font-size: 2rem;
}

nav .show .item
{
    display: block;
}

@media all and (min-width: 960px) {

    nav
    {
        position: relative;
    }

    nav .menu
    {
        justify-content: center;
    }

    nav .logo
    {
        flex:1;
    }

    

    nav .menu .item
    {
        order:1;
        position: relative;
        display: block;
        width:auto;
    }

    nav .show-submenu .submenu
    {
        display: none;
    }
    nav .has-submenu:hover .submenu
    {
        display: block;
        position: absolute;
        left:0;
        top:100%;
        width:auto;
    }

    .toggle
    {display: none;}
}

@media all and (min-width: 600px) {
    
   
    nav .logo>span{
        display: inline;
        color:#fff;
        font-size: 1.4rem;
        font-family: "Fira Sans Condensed", Arial, sans-serif;
    }
}

@media all and (max-width: 599px) {
    nav .menu li a
    {
        
        padding:8px 24px;
        
    }

    nav .logo>span{
        display: none;
    }
}