.top-bar{
    position:relative;
    height:40px;
    line-height:40px;
    z-index:99;
    background-color:var(--ingite-color-top-bar);
    color:var(--ingite-color-on-top-bar);
    .container{
        text-align:right;
        display:flex;
    }

    .container, .top-bar-list, li{
        height:inherit;
        line-height:inherit;
    }

    .container::after, .top-bar-list::after{
        display:block;
        content:"";
        clear:both;
    }

    .top-bar-list{
        list-style:none;
        display:inline-block;
        margin:0;
        padding:0;
        li{
            display:block;
            float:left;
            opacity:0.8;
            transition:all .15s;
            margin-right:0.5rem;
            a{
                color:inherit;
                background:transparent;
                i{
                    font-size:22px;
                }
            }
        }
        li:hover{
            opacity:1;
        }
    }

    #top-bar-social{
        flex:1 1 0;
    }

    .topbar-btn-wrapper{
        height:24px;
        line-height:24px;
        padding:0;
        margin:8px 0.5rem;
        padding-right: 1rem;
        margin-right: 1rem;
        border-right:1px solid #FFFFFF;
        .btn{
            height:inherit;
            line-height:inherit;
            font-size:16px;
            margin:0;
            padding:0 1rem;
            &:hover{
                background-color:#602040;
            }
        }
    }

    #top-bar-languages{
        height:24px;
        line-height:24px;
        margin:8px 0.5rem;
        margin-right:0;
        img{
            width:24px !important;
            height:24px !important;
            line-height:24px !important;
            object-fit:cover;
            border-radius:4px;
        }
        li:not(.current-lang){
            opacity:0.8;
            &:not(:hover){
                opacity:0.15;
            }
        }
    }
}

header{
    background:transparent;
    color:inherit;
    transition:all .15s;
    height:64px;
    line-height:64px;
    z-index:98;
    .site-logo-wrapper img.site-logo{
        padding-top:0.75rem;
        padding-bottom:0.75rem;
        height:64px;
        margin:0;
    }
    nav{
        height:64px;
        line-height:64px;
        z-index:98;
        position:relative;
        width:960px;
        margin:0 auto;
        display:flex;
        -webkit-box-shadow:none;
        box-shadow:none;
        background:transparent!important;
        color:inherit;

        .flex{
            flex:1 1 0;
        }
        ul.header-nav-menu{
            display:flex;
            align-items:center;
            li{
                display:-webkit-box;
                display:-webkit-flex;
                display:-ms-flexbox;
                display:flex;
                flex:0 0 auto;
                -webkit-box-align:center;
                -webkit-align-items:center;
                -ms-flex-align:center;
                align-items:center;
                height:100%;
                -webkit-transition:background-color .15s;
                transition:background-color .15s;
                font-size:1rem;
                color:inherit;
                padding:0;
                cursor:pointer;
                height:36px;
                line-height:36px;

                .header-nav-menu-item-content{
                    cursor:pointer;
                    background:transparent;
                    line-height:inherit;
                    font-size:inherit;
                    font-family:inherit;
                    outline:none;
                    border-radius:8px;
                    color:inherit;
                    text-decoration:none;
                    padding-left:0.5rem;
                    padding-right:0.5rem;
                    margin-left:0.5rem;
                    border:none;
                    &:last-child{
                        margin-right:0.5rem;
                    }
                }
                i{
                    display:inline-block;
                    float:left;
                    font-size:24px;
                    height:inherit;
                    line-height:inherit;
                    margin:0;
                    &.left, &:not(.right){
                        margin-right:0.5rem;
                    }
                    &.right{
                        float:right;
                        margin-left:0.5rem;
                    }
                }
                &:hover{
                    .header-nav-menu-item-content{
                        background-color:rgba(0,0,0,.05);
                    }
                }
                &.active{
                    background:transparent;
                    .header-nav-menu-item-content{
                        background-color:rgba(0,0,0,.025);
                    }
                }
            }
        }
    }
}

body:not(.scrollbar-on-top){
    header{
        background:rgba(255,255,255,0.9);
        color:black;
    }
}

@media screen and (max-width:993px){
    header nav ul.header-nav-menu{
        display:none;
    }
}

body.header-sticky header{
    position:sticky;
    top:0;
}

@media screen and (min-width:600px){
    body.admin-bar.header-sticky header{
        top:var(--wp-admin--admin-bar--height);
    }
}

.ingite-sidenav-trigger{
    height:calc(100% - 12px);
    display:block;
    width:calc(64px - 12px);
    margin:6px;
    border-radius:50%;
    text-align:center;
    line-height:inherit;
    vertical-align:middle;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    transition:all .15s;
    color:inherit;
    font-size:20px;
    i {
        flex:1 1 0;
    }
}

.ingite-sidenav-trigger:hover{
    background-color:rgba(0,0,0,.1);
}