@charset "UTF-8";
:root {
  --index: calc(1vw + 1vh);
  --border-radius: 16px;
  --section-padding: clamp(60px, calc(var(--index) * 4), 90px);
  --black: #444444;
  --primary: #007456;
  --secondary: #b229b7;
  --fz-h1: clamp(28px, calc(var(--index) * 2.3), 56px);
  --fz-h2: clamp(24px, calc(var(--index) * 1.5), 35px);
  --fz-h3: clamp(20px, calc(var(--index) * 1), 24px);
  --fz-18: 18px;
  --fz-20: clamp(18px, calc(var(--index) * 1), 20px);
  --fz-22: clamp(18px, calc(var(--index) * 1), 22px);
  --fz-24: clamp(18px, calc(var(--index) * 1.1), 24px);
  --fz-26: clamp(20px, calc(var(--index) * 1.2), 26px);
  --fz-28: clamp(20px, calc(var(--index) * 1.3), 28px);
  --fz-30: clamp(20px, calc(var(--index) * 1.3), 30px);
  --fz-32: clamp(22px, calc(var(--index) * 1.4), 32px);
  --fz-34: clamp(22px, calc(var(--index) * 1.5), 34px);
  --fz-36: clamp(22px, calc(var(--index) * 1.5), 36px);
  --fz-38: clamp(22px, calc(var(--index) * 1.6), 38px);
  --fz-44: clamp(32px, calc(var(--index) * 2), 44px);
  --fz-46: clamp(28px, calc(var(--index) * 2), 46px);
  --bs-border-color: rgba(0,0,0,.1);
  --bs-border-color-translucent: rgba(0,0,0,.1);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 0, 116, 86;
  --bs-secondary: var(--secondary);
  --bs-secondary-rgb: 178, 41, 183;
}

.admin-bar #header.fixed-top {
  top: 32px !important;
}

#primary {
  padding-top: 150px;
}

.box {
  --box-padding: calc(var(--border-radius) * var(--box-padding-fix, 1.75));
  --border-radius-fix: 0;
  width: 100%;
  color: var(--fix-color, #444444);
  background-color: var(--fix-bgcolor, rgba(0, 0, 0, 0.08));
  border-radius: var(--border-radius-fix, var(--border-radius));
  padding-top: calc(var(--box-padding) * .75 - var(--box-border, 0px));
  padding-left: calc(var(--box-padding) - var(--box-border, 0px));
  padding-bottom: calc(var(--box-padding) * .9);
  padding-right: calc(var(--box-padding) - var(--box-border, 0px));
  position: relative;
  transition: all 0.3s;
}
.box.even {
  padding: var(--box-padding);
}
.box.outside {
  width: calc(100% + var(--outside-width, 0) * 2);
  margin-left: calc(var(--outside-width, 0) * -1);
  margin-right: calc(var(--outside-width, 0) * -1);
}
.box.border {
  --box-border: 1px;
  border: none !important;
  background-color: transparent;
  border: var(--box-border) solid var(--fix-bgcolor, rgba(0, 0, 0, 0.08)) !important;
}
.box-footer {
  margin-top: 32px;
}

/* SS -------------------- */
/* SM -------------------- */
/* MD -------------------- */
@media (min-width: 768px) {
  body {
    --border-radius: 22px;
  }
}
/* LG -------------------- */
/* XL -------------------- */
/* XXL ------------------- */
.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(0, 116, 86, 0.25);
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(0, 116, 86, 0.25);
}

.offcanvas.bg-black {
  --navbar-main-color-rgb: 255,255,255;
  --searchform-bg: rgba(255,255,255,.1);
  --close-color: rgba(255,255,255,.6);
  --lang-color: #ababab;
}

