

.nav-bar {
    
    background: #000; /* was f9f9f9 */
    width: 100%;
   
}

.nav-bar__label {
    font-face: fira sans;
/* font-family: 'Fira Sans', sans-serif; *** was Trebuchet MS */
    color: #ccc; /* was 333 */
    display: block;
    padding: 10px 0; /* was 10px */
    text-align: right; /* was center */
    text-transform: uppercase;
    width: inherit; /* was inherit */
}

.nav-bar__label::after,
.nav-bar__sub-label::after {
    content: " "; /* Add " +" For Plus Dropdown */
    
}

.nav-bar__label,
.nav-bar__sub-label {
    cursor: pointer;
    
}

.nav-bar__list {
    background: #000; /* was f9f9f9 */
    font-face: fira sans;
/* font-family: 'Fira Sans', sans-serif; *** was Trebuchet MS */
    font-size: 12px;
    font-weight: 600; /* was 800 */
    list-style: none;
    margin: 0;
    padding-top: 6px;
    /*  padding: 10px; */
    width: 99%; /* was 120% */
    
    
}

.nav-bar__list,
[id^="toggle"] {
    display: none;
}

[id^="toggle"]:checked + .nav-bar__list {
    display: block;
}

.nav-bar__list-item {
    
    
    display: block;
    
    
}


.nav-bar__link,
.nav-bar__sub-label {

    font-family: 'Fira Sans', sans-serif; /* was Trebuchet MS */
    text-align: center; /* TEST */
    color: #ccc; /* was 333 */
    display: block;
    padding: 10px 12px; /* was 10 16 menu items spacing */
    text-decoration: none;
    border-radius: 5px;
    border: #555 1px solid; /* was e9e9e9 */
    /* word-wrap: break-word; */
    
}

.nav-bar__list-item .nav-bar__list-item .nav-bar__link,
.nav-bar__list-item .nav-bar__list-item .nav-bar__sub-label {
    padding: 10px 10px 10px 30px; /* was 10 10 10 30 */
    
}

.nav-bar__link:hover,
.nav-bar__link:active,
.nav-bar__sub-label:hover {
    background: #555; /* was bg dropdown e9e9e9 */
    
}

/* mouse out function */


/* end mouse out function*/

@media all and (min-width : 992px) {
    .nav-bar > .nav-bar__label {
        display: none;
    }

    .nav-bar > .nav-bar__list {
        display: block;
    }

    .nav-bar > .nav-bar__list > .nav-bar__list-item {
        display: inline-block;
        position: relative; /* was relative */
    }

    .nav-bar__list-item .nav-bar__list {
        position: absolute; /* was absolute */
        width: 225%; /* was 225% */
        opacity: 0.95;
    }

    .nav-bar__list-item .nav-bar__list-item .nav-bar__link,
    .nav-bar__list-item .nav-bar__list-item .nav-bar__sub-label {
        padding: 10px 1px; /* was 8 1 */
    }
}