.menu{
display:block;
text-align: center;}

.menu li{
display: inline-block;
position: relative;
margin-top: 5px;
z-index: auto;
}
 
.menu li a {
    font-weight:800;
    text-decoration:none;
    text-transform: uppercase;
    text-align: center;
    padding: 30px;
    display:block;
    color:black;
    height: 122px;
    background-color: none;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
 
.menu li a:hover, .menu li:hover > a{color:#ffffff;
background-color: #F76336;;}

.menu li a:hover, .menu .active > a{color:#ffffff;
    background:#F76336;;;}

/* hide the second level menu */
.menu ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 250px;
    position: absolute;
    top: 121px;
    left: 0px;
    background-color: white;
    }
     
    /* display second level menu on hover */
    .menu li:hover > ul{ display: block;
    }
     
    .menu ul li {display:block;
    float: none;
    margin:0;
    padding:0;
    z-index: 999;
    }
     
    .menu ul li a {
    text-align: initial;
    font-size:12px;
    text-transform: capitalize;
    border: none;
    font-weight: 600;
    display:block;
    color:#000000;
    border-left:3px solid #ffffff;
    background:#ffffff;
    padding: 3%;
    height: 0%;
    border: 0.5px solid #f76336;
}
     
    .menu ul li a:hover, .menu ul li:hover > a{
    background:#F9794A;
    border-left:3px solid #F76336;
    color:#fff;
    }

    /* change level 3 menu positions */
.menu ul ul {left: 250px;
    top: 0px;
    /*height: 500px;
    /*overflow-y: auto;
    overflow-x: scroll;*/
}

.mobile-menu{display:none;
    width:100%;
    padding:11px;
    background:#3E4156;
    color:#ffffff;
    text-transform:uppercase;
    font-weight:600;
    }
    .mobile-menu:hover{background:#3E4156;
    color:#ffffff;
    text-decoration:none;
    }

    @media (max-width: 767px) {
 
        .menu{display:none;}
         
        .mobile-menu{display:block;
        margin-top:100px;}
         
        nav{margin:0;
        background:none;}
         
        .menu li{display:block;
        margin:0;}
         
        .menu li a {background:#ffffff;
        color:#797979;
        border-top:1px solid #e0e0e0;
        border-left:3px solid #ffffff;}
         
        .menu li a:hover, .menu li:hover > a{
        background:#f0f0f0;
        color:#797979;
        border-left:3px solid #9CA3DA;}
         
        /*level 2 and 3 - make same width as all items*/
        .menu ul {display:block;
        position:relative;
        top:0;
        left:0;
        width:100%;}
         
        .menu ul ul {left:0;}
         
        }/*end media queries*/