.offcanvas {
  --navbar-main-color-rgb: 0,0,0;
  --bs-offcanvas-width: 425px;
  border-left: 0;
}
.offcanvas .searchform {
  background: rgba(0, 0, 0, 0.08);
  border-radius: calc(var(--border-radius) * .4);
}
.offcanvas .searchform-button .navbar-icon {
  --icon-width: 1.5em;
  fill: rgba(var(--navbar-main-color-rgb), 0.6);
}
.offcanvas .navbar-nav {
  --bs-nav-link-padding-x: 15px;
  --bs-nav-link-padding-y: 10px;
}
.offcanvas .navbar {
  --bs-border-width: 0;
  --bs-navbar-color: rgba(var(--navbar-main-color-rgb),.8);
  --bs-navbar-hover-color: rgba(var(--navbar-main-color-rgb),.8);
  --bs-nav-link-font-size: 18px;
  margin-bottom: auto;
  border-radius: calc(var(--border-radius) * .4);
  background: rgba(0, 0, 0, 0.08);
  margin-top: 20px;
  padding: 0;
}
.offcanvas .navbar > div {
  width: 100%;
}
.offcanvas .navbar .dropdown-menu {
  --bs-dropdown-item-padding-y: .4rem;
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-bg: rgba(var(--navbar-main-color-rgb),.01);
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.offcanvas .navbar .dropdown-menu:not(.dropdown-toggle) {
  --bs-navbar-active-color: #fff;
  --bs-dropdown-bg: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.offcanvas .navbar .dropdown-menu .dropdown-item.active {
  margin-left: -1px;
  margin-right: -1px;
  width: calc(100% + 2px);
}
.offcanvas .navbar .dropdown-item {
  line-height: 1.2;
  white-space: wrap;
}
.offcanvas .navbar .menu-item:not(:last-child) .nav-link {
  border-bottom: 1px solid rgba(var(--navbar-main-color-rgb), 0.06);
}
.offcanvas .navbar .dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close {
  background: transparent;
  border: 0;
  outline: none;
}
.close .navbar-icon {
  width: 26px;
  height: auto;
  fill: var(--close-color, var(--black));
  padding-right: 0;
  position: relative;
  right: -4px;
  top: -2px;
}

.mobile-lang {
  font-size: 16px;
  display: flex;
  gap: 20px;
}

.navbar-toggler {
  --bs-border-width: 0;
}

.mobile-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-bar .navbar-search {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  margin: 0;
}

@media (max-width: 992px) {
  .offcanvas-body .dropdown-menu {
    position: static !important;
    transform: none !important;
  }
}
/* SM -------------------- */
/* SM -------------------- */
/* MD -------------------- */
/* LG -------------------- */
/* XL -------------------- */
/* XXL ------------------- */
.navbar-logo {
  width: 130px;
}

.navbar {
  --bs-navbar-nav-link-padding-x: 21px;
  --bs-nav-link-font-size: 18px;
  --bs-navbar-color: var(--black);
  --bs-navbar-active-color: var(--primary);
}
.navbar .dropdown-toggle:after {
  color: var(--primary);
}
.navbar .dropdown-menu {
  --bs-nav-link-font-size: 16px;
  --bs-navbar-nav-link-padding-x: 16px;
  --bs-nav-link-padding-y: 8px;
  --bs-nav-link-padding-x: 12px;
  --bs-dropdown-padding-y: 4px;
}

.dropdown-menu[data-bs-popper] {
  left: calc(var(--bs-nav-link-padding-x) * 1.2);
}

.nav-link:visited {
  color: var(--bs-navbar-color);
}

/* ----- Stiky menu */
.menu-placeholder {
  display: none;
}

.menu-fixed #menu-pc {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  animation-duration: 0.3s;
  animation-name: slideDown;
  max-width: 100vw;
  -webkit-backface-visibility: hidden;
  z-index: 200;
}
.menu-fixed.logged-in #menu-pc {
  top: var(--admin-bar-height, 0);
  animation-name: slideDownAdmin;
}
.menu-fixed .menu-line {
  padding: 0;
}
.menu-fixed .menu-line .navbar {
  padding: 8px 0;
}
.menu-fixed .navbar-logo {
  width: 100px;
}
.menu-fixed .menu-placeholder {
  display: block;
}

@keyframes slideDown {
  0% {
    top: -150px;
  }
  100% {
    top: 0;
  }
}
@keyframes slideDownAdmin {
  0% {
    top: -150px;
  }
  100% {
    top: var(--admin-bar-height, 0);
  }
}
/* ----- Поиск */
.searchform {
  display: flex;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.05);
  width: 100%;
  align-items: center;
  margin-bottom: var(--gutters);
}
.searchform:focus-within {
  border-color: rgba(0, 0, 0, 0.1);
}
.searchform-input {
  border: 0;
  width: 100%;
  padding: 9px 10px 7px 12px;
  background: transparent;
}
.searchform-input:focus {
  outline: none;
}
.searchform-button {
  background-color: transparent;
  border: 0;
  outline: none;
  padding-right: 15px;
  height: 100%;
}

.navbar-search,
.searchform-button {
  background: transparent;
  border: 0;
  outline: none;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: 2em;
}
.navbar-search .navbar-icon,
.searchform-button .navbar-icon {
  width: 1.1em;
}

.navbar-search {
  margin-right: -6px;
}

.offcanvas-top {
  --bs-offcanvas-height: 75px;
}

.logged-in .offcanvas-top {
  top: var(--admin-bar-height, 0);
}

