@charset "UTF-8";
/*  Стиль для сайта Лен ОК */
/* Глобальная палитра цветов */
/* Шрифты */
/* 1rem = 10px */
:root {
  font-size: 10px;
  font-family: "Mulish", sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* --<< General styles >>-- */
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  max-width: 100%;
}

.global-wrap {
  display: flex;
  flex-direction: column;
  width: inherit;
  max-width: inherit;
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2.8rem;
  font-weight: bold;
  font-family: "Montserrat Alternates", sans-serif;
  color: #5067E3;
}

h2 {
  font-size: 2.8rem;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.8rem;
}

h5 {
  font-size: 1.6rem;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #313131;
}

a {
  text-decoration: none;
}

.flex-dammy {
  flex-basis: 100%;
}

.hidden {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

.image-js {
  cursor: pointer;
}

button {
  outline: none;
  border: none;
}

/* Input */
input {
  outline: none;
  border: none;
  padding: 15px 20px;
  font-size: 1.6rem;
  border-radius: 7px;
  color: #313131;
  font-family: "Mulish", sans-serif;
  transition: all 0.1s linear 0s;
}
input:focus {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}

/* Textarea */
textarea {
  outline: none;
  border: none;
  padding: 15px;
  font-size: 1.6rem;
  border-radius: 7px;
  color: #313131;
  font-family: "Mulish", sans-serif;
  height: 100px;
  overflow: auto;
  resize: none;
  transition: all 0.1s linear 0s;
}
textarea:focus {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=text]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

select {
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 7px;
  padding: 15px 20px;
  font-size: 1.6rem;
  font-family: "Mulish", sans-serif;
  color: #313131;
}
select:hover, select :focus {
  background-color: #ffffff;
  color: #313131;
  font-size: 1.6rem;
  transition: all 0.1s linear 0s;
}

select[disabled] {
  border-color: rgba(255, 255, 255, 0);
  border-bottom: 1px solid #979797;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.select_disabled select {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom: 1px solid #313131;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Select2 */
.select2, .select2-selection__rendered {
  width: 100% !important;
}

.select2-search--dropdown .select2-search__field {
  padding: 10px !important;
}

.select2-search__field {
  font-size: 1.8rem;
  font-family: "Mulish", sans-serif;
  padding: 10px;
  margin: 0;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  background: #ffffff;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.select2-search__field:hover, .select2-search__field:focus {
  background-color: #ffffff;
  color: #313131;
  border-color: #5067E3 !important;
  transition: all 0.1s linear 0s;
}

.select2-results__option {
  color: #313131;
  border-bottom: 1px solid #e0e0e0;
  font-size: 1.6rem;
}

.select2-results__option--highlighted {
  color: #ffffff;
}
.select2-results__option--highlighted .option-pvz span {
  color: #ffffff;
}

.select2-container--default .select2-selection--single {
  border-radius: 15px !important;
}

.select2-selection {
  background: none;
  border: 1px solid #e0e0e0;
  font-family: "Mulish", sans-serif;
  border-radius: 15px;
  font-size: 1.8rem;
  color: #313131 !important;
  padding: 10px 0;
  height: -moz-min-content !important;
  height: min-content !important;
}
.select2-selection:hover, .select2-selection :focus {
  background-color: #ffffff;
  color: #313131;
  transition: all 0.1s linear 0s;
}

.select2-selection__arrow {
  display: none !important;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: #5067E3 !important;
}
.select2-results__option--highlighted[aria-selected] .option-pvz span {
  color: #ffffff;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  display: none !important;
}

.select2-container .select2-selection--single {
  display: flex !important;
  align-items: center;
}

.select2-container--default .select2-selection--single {
  border-color: #e0e0e0 !important;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 400px !important;
}

/* Button */
.button-in-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.button-in-cart:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.button-in-cart {
  color: #5067E3 !important;
  border-color: #5067E3;
}
.button-in-cart:hover {
  background-color: #5067E3;
  color: #ffffff !important;
}

.button-success {
  background-color: #5067E3 !important;
  color: #ffffff !important;
}

.button-close {
  background-color: #979797 !important;
  color: #ffffff !important;
}

/* --[ Articles | Recipe | Location ]-- */
.chunk-article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border-radius: 15px;
  margin: 5px;
  color: #313131;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1254901961);
  transition: all 0.1s linear 0s;
}
.chunk-article .article-image {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 210px;
  border-radius: 10px;
}
.chunk-article .article-image img {
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  height: 210px;
  width: 100%;
}
.chunk-article .article-category-list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chunk-article .article-category-list .article-category {
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #313131;
  border: 1px solid #c5c5c5;
  background-color: #ffffff;
  border-radius: 40px;
  width: -moz-min-content;
  width: min-content;
  padding: 5px 10px;
  cursor: default;
}
.chunk-article .article-text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  min-height: 210px;
  max-height: 220px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.chunk-article .article-text .date {
  position: absolute;
  display: block;
  top: -25px;
  left: 0;
  background-color: #ffffff;
  padding: 5px 10px 5px 10px;
  z-index: 5;
}
.chunk-article .article-text .date span {
  display: flex;
  align-items: end;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  color: #313131;
  width: -moz-max-content;
  width: max-content;
  z-index: 6;
}
.chunk-article .article-text .date::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  display: block;
  background-color: #ffffff;
  width: 25px;
  height: 100%;
  border-top-right-radius: 100%;
}
.chunk-article .article-text h5 {
  color: #313131;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  height: 50px;
  overflow: visible;
}
.chunk-article .article-text p {
  color: #313131;
  font-weight: normal;
  font-size: 1.4rem;
  height: 70px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.chunk-article.len h3 {
  color: #6B80F5;
}
.chunk-article.ecopolis h3 {
  color: #B27237;
}

.chunk-recipe {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border-radius: 15px;
  margin: 5px;
  color: #313131;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1254901961);
  transition: all 0.1s linear 0s;
}
.chunk-recipe .article-image {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 210px;
  border-radius: 10px;
}
.chunk-recipe .article-image img {
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  height: 210px;
  width: 100%;
}
.chunk-recipe .article-category-list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chunk-recipe .article-category-list .article-category {
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #313131;
  border: 1px solid #c5c5c5;
  background-color: #ffffff;
  border-radius: 40px;
  width: -moz-min-content;
  width: min-content;
  padding: 5px 10px;
  cursor: default;
}
.chunk-recipe .article-text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  min-height: 210px;
  max-height: 220px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.chunk-recipe .article-text .date {
  position: absolute;
  display: block;
  top: -25px;
  left: 0;
  background-color: #ffffff;
  padding: 5px 10px 5px 10px;
  z-index: 5;
}
.chunk-recipe .article-text .date span {
  display: flex;
  align-items: end;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  color: #313131;
  width: -moz-max-content;
  width: max-content;
  z-index: 6;
}
.chunk-recipe .article-text .date::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  display: block;
  background-color: #ffffff;
  width: 25px;
  height: 100%;
  border-top-right-radius: 100%;
}
.chunk-recipe .article-text h5 {
  color: #313131;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  height: 50px;
  overflow: visible;
}
.chunk-recipe .article-text p {
  color: #313131;
  font-weight: normal;
  font-size: 1.4rem;
  height: 70px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}

/* --[ Product ]-- */
/* --[ Article ]-- */
/* --[ Recipe ]-- */
/* --[ Review / Comment ]-- */
/* --[ Response ]-- */
/* Slider Arrows */
.slider-prev, .slider-next {
  top: calc(50% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all 0.2s linear 0s;
  z-index: 20;
  color: #ffffff;
  border-radius: 50%;
}
.slider-prev.white, .slider-next.white {
  background-color: #ffffff;
  color: #979797;
  border: 1px solid #cdcdcc;
  width: 45px;
  height: 45px;
  font-size: 2.3rem;
}
.slider-prev.blue, .slider-next.blue {
  background-color: #9cafff;
  box-shadow: 0px 0px 20px 0px rgba(135, 153, 232, 0.65);
}
.slider-prev.brown, .slider-next.brown {
  background-color: #ac8a72;
  box-shadow: 0px 0px 20px 0px rgba(195, 165, 143, 0.65);
}
.slider-prev.green, .slider-next.green {
  background-color: #c0ca33;
  box-shadow: 0px 0px 20px 0px rgba(199, 221, 146, 0.65);
}

.slider-prev:hover.white, .slider-next:hover.white {
  color: #313131;
}
.slider-prev:hover.blue, .slider-next:hover.blue {
  background-color: #5067E3;
  box-shadow: 0px 0px 20px 0px rgba(135, 153, 232, 0.7);
}
.slider-prev:hover.brown, .slider-next:hover.brown {
  background-color: #8f684d;
  box-shadow: 0px 0px 20px 0px rgba(195, 165, 143, 0.7);
}
.slider-prev:hover.green, .slider-next:hover.green {
  background-color: #B2BF11;
  box-shadow: 0px 0px 20px 0px rgba(199, 221, 146, 0.65);
}
.slider-prev:hover, .slider-next:hover {
  transition: all 0.2s linear 0s;
}

.slider-prev {
  left: -45px;
}

.slider-next {
  right: -45px;
}

/* Slider Arrows Main */
.slider-main-prev, .slider-main-next {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all 0.2s linear 0s;
  z-index: 20;
  bottom: 7%;
  background-color: rgb(255, 255, 255);
  font-size: 2.3rem;
  color: #979797;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  border: 1px solid #E6E6E6;
}

.slider-main-prev:hover, .slider-main-next:hover {
  background-color: #9cafff;
  color: #ffffff;
  border-color: #9cafff;
  transition: all 0.2s linear 0s;
}

.slider-main-prev {
  left: 20px;
}

.slider-main-next {
  left: calc(4% + 20px);
}

/* Slick Dots */
.slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 20px;
}
.slick-dots li {
  margin: 0 !important;
  height: 6px !important;
  width: 35px !important;
}
.slick-dots li button {
  height: inherit !important;
  width: inherit !important;
}
.slick-dots li button::before {
  content: "" !important;
  height: inherit !important;
  width: inherit !important;
  opacity: 1 !important;
  background-color: rgba(214, 212, 212, 0.678);
  border-radius: 20px;
  transition: all 0.2s linear 0s;
}

.slick-dots li button:hover::before {
  background-color: rgba(212, 212, 212, 0.863) !important;
  transition: all 0.2s linear 0s;
}

.slick-dots li.slick-active button::before {
  background-color: rgba(194, 194, 194, 0.863);
  transition: all 0.2s linear 0s;
}

/* Cart-items */
.cart {
  position: relative;
}

.cart-items {
  position: absolute;
  top: -12px;
  right: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8px;
  width: 8px;
  color: #ffffff;
  font-size: 1rem;
  font-family: "Mulish", sans-serif;
  padding: 10px;
  border-radius: 50%;
  background-color: #5067E3;
}

/* Icon-round */
.icon-round {
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  background-color: #ffffff;
  border: 2px solid #5067E3;
  border-radius: 50%;
  color: #5067E3;
  margin-right: 10px;
}
.icon-round i {
  font-size: 2rem;
}

/* Rating Stars */
.rating {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  gap: 5px;
}

.rating-line {
  position: relative;
  color: #D5E7FB;
  font-family: "LenOk";
  font-weight: normal;
}
.rating-line::before {
  content: "\e927\e927\e927\e927\e927";
  display: block;
}

.rating-active {
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  font-family: "LenOk";
  font-weight: normal;
}
.rating-active::before {
  content: "\e913\e913\e913\e913\e913";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #5067E3;
}

