@charset 'utf-8';

body {

	--padding-inline: 10px;
	--padding-block: 100px;

	--inner-max-width: 1620px;

	--header-height: 94px;
	--header-height-scrolled: 70px;

	--color-dark: #000;
	--color-light: #fff;
	--color-border: #000;
	--color-accent: #e8f643;
	--color-accent2: #603C90;

	--font-title: 'Benzin', serif;
	--font-text: 'Steppe', sans-serif;

	--transition-duration: 300ms;

	--bx-panel-height: 0px;

}

@media (min-width: 1024px) {
	:has(#bx-panel) body {
		--bx-panel-height: 39px;
	}
}

@media (min-width: 1300px) {
	body {
		--padding-block: 200px;
		--padding-inline: 24px;
	}
}

@layer reset {

	*, ::before, ::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
		-webkit-text-size-adjust: 100%;
	}
	html {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	  scrollbar-gutter: stable;
	  scroll-behavior: smooth;
	}
	img, svg, picture, video, iframe {
		display: block;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}
	svg:not(:root) {
		overflow: hidden;
	}
	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}
	code, pre {
		font-family: monospace, serif;
	}
	blockquote, q {
		quotes: none;
		&::before, &::after {
			content: '';
			content: none;
		}
	}
	button, input, select, textarea {
		font: inherit;
		border-radius: 0;
	}
	label {
		display: block;
	}
	label, button, input[type="file"] {
		cursor: pointer;
	}
	input[type="search"] {
		-webkit-appearance: textfield;
		&::-webkit-search-cancel-button, &::-webkit-search-decoration {
			-webkit-appearance: none;
		}
	}
	input[type="number"] {
		&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}
		&, &:hover, &:focus {
			appearance: none;
			-moz-appearance: textfield;
		}
	}
	[disabled], :disabled {
		cursor: default;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	a:hover {
		color: currentColor;
	}

	@media (prefers-reduced-motion: reduce) {
		body * {
			animation: none !important;
			transition-duration: unset !important;
		}
	}

}

@layer modals {

	.modal {
		display: none;
		margin: 0;
		padding: 20px;
	}
	.modal_close {
		cursor: pointer;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 24px;
		height: 24px;
		padding: 5px;
		background: none;
		border: none;
	}
	.fancybox-bg {
		background: #000 !important;
	}
	.fancybox-is-open .fancybox-bg {
		opacity: 0.2 !important;
	}
	.fancybox-slide--html {
		padding: 0 !important;
	}

	@media (min-width: 1024px) {
		.modal {
			padding: 40px;
			margin: 100px auto;
		}
	}

}

@layer buttons {

	.btn {
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 56px;
		padding: 0 20px;
		line-height: 1;
		text-decoration: none;
		font-size: 16px;
		font-weight: 400;
		border: none;
		border-radius: 0px;
		background: none;
		font-family: var(--font-title);
		transition: all var(--transition-duration) linear;
	}
	.btn._bg {
		color: var(--color-light);
		background: var(--color-dark);
	}
	.btn._bd {
		color: var(--color-dark);
		border: 1px solid var(--color-dark);
	}

}

@layer text {

	body {
		font-size: 16px;
		font-family: var(--font-text);
		font-style: normal;
		font-weight: 400;
		color: var(--color-dark);
		letter-spacing: -0.03em;
	}

	p:not(:last-child) {
		margin-bottom: 10px;
	}

	p a {
		transition: all var(--transition-duration) linear;
		text-decoration: underline;
		text-decoration-style: solid;
		text-underline-offset: 2px;
		text-decoration-thickness: 1px;
		text-decoration-color: currentColor;

		&:hover {
			text-decoration-color: transparent;
		}
	}
	ol, ul {
		padding-left: 30px;

		&:not(:last-child) {
			margin-bottom: 1lh;
		}
	}
	li {
		margin: 0;
	}

}

