.title_cat-main {
  margin-top: 22px;
  font-weight: 500;
  font-size: 22px;
  * {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
  }
}



.sort-cat-wr {
  margin-bottom: 8px;
  float: left;
  margin-top: 26px;
  height: 30px;

  p {
    color: #88888f;
    float: left;
    line-height: 30px;
  }
}
.sort-cat {
  margin-left: -6px;
  float: left;
  position: relative;
  z-index: 7;
  padding: 7px 26px 9px 10px;
  > a {
    color: #0072bc;
    position: relative;
    &:before {
      @include svgIcon();
      content: '\e915';
      color: #a0a0a0;
      font-size: 11px;
      @include Transition(0.2);
      position: absolute;
      top: 4px;
      right: -18px;
    }
  }
  ul {
    display: none;
    li {
      list-style: none;
      margin-top: 13px;
      a {
        text-decoration: none;
      }
    }
  }
  &.active {
    background: #fff;
    @include Shadow;
    > a {
      color: $main-color;
      cursor: default;
      &:before {
        @include Rotate(180);
      }
    }
    ul {
      display: block;
      li {
        a {
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}





.overlay-catalog {

  position: relative;
  &:before {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: #fff;
    @include Opacity(0.7);
    left: 0;
    top: 0;
    display: block !important;
  }
}

.sidebar-filters  {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.title-clear_f {
  font-size: 15px;
  font-weight: 700;
  margin-top: 10px;
  &:first-letter {
    text-transform: uppercase;
  }
}
.wrapp_clear-link {
  margin-left: -30px;
  //margin-top: 6px;
  a {
    font-size: 14px;
    text-decoration: none;
    float: left;
    position: relative;
    color: $main-color;
    background: #ced0d5;
    margin-left: 15px;
    margin-top: 15px;
    padding: 9px 38px 9px 15px;
    &:before {
      @include svgIcon;
      content: "\e90f";
      color: inherit;
      font-size: 12px;
      position: absolute;
      top: 50%;
      margin-top: -6px;
      right: 12px;
    }
  }
}


.reset-btn-filters {
  margin-top: 12px;

}
.clear_filters-wr {
  margin-top: 10px;
  padding: 0 15px 16px 15px;
}



.input-blocks {
  label {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
  }
}

.sidebar {
  position: relative;
  background: #fff;
  margin-top: -1px;
  //padding: 0 15px 0 15px;
  &:before {
    width: 1px;
    height: 100%;
    background: $border-items;
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
  }
}

.input-blocks-wrapper {

  padding-bottom: 8px;
  .input-blocks {
    @include wfl;
  }
  &:first-child {
    border-top: 1px solid $border-items;
    padding-top: 8px;
  }

}

.more_six {
  overflow: hidden;
  max-height: 173px;
  @include Transition(0.4);
  &.visible {
    max-height: 2500px;
    @include Transition(0.9);
  }

}

.more_six-btn {
  width: 100%;
  float: left;
  text-align: left;
  margin-top: 16px;
  span {
    cursor: pointer;
    color: $link-color;
    position: relative;
    @include Transition(0.4);
    &:before {
      display: block;
      @include Transition(0.3);
      position: absolute;
      @include svgIcon;
      content: '\e915';
      color: #a5a5a5;
      font-size: 11px;
      top: 3px;
      right: -20px;
    }
    &.active {
      &:before {
        @include Rotate(180);
      }
    }
    &:hover {
      @include Opacity(0.8);
    }
  }
}

.buttonsSort {
  border-top: 1px solid $border-items;
  padding-bottom: 15px;
  padding-top: 10px;
  padding-left: 15px;
  ul {
    float: left;
    li {
      width: auto !important;
      float: left;
      margin-top: 5px;
      margin-right: 8px;
      padding-left: 0 !important;
      padding-right: 0 !important;
      position: relative;
      a {
        position: relative;
        z-index: 2;
        text-align: center;
        display: block;
        line-height: 19px;
        color: #fff;
        min-width: 70px;
        padding: 0 5px;
        font-weight: 700;
        text-decoration: none;
        text-transform: uppercase;
      }

      &.active {
        &:before {
          position: absolute;
          width: 100%;
          height: 100%;
          border: 1px solid #e1e1e1;
          content: '';
          padding: 2px;
          box-sizing: content-box;
          left: -3px;
          top: -3px;
          z-index: 1;
        }
      }
      &.sale_btn_f {
        background: $statusSaleColor;
      }
      &.new_btn_f {
        background: $statusNewColor;
      }
      &.top_sale_btn_f {
        background: $statusHitColor;
      }
    }
  }
}

.sidebar_checks-column {
  float: left;
  width: 40%;
}
.stars_catalog_sidebar {
  padding-bottom: 17px;
  border-top: 1px solid $border-items;
}

.price-input {
  float: left;
  input {
    margin: 0;
    float: left;
    width: 100%;
    background: #f5f5f5;
    border-color: #d7d7d7;
    font-weight: 700;
  }
  &.from {

    width: 50%;
    padding-right: 7px;
  }
  &.to {
    width: 50%;
    padding-left: 7px;
  }
}

.price-txt {
  float: left;
  line-height: 32px;
  margin-right: 8px;
}

.price_inputs {
  margin-top: 20px;
  position: relative;
  padding-right: 48px;
  margin-bottom: 1px;
}

.show-filters {
  position: absolute;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  min-width: 98px;
  padding: 0 5px;
  line-height: 34px;
  background: $blocks-color;
  z-index: 7;
  box-shadow: 0px 0px 12px 0px rgba(194, 194, 194, 0.75);
  margin-top: -9px;
  margin-left: 24px;
  height: 32px;

  &:before {
    content: '';
    border: 5px solid transparent;
    border-right: 7px solid $blocks-color;
    position: absolute;
    top: 50%;
    left: -5px;
    margin-top: -5px;
    transform: translate3d(-7px, 0, 0);
  }



  &:hover {
    text-decoration: none;
    background: $blocks-color-hover;
    &:before {
      border-right-color: $blocks-color-hover;
    }
  }
  &:active {
    color: #fff;
    background: $blocks-color-active;
    &:before {
      border-right-color: $blocks-color-active;
    }
  }



  &.bottom2 {
    &:before {
      left: 50%;
      margin-left: 0;
      top: -7px;
      border: 5px solid transparent;
      border-bottom: 7px solid $blocks-color;
    }
    &:hover {
      background: $blocks-color-hover;
      &:before {
        border-bottom-color: $blocks-color-hover;
      }
    }
    &:active {
      &:before {
        border-bottom-color: $blocks-color-active;
      }
    }
  }
}

.mob-filters-btn {
  float: left;
  margin-right: 15px;
  span {
    display: block;
    height: 30px;
    border-bottom: 2px solid $blocks-color-hover;
    background: $blocks-color;
    color: #fff;
    font-weight: 700;
    width: 150px;
    text-align: center;
    line-height: 30px;
    text-transform: uppercase;
    cursor: pointer;
    @include Transition(0.2);
    &:hover {
      background: $blocks-color-hover;
    }
    &:active {
      background: $blocks-color-active;
      border-bottom: 2px solid $blocks-color-active;
    }
  }
}

#overlay-filters {
  @extend #overlay;
}

.show-block-filters {
  .sidebar-filters {

  }
}

.filters-mobile-txt {
  @include wfl;
  height: 48px;
  background: #fff;
  position: relative;
  border-bottom: 1px solid $border-items;
  span {
    color: $main-color;
    font-size: 22px;
    line-height: 48px;
    padding-left: 15px;
  }
  div {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 48px;
    cursor: pointer;
    text-align: center;
    &:before {
      @include svgIcon;
      content: '\e90f';
      font-size: 18px;
      color: #8a8b90;
      line-height: 48px;

    }
  }
}

.mob-tags-vis {
  @include wfl;
  position: relative;
  text-decoration: none !important;
  line-height: 30px !important;
  margin: 0 !important;
  &:before {
    position: absolute;
    top: 11px;
    right: 0;
    @include svgIcon;
    content: '\e915';
    color: #a0a0a0;
    font-size: 11px;
    @include Transition(0.2);
  }
  span {
    border-bottom: 1px dashed $link-color;
  }
}








@media (max-width: 1200px) {
  .price-input {
    input {

    }
    &.from {

    }
    &.to {}
  }
}

@media (max-width: 991px) {
  .show-filters {
    right: 10px;
    left: auto !important;
    &.bottom2 {
      right: auto;
      left: -10px !important;
      margin-top: 33px;
    }
    &.bottom {
      margin-top: 34px;
    }
  }
  .sidebar-filters {
    opacity: 0;
    @include Transition(0.6);
    background: #fff;
    width: 400px !important;
    position: fixed !important;
    left: 0;
    top: 0;
    margin-left: -400px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .clear_filters-wr {
    //background: $Main-bg;
  }
  .wrapp_clear-link {
    margin-left: -15px;
  }
  ul.breadcrumb {
    border: 0;
    //padding-left: 0;
    padding-right: 0;
    padding-top: 12px;
    padding-bottom: 13px;
  }
  .catalog-header-wr {
    border-right: 0;
    border-left: 0;
    margin-top: 10px;
  }
  .title_cat-main {
    margin-top: 0;
  }
  .sort-cat-wr {
    margin-top: 15px;
    margin-bottom: 13px;
  }
}

@media (max-width: 767px) {
  .sidebar-filters {
    width: 400px !important;
    margin-right: -400px;
    right: 0;
    left: auto;
    margin-left: 0;
  }
.mob-filters-btn {
  @include wfl;
  span {
    @include wfl;
  }
}

  .sort-cat-wr {
    margin-bottom: 0;
    height: 78px;
    p {
      line-height: 48px;
    }
  }

  .sort-cat {
    margin-top: 9px;
    margin-left: -4px;
    padding-left: 5px;
    padding-right: 23px;
    a {
      &:before {
        right: -17px;
      }
    }
  }
  .separator-style {
    margin-top: 15px;
  }



  .tags-cat {
    padding: 0 10px 5px 10px;
    max-height: 30px;
    overflow: hidden;
    @include Transition(0.4);
    background: #fff;
    .mob-tags-vis {
      display: block !important;
    }
    &.active {
      max-height: 1000px;
      @include Transition(0.7);
      .mob-tags-vis {
        &:before {
          @include Rotate(180);
        }
      }
    }
  }

  ul.breadcrumb {
    padding-left: 0;
  }
  .row  {
    .sidebar-filters {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }



}


@media (max-width: 450px) {
  .sidebar-filters {
    width: 310px !important;
    margin-right: -310px;
  }
}
@media (max-width: 330px) {
  .separator-style {
  width: 45px;
  }
  .sort-cat-wr {

    p {
     font-size: 12px;
    }
  }
  .sort-cat {
    font-size: 12px;
  }
}