.rating-stars-list {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rating-star {
  flex: 0 0 20%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.rating-value {
  font-size: 1.6rem;
  line-height: 1;
  color: #313131;
  font-weight: normal;
}

.rating-mobile {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  max-width: -moz-min-content;
  max-width: min-content;
  font-size: 1.8rem;
  gap: 5px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2509803922);
}
.rating-mobile h4 {
  color: #5067E3;
}
.rating-mobile .rating-stars-list {
  align-items: center;
}
.rating-mobile .rating-line {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rating-mobile .rating-value {
  font-size: 1.8rem;
  color: #979797;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
}

/* Text-collapse */
.collapse {
  position: relative;
  overflow: hidden;
  height: 160px;
}

.collapse-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
  z-index: 1;
  transition: all 0.1s linear 0s;
}

.collapse-button {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  border: none;
  background-color: transparent;
  color: #5067E3;
  font-family: "Mulish", sans-serif;
  font-size: 1.6rem;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  z-index: 10;
  transition: all 0.1s linear 0s;
}
.collapse-button:hover {
  border-bottom: 1px dashed #5067E3;
  transition: all 0.1s linear 0s;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 5px;
  height: 35px;
  margin-top: 30px;
}
.pagination.len .pagination-page:hover {
  background-color: #EDF0FA;
  transition: all 0.1s linear 0s;
}
.pagination.len .pagination-page.current {
  color: #ffffff;
  background-color: #6B80F5;
  transition: all 0.1s linear 0s;
}
.pagination.len .pagination-nav:hover {
  color: #12154C;
  transition: all 0.1s linear 0s;
}
.pagination.ecopolis .pagination-page:hover {
  background-color: #F2F5D9;
  transition: all 0.1s linear 0s;
}
.pagination.ecopolis .pagination-page.current {
  color: #ffffff;
  background-color: #B2BF11;
  transition: all 0.1s linear 0s;
}
.pagination.ecopolis .pagination-nav:hover {
  color: #34190E;
  transition: all 0.1s linear 0s;
}
.pagination > .pagination-nav {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  color: #313131;
  margin: 0 5px;
  transition: all 0.1s linear 0s;
}
.pagination > .pagination-nav:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.pagination-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: inherit;
  font-size: 1.6rem;
  color: #313131;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 5px;
  transition: all 0.1s linear 0s;
}
.pagination-page:hover {
  background-color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.pagination-page.current {
  color: #ffffff;
  background-color: #5067E3;
  transition: all 0.1s linear 0s;
}

.dots {
  font-size: 2.2rem;
  width: -moz-min-content;
  width: min-content;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dots:hover {
  background-color: #ffffff;
}

.no-results {
  display: block;
  padding: 10px 0;
  font-size: 1.8rem;
  color: #979797;
  opacity: 0.4;
  text-align: center;
}

/* Help Text */
*[help-text] {
  position: relative;
  display: inline-block;
  transition: all 0.09s ease-out;
}
*[help-text]:hover:before {
  content: attr(help-text);
  position: absolute;
  bottom: -50px;
  color: #313131;
  padding: 10px;
  background-color: #ffffff;
  width: -moz-max-content;
  width: max-content;
  border-radius: 3px;
  font-size: 1.6rem;
  z-index: 20;
  opacity: 1;
  transition: all 0.09s ease-out;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
}

*[help-text-pos=center]::before {
  left: 50%;
  transform: translateX(-50%);
}

*[help-text-pos=right]::before {
  right: 0;
}

*[help-text-pos=left]::before {
  left: 0;
}

.agreement {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #313131;
}
.agreement a {
  color: #313131;
  transition: all 0.1s linear 0s;
}
.agreement a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.agreement .agreement-text {
  font-size: 1.4rem;
}
.agreement .agreement-check {
  display: block;
  padding: 10px;
  border-radius: 5px;
  max-width: 12px;
  max-height: 12px;
  border: 2px solid #5067E3;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.agreement .agreement-check i {
  font-size: 1.4rem;
}
.agreement .agreement-check:hover {
  transition: all 0.1s linear 0s;
}
.agreement .agreement-active {
  background-color: #5067E3;
  color: #ffffff;
}
.agreement input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.button-agree.disabled, .button-agree-callback.disabled {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  cursor: auto !important;
  background-color: #979797 !important;
  border-color: #979797 !important;
  color: #313131 !important;
  pointer-events: none;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #313131;
  margin-top: 10px;
  position: relative;
}
.check-field .check-text {
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.check-field .check-text:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.check-field .check {
  display: block;
  padding: 10px;
  border-radius: 5px;
  max-width: 12px;
  max-height: 12px;
  border: 2px solid #AFAFAF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.check-field .check i {
  font-size: 1.4rem;
}
.check-field .check:hover {
  transition: all 0.1s linear 0s;
}
.check-field input[type=checkbox] {
  width: -moz-min-content;
  width: min-content;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.check-field input[type=checkbox]:checked + .check {
  background-color: #5067E3;
  color: #ffffff;
  border-color: #5067E3;
}

/* --<< Header >>-- */
header {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2509803922);
  position: fixed;
  width: 100%;
  background-color: #ffffff;
  z-index: 70;
}
header.header.len .header-top {
  background-color: #6B80F5;
}
header.header.len .header-top a:hover {
  color: #12154C;
  transition: all 0.1s linear 0s;
}
header.header.len .header-logo h1 {
  min-width: -moz-max-content;
  min-width: max-content;
  color: #6B80F5;
}
header.header.len .header-logo span {
  color: #848fbd;
}
header.header.len .header-menu-list > li a {
  color: #12154C;
}
header.header.len .header-menu-list > li a:hover {
  color: #6B80F5;
  transition: all 0.1s linear 0s;
}
header.header.len .header-menu-list i {
  color: #606882;
}
header.header.len .header-menu-list i:hover {
  color: #6B80F5;
  transition: all 0.1s linear 0s;
}
header.header.len .header-menu-list li.active-menu {
  color: #5067E3 !important;
}
header.header.len .header-menu-list li.active-menu > a {
  color: #5067E3 !important;
}
header.header.len .header-menu-list li.active-menu > a i {
  color: #5067E3 !important;
}
header.header.len .header-menu-list .submenu li a {
  color: #12154C;
  transition: all 0.1s linear 0s;
}
header.header.len .header-menu-list .submenu li a:hover {
  color: #6B80F5;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-top {
  background-color: #B27237;
}
header.header.ecopolis .header-top a:hover {
  color: #34190E;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-logo h1 {
  min-width: -moz-max-content;
  min-width: max-content;
  color: #34190E;
}
header.header.ecopolis .header-logo span {
  color: #A58467;
}
header.header.ecopolis .header-menu-list > li a {
  color: #34190E;
}
header.header.ecopolis .header-menu-list > li a:hover {
  color: #B27237;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-menu-list i {
  color: #A7907B;
}
header.header.ecopolis .header-menu-list i:hover {
  color: #B27237;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-menu-list li.active-menu {
  color: #B27237 !important;
}
header.header.ecopolis .header-menu-list li.active-menu > a {
  color: #B27237 !important;
}
header.header.ecopolis .header-menu-list li.active-menu i {
  color: #B27237 !important;
}
header.header.ecopolis .header-menu-list .submenu li a {
  color: #34190E;
  transition: all 0.1s linear 0s;
}
header.header.ecopolis .header-menu-list .submenu li a:hover {
  color: #B27237;
  transition: all 0.1s linear 0s;
}

.header-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding: 10px 50px;
  color: #ffffff;
  background-color: #5067E3;
  font-size: 1.4rem;
  cursor: default;
}
.header-top > li {
  min-width: -moz-max-content;
  min-width: max-content;
}
.header-top > li i {
  margin-right: 10px;
  font-size: 1.4rem;
}
.header-top li.dummy {
  margin-left: auto;
}
.header-top a {
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.header-top a:hover {
  transition: all 0.1s linear 0s;
}

.header-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 50px 10px 50px;
}

.header-logo {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 25px;
  align-items: center;
  gap: 0 10px;
}
.header-logo img {
  width: 65px;
  height: 65px;
  -o-object-fit: contain;
     object-fit: contain;
  grid-column: 1;
  grid-row: 1/3;
}
.header-logo h1 {
  font-size: 3rem;
  min-width: -moz-max-content;
  min-width: max-content;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  line-height: 0.9;
}
.header-logo span {
  font-size: 1.1rem;
  grid-column: 2;
  grid-row: 2;
}

.header-menu-list {
  margin-left: auto;
  margin-right: 10px;
}

.header-menu-list {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  transform: translateY(20px);
}
.header-menu-list > li {
  position: relative;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 0 0 30px 0;
}
.header-menu-list > li a {
  display: block;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.header-menu-list > li a:hover {
  transition: all 0.1s linear 0s;
}
.header-menu-list > li span {
  cursor: pointer;
}
.header-menu-list li > .submenu {
  display: none;
  position: absolute;
  width: 30vw;
  top: calc(100% - 10px);
  left: -20px;
  flex-direction: column;
  background-color: #ffffff;
  padding: 10px 20px 20px 20px;
  gap: 15px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2509803922);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 75;
  transition: all 0.1s linear 0s;
}
.header-menu-list li > .submenu li > a {
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  color: #313131;
  font-family: "Mulish", sans-serif;
  transition: all 0.1s linear 0s;
}
.header-menu-list li > .submenu li > a i {
  font-size: 2.5rem;
  color: inherit;
}
.header-menu-list li > .submenu li > a:hover i {
  color: inherit;
}
.header-menu-list li > .submenu li > a:hover {
  transition: all 0.1s linear 0s;
}
.header-menu-list i {
  font-size: 2rem;
  color: #979797;
  transition: all 0.1s linear 0s;
}
.header-menu-list i:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.header-menu-list li.submenu-link:hover > .submenu {
  display: flex;
}

/* --< Account-menu >-- */
.account-user:hover i, .account-user:hover span {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.account-user:hover {
  transition: all 0.1s linear 0s;
}

.account-menu {
  position: relative;
  min-width: 150px;
  margin-left: 10px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 10px 0 10px 0;
}
.account-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-menu {
  z-index: 15;
}

.account-menu-js:hover .account-menu-list {
  display: flex;
  transition: all 0.1s linear 0s;
}

.account-menu-list {
  top: 35px;
  right: -7rem;
  position: absolute;
  min-width: -moz-max-content;
  min-width: max-content;
  display: none;
  flex-direction: column;
  gap: 25px;
  padding: 20px 25px 20px 20px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  font-family: "Mulish", sans-serif;
  background-color: #ffffff;
  z-index: 10;
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.12);
  transition: all 0.1s linear 0s;
}
.account-menu-list .account-menu-item a {
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.account-menu-list .account-menu-item i {
  color: #CACACA;
  font-size: 2rem;
  transition: all 0.1s linear 0s;
}
.account-menu-list .account-menu-item:first-child {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.account-menu-list .account-menu-item:first-child::after {
  content: "";
  display: block;
  background-color: #CACACA;
  height: 1px;
  margin: 20px 0 0 0;
}
.account-menu-list .account-menu-item:nth-last-child(2)::after {
  content: "";
  display: block;
  background-color: #CACACA;
  height: 1px;
  margin: 20px 0 0 0;
}
.account-menu-list a:hover i {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

/* --<< Content >>-- */
.header-dummy {
  margin-top: 150px;
}

.content {
  margin: 0 7%;
}
.content.len h2 {
  color: #12154C;
}
.content h2 {
  color: #313131;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 2% 0 2% 0;
  font-weight: 600;
  font-size: 3rem;
  font-weight: bold;
  font-family: "Montserrat Alternates", sans-serif;
}
.content h2 a {
  color: inherit;
  transition: all 0.1s linear 0s;
}
.content h2 a:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.content > h5 {
  color: #313131;
  text-align: justify;
  font-size: 1.8rem;
  font-weight: normal;
  margin: 15px 0;
}
.content p {
  color: #313131;
  text-align: justify;
  font-size: 1.6rem;
  margin: 10px 0;
}
.content .published-date {
  display: block;
  color: #979797;
  font-size: 1.6rem;
  margin: 20px 0;
}

.section {
  margin: 3% 0;
}

.section-article {
  display: block;
  position: relative;
  margin: 3% 0;
  padding: 30px 30px;
  border-radius: 30px;
}
.section-article h2 {
  font-size: 2.8rem;
  color: #12154C;
  margin: 2% 0 3% 0;
  font-family: "Montserrat Alternates", sans-serif;
}
.section-article.blue h2 {
  color: #12154C;
}
.section-article.blue {
  background-image: url("/static/images/bg_blue.70e1e7260694.png");
}
.section-article.blue .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.section-article.blue .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.section-article.blue .button {
  margin: 50px auto 0 auto;
}
.section-article.brown h2 {
  color: #472e1c;
}
.section-article.brown {
  background-image: url("/static/images/bg_brown.e4ead4d8d5c1.png");
}
.section-article.brown .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #B27237;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.section-article.brown .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.section-article.brown .button {
  margin: 50px auto 0 auto;
}

.search {
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
}
.search input {
  width: 100%;
  border: 1px solid #8196C7;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}
.search button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  width: 50px;
  height: 50px;
  font-size: 2rem;
  color: #ffffff;
  background-color: grey;
  border-radius: 7px;
  cursor: pointer;
}

.article-search {
  margin: 20px 0;
}
.article-search.len .search input {
  border: 1px solid #6B80F5;
  color: #12154C;
}
.article-search.len .search input:hover {
  border-color: #6B80F5;
}
.article-search.len .search button {
  background-color: #6B80F5;
}
.article-search.ecopolis .search input {
  border: 1px solid #B27237;
  color: #34190E;
}
.article-search.ecopolis .search input:hover {
  border-color: #B27237;
}
.article-search.ecopolis .search button {
  background-color: #B27237;
}

/* --< Section-empty >-- */
.section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  color: #979797;
  margin: 15% 15% 5% 15%;
}
.section-empty.len > a {
  background-color: #6B80F5;
}
.section-empty.ecopolis > a {
  background-color: #B2BF11;
}
.section-empty h2 {
  margin: 0;
}
.section-empty h4 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 2rem;
  font-weight: 400;
}
.section-empty .empty-img {
  width: 10vw;
  height: 10vw;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-empty a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.section-empty a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.section-empty a {
  font-size: 1.6rem;
  padding: 15px 20px;
  margin-top: 20px;
}
.section-empty .like {
  color: #f85555;
}
.section-empty .empty-links, .section-empty .empty-links-mobile {
  width: 100%;
}
.section-empty .empty-links-mobile {
  display: none;
}

/* --# Page Develop #-- */
@keyframes cogs-left {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes cogs-right {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.develop {
  position: relative;
}

.cogs-left {
  position: relative;
  left: 5px;
  width: 150px;
  animation: cogs-left 3s infinite linear;
}

.cogs-right {
  position: relative;
  right: 5px;
  width: 100px;
  animation: cogs-right 3s infinite linear;
}

.main-section {
  margin: 3% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 2% 7%;
}
.main-section .main-text {
  font-size: 2rem;
  max-width: 70vw;
  min-width: 50vw;
  line-height: 1.5;
  color: #313131;
}
.main-section h5 {
  font-size: 2rem;
  line-height: 1.5;
  color: #313131;
  cursor: default;
  font-weight: 500;
}

.branch-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(30vw, 1fr));
  gap: 5%;
}

.branch-block {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  margin: 0;
  margin-top: 100px;
  padding: 0;
  border-radius: 40px;
  min-height: 37vw;
  max-height: -moz-max-content;
  max-height: max-content;
}
.branch-block.len {
  background-color: #EAF5FF;
  color: #12154C;
}
.branch-block.len .decor {
  background-color: #EAF5FF;
}
.branch-block.len .curtain {
  background-color: rgba(123, 130, 156, 0.9);
}
.branch-block.len .button, .branch-block.len .button-bottom {
  background-color: #6B80F5;
}
.branch-block.len .subtext {
  color: #12154C;
}
.branch-block.len ul > li {
  color: #12154C;
}
.branch-block.ecopolis {
  background-color: #FEF2E0;
  color: #34190E;
}
.branch-block.ecopolis .decor {
  background-color: #FEF2E0;
}
.branch-block.ecopolis .curtain {
  background-color: rgba(126, 106, 86, 0.9);
}
.branch-block.ecopolis .button, .branch-block.ecopolis .button-bottom {
  background-color: #B27237;
}
.branch-block.ecopolis .subtext {
  color: #34190E;
}
.branch-block.ecopolis ul > li {
  color: #34190E;
}
.branch-block > h4 {
  font-size: 2.2rem;
  color: inherit;
  margin: 30px auto 20px auto;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.branch-block > h5 {
  font-size: 1.7rem;
  color: inherit;
  margin: 0 30px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 500;
}
.branch-block.block-way .decor {
  top: -12%;
  height: 30%;
}
.branch-block .decor {
  position: absolute;
  top: -15%;
  left: 30%;
  width: 40%;
  height: 40%;
  border-radius: 122px;
  background-color: #EAF5FF;
  z-index: -1;
}
.branch-block .decor-icon {
  position: absolute;
  font-size: 5.7rem;
  top: -50px;
  left: 0;
  right: 0;
  z-index: 3;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.branch-block img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 65%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.branch-block .curtain {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 65%;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 40px;
  z-index: 3;
}
.branch-block .curtain h5 {
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1.5;
  padding: 50px 15px 30px 15px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.branch-block .button, .branch-block .button-bottom {
  margin-top: 30px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 18px 40px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.branch-block .button:hover, .branch-block .button-bottom:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.branch-block .button {
  margin: auto auto 30px auto;
  width: -moz-max-content;
  width: max-content;
}
.branch-block .button-bottom {
  margin-top: auto;
  width: 100%;
  display: flex;
  padding: 20px 40px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.branch-block .subtext {
  font-size: 2rem;
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  display: block;
  margin: 20px auto;
}
.branch-block ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.branch-block ul li {
  display: grid;
  grid-template-columns: 60px auto;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 20px;
  padding: 10px 20px 10px 30px;
}
.branch-block ul li span {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}
.branch-block ul li i {
  font-size: 5rem;
}

.mission-section {
  margin: 3% 0 5% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 270px;
}
.mission-section h2 {
  font-size: 2.6rem;
  color: #5067E3;
}
.mission-section .mission-text {
  margin-top: 20px;
  font-size: 2.4rem;
  max-width: 55vw;
  line-height: 1.5;
  color: #12154C;
  font-weight: 500;
  font-style: italic;
}
.mission-section .flower {
  position: absolute;
  width: 100px;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.mission-section .flower.left {
  left: 10%;
}
.mission-section .flower.right {
  right: 10%;
  transform: scale(-1, -1);
}

.opt-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  margin: 2% 0 2% 0;
  border-radius: 50px;
}
.opt-section.main {
  margin: 4% 7% 5% 7%;
}
.opt-section.len {
  background-color: #F7F7F7;
}
.opt-section.len h2 {
  color: #12154C;
}
.opt-section.len h5 {
  color: #12154C;
}
.opt-section.len .benefit-list .benefit i {
  color: #5067E3;
}
.opt-section.len .benefit-list .benefit h3 {
  color: #5067E3;
}
.opt-section.len .benefit-list .benefit h5 {
  color: #12154C;
}
.opt-section.ecopolis {
  background-color: #FEFFF1;
}
.opt-section.ecopolis h2 {
  color: #34190E;
}
.opt-section.ecopolis h5 {
  color: #34190E;
}
.opt-section.ecopolis .benefit-list .benefit i {
  color: #B2BF11;
}
.opt-section.ecopolis .benefit-list .benefit h3 {
  color: #B2BF11;
}
.opt-section.ecopolis .benefit-list .benefit h5 {
  color: #34190E;
}
.opt-section h2 {
  font-size: 2.4rem;
  text-align: center;
}
.opt-section h5 {
  font-size: 2rem;
  text-align: center;
}
.opt-section .benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px auto;
}
.opt-section .benefit-list .benefit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
  cursor: default;
}
.opt-section .benefit-list .benefit i {
  font-size: 6rem;
}
.opt-section .benefit-list .benefit h3 {
  font-size: 2rem;
}
.opt-section .benefit-list .benefit h5 {
  font-size: 1.6rem;
  font-weight: 500;
}
.opt-section .cooperation-form {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  gap: 20px;
  padding: 30px 30px;
  border-radius: 40px;
}
.opt-section .cooperation-form.len h2 {
  color: #12154C;
}
.opt-section .cooperation-form.len h5 {
  color: #12154C;
}
.opt-section .cooperation-form.len input, .opt-section .cooperation-form.len textarea {
  border-color: #5067E3;
  color: #12154C;
}
.opt-section .cooperation-form.len .button {
  background-color: #6B80F5;
}
.opt-section .cooperation-form.ecopolis h2 {
  color: #34190E;
}
.opt-section .cooperation-form.ecopolis h5 {
  color: #34190E;
}
.opt-section .cooperation-form.ecopolis input, .opt-section .cooperation-form.ecopolis textarea {
  border-color: #B2BF11;
  color: #34190E;
}
.opt-section .cooperation-form.ecopolis .button {
  background-color: #B2BF11;
}
.opt-section .cooperation-form h2 {
  font-size: 2.4rem;
  text-align: center;
}
.opt-section .cooperation-form h5 {
  font-size: 2rem;
  text-align: center;
}
.opt-section .cooperation-form .form-row {
  display: flex;
  gap: 20px;
}
.opt-section .cooperation-form input, .opt-section .cooperation-form textarea {
  width: 100%;
  border: 2px solid;
  font-weight: 500;
  padding: 15px 30px;
}
.opt-section .cooperation-form input {
  border-radius: 40px;
}
.opt-section .cooperation-form textarea {
  border-radius: 20px;
}
.opt-section .cooperation-form .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 40px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.opt-section .cooperation-form .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

.lawka-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 7%;
}

.lawka-block {
  display: grid;
  grid-template-columns: auto 45%;
  gap: 20px;
  height: 22vw;
  border-radius: 40px;
}
.lawka-block img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lawka-block.left img {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}
.lawka-block.right {
  grid-template-columns: 45% auto;
}
.lawka-block.right img {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
.lawka-block.len {
  background-color: #EAF5FF;
}
.lawka-block.len h3 {
  color: #12154C;
}
.lawka-block.len span {
  color: #6B80F5;
}
.lawka-block.len .button {
  background-color: #6B80F5;
}
.lawka-block.ecopolis {
  background-color: #FEF2E0;
}
.lawka-block.ecopolis h3 {
  color: #34190E;
}
.lawka-block.ecopolis span {
  color: #B27237;
}
.lawka-block.ecopolis .button {
  background-color: #B27237;
}

.lawka-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  padding: 40px 20px 20px 40px;
}
.lawka-text h3 {
  font-size: 3.2rem;
}
.lawka-text span {
  font-size: 1.8rem;
  font-style: italic;
  font-weight: bold;
}
.lawka-text h5 {
  font-size: 1.8rem;
}
.lawka-text .button {
  margin-top: auto;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  border: 2px solid transparent;
  padding: 18px 40px;
  font-size: 1.8rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.lawka-text .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}

/* --# Page Index #-- */
/* --<< Main-Banner >>-- */
.main-banner {
  margin: 0;
  position: relative;
}

.empty-header {
  width: 100%;
  height: 110px;
}

.main-slider {
  opacity: 0;
  width: 100%;
}
.main-slider .slider-block {
  position: relative;
  height: 27vw;
}
.main-slider .slider-block img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: 1 !important;
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
}

/* --< Main-News >-- */
.slider-articles {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

/* --< Main-Catalog >-- */
.slider-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 300px));
  gap: 10px;
}

.main-catalog {
  padding: 10px 0 20px 0;
}

/* --< Main-Catalog-list Brands >-- */
.mobile-catalog-list {
  display: none;
}

/* --< Main-Recipes >-- */
.slider-recipes {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.empty-section {
  display: block;
  width: 100%;
  height: 270px;
}

.empty-block {
  width: 100%;
  position: relative;
  height: 100%;
  border-radius: 10px;
}
.empty-block .title {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  font-size: 2.2rem;
  top: 0;
  left: 20%;
  color: #bdc4f9;
  border-radius: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 3;
}
.empty-block img {
  display: block;
  position: absolute;
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  box-shadow: 0 0 30px 20px rgb(255, 255, 255) inset;
  z-index: 1;
}
.empty-block .img-left {
  left: 0;
  top: 0;
}
.empty-block .img-right {
  right: 0;
  top: 0;
}

/* --# Page About Us #-- */
.text-block p {
  font-size: 1.8rem;
}

.img img {
  border-radius: 5px;
}

.img-left {
  float: left;
  margin: 15px 15px 15px 0;
}

.img-right {
  float: right;
  margin: 15px 0 15px 15px;
}

.float-empty {
  clear: both;
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
  margin: 0 5%;
}
.awards-grid img {
  border-radius: 5px;
  width: 100%;
  height: 100%;
}
.awards-grid .img-large-center {
  grid-column: 2/4;
}
.awards-grid .img-large-left {
  grid-column: 1/3;
}
.awards-grid .img-large-right {
  grid-column: 3/5;
}

.goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
}

.goods-block {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
  transition: all 0.1s linear 0s;
}
.goods-block img {
  width: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0 10%;
}
.goods-block h4 {
  padding: 10px 0;
  color: #5067E3;
  text-align: center;
}
.goods-block:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}

/* --# Page Article List #-- */
.block-article {
  display: flex;
  justify-content: flex-start;
  position: relative;
  color: #979797;
  height: 220px;
  margin-bottom: 20px;
  border-radius: 10px;
  transition: all 0.1s linear 0s;
}
.block-article .article-text-block {
  padding: 15px 5px;
}
.block-article img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  min-width: 300px;
  max-width: 300px;
  height: 100%;
  max-height: 220px;
  margin-right: 10px;
}
.block-article span {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 5px 0;
}
.block-article .views {
  position: absolute;
  display: flex;
  align-items: center;
  color: #D5E7FB;
  background-color: rgba(255, 255, 255, 0.9803921569);
  padding: 5px;
  border-radius: 20%;
  gap: 5px;
  right: 10px;
  bottom: 10px;
}
.block-article .views span {
  font-weight: normal;
}
.block-article .views i {
  font-size: 1.6rem;
}
.block-article h3 {
  color: #5067E3;
  font-weight: bold;
}
.block-article p {
  font-size: 1.6rem;
  padding: 5px;
}
.block-article:hover {
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
  transition: all 0.1s linear 0s;
}
.block-article.len h3 {
  color: #6B80F5;
}
.block-article.ecopolis h3 {
  color: #B27237;
}

