html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  background: #f3f7ed;
  font-size: 100%;
  font-family: "AvanteInt", sans-serif;
  font-weight: 300;
  color: #1f271b;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

input {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: #1f271b;
}

/* Относится к тайтлу */

.title::before {
  content: url(/img/title-left-line.svg);
  margin: 0;
  padding: 0;
  line-height: 0;
}

.title::after {
  content: url(/img/title-right-line.svg);
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* То, что одной ширины */
.catalog {
  position: relative;
  width: 100%;
  max-width: var(--pcContent-width);
  margin-left: auto;
  margin-right: auto;
}

/* Кнопки фильтра */
.controllers {
  display: -webkit-box;
  display: -ms-flexbox;
  width: 100%;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  gap: 10px;
  max-width: var(--pcContent-width);
  margin: 10px auto var(--smallPC-margin);
}

/* Хлебные крошки */
.main-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin: auto;
  max-width: var(--pcContent-width);
  width: 100%;
  height: auto;
}

/* H1 */

h1, h2, #color-letters-cot {  
  font-weight: 700;
}

.title {  
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: var(--bigPC-margin) auto;
  text-transform: uppercase;
  text-align: center;
  font-size: 32px;
  line-height: 1.3;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: var(--pcContent-width);
}

/*  */

.black-color {
  color: #000000;
}

.white-color {
  color: #fff;
}

.size-card-elem-h2 {
  height: 58px;
}

.size-card-elem-p {
  min-height: 24px;
  font-weight: 300 !important;  
}

.trail-spec {
  margin-top: var(--smallPC-margin);
  width: 100%;
  height: 56px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.upper_cotalog {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 90px;
  text-align: center;
  width: 100%;
  z-index: 200;
  background-color: #f3f7ed;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: -webkit-center;

}

.switch-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 239px;
  height: 44px;
  border-radius: 4px;
  background: #ffffff;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-filter: drop-shadow(2px 2px 4px rgba(31, 39, 27, 0.15)) drop-shadow(0px 0px 5px rgba(31, 39, 27, 0.35));
  filter: drop-shadow(2px 2px 4px rgba(31, 39, 27, 0.15)) drop-shadow(0px 0px 5px rgba(31, 39, 27, 0.35));
}

.switch-btn svg {
  margin: 4px;
}

.switch-map-icon {
  width: 120px;
  color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 3px;
}

.switch-list-icon {
  width: 119px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5.5px 4px;
  color: #ffffff;
  cursor: default;
}

.switch-list .switch-list-icon {
  border-radius: 4px 0 0 4px;
  background-color: #f28123;
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15),
    0px 0px 5px rgba(0, 0, 0, 0.35);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 0px 0px 5px rgba(0, 0, 0, 0.35);
}

.switch-map .switch-map-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #f28123;
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15),
    0px 0px 5px rgba(0, 0, 0, 0.35);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 0px 0px 5px rgba(0, 0, 0, 0.35);
}

.switch-btn-text {
  font-size: 16px;
  line-height: 145%;
  margin: 5px 2px 2px 2px;
}

.switch-btn-text2 {
  font-size: 16px;
  line-height: 145%;
  margin: 8px 2px 2px 2px;
}

.filters {
  /* Явное указание шрифта - нужно */
  font-family: "AvanteInt"; 
  font-size: 16px;
  width: 270px;
  height: auto;
  border-radius: 4px;
  background-color: #ffffff;
  z-index: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  padding: 10px;
  /* убираем стандартную стрелку браузера */
  appearance: none;
  /* для Safari */
  -webkit-appearance: none;
  /* для Firefox */
  -moz-appearance: none;
  /* изображение стрелки*/
  background-image: url("/img/faq-toggle.png");
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 10px;
  -webkit-filter: drop-shadow(2px 2px 4px rgba(31, 39, 27, 0.15)) drop-shadow(0px 0px 5px rgba(31, 39, 27, 0.35));
  filter: drop-shadow(2px 2px 4px rgba(31, 39, 27, 0.15)) drop-shadow(0px 0px 5px rgba(31, 39, 27, 0.35));
  /* Уменьшение ширины при надобности */
  flex-shrink: 1;
  min-width: 200px;
  max-width: 270px;
  /* Запрещаем перенос текста на новую строку */
  white-space: nowrap;
  /* Обрезаем все, что выходит за границы */
  overflow: hidden;
  /* Добавляем многоточие, если текст не помещается */
  text-overflow: ellipsis;
}

/* Стили для select в раскрытом состоянии */
.filters:focus {
  /* убираем стандартное выделение */
  outline: none;
}