@layer h {

	.h1, h1,
	.h2, h2,
	.h3, h3 {
		font-optical-sizing: auto;
		font-style: normal;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: normal;
	}

	.h1, h1 {
		margin-bottom: 25px;
		font-size: 28px;
		font-family: var(--font-title);
	}
	.h2, h2 {
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: 700;
	}
	.h3, h3 {
		font-size: 20px;
		font-weight: 700;
	}

	@media (min-width: 414px) {
		.h1, h1 {
			font-size: 30px;
		}
	}

	@media (min-width: 1280px) {
		.h1, h1 {
			margin-bottom: 40px;
			font-size: 40px;
		}
	}

	@media (min-width: 1600px) {
		.h1, h1 {
			margin-bottom: 50px;
			font-size: 45px;
		}
		.h2, h2 {
			margin-bottom: 25px;
		}
	}

}

@layer other {

	:has( > .inner) {
		padding-inline: var(--padding-inline);
	}
	.inner {
		max-width: var(--inner-max-width);
		margin-inline: auto;
	}

	.hidden {
		display: none !important;
	}

	.noscroll {
		overflow: hidden;
	}

	.fit {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		object-position: center;
	}

	a, .btn {
		transition: all 400ms linear;
	}

	.moreLink {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 16px;
		width: fit-content;
		margin: auto;
		padding-bottom: 6px;
		line-height: 1;
		font-size: 20px;
		font-weight: 500;
		background: none;
		border: none;
		color: inherit;
	}
	.moreLink::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: currentColor;
	}
	.moreLink img {
		height: 14px;
		margin-top: 2px;
	}

}