/* --# Pages Article Detail | Recipe Detail  #-- */
.article-img {
  flex-direction: row !important;
  justify-content: space-between;
  gap: 10px;
}
.article-img .image {
  display: block;
  border-radius: 5px;
  min-width: 330px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}

.image-block {
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.image-block img {
  display: block;
  border-radius: 5px;
  width: 100%;
  min-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}
.image-block a {
  margin-top: 20px;
  min-width: -moz-max-content;
  min-width: max-content;
  display: block;
}

.article {
  display: flex;
  flex-direction: column;
  position: relative;
}
.article p {
  font-size: 1.8rem;
  margin-bottom: 0;
}
.article a {
  font-size: 1.6rem;
  margin: 10px 0;
  color: #5067E3;
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  margin: 25px 0 10px 0;
  color: #5067E3;
}
.article p:first-child {
  margin-top: 0;
}
.article ul, .article ol {
  font-size: 1.8rem;
}
.article ul li {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0 0 15px;
  margin: 10px 0;
}
.article ul li > img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 20px 0 0;
}
.article ol {
  counter-reset: ol-numbers;
}
.article ol li {
  position: relative;
  padding: 5px 0 5px 50px;
  margin: 10px 0;
}
.article ol li::before {
  counter-increment: ol-numbers;
  content: counter(ol-numbers);
  position: absolute;
  left: 0;
  top: calc(50% - 1.75rem);
  width: 3.5rem;
  height: 3.5rem;
  line-height: 2;
  font-size: 1.7rem;
  color: #ffffff;
  text-align: center;
  background-color: #5067E3;
  border-radius: 50%;
}

.article-two-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 30px;
  margin: 20px 0;
}
.article-two-list div:first-child {
  flex-basis: 40%;
}
.article-two-list div:last-child {
  flex-basis: 60%;
}
.article-two-list h3 {
  cursor: default;
}
.article-two-list h4, .article-two-list h5 {
  font-size: 1.8rem;
  margin: 15px 0 10px 0;
  color: #313131;
  font-weight: normal;
}

.article-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  justify-content: space-between;
  margin: 20px 0 0 0;
  gap: 10px 10px;
}
.article-gallery img {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  max-height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.article-gallery iframe {
  width: 100%;
  height: 100%;
  min-height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

.article-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  justify-content: flex-start;
  margin: 10px 0;
  gap: 10px 10px;
}

.article-slider-block {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 20px;
}
.article-slider-block img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 200px;
  padding: 0 10%;
}
.article-slider-block h5 {
  color: #313131;
}

.views-static-area {
  position: relative;
}

.views-static {
  position: absolute;
  display: flex;
  align-items: center;
  color: #D5E7FB;
  background-color: rgba(255, 255, 255, 0.9803921569);
  padding: 5px;
  border-radius: 20%;
  font-size: 1.8rem;
  gap: 5px;
  right: 20px;
  top: -20px;
}
.views-static i {
  font-size: 2rem;
}
.views-static span {
  font-weight: normal;
}

/* --< Article Navigation >-- */
.article-nav {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 50px;
  margin-top: 20px;
  padding: 20px 0;
  border-top: 1px solid #eaeaea;
}
.article-nav.len .article-nav-item h3 {
  color: #6B80F5;
}
.article-nav.ecopolis .article-nav-item h3 {
  color: #B27237;
}

.article-nav.all {
  justify-content: space-between;
}

.article-nav.next {
  justify-content: flex-end;
}

.article-nav.previous {
  justify-content: flex-start;
}

.article-nav-item {
  width: 50%;
  display: flex;
  gap: 10px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
}
.article-nav-item h3 {
  color: #5067E3;
  margin: 10px 0;
}
.article-nav-item h5 {
  color: #CACACA;
  font-size: 1.6rem;
  display: none;
}
.article-nav-item span {
  display: block;
  color: #313131;
  font-size: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20vh;
  position: relative;
}
.article-nav-item span:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, transparent, #ffffff 50%);
}
.article-nav-item img {
  max-width: 400px;
  min-width: 200px;
  height: 200px;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* --# Page Location List #-- */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fill, 300px);
  justify-content: space-between;
  gap: 10px 10px;
}
.location-grid .chunk-article .article-text {
  height: -moz-min-content;
  height: min-content;
  min-height: -moz-max-content;
  min-height: max-content;
  max-height: -moz-max-content;
  max-height: max-content;
}
.location-grid .chunk-article .article-text h5 {
  height: -moz-min-content;
  height: min-content;
}

/* --# Page Locations Detail #-- */
.locations {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.location-item h3 {
  margin: 0 0 15px 0;
  color: #313131;
}
.location-item a {
  color: #313131;
  transition: all 0.1s linear 0s;
}
.location-item a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.location-item {
  border-bottom: 1px solid #eaeaea;
}
.location-item:last-child {
  border: none;
}

.location-item-list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: auto 17%;
  -moz-column-gap: 30px;
       column-gap: 30px;
  padding-bottom: 15px;
}

.location-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.location-item-info ul {
  font-size: 1.6rem;
}
.location-item-info .icon-round {
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
}
.location-item-info .icon-round i {
  font-size: 1.5rem;
}
.location-item-info p {
  color: #313131;
  margin: 0;
  padding: 0;
}

/* --# Page Recipe List #-- */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
}

.recipe-block {
  text-align: center;
  transition: all 0.2s ease-in-out;
}
.recipe-block h4 {
  margin: 15px 0 20px 0;
  color: #313131;
}
.recipe-block h4 a {
  color: inherit;
}
.recipe-block > a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: inherit;
}
.recipe-block > a img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  width: 100%;
  height: 270px;
  transition: inherit;
  z-index: 2;
}
.recipe-block > a .views {
  position: absolute;
  display: flex;
  align-items: center;
  color: #D5E7FB;
  background-color: rgba(255, 255, 255, 0.9803921569);
  padding: 5px;
  border-radius: 20%;
  gap: 5px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
}
.recipe-block > a .views span {
  font-weight: normal;
  font-size: 1.6rem;
}
.recipe-block > a .views i {
  font-size: 1.6rem;
}

/* --# Page Reviews #-- */
.review-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.review-button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.review-button {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 1.8rem;
}

.review-block {
  position: relative;
  color: #979797;
  margin-bottom: 10px;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.1s linear 0s;
}
.review-block .review-title, .review-block .comment-title {
  display: flex;
  align-items: center;
}
.review-block .review-title h3, .review-block .comment-title h3 {
  display: inline;
  color: #313131;
  font-weight: bold;
}
.review-block .review-title > span, .review-block .comment-title > span {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0 10px;
}
.review-block .review-title .comment-rating, .review-block .comment-title .comment-rating {
  margin: 0 10px 0 20px;
}
.review-block .review-title .comment-value, .review-block .comment-title .comment-value {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  margin-left: 5px;
}
.review-block p {
  display: block;
  font-size: 1.6rem;
  margin: 10px 0;
  padding: 0;
  line-height: 1.4;
  text-align: justify;
}
.review-block .review-images, .review-block .comment-images {
  display: flex;
  margin: 20px 0 10px 0;
  gap: 10px;
}
.review-block .review-images img, .review-block .comment-images img {
  border-radius: 5px;
  height: 200px;
}
.review-block .review-read {
  display: none;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #5067E3;
}
.review-block .review-buttons, .review-block .comment-buttons {
  display: flex;
  gap: 10px;
  font-size: 1.4rem;
}
.review-block .review-buttons span, .review-block .comment-buttons span {
  cursor: pointer;
  color: #979797;
  border-bottom: 1px dashed transparent;
  transition: all 0.2s linear 0s;
}
.review-block .review-buttons span:hover, .review-block .comment-buttons span:hover {
  color: #5067E3;
  border-color: #5067E3;
  transition: all 0.2s linear 0s;
}

