* {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

:root {
  /* Ширина контента */
  /* ПК */
  --pcContent-width: 1218px;

  /* Адаптивный контент на экране меньше 1266px */
  --tabletContent-width: calc(100vw - 60px);

  /* Кастыль #1 (обновление имеющейся ширины везде на адаптивную) */
  --tabletMiniContent: var(--tabletContent-width);

  /* Кастыль #2 (обновление имеющейся ширины везде на адаптивную) */
  --tabletMicroContent: var(--tabletContent-width);

  /* Мобилка (525) */
  --mobileContent: calc(100vw - 40px);

  /* Самые большие отступы */
  --largePC-margin: 112px;
  --largeTablet-margin: 96px;
  --largeMobile-margin: 72px;

  /* Большие отступы */
  --bigPC-margin: 64px;
  --bigTablet-margin: 48px;
  --bigMobile-margin: 32px;

  /* Маленькие отступы */
  --smallPC-margin: 24px;
  --smallTablet-margin: 16px;
  --smallMobile-margin: 16px;

  /* Так записывается */
  /* max-width: var(--pcContent-width); */
  /* max-width: var(--tabletContent-width); */
  /* max-width: var(--mobileContent); */
}

.main-header {
  position: fixed;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  width: 100%;
  height: 90px;
  z-index: 300;
  background-color: #f3f6ed;
  transition: background-color 0.3s ease;
}

/* Стиль для прозрачного фона - тёмный хедер */
.main-header.black {
  background-color: #1F271B;  
}

.main-header.black.transparent-bg {
  /* background-color: #1F271B; */
  background-color: rgb(31, 39, 27, 0.55);
}

/* Стиль для прозрачного фона - светлый хедер */
.main-header.transparent-bg {
  background-color: rgba(243, 246, 237, 0.65);
}

.container-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pcContent-width);
  margin: 0 auto;
}

.logo-header {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: fit-content;
  height: 38px;
}

.href-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.logo-picture {
  width: 40px;
  height: 44px;
}

.black .logo-picture {
  content: url("/img/Logo-utp.svg?v=1.0");
}

.logo-text {
  padding-left: 10px;
  padding-top: 1px;
  color: #1f271b;
  width: min-content;
  font-size: 16px;
  line-height: 19px;
  text-align: start;
  font-weight: 300;
}

.black .logo-text {
  color: #F7FBFB;
}

.container-navigation-text {
  padding-left: 68px;
  height: 20px;
}

.container-navigation-text:first-child {
  padding-left: 0;
}

.container-navigation-text:nth-child(3) {
  padding-left: 64px;
  text-align: center;
}

.header-text-first {
  color: #1f271b;
  text-decoration: none;
  font-size: 18px;
  line-height: 22px;
}

.header-text-center {
  color: #1f271b;
  text-decoration: none;
  font-size: 18px;
  line-height: 22px;
}

.header-text-last {
  color: #1f271b;
  text-decoration: none;
  font-size: 18px;
  line-height: 22px;
}

.black .header-text-first, .black .header-text-center, .black .header-text-last {
  color: #F7FBFB;
}