/* Стили для вариантов в фильтре */
.filters option {
  font-size: 16px;
  background-color: #ffffff;
  color: #000000;
  font-size: 18px;
}

/* Относится к хлебным крошкам */

.main-head-right {
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

.main-head-right>*+* {
  margin-left: 8px;
}

.main-head-right button {
  margin-left: 10px;
}

.breadcrumbs {
  display: flex;
  gap: 12px;
  font-size: 18px;
  align-items: center;
}

/* Разделители */
.breadcrumb-separator {
  font-size: 15px;
  color: #F28123;
  line-height: 0;
}

/* Ссылки */
.breadcrumb-item {
  line-height: 0;
  text-decoration: none;
  transition: color;
}

.breadcrumb-item:hover {
  color: #F28123;
}

/* Иконка домика */
.breadcrumb-icon {
  vertical-align: middle;
  transition: content;
}

.breadcrumb-icon:hover {
  content: url("/img/breadcrumbs/home-icon-active.svg");
}

/* Стили кнопки расшарки */
.ya-share2__icon_more {
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.7833 12.687L16.1517 20.057C16.3717 20.662 16.5 21.322 16.5 22.0003C16.5 22.6787 16.3717 23.3387 16.1517 23.9437L28.7833 31.3137C29.5058 30.4445 30.4787 29.8194 31.5694 29.5236C32.6601 29.2277 33.8156 29.2755 34.8782 29.6604C35.9407 30.0454 36.8587 30.7487 37.5069 31.6745C38.1551 32.6003 38.5019 33.7035 38.5 34.8337C38.5 37.877 36.0433 40.3337 33 40.3337C29.9567 40.3337 27.5 37.877 27.5 34.8337C27.5 34.1553 27.6283 33.4953 27.8483 32.8903L15.2167 25.5203C14.4943 26.3894 13.5213 27.0146 12.4306 27.3104C11.3399 27.6063 10.1844 27.5585 9.12185 27.1736C8.05927 26.7886 7.1413 26.0853 6.49313 25.1595C5.84496 24.2337 5.49816 23.1305 5.50001 22.0003C5.49816 20.8702 5.84496 19.767 6.49313 18.8412C7.1413 17.9154 8.05927 17.212 9.12185 16.8271C10.1844 16.4422 11.3399 16.3944 12.4306 16.6902C13.5213 16.9861 14.4943 17.6112 15.2167 18.4803L27.8483 11.1103C27.6283 10.5053 27.5 9.84533 27.5 9.16699C27.5 6.12366 29.9567 3.66699 33 3.66699C36.0433 3.66699 38.5 6.12366 38.5 9.16699C38.5019 10.2971 38.1551 11.4004 37.5069 12.3262C36.8587 13.252 35.9407 13.9553 34.8782 14.3402C33.8156 14.7252 32.6601 14.773 31.5694 14.4771C30.4787 14.1812 29.5058 13.5561 28.7833 12.687ZM33 38.5003C35.035 38.5003 36.6667 36.8687 36.6667 34.8337C36.6667 32.7987 35.035 31.167 33 31.167C30.965 31.167 29.3333 32.817 29.3333 34.8337C29.3333 36.8503 30.9833 38.5003 33 38.5003ZM11 25.667C13.035 25.667 14.6667 24.0353 14.6667 22.0003C14.6667 19.9653 13.035 18.3337 11 18.3337C8.96501 18.3337 7.33334 19.9837 7.33334 22.0003C7.33334 24.017 8.96501 25.667 11 25.667ZM33 12.8337C35.035 12.8337 36.6667 11.202 36.6667 9.16699C36.6667 7.13199 35.035 5.50033 33 5.50033C30.965 5.50033 29.3333 7.15033 29.3333 9.16699C29.3333 11.1837 30.9833 12.8337 33 12.8337Z' fill='%231F271B'/%3E%3C/svg%3E") !important;
  background-size: 40px 40px !important;
  height: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ya-share2__icon_more:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.7833 12.687L16.1517 20.057C16.3717 20.662 16.5 21.322 16.5 22.0003C16.5 22.6787 16.3717 23.3387 16.1517 23.9437L28.7833 31.3137C29.5058 30.4445 30.4787 29.8194 31.5694 29.5236C32.6601 29.2277 33.8156 29.2755 34.8782 29.6604C35.9407 30.0454 36.8587 30.7487 37.5069 31.6745C38.1551 32.6003 38.5019 33.7035 38.5 34.8337C38.5 37.877 36.0433 40.3337 33 40.3337C29.9567 40.3337 27.5 37.877 27.5 34.8337C27.5 34.1553 27.6283 33.4953 27.8483 32.8903L15.2167 25.5203C14.4943 26.3894 13.5213 27.0146 12.4306 27.3104C11.3399 27.6063 10.1844 27.5585 9.12185 27.1736C8.05927 26.7886 7.1413 26.0853 6.49313 25.1595C5.84496 24.2337 5.49816 23.1305 5.50001 22.0003C5.49816 20.8702 5.84496 19.767 6.49313 18.8412C7.1413 17.9154 8.05927 17.212 9.12185 16.8271C10.1844 16.4422 11.3399 16.3944 12.4306 16.6902C13.5213 16.9861 14.4943 17.6112 15.2167 18.4803L27.8483 11.1103C27.6283 10.5053 27.5 9.84533 27.5 9.16699C27.5 6.12366 29.9567 3.66699 33 3.66699C36.0433 3.66699 38.5 6.12366 38.5 9.16699C38.5019 10.2971 38.1551 11.4004 37.5069 12.3262C36.8587 13.252 35.9407 13.9553 34.8782 14.3402C33.8156 14.7252 32.6601 14.773 31.5694 14.4771C30.4787 14.1812 29.5058 13.5561 28.7833 12.687ZM33 38.5003C35.035 38.5003 36.6667 36.8687 36.6667 34.8337C36.6667 32.7987 35.035 31.167 33 31.167C30.965 31.167 29.3333 32.817 29.3333 34.8337C29.3333 36.8503 30.9833 38.5003 33 38.5003ZM11 25.667C13.035 25.667 14.6667 24.0353 14.6667 22.0003C14.6667 19.9653 13.035 18.3337 11 18.3337C8.96501 18.3337 7.33334 19.9837 7.33334 22.0003C7.33334 24.017 8.96501 25.667 11 25.667ZM33 12.8337C35.035 12.8337 36.6667 11.202 36.6667 9.16699C36.6667 7.13199 35.035 5.50033 33 5.50033C30.965 5.50033 29.3333 7.15033 29.3333 9.16699C29.3333 11.1837 30.9833 12.8337 33 12.8337Z' fill='%23F28123'/%3E%3C/svg%3E") !important;
}

/* Убираем лишние отступы */
.ya-share2__link.ya-share2__link_more.ya-share2__link_more-button-type_short {
  padding: 0 !important;
  margin: 0 !important;
}

/* Убираем фон кнопки */
.ya-share2__container_size_m .ya-share2__item_more.ya-share2__item_has-pretty-view .ya-share2__link_more.ya-share2__link_more-button-type_short {
  background: none !important;
}

/*  */

.catalog-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
  grid-template-columns: repeat(4, 1fr);
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  row-gap: 30px;
  /* Отступ до рекламы */
  margin-bottom: var(--largePC-margin);
}

