$logoHeight:40px;
.navbar {
    overflow:hidden;
    width:100%;
    position:fixed;
    top:0;
    right:0;
    height: -moz-fit-content;
    height:fit-content;
    padding:20px 0;
    // background-color:$white;
    background-color:transparent;
    @extend .trans;
    &.show {
        background-color:$white;
        box-shadow:0 3px 5px 0px #DDD;
        .bars {
            color:$mainColor !important;
        }
        a {
            color:#000;
        }
    }
    &.active {
        background-color:$white;
        box-shadow:0 3px 5px 0px #DDD;
        .bars {
            color:$mainColor !important;
        }
        a {
            color:#000;
        }
    }
    z-index:11;
    .logo, ul.mainmenu {
        overflow:hidden;
    }
    .logo {
        float:$float-right;
        img {
            height:$logoHeight;
        }
    }
    ul {
        li {
            &:not(:last-of-type) {
                margin-#{$right}:20px;
                @media #{$maxSmall} {
                    margin-#{$right}:0;

                }
            }
            a {
                min-height:auto !important;
                position: relative;
                top:5px;
                padding-top:5px !important;
                padding-bottom:5px !important;
                color:#FFF;
                font-weight:bold;
                &.logo {
                    top:0;
                }
            }
        }
        .bars {
            color:#FFF !important;
            font-size:25px !important;
            &:hover {
                color:#FFF;
            }
        }
    }
    ul.mainmenu {
        float:$float-left;
        height:$logoHeight;
        line-height:$logoHeight;
        @media #{$minSmall} {
            display:block !important;
        }
        @media #{$maxSmall} {
            display:none;
            height:auto;
        }
        li {
            float:$float-right;
            height:100%;
            margin:0 15px;
            @media #{$maxSmall} {
                width:100%;
                height:auto;
                a {
                    &:after {
                        #{$left}:20px!important;
                    }
                }
            }
            &:hover {
                @extend .active;
            }
            a {
                display:block;

                color:$fontColor;
                @extend .trans;
                font-weight:bold;
                text-decoration:none;
                position:relative;
                &:after {
                    content:'';
                    height:5px;
                    width:30px;
                    position: absolute;
                    bottom:0;
                    #{$left}:calc(50% - 15px);
                    border-radius:5px 5px 0 0;
                    background-color:$mainColor;
                    opacity:0;
                    @extend .trans;
                }

            }
            &.active {
                a {
                    color:$mainColor;
                    &:after {
                        opacity:1;
                    }
                }
                .nav-btn {
                    color:#FFF !important;
                    &:hover {
                        color:#FFF !important;
                    }
                }
            }
        }
    }
}

.nav-btn {
    color:#FFF !important;
    background-color: $gray;
    border-radius: 5px;
    padding:0px 20px !important;
    &:hover {
        color:#FFF !important;
    }
}

.in-items-dir, .in-items-dir * {
    direction: $ltr;
}

.full-menu {
    height:100vh;
    width:100%;
    background-color:#FFF;
    position: fixed;
    color:#000;
    [uk-close] {
        color: #000;
        position: absolute;
        top: 45px;
        right: 20px;
    }
    a {
        font-size:25px;
        color: $hColor;
        text-decoration: none;
        margin:15px 0;
        font-weight:bold;
    }
}

.bigmenu-list {
    li {
        position:relative;
        &:after {
            content:'';
            position:absolute;
            bottom:0;
            right:0;
            width:0px;
            height:1px;
            background-color:$mainColor;
            @extend .trans;
        }
        &:hover {
            &:after {
                width:100%;
            }
        }
        &:not(:last-of-type) {
            margin-bottom:15px;
        }
        &.not {
            margin:0;
            a {
                width:100%;
            }
            &:after {
                all:unset;
            }
        }
    }
    a {
        font-size:25px;
        color: $hColor;
        text-decoration: none;
        margin:15px 0;
        font-weight:bold;
        @extend .trans;
        &:hover {
            color:$mainColor;
        }
        &.btn-in {
            &:hover {
                color:#FFF;
            }
        }
    }
}

.uk-offcanvas-bar {
    background-color:#FFF;
}

.uk-offcanvas-close {
    color: #000 !important;
}