.response-block {
  margin-left: 10%;
  position: relative;
  color: #979797;
  margin-bottom: 10px;
  background-color: #F8F8FC;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.1s linear 0s;
}
.response-block .response-title {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.response-block .response-title h4 {
  display: inline;
  font-weight: bold;
}
.response-block .response-title .response-icon {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}
.response-block .response-title > span {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0 10px;
}
.response-block .response-title.len h4 {
  color: #5067E3;
}
.response-block .response-title.ecopolis h4 {
  color: #34190E;
}
.response-block p {
  display: block;
  font-size: 1.6rem;
  padding: 0;
  line-height: 1.4;
  text-align: justify;
}
.response-block .response-buttons {
  display: flex;
  position: absolute;
  right: 20px;
  bottom: 10px;
  gap: 10px;
  font-size: 1.4rem;
}
.response-block .response-buttons span {
  cursor: pointer;
  color: #979797;
  border-bottom: 1px dashed transparent;
  transition: all 0.2s linear 0s;
}
.response-block .response-buttons span:hover {
  color: #5067E3;
  border-color: #5067E3;
  transition: all 0.2s linear 0s;
}

.review-view-wrap {
  margin: 20px 0;
}

/* --< Review-form >-- */
.review-form {
  padding: 10px 0;
}
.review-form h3 {
  color: #313131;
  margin: 10px 0;
}
.review-form textarea {
  width: 100%;
  border: 1px solid #E8E8E8;
  resize: vertical;
}

.review-area h4 {
  font-size: 1.6rem;
  color: #979797;
  margin: 10px 10px 10px 0;
  font-weight: normal;
}
.review-area .label-inline {
  display: inline-block;
}
.review-area > label {
  display: block;
  font-size: 1.6rem;
  color: #979797;
  margin: 10px 10px 10px 0;
}

.review-uploads-images {
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 10px 10px;
  gap: 10px;
  width: 100%;
}

.uploads-images-errors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uploads-images-errors .error {
  font-size: 1.6rem;
  color: #e56262;
}

.review-image-item {
  display: block;
  position: relative;
  flex-basis: 15%;
}
.review-image-item input[type=file] {
  display: none;
}
.review-image-item input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.image-review-label {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 4px dashed #5067E3;
  width: 100%;
  height: 300px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.image-review-label i {
  color: #5067E3;
  font-size: 7rem;
  transition: all 0.1s linear 0s;
}
.image-review-label:hover {
  border-color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.image-review-label:hover i {
  color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.image-review-label > img {
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  padding: 5px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  top: 0;
  left: 0;
  z-index: 1;
}

.review-image-item.error-img .delete-image {
  color: #c53e3e;
}
.review-image-item.error-img .delete-image:hover {
  color: #e56262;
}
.review-image-item.error-img .image-review-label {
  border-color: #c53e3e;
  background-color: rgba(197, 62, 62, 0.168627451);
}

.add-image {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 4px dashed transparent;
  width: 100%;
  height: 300px;
  background-color: #D5E7FB;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.add-image i {
  color: #5067E3;
  font-size: 7rem;
  transition: all 0.1s linear 0s;
}
.add-image:hover {
  transition: all 0.1s linear 0s;
}

.delete-image, .clear-image {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.delete-image:hover i, .clear-image:hover i {
  color: #D5E7FB;
  transition: all 0.1s linear 0s;
}
.delete-image, .clear-image {
  z-index: 5;
}

.review-active {
  margin: 10px 0 20px 0;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.review-bt, .comment-bt {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.review-bt:hover, .comment-bt:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.review-bt, .comment-bt {
  color: #ffffff;
  font-size: 1.6rem;
  padding: 10px 25px;
}

.review-bt-alt, .comment-bt-alt {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.review-bt-alt:hover, .comment-bt-alt:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.review-bt-alt, .comment-bt-alt {
  color: #5067E3;
  padding: 10px 25px;
  font-size: 1.6rem;
  border-color: #5067E3;
}
.review-bt-alt:hover, .comment-bt-alt:hover {
  background-color: #5067E3;
  color: #ffffff;
}

.star-rating-wrap {
  display: inline-block;
}

.star-rating {
  width: -moz-max-content;
  width: max-content;
  margin-top: 10px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
  gap: 10px;
}

.star-label {
  width: 35px;
  height: 35px;
  background-color: #D5E7FB;
  border-radius: 10px;
  font-family: "LenOk";
  font-weight: normal;
  cursor: pointer;
}
.star-label::before {
  content: "\e913";
  color: #5067E3;
  width: inherit;
  height: inherit;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  transition: all 0.1s linear 0s;
}

.star-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.1s linear 0s;
}

.star-item:checked::before,
.star-item:checked ~ .star-label::before {
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.star-item:checked,
.star-item:checked ~ .star-label {
  background-color: #5067E3;
  transition: all 0.1s linear 0s;
}

.star-label:hover::before,
.star-label:hover ~ .star-label::before,
.star-label:checked ~ .star-label:hover::before {
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.star-label:hover,
.star-label:hover ~ .star-label,
.star-label:checked ~ .star-label:hover {
  background-color: #5067E3;
  transition: all 0.1s linear 0s;
}

/* --# Page Contacts #-- */
.contacts {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
.contacts.len .contacts-block h1 {
  color: #12154C;
}
.contacts.len .contacts-block ul li .icon-round {
  color: #6B80F5;
  border-color: #6B80F5;
}
.contacts.len .contacts-block ul li a:hover {
  color: #6B80F5;
  transition: all 0.1s linear 0s;
}
.contacts.ecopolis .contacts-block h1 {
  color: #34190E;
}
.contacts.ecopolis .contacts-block ul li .icon-round {
  color: #B27237;
  border-color: #B27237;
}
.contacts.ecopolis .contacts-block ul li a:hover {
  color: #B27237;
  transition: all 0.1s linear 0s;
}

.map {
  flex-basis: 50%;
  max-width: inherit;
  max-height: inherit;
}

.contacts-block h1 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.contacts-block h5 {
  color: #313131;
  font-weight: normal;
  margin: 15px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.contacts-block ul {
  font-size: 1.8rem;
  border-top: 1px solid #979797;
}
.contacts-block ul li {
  margin: 30px 0;
  display: flex;
  align-items: center;
}
.contacts-block ul li a {
  margin: 0 5px;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.contacts-block ul li a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.contacts-block ul li .split {
  margin: 0 5px;
  font-weight: normal;
}
.contacts-block ul li .contact-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.contacts-block ul li .contact-col .sub-text {
  font-size: 1.5rem;
}
.contacts-block .contacts-phone, .contacts-block .contacts-email {
  display: flex;
  align-items: center;
}
.contacts-block .contacts-phone div, .contacts-block .contacts-email div {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* --# Login/Signup #-- */
.login-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  margin-top: 100px;
  padding: 3% 15% 3% 15%;
  width: 100%;
  height: 100vh;
  background-image: url("/static/images/background-login.e6bf00998e09.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.login-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 500px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.808) 0%, rgba(255, 255, 255, 0) 100%);
}

.float-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  z-index: 5;
}
.float-logo img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 40%;
  height: 40%;
}
.float-logo span {
  display: block;
}
.float-logo span h3 {
  font-size: 3.5rem;
  color: #5067E3;
  margin: 10px 0;
  text-shadow: 0 -1px 5px #FFFFFF, 0 -1px 5px #FFFFFF, 0 1px 5px #FFFFFF, 0 1px 5px #FFFFFF, -1px 0 5px #FFFFFF, 1px 0 5px #FFFFFF, -1px 0 5px #FFFFFF, 1px 0 5px #FFFFFF, -1px -1px 5px #FFFFFF, 1px -1px 5px #FFFFFF, -1px 1px 5px #FFFFFF, 1px 1px 5px #FFFFFF, -1px -1px 5px #FFFFFF, 1px -1px 5px #FFFFFF, -1px 1px 5px #FFFFFF, 1px 1px 5px #FFFFFF;
}

.float-window {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  min-width: 370px;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 5;
}
.float-window form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.float-window form h2 {
  color: #5067E3;
  margin: 5px auto;
  min-width: -moz-max-content;
  min-width: max-content;
}
.float-window form p {
  line-height: 1.5;
}
.float-window form .reset-password {
  font-size: 1.6rem;
}
.float-window form .subtext {
  line-height: 1.2;
  font-size: 1.4rem;
  color: #313131;
}
.float-window form a {
  color: #5067E3;
  border-bottom: 1px dashed transparent;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.float-window form a:hover {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}
.float-window form input {
  width: 100%;
  border: 1px solid #E8E8E8;
}
.float-window form input:focus {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}
.float-window form .united {
  display: flex;
  align-items: center;
  gap: 5px;
}
.float-window form .united label {
  width: 100%;
}
.float-window form button {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.float-window form button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.float-window form button {
  color: #ffffff;
  font-size: 1.8rem;
  width: 100%;
}
.float-window form .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.float-window form .button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.float-window form .button {
  color: #ffffff;
  font-size: 1.8rem;
  width: 100%;
  text-align: center;
}
.float-window form .button.alternate {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #5067E3;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.float-window form .button.alternate:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.float-window form .button.alternate {
  border-color: #5067E3;
  font-size: 1.8rem;
  text-align: center;
  width: 100%;
}
.float-window form .button.alternate.mobile-button {
  display: none;
}

.float-long {
  max-width: 530px;
  min-width: 370px;
}

/* --# Page Account User #-- */
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  grid-template-rows: repeat(3, minmax(200px, 1fr));
  gap: 10px 10px;
  margin: 0 10%;
}

.account-grid.account-manager-grid {
  grid-template-rows: repeat(auto-fill, minmax(220px, 1fr));
}

.account-area {
  position: relative;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}
.account-area h2 {
  margin: 10px 0 30px 0;
  color: #5067E3;
}
.account-area > span {
  display: inline-block;
  font-size: 1.8rem;
  color: #979797;
  margin-bottom: 30px;
}
.account-area .no-results {
  font-size: 1.8rem;
  font-weight: normal;
  cursor: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.account-area.account-long {
  grid-column: 1/3;
}

.area-block {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #313131;
  width: 100%;
}

.area-button {
  display: block;
  font-weight: bold;
  font-size: 1.8rem;
  color: #5067E3;
  margin-left: auto;
  text-align: center;
}

.area-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 7rem;
  color: #D5E7FB;
}

.area-img {
  width: 100px;
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}

.area-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.area-text h3 {
  display: inline-block;
  min-width: -moz-max-content;
  min-width: max-content;
  font-family: "Mulish", sans-serif;
  margin: 0;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
  color: #313131;
  gap: 15px;
}
.area-text h5 {
  display: flex;
  gap: 35px;
  font-weight: normal;
  font-size: 1.6rem;
}
.area-text h5 i {
  margin-right: 5px;
  color: #D5E7FB;
}

.area-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.area-buttons span {
  display: inline-block;
  font-size: 1.6rem;
  color: #313131;
}
.area-buttons a {
  display: inline-block;
  font-weight: bold;
  font-size: 1.8rem;
  color: #5067E3;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: all 0.1s linear 0s;
}
.area-buttons a:hover {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}
.area-buttons a:last-child {
  margin-left: auto;
}

.client-discount {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  right: 20px;
  top: 20px;
}
.client-discount h4 {
  color: #5067E3;
}
.client-discount i {
  color: #5067E3;
  font-size: 4rem;
}
.client-discount {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.edit-pencil {
  position: relative;
}
.edit-pencil .pencil {
  top: -15px;
  right: -30px;
  position: absolute;
  color: #5067E3;
  font-size: 1.8rem;
  cursor: pointer;
}

.products-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  width: calc(100% - 10px);
  margin: 0 5px 20px 5px;
  text-align: center;
}
.products-flex .product-flex-item {
  height: 100px;
}
.products-flex .product-flex-item img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.products-flex .slider-prev, .products-flex .slider-next {
  color: #5067E3;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  z-index: 70;
}
.account-form a {
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.account-form a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.account-form p {
  color: #313131;
  font-size: 1.8rem;
}
.account-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.6rem;
  color: #313131;
}
.account-form input, .account-form textarea {
  width: 50%;
  border: 2px solid #E8E8E8;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
}
.account-form input:focus, .account-form textarea:focus {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}
.account-form .buttons {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}
.account-form .buttons button {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.account-form .buttons button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.account-form .buttons button {
  border-color: #5067E3;
  font-size: 1.8rem;
  padding: 12px 30px;
}

/* --# Page Account User Mobile #-- */
.account-mobile {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  background-color: #EEEDED;
  padding-bottom: 20px;
}
.account-mobile .account-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 25px 20px;
  box-shadow: none;
}
.account-mobile .account-area span {
  margin: 0;
}
.account-mobile .area-user {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 60vw;
}
.account-mobile .area-user h4 {
  color: #5067E3;
  font-size: 2rem;
  min-width: -moz-max-content;
  min-width: max-content;
}
.account-mobile .area-user i {
  font-size: 5rem;
}
.account-mobile .client-discount {
  position: static;
  display: grid;
  gap: 0 7px;
  grid-template-columns: auto auto;
  margin-right: 20px;
}
.account-mobile .client-discount i {
  grid-column: 1;
  grid-row: 1/3;
}
.account-mobile .client-discount h4 {
  grid-column: 2;
  font-size: 2rem;
}
.account-mobile .client-discount h5 {
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  font-size: 1.4rem;
  color: #979797;
  font-weight: normal;
}
.account-mobile .profile-edit {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  right: 10px;
  bottom: -25px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #5067E3;
  font-size: 3rem;
  background-color: #FFFFFF;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}
.account-mobile .account-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.account-mobile .account-list li a {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 25px 20px 25px 20px;
  color: #313131;
  font-size: 1.8rem;
  border-bottom: 1px solid #CACACA;
  background-color: #FFFFFF;
  cursor: pointer;
}
.account-mobile .account-list li a span {
  font-size: 1.4rem;
  color: #979797;
  margin-top: 10px;
}
.account-mobile .account-list li a i {
  flex-basis: 10%;
  color: #5067E3;
  font-size: 2.1rem;
}
.account-mobile .account-list li a.line {
  flex-direction: column;
}
.account-mobile .account-list li a.red {
  color: #e02355;
}
.account-mobile .account-list li a.grey {
  color: #979797;
}
.account-mobile .account-list li:first-child a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.account-mobile .account-list li:last-child a {
  border: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.account-mobile .account-callback img {
  max-width: 60px;
  min-width: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.account-mobile .account-callback-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account-mobile .account-callback-text h4 {
  font-size: 2rem;
  color: #313131;
  font-weight: normal;
}
.account-mobile .account-callback-text span {
  font-size: 1.4rem;
  color: #979797;
}

.account-back {
  display: none;
  align-items: center;
  position: fixed;
  top: 57px;
  gap: 15px;
  width: 100%;
  padding: 10px 20px;
  background-color: #5067E3;
  color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 60;
  cursor: default;
}
.account-back h2 {
  font-size: 1.8rem;
  font-family: "Mulish", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-back i {
  font-size: 2.2rem;
}
.account-back a {
  color: #ffffff;
  margin-right: 10px;
}
.account-back.len {
  background-color: #6B80F5;
}
.account-back.ecopolis {
  background-color: #B2BF11;
}

/* % Modal blocks % */
.modal {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgba(77, 77, 77, 0.466);
  margin: 0;
  top: 0;
  left: 0;
  z-index: 100;
}

.modal-area {
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  z-index: 60;
}

.modal-form {
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: 470px;
  max-width: 800px;
  padding: 25px 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 70;
}
.modal-form.large {
  min-width: 90vw;
  max-width: 100vw;
  height: 90vh;
}

.modal-form, .form {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
}
.modal-form h2, .form h2 {
  text-align: center;
  color: #5067E3;
  margin: 10px auto;
  cursor: default;
}
.modal-form h3, .form h3 {
  text-align: left;
  color: #CACACA;
  margin: 10px 0;
  cursor: default;
}
.modal-form h5, .form h5 {
  text-align: left;
  color: #313131;
  font-weight: bold;
  margin: 10px 0;
  cursor: default;
  font-size: 1.8rem;
}
.modal-form a, .form a {
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.modal-form a:hover, .form a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.modal-form p, .form p {
  color: #313131;
  text-align: center;
  font-size: 1.8rem;
  cursor: default;
}
.modal-form .united, .form .united {
  display: flex;
  align-items: center;
  gap: 5px;
}
.modal-form .united label, .form .united label {
  width: 100%;
}
.modal-form .modal-cols, .form .modal-cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  margin: 5px 0;
}
.modal-form .modal-cols div, .form .modal-cols div {
  min-width: -moz-max-content;
  min-width: max-content;
}
.modal-form .delivery-method, .form .delivery-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.modal-form .delivery-method span, .form .delivery-method span {
  font-size: 1.8rem;
  color: #979797;
}
.modal-form label, .form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.6rem;
  color: #313131;
}
.modal-form input, .modal-form textarea, .form input, .form textarea {
  width: 100%;
  border: 2px solid #E8E8E8;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
}
.modal-form input:focus, .modal-form textarea:focus, .form input:focus, .form textarea:focus {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}
.modal-form .buttons, .form .buttons {
  display: flex;
  width: 100%;
  margin-top: 20px;
  gap: 20px;
}
.modal-form .buttons button, .modal-form .buttons a, .form .buttons button, .form .buttons a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.modal-form .buttons button:hover, .modal-form .buttons a:hover, .form .buttons button:hover, .form .buttons a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.modal-form .buttons button, .modal-form .buttons a, .form .buttons button, .form .buttons a {
  border-color: #5067E3;
  font-size: 1.6rem;
}
.modal-form .buttons .alt-btn, .form .buttons .alt-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #5067E3;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.modal-form .buttons .alt-btn:hover, .form .buttons .alt-btn:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.modal-form .buttons .alt-btn, .form .buttons .alt-btn {
  border-color: #5067E3;
  font-size: 1.6rem;
}
.modal-form .buttons.line button, .modal-form .buttons.line .alt-btn, .modal-form .buttons.line a, .form .buttons.line button, .form .buttons.line .alt-btn, .form .buttons.line a {
  width: -moz-max-content;
  width: max-content;
  padding: 12px 30px;
}
.modal-form .modal-exit, .form .modal-exit { /* Крестик справа вверху */
  position: absolute;
  top: 10px;
  right: 15px;
  color: #e2e2e2;
  font-size: 2.4rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.modal-form .modal-exit:hover, .form .modal-exit:hover {
  color: #313131;
  transition: all 0.1s linear 0s;
}

.form-collum {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  justify-content: space-between;
  gap: 20px 20px;
}

.modal-image-preview {
  display: block;
  position: relative;
  max-width: 90vw;
  height: 90vh;
  border-radius: 10px;
  padding: 10px 20px;
  background-color: #ffffff;
  z-index: 70;
}
.modal-image-preview img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: contain;
     object-fit: contain;
}
.modal-image-preview .modal-exit { /* Крестик справа вверху */
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 3px;
  right: 3px;
  color: #CACACA;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}

.content-alt {
  position: relative;
}
.content-alt h2 {
  color: #5067E3;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 30px 0 20px 0;
}
.content-alt p {
  color: #313131;
  text-align: justify;
  font-size: 1.6rem;
  margin: 10px 0;
}

/* % Preview Gallery-Images % */
.slider-gallery-images {
  display: flex;
}

.gallery-item {
  display: none;
}

.gallery-prev {
  left: -80px;
  width: 7rem;
  height: 7rem;
  font-size: 4rem;
}

.gallery-next {
  right: -80px;
  width: 7rem;
  height: 7rem;
  font-size: 4rem;
}

/* -- % Messages % -- */
.wrap-messages {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  z-index: 55;
}

.message {
  display: flex;
  align-items: center;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  padding: 15px;
  font-size: 1.6rem;
  color: #313131;
  z-index: 60;
}
.message button, .message a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.message button:hover, .message a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.message button, .message a {
  padding: 10px 10px;
}

.float-message {
  position: absolute;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  bottom: -20px;
  opacity: 0;
  z-index: 60;
}

.message-global {
  z-index: 200 !important;
}

.delivery-loading-wrap {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 0.1s linear 0s;
}

.delivery-loading-wrap.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s linear 0s;
}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.delivery-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.delivery-loading span i {
  font-size: 10rem;
  color: #5067E3;
}
.delivery-loading span {
  animation: load 2s infinite linear;
}
.delivery-loading h2 {
  color: #313131;
}

.regions-list {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  height: 100%;
  overflow-y: scroll;
}
.regions-list > .region-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px;
  font-size: 1.8rem;
  cursor: default;
}
.regions-list > .region-item .icon-round {
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
}
.regions-list > .region-item .icon-round i {
  font-size: 1.5rem;
}

/* --<< Footer >>-- */
.footer-dummy {
  margin-top: 50px;
}

.footer {
  margin-top: auto;
  width: 100%;
}
.footer.len .footer-logo h1 {
  color: #6B80F5;
}
.footer.len .footer-logo h3 {
  color: #848fbd;
}
.footer.len .footer-info li > a:hover {
  color: #6B80F5;
}
.footer.len .footer-info .callback .button.mail {
  background-color: #EAF5FF;
  color: #5067E3;
}
.footer.len .footer-info .callback .button.mail:hover {
  background-color: #6B80F5;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer.len .footer-copyright {
  background-color: #12154C;
}
.footer.ecopolis .footer-logo h1 {
  color: #B27237;
}
.footer.ecopolis .footer-info li > a:hover {
  color: #B27237;
}
.footer.ecopolis .footer-info .callback .button.mail {
  background-color: #F2F5D9;
  color: #B2BF11;
}
.footer.ecopolis .footer-info .callback .button.mail:hover {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer.ecopolis .footer-copyright {
  background-color: #B27237;
}

.footer-info {
  padding: 10px 10% 20px 10%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-info ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-info ul li {
  color: #979797;
  font-size: 1.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 2;
}
.footer-info ul li > a {
  color: #313131;
  transition: all 0.1s linear 0s;
}
.footer-info ul li > a:hover {
  transition: all 0.1s linear 0s;
}
.footer-info ul a > i {
  margin-right: 5px;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 0;
}
.footer-logo .footer-logo-title {
  display: grid;
  grid-template-columns: auto 15vw;
  grid-template-rows: auto auto;
  text-align: left;
  justify-content: flex-start;
  gap: 0 10px;
}
.footer-logo .footer-logo-title img {
  grid-column: 1;
  grid-row: 1/3;
}
.footer-logo .footer-logo-title h1 {
  grid-column: 2;
  grid-row: 1;
}
.footer-logo .footer-logo-title h3 {
  grid-column: 2;
  grid-row: 2;
}
.footer-logo .timework {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  font-size: 1.6rem;
  color: #979797;
  font-weight: 500;
  margin: 10px 0 10px 0;
  cursor: default;
}
.footer-logo h1 {
  font-size: 2.6rem;
  cursor: default;
}
.footer-logo h3 {
  font-size: 1.4rem;
  color: #313131;
  font-weight: normal;
  cursor: default;
}
.footer-logo h5 {
  font-size: 1.4rem;
  color: #979797;
  font-weight: normal;
  cursor: default;
  margin-bottom: 5px;
}
.footer-logo img {
  width: 70px;
}
.footer-logo .phone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #979797;
  font-size: 1.4rem;
  cursor: pointer;
  margin: auto 0 5px 0;
}
.footer-logo .phone p {
  display: flex;
  gap: 20px;
}
.footer-logo .phone a {
  font-size: 1.6rem;
  font-weight: bold;
  color: #313131;
}

.footer-info .callback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-basis: 20%;
}
.footer-info .callback h3 {
  font-size: 1.4rem;
  color: #313131;
  font-weight: bold;
  cursor: default;
}
.footer-info .callback h5 {
  font-size: 1.1rem;
  color: #313131;
  font-weight: normal;
  cursor: default;
}
.footer-info .callback .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  outline: none;
  padding: 12px 15px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  background-color: #FAFAFA;
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.footer-info .callback .button.mail {
  background-color: #EAF5FF;
  color: #5067E3;
}
.footer-info .callback .button.mail:hover {
  background-color: #6B80F5;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer-info .callback .button.vk:hover {
  background-color: #2991ff;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.footer-info .callback .button.telegram:hover {
  background-color: #00abee;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.info-black {
  color: #313131 !important;
  font-weight: bold;
  font-size: 1.4rem;
}

.footer-social {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding: 7px 0;
  margin: 0 10%;
  border-radius: 10px;
  background-color: #FAFAFA;
}
.footer-social div {
  display: flex;
  min-width: -moz-max-content;
  min-width: max-content;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  color: #313131;
  font-weight: normal;
  cursor: default;
}
.footer-social div > img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 40px;
  width: 40px;
  transition: all 0.1s linear 0s;
}
.footer-social a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-social a img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 3.5rem;
  height: 3.5rem;
  transition: all 0.1s linear 0s;
}
.footer-social a:hover img {
  filter: saturate(200%);
  transition: all 0.1s linear 0s;
}

.footer-policy {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.footer-policy a {
  font-size: 1.4rem;
  color: #313131;
  transition: all 0.1s linear 0s;
}
.footer-policy a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.footer-copyright {
  padding: 10px 0;
  text-align: center;
  background-color: #5067E3;
  font-size: 1.4rem;
  color: #ffffff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* -- << Cookies >> -- */
.cookies-alert {
  display: flex;
  align-items: center;
  gap: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 20px;
  background-color: #ffffff;
  box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.2509803922);
  z-index: 30;
  transform: translateY(100%);
  transition: all 0.3s linear 0s;
}

.cookies-alert.show {
  transform: translateY(0);
  transition: all 0.3s linear 0s;
}

.cookies-close {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 2rem;
  color: #979797;
  transition: all 0.1s linear 0s;
}
.cookies-close:hover {
  color: #313131;
  transition: all 0.1s linear 0s;
}

.cookies-text {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1.4rem;
  color: #313131;
}
.cookies-text a {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.cookies-text a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.cookies-text img {
  width: 45px;
  -o-object-fit: contain;
     object-fit: contain;
}

.cookies-actions {
  margin-left: auto;
  min-width: -moz-max-content;
  min-width: max-content;
}
.cookies-actions button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.cookies-actions button:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.cookies-actions button {
  width: 15vw;
  padding: 10px 30px;
  font-size: 1.6rem;
}

/* -- << Button-Up >> -- */
.button-up {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  right: 15px;
  bottom: 50px;
  width: 45px;
  height: 45px;
  font-size: 2.8rem;
  border-radius: 50%;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  z-index: 20;
}
.button-up.len {
  background-color: #6B80F5;
}
.button-up.ecopolis {
  background-color: #B2BF11;
}
.button-up i {
  padding-top: 10px;
  height: inherit;
  width: inherit;
}
.button-up:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}

/* --# Errors Pages #-- */
.errorpage-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
}
.errorpage-header img {
  width: 13em;
  -o-object-fit: contain;
     object-fit: contain;
}
.errorpage-header h1 {
  font-size: 3.5rem;
}

.errorpage-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  margin-top: 10%;
}
.errorpage-body h2 {
  text-align: center;
  color: #5067E3;
  font-size: 7rem;
}
.errorpage-body h5 {
  text-align: center;
  color: #313131;
  font-size: 2.5rem;
  font-weight: normal;
}
.errorpage-body a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.errorpage-body a:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.errorpage-body a {
  font-size: 1.8rem;
  padding: 12px 20px;
  margin-top: 20px;
}

.error-field input {
  border-color: #c53e3e !important;
  color: #c53e3e !important;
}
.error-field input:hover {
  color: #313131 !important;
}
.error-field input:focus {
  color: #313131 !important;
}

.policy-text.ecopolis a {
  color: #B27237;
}
.policy-text.ecopolis a:hover {
  color: #B27237;
  transition: all 0.1s linear 0s;
}
.policy-text h3 {
  color: #313131;
  margin: 17px 0;
  cursor: pointer;
}
.policy-text p {
  margin: 20px 0;
  font-size: 1.6rem;
}
.policy-text .policy-list, .policy-text .policy-sublist {
  margin-left: 20px;
  transition: all 0.1s linear 0s;
}
.policy-text .policy-list li:first-child, .policy-text .policy-sublist li:first-child {
  margin-top: 0;
}
.policy-text .policy-list li, .policy-text .policy-sublist li {
  font-size: 1.6rem;
  margin: 15px 0;
}
.policy-text .black {
  font-weight: bold;
}
.policy-text a {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.policy-text a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.policy-text-collapse {
  position: relative;
  border-top: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
}
.policy-text-collapse.ecopolis a {
  color: #B27237;
}
.policy-text-collapse.ecopolis a:hover {
  color: #B27237;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse h3 {
  color: #313131;
  margin: 17px 0;
  cursor: pointer;
}
.policy-text-collapse .policy-section {
  display: none;
}
.policy-text-collapse .policy-list, .policy-text-collapse .policy-sublist {
  margin-left: 20px;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse .policy-list li:first-child, .policy-text-collapse .policy-sublist li:first-child {
  margin-top: 0;
}
.policy-text-collapse .policy-list li, .policy-text-collapse .policy-sublist li {
  font-size: 1.6rem;
  margin: 15px 0;
}
.policy-text-collapse .policy-sublist {
  margin-top: 15px;
}
.policy-text-collapse .black {
  font-weight: bold;
}
.policy-text-collapse .policy-arrow {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 2rem;
  color: #979797;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse .policy-arrow.turn {
  transform: rotate(180deg);
  transition: all 0.1s linear 0s;
}
.policy-text-collapse a {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}
.policy-text-collapse a:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.policy-text-collapse:last-child {
  margin-bottom: 50px;
}

.delivery-way-block {
  display: flex;
  margin-right: 30px;
}

.delivery-way {
  flex-flow: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 10px 5px 10px 5px;
}

.status-point {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.status-point .text {
  text-align: left;
  font-size: 1.6rem;
  color: #313131;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.status-point .text:hover {
  font-weight: bold;
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.status-input {
  width: -moz-min-content !important;
  width: min-content !important;
  position: absolute;
  left: -20px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.status-input:checked ~ .point {
  background-color: #5067E3;
  transition: all 0.1s linear 0s;
}

.status-input:checked ~ .text {
  font-weight: bold;
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.status-input:checked ~ .way:before {
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}

.status-input:checked ~ .check {
  background-color: #5067E3;
  border-color: #5067E3;
  transition: all 0.1s linear 0s;
}

.point {
  position: relative;
  right: 0;
  width: 27px;
  height: 27px;
  background-color: #D5E7FB;
  border-radius: 50%;
  border: 5px solid white;
  position: relative;
  z-index: 2;
}

.way {
  position: absolute;
  left: 12.5px;
}
.way:before {
  content: "";
  display: block;
  height: 50px;
  width: 1px;
  border-left: 2px dotted #D5E7FB;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.status-point:first-child .way:before {
  height: 25px;
  transform: translateY(0px);
}

.status-point:last-child .way:before {
  height: 25px;
  transform: translateY(-25px);
}

.chunk-product-follow {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  border-radius: 10px;
  color: #313131;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2509803922);
  margin: 5px;
  transition: all 0.1s linear 0s;
}
.chunk-product-follow .title {
  top: 40%;
  right: 0;
  left: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.chunk-product-follow .title h3 {
  color: #ffffff;
  padding: 0 30px;
}
.chunk-product-follow .title p {
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  font-size: 1.7rem;
}
.chunk-product-follow img {
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  min-height: 120px;
  max-height: 220px;
  margin: 0 auto;
}
.chunk-product-follow a {
  display: flex;
  flex-direction: column;
  color: #313131;
  height: 100%;
}
.chunk-product-follow h5 {
  margin: 0 10px;
}
.chunk-product-follow p {
  text-align: justify;
  font-size: 1.2rem;
}

.sales {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sales-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 10px 0;
  text-align: right;
}
.sales-info h1 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 3.4rem;
}
.sales-info h2, .sales-info h3, .sales-info h4 {
  font-family: "Mulish", sans-serif;
}
.sales-info h2 {
  color: #313131;
  margin-bottom: 10px;
  font-size: 2.2rem;
}
.sales-info h4 {
  color: #979797;
  margin-bottom: 10px;
  font-size: 2rem;
}
.sales-info h3 {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: bold;
}
.sales-info .price i {
  margin-left: 10px;
}

.sales-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
}
.sales-chart progress {
  border: none;
  height: 20px;
  background-color: transparent;
  color: #5067E3;
}
.sales-chart progress::-webkit-progress-value {
  background: #6F7DBC;
}
.sales-chart progress::-moz-progress-bar {
  background: #6f7dbc;
}

/* Mobile Adaptation */
/* Modile Header */
.mobile-dummy {
  margin: 0;
}

.header-mobile {
  display: none;
  width: inherit;
  max-width: inherit;
}
.header-mobile.len .header-menu .header-logo h1 {
  color: #6B80F5;
}
.header-mobile.len .header-menu .header-logo span {
  color: #848fbd;
}
.header-mobile.len .header-menu .search-mobile-button i {
  color: #6B80F5;
}
.header-mobile.ecopolis .header-menu .header-logo h1 {
  color: #B27237;
}
.header-mobile.ecopolis .header-menu .header-logo span {
  color: #A58467;
}
.header-mobile.ecopolis .header-menu .search-mobile-button i {
  color: #B27237;
}

.header-mobile nav {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 30px;
  min-height: 58px;
}
.header-mobile nav .header-logo {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-template-rows: auto 15px;
}
.header-mobile nav .header-logo h1 {
  font-size: 2.4rem;
}
.header-mobile nav .header-logo img {
  width: 45px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.header-mobile nav #mobile-menu-close {
  display: none;
}
.header-mobile nav .mobile-menu-bars {
  margin-right: 5px;
  color: #CACACA;
  font-size: 2.5rem;
  cursor: pointer;
}
.header-mobile nav .search-mobile-button {
  margin-left: auto;
  font-size: 2rem;
  color: #5067E3;
  cursor: pointer;
}

.header-mobile.header-search.len .header-logo h2 {
  color: #6B80F5;
}
.header-mobile.header-search.ecopolis .header-logo h2 {
  color: #B27237;
}

.header-mobile.header-search nav {
  justify-content: center;
}
.header-mobile.header-search nav .header-logo {
  margin-left: auto;
}
.header-mobile.header-search nav .header-logo h2 {
  font-size: 2rem;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #5067E3;
}
.header-mobile.header-search nav .dummy {
  margin-left: auto;
}

/* Mobile Search */
.mobile-search {
  padding-top: 75px;
  padding-bottom: 10px;
  border-bottom: 1px solid #CACACA;
}
.mobile-search.len .search input:hover {
  border-color: #5067E3 !important;
}
.mobile-search.len .search input:focus {
  border-color: #5067E3 !important;
}
.mobile-search.len .search button {
  color: #5067E3;
}
.mobile-search.ecopolis .search input:focus {
  border-color: #B2BF11 !important;
}
.mobile-search.ecopolis .search input:hover {
  border-color: #B2BF11 !important;
}
.mobile-search.ecopolis .search button {
  color: #B2BF11;
}
.mobile-search .search-offers {
  text-align: center;
  margin: 15px auto 5px auto;
  font-size: 1.6rem;
  color: #979797;
}
.mobile-search .mobile-search-show {
  text-align: center;
  margin: 25px auto 20px auto;
}
.mobile-search .mobile-search-show a {
  color: #979797;
}

/* Mobile Menu */
.mobile-menu {
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: inherit;
  max-width: inherit;
  padding: 70px 15px 50px 15px;
  overflow: scroll;
  height: 100vh;
  background-color: #ffffff;
  z-index: 65;
  display: none;
}
.mobile-menu.len .mobile-menu-header h1 {
  color: #6B80F5;
}
.mobile-menu.len .menu-block a.button {
  background-color: #EDF0FA;
  color: #5067E3;
}
.mobile-menu.ecopolis .mobile-menu-header h1 {
  color: #B27237;
}
.mobile-menu.ecopolis .menu-block a.button {
  background-color: #F2F5D9;
  color: #B2BF11;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 15px;
}
.mobile-menu-header img {
  width: 70px;
  -o-object-fit: contain;
     object-fit: contain;
}
.mobile-menu-header h1 {
  font-size: 2.2rem;
  color: #5067E3;
}
.mobile-menu-header h5 {
  font-size: 1.8rem;
  font-weight: normal;
  color: #979797;
}

.mobile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 15px 0;
  padding-left: 10px;
  border-top: 1px solid #CACACA;
  border-bottom: 1px solid #CACACA;
}
.mobile-menu-list li a {
  display: inline-block;
  color: #313131;
  font-size: 2rem;
  font-weight: normal;
}
.mobile-menu-list .submenu-link {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu-list .submenu-link .submenu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}
.mobile-menu-list .submenu-link .submenu > li {
  display: flex;
  position: relative;
  border-radius: 10px;
  height: 130px;
}
.mobile-menu-list .submenu-link .submenu > li img {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  border-radius: 10px;
}
.mobile-menu-list .submenu-link .submenu > li a {
  width: 100%;
  padding: 20px;
  color: #ffffff;
  font-weight: bold;
}
.mobile-menu-list .submenu-link .submenu > li.blue {
  background-color: #5A6EB4;
  background: linear-gradient(90deg, rgb(90, 110, 180) 55%, rgba(90, 110, 180, 0) 100%);
}
.mobile-menu-list .submenu-link .submenu > li.violet {
  background: #584D71;
  background: linear-gradient(90deg, rgb(88, 77, 113) 55%, rgba(88, 77, 113, 0) 100%);
}
.mobile-menu-list .submenu-link .submenu > li.orange {
  background: #B06933;
  background: linear-gradient(90deg, rgb(176, 105, 51) 55%, rgba(176, 105, 51, 0) 100%);
}
.mobile-menu-list .submenu-link .submenu > li.green {
  background: #51714D;
  background: linear-gradient(90deg, rgb(81, 113, 77) 55%, rgba(81, 113, 77, 0) 100%);
}

.mobile-menu-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  padding-bottom: 50px;
}

.menu-block {
  text-align: center;
}
.menu-block h5 {
  font-size: 1.6rem;
  color: #979797;
  margin: 5px 0 15px 0;
}
.menu-block ul {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.menu-block li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-block li span {
  font-size: 1.4rem;
  color: #979797;
}
.menu-block li a img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.menu-block a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F3F3F3;
  color: #5067E3;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.menu-block a.button i {
  font-size: 2.2rem;
}

/* Modile Navigation (bottom) */
.mobile-nav {
  display: none;
  width: inherit;
  max-width: inherit;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  padding: 0 30px;
  z-index: 70;
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.1);
}

.mobile-nav-list {
  display: flex;
  justify-content: space-between;
}
.mobile-nav-list.len > li.active-menu a {
  color: #5067E3;
}
.mobile-nav-list.len .main-nav.active-menu a {
  color: #12154C;
}
.mobile-nav-list.len .main-nav.active-menu a i {
  color: #5067E3;
}
.mobile-nav-list.ecopolis > li.active-menu a {
  color: #B2BF11;
}
.mobile-nav-list.ecopolis .main-nav.active-menu a {
  color: #34190E;
}
.mobile-nav-list.ecopolis .main-nav.active-menu a i {
  color: #B2BF11;
}
.mobile-nav-list li a {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  position: relative;
  gap: 3px;
  font-size: 1.4rem;
  color: #979797;
  padding: 10px 0px;
}
.mobile-nav-list li a i {
  color: inherit;
  font-size: 2rem;
}
.mobile-nav-list li.main-nav {
  width: 50px;
  position: relative;
}
.mobile-nav-list li.main-nav a {
  position: relative;
  width: 50px;
  padding: 0;
}
.mobile-nav-list li.main-nav a span {
  position: absolute;
  display: block;
  top: 30px;
}
.mobile-nav-list li.main-nav::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0px -10px 5px -5px rgba(0, 0, 0, 0.1);
}
.mobile-nav-list li.main-nav i {
  font-size: 3rem;
  position: absolute;
  top: -7px;
}
.mobile-nav-list .cart .cart-items {
  top: 2px;
  right: 2px;
  font-size: 1.2rem;
  font-weight: 600;
}

.button-mobile-wrap {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  position: fixed;
  left: 0;
  bottom: 55px;
  width: 100vw;
  padding: 5px 5px 10px 5px;
  background-color: #ffffff;
  z-index: 60;
}

.button-mobile-wrap-top {
  display: none;
  flex-direction: column;
  gap: 5px;
  position: fixed;
  left: 0;
  bottom: 55px;
  width: 100vw;
  padding: 5px 5px 10px 5px;
  background-color: #ffffff;
  z-index: 60;
}

.button-action-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  outline: none;
  width: 50vw;
  border: 2px solid transparent;
  padding: 20px 20px;
  font-size: 2rem;
  border-radius: 40px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #5067E3;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.button-action-mobile:hover {
  transition: all 0.1s linear 0s;
  filter: brightness(1.1);
}
.button-action-mobile {
  text-align: center;
  padding: 15px 10px;
  margin: 0 10px;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: 600;
  width: 100%;
}
.button-action-mobile span {
  margin-right: 5px;
  font-weight: bold;
}
.button-action-mobile.alternate {
  background-color: #ffffff;
  color: #5067E3;
  border-color: #5067E3;
}
.button-action-mobile.alternate:hover {
  filter: none;
  color: #5067E3;
  background-color: #ffffff;
}
.button-action-mobile.wb {
  background-color: #b04efc;
  margin: 0;
  padding: 10px 5px;
  font-size: 1.6rem;
}
.button-action-mobile.wb:hover {
  filter: brightness(1.1);
  background-color: #b04efc;
}
.button-action-mobile.ozon {
  background-color: #005bff;
  margin: 0;
  padding: 10px 5px;
  font-size: 1.6rem;
}
.button-action-mobile.ozon:hover {
  filter: brightness(1.1);
  background-color: #005bff;
}
.button-action-mobile.yandex {
  background-color: #fce000;
  color: #222;
  margin: 0;
  padding: 10px 5px;
  font-size: 1.6rem;
}
.button-action-mobile.yandex:hover {
  filter: brightness(1.1);
  background-color: #fce000;
  color: #222;
}
.button-action-mobile.disabled {
  background-color: #ffffff;
  color: #979797;
  border-color: #979797;
  cursor: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.button-action-mobile.disabled:hover {
  filter: none;
  color: #979797;
  background-color: #ffffff;
}
.button-action-mobile:hover {
  filter: none;
  color: #ffffff;
  background-color: #5067E3;
}

/* Modile Footer */
.footer-mobile {
  width: inherit;
  max-width: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  display: none;
}
.footer-mobile.len .footer-logo h1 {
  color: #6B80F5;
}
.footer-mobile.len .footer-mail {
  color: #5067E3;
  background-color: #EDF0FA;
}
.footer-mobile.len .footer-copyright {
  background-color: #12154C;
}
.footer-mobile.ecopolis .footer-logo h1 {
  color: #B27237;
}
.footer-mobile.ecopolis .footer-mail {
  color: #B2BF11;
  background-color: #F2F5D9;
}
.footer-mobile.ecopolis .footer-copyright {
  background-color: #34190E;
}
.footer-mobile .footer-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  margin: 15px 15px 20px 15px;
}
.footer-mobile .footer-logo img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 90px;
}
.footer-mobile .footer-logo h1 {
  font-size: 2rem;
  color: #5067E3;
  margin: 10px 0;
}
.footer-mobile .footer-logo h5 {
  font-size: 1.6rem;
  font-weight: normal;
  color: #979797;
}
.footer-mobile .footer-mail {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 15px;
  margin: 0 15px;
  color: #5067E3;
  background-color: #EDF0FA;
  border-radius: 10px;
}
.footer-mobile .footer-mail i {
  font-size: 2rem;
}
.footer-mobile .footer-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background-color: #FFFFFF;
  padding: 5px 15px;
  border-radius: 10px;
}
.footer-mobile .footer-block.grey {
  background-color: #FAFAFA;
}
.footer-mobile .footer-block h2 {
  font-size: 1.6rem;
  color: #313131;
}
.footer-mobile .footer-block h5 {
  font-size: 1.4rem;
  color: #979797;
}
.footer-mobile .footer-block > ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.footer-mobile .footer-block > ul li {
  display: block;
  width: 100%;
}
.footer-mobile .footer-block > ul.links li {
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
}
.footer-mobile .footer-block > ul.links li a {
  display: block;
  min-width: -moz-max-content;
  min-width: max-content;
  font-size: 1.4rem;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px 10px;
  color: #313131;
  font-weight: normal;
}
.footer-mobile .footer-block > ul.text li {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: #979797;
  margin: 5px 0;
}
.footer-mobile .footer-block > ul.text li a {
  display: inline-block;
  font-weight: normal;
  color: #313131;
}
.footer-mobile .footer-block > ul.text li a i {
  padding: 0 5px;
}
.footer-mobile .footer-copyright {
  font-size: 1.6rem;
  padding: 15px;
  height: 110px;
  margin-top: 10px;
}

.footer-account .footer-copyright {
  margin: 0;
  height: 100px;
  padding: 10px;
}

/* Mobile Categories */
.mobile-categories-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 10px 10px;
  padding-top: 20px;
}

.category-area {
  position: relative;
  height: 150px;
  width: 100%;
  padding: 15px 15px;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2509803922);
}
.category-area.set1 {
  background-color: #EAF5FF;
}
.category-area.set2 {
  background-color: #FEF2E0;
}
.category-area.set3 {
  background-color: #F7EDE3;
}
.category-area.set4 {
  background-color: #F9FDDF;
}
.category-area.set5 {
  background-color: #FFEDE2;
}
.category-area.set6 {
  background-color: #F7ECFF;
}
.category-area h5 {
  font-size: 1.8rem;
  color: #313131;
}
.category-area img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right;
     object-position: right;
  border-radius: 10px;
  z-index: -1;
}

.cart-gifts {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  gap: 10px;
  padding: 20px;
  border-radius: 5px;
  border-bottom: 1.5px solid #e0e0e0;
  cursor: pointer;
}
.cart-gifts img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: pointer;
}
.cart-gifts h2 {
  margin-left: 20px;
  cursor: pointer;
}
.cart-gifts span {
  font-size: 1.8rem;
  margin-left: auto;
  color: #313131;
  cursor: pointer;
}
.cart-gifts .action-cancel { /* Крестик справа вверху */
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  color: #979797;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  z-index: 20;
}
.cart-gifts .action-cancel:hover {
  color: #5067E3;
  transition: all 0.1s linear 0s;
}

.gifts-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 250px));
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.catalog-action.header-actions {
  margin: 0 0 20px 0;
}

.main-brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px;
  border-radius: 20px;
  width: 100%;
  cursor: pointer;
}
.brand-block img {
  height: 150px;
  -o-object-fit: contain;
     object-fit: contain;
}
.brand-block h2 {
  font-size: 2.8rem;
  font-weight: bold;
  margin: 30px auto 20px auto;
}
.brand-block h5 {
  color: #313131;
  font-size: 2rem;
  font-weight: 600;
  margin: 20px 30px;
}
.brand-block.vasileva {
  background-color: #EAF5FF;
}
.brand-block.vasileva h2 {
  color: #5067E3;
}
.brand-block.ecopolis {
  background-color: #F7EDE3;
}
.brand-block.ecopolis h2 {
  color: #5C4735;
}

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
  border-radius: 40px;
  margin: 10px auto 15px auto;
  font-size: 2rem;
  width: 50vw;
  font-weight: bold;
  transition: all 0.1s linear 0s;
}
.cta-button.len {
  background-color: #5067E3;
  color: #ffffff;
}
.cta-button.len:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.cta-button.ecopolis {
  background-color: #B27237;
  color: #ffffff;
}
.cta-button.ecopolis:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.cta-button.disabled {
  background-color: #CACACA;
  color: #979797;
  border-color: #CACACA;
  cursor: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cta-button.disabled:hover {
  filter: none;
  color: #979797;
  background-color: #CACACA;
}

.cta-button-subtext {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  font-size: 1.4rem;
  color: #12154C;
  line-height: 1;
  width: 55vw;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
  margin: 0 auto 20px auto;
}

.banner {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 30px 7% 20px 7%;
}
.banner.len h1 {
  color: #12154C;
}
.banner.len h2 {
  color: #6B80F5;
}
.banner.len p {
  color: #515874;
}
.banner.len .main-button {
  background: linear-gradient(270deg, #6F82EF, #5067E3 70%);
}
.banner.len .main-button:hover {
  background: linear-gradient(270deg, #5067E3, #5067E3 100%);
}
.banner.len .advantages .advantage-footer {
  background-color: #EDF0FA;
}
.banner.len .advantages .advantage-block {
  background-color: #EDF0FA;
}
.banner.len .advantages h5 {
  color: #12154C;
}
.banner.len .advantages span.text {
  color: #313131;
  color: #12154C;
}
.banner.len .advantages .icon {
  color: #5067E3;
  background-color: #EDF0FA;
}
.banner.ecopolis h1 {
  color: #34190E;
}
.banner.ecopolis h2 {
  color: #B27237;
}
.banner.ecopolis p {
  color: #76635C;
}
.banner.ecopolis .main-button {
  background: linear-gradient(270deg, #B27237, #B27237 70%);
}
.banner.ecopolis .main-button:hover {
  transition: all 0.1s linear 0s;
  background: linear-gradient(270deg, #B27237, #B27237 100%);
}
.banner.ecopolis .advantages .advantage-footer {
  background-color: #F2F5D9;
}
.banner.ecopolis .advantages .advantage-block {
  background-color: #F2F5D9;
}
.banner.ecopolis .advantages h5 {
  color: #34190E;
}
.banner.ecopolis .advantages span.text {
  color: #313131;
  color: #34190E;
}
.banner.ecopolis .advantages .icon {
  color: #B2BF11;
  background-color: #F2F5D9;
}
.banner .banner-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  cursor: default;
}
.banner .banner-content h1 {
  font-size: 4.6rem;
  font-weight: bold;
  line-height: 1.1;
}
.banner .banner-content h2 {
  font-size: 2rem;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
}
.banner .banner-content p {
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: normal;
  font-family: "Mulish", sans-serif;
}
.banner .banner-content span {
  font-size: 1.6rem;
  display: block;
  margin-top: 5px;
  line-height: 1.3;
  font-weight: normal;
  font-family: "Mulish", sans-serif;
}
.banner .banner-content .main-button {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  outline: none;
  margin: 20px 0 10px 0;
  padding: 20px 30px;
  font-size: 2rem;
  border-radius: 100px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.banner .banner-content .main-button i {
  font-size: 5rem;
}
.banner .banner-content .main-button:hover {
  transition: all 0.1s linear 0s;
}
.banner.offer .banner-content {
  width: 60%;
}
.banner.offer .banner-image {
  position: absolute;
  top: 20%;
  height: 100%;
  right: -10px;
  bottom: 0;
  width: 30vw;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  z-index: 1;
}
.banner.direction .banner-image {
  position: absolute;
  top: 10%;
  height: 100%;
  right: -10px;
  bottom: 0;
  width: 40vw;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  z-index: 1;
}
.banner.main .banner-image {
  position: absolute;
  top: 20px;
  height: 100%;
  right: 0;
  max-width: 37vw;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  z-index: 1;
}
.banner .advantages {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
  margin: 7% 0 0 0;
}
.banner .advantage-footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 80%;
  border-radius: 40px;
  z-index: 2;
}
.banner .advantage-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  gap: 10px;
  padding: 30px 10px 20px 10px;
  border-radius: 40px;
  width: 100%;
  z-index: 3;
  cursor: default;
}
.banner .advantage-block h5 {
  font-size: 1.75rem;
  font-weight: bold;
}
.banner .advantage-block span.text {
  font-size: 1.6rem;
  font-weight: 600;
  text-wrap: wrap;
}
.banner .advantage-block .icon {
  position: absolute;
  top: -60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 7px solid #ffffff;
  width: 80px;
  height: 80px;
  font-size: 4rem;
}

.carousel {
  display: flex;
  flex-direction: column;
  margin: 2% 0 4% 0;
  padding: 20px 20px;
  border-radius: 30px;
}
.carousel.len {
  background-color: #F8F9FE;
}
.carousel.len .carousel-types.carousel-slider-nav {
  color: #222;
}
.carousel.len .carousel-types.carousel-slider-nav li.slick-current.slick-active {
  border-color: #5067E3;
  color: #5067E3;
}
.carousel.ecopolis {
  background-color: #FEFBF8;
}
.carousel.ecopolis .carousel-types.carousel-slider-nav {
  color: #76635C;
}
.carousel.ecopolis .carousel-types.carousel-slider-nav li.slick-current.slick-active {
  border-color: #34190E;
  color: #34190E;
}

.carousel-types.carousel-slider-nav {
  display: flex;
  background-color: #ffffff;
  border-radius: 20px;
}
.carousel-types.carousel-slider-nav li {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 5px 15px;
  font-size: 1.6rem;
  min-height: 60px;
  margin: 0 5px;
  font-weight: bold;
  border: 2px solid transparent;
  border-radius: 20px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.1s ease-out 0s;
}
.carousel-types.carousel-slider-nav li img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.carousel-types.carousel-slider-nav li i {
  font-size: 4rem;
  color: inherit;
}
.carousel-types.carousel-slider-nav li.slick-current.slick-active {
  border-color: #5067E3;
  color: #5067E3;
  transition: all 0.1s ease-out 0s;
}

.carousel-product.len {
  background-color: #F9FBFC;
}
.carousel-product.len .carousel-product-info > h2 {
  text-shadow: 0 0 0.5px currentColor, 0 0 0.5px currentColor;
  color: #12154C;
}
.carousel-product.len .carousel-product-info > h5 {
  color: #12154C;
}
.carousel-product.len .carousel-product-info > h3 {
  color: #12154C;
}
.carousel-product.len .carousel-product-usage .product-usage {
  color: #12154C;
}
.carousel-product.len .carousel-product-usage .product-usage::after {
  content: "";
  border-left: 1px solid #e6eaf3;
}
.carousel-product.len .carousel-product-usage .product-usage i {
  color: #5067E3;
}
.carousel-product.len .carousel-product-advantages .product-usage {
  color: #12154C;
}
.carousel-product.len .carousel-product-advantages .product-usage::after {
  border-left: 1px solid #e6eaf3;
}
.carousel-product.len .carousel-product-advantages .product-usage i {
  color: #5067E3;
}
.carousel-product.len .carousel-product-features .feature-item {
  background-color: #F5F6FD;
}
.carousel-product.len .carousel-product-features .feature-item i {
  color: #5067E3;
}
.carousel-product.len .carousel-product-features .feature-item h5 {
  color: #5067E3;
}
.carousel-product.len .carousel-product-button {
  background-color: #ffffff;
  color: #5067E3;
  border: 1px solid #5067E3;
}
.carousel-product.ecopolis {
  background-color: #FEFBF8;
}
.carousel-product.ecopolis .carousel-product-info > h2 {
  text-shadow: 0 0 0.5px currentColor, 0 0 0.5px currentColor;
  color: #34190E;
}
.carousel-product.ecopolis .carousel-product-info > h5 {
  color: #34190E;
}
.carousel-product.ecopolis .carousel-product-info > h3 {
  color: #34190E;
}
.carousel-product.ecopolis .carousel-product-usage .product-usage {
  color: #34190E;
}
.carousel-product.ecopolis .carousel-product-usage .product-usage::after {
  content: "";
  border-left: 1px solid #e6eaf3;
}
.carousel-product.ecopolis .carousel-product-usage .product-usage i {
  color: #B27237;
}
.carousel-product.ecopolis .carousel-product-advantages .product-usage {
  color: #34190E;
}
.carousel-product.ecopolis .carousel-product-advantages .product-usage::after {
  border-left: 1px solid #f3ece6;
}
.carousel-product.ecopolis .carousel-product-advantages .product-usage i {
  color: #B27237;
}
.carousel-product.ecopolis .carousel-product-features .feature-item {
  background-color: #f8f2ec;
}
.carousel-product.ecopolis .carousel-product-features .feature-item i {
  color: #B27237;
}
.carousel-product.ecopolis .carousel-product-features .feature-item h5 {
  color: #B27237;
}
.carousel-product.ecopolis .carousel-product-button {
  background-color: #ffffff;
  color: #B27237;
  border: 1px solid #B27237;
}

.carousel-product {
  position: relative;
  display: flex !important;
  flex-direction: column;
  padding: 20px;
  border-radius: 40px;
  margin-top: 10px;
}
.carousel-product .carousel-product-info {
  width: 70%;
  z-index: 5;
}
.carousel-product .carousel-product-info > h2 {
  font-size: 5rem;
  text-shadow: 0 0 0.5px currentColor, 0 0 0.5px currentColor;
  color: #12154C;
  font-weight: bolder;
  font-family: "Mulish", sans-serif;
  margin: 30px 0 20px 0;
  text-align: left;
}
.carousel-product .carousel-product-info > h5 {
  font-size: 1.7rem;
  font-weight: normal;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  line-height: 1.3;
  text-align: left;
  width: 70%;
}
.carousel-product .carousel-product-info > h3 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #12154C;
  margin: 30px 0 20px 0;
  text-align: left;
}
.carousel-product .carousel-product-usage {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 20px;
}
.carousel-product .carousel-product-usage .product-usage {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
  color: #12154C;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
}
.carousel-product .carousel-product-usage .product-usage::after {
  content: "";
  border-left: 1px solid #e6eaf3;
  height: 100%;
  width: 1px;
  position: absolute;
  right: -10px;
}
.carousel-product .carousel-product-usage .product-usage i {
  font-size: 3.4rem;
  color: #5067E3;
}
.carousel-product .carousel-product-usage li.product-usage:last-child::after {
  content: none;
}
.carousel-product .carousel-product-advantages {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 20px;
  max-width: 85%;
  margin: 30px 0;
}
.carousel-product .carousel-product-advantages .product-usage {
  display: flex;
  flex-direction: row;
  position: relative;
  gap: 10px;
  color: #12154C;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
}
.carousel-product .carousel-product-advantages .product-usage::after {
  content: "";
  border-left: 1px solid #e6eaf3;
  height: 100%;
  width: 1px;
  position: absolute;
  right: -10px;
}
.carousel-product .carousel-product-advantages .product-usage i {
  font-size: 4rem;
  color: #5067E3;
}
.carousel-product .carousel-product-advantages li.product-usage:last-child::after {
  content: none;
}
.carousel-product .carousel-product-features {
  display: grid;
  align-items: flex-start;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 40px;
}
.carousel-product .carousel-product-features .feature-item {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  padding: 20px 15px;
  background-color: #F5F6FD;
  border-radius: 10px;
  gap: 0 10px;
  height: 100%;
}
.carousel-product .carousel-product-features .feature-item i {
  font-size: 5rem;
  color: #5067E3;
  grid-column: 1;
  grid-row: 1/3;
  align-self: center;
}
.carousel-product .carousel-product-features .feature-item h5 {
  font-size: 1.4rem;
  color: #5067E3;
  font-weight: bold;
  text-align: left;
  grid-column: 2;
  grid-row: 1;
  text-wrap: wrap;
}
.carousel-product .carousel-product-features .feature-item p {
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: left;
  grid-column: 2;
  grid-row: 2;
  text-wrap: wrap;
}
.carousel-product .carousel-product-preview {
  position: absolute;
  top: 0;
  right: 0;
  width: 32vw;
  height: 85%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 1;
}
.carousel-product .carousel-product-button {
  position: absolute;
  right: 5%;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  gap: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #5067E3;
  border: 1px solid #5067E3;
  border-radius: 40px;
  padding: 10px 20px;
  z-index: 5;
}
.carousel-product .carousel-product-button i {
  font-size: 2rem;
}

.direction-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 20px;
}

.direction-block-wrap {
  position: relative;
  height: 500px;
  border-radius: 20px;
}
.direction-block-wrap::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 380px;
  background-color: #d5d5d6;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 7;
}
.direction-block-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320px;
  z-index: 5;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.direction-block-wrap.blue::before {
  background-color: #5A6EB4;
  background: linear-gradient(0deg, rgb(90, 110, 180) 55%, rgba(90, 110, 180, 0) 100%);
}
.direction-block-wrap.blue .direction-block .icon {
  background-color: #CBD7FA;
  color: #1A3ABE;
}
.direction-block-wrap.blue .direction-block button {
  color: #1A3ABE;
}
.direction-block-wrap.violet::before {
  background: #584D71;
  background: linear-gradient(0deg, rgb(88, 77, 113) 55%, rgba(88, 77, 113, 0) 100%);
}
.direction-block-wrap.violet .direction-block .icon {
  background-color: #D0CDFF;
  color: #451E89;
}
.direction-block-wrap.violet .direction-block button {
  color: #451E89;
}
.direction-block-wrap.orange::before {
  background: #B06933;
  background: linear-gradient(0deg, rgb(176, 105, 51) 55%, rgba(176, 105, 51, 0) 100%);
}
.direction-block-wrap.orange .direction-block .icon {
  background-color: #FDCFAE;
  color: #AD4F32;
}
.direction-block-wrap.orange .direction-block button {
  color: #AD4F32;
}
.direction-block-wrap.green::before {
  background: #51714D;
  background: linear-gradient(0deg, rgb(81, 113, 77) 55%, rgba(81, 113, 77, 0) 100%);
}
.direction-block-wrap.green .direction-block .icon {
  background-color: #E4FAE1;
  color: #348B3A;
}
.direction-block-wrap.green .direction-block button {
  color: #348B3A;
}

