.menu-toggle{
    display: none;
    z-index: 0;
    @media (max-width: 767px){
        display: inline-block;    
    position: absolute;
    right: 5px;
    top: 5px;
        &:hover{
            .menu-toggle__hamburger{
                background-color: $brand-gold;
            }
        }
    }
    &__hamburger{
        display: block;
        height: 2px;
        width: 20px;
        background-color: $brand-gold;
        margin-bottom: 5px;
    }
}

.logo{
    @include background-img(url('../images/entwine-logo.png'),url('../images/entwine-logo.svg'));
    display: inline-block;
    width: 100px;
    height: 100px;
    background-position: left center;
    z-index: 11;
        margin-left: 25px;
    @media(max-width:767px){
        width:90px;
        height:90px;
        margin-left:0px;
    }
     
}

.qtranxs_language_chooser{
    list-style: none;
    padding: 0;
     li{
        display: inline-block;
        border-right: 1px $color-white solid;
        padding: 0 10px;
        line-height: 1;
        &:last-child{
            border-right: none;
            padding-right: 0;
        }
        a{
            color:$color-white;
            transition: all 0.5s ease;
            text-transform: uppercase;;
            &:hover{
                color:$brand-gold;
                text-decoration: none;
            }
        }
    }

}

.language{
    list-style: none;
    padding: 0;

    &__list{
        display: inline-block;
        border-right: 1px $color-white solid;
        padding: 0 10px;
        line-height: 1;
        &:last-child{
            border-right: none;
            padding-right: 0;
        }
        &__option{
            color:$color-white;
            transition: all 0.5s ease;
            &:hover{
                color:$brand-gold;
                text-decoration: none;
            }
        }
    }
}
nav{
    text-align: center;
    margin-top:-40px;
    @media(max-width:991px){
        margin-top:10px!important;
    }
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
    color:$brand-gold;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{
    text-decoration: none;
    background-color: transparent;
    color:$brand-gold;
}

.menu{
    list-style: none;
    padding: 0;
    display: inline-block;
    float: none;
    li{
        display: inline-block;
        padding: 0 35px;
        line-height: 1;

        @media(max-width:1199px){
        padding: 0 20px;
        }

        &:last-child{
            border-right: none;
            padding-right: 0;
        }

        a{
            font-size:14px;
            color:$brand-grey;
            padding: 0;
            font-family:$elletitle;
            letter-spacing: 1px;
                padding-bottom: 5px;
            transition: .5s;
            &:hover{
                text-decoration: none;
                background-color:transparent;;
                color:$brand-gold;
            }
            &.active{
                color:$brand-gold;
                &:hover{
                    color:$color-white;
                }
            }
        }
        .dropdown-menu{
            padding:10px 0px;
            border: none;
            border-top:1px solid $brand-gold;
            margin-top:5px;
            li{
                text-align: center;
                padding:4px 10px;
                display: block;
                a{

                }
            }
            .active{
                a{
                    background-color:transparent;
                    color:$brand-gold;
                }
            }
        }
    }
    .active{
        a{
            color:$brand-gold;
        }
    }
    .logo-left{
        padding-right:120px;

        @media(max-width:991px){
            padding-right:20px;
        }
    }
    .logo-right{
        padding-left:100px;
        @media(max-width:991px){
            padding-left:20px;
        }
    }
}


// Golbal Menu
.header{
    position: relative;
    text-align:center;
    border-bottom:1px solid $brand-gold;
    &__mobile{
        text-align: center;
            padding: 5px 0px 0px;
            display: none;
            @media(max-width:767px){
                display: block;
                border-bottom:1px solid $brand-gold;
            }
        &__logo{
            @include background-img(url('../images/entwine-logoh.png'),url('../images/entwine-logoh.svg'));
            display: inline-block;
            width: 150px;
            height: 50px;
        }
        .navbar-toggle{
            margin-top:7px;
        }
    }
    .headermenu{
           padding: 10px 0;
    }
    &__nav{
        padding:0;
    }
    &__top{
        background-color:$brand-grey;
        position: relative;
        padding:2px 0px;
        height: 30px;
        &__left{
            float:left;
            margin-left:30px;
            &__search{
                color:$color-white;
                letter-spacing: 2px;
                font-size:$font-size-sm;
                        transition:0.5s;
                &:hover{
                    color:$brand-gold;
                }
            }
        }
        &__right{
            float: right;
            margin-right:30px;
            &__social{ 
                display: inline-block;
                &__icon{
                    color:$color-white;
                    font-size:$font-size-sm;
                    padding: 0px 5px;
                    transition:0.5s;
                    &:hover{
                        color:$brand-gold;
                    }
                }
            }
            &__language{ 
                display: inline-block;
                li{ 
                    padding:0px 5px;
                    display: inline-block;
                    list-style: none;
                    a{
                        color:$color-white;
                        transition:0.5s;
                        font-size:$font-size-sm;
                        &:hover{
                            color:$brand-gold;
                        }
                    }
                }
            }
        }
    }
    &__bottom{
        position: relative;
            &__search{
                color:$brand-grey;
                letter-spacing: 2px;
                font-size:$font-size-sm;
                        transition:0.5s;
                &:hover{
                    color:$brand-gold;
                }
            }
        &__icon{
            margin-top:10px;
            &__social{ 
                display: inline-block;
                &__icon{
                        color:$brand-grey;
                    font-size:$font-size-sm;
                    padding: 0px 5px;
                    transition:0.5s;
                    &:hover{
                        color:$brand-gold;
                    }
                }
            }
            &__language{ 
                display: inline-block;
                li{ 
                    padding:0px 5px;
                    display: inline-block;
                    list-style: none;
                    a{
                        color:$brand-grey;
                        transition:0.5s;
                        font-size:$font-size-sm;
                        &:hover{
                            color:$brand-gold;
                        }
                    }
                }
            }
        }
    }
    .navbar-collapse{
        padding:0;
    }
    &__closebtn{
        position: absolute;
        right: 20px;
        top:20px;
        color:$brand-grey;
        font-size: $font-size-xl;
        text-decoration: none;
        line-height: 1;
        transition: all 0.5s ease;
        &:hover, &:focus{
            text-decoration: none;
            color:$brand-gold;
            outline:none;
        }
        @media (min-width: 768px){
            display: none!important;
        }
    }

                .qtranxs_language_chooser{
                    font-size: $font-size-xs;
                    position: absolute;
                    right: 50px;
                    top: 5px;
                    @media(max-width:991px){
                        position: relative;
                        right:5px;
                    }
                }   
    .language{
        font-size: $font-size-xs;
        position: absolute;
        right: 50px;
        top: 5px;
    }
    @media (max-width: 767px){
        width: 100%;
        height: 100%;
        z-index: 12;
        opacity:0;
        display: none;
        text-align: center;
        background-color:rgba(255, 255, 255, 0.95);
        position: fixed;
        top: 0;
        left: 0;
        transition: all 0.5s ease-in;
        .language{
            position: relative;
            top: 0;
            right: 0;
            &__list{
                padding: 0 10px;
            }

        }

        .menu{
            float: none;
            margin-bottom:30px;
            text-align: center;
           li{
                display: block;
                border:none;
                clear:both;
                padding: 10px 10px;
                line-height: normal;
                width:100%;
                .dropdown-menu{
                    border-top:1px solid $brand-gold;
                        padding: 2px 10px;
                }
            }
        }
        &.is-hidden{
            display: block;
            opacity:1;
            transition: all 0.8s ease;
        }
    }
   
}

@media(max-width:991px){
    nav{
        margin-top:20px;
    }
}