.catalog-item {
  max-width: 282px;
  /* height: 482px; */
  /* background: #f7fbfb; */
  background: #ffffff;
  -webkit-box-shadow: 0px 7px 12px rgba(31, 39, 27, 0.12),
    0px 16px 18px rgba(31, 39, 27, 0.1), 0px 18px 18px rgba(31, 39, 27, 0.08);
  box-shadow: 0px 7px 12px rgba(31, 39, 27, 0.12),
    0px 16px 18px rgba(31, 39, 27, 0.1), 0px 18px 18px rgba(31, 39, 27, 0.08);
  border-radius: 8px;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
}

.catalog-item-orange {
  background: #f28123;
}

.catalog-item-white {
  background: #ffffff;
}

.trail-img {
  -webkit-filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.35));
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.35));
  border-radius: 8px;
}

.trail-info {
  padding: 20px 24px 21px;
  font-weight: 300;
}

.trail-title-link h2 {
  font-size: 22px;
  line-height: 27px;
  height: 54px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: 10px;
  text-decoration: none;
}

.trail-location-black>p {
  background: url(/img/location-black.svg) no-repeat;
  background-position: 0% 0%;
  padding-left: 25px;
  font-size: 16px;
  line-height: 19px;
  height: 38px;
  overflow: hidden;
}

.trail-location-white>p {
  background: url(/img/location-white.svg) no-repeat;
  background-position: 0% 0%;
  padding-left: 25px;
  font-size: 16px;
  line-height: 19px;
  height: 38px;
  overflow: hidden;
}

.trail-spec img {
  margin-bottom: 3px;
}

/* Реклама */
.ads {
  margin-bottom: var(--largePC-margin);
}

/* .trail-spec > a {
  text-align: center;
} */