.center-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.menu-navigation {
  width: 100%;
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.FAQ-animation {
  /* width: 32px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.popular-animation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cotalog-animation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.romb1-1 {
  margin: 0;
  width: 20px;
  height: 20px;
  -webkit-animation: romb1-1 1s alternate;
  animation: romb1-1 1s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes romb1-1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(29px);
    transform: translateX(29px);
  }
}

@keyframes romb1-1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(29px);
    transform: translateX(29px);
  }
}

.line1 {
  position: absolute;
  margin: 0;
  width: 1px;
  height: 3px;
  background-color: #f28123;
  -webkit-animation: line1 linear 0.57s alternate;
  animation: line1 linear 0.57s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes line1 {
  0% {
    width: 0px;
  }

  100% {
    width: 80px;
  }
}

@keyframes line1 {
  0% {
    width: 0px;
  }

  100% {
    width: 80px;
  }
}

.romb1-2 {
  margin: 0;
  width: 20px;
  height: 20px;
  -webkit-animation: romb1-2 1s alternate;
  animation: romb1-2 1s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes romb1-2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-29px);
    transform: translateX(-29px);
  }
}

@keyframes romb1-2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-29px);
    transform: translateX(-29px);
  }
}

.romb2-1 {
  margin: 0;
  width: 20px;
  height: 20px;
  -webkit-animation: romb2-1 1s alternate;
  animation: romb2-1 1s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes romb2-1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
  }
}

@keyframes romb2-1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
  }
}

.line2 {
  position: absolute;
  margin: 0;
  width: 1px;
  height: 3px;
  background-color: #f28123;
  -webkit-animation: line2 linear 0.57s alternate;
  animation: line2 linear 0.57s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes line2 {
  0% {
    width: 0px;
  }

  100% {
    width: 190px;
  }
}

@keyframes line2 {
  0% {
    width: 0px;
  }

  100% {
    width: 190px;
  }
}

.romb2-2 {
  margin: 0;
  width: 20px;
  height: 20px;
  -webkit-animation: romb2-2 1s alternate;
  animation: romb2-2 1s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes romb2-2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-90px);
    transform: translateX(-90px);
  }
}

@keyframes romb2-2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-90px);
    transform: translateX(-90px);
  }
}

.romb3-1 {
  margin: 0;
  width: 20px;
  height: 20px;
  -webkit-animation: romb3-1 1s alternate;
  animation: romb3-1 1s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes romb3-1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
  }
}

@keyframes romb3-1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
  }
}

.line3 {
  position: absolute;
  width: 1px;
  height: 3px;
  background-color: #f28123;
  -webkit-animation: line3 linear 0.57s alternate;
  animation: line3 linear 0.57s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes line3 {
  0% {
    width: 0px;
  }

  100% {
    width: 150px;
  }
}

@keyframes line3 {
  0% {
    width: 0px;
  }

  100% {
    width: 150px;
  }
}

.romb3-2 {
  margin: 0;
  width: 20px;
  height: 20px;
  -webkit-animation: romb3-2 1s alternate;
  animation: romb3-2 1s alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes romb3-2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-70px);
    transform: translateX(-70px);
  }
}

@keyframes romb3-2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-70px);
    transform: translateX(-70px);
  }
}

.icon-navigation {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* justify-content: flex-end; */
}

.icon-header {
  width: 40px;
  height: 40px;
}

/* #search {
    margin-right: auto;
  } */

/* Блок с поиском */
#cont-search {
  /* border: #1f271b 2px solid; */
  position: absolute;
  right: 0;
  top: 0;
  /* display: flex; */
  display: none;

}

/* .icon-header:nth-child(2) {
    padding-left: 16px;
    padding-right: 17.15px;
  } */
.container-navigation-icon:nth-child(2) {
  padding-top: 1px;
  margin-left: 5px;
}

.container-location {
  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;
}

/* Иконки на тёмном хедере */

/* Поиск */
.black #search {
  content: url("/img/search-white.svg?v=1.0");
}

/* Линия поиска */
.black .icon-searcharea-cont {
  border-bottom: 1px solid #f3f7ed;
}

/* Иконка поска и крестик на строке */
.black .color-search-temp {
  stroke: #f3f7ed;
}

/* Поле поиска */
.black .searcharea {
  /* Каретка (мигающая палка) */
  caret-color: #f3f7ed;
  /* Цвет вводимого текста */
  color: #f3f7ed;
}

/* Карта */
.black .container-location .icon-header {
  content: url("/img/map-white.svg?v=1.0");
}

/* Каталог */
.black .cotalog-color {
  fill: #f3f7ed;
}



/* Изменение цвета (иконок) по наведению мыши */
/* Карта */
.container-location .icon-header:hover {
  content: url('/img/map-orange.svg?v=1.0');
  /* Замените на путь к вашей оранжевой иконке */
}

/* Поиск */
#search:hover {
  content: url('/img/search-orange.svg?v=1.0');
  /* Замените на путь к вашей оранжевой иконке */
}

.otstup-icon-search {
  width: 40px;
}

.icon-searcharea-cont {
  border-bottom: 1px solid #1F271B;
  display: flex;
}

.searcharea {
  font-family: "AvanteInt";
  font-size: 18px;
  /* line-height: 26px; */
  position: static;
  width: calc(var(--pcContent-width) * 0.6);
  right: 280px;
  border: none;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* border-bottom: 1px solid rgb(0, 0, 0); */
  color: #1F271B;
  background: transparent;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-top: 14px;
  /* margin-top: 14px; */
  z-index: 200;
}


.searcharea::-webkit-input-placeholder {
  color: rgb(167, 167, 167);
}

.searcharea::-moz-placeholder {
  color: rgb(167, 167, 167);
}

.searcharea:-ms-input-placeholder {
  color: rgb(167, 167, 167);
}

.searcharea::-ms-input-placeholder {
  color: rgb(167, 167, 167);
}

.searcharea::placeholder {
  color: rgb(167, 167, 167);
}

/* Иконка поиска в поиске */
.search-temp {
  position: static;
  /* top: 27px; */
  /* right: 558px; */
  z-index: 201;
}

.search {
  margin-top: 11px;
}

/* Иконка крестика в поиске */
.search-close {
  position: static;
  /* top: 29px; */
  right: 240px;
  z-index: 201;
  cursor: pointer;
}