.direction-block {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 10;
  border-radius: 20px;
  padding: 60% 20px 20px 20px;
}
.direction-block h5 {
  font-size: 2.6rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
  line-height: 1.1;
}
.direction-block p {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
}
.direction-block .icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 30%;
  left: 30px;
  padding: 5px;
  width: 80px;
  height: 80px;
  font-size: 5rem;
  border-radius: 50%;
}
.direction-block button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;
  gap: 10px;
  border-radius: 40px;
  padding: 15px 10px 15px 20px;
  font-size: 1.6rem;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
  width: 70%;
  margin-top: auto;
  cursor: pointer;
}
.direction-block button i {
  font-size: 2rem;
}

.section-production {
  display: flex;
  flex-direction: column;
  padding: 30px 30px;
  background-color: #F4F6FB;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  row-gap: 20px;
  margin: 3% 0;
  border-radius: 30px;
}
.section-production h2 {
  font-size: 3.2rem;
  font-weight: bolder;
  color: #12154C;
  font-family: "Montserrat Alternates", sans-serif;
  margin: 2% 0 0 0;
}

.section-production.main .production-company {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 5%;
}
.section-production.main .production-company h2 {
  font-size: 3.2rem;
  line-height: 1;
  text-shadow: 0 0 0.2px currentColor, 0 0 0.2px currentColor;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.section-production.main .production-company .production-company-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.section-production.main .production-company .production-company-info h5 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.section-production.main .production-company .production-company-info p {
  font-size: 2rem;
  text-align: left;
  line-height: 1.4;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}
.section-production.main .production-company .production-company-images {
  display: grid;
  grid-template-columns: 60% auto;
  grid-template-rows: repeat(2, 20vh);
  gap: 10px;
}
.section-production.main .production-company .production-company-images img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}
.section-production.main .production-company .production-company-images img:first-child {
  grid-column: 1;
  grid-row: 1/3;
}

