@media (max-width: 1150px) {
    .outRecipe {
        padding: 30px 40px;
    }
    .result-side {
        margin-left: 40px;
    }
    .outRecipe-title {
        font-size: 38px;
        line-height: 40px;
    }
}
@media (min-width: 1001px){
  .nav-btn-filter {
    display: block !important;
  }
  .filter-side {
    min-width: 425px;
  }
}
@media (max-width: 1000px) {
  .bgi {
    background-size: auto auto;
    background-position: center -80px;
    height: 115%;
  }
    .container-inner {
        flex-wrap: wrap;
    }
    .result-side {
        margin: 40px auto 0;
    }
    .outRecipe {
        position: static;
    }
    .outRecipe-inner {
      max-height: 100%;
      overflow-y: visible;
    }
    .outRecipe-steps {
        margin-bottom: 0;
    }
    .filter-side {
        position: static;
        max-width: 674px;
        margin: 0 auto;
    }
    .container-inner{
        display: block;
        padding: 52px 30px;
    }
    #btnHideAll {
        display: block;
    }
    .nav-btn {
        width: auto;
        height: 44px;
    }
    #btnToggleFilters {
      display: block;
    }
    .nav-btn-filter {
      display: none;
    }
    .arrow-up {
      display: block;
    }
}
@media (max-width: 600px) {
    .btn-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        grid-gap: 15px 0px;
    }
    .nav-btn {
        width: 47%;
    }
    .outRecipe-title {
        font-size: 30px;
        line-height: 32px;
    }
    .outRecipe-needs,.outRecipe-steps {
        font-size: 18px;
        line-height: 24px;
    }
    .outRecipe-needs{
        margin-bottom: 17px;
    }
    .outRecipe-comments{
      font-size: 15px;
      line-height: 20px;
      margin-bottom: 8px;
    }
    .arrow-up {
      width: 22px;
    }
}
@media (max-width: 510px) {
    .container-inner {
        padding: 30px 0;
    }
    .nav-btn {
        font-size: 16px;
    }
    .outMenuItemLi {
        font-size: 16px;
    }
    .outMenuItemLiNone {
      font-size: 16px;
    }
}
@media (max-width: 450px) {
    .nav-btn {
        height: 36px;
    }
    .filter-side {
        padding: 20px 30px;
    }
    .btn-wrap {
        margin-bottom: 30px;
    }
    .filter-side {
        background-color: rgba(255, 255, 255, .7);
    }
    .outRecipe-title {
        font-size: 28px;
        line-height: 30px;
    }
    .outRecipe-needs, .outRecipe-steps {
        font-size: 16px;
        line-height: 20px;
    }
    .outRecipe-comments{
      font-size: 13px;
      line-height: 17px;
    }
    .filter-side-input {
        font-size: 16px;
        height: 42px;
        margin-bottom: 17px;
        padding: 13px 30px 15px 40px;
    }
    .filter-side-reset{
      top: 10px;
    }
    .input-wrap::before {
        top: 12px;
        left: 12px;
        width: 18px;
        height: 18px;
    }
    .filter-side-input::placeholder {
        font-size: 14px;
        line-height: 17px;
    }
}
@media (max-width: 345px) {
  .filter-side-input::placeholder {
    font-size: 13px;
  }
  .filter-side-input {
    font-size: 14px;
    padding: 13px 25px 15px 40px;
  }
  .filter-side-reset{
    right: 3px;
  }
  .filter-side-input {
    padding: 13px 25px 15px 40px;
  }
}