/* HTML */
/* -------------------------------------------------------------------- */

html { height: 100%; font-size: var(--root-font-size); }
body {  width: 100%; min-height: 100%; vertical-align: top; background: #727e8f; color: white; font-size: 1.8rem; font-family: var(--font); font-weight: 300; line-height: 1.3; }


 body.no-scroll { height: 100%;  overflow: hidden; }

:root {
	--header-open-bg : #515d6e;
	--header-color: white;
	--header-color-invert: black;
}

.page-container { overflow: hidden; }
.hidden { display: none !important; }
.clearfix { clear: both; }

/* Main elements */
/* ============================================================== */
img { display: inline-block; max-width: 100%; height: auto; }
p:not(:last-child) { margin-bottom: 1em; }
b { font-weight: bold; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline;  }
strong { font-weight: bold;}
i { width: auto; height: auto; }
em { font-weight: bold; font-style: normal; }
hr { display: block; margin: 4rem 0; background: 0; border-top: 2px solid #eee; }
canvas { pointer-events: none; }

/* ============================================================== */
h1, h2, h3, h4 { margin-bottom: 0.5em; line-height: 1.2; color: var(--heading-color); font-weight: normal; }

h1 { font-size: 4rem; margin-bottom: 0.6em; }
h2 { font-size: 2.4rem; margin-bottom: 1em;  border-left: 5px solid var(--color-green); text-transform: uppercase; }
h2.-center { text-align: center; }
h3 { font-size: 2rem; }
@media screen and (max-width: 960px) {
	h1 { font-size: 3.6rem; }
	h2 { font-size: 3rem; }
	h3 { font-size: 2.8rem; }
}

/* Lists */
/* ============================================================== */
ul, ol { list-style-type: none; }
ol > li::marker  {  display: inline; }
ol > li::before,
ul > li::before { display: inline-block; }
ol > li > p { display: inline; }
ul > li > p { display: inline; }


/* Всплывающие окна */
/* ============================================================== */
.mfp-content { --text-color: black; --heading-color: var(--color-red); color: black; padding: 4rem; overflow:hidden; background: white; display: inline-block; width: auto !important; max-width: 50rem; z-index: 52; width: 100% !important; border-radius: var(--border-radius); }
.mfp-content.-policy { max-width: 80%}
.mfp-bg { z-index: 150;}
.mfp-wrap { z-index: 151; }
.mfp-content form { width: 100%; margin:0 auto; max-width: 50rem; text-align: center; }
.mfp-content a { color: var(--color-blue); }
.mfp-content .form-buttons { display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
.mfp-content .form-input { margin-bottom: 1rem; }
.mfp-content input,
.mfp-content textarea { width: 100%; }
.mfp-content .form-description { font-size: 1.6rem; }
.mfp-content h2 { display: inline-block; font-size: 2.5rem; text-transform: uppercase; color: var(--color-blue); }
.mfp-close { border-radius: 50%; width: 3.5rem; height: 3.5rem; right: 1rem; top: 1rem; line-height: 0; }
.mfp-close:hover, .mfp-close:focus { color: white; }
.mfp-content { --input-height: 5rem; }
.mfp-content .form .form-group { display: block; }


/* Контейнеры для различных элементов и карточек */
/* ============================================================== */
.grid-container { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); gap: var(--container-gap); justify-content: center;  }

[data-container~="count-6"] { --item-width: 17rem; }
[data-container~="count-5"] { --item-width: 20rem; }
[data-container~="count-4"] { --item-width: 26rem; }
[data-container~="count-3"] { --item-width: 35rem; }
[data-container~="count-2"] { --item-width: 50rem; }

@media screen and (max-width: 960px) {
	.grid-container { display: flex; flex-wrap: wrap; flex-wrap: wrap; justify-content: left; }
	.grid-container > * { flex-basis: var(--item-width);  }
}

@media screen and (max-width: 640px) {
	.grid-container {  --item-width: 100% !important; }
}

/* ============================================================== */
.flex-container { display: flex; gap: var(--container-gap); flex-wrap: wrap; align-items: center; justify-content: center; }
.flex-container > * { flex-grow: 1; flex-basis: var(--item-width);  }

@media screen and (max-width: 960px) {
	.flex-container > * { max-width: none; }
	.grid-container > * { flex-grow: 1; }
}

.align-side { padding-left: var(--block-padding); padding-right: var(--block-padding); }

/* ============================================================== */
.items-counter { font-size: 3rem; color: rgba(from var(--text-color) r g b / 0.5); margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; }
.items-counter .selected { color: var(--text-color); }

/* ============================================================== */
.page-block { padding: 0; position: relative; color: var(--text-color); background: var(--background-color); --text-color: inherit; --background-color: transparent;}
.page-block .block-container { margin: 0 auto; position: relative;  }
.page-block > .bg { position: absolute; right: 100%; bottom: 100%; height: 30rem; width: 30rem; z-index: 1; }

.page-block[data-page-block~="narrow"] { padding-top: var(--span); padding-bottom: var(--span); }
.page-block[data-page-block~="narrower"] { padding-top: calc(var(--span) * 2); padding-bottom: calc(var(--span) * 2); }
.page-block[data-page-block~="no-padding"] { padding-top: 0; padding-bottom: 0; }
.page-block[data-page-block~="yellow"] { --background-color: var(--color-yellow); }
.page-block[data-page-block~="gray"] { --background-color: #f8f8f8;}
.page-block[data-page-block~="black"] { --background-color: #444; --text-color: white; --heading-color: white; --link-color: var(--color-yellow); }


/* ============================================================== */
.block-heading {  --font-size: 6rem; margin: 0 auto; font-size: var(--font-size); margin-bottom: var(--span-large); text-transform: uppercase; text-align: center; border: none; padding: 0; max-width: 80rem;}
.block-heading-text { margin: auto; margin-top: calc(var(--block-padding) * -0.8); margin-bottom: var(--span-x-large); max-width: calc(var(--page-width) * 0.6); text-align: center; }
.block-heading-container { position: relative; }
.block-heading-container h2 { margin: 0; display: inline-block; display: inline-block; }

@media screen and (max-width: 640px) {
	.block-heading { --font-size: 3rem; }
}

/* Оформление элементов в статьях */
/* ============================================================== */
.article li { margin-bottom: 0.2em; }
.article li::marker { color: var(--color-blue); }
.article ul { list-style-type: disc; }
.article ol { list-style-type: decimal; }
.article > ul,
.article > ol {  margin:2em 0;  margin-left: 2rem; }

.article > table { margin: 4rem 0; }
.article img { display: block; }
.article > h2:not(:first-child) { margin-top: 2em; }
.article a:not(.button) { color: var(--color-blue); }



/* ============================================================== */
#cookie-popup { display: none; position: fixed; bottom: 2rem; left: 50%; width: 100%; max-width: 75rem; box-shadow: 0 0 10px 0 #0002; border-radius: 0rem; padding: 3rem 4rem;	background: #fff8; backdrop-filter: blur(1rem); transform: translate(-50%, 0); z-index:10000; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: center; color: black; font-size: 1.5rem; }
#cookie-popup .text { flex-basis: 20rem; flex-grow: 1; }
#cookie-popup .link { color: var(--color-blue); text-decoration: underline; }
#cookie-popup.-active { display: flex; }


/* ============================================================== */
.background-container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
.background-container .bg-element { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.background-container .bg-element.-promo { opacity : 1; background: linear-gradient(rgb(114, 126, 143), rgb(81, 93, 110)); }
.background-container .bg-element.-solutions { background: radial-gradient( circle at center, #333, black); }
.background-container .bg-element.-products { background: linear-gradient(rgb(114, 126, 143), rgb(81, 93, 110)); }
.background-container .bg-element.-certificates { background: radial-gradient( circle at center, white, #eee); }
.background-container .bg-element.-contacts { background: linear-gradient( 120deg, hsl(from var(--color-yellow) h s calc(l * 2)), var(--color-yellow), hsl(from var(--color-yellow) h s calc(l * 1.5))); }


/* ============================================================== */
#header { position: fixed; top: 0; pointer-events: none; padding-top: 1rem; padding-bottom: 1rem; z-index: 10; display: flex; align-items: center; width: 100%; flex-wrap: wrap; --color-bg: transparent;
	background: var(--color-bg); transition: .3s;
}
#header .site-logo { width: 20rem; height: 6rem; position: relative; }
#header .site-logo > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#header .site-logo .basic { background: url(../img/logo-site.webp) center/contain no-repeat; }
#header .site-logo .black { background: url(../img/logo-site-black.webp) center/contain no-repeat; opacity: 0; }

#header .navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 3rem; font-weight: 500; pointer-events: all; text-transform: uppercase; font-size: 1.5rem; color: var(--header-color); transition: .5s;}
#header .navigation a { display: block; text-decoration: none; padding: 0.5rem 0; position: relative; }
#header .navigation a::before { content: ''; display: block; transition: .3s; position: absolute; left: 0; bottom: 0; height: 1px; background: var(--header-color); width: 0; }
#header .navigation a:hover::before { width: 100%; }
#header .span { flex-grow: 1; }

#header .mobile-menu-button { display: none; pointer-events: all;  align-items: center; justify-content: center; padding: 1.2rem; border: 1px solid var(--header-color); }
#header .mobile-menu-button i { background: var(--header-color); }
#header .mobile-menu-button:hover { background: var(--header-color); }
#header .mobile-menu-button:hover i { background: var(--header-color-invert); }

#header.-open { --color-bg: var(--header-open-bg); border-bottom: 1px solid rgba(from (var--header-color) r g b / 0.3); box-shadow: 0 0 1rem 0 #0002; }
#header.-open .navigation { max-height: 20vh; }

@media screen and (max-width: 640px) {
	#header .navigation { overflow: hidden; display: block; margin-left: calc(var(--block-padding) * -1); margin-right: calc(var(--block-padding) * -1);
		padding: 0 var(--block-padding); flex-basis: 100%; max-height: 0; overflow: hidden;
	}

	#header.-open .navigation { padding-top: 2rem; padding-bottom: 2rem; }
	#header .navigation li { display: block; margin-bottom: 1rem;}
	#header .mobile-menu-button { display: flex; }
}

/* ============================================================== */
#promo { height: 300vh;}
#promo .block-container { height: 100vh; position: relative; }
#promo .main-animation { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#promo .background-text { position: absolute; font-size: 60rem; opacity: 0; text-transform: uppercase; font-weight: 500; line-height: 1; z-index: -1}

/* -------------------------------------------------------------- */
.promo-text { font-size: 2rem; position: absolute; width: 30wv; }
.promo-text .point { position: absolute; left: -2rem; top: 1.2rem; border-radius: 50%; background: white; width: 1rem; height: 1rem; opacity: 0;}
.promo-text .title { background: white; padding: 1rem; color: black; text-transform: uppercase; display: inline-block; font-size: 3rem; line-height: 1.1; margin-bottom: 1rem; }

@media screen and (max-width: 640px) {
	.promo-text { font-size: 1.8rem; }
	.promo-text .title { font-size: 2rem; }
}

/* ============================================================== */
#solutions { height: 500vh;}
#solutions .block-container { height: 100vh; position: relative; padding-top: 10rem; }
#solutions .solutions-container { height: 50vh; position: relative; margin-top: 4rem; --mask: linear-gradient(to left, transparent, white 10rem, white calc(100% - 10rem), transparent); mask: var(--mask); -webkit-mask: var(--mask); }

/* -------------------------------------------------------------- */
.solution-card { display: flex; align-items: center; gap: 2rem; position: absolute; flex-direction: column; text-align: center; height: 50vh; width: 35rem; }
.solution-card .image { aspect-ratio: 1 / 1;  width: 100%; }
.solution-card .image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit:contain; object-fit: center;}
.solution-card .image canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit:contain; object-fit: center;}
.solution-card .title { font-weight: 500; font-size: 2.2rem; line-height: 1.2; text-transform: uppercase; position: relative; }
.solution-card .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(circle closest-side at center, #fff5, transparent) }

/* -------------------------------------------------------------- */
.solution-comments-container { position: absolute; left: var(--block-padding); bottom: 5rem; right: var(--block-padding); z-index: 10; border-left: 2px solid #fff; padding-left: 3vw; }
.solution-comment { font-size: 1.5rem; position: absolute; left: 0; bottom: 0; width: 100%; border-left: 1px dashed white; padding-left: 2rem; opacity: 0; }
.solution-comment .small-text { font-size: 1.4rem; display: none; }
.solution-comment h2 { font-size: 2.2rem; font-weight: 500; margin-bottom: 0.5em; line-height: 1.2; color: black; background: white; padding: 0.5rem; display: inline-block; }

@media screen and (max-width: 640px) {
	.solution-card .title { display: none; }
	.solution-comment .text { display: none;  }
	.solution-comment .small-text { display: block; }
}

/* ============================================================== */
#certificates { min-height: 300vh; --heading-color: black; --text-color: black; }
#certificates .block-container { height: 100vh; position: relative; padding-top: 10rem;}

.slider-navigation { display: flex; align-items: center; }
.slider-navigation .items-counter { flex-grow: 1; }
.slider-navigation .swiper-button-next,
.slider-navigation .swiper-button-prev {  position: relative; left: auto !important; top: auto !important; right: auto !important; background: black; width: 4rem; height: 4rem; }
.slider-navigation .swiper-buttons { display: flex; align-items: center; gap: 2rem; }
.slider-navigation .swiper-button-prev::after,
.slider-navigation .swiper-button-next::after { font-size: 2rem; color: white; }

/* -------------------------------------------------------------- */
.certificates-container {  width: 100%; }
.certificates-container { overflow: visible !important; }
.certificates-part { position: relative; margin-top: 4rem; 	padding-top: 3rem; padding-bottom: 3rem; --mask: linear-gradient(to left, transparent, white 10rem, white calc(100% - 10rem), transparent); mask: var(--mask); -webkit-mask: var(--mask);}
.certificates-part .slider-container { width: 100%; }

/* -------------------------------------------------------------- */
.certificate-card { display: flex; background: white; height: 50vh; width: 100%; z-index: 1; position: relative; transform: perspective(75em);  }
.certificate-card .image { flex-basis: 40rem; aspect-ratio: 5 / 3; width: 100%; position: relative; overflow: hidden; flex-shrink: 0; z-index: 2; }
.certificate-card .image::after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 20%; background: linear-gradient(to top, white, transparent); }
.certificate-card .image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit:cover;}
.certificate-card .content { padding: 4rem; display: flex; gap: 1rem; flex-direction: column; align-items: start; justify-content: center; z-index: 2; position: relative; background: linear-gradient(#d8d8d8,#f0f0f0 10rem); }
.certificate-card .title { font-weight: 500; font-size: 2.2rem; }
.certificate-card .description { font-size: 1.5rem; }
.certificate-card .shadow { display: block; position: absolute; left: 1rem; top: 1rem; width: 100%; height: 100%; z-index: 1; background: #0003; filter: blur(3px); }
.certificate-card .glow { display: block; position: absolute; left:0 ; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(45deg, transparent, #fff4 50%, #ffffff99 60%, transparent 70%); }

@media screen and (max-width: 640px) {
	.certificates-part { --mask: white; }
	.certificate-card { flex-direction: column; }
	.certificate-card .image { flex-basis: auto; aspect-ratio: 9 / 16;  width: 100%; height: 100%; object-fit: cover;}
	.certificate-card .title { font-size: 2rem; }
	.certificate-card .content { padding: 2rem; flex-grow: 1; position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, #d8d8d8, #f0f0f0 10rem);
		display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	}
	.certificate-card .description { display: none; }
}

/* ============================================================== */
#products { min-height: 300vh; }
#products .block-container { height: 100vh; position: relative; padding-top: 10rem;}
#products .products-container { position: relative; margin-top: 4rem; height: 30vh; z-index: 5;  }
#products .bg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden;
	--mask: linear-gradient(transparent, white 5rem); mask: var(--mask); -webkit-mask: var(--mask);
}
#products .bg-line { --border: 1px solid #fff6; position: absolute; top: -100vw; left: 0; width: 0; height: 100%; z-index: 0; border-left: var(--border); }
#products .bottom-text-container { position: absolute; bottom: 0; width: 100%; font-size: 1.6rem; border-top: 1px solid #fff3; background: rgb(70, 83, 100);
	padding: 3rem var(--block-padding);
}


/* -------------------------------------------------------------- */
.product-card { display: flex; align-items: center; gap: 2rem; position: absolute; flex-direction: column; text-align: center;  }
.product-card .image { width: 100%; position: relative; background:
	linear-gradient( rgb(81, 93, 110), rgb(114, 126, 143)); }
.product-card .image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit:contain; object-fit: center;}
.product-card .image canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit:contain; object-fit: center; clip-path: xywh(0 0 100% 0); }
.product-card .title { font-weight: 500; font-size: 2.2rem; line-height: 1.2; display: inline-block; background: white; color: black; padding: 0.5rem 1rem; }
.product-card .description { margin-top: 1rem; }
.product-card .button { margin-top: 1rem; }
.product-card .full-text  { font-size: 1.5rem; margin-top: 2rem; }


@media screen and (max-width: 640px) {
	#products .bottom-text-container { display: none; }
	.product-card .image::before { content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(circle closest-side at center, #fff5, transparent) }
}



/* ============================================================== */
#contacts { color: black; min-height: 300vh; --button-color: white; --button-text-color: black; --heading-color: black; --text-color: black; position: relative; overflow: hidden; }
#contacts .block-container { padding-top: 10rem; height: 100vh}
#contacts .contacts-part { position: relative; }
#contacts .stores-part { position: relative; margin-top: 4rem; }
#contacts .stores-container { position: relative;  height: 40vh; }
#contacts .phone { font-size: 3rem; }
#contacts .email { font-size: 1.9rem; }

/* -------------------------------------------------------------- */
#contacts .bottom-part { position: relative; color: white; font-size: 1.6rem; left: 0; right: 0; top: 100%; }
#contacts .bottom-part .content { position: relative; z-index: 10; display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; padding-top: 2rem; }
#contacts .bottom-part .copyrights { flex-grow: 1; }
#contacts .bottom-part .business-address { text-align: right; }
#contacts .bottom-part .business-address .title { font-weight: 500; }
#contacts .bottom-part .bg { position: absolute; left: -20vh; right: -20vh; top: 100%; background: black; height: 20vh; }

/* -------------------------------------------------------------- */
#contacts .buttons-container { display: flex; gap: 2rem; align-items: center; justify-content: left; flex-wrap: wrap; }
#contacts .buttons-container .button { margin-bottom: 2rem; }

/* -------------------------------------------------------------- */
.store-card { background: white; color: black; display: flex; width: 100%; height: 38vh; }

.store-card .content { padding: 6rem; display: flex; align-items: start; flex-direction: column; justify-content: center; gap: 0; flex-basis: 30rem; flex-grow: 1; }
.store-card .way-button { margin-top: 1rem; }
.store-card .city { font-size: 3rem; font-weight: 500; }
.store-card .map { flex-basis: 50rem; background: #555; position: relative; overflow: hidden; flex-grow: 3;}
.store-card .map img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.store-card .map .button { position: absolute; right: 2rem; bottom: 2rem; font-size: 1.5rem; }

@media screen and (max-width: 640px) {
	#contacts .bottom-part .content { gap: 1rem; margin-top: 0.5rem; font-size: 1.4rem; }
	#contacts .bottom-part .business-address { text-align: left; }

	.store-card > * { flex-basis: auto; }
	.store-card .city { font-size: 2rem; }
	.store-card { flex-direction: column;  height: 32vh; }
	.store-card .map { flex-basis: 10rem; flex-grow: 1; }
	.store-card .map img { object-fit: cover; width: 400%; height: 400%; object-position: center;}
	.store-card .content { padding: 2rem; text-align: center; align-items: center; }

	#contacts .buttons-container .button { flex-basis: 100%; margin: 0; font-size: 1.5rem; }
	#contacts .buttons-container { justify-content: center; gap: 0.5rem; margin-top: -4rem; padding-bottom: 1rem; }
}



/* Add mask to inner containers */
/* -------------------------------------------------------------- */
/*
#promo .block-container,
#solutions .block-container,
#products .block-container,
#certificates .block-container,
#contacts .block-container {
	--mask: linear-gradient(transparent, transparent 10%, white 20%); mask: var(--mask); -webkit-mask: var(--mask);
}

*/