.section-production.direction .production-company {
  display: grid;
  grid-template-columns: 45% 40%;
  justify-content: space-between;
  gap: 15%;
}
.section-production.direction .production-company .production-company-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.section-production.direction .production-company .production-company-info h2 {
  font-size: 3.2rem;
  line-height: 1;
  text-shadow: 0 0 0.2px currentColor, 0 0 0.2px currentColor;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.section-production.direction .production-company .production-company-info p {
  font-size: 1.8rem;
  line-height: 1.3;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  text-align: left;
}
.section-production.direction .production-company .production-company-image {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 250px;
  display: block;
  border-radius: 10px;
}

.production-operations {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.production-operation-block {
  display: grid;
  grid-template-columns: 35% auto;
  gap: 40px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px;
}
.production-operation-block .operation-title {
  display: grid;
  align-items: center;
  gap: 5px 10px;
  grid-template-columns: 70px auto;
  grid-template-rows: 70px auto;
}
.production-operation-block .operation-title .operation-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #12154C;
  border-radius: 10px;
  font-size: 3.5rem;
  color: #12154C;
  width: 55px;
  height: 55px;
  grid-column: 1;
  grid-row: 1;
}
.production-operation-block .operation-title h5 {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.1;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
}
.production-operation-block .operation-title p {
  font-size: 1.8rem;
  align-self: start;
  line-height: 1.3;
  text-align: left !important;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 0;
  grid-column: 1/3;
  grid-row: 2;
}
.production-operation-block .operation-images {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 210px;
  width: 100%;
}
.production-operation-block .operation-images img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}

.production-indicators {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 20px 20px;
}
.production-indicators .production-indicator-item {
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-rows: 20px 20px;
  background-color: #ffffff;
  padding: 20px 10px 20px 40px;
  border-radius: 10px;
  gap: 10px 30px;
  align-items: center;
}
.production-indicators .production-indicator-item i {
  grid-column: 1;
  grid-row: 1/3;
  font-size: 4.6rem;
  color: #5067E3;
}
.production-indicators .production-indicator-item h5 {
  grid-column: 2;
  grid-row: 1;
  font-size: 2.2rem;
  font-weight: bold;
  color: #5067E3;
}
.production-indicators .production-indicator-item span {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.6rem;
  color: #12154C;
}

.production-packaging {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 20px 40px;
  margin-top: 20px;
}
.production-packaging .production-packaging-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.production-packaging .production-packaging-info h3 {
  font-size: 2.6rem;
  color: #12154C;
  margin-bottom: 15px;
  font-family: "Montserrat Alternates", sans-serif;
}
.production-packaging .production-packaging-info p {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}
.production-packaging .packaging-grid {
  display: grid;
  grid-template-columns: auto 45%;
  gap: 10px;
  margin-top: 10px;
  height: 100%;
}
.production-packaging .packaging-grid .packaging-item {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px 20px;
}
.production-packaging .packaging-grid .packaging-item h5 {
  color: #12154C;
  font-size: 1.6rem;
  font-weight: bold;
}
.production-packaging .packaging-grid .packaging-item p {
  font-size: 1.3rem;
  line-height: 1.2;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  text-align: left;
}
.production-packaging .packaging-grid .packaging-item.markirovka img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 65%;
}
.production-packaging .production-packaging-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.production-packaging .production-packaging-formats li {
  display: flex;
  flex-direction: column;
  padding: 15px 10px 20px 10px;
  gap: 10px;
  background-color: #ffffff;
  border-radius: 10px;
  align-items: center;
  text-align: center;
}
.production-packaging .production-packaging-formats li span {
  font-size: 1.4rem;
  font-weight: bold;
  color: #12154C;
  margin-top: auto;
}
.production-packaging .production-packaging-formats li img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 90px;
}

.retails-block {
  margin: 4% 0 4% 0;
  display: flex;
  flex-direction: column;
  padding: 0 4%;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.retails-block h2 {
  text-align: inherit;
  margin: 2% 0 10px 0;
}
.retails-block p {
  text-align: inherit;
  width: 70%;
}
.retails-block .retails-images {
  display: grid;
  grid-template-columns: 170px repeat(auto-fill, minmax(200px, 1fr));
  width: 100%;
  gap: 5px 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.retails-block .retails-images img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
}
.retails-block .retails-images img:first-child {
  grid-row: 1/span 4;
}

.ecopolis-marketing-block {
  position: relative;
  display: flex;
  margin: 6% 0 6% 0;
  border-radius: 30px;
  padding: 30px 30px;
  min-height: 450px;
  max-height: 550px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.ecopolis-marketing-block::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  border-radius: 30px;
  background: linear-gradient(90deg, rgb(65, 44, 25) 60%, rgba(65, 44, 25, 0) 100%);
}
.ecopolis-marketing-block > img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  border-radius: 30px;
}