@media (max-width: 1250px) {

  /* То, что одной ширины */
  .catalog {
    max-width: var(--tabletContent-width);
  }

  .title {
    margin-bottom: var(--bigTablet-margin);
    margin-top: var(--bigTablet-margin);
    font-size: 28px;
    max-width: var(--tabletContent-width);
  }

  .controllers {
    margin-bottom: var(--smallTablet-margin);
    max-width: var(--tabletContent-width);
  }

  .main-head {
    max-width: var(--tabletContent-width);
  }

  /*  */

  .size-card-elem-h2 {
    height: 58px;
    margin-bottom: 12px;
    width: 100%;
  }

  .size-card-elem-p {
    /* width: 179px; */
    height: 43px;
  }

  .trail-location-black>p {
    font-size: 14px;
  }

  .trail-location-white>p {
    font-size: 14px;
  }

  .trail-spec {
    /* padding-right: 12px; */
    margin-top: var(--smallTablet-margin);
    height: 56px;
  }

  .catalog-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* Отступ до рекламы */
    width: fit-content;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .catalog-item {
    width: 229px;
    height: 380px;
  }

  .trail-img {
    width: 229px;
    height: 165px;
  }

  .trail-info {
    padding-top: 10px;
  }

  .trail-title-link h2 {
    font-size: 20px;
  }

}

@media (max-width: 1024px) {

  /* То, что одной ширины */
  .catalog,
  .title,
  .controllers,
  .main-head {
    max-width: var(--tabletMiniContent);
  }

  /*  */

  .breadcrumb-region {
    display: flex;
    align-items: center;
  }

  .breadcrumb-region::before {
    content: url("/img/breadcrumbs/back-btn.svg");
    margin-right: 12px;    
  }

  .breadcrumb-region:hover::before {
    content: url("/img/breadcrumbs/back-btn-active.svg");
  }

  .breadcrumb-region:hover {
    color: #F28123;
  }

  .catalog-items {
    /* Адаптивные колонки */
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--largeTablet-margin);
  }

  /* Реклама */
  .ads {
    margin-bottom: var(--largeTablet-margin);
  }
}

@media (max-width: 775px) {

  /* То, что одной ширины */

  .catalog,
  .title,
  .controllers,
  .main-head {
    max-width: var(--tabletMicroContent);
  }

  .catalog-items {
    /* Адаптивные колонки */
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: var(--largeMobile-margin);
  }
}

@media (max-width: 525px) {

  /* То, что одной ширины */

  .catalog,
  .title,
  .controllers,
  .main-head {
    max-width: var(--mobileContent);
  }

  /* Без отступа в хлебных крошках на странице лендинга мест */
  .breadcrumbs.no-gap {
    gap: 0;
  }

  /* Мини-кнопки переключения "Список - карта" */
  .switch-btn-text {
    display: none;
  }

  .switch-btn-text2 {
    display: none;
  }

  .switch-list-icon {
    width: auto;
  }

  .switch-map-icon {
    width: auto;
  }

  .switch-btn {
    width: auto;
  }

  /*  */
  .size-card-elem-h2 {
    height: 58px;
    margin-bottom: var(--smallTablet-margin);
  }

  .size-card-elem-p {
    height: 48px;
  }

  .trail-location-black>p {
    font-size: 16px;
  }

  .trail-location-white>p {
    font-size: 16px;
  }

  .trail-spec {
    margin-top: 40px;
    height: 56px;
  }

  .trail-info {
    padding: 30px 21px 33px;
  }

  .upper_cotalog {
    top: 100px;
  }

  /* Хлебные крошки */
  /* Кнопка расшарки */
  .ya-share2__icon_more {
    background-size: 32px 32px !important;
    height: 32px !important;
    width: 32px !important;
  }

  /* .breadcrumb-separator, .breadcrumb-item.home-link {
    display: none;
  }

  .breadcrumbs {
    gap: 0;
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
  }

  .breadcrumb-item::before {
    content: url("/img/breadcrumbs/back-btn.svg");
    margin-right: 12px;    
  }

  .breadcrumb-item:hover::before {
    content: url("/img/breadcrumbs/back-btn-active.svg");   
  }

  .breadcrumb-item:hover {
    color: #F28123;
  } */

  /*  */

  .catalog-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 100%;
    padding: 0;
    row-gap: 20px;
  }

  .catalog-item {
    max-width: 320px;
    width: 320px;
    height: 530px;
  }

  .trail-img {
    width: 320px;
    height: 247px;
  }

  .main-head {
    margin-left: auto;
    margin-right: auto;
  }

  .title {
    margin: var(--bigTablet-margin) auto;
    font-size: 24px;
    gap: 12px;
  }

  .controllers {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .title::after {
    content: url(/img/small-title-right-line.svg);
  }

  .title::before {
    content: url(/img/small-title-left-line.svg);
  }

  /* Реклама */
  .ads {
    margin-bottom: var(--largeMobile-margin);
  }

}