//блок с полосками

//общая высота блока
$menu-mob-height:56;
//$menu-mob-height:54;

//ширина и высота полосок
$menu-mob-div-width:22;
$menu-mob-div-height:2;
//отступ полосок
$menu-mob-div-margin-top:4;
////////////////////////
$allHeight:($menu-mob-div-height*3)+($menu-mob-div-margin-top*2);
$menu-mob-div-margin-topFirst:($menu-mob-height - $allHeight)/2;
$menu-mob-div-margin-topAll:$menu-mob-div-margin-topFirst + ($menu-mob-div-margin-top*2) + ($menu-mob-div-height*2);
///////////////////////
.menu_mob {
  position: absolute;
  cursor: pointer;
  //background: red;
  width: 48px;
  height:  $menu-mob-height + px;
  top: -9px;
  right: 0;
  z-index: 2;
}

.menu_mob div {
  position: absolute;
  width: $menu-mob-div-width + px;
  height: $menu-mob-div-height + px;
  background: #333;
  top: 0;
  margin-top: $menu-mob-div-margin-topAll + px;
  left: 50%;
  margin-left: -($menu-mob-div-width/2) + px;
}
.menu_mob div:first-child {
  margin-top: $menu-mob-div-margin-topFirst + px;
}
.menu_mob div:first-child:before {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #333;
  top: 0;
  left: 0;
  margin-top: $menu-mob-div-height + $menu-mob-div-margin-top + px;
  content: '';
}

//блок с скрытым меню

$menu-mob-hidden-width:380;
$menu-mob-hidden-bg: #64696d;
$menu-mob-hidden-li-border-bg: #515151;
$menu-mob-hidden-li-height:40;
$close-menu-mob:red;

.mob-overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #000;
  @include Opacity(0.8);
  top: 0;
  left: 0;
  cursor: default;
}




.close-menu-mob {
  position: relative;
  width: 100%;
  height: $menu-mob-hidden-li-height + 12 + px;
  background: $close-menu-mob;
  text-transform: uppercase;
  color: #fff;
  line-height: $menu-mob-hidden-li-height + 12 + px;
  font-size: 18px;
  font-weight: 700;
  padding-left: 15px;
}
.close_mob {
  content: '';
  position: absolute;
  right: 10px;
  top: 0;
  width: 32px;
  height: 100%;
  cursor: pointer;
  background: red;
  &:before {

  }
  &:after {

  }


}
.mob-catalog-close {
  @extend .close-menu-mob;
  &:before {
    @extend .close_mob;
  }
}

.off-scroll {
  overflow-y: hidden;
  height: 100%;
  position: relative;
}

.mobile-menu-hidden {
  width: 290px !important;
  height: 100%;
  position: fixed;
  margin-right: -290px;
  right: 0;
  background: #2f2f2f;
  z-index: 1;
  opacity: 0;
  @include Transition(0.6);
  overflow-y: scroll;
  padding-bottom: 80px;
}



.close-mobile-menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 54px;
  background: $blue-color-active;
  cursor: pointer;
  text-align: center;
  &:before, &:after {
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    @include Rotate(45);
  }
  &:before {
    width: 24px;
    height: 2px;
    margin-left: -12px;
    margin-top: -1px;
  }
  &:after {
    width: 2px;
    height: 24px;
    margin-left: -1px;
    margin-top: -12px;

  }
}










.btns-menu-mob {
  padding: 0 10px;
  margin-top: 30px;
  .style {
    margin-top: 15px;
    &:first-child {
      margin-top: 0;
    }
  }
  .btn_ {
   width: 100%;
  }
}

.close-lang-mob {
  height: 54px;
  line-height: 54px;
  color: #fff;
  text-transform: uppercase;
  padding-left: 10px;
  font-weight: 700;
  background: $blue-color;
  font-size: 18px;
}

.mob-list {
  ul {
    li {
      width: 100%;
      float: left;

      a {
        font-size: 18px;
        color: #a7a7a7;
        padding: 0 10px;
        line-height: 44px;
        border-bottom: 1px solid #a7a7a7;
        @include wfl;
        text-decoration: none !important;
      }
    }
  }
}

.mobile-menu-hidden {
  .login {
    float: left;
    color: #fff;
    line-height: 44px;
    padding-left: 10px;
  }
}

@media (max-width: 991px) {
  .mobile-menu-hidden {
    display: block !important;
  }
  .off-scroll {
    position: fixed;
  }
}

@media (max-width: 850px) {


}
@media (max-width: 767px) {

}
@media (max-width: 450px) {

}
@media (max-width: 380px) {

}