/* ----- Язык */
.lang {
  display: flex;
  align-items: center;
  font-size: var(--bs-nav-link-font-size);
  text-decoration: none;
  color: var(--black);
  line-height: 1;
}
.lang:active, .lang:visited {
  text-decoration: none;
  color: var(--black);
}
.lang:before {
  display: block;
  content: "";
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: var(--image) no-repeat center/cover;
  margin-right: 0.4em;
}
.lang.en {
  --image: url(../images/flag-en.svg);
}
.lang.ru {
  --image: url(../images/flag-ru.svg);
}
.lang.ky {
  --image: url(../images/flag-ky.svg);
}

@media (min-width: 600px) {
  .menu-line {
    --admin-bar-height: 46px;
  }
}
@media (min-width: 782px) {
  .menu-line {
    --admin-bar-height: 32px;
  }
}
/* SS -------------------- */
/* SM -------------------- */
/* MD -------------------- */
/* LG -------------------- */
/* XL -------------------- */
/* XXL ------------------- */
h1, .h1 {
  font-size: var(--fz-h1);
  font-weight: 700;
  margin-bottom: var(--h1-margin, 0.9em);
  line-height: 1.1;
}
h1 + .subtitle, .h1 + .subtitle {
  margin-bottom: calc(var(--fz-h1) * var(--h1-sub-margin, .9));
}

h2, .h2 {
  font-size: var(--fz-h2);
  font-weight: 700;
  margin-bottom: var(--h2-margin, 1em);
  line-height: 1.1;
}
h2 + .subtitle, .h2 + .subtitle {
  margin-bottom: calc(var(--fz-h2) * var(--h2-sub-margin, 1));
}

h3, .h3 {
  font-size: var(--fz-h3);
  font-weight: 600;
  margin-bottom: var(--h3-margin, 1em);
  line-height: 1.2;
}

/* ------ Ссылки */
a.float:after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ------ Кнопки */
.bt {
  --bt-color: #fff;
  --bt-border: var(--fix-btcolor, var(--primary));
  --bt-bg: var(--fix-btcolor, var(--primary));
  --bt-hover-color: var(--fix-btcolor, var(--primary));
  --bt-hover-border: var(--fix-btcolor, var(--primary));
  --bt-hover-bg: transparent;
  --bt-icon-color: var(--bt-color);
  --bt-hover-icon-color: var(--bt-hover-color);
  font-size: 16px;
  color: var(--bt-color);
  background: var(--bt-bg);
  border: 1px solid var(--bt-border);
  padding: 0.8em 1.2em 0.75em 1.2em;
  transition: all 0.3s;
  text-decoration: none;
  border-radius: 0.45em;
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}
.bt:visited {
  background: var(--bt-bg);
  color: var(--bt-color);
}
.bt:hover, .bt:focus {
  color: var(--bt-hover-color);
  background: var(--bt-hover-bg);
  border-color: var(--bt-hover-border);
}
.bt:hover .icon, .bt:focus .icon {
  color: var(--bt-hover-icon-color);
}
.bt .icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4em;
  margin-left: -0.2em;
  position: relative;
  top: -0.08em;
  fill: currentColor;
  aspect-ratio: 1/1;
  color: var(--bt-icon-color);
  transition: all 0.3s;
}
.bt.outline {
  --bt-bg: transparent;
  --bt-color: var(--black);
  --bt-icon-color: var(--fix-btcolor, var(--secondary));
  --bt-hover-bg: var(--fix-btcolor, var(--secondary));
  --bt-hover-color: #fff;
}
.bt.sec {
  --fix-btcolor: var(--secondary);
}
.bt.sm {
  font-size: 14px;
  font-weight: 500;
  padding: 0.47em 0.8em 0.5em 0.8em;
}
.bt.lg {
  font-size: 18px;
  font-weight: 500;
}

.bt-group {
  --gutrer: 8px;
  margin: calc(var(--gutrer)* -1);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bt-group .bt {
  margin: var(--gutrer);
}

/* ----- кнопка вверх */
.bt-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s;
  background: var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation-duration: 0.3s;
  z-index: 200;
}
.bt-top-icon {
  width: 14px;
  fill: #fff;
}
.bt-top.enable {
  opacity: 1;
  animation-name: slideUp;
}

@keyframes slideUp {
  0% {
    bottom: -60px;
  }
  100% {
    bottom: 20px;
  }
}
/* SS -------------------- */
/* SM -------------------- */
/* MD -------------------- */
/* LG -------------------- */
/* XL -------------------- */
/* XXL ------------------- */
.categories {
  grid-template-columns: auto;
}

li.filter-active a {
  color: var(--primary) !important;
}

/* SS -------------------- */
/* SM -------------------- */
/* MD -------------------- */
/* LG -------------------- */
/* XL -------------------- */
/* XXL ------------------- */