/* Выпадающий список поиска */
.elastic {
  position: fixed;
  top: 90px;
  right: 205px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: left;
  padding-top: 12px;
}

.elastic a.hide {
  display: none;
}

.searchmark {
  color: #f28123;
  font-weight: 700;
}

.elemsearch {
  background-color: #f3f6ed;
}

.elemsearch:hover {
  -webkit-transition: 150ms;
  -o-transition: 150ms;
  transition: 150ms;
  -webkit-transform: scale(1.07);
  -ms-transform: scale(1.07);
  transform: scale(1.07);
}

/* Пункт выпадающего списка поиска */
.Searchlist {
  /* width: 100%; */
  color: rgb(0, 0, 0);
  font-size: 18px;
  line-height: 26px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f3f6ed;
  padding-bottom: 5px;
  padding-left: 48px;
}

.black .Searchlist {
  color: #f3f6ed;
}

.elasticBig {
  position: fixed;
  top: 90px;
  right: 205px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 1000;
  width: 392px;
  background: #f3f6ed;
  height: 152px;
  overflow: scroll;
  overflow-x: hidden;
  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);
}

.black .elasticBig {
  background: rgb(31,39,27);
}

.elasticBig::-webkit-scrollbar {
  width: 3px;
  /* ширина scrollbar */
}

.elasticBig::-webkit-scrollbar-track {
  background: transparent;
  /* цвет дорожки */
}

.elasticBig::-webkit-scrollbar-thumb {
  background-color: #f28123;
  /* цвет плашки */
  border-radius: 20px;
  /* закругления плашки */
  border: none;
  /* padding вокруг плашки */
}

.VoidSearch {
  /* max-width: 392px; */
  color: rgb(0, 0, 0);
  font-size: 18px;
  line-height: 26px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  text-align: center;
  margin-top: 45px;
}

.black .VoidSearch {
  color: #f3f6ed
}

/* .line-location {
    position: absolute;
    top: 66px;
    width: 22px;
    height: 1px;
    background-color: #1f271b;
  } */

#search-cont {
  position: relative;
}


.container-navigation-icon {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.container-navigation-icon:last-child {
  display: none;
}

/* Сброс стиля на ссылке иконки карты в хедере */
a.header-icon.keychainify-checked {
  line-height: 0;
}

/* Планшет горизонтальный */
@media (max-width: 1266px) {
  .container-header {
    max-width: var(--tabletContent-width);
  }

  .VoidSearch {
    margin-left: auto;
    margin-right: auto;
    /* max-width: 230px; */
  }

  .elastic {
    right: 112px;
  }

  /* .Searchlist {
    width: 260px;
    padding-left: 23px;
  } */

  .elasticBig {
    position: fixed;
    right: 112px;
    height: 152px;
    width: 260px;
  }

  .container-navigation-text {
    padding-left: 52px;
  }

  .container-navigation-text:first-child {
    padding-left: 0;
  }

  .container-navigation-text:last-child {
    padding-left: 48px;
  }

  .searcharea {
    width: calc(var(--tabletContent-width) * 0.6);
  }

  .search-temp {
    right: 285px;
  }

  .search-close {
    right: 70px;
  }

  .logo-header {
    margin: 0;
  }

  .icon-navigation {
    margin: 0;
  }
}

/* Планшет вертикальный */
@media (max-width: 1024px) {
  .container-header {
    max-width: var(--tabletMiniContent);
  }

}

/* Микро-планшет */
@media (max-width: 775px) {
  .container-header {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--tabletMicroContent);
    position: relative;
  }

  #cont-search {
    width: 100%;
    top: 25%;
  }

  #search-cont {
    position: static;
  }

  .searcharea {
    width: auto;
    flex: 1;
  }

  .container-navigation-icon:nth-child(2) {
    padding: 0;
  }

  .center-navigation {
    display: none;
  }

  .container-navigation-icon:last-child {
    display: block;
  }

  .container-navigation-icon:nth-child(2) {
    border: none;
    margin: 0;
  }

  .icon-navigation {
    margin: 0;
  }

  .icon-searcharea-cont {
    flex: 1;
  }

}

/* Мобила */
@media (max-width: 525px) {

  .container-header {
    max-width: var(--mobileContent);
  }

  /* .VoidSearch {
    margin: 0;
    max-width: 392px;
  } */

  .elasticBig {
    right: 0px;
    height: 346px;
    max-width: 100vw;
    width: 100vw;
  }

  .elastic {
    right: 0px;
  }

  /* .Searchlist {
    width: 100vw;
    padding-left: 48px;
  } */

  .search {
    margin-top: 0px;
  }

  .search-temp {
    left: 40px;
  }

  .search-close {
    flex-shrink: 0;
  }

  .logo-picture:hover {
    -webkit-animation: none;
    animation: none;
  }

}