/*
Theme Name: АО «Спецпожинжиниринг»
Author: Kirill Tatur
Description: Компания АО «Спецпожинжиниринг» специализируется на разработке, производстве и внедрении комплексных автоматических систем пожарной сигнализации, контроля загазованности и пожаротушения (АСПС, КЗ и ПТ) для сложных технологический объектов нефтяной, газовой, нефтеперерабатывающей, химической и нефтехимической промышленностей.
Version: v20260825
Text Domain: https://spetspozh.ru
*/

/* Базовые стили */
:root {
   --color-main: #ed1c24;
   --color-main-light: #fff6f7;
   --color-gray: #CCC;
   --color-gray-light: #EDEDED;
   --color-white: #FFF;
   --color-black: #000;
   --color-spark: #FF6200;
   --fontsize-h1: 38px;
   --fontsize-h2: 28px;
   --fontsize-h3: 21px;
   --fontsize-l: 18px;
   --fontsize-m: 16px;
   --fontsize-s: 14px;
   --fontsize-ss: 12px;
   --padding-l: 50px;
   --padding-m: 30px;
   --padding-s: 20px;
   --padding-button-l: 18px 24px;
   --padding-button-m: 12px 16px;
   --padding-button-s: 8px 12px;
   --br-l: 9px;
   --br-m: 5px;
   --opacity: 0.7;
   --opacity-m: 0.4;
   --opacity-l: 0.2;
}
body,div,p,blockquote,q,pre,ol,ul,li,form,label,th,td,main,article,footer,header,section,aside,
fieldset,input,textarea,button,select,nav,span,figure,cite,h1,h2,h3,h4,a,table,tr,td {
   margin: 0;
   padding: 0;
   border: 0;
   display: block;
   position: relative;
   box-sizing: border-box;
}
*:after,
*:before {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
html {
   font-family: "Roboto", sans-serif;
   font-size: var(--fontsize-m);
   font-weight: 400;
}
body {
   min-height: 100%;
   min-width: 360px;
   width: 100%;
   color: var(--color-black);
   line-height: 1.5;
   letter-spacing: -0.25px;
}
b,
strong {
   font-weight: 700;
}
blockquote, 
q {
	padding: var(--padding-m);
	margin: 24px 0;
	background: var(--color-main-light);
	font-style: italic;
	border-left: 3px solid var(--color-main);
   border-radius: var(--br-l);
	quotes: none;	
}
iframe {
   width: 100%;
   margin: 20px 0;
}
img {
   border: 0;
   height: auto;
   max-height: 100%;
   max-width: 100%;
   width: auto;
}
input,
textarea,
button,
select {
   width: 100%;  
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-size: 100%;
   border-radius: var(--br-m);
}
input,
textarea,
select {  
   padding: var(--padding-button-l);  
   border: 2px solid var(--color-gray-light);
   outline: none;
   text-overflow: ellipsis; 
}
input:focus,
textarea:focus,
select:focus {
   border-color: var(--color-black);
}
input[type="submit"] {
   border: none;
}
input[type="submit"]:hover {
   cursor: pointer;
}
input::placeholder,
textarea::placeholder {
   color: var(--color-black);
   opacity: var(--opacity-m);   
}
select {
   appearance: none;
   background: none;
}
input[data-input="js-search"] {
   margin-bottom: 30px;
}
input[disabled] {
   background: var(--color-white);
   color: var(--color-black);
}
input[hidden] {
   display: none;
}
button {   
   transition-duration: 0.8s;
}
button:hover {
   cursor: pointer;
   background: #d9131a;
}
.button {
   width: max-content;
   display: flex;
   align-items: center;
   background: var(--color-main);
   color: var(--color-white);
   font-family: "Montserrat", sans-serif;
   font-size: var(--fontsize-l);
   line-height: 1;
   border-radius: var(--br-m);
   text-transform: uppercase;
   text-decoration: none;
   transition-duration: 0.8s;
}
.button:hover {
   color: var(--color-white);
}
.button svg {
   width: 24px;
   height: 24px;
}
.button-arrow,
.button-download {
	display: flex;
	align-items: center;
   justify-content: center;
	gap: 10px;
}
.button-arrow::after {
	width: 20px;
	height: 20px;
	content: '';
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M98.8,49.2l-31.3-31.3h0c-.7-.8-1.7-1.2-2.8-1.2s-2.1.4-2.9,1.2h0c-.8.7-1.2,1.7-1.2,2.8s.4,2,1.2,2.8l24.5,24.5H4c-2.2,0-4,1.8-4,4s1.8,4,4,4h82.3l-24.5,24.4h0c-1.4,1.7-1.4,4.3,0,5.7.8.8,1.8,1.2,2.9,1.2s2.1-.4,2.8-1.2l31.3-31.3c.8-.7,1.2-1.7,1.2-2.8s-.4-2.1-1.2-2.8Z"/></svg>');
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M98.8,49.2l-31.3-31.3h0c-.7-.8-1.7-1.2-2.8-1.2s-2.1.4-2.9,1.2h0c-.8.7-1.2,1.7-1.2,2.8s.4,2,1.2,2.8l24.5,24.5H4c-2.2,0-4,1.8-4,4s1.8,4,4,4h82.3l-24.5,24.4h0c-1.4,1.7-1.4,4.3,0,5.7.8.8,1.8,1.2,2.9,1.2s2.1-.4,2.8-1.2l31.3-31.3c.8-.7,1.2-1.7,1.2-2.8s-.4-2.1-1.2-2.8Z"/></svg>');
	position: relative;
	right: 0;
	background-color: var(--color-white);
	transition-duration: 0.8s;
}
.button-arrow:hover::after {
	transform: translate(5px);
}
.button-archive,
.button-archive:hover {
   background: var(--color-gray);
   color: var(--color-white);
   cursor: default;
}
.button-download::after {
	width: 14px;
	height: 19px;
	content: '';
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 19"><path d="M.9,10.5c-.2-.2-.3-.4-.3-.7s.1-.5.4-.7c.4-.3,1-.3,1.5,0l3.5,2.9V1.3c0-.5.5-1,1.1-1s1.1.4,1.1,1v10.7l3.5-2.9c.4-.4,1.1-.3,1.5,0,.2.2.3.4.3.7s-.1.5-.4.7l-5.3,4.4c-.2.2-.4.3-.7.3s-.6,0-.8-.3L.9,10.5ZM13,16.7H1c-.6,0-1,.4-1,1s.4,1,1,1h12c.6,0,1-.4,1-1s-.4-1-1-1Z"/></svg>');
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 19"><path d="M.9,10.5c-.2-.2-.3-.4-.3-.7s.1-.5.4-.7c.4-.3,1-.3,1.5,0l3.5,2.9V1.3c0-.5.5-1,1.1-1s1.1.4,1.1,1v10.7l3.5-2.9c.4-.4,1.1-.3,1.5,0,.2.2.3.4.3.7s-.1.5-.4.7l-5.3,4.4c-.2.2-.4.3-.7.3s-.6,0-.8-.3L.9,10.5ZM13,16.7H1c-.6,0-1,.4-1,1s.4,1,1,1h12c.6,0,1-.4,1-1s-.4-1-1-1Z"/></svg>');
	position: relative;
	right: 0;	
   background-color: var(--color-white);
	transition-duration: 0.8s;
}
.button-background-gray {
   background: var(--color-gray);
   color: var(--color-white);
}
.button-background-gray:hover {
   background: var(--color-main);   
   color: var(--color-white);
}
.button-background-white {
   background: var(--color-white);
   color: var(--color-black);
}
.button-background-white:hover {  
   color: var(--color-black);
}
.button-background-white.button-arrow::after {
   width: 16px;
	height: 16px;
   background-color: var(--color-black);
}
.button-outline {  
   background: var(--color-white);
   color: var(--color-main);
   border: 2px solid var(--color-main);
}
.button-outline:hover {     
   color: var(--color-main);   
}
.button-outline.button-download::after {
   background-color: var(--color-main);
}
.button-transparent {  
   background: transparent;
   color: var(--color-white);
   border: 2px solid var(--color-white);
}
.button-transparent:hover {     
   color: var(--color-white); 
}
.button-size-l {
   padding: var(--padding-button-l);
   font-size: var(--fontsize-l);
}
.button-size-m {
   padding: var(--padding-button-m);
   font-size: var(--fontsize-m);
}
pre {
   width: 100%;
   font-size: 12px;
}
table {
   width: 100%;
   display: inline-block;
   border-collapse: collapse;
   border-spacing: 0;   
}
tr {
   display: inline-block;
   border-bottom: 1px solid var(--color-gray);
}
tr:last-child {
   border-bottom: none;
}
td {   
   display: table-cell;
   vertical-align: middle;
   font-size: 100%;
}
ul {
   list-style: none;
}
ol {
   list-style-type: none;
   counter-reset: item;
}
ol li::before {
   content: counter(item) "";
   counter-increment: item;
}
h1,
h2,
h3,
.title-h1,
.title-h2,
.title-h3 {  
   font-family: "Montserrat", sans-serif;
   line-height: 1.2;
   word-break: keep-all;
}
h1 {
   font-size: var(--fontsize-h1);
   letter-spacing: -0.5px;
}
h2 {
   font-size: var(--fontsize-h2);
}
h3 {
   font-size: var(--fontsize-h3);
}
p {
   margin-bottom: 20px;
}
p:last-child {
   margin-bottom: 0;
}
a {  
   color: var(--color-main);
   transition-duration: 0.8s;
}
a:hover {
   color: var(--color-black);
}
a.link-black {
   color: var(--color-black);
   text-decoration: none;
}
a.link-black:hover {
   color: var(--color-main);
}
a[href^="#"] {
   color: var(--color-black);
}
a[href^="#"]:hover {
   color: var(--color-black);
}

/* Структура */
main {
   width: 100%;  
   display: flex;
	flex-direction: column;
	gap: 30px;
}
section {
   width: 100%;  
}
section:last-child {
   margin-bottom: 0;
}
.container {
   width: 100%;
   max-width: 1700px;
   margin: 0 auto;
   z-index: 1;
}
.main-padding {
   padding-left: 5%;
   padding-right: 5%;
}
.main-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.section-background {
   padding: var(--padding-l);
   background-color: var(--color-gray-light);
   border-radius: var(--br-l);
}
.section-background-s {
   padding: var(--padding-m);
   background-color: var(--color-gray-light);
   border-radius: var(--br-l);
}
.section-container {
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.section-description {
   font-size: var(--fontsize-l);
   opacity: var(--opacity);
}
.section-description-s {
   opacity: var(--opacity);
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.section-header button {
   flex-shrink: 0;
}
.section-header-container {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.title-h1 {
   font-size: var(--fontsize-h1);
   text-transform: uppercase;
}
.title-h2 {
   font-size: var(--fontsize-h2);
   text-transform: uppercase;
}
.title-h3 {
   font-size: var(--fontsize-h3);
}


/* Для повторяющихся элементов на разных страницах */
/* -- Взаимодействия */
.interaction {
   display: flex;   
   align-items: center;
   gap: 10px;  
   font-size: var(--fontsize-s);   
   text-align: left;  
}
.interaction-item {   
   display: flex;  
   align-items: center;
   padding: var(--padding-button-m);
   background-color: var(--color-gray-light);
   border-radius: var(--br-m);
   font-size: var(--fontsize-s);
}
.interaction-item:last-child {
   margin-right: 0;
}
.icon-element-printer {
   transition-duration: 0.8s;
}
.icon-element-printer:hover {
   color: var(--color-main);
   cursor: pointer;
}
/* -- Источник записи */
.interaction-source a {
   color: var(--color-black);  
   text-decoration: none; 
}
.interaction-source a:hover {
   color: var(--color-main);
}

/* Хедер и Футер */
header {
   width: 100%;
   padding-top: 10px;
   z-index: 9;
}
footer {
   width: 100%;  
   z-index: 2;
}
.footer-container {	
	display: flex;
	flex-direction: column;
	gap: 30px;
   padding: var(--padding-l);
}
/* -- Основное расположение */
.header-top,
.footer-top {   
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
}
.header-top {
   margin-bottom: 30px;
}
.header-top .header-buttons {
   display: none;
}
.header-buttons {
   top: -10px;
   display: flex;
   gap: 10px;
}
/* -- Логотип */
.logo-spetzpozh-s {
   display: none;
}
.header-logo {
   margin-right: 30px;
   margin-bottom: -9px;
}
.header-logo img,
.footer-logo img {
   max-width: 400px;
   height: 80px;
}
.header-logo a,
.footer-logo a {
   color: var(--color-main);
   text-decoration: none;
}
/* -- Контакты */
.header-contact {
   margin-left: 20px;
   flex-shrink: 0;
   font-family: "Montserrat", sans-serif;
   font-size: var(--fontsize-l);
   letter-spacing: -0.25px;
   line-height: 1.2;
   text-align: right;
}
.header-title {
   font-family: "Montserrat", sans-serif;
   font-size: var(--fontsize-h2);
   line-height: 1.2;
   letter-spacing: -0.5px;
   text-transform: uppercase;
   text-align: center;
}
/* -- Дополнительная информация в подвале */
.footer-buttons {
   display: flex;
   gap: 10px;
}
.footer-information-agreement {
   font-size: 12px;
}
.footer-information-agreement a {
   color: var(--color-black);
   opacity: var(--opacity-m);
}
.footer-information-agreement a:hover {
   opacity: 1;
}
.footer-information-cookie {
   max-width: 1200px;
   font-size: var(--fontsize-s);
   margin-bottom: 24px;
   opacity: var(--opacity-m);
}
.footer-information-copyright {
   margin-bottom: 24px;
   font-weight: bold;
}
.footer-developer {
   margin-top: 30px;
}
.footer-developer img {
   max-width: none;
   width: 100px;
}


/* Главная страница */
.section-information {
   display: flex;
   gap: 20px;
}
.section-information-img {
   display: none;
}
.section-information-numbers {
   display: flex;
   flex-basis: 50%;
   flex-direction: column;   
   gap: 20px;
}
.section-information-numbers-item {
   display: flex;
	flex-direction: column;
   flex-grow: 1;
	gap: 10px;
	padding: var(--padding-m);
	background-color: var(--color-gray-light);
	border-radius: var(--br-l);	
}
.section-information-numbers-wrapper {
   display: flex;
   gap: 20px;
}
.section-information-spi {
   display: flex;
   align-items: flex-start;
   flex-basis: 50%;
	flex-direction: column;
	gap: 20px;	
	padding: var(--padding-l);
	border: 3px solid var(--color-gray-light);
	border-radius: var(--br-l);	
}
.section-information-spi .section-description {
   flex-grow: 1;
}
.section-information-spi .section-title {
   margin-bottom: 0;
}
.section-information-spi-button {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
/* Интегратор */
.section-integrator,
.section-integrator-projection,
.section-integrator-projection-systems-item {
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.section-integrator-projection { 
   padding: var(--padding-m);
   background-color: var(--color-white);
   border-radius: var(--br-l);
}
.section-integrator-projection-systems {
   display: flex;   
   gap: 20px;
}
.section-integrator-projection-systems-item-content {
   display: flex;
   flex-direction: column;
   gap: 10px;
}


/* Вкладки */
.tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.tab {
   font-size: var(--fontsize-m);
}
.product-tabs-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.product-tabs-gallery-item {
	display: flex;	
	flex: 0 0 calc((100% - 80px) / 5);	
	border-radius: var(--br-l);
}


/* Сегменты */
.segments-items {
	display: flex;	
	gap: 20px;
}
.segments-item {
	display: flex;	
	flex: 0 0 calc((100% - 80px) / 5);
   flex-direction: column;
   gap: 10px;
   align-items: center;
   justify-content: center;
   padding: var(--padding-m);
   background-color: var(--color-white);	
	border-radius: var(--br-l);
   text-align: center;   
}
.segments-item-icon {
	width: 100px;
	height: 74px;
	display: flex;
	align-items: flex-end;
}
.segments-item-title {
   flex-grow: 1;
   font-family: "Montserrat", sans-serif;   
   font-size: var(--fontsize-l);  
   line-height: 1.2;
   word-wrap: anywhere;
}


/* Преимущества о нас */
.about-items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
   margin: 40px 0;
}
.about-item {
	display: flex;	
	flex: 1 0 calc((100% - 40px) / 3);
   flex-direction: column;
   gap: 10px;
   align-items: center;
   justify-content: center;
   padding: var(--padding-m);
   background-color: rgba(0, 0, 0, 0.03);	
	border-radius: var(--br-l);
   text-align: center;   
}
.about-item .about-item-icon {
   width: 100px;
   height: 100px;
}
.about-item-description {   
   font-size: var(--fontsize-s);
   line-height: 1.2;
   opacity: var(--opacity-m);
}
.about-item-title {  
   font-size: var(--fontsize-l); 
   font-family: "Montserrat", sans-serif;     
   line-height: 1.2;  
   flex-grow: 1;
}


/* Записи, Страницы */
article {
	width: 100%;  
   padding: var(--padding-l);
	background-color: var(--color-gray-light);
	border-radius: var(--br-l);
	z-index: 2;	
}
article a {
   display: inline;
}
article figure {
   margin: 30px 0;
   width: 100% !important;
}
article figcaption {
   font-size: 12px;
   opacity: 0.5;
   text-align: center;
}
article blockquote p:last-child {
   margin-bottom: 0;
}
article p,
article ul,
article ol {
   font-size: var(--fontsize-l);
}
article ul,
article ol {
   margin: 15px 0 15px 30px;
   text-align: left;
}
article ul li,
article ol li {
   padding-left: 30px;
   margin-bottom: 10px;
}
article ul li::before {
   font-family: "fontello";
   font-size: 12px;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   display: inline-block;
   width: 1em;
   text-align: center;
   text-transform: none;
   line-height: 1em;
   position: relative;
   content: "\e80d";
   color: var(--color-black);
   transform: rotate(-90deg);
   margin-right: 18px;
   margin-left: -30px;
}
article ol li::before {
   color: var(--color-black);
   font-weight: bold;
   text-indent: -30px;
   display: inline-block;
}
article .reviews-container {
   margin-top: 30px;
}
article #map {
   margin: 40px 0;
}
.articles {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.article-container {  
	display: flex;
	flex-direction: column;
	gap: 30px;
   padding: var(--padding-l);
	background-color: var(--color-white);
	border-radius: var(--br-l);
}
.article-content button[data-modal] {   
   margin-top: 30px;
}
.article-content h2 {
   margin-top: 3rem;
   margin-bottom: 1.5rem;
}
.article-content h3 {
	margin-top: 2rem;	
	margin-bottom: 1rem;
}
.article-main-image {
   max-height: 400px;
   display: flex;   
}
.article-main-image img {
   width: 100%;
   border-radius: var(--br-l);
   object-fit: cover;
}
.articles-footer {
   display: flex;
   align-items: center;   
   gap: 10px;
}
.articles-footer .articles-item-date {	
	padding: var(--padding-button-m);
	background: var(--color-gray-light);
	border-radius: var(--br-m);	
   opacity: 1;
}
.article-background {  
   margin-bottom: -30px;
   background-size: cover; 
   background-position: center; 
   border-radius: var(--br-l);
   overflow: hidden;
}
.article-background-overlay {  
   width: 100%;
   min-height: 300px;   
   padding: var(--padding-l);
   color: white;  
   background: linear-gradient(to left, transparent -50%, rgba(0, 0, 0, 0.8));  
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 2;
}
.article-background-description {
   font-size: var(--fontsize-l);
   opacity: var(--opacity);
}
.article-background-title,
.article-background-description {
   max-width: 700px;
}
.articles-items {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;   
}
.articles-item {  
   display: flex; 
   flex-direction: column;
   flex: 0 0 calc((100% - 40px) / 3);   
   justify-content: space-between;  
   background-color: var(--color-white);
   color: var(--color-black);  
   border: 3px solid var(--color-gray-light); 
   border-radius: var(--br-l);   
}
.articles-item-container {
   display: flex;
   flex-direction: column;   
   gap: 20px;
   flex-grow: 1;
   padding: var(--padding-m);
}
.articles-item-date {
   opacity: var(--opacity-m);
   font-size: var(--fontsize-s);
}
.articles-item-image {
   display: flex;
   margin: -3px;
}
.articles-item-image a {   
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
   aspect-ratio: 16/9;
}
.articles-item-image img {
   width: 100%;
   height: 100%;
	border-radius: var(--br-l);
	object-fit: cover;	
}
.articles-item-title {
   flex-grow: 1;
   font-size: var(--fontsize-l);
   font-family: "Montserrat", sans-serif;
   line-height: 1.2;
}
.section-articles .articles-item {
   border: none;
}
.section-articles .articles-item-image {  
   margin: 0;
}
.articles-tabs {
   display: flex;
   gap: 10px;
}
.articles-tabs-item {
	padding: var(--padding-button-s);
	background-color: var(--color-gray-light);
   color: var(--color-black);
	font-family: "Montserrat", sans-serif;
	font-size: var(--fontsize-s);
   text-decoration: none;
	text-transform: uppercase;
	border-radius: var(--br-m);
}
.articles-tabs-item.active {
   background-color: var(--color-main);
   color: var(--color-white);
}
.article-gallery {
   display: flex;
	flex-direction: column;
	gap: 20px;   
}
.article-gallery-main .slick-track {
	display: flex;
	margin-left: 0;
}
.article-gallery-main .slick-slide {
   height: auto;
	margin: 0 10px;
}
.article-gallery-main .slick-slide img {
	max-height: 300px;
}
.article-gallery-main.slick-initialized .slick-slide {
	height: auto;
	display: flex;
}
.article-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.article-arrows-container {
	display: flex;
	gap: 10px;
}
article ul.slick-dots {
   margin: 0;
}
article ul.slick-dots li {
   margin: 0;
   padding: 0;
}
article ul.slick-dots li::before {
   display: none;
}
.section-articles .articles-item:nth-child(4) {
   display: none;
}



/* Оборудование */
.product,
.product-container {
   display: flex;
   flex-direction: column;
   gap: 30px;      
}
.product-header {
   display: flex;
   gap: 20px;
}
.product-left {
   width: 40%;
}
.product-right {
   width: 55%;
   display: flex;
   flex-direction: column;
   gap: 30px;
   margin-left: 5%;
}
.product-note {
   font-size: var(--fontsize-s);
   opacity: var(--opacity-m);
}
article .product-note ol li,
article .product-note ul li {
   font-size: var(--fontsize-s);
}
/* Документы */
.product-documentation {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.product-documentation-item {
   display: flex;
   flex-direction: column;
   gap: 5px;
}
.product-documentation-item-name {
   font-size: var(--fontsize-l);
}
.product-documentation-item-name a {
   text-decoration: underline;
}
.product-documentation-item-size {
   text-transform: uppercase;
   opacity: var(--opacity-m);
}
/* Вкладки */
.product-tabs {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.product-tabs-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;   
}
.product-tabs-button {
   cursor: pointer;  
   transition: all 0.3s ease;  
}
.product-tabs-button.active {
   background: var(--color-main);
   color: var(--color-white);   
}
.product-tabs-radio {
   display: none;
}
.product-tabs-content {
   display: none;
   padding: var(--padding-l);
   background: var(--color-white);   
   border-radius: var(--br-l);
   animation: fadeIn 0.3s ease;
}
.product-tabs-content ul,
.product-tabs-content ol {
   margin: 0;
}
.product-tabs-content tr td:first-child {
   max-width: 500px;
}
.product-tabs-content-container p img {   
   border-radius: var(--br-l);
}
.product-tabs-content-container-description {
   margin-bottom: 30px;
}
/* Показываем контент активной вкладки */
.product-tabs-radio:checked + .product-tabs-content {
   display: flex;
   flex-direction: column;
   gap: 30px;
}
/* Анимация */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* -- Слайдер */
.product-gallery-hidden {
   opacity: 0;
   visibility: hidden;
}
.product-gallery-main a {
   color: var(--color-white);
}
.product-gallery-main-image::before {
   content: "";
   display: block;
   padding-top: 70%;
}
.product-gallery-main-image a {
   align-items: center;
   display: flex;
   justify-content: center;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}
.product-gallery-main-image img {
   max-height: 100%;
}
.product-gallery-main-image.slick-slide img {
   flex-grow: 0;
}
.product-gallery-nav {
   align-items: center;
   color: var(--color-white);
   display: flex !important;
   justify-content: space-between;
   margin-top: 14px;
}
.product-gallery-nav .slick-arrow::before {
   content: "\e802";
   display: inline-block;
   font-family: "fontello";
   font-size: 30px;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   line-height: 1em;
   position: relative;
   opacity: 0.5;
   color: var(--color-black);
}
.product-gallery-nav .slick-arrow:hover {
   cursor: pointer;
   opacity: 1;
}
.product-gallery-nav .slick-arrow.slick-prev {
   transform: rotate(180deg);
}
.product-gallery-nav .slick-list {
   width: 80%;
}
.product-gallery-nav .slick-track {
   align-items: center;
   display: flex;
}
.product-gallery-nav-image {
   margin-left: 5px;
   margin-right: 5px;
   justify-content: center;
   opacity: 0.5;
   transition-duration: 0.8s;
   cursor: pointer;
}
.product-gallery-nav-image:hover {
   opacity: 1;
}
.product-gallery-nav-image.slick-current {
   opacity: 1;
}
.product-gallery-nav-image.slick-slide {
   display: flex !important;
}
.product-gallery-nav-image img {
   max-height: 100px;
}
/* -- Анимация 360 */
.animation360 {
   display: flex;
   position: absolute !important;
   top: 9px;
   right: 0;
   bottom: 0;
   left: 0;
   cursor: move;
}
/* -- Технические характеристики и Модификации */
.product-modifications {
   text-align: left;
}
.product-modifications tr td:first-child {
   min-width: 50px;
   opacity: 0.5;
}
.product-modifications-description {
   margin-bottom: 30px;
}
/* -- Иконки */
.product-icons-top {
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: space-between;   
}
.product-icons-item {
   background: var(--color-white);
   margin-left: -10px;
   border-radius: 25px;
}
.product-icons-item:first-child {
   margin-left: 0;
}
/* -- Взаимосвязи */
.product-relationship-item {
   display: flex;
   margin-bottom: 10px;
}
.product-relationship-item:last-child {
   margin-bottom: 0;
}
.product-relationship-item-image {
   width: 70px;
   margin-right: 15px;
   align-items: center;
   flex-shrink: 0;
   justify-content: center;
}
.product-relationship-item-image a {
   justify-content: center;
}
.product-relationship-item-image img {
   max-width: 70px;
   max-height: 70px;
}
.product-relationship-item-name {
   align-self: center;
   text-align: left;
   font-size: var(--fontsize-l);
}
.product-relationship-item-name a {
   text-decoration: underline;
}
/* -- Кнопки для опросного листа */
.product-order {
   flex-wrap: wrap;
   align-items: center;
}
/* -- Уведомление */
.product-notification {
   padding: 14px 16px;
   background: #d9131a;
   color: var(--color-white);
   border-radius: var(--br-m);
}
.product-notification a {
   color: var(--color-white);
}
/* -- Аналогичное оборудование */
.product-analog {
   margin-top: 40px;
}
.product-analog-items {
   display: flex;
   flex-wrap: wrap;
}
.product-analog-title {
   margin-bottom: 24px;
   font-family: "Montserrat", sans-serif;
   font-size: 28px;
   line-height: 1.2;
   letter-spacing: -1px;
}
.product-icons {
   display: flex;   
}


/* Каталог */
.catalog {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.catalog-header {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: space-between;
   align-items: flex-end;
}
.catalog-category-container {
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.catalog-container {
   display: flex;   
   gap: 30px;   
}
.catalog-main-category {
   display: flex;   
   gap: 20px;   
}
.catalog-main-category .catalog-category-image {
   margin-top: 10px;
}
.catalog-main-category-item,
.catalog-sub-category-item {
   display: flex;
   flex-direction: column;   
   gap: 20px;  
   color: var(--color-black);
   text-align: center;
   text-decoration: none;
   background-color: var(--color-white);
   border: 3px solid var(--color-gray-light);
   border-radius: var(--br-l);
}
.catalog-main-category-item {
   flex-basis: 50%;
   padding: var(--padding-l);
}
.catalog-main-category-item:hover,
.catalog-sub-category-item:hover {
   color: var(--color-main);
   border-color: var(--color-main);
}
.catalog-sub-category {
   display: flex;
   flex-wrap: wrap;   
   gap: 20px;  
}
.catalog-sub-category-item {  
   flex: 0 0 calc((100% - 40px) / 3);
   padding: var(--padding-m);  
}
.catalog-category-container .catalog-sub-category-item {
   padding: var(--padding-s);
}


/* Баннеры */
.catalog-banner {
   display: flex;
   gap: 40px;
   align-items: center;
   justify-content: space-between;
   padding: var(--padding-m);
   background-color: var(--color-white);
   border: 3px solid var(--color-gray-light);
   border-radius: var(--br-l);   
}
.catalog-banner img {
   height: 60px;
}
.catalog-banner svg {
   width: 50px;
   height: 50px;
   flex-shrink: 0;
   opacity: var(--opacity-l);
}
.catalog-banner-icons {
   display: flex;
   gap: 10px;
   align-items: center;
}
.catalog-banner-spark {
   display: flex;
   gap: 20px;
}
.catalog-banner-spark .icon-ru,
.catalog-banner-spark .icon-gisp {
   display: none;
}
.catalog-banner-text {
   text-align: center;
   text-transform: none;
}
.catalog-banner-text span {
   display: block;
   color: var(--color-spark);
}
.catalog-banner-text span.catalog-banner-text-big {
   display: inline;
   font-size: 56px;
}


/* Адресная и неадресная система */
.catalog-systems {   
   display: flex;
   gap: 20px;
   padding: var(--padding-s);
   background-color: var(--color-gray-light);
   border-radius: var(--br-l);
}
.catalog-systems-container {
   width: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   gap: 10px;
   padding: var(--padding-s);
   background-color: var(--color-white);
   border-radius: var(--br-l);   
}
.catalog-systems-signals {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.catalog-systems-signals-container {
   width: 75%;
   display: flex;   
   gap: 10px;
   align-items: center;
   justify-content: space-between;
   padding: 10px;
   background-color: var(--color-gray-light);
   border-radius: var(--br-l);
}
.catalog-systems-signals-container-item {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-shrink: 0;
   padding: 10px;
   background-color: var(--color-white);
   border-radius: var(--br-m);
   z-index: 3;
}
.catalog-systems-signals-container-item img,
.room-2 .catalog-systems-signals-container-item img:nth-child(2) {
   height: 60px;
   width: 60px;
}
.catalog-systems-signals-container-item img:nth-child(2),
.catalog-systems-signals-container-item img:nth-child(3) {
   height: 50px;
   width: 50px;
}

.catalog-systems-container-row {
   display: flex;
   align-items: center; 
   justify-content: space-between;  
   gap: 20px;
}
.catalog-systems-container-row img {
   flex-shrink: 0;
}
.catalog-systems-address,
.catalog-systems-noaddress {
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;   
}
.catalog-systems-item {
   display: flex;
}
.catalog-systems-text {  
   width: 100%; 	
   font-size: var(--fontsize-s);
   line-height: 1.3;
   text-align: center;
}
.catalog-systems-asutp {
   flex-shrink: 0;
}
.catalog-systems-asutp img {
   width: 100px;
   height: 100px;
}
.catalog-systems-control img,
.catalog-systems-ppkup img {
   width: 80px;
   height: 80px;
}
.catalog-systems-transfer {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
}
.catalog-systems-transfer img {
   width: 30px;
   height: 30px;
}
.catalog-systems-address .catalog-systems-signals-container {
   flex-direction: column;
}
.catalog-systems-address .catalog-systems-container-row {
   flex-direction: column;
} 
.catalog-systems-address .catalog-systems-transfer img {	
	transform: rotate(90deg);
}
.catalog-systems-address .catalog-systems-signals {
   flex-direction: row;
}
.catalog-systems-address .catalog-systems-control,
.catalog-systems-address .catalog-systems-ppkup {
   flex-shrink: 0;
   background-color: var(--color-white);
   z-index: 3;
}
.catalog-systems-spark {
   width: 20px;
   height: 20px;
   position: absolute;
   top: 5px;
   right: 5px;
   color: var(--color-spark);
   z-index: 5;
}
.scheme {
   position: absolute;
   z-index: 1;
   pointer-events: none;
   left: 77%;
   right: 0;
   top: 0;
   bottom: 0;
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   gap: 10px;
}
.scheme-line {
   position: relative;
   display: block;
}
.scheme-line::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   border-top: 2px dashed var(--color-black);
}
.scheme-line::after {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   width: 2px;
   height: 50%;
   border-right: 2px dashed var(--color-black);
}
.scheme-line-1::after {
   height: 50%;
   right: 48px;
   top: 0%;
}
.scheme-line-2::after {
   height: 160%;
   right: 38px;
   top: -110%;
}
.scheme-line-3::after {
  height: 270%;
  right: 28px;
  top: -220%;
}
.scheme-line-1::before {
   width: calc(100% - 48px)
}
.scheme-line-2::before {
   width: calc(100% - 38px)
}
.scheme-line-3::before {
   width: calc(100% - 28px)
}
.scheme-rectangle {
	width: 86%;
	height: 100%;
   position: absolute;
	left: 7%;
	top: -40%;	
	border: 2px dashed var(--color-black);	
   z-index: 2;
}


/* Меню */
aside {
	width: 25%;
   display: flex;
   flex-direction: column;
   gap: 20px;
	flex-shrink: 0;
}
.catalog-category-container {
	width: 75%;	
}
.catalog-menu {
   background-color: var(--color-gray-light);
   border-radius: var(--br-l);
}
.catalog-menu a {   
   color: var(--color-black);
   font-family: "Montserrat", sans-serif;
	line-height: 1.2;
   text-decoration: none;
   text-transform: uppercase;
}
.catalog-menu-children,
.catalog-menu-children-item,
.catalog-menu-children-item-menu {
   display: flex;
   flex-direction: column;
   gap: 10px;      
}
.catalog-menu-children {
   padding: var(--padding-s);
}
.catalog-menu-children-item-title a,
.catalog-menu-children-item-menu a {
   padding: var(--padding-button-m);
   background-color: var(--color-white);
   border-radius: var(--br-m);
}
.catalog-menu-children-item-title a.active {
   border: 3px solid var(--color-main);
}
.catalog-menu-children-item-menu {
   margin-left: 30px;
}
.catalog-menu-children-item-menu a.active {
   border: 3px solid var(--color-main);
}
.catalog-menu-children-item > .catalog-menu-children-item-posts {
   margin-top: -10px;
}
.catalog-menu-children-item-posts a {
   padding: var(--padding-button-m);
   background-color: var(--color-white);
   font-family: "Roboto", sans-serif;
   font-size: var(--fontsize-s);
   text-transform: none;
   border-radius: 0;
   word-break: keep-all;
}
.catalog-menu-children-item-posts a:hover {
   color: var(--color-main);
}
.catalog-menu-children-item-posts li {
   border-bottom: 1px solid var(--color-gray-light);
}
.catalog-menu-title {
   padding: 20px 26px;   
   background-color: var(--color-white);
   border: 3px solid var(--color-gray-light);
   border-radius: var(--br-l);
}
.catalog-main-active .catalog-menu-title {
   background-color: var(--color-main);   
}
.catalog-main-active .catalog-menu-title a {
   color: var(--color-white);   
}


/* Оборудование */
.catalog-items {
   display: flex;
   flex-wrap: wrap;
}
.catalog-items {
   width: calc(100% + 20px);
}
.catalog-item{
	display: flex;  
	flex-direction: column;
   flex: 0 0 calc((100% - 40px) / 3);    
	gap: 20px;
   padding: var(--padding-m); 
	color: var(--color-black);	
	text-decoration: none;
	border: 3px solid var(--color-gray-light);
	border-radius: var(--br-l);
}
.catalog-item-image a {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
	aspect-ratio: 16 / 9;  
}
.catalog-item-image img {
	width: 100%;		
}
.catalog-item-title {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   gap: 10px;
}
.catalog-item-title a {
   font-size: var(--fontsize-l);
   font-family: "Montserrat", sans-serif;
   line-height: 1.2;
}
.catalog-item-features {
   font-size: var(--fontsize-s);
   opacity: var(--opacity-m);
}
.catalog-item-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 35px;     
   z-index: 2;
}
.catalog-item-top-icons {
   display: flex;
}
.catalog-item-top-icons-item {
   background: var(--color-white);
   margin-left: -8px;
   border-radius: 18px;
}
.catalog-item-top-icons-item:first-child {
   margin-left: 0;
}



/* Услуги */
.section-services {
   display: flex;
   gap: 20px;
}
.section-services > div {
   flex-basis: 50%;
}
.section-services-block {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: var(--padding-l);
   background-size: cover;
   color: var(--color-white);
   border-radius: var(--br-l);
   overflow: hidden;
}
.section-services-block::before {
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(to top, transparent -50%, rgba(0, 0, 0, 0.8));
   content: '';
}
.section-services-container {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.section-services-content {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.section-services-integrator {
   background-image: url('img/services-integrator.avif');
}
.section-services-training {
   background-image: url('img/services-training.avif');
}
.section-services-repair {
   background-image: url('img/services-repair.avif');
}


/* Проекты */
.projects-icons {
   display: flex;
}
.projects-icons-item {
   background: var(--color-white);
   margin-left: -10px;  
}
.projects-icons-item:first-child {
   margin-left: 0;
}
.projects-features {
   display: flex;
   gap: 20px;
}
.projects-features-item {
   display: flex;
	flex-direction: column;
   gap: 10px;
	padding: var(--padding-s);
	background-color: var(--color-gray-light);
   border-radius: var(--br-l);
	text-align: center;	
}
.projects-features-item-description {
   font-size: var(--fontsize-s);
   opacity: var(--opacity);  
}



/* Проекты */
.projects {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.projects-items {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.projects-item {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - 40px) / 3);	
   background-color: var(--color-white);
	color: var(--color-black);
	text-decoration: none;
	border: 3px solid var(--color-gray-light);
	border-radius: var(--br-l);
}
.projects-item-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex-grow: 1;
	padding: var(--padding-m);
}
.projects-item-icons {
   display: flex;
}
.projects-item-icons-item {
   background: var(--color-white);
   margin-left: -10px;
}
.projects-item-icons-item:first-child {
	margin-left: 0;
}
.projects-item-image {
   margin: -3px;
}
.projects-item-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	aspect-ratio: 16 / 9;
}
.projects-item-image img {
	width: 100%;
	border-radius: var(--br-l);
	object-fit: cover;
}
.projects-item-company {
	font-size: var(--fontsize-s);
	opacity: var(--opacity-m);
}
.projects-item-title {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 10px;
}
.projects-item-title a {
   flex-grow: 1;
   font-size: var(--fontsize-l);
   font-family: "Montserrat", sans-serif;
   line-height: 1.2;   
}
.section-projects .projects-item:nth-child(4) {
   display: none;
}



/* Отзывы */
.reviews {	
	margin-left: -10px;
	margin-right: -10px;
}
.reviews .slick-slide {  
   height: auto;
   margin: 0 10px;
}
.reviews .slick-slide img {  
   height: 100%;
   object-fit: cover;
}
.reviews-item-img {
   height: 100%;     
   flex-grow: 1;
}
.reviews-item-img img {
	width: 100%;
   max-height: 250px;
	object-fit: cover;
   object-position: top;
}
.reviews-item-img::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, white, transparent);
  pointer-events: none;
}
.reviews .slick-slide img::after {
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: var(--color-white);
   content: '';
}
.reviews.slick-initialized .slick-slide {
   height: auto;
   display: flex;
}
.reviews .slick-track {
   display: flex;
   margin-left: 0;
}
.reviews-item {   
   background-color: var(--color-white);  
   border-radius: var(--br-l);
   overflow: hidden;
}
.reviews-item-container {
   display: flex;
   flex-direction: column;  
   gap: 20px;
   flex-grow: 1;
   padding: var(--padding-m);
}
.reviews-item-categories {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.reviews-item-category {
   padding: var(--padding-button-s);
   background-color: var(--color-gray-light);
   font-family: "Montserrat", sans-serif;
   font-size: var(--fontsize-ss);   
   text-transform: uppercase;
   border-radius: var(--br-m);
}
.reviews-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.reviews-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.reviews-item-description,
.reviews-item-job {
   font-size: var(--fontsize-s);
}
.reviews-item-job {
   opacity: var(--opacity);
}
.reviews-arrows-container {
   display: flex;
   gap: 10px;
}
article .reviews {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
   margin: 0;
}
article .reviews-item {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - 40px) / 3);		
}


/* Фотогалерея */
.photogallery {
   margin-right: -20px;
}
.photogallery-item,
.photogallery-size {
   width: calc(100%/3 - 20px);      
}
.photogallery-item {      
   margin-bottom: 20px;
}  
.photogallery-item img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: var(--br-l);
}


/* Таблицы */
.grid-table {
   width: 100%;
   display: grid;
   font-size: var(--fontsize-l);
}
.grid-table-s .grid-row {  
   grid-template-columns: fit-content(500px) 1fr;  
}
.grid-row {
   display: grid;
   grid-template-columns: min(50%, 500px) 1fr;
   gap: 20px;
   padding: 10px;
   border-bottom: 1px solid var(--color-gray);
}
.grid-row:last-child {
    border-bottom: none;
}
.grid-row .grid-cell:first-child {
   font-weight: bold;
}
.grid-cell {
    word-break: break-word;
}


/*Постраничная навигация */
.pagination {	
	padding: var(--padding-m);
	background: var(--color-gray-light);
	border-radius: var(--br-l);
}
.pagination a,
.pagination .current {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: var(--fontsize-l);
	font-weight: 600;
}
.pagination a {
	background: var(--color-white);
	color: var(--color-black);
	text-decoration: none;
}
.pagination .current {
	background: var(--color-main);
	color: var(--color-white);
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pagination .screen-reader-text {
	display: none;
}


/* Всплывающие подсказки */
.hint {
   min-width: 180px;
   max-width: calc(100vw - 20px);
   box-sizing: border-box;
   padding: 10px;
   position: absolute;
   bottom: calc(100% + 8px);
   left: 0;
   background: var(--color-main);
   color: var(--color-white);
   font-size: 12px;
   line-height: 1.15;
   text-align: center;
   border-radius: var(--br-m);
   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
   opacity: 0;
   visibility: hidden;
   z-index: 99;
}
.hint::before {
   content: "";
   position: absolute;
   bottom: -8px;
   left: var(--hint-arrow-left, 12px);
   border: 8px solid transparent;
   border-bottom-width: 0;
   border-top-color: var(--color-main);
   z-index: 99;
}
.hint-align-right {
   right: 0;
   left: auto;
}
.hover-hint:hover .hint {
   animation: tooltips 300ms ease-in-out forwards;
   visibility: visible;
}

/* Breadcrumbs */
.breadcrumbs {
   width: 100%;  
   display: flex;
   align-items: center;
   font-size: var(--fontsize-s);
}
.breadcrumbs a {   
   text-decoration: underline;
   opacity: var(--opacity-m);
}
.breadcrumbs a:hover {
   color: var(--color-black);
   opacity: 1;
}
.breadcrumbs .icon-element-arrow,
.breadcrumbs-last {  
   opacity: var(--opacity-m);
}
.breadcrumbs-path {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}


/* Поиск */
.search-form {
   display: flex;  
   gap: 10px;
   width: 100%;
}
.search-form button {
   width: 59px;
}
.search-form input#s {
   flex-grow: 1;  
}
.search-results-container {
   display: flex;
   flex-direction: column;
   gap: 30px; 
   margin-top: 30px;  
}
.search-results-container a {
   color: var(--color-black);
   text-decoration: none;
}
.search-results-container a:hover {
   color: var(--color-main);
}
.search-result-item .search-result-title {
   margin-top: 0;
   margin-bottom: 10px;
}
.search-result-path {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   opacity: var(--opacity-m);
}
.search-result-path-item {
   padding: var(--padding-button-s);
   background-color: var(--color-gray-light);  
   font-family: "Montserrat", sans-serif;
   font-size: var(--fontsize-ss);  
   text-transform: uppercase;
   border-radius: var(--br-m);
}


/* Вспылвающее окно */
.modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
}
.modal-close {
	width: auto;
	border: 0;
	font-size: 21px;
   line-height: 1;
   padding: 10px 15px;
   position: absolute;
   top: 0;
   right: 0;
   border-radius: var(--br-l);
   background-color: var(--color-gray-light);
   z-index: 9;
}
.modal-close:hover {
	background-color: var(--color-gray-light);
	cursor: pointer;
}
.modal-description {
   font-size: 14px;
   margin-bottom: 15px;
}
.modal-device {
   margin-bottom: 20px;
   font-weight: bold;
}
.modal-device:empty {
   display: none;
}
.modal-device span {
   font-size: 12px;
   font-weight: 400;
   opacity: 0.5;
}
.modal-inner {
   padding: var(--padding-m);
   box-sizing: border-box;
   margin: 50px 5%;
   border-radius: var(--br-l);
   background: var(--color-white);
}
.modal-title {  
   font-size: 28px;
   font-family: "Montserrat", sans-serif;
   line-height: 1.2;
}
.modal-wrapper {
   border-radius: 20px;
   height: 100vh;
   margin: auto;
   width: 100%;
   max-width: 700px;
   overflow: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
}
.modal-wrapper::-webkit-scrollbar {
   width: 0;
   height: 0;
}
.underlay {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.8);
   cursor: pointer;
}


/* Форма обратной связи */
.form-container {
   display: flex;
   gap: 20px;
}
.form-container-text {
   max-width: 550px;
   display: flex;
	flex-direction: column;
	gap: 20px;
}
.form-container-description {
   font-size: var(--fontsize-l);
   opacity: var(--opacity);
}
.contact-form {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px; 
}
.contact-form input,
.contact-form textarea {  
   width: 100%;
}
.contact-form input[type="submit"]:focus {
   border-color: var(--color-main);
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
   border-color: var(--color-main);
}
.contact-form input[aria-invalid="true"]:focus,
.contact-form textarea[aria-invalid="true"]:focus {
   border-color: var(--color-black);
}
.contact-form span[data-name="user-category"]::after,
.contact-form span[data-name="user-zip"]::after {
   font-family: "fontello";
   font-size: 16px;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   display: inline-block;
   width: 1em;
   text-align: center;
   text-transform: none;
   line-height: 1em;
   position: absolute;
   top: calc(50% - 8px);
   right: 24px;
   content: "\e80d";
   pointer-events: none;
}
.contact-form select {
   background: var(--color-white);
}
.contact-form-group {
   width: 100%;
   display: flex;
   gap: 10px;
}
.contact-form-row {
   width: 100%;
}
.contact-form-row label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.contact-form-row-agreement {     
   color: #999;
   font-size: 12px;
}
.contact-form-row-agreement a {
   display: inline;
}
.contact-form-row-buttons {
   display: flex;
   align-items: center;
   gap: 20px;
}
.contact-form-row-submit p {
   display: flex;
   align-items: center;
   gap: 20px;
}
.contact-form .wpcf7-not-valid-tip,
.contact-form .wpcf7-spinner {
   display: none;
}
.wpcf7 .wpcf7-form .ajax-loader {
   display: none !important;
}
.wpcf7 .wpcf7-form .wpcf7-mail-sent-ok {
   border-color: var(--color-black);
   color: var(--color-black);
}
.wpcf7 .wpcf7-form .wpcf7-response-output {
   display: none;
   margin: 1rem 0 0;
   padding: var(--padding-button-l);
   background-color: var(--color-white);
   border: 2px solid var(--color-main);
   border-radius: var(--br-l);   
}
.wpcf7-form.invalid .wpcf7-response-output {
   display: flex; 
   color: var(--color-main); 
   border-color: var(--color-main) !important;
}
.wpcf7 form.sent .wpcf7-response-output {
   display: flex; 
}
.screen-reader-response {
   display: none;
}


/* Куки */
.cookies {
   width: 94%;
   max-width: 640px;
   margin: 0 auto;
   align-items: center;
   background: var(--color-white);
   font-size: 12px;
   line-height: 1.3;
   padding: 20px;
   border-radius: var(--br-m);
   position: sticky;
   bottom: 3%;
   display: none;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
   z-index: 99;
}
.cookies-notice {
   opacity: 0.8;
   width: 100%;
   margin-right: 20px;
}
.cookies-button {
   padding: 10px 20px;
   font-size: 14px;
   border: 2px solid var(--color-black);
   border-radius: var(--br-m);
   transition-duration: 0.8s;
}
.cookies-button:hover {
   cursor: pointer;
   color: var(--color-main);
   border-color: var(--color-main);
}

/* Кнопка вверх */
.top-scroll-arrow {
   align-items: center;
   background-color: var(--color-main);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
   color: var(--color-white);
   display: flex;
   justify-content: center;
   transition: 0.8s ease;
   position: fixed;
   right: 3%;
   bottom: 20px;
   width: 50px;
   height: 50px;
   border-radius: 25px;
   opacity: 0;
   cursor: pointer;
   z-index: 90;
}

/* Адаптивное встраивание видео */
.video-container {
   position: relative;
   padding-bottom: 56.25%;
   height: auto;
   overflow: hidden;
   margin-bottom: 20px;
   max-width: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* -- Fancybox */
.fancybox-infobar {
   display: flex;
}
.fancybox-navigation {
   bottom: 0;
   left: 0;
   right: 0;
   position: absolute;
   top: 0;
}


/* Анимация */
/* Анимация пунктов мобильного меню */
@keyframes fadeRightToLeft {
   0% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
   }
   100% {
      opacity: 1;
      transform: none;
   }
}
/* Анимация всплывающей подсказки */
@keyframes tooltips {
   to {
      opacity: 1;
   }
}


/* Медиа запросы */
@media (min-width: 1599.98px) {
    /* Структура */
   .main-padding {
      padding-left: 100px;
      padding-right: 100px;
   }  
}
@media (max-width: 1365.98px) {
   /* Базовые стили */
   :root { 
      --fontsize-h1: 30px;
      --fontsize-h2: 24px;
      --fontsize-h3: 18px;
      --fontsize-l: 16px;     
      --fontsize-s: 12px;      
      --padding-l: 40px;
      --padding-m: 20px;
      --padding-s: 10px;
      --padding-button-l: 16px 20px;
      --padding-button-m: 10px 14px;
      --padding-button-s: 6px 10px;
   }
   /* Скрываем элементы */  
   .header-contact,
   .header-title {
      display: none;
   }
   /* Хедер */
   .header-top {
      margin-bottom: 0;
   }
   .header-top .header-buttons {
      top: 0;
      display: flex;
      margin-right: 60px;
   }  
   /* Логотип */
   .header-logo img, 
   .footer-logo img {
      max-width: 300px;
      height: 60px;
   }
}
@media (max-width: 1279.98px) {  
   /* Структура */
   main {
      gap: 20px;
   }
   /* Главная страница */
   .section-information {
      flex-direction: column;      
   }
   .section-information,
   .section-information-numbers,
   .section-information-numbers-wrapper {
      gap: 10px;
   }
   /* Интегратор */
   .section-integrator,
   .section-integrator-projection,
   .section-integrator-projection-systems-item {     
      gap: 20px;
   }  
   .section-integrator-projection-systems {
      flex-direction: column;
      gap: 10px;
   }
   /* Каталог */
   .catalog,
   .catalog-item,
   .catalog-main-category,
   .catalog-sub-category,
   .catalog-systems {     
      gap: 10px;
   }
   .catalog-container,
   .catalog-category-container {     
      gap: 20px;
   }
   .catalog-container,
   .catalog-main-category,
   .catalog-systems {
      flex-direction: column;      
   }   
   .catalog-item,
   .catalog-sub-category-item {
      flex: 0 0 calc((100% - 10px) / 2);     
   }    
   .catalog-systems-address, 
   .catalog-systems-noaddress {
      width: 100%;     
      gap: 10px;
   }  
   .catalog-category-container {
      width: 100%;
   }
   .catalog-menu-title {
      padding: 16px 20px;
   }
   aside {
      width: 100%;
      gap: 10px;
   }
   /* Оборудование */  
   .product-container,
   .product-right,
   .product-tabs-radio:checked + .product-tabs-content {     
      gap: 20px;
   }
   .product-header {
     flex-direction: column;  
   }
   .product-left {
      width: 100%;     
   }
   .product-right {
      width: 100%;
      margin-left: 0;      
   }    
   /* Статьи */
   .articles,
   .article-container {     
      gap: 20px;
   }  
   .articles-items,
   .articles-item-container {     
      gap: 10px;   
   }
   .section-articles .articles-item:nth-child(4) {
      display: flex;
   }
   .articles-item,
   .about-item {   
      flex: 0 0 calc((100% - 10px) / 2);
   }
   .about-items {      
      gap: 10px;
      margin: 20px 0;
   }
   .product-tabs-gallery {
      gap: 10px;
   }
   .product-tabs-gallery-item {     
      flex: 0 0 calc((100% - 30px) / 4);      
   }
   /* Фотогалерея */
   .photogallery {
      margin-right: -10px;
   }
   .photogallery-item,
   .photogallery-size {
      width: calc(100%/2 - 10px);
   }
   .photogallery-item {      
      margin-bottom: 10px;
   }  
   /* Проекты */
   .projects-items,
   .projects-item-container,
   .projects-features {
      gap: 10px; 
   }
   .projects-item {
      flex: 0 0 calc((100% - 10px) / 2);
   }
   .projects-features-item {
      gap: 0;
   }   
   .section-projects .projects-item:nth-child(4) {
      display: flex;
   }
   /* Отзывы */
   article .reviews-container {
      margin-top: 20px;
   }
   article .reviews,
   .reviews-item-container {
      gap: 10px;
   }
   article .reviews-item {     
      flex: 0 0 calc((100% - 10px) / 2);
   }
   /* Услуги */
   .section-services {
      flex-direction: column;      
   }
   .section-services,
   .section-services-container {
      gap: 10px;
   }
   .section-services > div,
   .section-services-block {
      min-height: 400px;
   }   
   .section-services-integrator {      
      background-position: bottom -100px right;
   }
   /* Сегменты */
   .segments-items {
      flex-wrap: wrap;
      gap: 10px;
   }
   .segments-item {     
      flex: 1 0 calc((100% - 20px) / 3);       
   }
   /* Форма обратной связи */
   .form-container {
      flex-direction: column;
   }
   .form-container-text {
      max-width: none;    
      gap: 10px;
   }
   /* Вкладки */
   .product-tabs-content-container-description {
      margin-bottom: 20px;
   }
   /* Подвал */
   .footer-container {
      padding: 0;
      padding-bottom: 50px;      
   }   
}
@media (max-width: 767.98px) {
   /* Базовые стили */
   :root {
      --fontsize-m: 14px;
      --fontsize-ss: 10px;
      --padding-l: 30px;
      --padding-m: 15px;      
   }
   p {
      margin-bottom: 1rem;
   }
    /* Структура */
   .main-padding {
      padding-left: 3%;
      padding-right: 3%;
   }    
   .main-wrapper,
   .section-container {
      gap: 20px;
   }   
   .section-header {     
      flex-direction: column;
      gap: 10px;
   }
   input[data-input="js-search"] {
      margin-bottom: 20px;
   }
   /* Скрываем элементы */
   .header-logo .logo-spetzpozh,
   .catalog-banner-icons {
      display: none;
   }
   /* Кнопки */
   .button-size-m {      
      font-size: var(--fontsize-s);
   }
   /* Логотип */
   .logo-spetzpozh-s {
      display: flex;
   }
   .logo-spetzpozh-s svg {
      width: 54px;
      height: 44px;
   }
   .header-logo {
      margin-bottom: 0;
   }  
   /* Каталог */
   .catalog-banner {      
      gap: 10px;     
      flex-direction: column;
   }   
   .catalog-banner-spark .icon-ru,
   .catalog-banner-spark .icon-gisp {
      display: block;
   }
   .catalog-item-top {
      height: 30px;
   }
   .catalog-main-hidden {
      display: none;
   }
   /* Оборудование */
   .product-icons-top {
      height: 40px;
   }
   .product-tabs {
      gap: 0;
   }
   .product-tabs-buttons,
   .product-tabs-content {
      padding: var(--padding-m);  
   }
   .product-documentation-item-name,
   .product-relationship-item-name {
      font-size: var(--fontsize-m);
   }
   .product-documentation-item-size {
      font-size: var(--fontsize-s);
   }  
   /* Таблица */
   .grid-table {     
      font-size: var(--fontsize-m);
   }   
   .grid-row {          
      gap: 5px;
      padding: 10px 0;     
   }
   .grid-row,
   .grid-table-s .grid-row {
      grid-template-columns: 1fr; 
   }
   /* Статьи */
   article {      
      padding: 0;     
      border: 3px solid var(--color-gray-light);
   }
   article p, 
   article ul, 
   article ol {
      font-size: var(--fontsize-m);
   }  
   article ul, article ol {
      margin: 10px 0 10px 0;      
   }
   article ul li, 
   article ol li {
      padding-left: 22px;      
   }
   article ul li::before {     
      margin-right: 10px;
      margin-left: -22px;
   }
   article ol li::before {     
      text-indent: -20px;      
   }
   article #map {
      margin: 20px 0;
      height: 400px !important;
   } 
   .article-container {
      padding: var(--padding-m);      
   }
   .articles-items {     
      flex-direction: column;  
   }   
   .article-main-image {
      max-height: 200px;
   }
   .article-gallery {
      gap: 10px;
   }      
   .about-item .about-item-icon {
      width: 70px;
      height: 70px;
   }
   .product-tabs-gallery-item {     
      flex: 0 0 calc((100% - 20px) / 3);      
   }
   /* Проекты */
   .projects-items {
     flex-direction: column;  
   }
   .projects-features {
      flex-wrap: wrap;
   }
   .projects-features-item {
      flex: 0 0 calc((100% - 10px) / 2);
   }   
   /* Услуги */  
   .section-services .title-h1 {
      font-size: var(--fontsize-h2);      
   }
   .section-services > div,
   .section-services-block {
      min-height: 300px;
   }  
   .section-services-integrator {
      background-position: bottom -30px right;
   }
   /* Отзывы */
   article .reviews {
      flex-direction: column;
   }
   .article-reviews {
      padding: var(--padding-l);
   }
   .reviews-item-img img {
      max-height: 200px;
   }
   /* Сегменты */  
   .segments-item {     
      flex: 1 0 calc((100% - 10px) / 2);       
   }
   /* Слайдер */
   .article-arrows-container,
   .banner-arrows-container,   
   .reviews-arrows-container {     
      justify-content: space-between;
      width: 100%;
   }
   .article-dots-container,
   .banner-dots-container,
   .reviews-dots-container {
      display: none !important;
   }   
   /* Подвал */
   .footer-container {     
      padding-bottom: 30px;      
   }   
   .footer-top {      
      align-items: flex-start;      
      flex-direction: column;
      gap: 20px;
   }
   /* Поиск */  
   .search-results-container {     
      gap: 20px;      
   }  
   .search-result-path {     
      gap: 5px;      
   }
   .search-result-title {     
      font-size: var(--fontsize-l);       
   }   
}
@media (max-width: 479.98px) {  
   /* Базовые стили */
   :root {   
      --fontsize-h1: 23px;
      --fontsize-h2: 20px;  
      --padding-l: 15px;   
      --padding-button-l: 14px 18px; 
      --padding-button-m: 8px 12px;
      --padding-button-s: 5px 9px;     
   }
   h1, 
   h2, 
   h3, 
   .title-h1, 
   .title-h2, 
   .title-h3 {     
      word-wrap: anywhere;
   }   
   /* Структура */  
   .section-description {
      font-size: var(--fontsize-m);     
   }
   input[data-input="js-search"] {
      margin-bottom: 10px;
   }
   /* Скрываем элементы */
   header .button-search {
      display: none;
   }    
   /* Главная страница */  
   .section-information-img {
      height: 200px;
      display: flex;
   }
   .section-information-img img {
      width: 100%;
      object-fit: cover;
      border-radius: var(--br-l);
   }
   .section-information-spi {    
      padding: var(--padding-m);  
      gap: 10px;   
   } 
   .section-information-numbers-wrapper {
     flex-direction: column;  
   }   
   /* Каталог */  
   .catalog-category-container .catalog-systems {
      order: 3;
   } 
   .catalog-category-title {     
     font-size: var(--fontsize-l);
   }  
   .catalog-sub-category {
      flex-direction: column;
   }
   .catalog-systems-signals-container {
      flex-direction: column;
   }   
   .catalog-systems-signals-container .catalog-systems-text {    
      padding: 0 10px;
   }
   /* Оборудование */
   .product,
   .product-tabs,
   .product-tabs-buttons {
      gap: 5px;
   }   
   .product-tabs-radio:checked + .product-tabs-content {     
      gap: 10px;
   }   
   .product-documentation {
      gap: 10px;
   }    
   .product-container {     
      gap: 0;
   }
   /* Фотогалерея */
    .photogallery {
      margin-right: 0;
   }
   .photogallery-item,
   .photogallery-size {
      width: 100%;
   }     
   /* Статьи */
   .article-container {     
      gap: 10px;
   }
   .article-container .title-connected {
      margin-top: 20px;
   }
   .article-content h2 {
      margin-top: 2rem;
      margin-bottom: 1rem;
   }
   .article-gallery-main .slick-slide img {
      max-height: 200px;
   }
   .articles-footer {
      margin-top: 20px;
   }
   .about-items {
      flex-direction: column;
   }
   .product-tabs-gallery-item {     
      flex: 0 0 calc((100% - 10px) / 2);      
   }
   /* Отзывы */
   article .reviews-container {
      margin-top: 10px;
   }
   /* Сегменты */
   .segments-items {
      flex-direction: column;
   }
   /* Путь */
   .breadcrumbs-path {     
     column-gap: 10px;
     row-gap: 5px;
   }     
   .breadcrumbs-path > span:last-of-type,
   .breadcrumbs-path > span:nth-last-child(2) {
      display: none;
   }     
   /* Форма обратной связи */
   .modal-description {
      font-size: 12px;
   }
   .modal-inner {
      padding: 20px;
   }
   .contact-form input[type="submit"] {
      width: 100%;
   }
   .contact-form-group,
   .contact-form-row-buttons {
      flex-direction: column;
   }
   .contact-form-row-buttons {     
      align-items: flex-start;
      gap: 10px;
   }
}