.marketing-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 5;
  width: 60%;
}

.marketing-title {
  position: relative;
  display: grid;
  grid-template-columns: 70px auto;
  grid-template-rows: 30px 40px;
  align-items: flex-start;
  gap: 0 20px;
}
.marketing-title .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 5px;
  font-size: 5rem;
  color: #412D19;
  grid-column: 1;
  grid-row: 1/3;
  background-color: #FFDBB9;
}
.marketing-title h3 {
  font-size: 3rem;
  align-self: flex-start;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
  color: #ffffff;
}
.marketing-title h5 {
  font-size: 2rem;
  align-self: flex-end;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
  color: #ffffff;
}
.marketing-title::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 2px;
  left: 0;
  bottom: -20px;
  background-color: #FFDBB9;
}

.marketing-body {
  display: flex;
  flex-direction: column;
}
.marketing-body p {
  font-size: 1.6rem;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
  color: #ffffff;
  line-height: 1.3;
  width: 65%;
  text-align: left;
}
.marketing-body .marketing-features {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
}
.marketing-body .marketing-features li {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
  color: #ffffff;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  font-size: 1.4rem;
  font-weight: normal;
}
.marketing-body .marketing-features li i {
  font-size: 4.4rem;
  color: #FFDBB9;
}

.marketing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.marketing-actions .brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #412C19;
  font-weight: bold;
  padding: 5px 20px;
  background-color: #FBFFD3;
  border-radius: 40px;
  font-size: 2rem;
  font-weight: bold;
}
.marketing-actions .brand img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 40px;
}
.marketing-actions .button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  font-size: 1.6rem;
  gap: 10px;
  font-weight: bold;
  color: #412C19;
  border-radius: 40px;
  padding: 15px 20px;
  cursor: pointer;
}
.marketing-actions .button i {
  font-size: 2rem;
}

.direction-advantages {
  display: grid;
  position: relative;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 5vw;
  justify-content: space-between;
  align-items: center;
  margin: 2% 0 5% 0;
}

.direction-advantage-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 10px;
  z-index: 3;
  cursor: default;
}
.direction-advantage-block h5 {
  font-size: 2rem;
  font-weight: bold;
  color: #5067E3;
}
.direction-advantage-block span.text {
  font-size: 1.6rem;
  font-weight: 600;
  text-wrap: wrap;
  color: #12154C;
}
.direction-advantage-block .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  color: #5067E3;
}

.direction-section {
  margin: 6% auto 6% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.direction-section h2 {
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0 0 0.2px currentColor, 0 0 0.2px currentColor;
  color: #12154C;
  margin: 0 auto 10px auto;
  font-family: "Mulish", sans-serif;
  text-align: center;
  cursor: default;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.direction-section h4 {
  font-size: 1.8rem;
  color: #12154C;
  font-weight: normal;
  font-family: "Mulish", sans-serif;
  width: 70%;
  text-align: center;
  cursor: default;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.direction-section.blue {
  background-color: #F4F6FB;
}
.direction-section.blue h2 {
  margin-top: 4%;
}
.direction-section.blue {
  border-radius: 30px;
}

.catalog-section {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  margin: 3% auto 3% auto;
}

.catalog-category-section {
  display: grid;
  grid-template-columns: 25% auto;
  grid-template-rows: 85% auto;
  gap: 10px;
  cursor: default;
}

.category-block {
  display: flex;
  flex-direction: column;
  align-self: start;
  text-align: left;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  grid-column: 1;
  grid-row: 1/3;
  background-color: #ffffff;
  padding: 5px 20px 0 10px;
  height: 100%;
}
.category-block h3 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #12154C;
  line-height: 1.1;
  margin: 0 0 10px 0;
  font-family: "Mulish", sans-serif;
  width: 80%;
}
.category-block p {
  font-size: 1.6rem;
  font-weight: normal;
  color: #12154C;
  line-height: 1.3;
  text-align: left;
  width: 80%;
}
.category-block .category-block-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}
.category-block .category-block-list li {
  display: flex;
  flex-direction: row;
  gap: 10px;
  color: #696B91;
}
.category-block .category-block-list li span {
  font-size: 1.6rem;
  color: inherit;
}
.category-block .category-block-list li i {
  font-size: 3rem;
  color: inherit;
  width: 40px;
  text-align: center;
}
.category-block .category-image {
  position: relative;
  overflow: hidden;
  display: block;
  background-color: #ffffff;
  min-height: 150px;
  max-height: 200px;
  margin-top: auto;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.category-block .category-image img {
  position: absolute;
  bottom: -20px;
  right: 20px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.1);
}

.products-block {
  position: relative;
  grid-column: 2;
  grid-row: 1;
}
.products-block .slider-products {
  display: grid;
  justify-content: flex-start;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  overflow: visible;
  opacity: 0;
  position: relative;
}
.products-block .slider-products .slider-prev {
  left: -30px;
}
.products-block .slider-products .slider-next {
  right: -30px;
}

.packaging-block {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #F4F6FB;
  border-radius: 20px;
  padding: 20px;
  grid-column: 2;
  grid-row: 2;
}
.packaging-block h5 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.packaging-block .packaging-block-list {
  display: flex;
  align-items: center;
  gap: 5px 10px;
  flex-wrap: wrap;
}
.packaging-block .packaging-block-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAF0FF;
  border-radius: 40px;
  padding: 10px 10px;
  font-size: 1.4rem;
  color: #12154C;
}

.chunk-product {
  display: flex !important;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  gap: 0;
  margin: 5px;
  color: #12154C;
  padding-top: 10px;
  height: 400px !important;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.1s linear 0s;
}
.chunk-product .product-image {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  min-height: 180px;
  max-height: 220px;
  border-radius: 10px;
}
.chunk-product .product-image img {
  border-radius: inherit;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  min-height: inherit;
  max-height: inherit;
  width: 100%;
}
.chunk-product .product-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 10px 10px 20px 10px;
  background-color: #ffffff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  flex-grow: 1;
}
.chunk-product .product-text a > h5 {
  color: #12154C;
  font-weight: 600;
  margin: 10px 0;
  height: 50px;
}
.chunk-product .product-text p {
  color: #12154C;
  font-size: 1.4rem;
  text-align: center;
}
.chunk-product .button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
  color: #5067E3;
  border: 1px solid #5067E3;
  border-radius: 40px;
  padding: 5px 20px;
  margin: auto auto 0 auto;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.chunk-product .button:hover {
  background-color: #5067E3;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.usage-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
  gap: 20px;
  padding: 20px 40px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  margin: 0 auto;
  border-radius: 30px;
  width: 100%;
}

.usage-block-info.retail {
  gap: 10px 10px;
}
.usage-block-info.retail .icon {
  grid-column: 1;
  grid-row: 1/3;
}
.usage-block-info.retail h5 {
  grid-column: 2;
  grid-row: 1;
}
.usage-block-info.retail span.subtext {
  grid-column: 2;
  grid-row: 2;
}
.usage-block-info.retail p {
  grid-column: 1/3;
  grid-row: 3;
}

.usage-block {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px 20px;
}

.usage-block .usage-block-info {
  display: grid;
  align-items: center;
  gap: 15px 10px;
  grid-template-columns: 60px auto;
  grid-template-rows: auto auto auto;
}
.usage-block .usage-block-info .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #12154C;
  border-radius: 10px;
  font-size: 3.5rem;
  color: #12154C;
  width: 55px;
  height: 55px;
  grid-column: 1;
  grid-row: 1;
}
.usage-block .usage-block-info h5 {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.1;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
}
.usage-block .usage-block-info span.subtext {
  font-size: 1.6rem;
  font-weight: bold;
  align-self: start;
  line-height: 1.2;
  text-align: left !important;
  color: #5067E3;
  font-family: "Mulish", sans-serif;
  margin: 0;
  grid-column: 1/3;
  grid-row: 2;
}
.usage-block .usage-block-info p {
  font-size: 1.6rem;
  align-self: start;
  line-height: 1.3;
  text-align: left !important;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 0 0 10px 0;
  grid-column: 1/3;
  grid-row: 3;
}

.usage-block .usage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}
.usage-block .usage-list > li {
  display: flex;
  flex-direction: column;
  background-color: #EAF0FF;
  padding: 10px 10px 10px 50px;
  position: relative;
  width: 100%;
  border-radius: 15px;
}
.usage-block .usage-list > li h5 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #12154C;
  line-height: 1.1;
  margin: 0;
  font-family: "Mulish", sans-serif;
}
.usage-block .usage-list > li p {
  font-size: 1.6rem;
  font-weight: normal;
  color: #12154C;
  line-height: 1.3;
  text-align: left;
}
.usage-block .usage-list > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 40%;
  left: 15px;
  width: 20px;
  height: 20px;
  background-color: #696B91;
  border-radius: 5px;
}

.usage-list.animals {
  margin-top: auto;
}

.usage-list.animals li {
  display: grid;
  grid-template-columns: 50px auto;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 10px 10px 10px 15px;
  gap: 0 10px;
  width: 90%;
}
.usage-list.animals li::before {
  content: none;
}
.usage-list.animals li h5 {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.6rem;
  line-height: 1;
}
.usage-list.animals li p {
  grid-column: 2;
  grid-row: 2;
  line-height: 1;
}
.usage-list.animals li i {
  font-size: 4rem;
  color: #3A3C6B;
  grid-column: 1;
  grid-row: 1/3;
}

.usage-block .usage-benefit {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px 10px 10px 10px;
  margin: 20px 10px 0 10px;
  border-top: 2px solid #C0C2F0;
}
.usage-block .usage-benefit span {
  font-size: 1.8rem;
  font-weight: bold;
  color: #3A3C6B;
  line-height: 1.1;
  margin: 0;
  font-family: "Mulish", sans-serif;
}

.cake-table-section {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 40px;
  margin: 4% auto 4% auto;
}

.cake-table {
  cursor: default;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  border-collapse: collapse;
  width: 100%;
}
.cake-table th {
  font-size: 2rem;
  color: #3A3C6B;
  padding: 10px;
  text-align: center;
}
.cake-table .cake-table-td {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #12154C;
  font-size: 1.8rem;
  padding: 10px;
  min-height: 80px;
  font-weight: 500;
  border-bottom: 1px solid #696B91;
  border-right: 1px solid #696B91;
}
.cake-table .cake-parametr-title {
  display: grid;
  grid-template-columns: 40px auto;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 1.8rem;
  text-align: left;
  color: #606882;
}
.cake-table .cake-parametr-title i {
  color: #5067E3;
  font-size: 3.5rem;
}
.cake-table tr td:last-child .cake-table-td {
  border-right: none;
}
.cake-table tr:last-child .cake-table-td {
  border-bottom: none;
}

.stepwise-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 2% auto;
  width: 100%;
}

.stepwise-nav {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}
.stepwise-nav .slick-list {
  width: 100%;
  overflow: visible !important;
}
.stepwise-nav li {
  display: flex;
  align-items: center;
  padding: 20px 10px 20px 20px;
  color: #12154C;
  background-color: #E7E9F0;
  border-color: #E7E9F0;
  font-size: 1.8rem;
  font-weight: 500;
  border-right: 1px solid #C0C1CE;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.stepwise-nav li:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.stepwise-nav li:last-child {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-color: transparent;
}
.stepwise-nav li:hover {
  color: #5067E3;
  background-color: #EAF0FF;
  transition: all 0.1s linear 0s;
}
.stepwise-nav li.slick-current.slick-active {
  color: #ffffff;
  background-color: #6B80F5;
  border-color: transparent;
  transition: all 0.1s linear 0s;
}

.stepwise-step-wrap {
  position: relative;
  display: flex !important;
  flex-direction: column;
  width: 100%;
}

.stepwise-step {
  display: grid !important;
  grid-template-columns: 60% auto;
  align-items: flex-start;
  padding: 10px;
  gap: 40px;
}
.stepwise-step .stepwise-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  padding: 0;
}
.stepwise-step .stepwise-info h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #12154C;
  line-height: 1.1;
  margin: 0 0 10px 0;
  text-align: left;
  font-family: "Mulish", sans-serif;
}
.stepwise-step .stepwise-info p {
  font-size: 1.8rem;
  font-weight: normal;
  color: #12154C;
  line-height: 1.3;
  text-align: left;
}
.stepwise-step .stepwise-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  width: 100%;
}
.stepwise-step .stepwise-info-list > li {
  display: flex;
  flex-direction: column;
  background-color: #EAF0FF;
  padding: 10px 10px 10px 50px;
  position: relative;
  width: 100%;
  border-radius: 15px;
}
.stepwise-step .stepwise-info-list > li h5 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #12154C;
  line-height: 1.1;
  margin: 0;
  font-family: "Mulish", sans-serif;
}
.stepwise-step .stepwise-info-list > li p {
  font-size: 1.6rem;
  font-weight: normal;
  color: #12154C;
  line-height: 1.3;
  text-align: left;
}
.stepwise-step .stepwise-info-list > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 40%;
  left: 15px;
  width: 20px;
  height: 20px;
  background-color: #696B91;
  border-radius: 5px;
}
.stepwise-step img {
  display: block;
  width: 100%;
  max-height: 450px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
}

.delivery-regions-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.delivery-regions-section img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 80vw;
}

.delivery-regions-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 4%;
  width: 100%;
}
.delivery-regions-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 40px;
  background-color: #EAF0FF;
  color: #12154C;
  font-size: 1.8rem;
  font-weight: 500;
}

.product-section {
  display: flex;
  flex-direction: column;
  gap: 50px 0;
}
.product-section.len .product-main .product-info h2 {
  color: #12154C;
}
.product-section.len .product-main .product-info p {
  color: #12154C;
}
.product-section.len .product-main .product-info h5 {
  color: #5067E3;
}
.product-section.len .product-main .product-info .product-indicators > li {
  color: #12154C;
}
.product-section.len .product-main .product-info .product-indicators > li i {
  color: #5067E3;
}
.product-section.len .product-main .product-packaging h3 {
  color: #12154C;
}
.product-section.len .product-main .product-packaging .packaging-list .package-item {
  color: #12154C;
  background-color: #ffffff;
  border: 1px solid #606882;
}
.product-section.len .product-main .product-packaging .packaging-list .package-item:hover {
  color: #5067E3;
}
.product-section.len .product-main .product-packaging .packaging-list .package-item.slick-current.slick-active {
  background-color: #6B80F5;
}
.product-section.len .product-detail .product-links .product-docs {
  border-top: 2px solid #5067E3;
}
.product-section.len .product-detail .product-links .product-docs a {
  color: #5067E3;
}
.product-section.ecopolis .product-main .product-info h2 {
  color: #34190E;
}
.product-section.ecopolis .product-main .product-info p {
  color: #34190E;
}
.product-section.ecopolis .product-main .product-info h5 {
  color: #34190E;
}
.product-section.ecopolis .product-main .product-info .product-indicators > li {
  color: #34190E;
}
.product-section.ecopolis .product-main .product-info .product-indicators > li i {
  color: #B2BF11;
}
.product-section.ecopolis .product-main .product-packaging h3 {
  color: #34190E;
}
.product-section.ecopolis .product-main .product-packaging .packaging-list .package-item {
  color: #34190E;
  background-color: #ffffff;
  border: 1px solid #4b6340;
}
.product-section.ecopolis .product-main .product-packaging .packaging-list .package-item:hover {
  color: #B2BF11;
  background-color: #f2ffea;
}
.product-section.ecopolis .product-main .product-packaging .packaging-list .package-item.slick-current.slick-active {
  background-color: #B2BF11;
}
.product-section.ecopolis .product-detail .product-links .product-docs {
  border-top: 2px solid #B27237;
}
.product-section.ecopolis .product-detail .product-links .product-docs a {
  color: #B27237;
}

.product-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.product-detail .product-main {
  display: grid;
  grid-template-columns: auto 40% 20%;
  position: relative;
}
.product-detail .product-main .product-info {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
}
.product-detail .product-main .product-info h2 {
  font-size: 3.6rem;
  line-height: 1;
  text-shadow: 0 0 0.2px currentColor, 0 0 0.2px currentColor;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.product-detail .product-main .product-info p {
  font-size: 1.6rem;
  text-align: left;
  line-height: 1.3;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}
.product-detail .product-main .product-info h5 {
  font-size: 1.6rem;
  text-align: left;
  font-weight: bold;
  line-height: 1;
  color: #5067E3;
  font-family: "Mulish", sans-serif;
  margin: 20px 0 10px 0;
}
.product-detail .product-main .product-info .product-indicators {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.product-detail .product-main .product-info .product-indicators > li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  color: #12154C;
  font-weight: normal;
  padding: 5px 0;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
}
.product-detail .product-main .product-info .product-indicators > li i {
  font-size: 2.7rem;
  color: #5067E3;
}
.product-detail .product-main .product-info .product-indicators > li span {
  font-weight: bold;
}
.product-detail .product-main .product-view {
  grid-column: 2;
}
.product-detail .product-main .product-view .view-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 20px 50px;
  height: 400px;
  opacity: 0;
}
.product-detail .product-main .product-view .view-image .slick-list, .product-detail .product-main .product-view .view-image .slick-track {
  width: 100%;
  height: 100%;
}
.product-detail .product-main .product-view .view-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.product-detail .product-main .product-packaging {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  grid-column: 3;
  justify-content: center;
  margin-bottom: 10vh;
  margin-left: 20px;
}
.product-detail .product-main .product-packaging h3 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  text-align: left;
  line-height: 1;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}
