/*
LEFT MENU STYLES
*/
@import url(base.css);/*Base Styles*/
@import url(variables.css);/*Component Variables*/
@import url(components.css);/*Component Styles*/



/*
TopBar
*/
#left-menu .topbar{
    position: relative;
    justify-content: center;
  }
  
  #left-menu .topbar .menu{
    padding: 0px 15px;
  }
  
  .topbar i{
    font-size: 16px;
  }
  
  #left-menu .topbar a{
    display:block; 
    position: relative;
    font-size: 12px;
    padding: 0 5px;
    line-height: var(--lmtbheight);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  
  #left-menu .topbar ~ .main{
    position: relative;
  }
  
  #left-menu .topbar.d-none ~ .main{
    position: absolute;
  }


/*
Main Nav
*/
#left-menu .main{
    background: var(--lmbg);
}

#left-menu .menu a{
    color: var(--lmlink);
}

#left-menu .menu a:hover{
    color: var(--lmlinkhvr);
}

#left-menu .main .menu ul {
    background: var(--lmsubbg);
}

#left-menu .main .menu ul a{
    color:var(--lmsublink);
}

#left-menu .main .menu ul a:hover{
    background: var(--lmsubbghvr);
    color:var(--lmsublinkhvr);
}

#left-menu .menu a.btn{
    font-size: 10px;
    line-height: calc(var(--lmheight) - 3em);
    color: var(--lmbtnlink);
    background: var(--lmbtn);
    border-color: var(--lmbtn);
    width: max-content;
}

#left-menu .menu a.btn:hover{
    line-height: calc(var(--lmheight) - 3em);
    color: var(--lmbtn);
    background: transparent;
    border-color: var(--lmbtn);
}

#left-menu .main .menu i{
    font-size: 18px;
}
  


/*
Mobile Nav
*/
#left-menu .mobile{
    display: none;
    background: var(--lmxsbg);
    justify-content: space-between;
    padding: 10px;    
}

#left-menu .mobile .logo img{

    max-height: calc(var(--lmxsheight) - 10px); /* = menu link line-height*/
    margin-left: 15px;
    padding: 0;
}

#left-menu .mobile a{
    color:var(--lmxslink);
}

#left-menu .mobile a:hover{
    color:var(--lmxslinkhvr);
}

#left-menu .mobile .hamburger ~ ul.menu {
    height: 100%;
    width: 100%;
    position: fixed;
    transition: 0.3s;
    opacity: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: var(--lmxsmenubg);
    backdrop-filter: blur(2px);
}

#left-menu .mobile .menu a {
    color:var(--lmxsmenulink);
    line-height: 42px;
}

#left-menu .mobile .menu a:active, #left-menu .mobile .menu a:hover {
    color:var(--lmxsmenulinkhvr);
}

#left-menu .mobile .menu ul a {
    background: var(--lmxsmenusubbg);
    color:var(--lmxsmenusublink);
}

#left-menu .mobile .menu ul a:active, #left-menu .mobile .menu ul a:hover {
    background: var(--lmxsmenusubbghvr);
    color:var(--lmxsmenusublinkhvr);
}

.hamburger:hover {
    opacity: 0.7;
}
.hamburger.is-active:hover {
    opacity: 0.7;
}

.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
    background-color:var(--lmxshmbrgr);
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::after,
.hamburger.is-active .hamburger-inner::before {
    background-color:var(--lmxshmbrgrarrow);
}

/*
Sticky Nav
*/

#left-menu .sticky{
    background: var(--lmstkbg);
    position: fixed;
    top: 0;
    z-index: 3;
    opacity: 0;
    transition: 0.3s ease-in-out;
    transform: translateY(-100px);
    padding: 0px 10px;
    max-width: 100%;
}

#left-menu .sticky .logo img{
    max-height: calc(var(--lmstkheight) - 20px); /* = menu link line-height*/
    padding: 0;
}

#left-menu .sticky .menu a {
    font-size: 10px;
    font-weight: normal;
    line-height: var(--lmstkheight);
    color:var(--lmstklink);
}

#left-menu .sticky .menu a:hover {
    color:var(--lmstklinkhvr);
}


#left-menu .sticky .menu ul{
    background: var(--lmstksubbg);
}

#left-menu .sticky .menu ul a{
    color:var(--lmstksublink); 
}

#left-menu .sticky .menu ul a:hover{
    background: var(--lmstksubbghvr);
    color:var(--lmstksublinkhvr); 
}

.sticky .underline:before{
    background: var(--lmstkhvrfxcolor);
}

/*Show Class*/
#left-menu .sticky.showSticky{
    opacity: 1;
    transform: translateY(0);
}


/*
Media Queries
*/
@media (max-width: 920px){

    #left-menu .topbar{
        display: none;
    }

    #left-menu .main{
        display: none;
    }

    #left-menu .mobile{
        position: fixed;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        max-width: 100vw;     
    }

    #left-menu .hamburger {
        display: flex;
    }

    #left-menu .mobile .hamburger ~ ul.menu {
        visibility: hidden;
        top: 0;
        left: 0;
    }

    #left-menu .mobile .hamburger.hamburger.is-active ~ ul.menu {
        visibility: visible;
        opacity: 1;
    }

    #left-menu .sticky, .showSticky{
        display: none;
    }

    main{
        margin-top: 50px!important;
    }
}