@charset "utf-8";
@font-face {
		font-family: 'Gilroy';
		src: url('../fonts/gilroy_light.woff2') format('woff2'), url('../fonts/gilroy_light.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Gilroy';
		src: url('../fonts/gilroy_regular.woff2') format('woff2'), url('../fonts/gilroy_regular.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Gilroy';
		src: url('../fonts/gilroy_medium.woff2') format('woff2'), url('../fonts/gilroy_medium.woff') format('woff');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Gilroy';
		src: url('../fonts/gilroy_semibold.woff2') format('woff2'), url('../fonts/gilroy_semibold.woff') format('woff');
		font-weight: 600;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Gilroy';
		src: url('../fonts/gilroy_bold.woff2') format('woff2'), url('../fonts/gilroy_bold.woff') format('woff');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
}
:root {
		--font: Gilroy, -apple-system, "Open Sans", system-ui, "sans-serif";
		--font2: "Roboto Condensed", Gilroy, -apple-system, "Open Sans", system-ui, "sans-serif";
		--white: #fff;
		--white5: rgba(255, 255, 255, 0.5);
		--yellow: #FFA800;
		--yellow-hover: #FFC962;
		--yellow5: rgba(255, 168, 0, 0.5);
		--yellow0: rgba(255, 168, 0, 0);
		--dark: #000;
		--white-grey: rgba(255, 255, 255, 0.7);
		--white-grey2: rgba(255, 255, 255, 0.5);
		--dark-grey2: rgba(0, 0, 0, 0.5);
		--shadow: 0px 18px 35px rgba(0, 21, 43, 0.1);
		--shadow2: 0px 18px 35px rgba(0, 21, 43, 0.05);
		--bg-light: #F5F5F5;
		--red: #FF3636;
		--text-red: #E35555;
}
html, body {
		height: 100%;
		box-sizing: border-box;
		text-rendering: optimizeLegibility !important;
		-webkit-font-smoothing: antialiased;
}
body {
		margin: 0;
		padding: 0;
		background: var(--dark);
		font: normal 16px/1.2 var(--font);
		color: var(--white);
		-webkit-text-size-adjust: none;
		display: flex;
		flex-direction: column;
}
*, *:before, *:after {
		box-sizing: border-box;
}
form, fieldset {
		margin: 0;
		padding: 0;
		border: 0;
}
input, select, textarea, button, .jcf-select-text {
		font: normal 16px/1 var(--font);
		color: var(--dark);
		outline: none;
		text-align: left;
}
input[type="text"], input[type="password"], input[type="email"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], textarea, select, .jcf-select-text {
		-webkit-appearance: none;
		border-radius: 4px;
		box-shadow: none;
		border: 2px solid rgba(0, 32, 66, 0.05);
		background: var(--white);
		margin: 0;
		padding: 18px 22px;
		width: 100%;
		display: block;
		transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
		opacity: 1;
		color: var(--dark-grey2);
}
input::-moz-placeholder, textarea::-moz-placeholder {
		opacity: 1;
		color: var(--dark-grey2);
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
		opacity: 1;
		color: var(--dark-grey2);
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
		opacity: 0.5 !important;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
		opacity: 0.5 !important;
}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
		opacity: 0.5 !important;
}
input::-ms-clear {
		display: none;
}
button::-moz-focus-inner {
		border: 0;
}
textarea {
		resize: none;
		padding-top: 16px;
		padding-bottom: 16px;
		height: 112px;
}
input:focus, textarea:focus {
		border-color: var(--yellow);
}
@media (pointer:fine) {
		input:hover, textarea:hover {
				border-color: var(--yellow);
		}
}
.invalid {
		border-color: var(--red) !important;
}
.checkbox {
		width: 16px;
		height: 16px;
		display: block;
		position: relative;
		border: 1px solid rgba(0, 32, 66, 0.25);
		border-radius: 4px;
		transition-property: border, background, box-shadow;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		background: var(--white) url("../img/checkbox-white.svg") no-repeat 50% 50%;
		background-size: auto 8px;
}
@media (pointer:fine) {
		.checkbox:hover, label:hover .checkbox {
				border-color: var(--yellow);
				box-shadow: inset 0 0 0 1px var(--yellow);
		}
}
input:checked ~ .checkbox {
		border-color: var(--yellow);
		background-color: var(--yellow);
}
header, nav, section, article, aside, footer, menu, time, figure, figcaption, main {
		display: block;
}
img, svg, picture {
		border: 0;
		vertical-align: top;
}
a {
		color: var(--yellow);
		text-decoration: underline;
		outline: none;
		cursor: pointer;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		a:hover {
				color: var(--yellow-hover);
		}
}
strong {
		font-weight: bold;
}
p, ol, ul {
		margin: 1.8em 0;
		padding: 0;
}
ol, ul, li {
		list-style: none;
}
li {
		position: relative;
		margin: 0.5em 0;
		padding: 0 0 0 2em;
}
ul > li:before {
		content: '•';
		width: 2em;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
}
ol {
		counter-reset: li;
}
ol > li:before {
		counter-increment: li;
		content: counters(li, ".") ". ";
		position: relative;
		display: inline-block;
		vertical-align: top;
		min-width: 2em;
		margin: 0 0 0 -2em;
		padding: 0 0.25em 0 0;
}
h1, .h1, h2, .h2 {
		font-weight: bold;
		font-size: 32px;
		line-height: 1.2;
		text-transform: uppercase;
		margin: 0 0 6px 0;
}
.swiper {
		overflow: hidden;
}
.swiper-wrapper {
		display: flex;
}
.swiper-slide {
		flex: 0 0 auto;
		width: 100%;
}
.btn {
		cursor: pointer;
		user-select: none;
		position: relative;
		-webkit-appearance: none;
		flex: 0 0 auto;
		max-width: 100%;
		text-align: center;
		text-decoration: none !important;
		color: var(--white) !important;
		border: 0;
		outline: none;
		box-shadow: none;
		font: bold 13px/1.2 var(--font);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		border-radius: 4px;
		gap: 10px;
		background: var(--yellow);
		margin: 0;
		padding: 0 24px;
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		transform: translate3d(0, 1px, 0);
}
.btn:active {
		transform: translate3d(0, 2px, 0);
}
@media (pointer:fine) {
		.btn:hover {
				background-color: var(--yellow-hover);
		}
}
.btn.disabled, .btn:disabled {
		pointer-events: none;
		cursor: default;
		filter: grayscale(100%);
		opacity: 0.5;
}
.big-label {
		font-weight: bold;
		font-size: 18px;
		line-height: 1.2;
		text-transform: uppercase;
		margin: 0 0 6px 0;
}
.select {
		position: relative;
}
.select select, .select .jcf-select-text {
		width: 100%;
		cursor: pointer;
		user-select: none;
		padding-right: 44px;
}
.select:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 26px;
		background: url("../img/select-arrow.svg") no-repeat 50% 50%;
		background-size: contain;
		transform: translate3d(0, -50%, 0);
		width: 15px;
		height: 8px;
		pointer-events: none;
		z-index: 2;
}
.jcf-select, .jcf-select-text {
		display: block;
}
.jcf-select select {
		cursor: pointer;
}
.input-text {
		font-weight: 600;
		font-size: 14px;
		line-height: 1;
		margin: 7px 0 -7px 0;
}
.input-text.red {
		color: var(--text-red);
}
.form-inputs {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px 0;
		margin-left: -14px;
}
.form-inputs .el {
		flex: 0 0 auto;
		width: 100%;
		padding: 0 0 0 14px;
}
.form-inputs .el.wid33 {
		width: 33.333333%;
}
.form-inputs .el.wid50 {
		width: 50%;
}
.form-checks {
		margin: 16px 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-weight: normal;
		font-size: 14px;
		line-height: 1.2;
		letter-spacing: normal;
		text-align: left;
		gap: 9px 0;
}
.form-checks label {
		display: block;
		cursor: pointer;
		user-select: none;
		position: relative;
		padding: 0 0 0 26px;
}
.form-checks label input {
		position: absolute;
		transform: scale(0);
		visibility: hidden;
		opacity: 0;
}
.form-checks .checkbox {
		position: absolute;
		top: 0.6em;
		left: 0;
		transform: translate3d(0, -50%, 0);
}
.form-checks a {
		color: inherit;
}
@media (pointer:fine) {
		.form-checks a:hover {
				color: var(--yellow);
		}
}
.form-submit {
		margin: 17px 0 0 0;
}
.form-submit .btn {
		width: 100%;
}
.mainwrap {
		flex: 0 0 auto;
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
}
.content {
		flex: 1 0 auto;
}
.header, .footer {
		flex: 0 0 auto;
}
.container {
		flex: 0 0 auto;
		width: 100%;
		max-width: 1273px;
		margin: 0 auto;
		padding: 0 40px;
}
.header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
}
.header .container {
		display: flex;
		align-items: flex-start;
		gap: 0 20px;
}
.head-logo {
		position: relative;
		z-index: 3;
		flex: 0 0 auto;
		margin: 20px 0 0 0;
}
.head-logo img {
		width: auto;
		height: auto;
		max-width: 266px;
		max-height: 50px;
}
.head-menu {
		flex: 1;
		display: flex;
		align-content: flex-end;
		justify-content: space-around;
		font-size: 16px;
		line-height: 16px;
		text-align: center;
		padding: 28px 0;
		gap: 12px;
}
.head-menu-fader {
		display: none;
}
.head-menu a {
		color: inherit;
		text-decoration: none;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.head-menu a:hover {
				color: var(--yellow);
		}
}
.head-shop, .head-contacts {
		align-self: stretch;
		flex: 0 0 auto;
		text-align: center;
		color: var(--white-grey);
		text-decoration: none;
		display: flex;
		flex-direction: column;
		background: rgba(217, 217, 217, 0.1);
		border-radius: 0 0 4px 4px;
		width: 161px;
		padding: 0 9px;
		transition-property: transform, background, color;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		position: relative;
		z-index: 3;
		transform: translate3d(0, 0, 0);
}
@media (pointer:fine) {
		a.head-shop:hover {
				background: rgba(217, 217, 217, 0.15);
		}
}
.head-shop {
		gap: 2px 0;
		padding-top: 12px;
		padding-bottom: 8px;
		font-size: 14px;
		line-height: 0.9;
}
.head-shop img {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 40px;
		object-fit: contain;
		object-position: center;
}
.head-contacts {
		padding-top: 17px;
		padding-bottom: 12px;
		gap: 8px 0;
		font-size: 13px;
		line-height: 1.2;
		letter-spacing: 0.05em;
}
.head-contacts a {
		color: inherit;
		text-decoration: none;
}
.toggle-menu {
		display: none;
		position: relative;
		z-index: 3;
}
.soc {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 5px;
}
.soc > * {
		flex: 0 0 auto;
		width: 35px;
		height: 35px;
		background: var(--yellow);
		padding: 8px;
		border-radius: 50%;
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		transform: translate3d(0, 0, 0);
}
.soc > a:active {
		transform: translate3d(0, 1px, 0);
}
@media (pointer:fine) {
		.soc > a:hover {
				background-color: var(--yellow-hover);
		}
}
.soc img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
}
.footer {
		background: var(--dark) url("../img/bg-footer.png") no-repeat 50% 50%;
		background-size: cover;
		padding: 37px 0 18px 0;
		line-height: 1.2;
		font-size: 14px;
}
.footer a {
		color: inherit;
}
@media (pointer:fine) {
		.footer a:hover {
				color: var(--yellow);
		}
}
.footer .container {
		display: grid;
		gap: 10px 25px;
		grid-template-areas:
				"lo li li ad co"
				"cp li li ad co"
				"te te te te te";
		grid-template-columns: 302px 1fr 1fr 210px 210px;
		grid-template-rows: auto 1fr auto;
}
.foot-logo {
		grid-area: lo;
		max-width: 267px;
		margin: -6px 0 0 0;
}
.foot-logo img {
		width: auto;
		height: auto;
		max-width: 268px;
		max-height: 50px;
}
.foot-address {
		grid-area: ad;
}
.foot-address .workhours {
		letter-spacing: 0.05em;
		margin-top: 27px;
}
.foot-contacts {
		grid-area: co;
		text-align: right;
		letter-spacing: 0.05em;
		padding-right: 13px;
}
.foot-contacts > *:not(.foot-title) {
		margin-top: 6px;
}
.foot-contacts .soc {
		justify-content: flex-end;
		margin-bottom: 8px;
		gap: 17px;
}
.foot-contacts a[href^=tel] {
		color: var(--white-grey);
		text-decoration: none;
}
.foot-links {
		grid-area: li;
		display: flex;
		flex-wrap: wrap;
		gap: 23px 25px;
}
.foot-links > * {
		flex: 1 1 auto;
}
.foot-links .links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px 0;
}
.foot-links img {
		width: 16px;
		height: 16px;
		object-fit: contain;
		object-position: center;
		margin: 0 12px 0 0;
		vertical-align: middle;
		position: relative;
		top: -1px;
}
.foot-links a {
		text-decoration: none;
}
.foot-copy {
		grid-area: cp;
		font-size: 12px;
		color: var(--white-grey2);
		margin: 10px 0;
		padding-left: 10px;
}
.foot-text {
		grid-area: te;
		display: flex;
		flex-direction: column;
		gap: 2px 0;
		color: var(--white-grey2);
		padding-left: 10px;
		padding-right: 13px;
}
.foot-title {
		font-weight: bold;
		font-size: 18px;
		line-height: 1;
		text-transform: uppercase;
		margin: 0 0 23px 0;
}
.top-block {
		background: var(--dark) url("../img/bg-top.png") no-repeat 50% 0;
		background-size: cover;
		padding: 197px 0 262px 0;
		font-size: 20px;
		line-height: 1.2;
}
.top-block .container {
		max-width: 1118px;
}
.top-block h1, .top-block .h1 {
		display: inline;
		font: bold 72px/1.05 var(--font2);
		text-transform: uppercase;
		margin: 0 10px 0 0;
}
.top-block h1 strong, .top-block .h1 strong {
		display: block;
		font-weight: inherit;
		color: var(--yellow);
}
.top-block h1 + span, .top-block .h1 + span {
		white-space: nowrap;
}
.top-block .line {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top: -1px;
		left: 40px;
		width: 280px;
		height: 2px;
		margin: 0 -280px 0 0;
		background: linear-gradient(to right, var(--yellow) 0%, var(--yellow0) 100%);
}
.top-block .line:before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 10px;
		height: 10px;
		background: var(--yellow);
		margin: -5px;
		border-radius: 50%;
		box-shadow: 0 0 0 4px var(--yellow5);
}
.top-block .available {
		margin: 81px 0 0 0;
		display: inline-block;
		vertical-align: top;
		position: relative;
		padding: 0 101px 0 0;
}
.top-block .available a {
		font-weight: bold;
		color: inherit;
}
.top-block .available .btn {
		position: absolute;
		top: 50%;
		right: 0;
		width: 66px;
		height: 40px;
		margin: -20px 0;
		padding: 0;
		box-shadow: var(--shadow), 0 0 0 6px rgba(255, 255, 255, 0.28);
}
.top-block .available .btn:before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 10px;
		background: url("../img/chevron-down-white.svg") no-repeat 50% 50%;
		background-size: contain;
		margin: -5px -8px;
		transform: translate3d(0, 0, 0);
		transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.top-block .available a:hover {
				color: var(--yellow);
		}
		.top-block .available a:hover .btn {
				background-color: var(--yellow-hover);
		}
		.top-block .available a:hover .btn:before {
				transform: translate3d(0, 3px, 0);
		}
}
.light-section {
		background: var(--bg-light);
}
.light-section .top-title {
		color: var(--dark);
}
.consult {
		background: var(--white);
		border-radius: 10px;
		box-shadow: var(--shadow2);
		margin: 0 0 -180px 0;
		position: relative;
		top: -180px;
		color: var(--dark);
		padding: 28px 35px;
		display: flex;
		justify-content: space-between;
		gap: 0 35px;
}
.consult h2, .consult .h2 {
		margin: 4px 0 34px 0;
}
.consult .text {
		line-height: 1.3;
		flex: 1;
		max-width: 323px;
}
.consult ul {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 32px 0;
}
.consult li {
		position: relative;
		margin: 0 0 0 4px;
		padding: 0 0 0 31px;
}
.consult li:before {
		content: '';
		position: absolute;
		top: 0.65em;
		left: 0;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		margin: -3px 0;
		background: var(--yellow);
		box-shadow: 0 0 0 4px var(--yellow5);
}
.consult .form {
		flex: 0 0 auto;
		max-width: 658px;
		min-width: 584px;
		width: 59%;
}
.benefits {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 42px;
		padding: 60px 0;
		margin: 0;
		text-align: left;
}
.benefits li:before {
		display: none;
}
.benefits li {
		margin: 0;
		padding: 26px 20px 29px 104px;
		background: var(--white);
		color: var(--dark);
		border-radius: 10px;
		box-shadow: var(--shadow);
}
.benefits strong {
		display: block;
		font-size: 18px;
		text-transform: uppercase;
		margin: 0 0 4px 0;
}
.benefits img {
		position: absolute;
		top: 50%;
		left: 28px;
		width: 53px;
		height: 55px;
		transform: translate3d(0, -50%, 0);
		object-fit: contain;
		object-position: center;
}
.top-title {
		text-align: center;
		font-weight: 300;
		margin: 0 0 30px 0;
}
.top-title a {
		color: inherit;
		font-weight: 500;
}
.top-title h2, .top-title .h2 {
		font: normal 50px/1.2 var(--font2);
		margin: 0 0 11px 0;
		text-transform: uppercase;
}
.catalog {
		background: var(--dark) url("../img/bg-catalog.png") no-repeat 0 0;
		background-size: 908px auto;
		padding: 66px 0 90px 0;
}
.catalog .top-title {
		margin-bottom: 60px;
}
.catalog .top-title:not(:first-child) {
		margin-top: 79px;
}
.item {
		background: var(--white);
		border-radius: 10px;
		display: flex;
		text-decoration: none;
		color: inherit;
		color: var(--dark);
		position: relative;
}
.item .photo {
		flex: 0 0 auto;
		position: relative;
		overflow: hidden;
		transform: translateZ(0);
		backface-visibility: hidden;
}
.item .photo:before {
		content: '';
		display: block;
		padding-top: 91.891891%;
}
.item .photo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		position: absolute;
		top: 0;
		left: 0;
}
.item .photo .swiper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}
.item .photo .swiper-wrapper {
		height: 100%;
}
.item .photo .swiper-slide {
		width: 100%;
		max-width: 100vw;
		height: 100% !important;
}
.photo-slider-prev, .photo-slider-next {
		cursor: pointer;
		user-select: none;
		outline: none;
		border: 0;
		position: absolute;
		top: 50%;
		z-index: 2;
		transition-property: background, opacity;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		width: 37px;
		height: 101px;
		transform: translate3d(0, -50%, 0);
		box-shadow: 0px 5px 35px rgba(0, 0, 0, 0.15);
}
.photo-slider-prev {
		left: 0;
		border-radius: 0 4px 4px 0;
}
.photo-slider-next {
		right: 0;
		border-radius: 4px 0 0 4px;
}
.photo-slider-prev:before, .photo-slider-next:before, .photo-slider-prev:after, .photo-slider-next:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: auto 16px;
}
.photo-slider-prev:after, .photo-slider-next:after {
		opacity: 0;
		transition-delay: 0.1s;
}
.photo-slider-prev:before {
		background-image: url("../img/slider/prev.svg");
}
.photo-slider-prev:after {
		background-image: url("../img/slider/prev-hover.svg");
}
.photo-slider-next:before {
		background-image: url("../img/slider/next.svg");
}
.photo-slider-next:after {
		background-image: url("../img/slider/next-hover.svg");
}
@media (pointer:fine) {
		.photo-slider-prev, .photo-slider-next {
				opacity: 0;
		}
		.photo-slider:hover .photo-slider-prev, .photo-slider:hover .photo-slider-next {
				opacity: 1;
		}
		.photo-slider-prev:hover, .photo-slider-next:hover {
				background-color: var(--white);
		}
		.photo-slider-prev:hover:before, .photo-slider-next:hover:before {
				opacity: 0;
				transition-delay: 0.1s;
		}
		.photo-slider-prev:hover:after, .photo-slider-next:hover:after {
				opacity: 1;
				transition-delay: 0s;
		}
}
.item .head {
		font-weight: bold;
		display: flex;
		flex-direction: column;
		gap: 10px 0;
}
.item .name {
		font-weight: bold;
		font-size: 24px;
		line-height: 1.2;
		color: var(--yellow);
}
.item .bottom {
		font-weight: 600;
		font-size: 13px;
		line-height: 1.3;
		margin-top: auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px 23px;
}
.item .pics {
		flex: 0 0 auto;
		max-width: 100%;
		gap: 10px 23px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
}
.item .pics > * {
		flex: 0 0 auto;
		width: 25px;
		height: 25px;
		position: relative;
}
.item .pics > *:before, .item .pics > *:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: inherit;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
}
.item .pics > *:after {
		opacity: 0;
		transition-delay: 0.1s;
}
.item .pics .bg-photo:before {
		background-image: url("../img/icons/photo.png");
}
.item .pics .bg-photo:after {
		background-image: url("../img/icons/photo-hover.png");
}
.item .pics .bg-video:before {
		background-image: url("../img/icons/video.png");
}
.item .pics .bg-video:after {
		background-image: url("../img/icons/video-hover.png");
}
@media (pointer:fine) {
		.item .pics > a:hover:before {
				opacity: 0;
				transition-delay: 0.1s;
		}
		.item .pics > a:hover:after {
				opacity: 1;
				transition-delay: 0s;
		}
}
.item .txt {
		margin-left: auto;
		text-align: right;
}
.item .yellow {
		color: var(--yellow);
}
.item .descr {
		font-size: 14px;
		line-height: 1.3;
		color: var(--dark-grey2);
}
.item .price {
		font-weight: 600;
		font-size: 14px;
		line-height: 1.3;
		display: flex;
		gap: 10px;
}
.item .price strong {
		display: block;
		font-weight: 600;
		font-size: 32px;
		line-height: 1.3;
}
.item .price strong span {
		font-size: 16px;
}
.item .top {
		width: auto;
		position: absolute;
		z-index: 5;
		font-weight: 500;
		font-size: 20px;
		line-height: 30px;
		padding: 0 22px;
		border-radius: 15px;
		height: 30px;
		background: var(--yellow);
		color: var(--white);
		box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.25);
		pointer-events: none;
}
.item-vert {
		flex-direction: column;
		padding: 26px 20px 20px 20px;
		transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.item-vert:hover {
				box-shadow: 0px 5px 35px rgba(255, 255, 255, 0.6);
		}
}
.item-vert > * {
		width: 100%;
		flex: 0 0 auto;
}
.item-vert .photo {
		width: auto;
		margin: -26px -20px 0 -20px;
		border-radius: 10px 10px 0 0;
}
.item-vert .head {
		margin-bottom: 16px;
		margin-top: -4px;
}
.item-vert .descr {
		flex: 1 0 auto;
}
.item-vert .price {
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		margin-top: 20px;
		color: var(--yellow);
}
.item-vert .price strong {
		color: var(--dark);
}
.item-vert .price .btn {
		min-width: 124px;
}
.item-vert .top {
		top: 20px;
		right: -16px;
}
.item-hor .photo {
		flex: 0 0 auto;
		width: 173px;
		align-self: stretch;
		margin-right: 7px;
}
.item-hor .head {
		flex: 1;
		padding: 23px 0 12px 0;
}
.item-hor .bottom {
		padding-right: 10px;
}
.item-hor .descr {
		width: 27.7%;
		flex: 0 0 auto;
		padding: 23px 0;
		margin: 0 22px 0 34px;
}
.item-hor .price {
		background: var(--dark);
		color: var(--white);
		flex-direction: column;
		justify-content: space-between;
		width: 217px;
		padding: 17px 20px 20px 20px;
		border-radius: 0 10px 10px 0;
}
.catalog-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
}
.call-consult {
		background: var(--dark) url("../img/bg-form.png") no-repeat 50% 50%;
		background-size: cover;
		color: var(--white);
		display: flex;
		align-items: center;
		padding: 32px 67px 32px 53px;
		border-radius: 10px;
		margin: 57px 0 0 0;
		gap: 0 57px;
}
.call-consult .text {
		flex: 1;
}
.call-consult .btn {
		min-width: 249px;
}
.call-consult .btn:after {
		content: '';
		flex: 0 0 auto;
		background: url("../img/chevron-up-white.svg") no-repeat 50% 50%;
		width: 16px;
		height: 10px;
		background-size: contain;
		transform: translate3d(0, 0, 0);
		transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.call-consult .btn:hover:after {
				transform: translate3d(0, -3px, 0);
		}
}
.sets {
		padding: 66px 0;
}
.sets .top-title {
		margin-bottom: 51px;
}
.sets-grid {
		display: grid;
		gap: 24px;
		grid-template-columns: repeat(1, 1fr);
}
.faq {
		margin: 18px 0 53px 0;
}
.faq .block {
		background: var(--white);
		color: var(--dark);
		border-radius: 10px;
		box-shadow: var(--shadow2);
		padding: 36px 35px 70px 35px;
		display: flex;
		gap: 20px 37px;
}
.faq .col {
		flex: 1;
		gap: 20px 0;
		display: flex;
		flex-direction: column;
}
.faq .el {
		line-height: 1.3;
}
.faq .el h3, .faq .el .h3 {
		cursor: pointer;
		user-select: none;
		display: inline-flex;
		vertical-align: top;
		align-items: center;
		margin: 0;
		font-weight: bold;
		font-size: 18px;
		line-height: 1.2;
		padding: 0 0 0 56px;
		min-height: 40px;
		position: relative;
}
.faq .el h3:before, .faq .el .h3:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--yellow) url("../img/chevron-down-white.svg") no-repeat 50% 55%;
		background-size: 16px auto;
		transform: rotate(0deg);
		transition-property: transform, background;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.faq .el h3:hover:before, .faq .el .h3:hover:before {
				background-color: var(--yellow-hover);
		}
}
.faq .el.open h3:before, .faq .el.open .h3:before {
		transform: rotate(-90deg);
}
.faq .el:not(.open) .in {
		display: none;
}
.faq .el .ind {
		padding: 4px 0 0 56px;
}
.faq .el .ind > *:first-child {
		margin-top: 0 !important;
}
.faq .el .ind > *:last-child {
		margin-bottom: 0 !important;
}
.location {
		margin: 53px 0;
		background: var(--white);
		border-radius: 10px;
		box-shadow: var(--shadow2);
		line-height: 1.2;
		color: var(--dark);
		display: flex;
}
.location .text, .location .map {
		flex: 0 0 auto;
		width: 50%;
}
.location .text {
		padding: 33px 56px;
}
.location .map {
		position: relative;
}
.location .map img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 0 10px 10px 0;
		object-fit: cover;
		object-position: center;
}
.location .to-map {
		position: absolute;
		bottom: 13px;
		right: 17px;
		text-decoration: none;
		color: var(--dark);
		font-weight: bold;
		font-size: 10px;
		line-height: 1.2;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		padding: 8px 12px;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 4px;
}
.comp {
		margin: 53px 0 103px 0;
		display: flex;
		background: var(--yellow);
		color: var(--dark);
		box-shadow: var(--shadow);
		border-radius: 10px;
}
.comp .image, .comp .text {
		flex: 0 0 auto;
		width: 50%;
}
.comp .image {
		position: relative;
}
.comp .image img {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 10px 0 0 10px;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
}
.comp .text {
		padding: 35px 35px 50px 65px;
}
.comp h2, .comp .h2 {
		color: var(--white);
		margin: 0 0 32px 0;
}
.comp ul {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
}
.comp li {
		margin: 0 0 0 4px;
		padding: 0 0 0 28px;
}
.comp li:before {
		content: '';
		position: absolute;
		top: 0.6em;
		left: 0;
		width: 6px;
		height: 6px;
		background: var(--white);
		border-radius: 50%;
		margin: -3px 0;
		box-shadow: 0 0 0 4px var(--white5);
}
.gallery {
		position: relative;
}
.gallery .swiper {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
}
.gallery .swiper-wrapper {
		height: 100% !important;
		transition-timing-function: linear !important;
}
.gallery .swiper-slide {
		width: 500px;
		max-width: 100%;
		height: 100% !important;
}
.gallery .swiper-slide img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
}
.gallery .container {
		padding-top: 16px;
		padding-bottom: 16px;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 422px;
		position: relative;
		z-index: 2;
}
.gallery .block {
		pointer-events: all;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 10px;
		color: var(--white);
		padding: 18px 33px 16px 25px;
		flex: 0 0 auto;
		width: 100%;
		max-width: 727px;
}
.about {
		padding-top: 61px;
		padding-bottom: 91px;
		color: var(--dark);
		line-height: 1.3;
}
.about .top-title {
		margin-bottom: 35px;
}
.about .grid {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
}
.about .text, .about .image {
		flex: 0 0 auto;
		width: calc(50% - 40px);
}
.about .text > *:first-child {
		margin-top: 0 !important;
}
.about .text > *:last-child {
		margin-bottom: 0 !important;
}
.about .image {
		background: var(--dark);
		border-radius: 10px;
		box-shadow: 13px 13px 0 var(--yellow), var(--shadow2);
		max-width: 521px;
		margin-right: 13px;
}
.about .image img {
		width: 100%;
		height: auto;
		border-radius: inherit;
}
.mfp-fade .modal {
		opacity: 0;
		transition: all 0.2s ease-out;
		transform: translate3d(0, 20px, 0);
		backface-visibility: hidden;
}
.mfp-fade.mfp-ready .modal {
		opacity: 1;
		transform: translate3d(0, 0, 0);
}
.mfp-fade.mfp-removing .modal {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
}
.mfp-fade.mfp-bg {
		opacity: 0;
		transition: opacity 0.2s ease-out;
		background: rgba(0, 21, 43, 0.5);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
}
.mfp-fade.mfp-ready.mfp-bg {
		opacity: 1;
}
.mfp-fade.mfp-removing.mfp-bg {
		opacity: 0;
}
.mfp-fade .mfp-container {
		padding: 0 43px !important;
}
.modal {
		background: var(--white);
		border-radius: 10px;
		box-shadow: var(--shadow2);
		color: var(--dark);
		padding: 40px 30px;
		text-align: left;
		margin: 0 auto;
		width: 100%;
		flex: 0 0 auto;
		max-width: 1193px;
		position: relative;
}
.modal .mfp-close {
		top: 0 !important;
		right: -43px !important;
		width: 43px;
		height: 43px;
		text-align: left;
		text-indent: -100vw;
		overflow: hidden;
		opacity: 1;
}
.modal .mfp-close:before, .modal .mfp-close:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 25px;
		height: 2px;
		background: var(--white);
		border-radius: 1px;
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.modal .mfp-close:before {
		transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
.modal .mfp-close:after {
		transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
@media (pointer:fine) {
		.modal .mfp-close:hover:before, .modal .mfp-close:hover:after {
				background-color: var(--yellow);
		}
}
.modal-text {
		max-width: 1011px;
		min-height: 419px;
		display: flex;
		flex-direction: column;
		justify-content: center;
}
.modal-text .top-title {
		margin: 0;
}
.modal-order .top-title {
		text-align: left;
		color: var(--white);
		margin: -40px -30px 28px -30px;
		background: var(--dark) url("../img/bg-modal.png") no-repeat 50% 50%;
		background-size: cover;
		padding: 24px 30px 18px 45px;
		border-radius: 10px 10px 0 0;
}
.modal-order .top-title h2, .modal-order .top-title .h2 {
		margin: 0;
}
.order-form {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}
.order-form .name {
		flex: 0 0 auto;
		width: 100%;
		font-weight: bold;
		font-size: 24px;
		line-height: 1.2;
		margin: 0 0 20px 0;
}
.order-form .text {
		flex: 0 0 auto;
		width: calc(100% - 535px);
}
.order-form .inputs {
		flex: 0 0 auto;
		width: 489px;
}
.order-form .descr {
		font-weight: bold;
		line-height: 1.2;
		margin: 0 0 28px 0;
}
.order-form .chars {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 4px 0;
		font-size: 18px;
		line-height: 35px;
}
.order-form .chars li:before {
		content: '•';
		position: absolute;
		top: 0;
		left: 0;
		line-height: 35px;
		font-weight: 500;
		font-size: 24px;
		color: var(--yellow);
		width: 36px;
		text-align: center;
}
.order-form .chars li {
		margin: 0;
		padding: 0 0 0 36px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
		gap: 4px 8px;
		min-height: 35px;
		flex: 0 0 auto;
		width: 100%;
}
.order-form .chars li > * {
		flex: 0 0 auto;
		max-width: 100%;
}
.order-form .chars .select:after {
		right: 10px;
}
.order-form .chars li:not(.change) .select {
		display: none;
}
.order-form .chars li.change .char, .order-form .chars li.change .link {
		display: none;
}
.order-form .chars select, .order-form .chars .jcf-select-text {
		font-size: 18px;
		padding: 7px 30px 6px 10px;
		padding-left: 10px;
		color: var(--dark-grey2);
}
.order-form .chars .link > * {
		cursor: pointer;
		user-select: none;
		text-decoration: underline;
		color: var(--yellow);
}
@media (pointer:fine) {
		.order-form .chars .link > *:hover {
				text-decoration: none;
		}
}
.order-form .chars .checks {
		flex: 0 0 auto;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 18px;
		text-align: center;
		line-height: 30px;
		margin: 4px 0 0 0;
}
.order-form .chars .checks input {
		position: absolute;
		transform: scale(0);
		opacity: 0;
		visibility: hidden;
}
.order-form .chars .checks label {
		flex: 0 0 auto;
		width: calc((100% - 36px) / 3);
		max-width: 142px;
		cursor: pointer;
		user-select: none;
		position: relative;
		white-space: nowrap;
}
.order-form .chars .checks label span {
		display: block;
		position: relative;
		border-radius: 10px;
		border: 2px solid rgba(0, 0, 0, 0.05);
		transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.order-form .chars .checks label input:checked ~ span {
		border-color: var(--yellow);
}
.order-form .chars .checks label span:before {
		content: '';
		display: block;
		padding-top: 100%;
}
.order-form .chars .checks label span img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 8px;
		object-fit: contain;
		object-position: center;
}
.order-form textarea {
		height: 103px;
}
.order-form .form-inputs {
		gap: 19px 0;
}
.order-form .form-checks {
		gap: 8px 0;
		margin: 21px 0;
}
.order-form .form-submit {
		margin-top: 35px;
}
.order-form .total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 15px;
		margin: 25px 0 0 15px;
		font-weight: 600;
		font-size: 14px;
		line-height: 1.3;
}
.order-form .total .price {
		color: var(--yellow);
}
.order-form .total .price strong {
		display: block;
		color: var(--dark);
		font-weight: 600;
		font-size: 32px;
}
.order-form .total .price strong span {
		font-size: 16px;
}
.order-form .total .guarantee {
		display: flex;
		align-items: center;
		gap: 0 8px;
}
.order-form .total .guarantee img {
		width: 40px;
		height: 40px;
		object-fit: contain;
		object-position: center;
		flex: 0 0 auto;
}
.anchor {
		display: block;
		position: relative;
		top: -60px;
}