@layer form {

	form {
		position: relative;
	}

	form::after {
		content: '';
		display: block;
		width: calc(100% + 20px);
		height: calc(100% + 20px);
		position: absolute;
		top: -10px;
		left: -10px;
		background: rgba(255, 255, 255, .2);
		transition: all 200ms linear;
		border-radius: 5px;
		opacity: 0;
		visibility: hidden;
		cursor: wait;
	}
	form.sending::after {
		opacity: 1;
		visibility: visible;
	}

	input,
	textarea,
	select {
		width: 100%;
		height: 56px;
		padding: 1px 10px 0;
		background: none;
		border: 1px solid var(--color-border);
	}
	textarea {
		overflow: auto;
		line-height: 1.1;
		min-height: 5.5em;
		resize: vertical;
		vertical-align: top;
	}

	[placeholder]::-webkit-input-placeholder { color: var(--color-dark); }
	[placeholder]:-ms-input-placeholder      { color: var(--color-dark); }
	[placeholder]::-moz-placeholder          { color: var(--color-dark); }
	/*[placeholder]:focus::-webkit-input-placeholder { color: transparent; }
	[placeholder]:focus:-ms-input-placeholder      { color: transparent; }
	[placeholder]:focus::-moz-placeholder          { color: transparent; }*/

	input.ui[type="radio"],
	input.ui[type="checkbox"] {
	  display: none;
	}
	input.ui[type="radio"] + div,
	input.ui[type="checkbox"] + div {
	  position: relative;
	  display: block;
	  padding: 0 0 0 30px;
	  line-height: 18px;
	}
	input.ui[type="radio"] + div::before,
	input.ui[type="radio"] + div::after,
	input.ui[type="checkbox"] + div::before,
	input.ui[type="checkbox"] + div::after {
	  content: '';
	  display: block;
	  position: absolute;
	  box-sizing: border-box;
	}
	input.ui[type="radio"] + div::before,
	input.ui[type="radio"] + div::after {
		border-radius: 50%;
	}
	input.ui[type="radio"] + div::before,
	input.ui[type="checkbox"] + div::before {
	  top: 0;
	  left: 0;
	  width: 18px;
	  height: 18px;
	  border: 1px solid #000;
	}
	input.ui[type="radio"] + div::after,
	input.ui[type="checkbox"] + div::after {
	  opacity: 0;
	  top: 3px;
	  left: 3px;
	  width: 12px;
	  height: 12px;
	  background: #000;
	  transition: all 200ms linear;
	}
	input.ui[type="radio"]:checked + div::after,
	input.ui[type="checkbox"]:checked + div::after {
	  opacity: 1;
	}

	.wrong input,
	.wrong textarea,
	.wrong .jq-selectcontent.__select {
		border-color: #f3c0c0;
		background: #ffeaea !important;
	}
	.error {
		padding: 5px 0;
		font-size: 14px;
		color: #c34343;
		transition: all 200ms linear;
		transform: translateY(-50%);
		opacity: 0;
	}
	.error.shown {
		opacity: 1;
		transform: translateY(0);
	}

	.ajax_loader {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60px;
		height: 60px;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	.ajax_loader_svg {
		width: 100%;
		height: 100%;
	}
	.ajax_loader_circle {
		stroke: #00A499;
		transition: 300ms stroke-dashoffset;
	  transform: rotate(-90deg);
	  transform-origin: 50% 50%;
	}
	.ajax_loader_digit {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		text-align: center;
	}

	.agree a {
		text-decoration: underline;
	}
	.agree a:hover {
		text-decoration-color: transparent;
	}

}

@layer head {

	.head {
		position: sticky;
		top: 0;
		background: var(--color-light);
		z-index: 10;
	}
	.head.scrolled {
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}
	.head > .inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--header-height);
		transition: all 300ms linear;
	}
	.head.scrolled > .inner {
		height: var(--header-height-scrolled);
	}
	:where(.head_lang, .head_tel, .head_callback) {
		transition: all 300ms linear;
	}
	.head_logo {
		display: flex;
		align-items: center;
		height: calc(100% - 10px);
	}
	.head_callback {
		text-decoration: underline;
	}
	.head_burger {
		position: relative;
		width: 46px;
		height: 100%;
		padding: 0;
		overflow: hidden;
		font-size: 0;
		text-indent: -9999px;
		border: none;
		background: none;
	}

	.head_burger div,
	.head_burger div::before,
	.head_burger div::after {
		position: absolute;
		width: 100%;
		height: 2px;
		background: var(--color-dark);
		transition: all 300ms linear;
	}
	.head_burger div {
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		background: none;
	}
	.head_burger div::before,
	.head_burger div::after {
		content: '';
		display: block;
		left: 0;
		right: 0;
	}
	.head_burger div::before {
		width: 100%;
		top: -4px;
	}
	.head_burger div::after {
		bottom: -3px;
		width: 65%;
	}
	.head_burger.active div {
		width: 20px;
	}
	.head_burger.active div::before {
		top: 0;
		transform: rotate(45deg);
	}
	.head_burger.active div::after {
		width: 100%;
		bottom: 0;
		transform: rotate(-45deg);
	}
	.head nav {
		position: fixed;
		inset: var(--header-height) 0 0;
		background: var(--color-light);
		transition: all 300ms linear;
		opacity: 0;
		visibility: hidden;
		overflow: auto;
	}
	.head.scrolled nav {
		top: var(--header-height-scrolled);
	}
	.head nav.shown {
		opacity: 1;
		visibility: visible;
	}
	.head nav > ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		justify-content: center;
		align-content: center;
		gap: 25px;
		font-size: 30px;
		font-weight: 500;
	}
	.head nav > ul > li {
		position: relative;
	}
	.head nav > ul > li > a {
		display: flex;
		align-items: center;
		height: 60px;
	}
	.head nav > ul > li > a.current::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		bottom: 0;
		width: calc(var(--jsw) - 20px);
		background: var(--color-accent);
		transform: translateX(-50%);
		z-index: -1;
	}

	@media (max-width: 1023px) {
		#bx-panel,
		.head_logoholder {
			display: none !important;
		}
		:where(.head_lang, .head_tel, .head_callback) {
			position: fixed;
			z-index: 1;
			font-size: 18px;
		}
		.head_lang {
			left: var(--padding-inline);
			bottom: 72px;
		}
		.head_lang::before {
			content: '';
			display: block;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			height: 110px;
			background: var(--color-accent);
			z-index: -1;
			transition: all 400ms cubic-bezier(0, 0, .25, 1);
			opacity: 0;
		}
		.head_lang.show_before::before {
			opacity: 1;
		}
		.head_tel {
			left: var(--padding-inline);
			bottom: 20px;
		}
		.head_callback {
			right: var(--padding-inline);
			bottom: 20px;
		}
		.head:not(.menu_shown) :where(.head_lang, .head_tel, .head_callback) {
			opacity: 0;
			visibility: hidden;
		}
		.head nav {
			padding-block: 15px 110px;
		}
	}

	@media (min-width: 1024px) {
		.head .inner {
			padding-bottom: 24px;
		}
		#bx-panel ~ .head:not(.scrolled) nav {
			top: calc(var(--header-height) + 39px);
		}
		.head.menu_shown :where(.head_lang, .head_tel, .head_callback) {
			opacity: 0;
		}
		.head_lang {
			flex: 0 0 46px;
		}
		.head_logoholder {
			width: 77px;
			aspect-ratio: 1 / 1;
		}
		.head_logo {
			position: absolute;
			top: 50%;
			left: 50%;
			display: flex;
			align-items: center;
			transform: translate(-50%, -50%);
			transition: all 300ms linear;
		}
		.head.menu_shown .head_logo {
			left: var(--padding-inline);
			transform: translate(0, -50%);
		}
	}

	@media (min-width: 1600px) {
		.head_burger {
			width: 60px;
		}
		.head_burger div::before,
		.head_burger div::after {
			height: 2px;
		}
		.head_burger div::before {
			top: -4px;
		}
		.head_burger div::after {
			bottom: -4px;
		}
	}

	@media (hover: hover) {
		.head_burger:not(.active):hover div::before,
		.head_burger:not(.active):hover div::after {
			width: 40px;
		}
	}

}

