/*credits to Online Tutorial (youtube channel)
  for this invalueable code */


body{
 margin:0;
 padding:0;
 font-family:sans-serif;
}

header{
    position:absolute;
    top:0;
    left:0;
    padding: 0;
    width:100%;
    height: 60px;
    background:#262626;
    box-sizing: border-box;   
    position:fixed;
    z-index: 999;
}

.tlhlogo{
    float:left;  
}

header nav{
    float:right;
}

header nav ul{
    margin:0;
    padding:0px;
    display: flex;
}

header nav ul li{
    list-style: none;
    position: relative;
   
}

header nav ul li.sub-menu:before{
    content:'\f0d7';
    font-family: fontAwesome;
    position: absolute;
    line-height: 60px;
    color:#fff;
    right:5px;
}

header nav ul li.active.sub-menu:before{
   content:'\f0d8'; 
}

header nav ul li ul {
    position:absolute;
    left:0;
    background:#333;
    display: none;
}

header nav ul li.active ul {
    display:block;
}

header nav ul li ul li {
    display:block;
     width:200px;
}

header nav ul li a {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    display:block;
    font-size:20px;
}

header nav ul li a:hover, header nav ul li a.active{
    color:#fff;
    background:#2196f3;
}

.menu-toggle{
    color: #fff;
    float: right;
    line-height: 60px;
    font-size: 24px;
    cursor:pointer;
    display: none;
}
 
/* set it to mobile screen */

@media screen and (max-width:991px){
    
    hader{
        padding: 0 20px;
    }
    
    .menu-toggle{
        display: block;
        margin-right:50px;
    }
    
    header nav{
        /*display:none;*/
        position:absolute;
        width:100%;
        height:auto;/*calc(100vh - 50px);*/
        background:#333;
        top:60px;
        left:-100%;
        transition: .5s;
    }
    
    header nav.active{
        left:0;
    }
    
    header nav ul{
        display:block;
        text-align: center;
    }
    
    header nav ul li a{
        border-bottom: 1px solid rgb(192,192,192,0.1);
    }
    
    header nav ul li.active ul{
        position:relative;
        background:#003e6f;
    }
    
    header nav ul li ul li {
        width:100%;
    }  
    
} /* end of setting to mobile screen */