@import "variables.css";
.topbar{
    background-color: var(--color2);
}
.topbar>div{
    display: flex;
    flex-direction: row;
}
.topbar .topright{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.navbar{
    display: flex;
    flex-direction:row;
}

.navbar #menu_toggle{
    display: none;
}
.navbar.mobile .actionmenu{
    display: flex;
    flex-direction: row;
}
.navbar .actionmenu .menu-hamburger{
    color:#fff;
    display: none;
    font-size: 22pt;
    padding:15px 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    transition: all 300ms;
}
.color-white{
    color:#fff;
}
.navbar .actionmenu .menu-hamburger:hover,
.navbar .actionmenu .menu-hamburger:active{
    background-color: var(--color2);
    color: var(--color3);

}

.navbar .nav-links{
    display: flex;
    flex-direction: row;
}
.navbar .nav-links .menu{
    display: flex;
    flex-direction: row;
    margin:5px;
    margin-right:0;

}
.navbar .nav-links .menu>li{
    position: relative;
}
.navbar .nav-links .menu>li>a{
    position: relative;
    transition: all 400ms;
    font-size: 1em;
    color:var(--white);
    letter-spacing:1.3px;
    font-weight:bold;
    word-wrap: unset;
    white-space: nowrap;
    display: block;
    padding:15px 12px;
}
.navbar .nav-links .menu>li>a.active{
    color: var(--color2);
}

.navbar .nav-links .menu>li>a:hover,
.navbar .nav-links .menu>li>a:active{
    color: var(--color2);
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.navbar .nav-links .menu>li>a.active::before{
    content:"|";
    position: absolute;
    height:5px;
    width:5px;
    left:0;
    top:calc(50% - 2px);
    font-size:0.001pt;
    background-color: var(--color2);
    transition: all 400ms;
}
.navbar .nav-links .menu>li>ul{
    z-index: 2;
    position: absolute;
    overflow: hidden;
    max-height: 0;
    transition: all 400ms;
    background-color: rgba(0, 0, 0, 0.5);
}
.navbar .nav-links .menu>li>ul a{
    padding: 10px 12px 10px 25px;
    display: block;
    min-width: 230px;
    white-space: nowrap;
}
/*MOBILE*/
.navbar.mobile{
    flex-direction: column;
    position: relative;
}
.navbar.mobile .actionmenu{
    position:absolute;
    top:0;right:0;

}
.navbar.mobile .menu-hamburger{
    display: initial;

}

.navbar.mobile .nav-links{
    max-height:0;
    overflow: hidden;
    transition: all 500ms;
}
.navbar.mobile .nav-links.menuvisible{
    transition: all 900ms;
    max-height:calc(2000px);
}
.navbar.mobile .nav-links .menu{
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    margin:0;
    width:100%;
}
.navbar.mobile .nav-links .menu>li>ul{
    position:unset;

}
.navbar.mobile .nav-links .menu>li>a.active::before{
    height:100%;
    top:0;
}