@layer head_popup {

	.head_popup {
		position: fixed;
		inset: var(--header-height) 0 110px;
		z-index: 1;
		transition: all 300ms linear;
		opacity: 0;
		visibility: hidden;
	}
	.head_popup.shown {
		opacity: 1;
		visibility: visible;
	}
	.head_popup_bg {
		background: rgba(0, 0, 0, 0.2);
	}
	.head_popup_window {
		padding: var(--padding-inline);
		max-width: var(--inner-max-width);
		background: var(--color-accent);
	}
	.head_popup_close {
		position: fixed;
		top: 0;
		right: 0;
		height: var(--header-height);
		aspect-ratio: 1 / 1;
		border: none;
		background: none;
	}
	.head_popup_window .h1,
	.head_popup_window p {
		margin-block: 0 15px;
	}
	.head_popup_window p {
		font-size: 18px;
	}
	.head_popup_window form {
		display: grid;
		gap: 15px;
	}
	.head_popup_window form .btn {
		margin-top: 5px;
	}

	@media (max-width: 1599px) {
		.head_popup_close svg {
			display: none;
		}
	}

	@media (max-width: 1023px) {
		.head_popup_window {
			position: absolute;
			inset: 0;
			width: 100%;
			overflow: auto;
		}
	}

	@media (min-width: 1024px) {
		.head_popup {
			bottom: 0;
		}
		#bx-panel ~ .head:not(.scrolled) .head_popup {
			inset: calc(var(--header-height) + 39px) 0 0;
		}
		.head_popup_bg {
			position: absolute;
			inset: 0;
		}
		.head_popup_window {
			position: relative;
			margin: 0 auto;
		}
		#bx-panel ~ .head:not(.scrolled) .head_popup_close {
			top: 39px;
		}
		#head_popup_callback .head_popup_window {
			padding: 50px 50px 45px;
		}
		.head_popup_callback_row {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		.head_popup_callback_row p {
			max-width: 384px;
		}
		.head_popup_callback_row form {
			gap: 10px;
			max-width: 552px;
		}
		.head_popup_callback_row form .btn {
			margin-top: 8px;
		}
	}

	@media (min-width: 1400px) {
		.head_popup_callback_row {
			gap: 77px;
		}
	}

	@media (min-width: 1600px) {
		.head_popup_callback_row {
			gap: 0;
		}
		.head_popup_close {
			position: absolute;
			top: 25px !important;
			right: 25px;
			width: 42px;
			height: 42px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

}

@layer foot {

	.foot {
		padding-block: 25px 15px;
	}
	.foot_logo {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.foot_logo svg {
		width: 98px;
	}
	.foot_logo_text {
		opacity: 0.4;
		font-size: 13px;
	}
	.foot_tel {
		display: block;
		font-size: 26px;
		font-family: var(--font-title);
		font-weight: 600;
	}
	.foot_soc {
		display: grid;
		gap: 20px;
	}
	.foot_bottom {
		display: grid;
		gap: 10px;
		margin-top: 140px;
		opacity: 0.4;
		font-size: 13px;
	}

	@media (max-width: 1023px) {
		.foot_tel {
			margin-block: 20px 42px;
		}
		.foot_soc {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (min-width: 414px) {
		.foot_tel {
			font-size: 30px;
		}
	}

	@media (min-width: 1024px) {
		.foot {
			padding-block: 20px;
		}
		.foot .inner {
			position: relative;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
		}
		.foot_logo svg {
			width: 84px;
		}
		.foot_logo_text {
			font-size: 16px;
		}
		.foot_soc {
			gap: 10px;
			grid-column: 2 / 3;
			margin-top: 48px;
		}
		.foot_bottom {
			position: absolute;
			inset: auto 0 0;
			margin-top: 0;
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
		}
	}

	@media (min-width: 1280px) {
		.foot_tel {
			font-size: 45px;
		}
	}

	@media (min-width: 1400px) {
		.foot_soc {
			margin-top: 107px;
		}
	}

	@media (min-width: 1600px) {
		.foot_tel {
			font-size: 40px;
		}
		.foot_soc {
			gap: 12px;
			font-size: 18px;
			margin-top: 92px;
		}
	}

}

@layer contactUs {

	.contactUs {
		overflow: hidden;
		margin-top: 100px;
		background: var(--color-accent);
	}
	.contactUs .inner {
		position: relative;
		padding-block: 88px;
	}
	.contactUs_intro svg {
		position: absolute;
		height: 86px;
		right: -40px;
		top: 15px;
	}
	.contactUs .h1 {
		margin-bottom: 15px;
		font-size: 40px;
	}
	.contactUs form {
		display: grid;
		gap: 10px;
		margin-top: 18px;
	}
	.contactUs form .agree {
		margin-block: 5px;
	}

	@media (max-width: 1023px) {
		.contactUs_intro svg {
			scale: -1 1;
		}
	}

	@media (min-width: 1024px) {
		.contactUs .inner {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			padding-block: 50px;
		}
		.contactUs_intro svg {
			height: 113px;
			inset: auto auto 17px -48px;
		}
		.contactUs_intro {
			position: relative;
			grid-column: 1 / 5;
			padding-left: 30px;
			font-size: 18px;
		}
		.contactUs_intro .h1 {
			margin-bottom: 22px;
		}
		.contactUs form {
			grid-column: 7 / 12;
		}
	}

	@media (min-width: 1300px) {
		.contactUs {
			margin-top: 200px;
		}
	}

	@media (min-width: 1400px) {
		.contactUs_intro {
			font-size: 25px;
		}
	}

	@media (min-width: 1600px) {
		.contactUs .inner {
			padding-block: 65px 45px;
		}
		.contactUs_intro {
			grid-column: 1 / 4;
			padding-left: 0;
			font-size: 20px;
		}
		.contactUs_intro svg {
			bottom: -15px;
			height: 150px;
		}
	}

	@media (min-width: 1900px) {
		.contactUs_intro svg {
			left: -182px;
		}
	}

}

@layer scrollbars {

	.os-host-overflow-y .os-viewport {
		padding-right: 10px;
	}

	.os-scrollbar-horizontal {
		height: 5px;
	}
	.os-scrollbar-horizontal .os-scrollbar-track {
		height: 5px;
	}
	.os-scrollbar-horizontal .os-scrollbar-track::before {
		content: '';
		display: block;
		width: 100%;
		height: 5px;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		background: #EDEDED;
	}

	.os-scrollbar-vertical {
		right: 0 !important;
		width: 5px;
	}
	.os-scrollbar-vertical .os-scrollbar-track {
		width: 5px;
	}
	.os-scrollbar-vertical .os-scrollbar-track::before {
		content: '';
		display: block;
		width: 5px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		background: #EDEDED;
	}

	.os-scrollbar-handle {
		background: var(--color-accent2);
	}
	.os-scrollbar-unusable {
		display: none !important;
	}

}

@layer tagFilters {

	.tagFilters {
		font-size: 17px;
	}
	.tagFilters_row {
		display: flex;
		gap: 10px 25px;
		flex-wrap: wrap;
	}
	.tagFilters input {
		display: none;
	}
	.tagFilters a,
	.tagFilters input + div {
		white-space: nowrap;
		transition: all 300ms linear;
		border-bottom: 5px solid transparent;
	}
	.tagFilters a span,
	.tagFilters input + div span {
		opacity: 0.5;
		vertical-align: super;
		margin-left: 5px;
		font-size: 16px;
	}
	.tagFilters a.current,
	.tagFilters input:checked + div {
		border-bottom-color: var(--color-accent);
	}

	@media (max-width: 1023px) {
		.tagFilters {
			position: relative;
			width: var(--jsw);
			max-width: var(--inner-max-width);
			margin-inline: calc(var(--padding-inline) * -1);
			padding: 0 var(--padding-inline) 10px;
			margin-bottom: 10px;
			overflow-x: scroll;
			-ms-overflow-style: none;
			scrollbar-width: none;
		}
		.tagFilters::-webkit-scrollbar {
			display: none;
		}
		.tagFilters_row {
			flex-wrap: nowrap;
		}
		.tagFilters_row::after {
			content: '';
			display: block;
			flex: 0 0 1px;
			height: 1px;
		}
		.tagFilters_more {
			display: none;
		}
	}

	@media (min-width: 1024px) {
		.tagFilters_row {
			justify-content: space-between;
			position: relative;
			padding-right: 60px;
			height: 30px;
			overflow: hidden;
			transition: all 300ms linear;
		}
		.tagFilters a,
		.tagFilters input + div {
			height: 30px;
			line-height: 1;
			padding-bottom: 2px;
			border-bottom-width: 3px;
		}
		.tagFilters_more {
			position: absolute;
			top: 0;
			right: 0;
			width: 28px;
			height: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-weight: 400;
			background: var(--color-accent);
			border: none;
		}
	}

	@media (min-width: 1200px) {
		article.works .tagFilters {
			padding-inline: 25px;
		}
	}

	@media (min-width: 1300px) {
		.tagFilters {
			margin-bottom: 20px;
			font-size: 25px;
		}
	}

	@media (min-width: 1400px) {
		.tagFilters a,
		.tagFilters input + div {
			padding-bottom: 5px;
			border-bottom-width: 4px;
		}
	}

	@media (min-width: 1600px) {
		.tagFilters {
			font-size: 20px;
		}
	}

}

@layer pageHead_nav {

	.pageHead:has(nav) .inner {
		display: grid;
		gap: 25px;
	}
	.pageHead:has(nav) h1 {
		margin: 0;
	}
	.pageHead nav ul {
		display: grid;
		gap: 10px;
		padding: 0;
		margin: 0;
	}
	.pageHead nav li {
		list-style: none;
		font-size: 20px;
	}
	.pageHead nav li:not(.current) {
		opacity: 0.5;
	}
	.pageHead nav li a {
		display: block;
		margin-inline: -9px;
		padding-inline: 9px;
	}
	.pageHead nav li.current a {
		background: var(--color-accent);
	}

	@media (max-width: 767px) {
		.pageHead h1 {
			text-align: center;
		}
	}

	@media (min-width: 1024px) {
		.pageHead:has(nav) .inner {
			grid-template-columns: 1fr 1fr;
			gap: 20px;
		}
		.pageHead:has(nav) h1 {
			align-self: start;
			line-height: 1;
		}
		.pageHead nav {
			padding-top: 8px;
			margin-right: 0;
		}
	}

	@media (min-width: 1200px) {
		.pageHead:has(nav) {
			padding-inline: 45px;
		}
		.pageHead:has(nav) .inner {
			gap: 90px;
		}
		.pageHead nav li a {
			max-width: 638px;
		}
	}

	@media (min-width: 1600px) {
		.pageHead:has(nav) .inner {
			gap: 108px;
		}
	}

}

@layer crumbs {

	.crumbs {
		margin-block: 10px 20px;
	}
	.crumbs ul {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0;
	}
	.crumbs li {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.crumbs li svg {
		flex: 0 0 17px;
	}
	.crumbs li:not(:last-child) {
		color: #808080;
	}

	@media (min-width: 414px) {
		.crumbs {
			font-size: 20px;
		}
	}

	@media (min-width: 1024px) {
		.crumbs {
			margin-block: 30px 50px;
		}
	}

	@media (min-width: 1600px) {
		.crumbs {
			margin-block: 40px 50px;
		}
	}

}

@layer modalMessage {

	#modalMessage {
		margin-inline: var(--padding-inline);
		max-width: 820px;
	}
	#modalMessage .content {
		min-height: 315px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30px;
		font-family: var(--font-title);
		font-weight: 600;
		text-align: center;
	}

}

@layer pagi {

	/* ! стили не соответствуют html структуре
	*******************************************************************************/
	/*.pagi {
		.pagi_row {
		  display: flex;
		  align-items: center;
		  flex-wrap: wrap;
		  gap: 10px;
		}
		.pagi_item,
		.pagi_dots {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  gap: 8px;
		}
		.pagi_item._current {}
		.pagi_item._prev,
		.pagi_item._next {}

		@media (max-width: 1023px) {
		  .pagi_item._prev {
		    display: none;
		  }
		  .pagi_item._num:nth-child(n+4) {
		    display: none;
		  }
		  .articles + .pagi .pagi_item._prev,
		  .articles + .pagi .pagi_item._next {
		    display: flex;
		    font-size: 0;
		  }
		}
	}*/

}

@layer intro {

	.intro {
		--row-gap: 24px;
		background: var(--color-accent);
	}
	.intro_row {
		display: grid;
		gap: 15px var(--row-gap);
		padding-block: 30px;
	}
	.intro_main {
		position: relative;
	}
	.intro_company {
		display: grid;
		align-items: center;
		grid-template-columns: 110px 1fr;
		gap: 10px;
		margin-bottom: 12px;
	}
	.intro_company img {
		max-width: 110px;
	}
	.intro_company_desc {
		opacity: 0.5;
	}
	.intro_title {
		margin-bottom: 5px;
		font-size: 25px;
		text-transform: uppercase;
		line-height: 1.2;
	}
	article.case .intro_title {
		font-size: 22px;
	}
	.intro_info {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin-block: 25px 50px;
	}
	.intro_info_item {
		position: relative;
		padding-left: 30px;
	}
	.intro_info_name {
		opacity: 0.5;
	}
	.intro_info_value {
		margin-top: 10px;
	}
	.intro_info_item svg {
		position: absolute;
		top: 6px;
		left: 0;
		width: 18px;
	}
	.intro_side {
		position: relative;
	}
	.intro_logo {
		position: absolute;
		right: 15px;
		bottom: 20px;
	}
	.intro_logo svg {
		width: 142px;
	}
	.intro .moreLink {
		margin: auto 0 30px 30px;
	}
	.intro_over {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		z-index: 1;
	}
	.intro_over_row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		padding: 20px;
		margin-top: calc(var(--row-gap) / 2);
		transform: translateY(-50%);
		background: var(--color-accent);
		border: 1px solid var(--color-dark);
	}
	.intro_over_text {
		font-size: 20px;
		font-weight: 600;
		font-family: var(--font-title);
	}

	@media (max-width: 1299px) {
		.intro_side picture {
			aspect-ratio: 404 / 390;
		}
	}

	@media (max-width: 1023px) {
		.intro_arrow {
			display: none;
		}
	}

	@media (min-width: 414px) {
		.intro_title {
			font-size: 28px;
		}
		article.case .intro_title {
			font-size: 24px;
		}
		.intro_over_row {
			padding: 25px;
		}
	}

	@media (min-width: 1024px) {
		.intro {
			position: relative;
		}
		.intro_row {
			grid-template-columns: 1fr 1fr;
			gap: 0;
			padding-block: 10px;
		}
		.intro_main {
			position: static;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 18px;
			padding-right: 20px;
			padding-bottom: 20px;
		}
		.intro_main:has(.intro_title:first-child) {
			padding-top: 25px;
		}
		.intro_title {
			margin-bottom: 28px;
		}
		.intro_info {
			font-size: 20px;
			line-height: 1.2;
		}
		.intro_logo {
			right: 12px;
			bottom: 12px;
		}
		.intro_arrow {
			margin-top: auto;
			width: 70px;
		}
		.intro_over {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.intro_over_row {
			transform: none;
			margin: 0;
		}
	}

	@media (min-width: 1024px) and (max-width: 1599px) {
		.intro_info {
			margin-block: auto 0;
			grid-template-columns: 305px;
			gap: 20px;
		}
	}

	@media (min-width: 1200px) {
		.intro_main {
			font-size: 25px;
		}
		.intro_logo svg {
			width: 243px;
		}
		.intro_company {
			margin-bottom: 28px;
		}
		.intro_company_desc {
			font-size: 20px;
		}
		.intro_title,
		article.case .intro_title {
			font-size: 36px;
		}
	}

	@media (min-width: 1300px) {
		.intro_side picture {
			height: 697px;
			max-height: calc(var(--jsh) - var(--header-height) - var(--padding-inline) - 20px);
		}
		:has(#bx-panel) .intro_side picture {
			max-height: calc(var(--jsh) - var(--header-height) - var(--padding-inline) - 20px - 39px);
		}
		article.case .intro_main {
			padding: 30px;
		}
		article.case .intro_title {
			font-size: 40px;
			line-height: 1.3;
		}
		article:not(.case) .intro_title {
			font-size: 48px;
		}
	}

	@media (min-width: 1024px) and (max-width: 1599px) {
		.intro {
			padding-inline: var(--padding-inline);
			background: none;
		}
		.intro .inner {
			padding-inline: var(--padding-inline);
			background: var(--color-accent);
		}
	}

	@media (min-width: 1600px) {
		article.case .intro_main {
			padding: 50px 0;
		}
		.intro_logo svg {
			width: 290px;
		}
		.intro_arrow {
			width: 98px;
		}
		.intro_info {
			width: 508px;
			gap: 50px;
		}
		.intro_side picture {
			height: 798px;
		}
		article.case .intro_title {
			font-size: 48px;
		}
	}

}

@layer arise {
	[arise] {
		transition: all 800ms cubic-bezier(0.645, 0.045, 0.645, 1);
	}
	[arise="out"] {
		opacity: 0;
	}
	[arise="in"] {
		opacity: 1;
	}
}

/*
*******************************************************************************/

article.home,
article.about {
	display: grid;
	gap: var(--padding-block);
}
article.member .posting {
	margin-top: var(--padding-block);
}

@media (max-width: 767px) {
	article.about h1 {
		font-size: 30px;
	}
}

/*
*******************************************************************************/