/* Стили для печати */
@media print {
   @page {
      margin: 1cm;
   }
   html {
      font-size: 14px;
   }
   aside,   
   footer,
   input[data-input="js-search"],
   .button,
   .form,
   .header-buttons,
   .header-menu,   
   .logo-spetzpozh-s,
   .banner-container,
   .breadcrumbs,
   .catalog-systems,
   .product-interaction,
   .product-order,  
   .product-analog,
   .product-gallery-nav,
   .product-tabs-buttons,
   .product-note,
   .tabs label,   
   .articles-interaction,   
   .top-scroll-arrow,
   .section-articles,
   .section-projects,
   .section-reviews,
   .section-services,
   .section-sub-category,
   .reviews-item a,
   .reviews-item-img {
      display: none !important;
   }
   .header-logo .logo-spetzpozh,
   .product {
      display: block !important;
   }
   .product-tabs-content {
      display: flex !important;
      flex-direction: column;
      gap: 10px;
   }
   .product-tabs-contents {
      display: flex;
      flex-direction: column;
      gap: 10px;
   }
   .product-left,
   .product-right {
      width: 100%;
      margin: 0;
   }
   .main-wrapper {
      box-shadow: none;
   }   
   .article-background-overlay {     
      min-height: max-content; 
      padding: var(--padding-m) !important;   
   }
   .article-main-image {
      max-height: 200px;
   }   
   .article-container {      
      padding: var(--padding-m) !important;
   }
   article {   
      padding: 0 !important;   
      border: 3px solid var(--color-gray-light);
   }
   .article-background-title, 
   .article-background-description {
      max-width: none;
   }
}