.product-detail .product-main .product-packaging .packaging-list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}
.product-detail .product-main .product-packaging .packaging-list .package-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  color: #12154C;
  font-weight: normal;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 40px;
  border: 1px solid #606882;
  cursor: pointer;
  width: -moz-max-content !important;
  width: max-content !important;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  transition: all 0.1s linear 0s;
}
.product-detail .product-main .product-packaging .packaging-list .package-item:hover {
  color: #5067E3;
  background-color: #EAF0FF;
  transition: all 0.1s linear 0s;
}
.product-detail .product-main .product-packaging .packaging-list .package-item.slick-current.slick-active {
  color: #ffffff;
  background-color: #6B80F5;
  border-color: transparent;
  transition: all 0.1s linear 0s;
}
.product-detail .product-main .product-packaging .packaging-list .slick-list {
  height: auto !important;
}
.product-detail .product-main .product-packaging .packaging-list .slick-track {
  height: auto !important;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.product-detail .product-main .product-packaging .packaging-list .slick-track::before {
  content: none;
}
.product-detail .product-main .product-packaging .packaging-list .slick-track::after {
  content: none;
}
.product-detail .product-links {
  display: grid;
  grid-template-columns: auto 60%;
  align-items: center;
  position: relative;
}
.product-detail .product-links .product-docs {
  grid-column: 1;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 20px;
  padding: 10px 0;
  border-top: 2px solid #5067E3;
}
.product-detail .product-links .product-docs a {
  display: flex;
  align-items: center;
  justify-content: left;
  font-weight: bold;
  color: #5067E3;
  font-size: 1.6rem;
}
.product-detail .product-links > .cta-button {
  grid-column: 2;
  width: -moz-max-content;
  width: max-content;
  margin: 0;
  margin-left: auto;
  font-size: 1.8rem;
}

.product-advantage.len h3 {
  color: #12154C;
}
.product-advantage.len .product-advantage-list > li {
  color: #12154C;
  background-color: #F9FAFE;
}
.product-advantage.len .product-advantage-list > li i {
  color: #5067E3;
}
.product-advantage.len .product-advantage-list > li h5 {
  color: #5067E3;
}
.product-advantage.len .product-advantage-list > li span {
  color: #12154C;
}
.product-advantage.ecopolis h3 {
  color: #34190E;
}
.product-advantage.ecopolis .product-advantage-list > li {
  color: #34190E;
  background-color: #fffbf4;
}
.product-advantage.ecopolis .product-advantage-list > li i {
  color: #B27237;
}
.product-advantage.ecopolis .product-advantage-list > li h5 {
  color: #B27237;
}
.product-advantage.ecopolis .product-advantage-list > li span {
  color: #34190E;
}

.product-advantage {
  display: flex;
  flex-direction: column;
  gap: 40px;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
}
.product-advantage h3 {
  font-size: 2rem;
  line-height: 1;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.product-advantage .product-advantage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  justify-content: space-between;
  gap: 20px 50px;
}
.product-advantage .product-advantage-list > li {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  color: #12154C;
  font-weight: normal;
  padding: 20px 15px;
  border-radius: 20px;
  background-color: #F9FAFE;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
}
.product-advantage .product-advantage-list > li i {
  font-size: 4.5rem;
  color: #5067E3;
  grid-column: 1;
  grid-row: 1/3;
}
.product-advantage .product-advantage-list > li h5 {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: bold;
  color: #5067E3;
  font-family: "Mulish", sans-serif;
  margin: 0;
  width: 100%;
  word-break: break-all;
}
.product-advantage .product-advantage-list > li span {
  grid-column: 2;
  grid-row: 2;
  max-width: 80%;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: normal;
  color: #12154C;
}

.product-cake-usage {
  display: flex;
  flex-direction: column;
  gap: 40px;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
}
.product-cake-usage h3 {
  font-size: 2rem;
  line-height: 1;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.product-cake-usage .cake-usage-list {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
}
.product-cake-usage .cake-usage-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  gap: 15px;
  padding: 10px 15px;
  border: 1px solid #606882;
  border-radius: 40px;
  font-size: 1.8rem;
}
.product-cake-usage .cake-usage-list li i {
  font-size: 3rem;
  color: #606882;
}

.product-recipes {
  display: flex;
  flex-direction: column;
  gap: 40px;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
}
.product-recipes h3 {
  font-size: 2rem;
  line-height: 1;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.product-recipes .product-recipes-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.product-articles {
  display: flex;
  flex-direction: column;
  gap: 40px;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: default;
}
.product-articles h3 {
  font-size: 2rem;
  line-height: 1;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0;
}
.product-articles .product-articles-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.product-work-example {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 30px;
  background-color: #FBFAF6;
}

.color-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.color-list .color {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 7px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.color-list .color img {
  width: 150px;
  height: 150px;
  border-radius: 7px;
  -o-object-fit: cover;
     object-fit: cover;
}
.color-list .color span {
  display: block;
  padding: 10px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #34190E;
  font-family: "Mulish", sans-serif;
}

.color-modal {
  width: 50vw;
  padding: 20px 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  z-index: 70;
  position: relative;
}
.color-modal h2 {
  text-align: center;
  font-size: 2rem;
  line-height: 1;
  font-weight: bold;
  color: #34190E;
  font-family: "Mulish", sans-serif;
  margin: 10px 0 20px 0;
}
.color-modal .color-drag-frame {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 10px;
}
.color-modal .color-drag-frame img {
  display: block;
  width: 50vw;
  height: 270px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
  cursor: default;
}
.color-modal .color-drag-frame .color-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}
.color-modal .color-drag-frame .slider-handle {
  position: absolute;
  width: 4px;
  left: 50%;
  top: 0;
  bottom: 0;
  margin-left: -2px;
  background: rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.color-modal .color-drag-frame .slider-handle .icon {
  position: absolute;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  top: 40%;
  width: 65px;
  height: 65px;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translateX(-32.5px);
}
.color-modal .color-drag-frame .slider-handle .icon i {
  font-size: 3rem;
  color: #B2BF11;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.color-modal .modal-exit { /* Крестик справа вверху */
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 3px;
  right: 3px;
  color: #CACACA;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.color-modal .modal-exit:hover {
  color: #34190E;
}

.offer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6% auto;
}
.offer-form .offer-form-wrap {
  display: grid;
  grid-template-columns: 50% auto;
  gap: 10px;
  height: -moz-max-content;
  height: max-content;
}
.offer-form .offer-form-wrap > .offer-form-section {
  height: 100%;
}

.offer-form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 30px;
  background-color: #F9FAFE;
  border-radius: 30px;
  cursor: default;
}
.offer-form-section h2 {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
  margin: 10px 0 10px 0;
}
.offer-form-section h5 {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: bold;
  color: #3A3C6B;
  font-family: "Mulish", sans-serif;
}
.offer-form-section.union {
  grid-column: 1/3;
}
.offer-form-section .form-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 10px 0;
}
.offer-form-section .form-content .form-row {
  display: flex;
  gap: 20px;
}
.offer-form-section .form-content .form-row > label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.offer-form-section .form-content .form-row > label .label-text {
  font-size: 1.5rem;
  color: #3A3C6B;
  line-height: 1.2;
}
.offer-form-section .form-content .form-row input, .offer-form-section .form-content .form-row select, .offer-form-section .form-content .form-row textarea {
  border: 1px solid #8196C7;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}
.offer-form-section .form-content .form-row.column {
  flex-direction: column;
  flex-wrap: wrap;
}
.offer-form-section .form-direction-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.offer-form-section .form-direction-list > .direction-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ced9f3;
  background-color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.offer-form-section .checks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}
.offer-form-section .checks-list.column {
  display: flex;
  flex-direction: column;
}
.offer-form-section .checks-list .empty {
  grid-column: 1/span auto-fill;
}
.offer-form-section .empty {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 30px;
  font-size: 2rem;
  color: #b0bfe2;
}
.offer-form-section .empty i {
  color: inherit;
  font-size: 4rem;
}

.form-checkbox-element {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.form-checkbox-element input {
  position: absolute;
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
}
.form-checkbox-element span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border: 1px solid #8196C7;
  border-radius: 7px;
  background-color: #ffffff;
  font-size: 2.5rem;
  color: #ffffff;
}
.form-checkbox-element h5 {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}

.form-checkbox-element input:checked ~ .form-checkbox {
  background-color: #6B80F5;
  color: #ffffff;
  border-color: #6B80F5;
  transition: all 0.1s linear 0s;
}

.categories-product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.categories-product-list .product-category {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px;
  border: 1px solid #B5C3E3;
  background-color: #ffffff;
  border-radius: 15px;
}
.categories-product-list .product-category .product-category-title {
  display: grid;
  grid-template-columns: 70px auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 10px;
  position: relative;
  cursor: default;
}
.categories-product-list .product-category .product-category-title .product-category-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 7px;
  background-color: #EAF0FF;
  font-size: 4.5rem;
  color: #5067E3;
  grid-column: 1;
  grid-row: 1/3;
  width: 60px;
  height: 60px;
}
.categories-product-list .product-category .product-category-title h3 {
  font-size: 2rem;
  line-height: 1;
  grid-column: 2;
  grid-row: 1;
  font-weight: bold;
  color: #12154C;
  font-family: "Mulish", sans-serif;
}
.categories-product-list .product-category .product-category-title > span {
  font-size: 1.4rem;
  line-height: 1;
  grid-column: 2;
  grid-row: 2;
  color: #3A3C6B;
  font-family: "Mulish", sans-serif;
}
.categories-product-list .product-category .product-category-title > .form-checkbox-element {
  position: absolute;
  right: 45px;
}
.categories-product-list .product-category .product-category-title .category-toggle-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: #d0d6f0;
  font-size: 3rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  right: -5px;
}
.categories-product-list .product-category .product-category-title .category-toggle-btn.rotate {
  transform: rotate(90deg);
  transition: all 0.1s linear 0s;
}
.categories-product-list .product-category .product-list {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin-right: 40px;
  transition: opacity 0.3s ease;
}
.categories-product-list .product-category .product-list.visible {
  display: grid !important;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.categories-product-list .product-category .product-list.hidden {
  display: grid;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.offer-form-footer {
  display: flex;
  align-items: center;
  gap: 40px;
}
.offer-form-footer button {
  font-family: "Mulish", sans-serif;
  cursor: pointer;
  width: 70%;
}

.catalog-list.desktop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.catalog-list.desktop .catalog-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  border-radius: 40px;
  min-height: 27vw;
  padding: 20px 30px;
  overflow: hidden;
}
.catalog-list.desktop .catalog-item.set1 {
  background-color: #EAF5FF;
}
.catalog-list.desktop .catalog-item.set1::before {
  background-color: #EAF5FF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set1 .links > .item-link {
  background-color: #5c7d9c;
}
.catalog-list.desktop .catalog-item.set2 {
  background-color: #FEF2E0;
}
.catalog-list.desktop .catalog-item.set2::before {
  background-color: #FEF2E0;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set2 .links > .item-link {
  background-color: #E0AE63;
}
.catalog-list.desktop .catalog-item.set3 {
  background-color: #F7EDE3;
}
.catalog-list.desktop .catalog-item.set3::before {
  background-color: #F7EDE3;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set3 .links > .item-link {
  background-color: #CDA06C;
}
.catalog-list.desktop .catalog-item.set4 {
  background-color: #F9FDDF;
}
.catalog-list.desktop .catalog-item.set4::before {
  background-color: #F9FDDF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set4 .links > .item-link {
  background-color: #B7C656;
}
.catalog-list.desktop .catalog-item.set5 {
  background-color: #FFEDE2;
}
.catalog-list.desktop .catalog-item.set5::before {
  background-color: #FFEDE2;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.desktop .catalog-item.set5 .links > .item-link {
  background-color: #B98361;
}
.catalog-list.desktop .catalog-item h2 {
  font-size: 2.4rem;
  color: #313131;
}
.catalog-list.desktop .catalog-item h4 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #313131;
}
.catalog-list.desktop .catalog-item .links {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  left: 0;
  right: 0;
  top: 50%;
  gap: 20px;
  z-index: 5;
}
.catalog-list.desktop .catalog-item .links .item-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  outline: none;
  padding: 18px 25px;
  font-size: 2rem;
  border-radius: 10px;
  font-family: "Mulish", sans-serif;
  font-weight: bold;
  background-color: #555555;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.catalog-list.desktop .catalog-item .links .item-link:hover {
  filter: brightness(1.1);
  transition: all 0.1s linear 0s;
}
.catalog-list.desktop .catalog-item img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 65%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  transition: all 0.1s linear 0s;
}
.catalog-list.desktop .catalog-item::before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 65%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  z-index: 2;
}

.catalog-list.mobile {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.catalog-list.mobile .catalog-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 30% auto;
  justify-content: flex-start;
  text-align: left;
  position: relative;
  border-radius: 20px;
  min-height: 20vw;
  max-height: 45vw;
  padding: 0;
}
.catalog-list.mobile .catalog-item.set1 {
  background-color: #EAF5FF;
}
.catalog-list.mobile .catalog-item.set1::before {
  background-color: #EAF5FF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set1 .icon, .catalog-list.mobile .catalog-item.set1 .link {
  background-color: #8698df;
}
.catalog-list.mobile .catalog-item.set2 {
  background-color: #FEF2E0;
}
.catalog-list.mobile .catalog-item.set2::before {
  background-color: #FEF2E0;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set2 .icon, .catalog-list.mobile .catalog-item.set2 .link {
  background-color: #E0AE63;
}
.catalog-list.mobile .catalog-item.set3 {
  background-color: #F7EDE3;
}
.catalog-list.mobile .catalog-item.set3::before {
  background-color: #F7EDE3;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set3 .icon, .catalog-list.mobile .catalog-item.set3 .link {
  background-color: #CDA06C;
}
.catalog-list.mobile .catalog-item.set4 {
  background-color: #F9FDDF;
}
.catalog-list.mobile .catalog-item.set4::before {
  background-color: #F9FDDF;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set4 .icon, .catalog-list.mobile .catalog-item.set4 .link {
  background-color: #B7C656;
}
.catalog-list.mobile .catalog-item.set5 {
  background-color: #FFEDE2;
}
.catalog-list.mobile .catalog-item.set5::before {
  background-color: #FFEDE2;
  filter: brightness(0.1);
  opacity: 0.5;
}
.catalog-list.mobile .catalog-item.set5 .icon, .catalog-list.mobile .catalog-item.set5 .link {
  background-color: #B98361;
}
.catalog-list.mobile .catalog-item h2 {
  font-size: 2.2rem;
  color: #313131;
}
.catalog-list.mobile .catalog-item h4 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #313131;
  line-height: 1.4;
}
.catalog-list.mobile .catalog-item .catalog-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 20px 60px;
}
.catalog-list.mobile .catalog-item .icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: -10px;
  left: -10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 4.5rem;
  color: #ffffff;
  z-index: 5;
}
.catalog-list.mobile .catalog-item img {
  width: 100%;
  max-height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  height: 100%;
}
.catalog-list.mobile .catalog-item .link {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.woodgallery-section {
  display: flex;
  flex-direction: column;
}
.woodgallery-section .pagination {
  justify-content: center;
}

.woodgallery-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 30px 0;
}
.woodgallery-nav .woodgallery-nav-button {
  width: 100%;
  position: relative;
}
.woodgallery-nav .woodgallery-nav-button input {
  position: absolute;
  top: 0;
  left: 0;
  width: -moz-min-content;
  width: min-content;
  opacity: 0;
  visibility: hidden;
}
.woodgallery-nav .woodgallery-nav-label {
  width: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px 20px;
  font-size: 1.4rem;
  border-radius: 10px;
  font-weight: bold;
  color: #34190E;
  background-color: #F8EBDD;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  font-size: 1.8rem;
  padding: 14px 30px;
  height: 100%;
}
.woodgallery-nav .woodgallery-nav-label:hover {
  background-color: #B27237;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.woodgallery-nav-button input:checked + .woodgallery-nav-label {
  background-color: #B27237;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}

.woodgallery-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
  gap: 10px;
}
.woodgallery-list .woodgallery-item {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  max-height: 40vh;
}
.woodgallery-list .woodgallery-item img {
  -o-object-fit: cover;
     object-fit: cover;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}

.calculate-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 40px;
  position: relative;
}
.calculate-wrap > h2 {
  color: #B2BF11;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin: 10px auto;
}
.calculate-wrap > h4 {
  color: #34190E;
  font-size: 2.4rem;
  text-align: center;
  margin: 10px auto;
}
.calculate-wrap .calc-attention {
  position: absolute;
  top: 15px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #B2BF11;
  border: 1px solid transparent;
  background-color: #F2F5D9;
  border-radius: 40px;
  min-width: -moz-max-content;
  min-width: max-content;
  cursor: default;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.calculate-wrap .calculate-blocks {
  display: grid;
  justify-content: center;
  grid-template-columns: 32% 32% 32%;
  gap: 10px 30px;
}
.calculate-wrap .calculate-blocks .calculate-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 10px;
}
.calculate-wrap .calculate-blocks .calculate-block.block-maslo {
  grid-column: 1;
  grid-row: 1/4;
}
.calculate-wrap .calculate-blocks .calculate-block.block-square {
  grid-column: 2;
  grid-row: 1;
}
.calculate-wrap .calculate-blocks .calculate-block.block-preparation {
  grid-column: 2;
  grid-row: 2;
}
.calculate-wrap .calculate-blocks .calculate-block.block-color {
  grid-column: 2;
  grid-row: 3;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total {
  grid-column: 3;
  grid-row: 1/4;
}
.calculate-wrap .calculate-blocks .calculate-block h3 {
  font-size: 1.8rem;
  text-align: center;
  margin: 20px auto 10px auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li {
  position: relative;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li label {
  display: flex;
  align-items: center;
  padding: 20px;
  font-size: 1.6rem;
  background-color: #f5f5f5;
  font-weight: 600;
  color: #313131;
  border-radius: 20px;
  transition: all 0.1s linear 0s;
  cursor: pointer;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list li:hover label {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list input:checked + label, .calculate-wrap .calculate-blocks .calculate-block .calc-maslo-list input:focus + label {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 10px;
  gap: 30px;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 1fr));
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 20px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image img {
  width: 100%;
  height: 7vw;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image span {
  font-size: 1.6rem;
  color: #313131;
  font-weight: 500;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.layer {
  position: relative;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.layer > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  color: #313131;
  font-size: 3rem;
  font-weight: bold;
  width: 6vw;
  height: 5vw;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.image input:checked + img, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.image input:focus + img, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.image input:hover + img {
  opacity: 1;
  transition: all 0.1s linear 0s;
  border-color: #34190E;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label.layer input:checked + .layer-item, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.layer input:hover + .layer-item, .calculate-wrap .calculate-blocks .calculate-block .calc-list label.layer input:focus + .layer-item {
  background-color: #B2BF11;
  color: #ffffff;
  transition: all 0.1s linear 0s;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-list > label input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
.calculate-wrap .calculate-blocks .calculate-block .calc-input {
  text-align: center;
  font-size: 2rem;
  border-radius: 40px;
  border: 2px solid #e2e2e2;
  margin: 10px auto;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total {
  align-items: center;
  padding: 30px 20px;
  gap: 10px;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total h4 {
  color: #B2BF11;
  font-weight: bold;
  font-size: 5.6rem;
  margin: 20% auto 10px auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total h5 {
  font-size: 1.8rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  text-align: center;
  margin: 0 auto;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table {
  margin-top: auto;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #313131;
  cursor: default;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li h5 {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  padding: 20px 10px;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li span {
  font-size: 1.8rem;
  text-align: right;
  font-weight: 500;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-table li span.price {
  font-size: 2.5rem;
  color: #313131;
  font-weight: bold;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  color: #313131;
  border: 2px solid #CACACA;
  background-color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: "Mulish", sans-serif;
  margin: 0 auto;
  border-radius: 20px;
  cursor: pointer;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-button.active {
  color: #ffffff;
  background-color: #B2BF11;
  border-color: #B2BF11;
}
.calculate-wrap .calculate-blocks .calculate-block.block-total .calc-button.catalog-mobile {
  display: none;
}/*# sourceMappingURL=style.css.map */