/* Mobile Nav CSS Update */

@media screen and (max-width:768px){    
    .dropdown {
        display: flex;
        justify-content: space-between;
    }
    
    label {
        cursor: pointer;
    }
    
   #dropdown .icon-bar {
        display: block;
        width: 50px;
        height: 2.5px;
        background-color: #cccccc;
        border: 1px solid rgb(0, 0, 0);
        border-radius: 5px;
        margin: 10px;
        transition: all 0.2s;
    }
    /* #dropdown.top-bar {
        transform: rotate(0);
    }
    #dropdown.middle-bar {
        opacity: 1;
    }
    
    #dropdown:active .top-bar.animate {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
    }
    #dropdown:active .middle-bar.animate {
        opacity: 0;
    }
    #dropdown:active .bottom-bar.animate {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

    #dropdown:active ~ #navigation.animate {
        transform: translate(0);
        transition: transform .5s cubic-bezier(0.77,0.2,0.05,1.0);
    } */
    
    #navigation{
        background: repeat-y top center fixed #000000;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        position: absolute;
        width: 96vw;
        height: 350px;
        box-shadow: 0 0 10px #85888C;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        /* transform: translate(-125%, 0);
        transition: transform 0s; */
    }

    #nav li{
        width: 80%;
        margin: 0 auto;
        text-align: center;
        padding: 0;
    }

    #nav li .nav-sub{
        background-color: #00000061;;
        width: 90%;
    }    
}