header{
    ul.main-navigation{
        @include media-breakpoint-up(lg){ 
            display: flex;
            li{
                padding: 0 15px;
            }
        }
        @include media-breakpoint-down(md){ 
            li{
                padding: 10px;
                
            }
        }
    }
    .sublevalclose{
        position: absolute;
        right: 0;
        top: 28px;
        z-index: 1010;
        width: auto!important;
        color: $black;
        display: none;
        padding: 0!important;
        cursor: pointer;
    }
    ul.main-navigation,.find-location{
         a,span{
            color: $black;display: block;
             cursor: pointer;
             @include media-breakpoint-down(md){ font-size: 16px;}
             @include media-breakpoint-only(lg){ font-size: 14px;}
        }
    }
    .find-location a{
        position: relative;
    }
    .main-navigation{
       ul{
            padding: 0;margin: 0;
        }
        >li{
            >span,>a{
                @include media-breakpoint-up(lg){
                    line-height: 70px;
                }
            }
        }
        >li>ul{
            
            @include media-breakpoint-up(lg){
                position: fixed;
                left:0;
                right: 0;
                height: 100%;
                transform: translate(0,-50px);
                background: $gray-200;
                opacity: 0;visibility: hidden;
                transition: all ease .5s;
                padding:25px;
                margin: 1px 0 0;
                li{
                    list-style: none;
                }
                li:not(.container){
                    a{
                        display: block;
                        color: $black;
                        text-transform: uppercase;
                        text-align: center;
                        img{
                            display: block;
                            margin: 0 auto 3px;
                        }
                    }
                }
            }
            @include media-breakpoint-down(md){
                display: none;
                padding: 0;margin: 0;
                list-style: none;
                li.sublevalclose{
                    display: none!important;
                }
                li.container,li{
                    padding: 0;margin: 0;list-style: none; 
                }
                li.container ul{
                    padding:20px 0;
                    text-align: center;
                    img{
                        max-width: 90%;
                        width: auto;height: auto;
                        display: block;
                        margin: 0 auto;
                    }
                    li{
                        padding: 0 15px 15px;
                    }
                }
                
            }
            li.container li{
                width: 50%;
                margin: 0;
                padding: 0 0 25px;
                display: inline-block;
                vertical-align: top;
                @include media-breakpoint-up(xl){
                    width: 20%;
                }
                @include media-breakpoint-up(lg){
                    width: 25%;
                }
                @include media-breakpoint-up(md){
                    width: 33%;
                }
            }
        }
        li.active{
             @include media-breakpoint-up(lg){
                 background: $gray-200;
                ul{
                    transform: translate(0,0);
                    background: $white;
                    opacity: 1;visibility: visible;
                    z-index: 1000;
                }
            }
             @include media-breakpoint-down(md){
                 ul{
                     display: block;
                 }
            }
        }
    }
    .menu-icon {
        font-size: 25px;color: $black;
    }
    .find-location a{
        html[dir="ltr"] &{padding-left: 20px;}
        html[dir="rtl"] &{padding-right: 20px;}
        &:before{
            content: "\e906";
            position: absolute;
            font-family: icomoon!important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            @include media-breakpoint-up(lg){ top:4px;}
            @include media-breakpoint-down(md){ top:5px;}
            html[dir="ltr"] &{left: 0;}
            html[dir="rtl"] &{right: 0;}
        }
    }
}
.showsubmenu{
    overflow: hidden;
    @include media-breakpoint-up(lg){
        .mask{
           background: $gray-200;
            position: fixed;
            left:0;
            top:70px;
            bottom:0;
            width: 100%;
        }
    }
    header{
        background: $white;
    }
    .lang-option span, header .find-location a, header ul.main-navigation a, header ul.main-navigation span {
        color: $black;
    }
    .logo-block img{
        visibility: visible;
    }
    .sublevalclose{
        display: block;
    }
}
html[dir="ltr"]{
    .lang-option .en{
        display: none;
    }
    .lang-option .ar{
        display: block;font-family:$font-family-arabic;
    }
}
html[dir="rtl"] {
    .lang-option .ar{
        display: none;
    }
    .lang-option .en{
        display: block;font-family:$font-family-sans-serif;
    }
}

@include media-breakpoint-up(lg){
    .logo-block{
        flex: 0 0 10%;
        max-width: 10%;
    }
    .nav-block{
        flex: 0 0 90%;
        max-width: 90%;
    }
    
}
@include media-breakpoint-down(md){
    .nav-block{
        position: fixed;
        top:0;
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-top: 1px;
        background: #fff;
        z-index: 1010;
        padding: 0 10px 10px;
        html[dir="ltr"] &{right: -100%;}
        html[dir="rtl"] &{left: -100%;}
        transition: all ease .5s;
         .icon-close{
            font-size: 16px;
        }
    }
    .mob-nav-block-container{
       padding: 15px 0 20px; 
    }
    .language-block{
        font-size: 14px;text-transform: none;
         html[dir="ltr"] &{border-left:$border-color 2px solid;}
        html[dir="rtl"] &{border-right:$border-color 2px solid;}
    }
    .showmenu{
        overflow: hidden;
        .nav-block{
            html[dir="ltr"] &{right: 0;}
            html[dir="rtl"] &{left: 0;}
        }
    }
}