/* Определяем шрифты, кодировку и глобальные константы  ========================================================================== */
@charset "UTF-8";
/* @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&amp&display=swap); */
/* @import url(https://fonts.googleapis.com/icon?family=Material+Icons); */


@font-face { font-family: "Vida33Pro"; src: url("fonts/vida33pro-webfont.eot"); src: url("fonts/vida33pro-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/vida33pro-webfont.woff") format("woff"), url("fonts/vida33pro-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Vida33Pro-Bold"; src: url("fonts/vida33pro-bold.eot"); src: url("fonts/vida33pro-bold.eot?#iefix") format("embedded-opentype"), url("fonts/vida33pro-bold.woff") format("woff"), url("fonts/vida33pro-bold.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Vida31Pro"; src: url("fonts/vida31pro-webfont.eot"); src: url("fonts/vida31pro-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/vida31pro-webfont.woff") format("woff"), url("fonts/vida31pro-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "pfbeausanspro"; src: url("fonts/pfbeausanspro-bold.eot"); src: url("fonts/pfbeausanspro-bold.eot?#iefix") format("embedded-opentype"), url("fonts/pfbeausanspro-bold.woff") format("woff"), url("fonts/pfbeausanspro-bold.ttf") format("truetype"); font-weight: normal; font-style: normal; }


:root {
	/* цветовые константы */
    --beyond: rgba(158, 158, 158, 0.1); /* фон за пределами рабочего экрана, практически прозрачный */
	--background: rgba(0, 0, 0, 0.2); /* подложка модального окна */
	--notice: rgba(210, 0, 0, 1); /* подложка оповещения об ощибке */
	--primary: #003671; /* основной фон сайта (сине-фиолетовый) */
    --secondary: #00ABE4; /* дополнительный фон сайта (голубой) */
    --cabinet: #2B76AF; /* основной фон кабинета (морской волны) */
	--lightgray: #E3E3E3; /* цвет фона для "хлебных крошек" */
    --blue: #d7e3ec; /* цвет бордюра на активном поле ввода (бледно-голубой) */
	--shadow: rgba(0,171,229,.25); /* тень бордюра на активном поле ввода */
    --red: #dc3545; /* цвет кнопки Отмена в модальном окне */
    --green: #5BB85E; /* цвет кнопки Согласен в модальном окне */
	/* шрифтовые константы */
    /* --font-main: "Roboto",sans-serif; основной шрифт - узкий пропорциональный шрифт от Google */
	/* --font-menu: "Montserrat"; шрифт хедера, футера и меню - широкий пропорциональный шрифт от Google */
    /* --font-mono: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;  моноширинный шрифт для таблиц - от Apple */
}



/* ======================================================================================================================= */
/* Нормализуем настройки браузера, прежде чем использовать свои стили (взято с github.com/necolas/normalize.css)  ======== */
/* ======================================================================================================================= */

*, ::after, ::before { /* определяем способ расчета размеров контента */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    margin: 0;
    position: relative; /* способ задавать смещение (по-умолчанию) */
	font-size: 16px; /* задаем значение для 1rem = 16px */
    font-weight: normal;
    text-align: left;
    line-height: 1.5; /* межстрочный интервал по-умочанию */
	-webkit-text-size-adjust: 100%; /* Запретить изменение размера шрифта после изменения ориентации в iOS */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* подсветка при наведении для старых мобильных устройств */
	scroll-behavior: smooth;  /* плавная прокрутка до указанного места страницы */
}	

body {
    margin: 0px auto; /* центрировать по горизонтали */
	background: white;
}

main {
	display: block; /* исправление визуализации элемента `main` в IE  */
}

hr {
  margin: 0;
  padding: 0;
  box-sizing: content-box; /* правильный размер поля в Firefox */
  height: 0; /* правильный размер поля в Firefox */
  overflow: visible; /* показать переполнение в Edge и IE */
}

h1 {
  font-size: 2em; /* исправляем размер шрифта в Chrome, Firefox и Safari */
  margin: 0.67em 0; /* исправляем поля и контексты статей в Chrome, Firefox и Safari */
}

h2, h3, h4, h5, p {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

pre {
  font-family: monospace, monospace; /* исправляем наследование и масштабирование размера шрифта во всех браузерах */
  font-size: 1em; /* исправляем неправильный размер шрифта em во всех браузерах */
}

a {
  background-color: transparent; /* убираем серый фон активных ссылок в IE 10 */
  text-decoration: none; /* убираем автоматическую подсветку ссылок */
  color: unset;
}

b, strong {
  font-weight: bold; /* избавляемся от варианта font-weight: bolder; в некоторых браузерах */
}

small {
  font-size: 80%; /* Добавляеме правильный размер шрифта во все браузеры */
}

code, kbd, samp {
  font-family: monospace, monospace; /* исправляем наследование и масштабирование размера шрифта во всех браузерах */
  font-size: 1em; /* исправляем неправильный размер шрифта em во всех браузерах */
}

sub, sup { /* предотвращаем влияние элементов `sub` и `sup` на высоту строки во всех браузерах */
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none; /* Удаляем границу изображений внутри ссылок в IE 10 */
}

table { /* зададим стили по-умолчанию, чтобы отвязаться от настроек браузера */
	margin: 0; /* отступы снаружи таблицы */
	padding: 0; /* отступы внутри таблицы */
	border: 0px solid black; /* граница вокруг всей таблицы */
	border-collapse: collapse; /* объединять совпадающие границы ячейки с границей таблицы */
	width: 100%; /* занимать всю доступниу ширину */
	background-color: white;
	vertical-align: middle; /* центрировать содержимое по вертикали */
	text-align: center; /* центрировать содержимое по горизонтали */
}	
	
td,th {
	padding: 0; /* отступы внутри ячейки сверху справа снизу слева */
	border: 0; /* граница вокруг ячейки */
}		


/* Формы  ========================================================================== */

input,
button,
optgroup,
select,
textarea {
  font-family: inherit; /* установим наследование шрифта из родительского элемента */
  font-size: 100%; /* установим размер шрифта равным родительскому */
  line-height: 1.5; /* межстрочный интервал по-умочанию */
  margin: 0; /* удаляем поля в Firefox и Safari */
}


input { /* все интерактивные элементы, кнопки, поля ввода */ 
	outline: 0; /* запретить подсветку браузером */ 
 	color: black;
    background-color: white;
}
input:hover { /* при наведении */ outline: 0; }
input:active { /* в момент выбора */ outline: 0; }
input:focus { /* после выбора */ outline: 0; }


textarea { /* поле ввода для текста (масштабируемое) */
	outline: 0; /* запретить подсветку браузером */ 
 	color: black;
    background-color: white;
	overflow: auto; /* Удалим вертикальную полосу прокрутки по умолчанию в IE 10+ */
}
textarea:hover { /* при наведении */ outline: 0; }
textarea:active { /* в момент выбора */ outline: 0; }
textarea:focus { /* после выбора */ outline: 0; }


button,
input {
  overflow: visible;  /* Показать переполнение в IE и Edge */
}

button,
select { 
  text-transform: none; /* Удалим наследование преобразования текста в Edge, Firefox и IE */
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* исправляем ​​невозможность стилизации кликабельных типов в iOS и Safari */
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { /* удаляем внутреннюю границу и отступы в Firefox */
  border-style: none; 
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { /* востановим стили фокуса, не заданные предыдущим правилом */
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em; /** исправим отступы в Firefox */
}

legend {
  box-sizing: border-box; /* исправим перенос текста в Edge и IE */
  display: table; /* исправим перенос текста в Edge и IE */
  max-width: 100%; /* исправим перенос текста в Edge и IE */
  white-space: normal; /* исправим перенос текста в Edge и IE */
  color: inherit; /* исправлим наследование цвета элементов fieldset в IE */
  padding: 0; /* удалим отступы, чтобы разработчики не были застигнуты врасплох, когда они обнуляются */
}

progress {
  vertical-align: baseline; /* добавим правильное вертикальное выравнивание в Chrome, Firefox и Opera */
}


[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* добавим правильный размер окна в IE 10 */
  padding: 0; /* удалим отступы в IE 10 */
}


[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; /* исправим стиль курсора кнопок увеличения и уменьшения в Chrome */
}


[type="search"] {
  -webkit-appearance: textfield; /* Исправим странный внешний вид в Chrome и Safari */
  outline-offset: -2px; /* исправим стиль контура в Safari */
}


[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* удалитм внутренние отступы в Chrome и Safari на macOS */

}


::-webkit-file-upload-button {
  -webkit-appearance: button; /* исправим ​​невозможность стилизации кликабельных типов в iOS и Safari */
  font: inherit; /* изменим свойства шрифта на «наследовать» в Safari */
}


/* Разное  ========================================================================== */

details {
  display: block; /* Добавьте правильное отображение в Edge, IE 10+ и Firefox */
}

summary {
  display: list-item; /* Добавлено правильное отображение во всех браузерах */
}

template {
  display: none; /* Добавлено правильное отображение в IE 10+ */
}

[hidden] {
  display: none;  /* Добавлено правильное отображение в IE 10+ */
}


/* ======================================================================================================================= */
/* Определяем Глобальные стили данного сайта, включая стили модальных окон               ================================= */
/* Считаем, что вывод идет на DESKTOP ((orientation: landscape) and (min-width: 860px))  ================================= */
/* на тот случай, если @media не работают, как в Safari MacOS версии 15.6                ================================= */
/* ======================================================================================================================= */


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, button {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

html {
    height: 100%; /* чтобы сплеш-заставка занимала весь экран, а не подпрыгивала вверх */
	background: var(--beyond); /* фон за пределами рабочей области */
	font-family: "Vida33Pro"; /* шрифт по-умолчанию */
    color: var(--primary); /* цвет шрифта по-умолчанию */
	/* overflow-x: hidden; */
	/* width:100vw; */
	/* margin-right: calc(-1 * (100vw - 100%)); резервируем место под прокрутку справа */
}	

body {
    overflow-x: hidden; /* все, что не поместилось по горизонтали - обрезать */
	overflow-y: scroll; /* всегда показывать полосу прокрутки, чтобы не прыгало изображение при загрузке */

	max-width: 420px; /* 420px Mobile | none Desktop */
    min-height: 100%; /* чтобы сплеш-заставка занимала весь экран, а не подпрыгивала вверх */
	margin: 0px auto; /* центрировать по горизонтали */
	background: white;
    font-size: 12px; /* основной шрифт 12px */
	/* запрет выделения на странице .unselectable */
	/* -webkit-touch-callout: none; 	iOS Safari */
	/* -webkit-user-select: none;   	Chrome/Safari/Opera */
	/* -khtml-user-select: none;    	Konqueror */
	/* -moz-user-select: none;      	Firefox */
	/* -ms-user-select: none;			Internet Explorer/Edge */
	/* user-select: none;				Non-prefixed version, currently not supported by any browser */
}

ul, ol {
    list-style-type: none;
}


button, a {
	cursor: pointer;
}

main {
	display: block;
    margin-top: 56px; /* даем место для меню */
	min-height: calc(100vh - 56px);
	margin-left: auto;
    margin-right: auto;
	opacity: 1; /* 0  покажем только после загрузки видимого контента страницы */
	transition: opacity 0.5s linear;
}

footer {
	opacity: 1; /* 0 покажем только после загрузки видимого контента страницы */
	transition: opacity 0.5s linear;
}	

.waiting { /* spalsh-заставка "часики" */
    display: inline-block;
    width: 100%;
	height: 100px;
    margin: 60px auto; /* центрировать по горизонтали */
    padding: 0;
	background: url(../img/icons/waiting2.svg);
    background-repeat: no-repeat;
    background-position: center;
}	


/* задаем ширину стандартной секции и центрируем ее (т.к. не наследуется от body) */
.limit-width { 
	max-width: 420px; /* 420px Mobile | none Desktop */
	margin: 0px auto; padding: 0; right: 0; left: 0;
}

/* задаем ширину узкой секции и центрируем ее (т.к. не наследуется от body) */
.limit-width-860 {  
	max-width: 420px; /* 420px Mobile | 860px Desktop */
	margin: 0px auto; padding: 0; right: 0; left: 0;
}

/* задаем размеры основного контейнера и центрируем его */
.container { 
	max-width: 420px; /* 420px Mobile | 1366px Desktop */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* дополнительные ограничения для container (860px|920px|585px) */
.narrow { position: relative; margin: 1px auto; text-align: center; }


.visibility { /* предназначен для "проявления" элементов в момент до-скролливания до него */ 
	-webkit-transition: all 0.4s linear; 
	-moz-transition: all 0.4s linear; 
	-o-transition: all 0.4s linear; 
	transition: all 0.4s linear; 
	-webkit-transition-delay: 0.05s; 
	-moz-transition-delay: 0.05s; 
	-o-transition-delay: 0.05s; 
	transition-delay: 0.05s; 
    opacity: 1; /* отменяем для мобильных устройств */
}
.delay-01 { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } /* js-circles__item1 */
.delay-02 { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } /* js-visibility-other */
.delay-03 { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } /* js-circles__item2  js-circles__info1 */
.delay-04 { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } 
.delay-05 { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } /* js-circles__item3  js-circles__info2  js-visibility2*/
.delay-06 { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } 
.delay-07 { -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s; } /* js-circles__item4  js-circles__info3 */
.delay-08 { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } 
.delay-09 { -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } /* js-circles__item5  js-circles__info4 */
.delay-10 { -webkit-transition-delay: 1.0s; -moz-transition-delay: 1.0s; -o-transition-delay: 1.0s; transition-delay: 1.0s; } /* js-visibility3 */
.delay-11 { -webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } /* js-circles__item6  js-circles__info5 */
.delay-15 { -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; } /* js-visibility4 */
.delay-20 { -webkit-transition-delay: 2s;   -moz-transition-delay: 2s;   -o-transition-delay: 2s;   transition-delay: 2s; }   /* js-visibility5 */
.visibility.is-visible { opacity: 1; } /* команда на отображение */



.h, .h1, .h2, .h3, .h4, .h5, .h6, .h-sub { text-transform: uppercase; font-family: "Vida33Pro-Bold"; font-weight: normal; font-style: normal; }

.h { font-size: 36px; }
.h1, .h2 { font-size: 32px; }
.h3 { font-size: 28px; }
.h4 { font-size: 24px; }
.h5 { font-size: 18px; }
.h6 { font-family: "pfbeausanspro"; font-weight: normal; font-style: normal; font-size: 14px; }

.h-sub { font-family: "pfbeausanspro"; font-weight: normal; font-style: normal; font-size: 12px; line-height: 1.8; }
.h-lower { text-transform: none; }
.h-upper { text-transform: uppercase; }
.h-slim { font-family: "Vida31Pro"; font-weight: normal; font-style: normal; }

.h-blue { color: var(--secondary); }
.h-blue.h-dash:after { background: var(--secondary); }

.h-drop:before { display: block; margin: 20px auto; background: url('../img/pic/icons-all.png') 0 -759px no-repeat; width: 56px; height: 29px; content: ""; }
.h-drop:after { content: none; }

.h-drop_after:after { display: block; margin: 20px auto; background: url('../img/pic/icons-all.png') 0 -759px no-repeat; width: 56px; height: 29px; content: ""; }
.h-drop_after:before { content: none; }

.h-wave:after { display: block; margin: 20px auto; width: 270px; height: 6px; background: url(../img/pic/zig-w.png) repeat-x; content: ""; }

.h-dash:after { display: block; width: 145px; height: 2px; margin: 25px auto; content: ""; background: var(--primary); }

.h-dash_ltr { text-align: left; }
.h-dash_ltr:after { margin: 25px 0; }

.h-dash_wide { text-align: left; }
.h-dash_wide:after { margin: 25px auto; width: 100%; }

.h-logo { background-color: white; }
.h-logo:before { display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; content: ""; background-color: white; background: url('../img/pic/icons-all.png') 0 -482px no-repeat; width: 58px; height: 30px; }

.h-logo_grey:before { background: url('../img/pic/icons-all.png') 0 -553px no-repeat; width: 58px; height: 30px; }

.h-logo_white:before { background: url('../img/pic/icons-all.png') 0 -624px no-repeat; width: 58px; height: 30px; }


.link { /*декор гиперссылки <a> */
	color: var(--secondary); 
	text-decoration: none; 
	border-bottom: 2px solid transparent; 
	-webkit-transition: all 0.2s linear; 
	-moz-transition: all 0.2s linear; 
	-o-transition: all 0.2s linear; 
	transition: all 0.2s linear; 
	white-space: nowrap; 
}
.link:hover { color: var(--primary); text-decoration: none; border-bottom: 2px solid var(--primary); }

.link-btn { /* декор <button> в стиле гиперссылки */
	padding: 0 0 0 8px;
    color: var(--secondary);
	text-decoration: underline;
	background-color: transparent;
	font-size: 16px;
	cursor: pointer;
}
.link-btn:hover { color: var(--primary); }

.contactless {
	font-size: 16px;
	text-align: left;
    font-family: 'Vida31Pro';
}	
.contactless p { margin-bottom: 16px; }	
.contactless ul { font-size: 14px; margin-bottom: 16px; list-style-type: circle; }	
.contactless li { margin-left: 16px; }	


.zig { position: relative; padding-top: 20px; padding-bottom: 20px; margin-top: 12px; margin-bottom: 12px; }
.zig:before, .zig:after { position: absolute; left: 0; width: 100%; height: 6px; content: ""; background-repeat: repeat-x; }
.zig:before { top: -5px; }
.zig:after { bottom: -6px; }

.zig_lblue { margin-top: 6px; margin-bottom: 6px; }
.zig_lblue:before, .zig_lblue:after { background-image: url(../img/pic/zigzag.png); }

.zig_blue { background-color: var(--primary); color: white; margin-top: 6px; margin-bottom: 0px; }
.zig_blue:before, .zig_blue:after { height: 12px; background-image: url(../img/pic/zig-blue.png); }

.zig_white:before { top: -12px; }
.zig_white:after { bottom: -12px; }
.zig_white:before, .zig_white:after { height: 12px; background-image: url(../img/pic/bg-zig.png); }

.zig_white-sm:before, .zig_white-sm:after { background-image: url(../img/pic/zig-w.png); }

.zig_grey:before { top: -12px; }
.zig_grey:after { bottom: -12px; }
.zig_grey:before, .zig_grey:after { height: 12px; background-image: url(../img/pic/zig-grey.png); }

.zig_fill-grey { background-color: var(--lightgray); }
.zig_fill-grey:before { top: -6px; }
.zig_fill-grey:after { bottom: -6px; }
.zig_fill-grey:before, .zig_fill-grey:after { height: 12px; background-image: url(../img/pic/zig-lblue.png); }


.chevron { position: absolute; top: -27px; left: 50%; margin-left: -27px; width: 54px; height: 54px; background-color: var(--primary); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; content: ""; cursor: pointer; }
.chevron:before { position: absolute; background: url('../img/pic/icons-all.png') 0 -1294px no-repeat; width: 25px; height: 13px; top: 50%; margin-top: -6.5px; left: 50%; margin-left: -12.5px; content: ""; }


.backdrop { /* затеняемаая подложка под модальным окном */
  position: fixed;
  top: 0;
  bottom: 0;
  background: var(--background);
  opacity: 0; /* обеспечивает прозрачность подложки */
  z-index: 900; /* указывает, что подложка "подкладывется" под остальные элементы модального окна, но накрывает основное */
  pointer-events: none; /* запрещает сообщает событию мыши проходить "через" элемент и обращаться к элементу, находящемуся "под" ним */
}





/* Icon */

.icon { display: inline-block; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; } /* глобальный стиль иконок */
.icon14 { display: inline-block; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; } /* стиль футера */

/* пути к файлам иконок - нужно стремиться к тому, чтобы иконки загружались не из файлов, а функцией getSVG() - это сильно ускоряет загрузку страницы */
.icon-waiting { background-image: url(../img/icons/waiting.svg); }
.icon-call { background-image: url(../img/icons/call.svg); }
.icon-goods { background-image: url(../img/icons/goods.svg); }
.icon-cabinet { background-image: url(../img/icons/cabinet.svg); }
.icon-actions { background-image: url(../img/icons/actions.svg); }
.icon-order { background-image: url(../img/icons/order.svg); }
.icon-burger { background-image: url(../img/icons/burger.svg); }

.icon-home { background-image: url(../img/icons/home.svg); }
.icon-about { background-image: url(../img/icons/about.svg); }
.icon-delivery { background-image: url(../img/icons/delivery.svg); }
.icon-promo { background-image: url(../img/icons/promo.svg); }
.icon-ask { background-image: url(../img/icons/ask.svg); }
.icon-corporate { background-image: url(../img/icons/corporate.svg); }
.icon-quick { background-image: url(../img/icons/quick.svg); }
.icon-feedback { background-image: url(../img/icons/feedback.svg); }
.icon-addon { background-image: url(../img/icons/addon.svg); }
.icon-alter { background-image: url(../img/icons/alter.svg); }

.icon-city_phone { background-image: url(../img/contacts/city_phone.svg); }
.icon-lifecell { background-image: url(../img/contacts/lifecell.svg); }
.icon-kyivstar { background-image: url(../img/contacts/kyivstar.svg); }
.icon-mts { background-image: url(../img/contacts/vodafone.svg); }
.icon-skype { background-image: url(../img/contacts/skype.svg); }
.icon-viber { background-image: url(../img/contacts/viber.svg); }
.icon-telegram { background-image: url(../img/contacts/telegram.svg); }

.icon-facebook { background-image: url(../img/socials/facebook.svg); }
.icon-instagram { background-image: url(../img/socials/instagram.svg); }
.icon-youtube { background-image: url(../img/socials/youtube.svg); }

.icon-address { background-image: url(../img/icons/address.svg); }
.icon-user{ background-image: url(../img/icons/user.svg); }
.icon-bottle{ background-image: url(../img/icons/bottle.svg); }
.icon-question{ background-image: url(../img/icons/question.svg); }
.icon-cabinet { background-image: url(../img/icons/cabinet.svg); }
.icon-account { background-image: url(../img/icons/account.svg); }
.icon-calendar{ background-image: url(../img/icons/calendar.svg); }
.icon-week{ background-image: url(../img/icons/week.svg); }
.icon-clock{ background-image: url(../img/icons/clock.svg); }
.icon-info{ background-image: url(../img/icons/info.svg); cursor: pointer;}

.icon-del { background-image: url(../img/icons/del.svg); }
.icon-down { background-image: url(../img/icons/down.svg); }
.icon-more { background-image: url(../img/icons/more.svg); }


/* Button */
.btn {
    display: block;
    width: 100%;
    padding: 7px 24px;
	font-family: "pfbeausanspro";
    font-size: 11px;
    line-height: 12px;
    color: var(--secondary);  /* white; */
    border: 2px solid var(--secondary);
    white-space: nowrap; /* запретим перенос */
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background-image: none;
    background-color: transparent;
    cursor: pointer;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.btn:hover { color: white; background-color: var(--secondary); }

.btn-fill { color: white; border-color: var(--secondary); background-color: var(--secondary); }
.btn-fill:hover { background-color: var(--cabinet); border-color: var(--cabinet); }

.btn-fill_light { color: white; border-color: #00abe4; background-color: #00abe4; }
.btn-fill_light:hover { color: #003671; border-color: white; background-color: white; }

.btn-white { color: white; border-color: white; }
.btn-white:hover { color: var(--primary); background-color: white; }

.btn-dark { color: var(--primary); border-color: var(--primary); }
.btn-dark:hover { color: white; background-color: var(--primary); }

.btn-center { max-width: 350px; margin: 0 auto; }

.play-btn { position: relative; cursor: pointer; display: block; width: 112px; height: 112px; line-height: 112px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-left: auto; margin-right: auto; border: 2px solid white; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.play-btn:hover { background: white; }
.play-btn:hover span { border-width: 17px 0 17px 22px; border-color: transparent transparent transparent var(--primary); }
.play-btn span { display: inline-block; vertical-align: middle; line-height: 1; margin-top: -11px; margin-left: 7px; width: 0px; height: 0px; border-style: solid; border-width: 21px 0 21px 28px; border-color: transparent transparent transparent white; }

.play-btn_blue { background: #003671; border: 2px solid #003671; }


/* =====  стили Хедера десктопа =====  */

.header__desc {
	display: none; /* none Mobile | block Desktop */
    margin: 0px auto; /* центрировать по горизонтали */
    padding: 0;
    width: inherit; /* наследует значение родителя */
	position: fixed; /* нельзя переносить в .header */
    color: white;
    background-color: var(--primary);
    top: 0;
    right: 0;
    left: 0;
	z-index: 500; /* перекрывать любой контент, кроме модального */
}

.header__container {
    position: relative;
    display: flex; 
    align-items: center;
}

.header__logo {
    height: 56px;
	width: 56px;
    margin-right: auto;
	background-image: url(../img/logo-inv.svg);
	background-repeat: no-repeat;
    background-position: center;
    background-size: 94%;
}

/* Cart */
.cartdrop {
    position: relative;
}

.cart__dropdown {
    position: absolute;
    top: 100%;
	margin-top: 0px;
    left: -125px;
    width: 300px;
    padding: 20px 24px;
    font-size: 12px;
    background-color: var(--primary);
    border: 1px solid var(--secondary);
    z-index: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.cartdrop:hover .cart__dropdown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: initial;
}

.cart__list {
	padding-bottom: 8px;
}
.cart__list li {
	display: flex; 
	flex-wrap: nowrap;
	justify-content: space-between;
    align-items: flex-start;
	padding-bottom: 12px;
}	
.cart__list li span {
	min-width: 50px;
}	
.cart__list li div {
	width: 100%;
	white-space: wrap;
	color: white;
	cursor: pointer;
}	
.cart__list li div:hover { 
	color: var(--secondary);
}


.cart__numgoods {
    position: absolute;
    top: 100%;
    margin-top: -35px;
    right: 0px;
    margin-right: -7px;
    padding: 0px 4px;
    background-color: white;
    font-family: "Vida33Pro";
    font-size: 8px;
    color: red;
    border: 2px solid red;
    border-radius: 8px;
    z-index: 600;
}

.cart__numgoods2 {
    position: absolute;
	margin-top: -6px;
    margin-left: 34px;
    padding: 0px 4px;
    background-color: white;
    font-family: "Vida33Pro";
    font-size: 8px;
    color: red;
    border: 2px solid red;
    border-radius: 8px;
    z-index: 600;
}


/* Phones */

.phones {
    position: relative;
}

.phones__main {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 30px 8px 8px;
    font-size: 28px;
    line-height: 13px;
    white-space: nowrap;
    color: white;
    text-decoration: none;
}

.phones__main:hover {
    color: var(--secondary);
}

.phones__dropdown {
    position: absolute;
    top: 100%;
    left: 0px;
    width: 250px;
    padding: 20px 24px;
    font-size: 12px;
    background-color: var(--primary);
    border: 1px solid var(--secondary);
    z-index: 600;

    opacity: 0;
    pointer-events: none;

    transition: opacity .2s ease;
}

.phones:hover .phones__dropdown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: initial;
}

.phones__list {
    margin-bottom: 12px;
}

.phones__item {
  display: flex;
  margin: 0px;
  padding: 0px;
  clear: both;
  line-height: 1.5;
  align-items: center;
  color: white;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;	
}
.phones__item:focus,
.phones__item:hover {
    color: var(--secondary);
}

.phones__link {
  display: flex;
  margin: 0px; 
  padding: 0px;
  align-items: center;
  clear: both;  
  width: 100%; 
  height: 30px; 
  gap: 20px;
}

.phones__icon {
  display: flex;
  margin: 0px; 
  padding: 0px;
  align-items: center;
  clear: both;  
  height: 20px; 
}

.phones__text {
	display: inline-block;
	vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.working-hours {
    margin-top: 12px;
    text-align: left;
	background-color: var(--primary);
	color: white;
}

/* Actions */

.header__actions {
    display: flex;
    gap: 16px;
    margin-right: 70px;
}

.hamburger {
    position: relative;
    display: flex;
    align-items: center;
    width: 38px;
    height: 30px;
    background-color: transparent;
    cursor: pointer;
}

.hamburger__line {
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: var(--secondary);

    transition-property: opacity, transform;
    transition-duration: .2s;
    transition-timing-function: ease;
}

.hamburger__line:nth-child(1) {
    top: 0;
}

.hamburger:hover .hamburger__line:nth-child(2) {
    transform: translate3d(5px, 0, 0);
}

.hamburger__line:nth-child(3) {
    bottom: 0;
}

/* Hamburger - Active */

.hamburger--active .hamburger__line:nth-child(1) {
    transform: translate3d(0, 12px, 0) rotate3d(0, 0, 1, -45deg);
}

.hamburger--active .hamburger__line:nth-child(2) {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
}

.hamburger--active .hamburger__line:nth-child(3) {
    transform: translate3d(0, -12px, 0) rotate3d(0, 0, 1, 45deg);
}



/* =====  стили Хедера мобайла =====  */

.header__mob {
	display: flex; /* flex Mobile | none Desktop */
    margin: 0px auto; /* центрировать по горизонтали */
    padding: 0;
	max-width: 420px;
    width: inherit; /* наследует значение родителя */
	position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 500;  /* перекрывать любой контент, кроме модального */

    background-color: var(--primary);
    flex-wrap: wrap;
    justify-content: space-between;
	align-items:center;
}	

.navbar {
	margin: 0;
    padding: 10px 16px;
    box-shadow: 0 4px 8px rgb(72 72 72 / 20%);
    position: relative;
    z-index: 501; /* перекрывать любой контент, кроме модального */
	display: flex; /* выстраивает все дочерние элементы в ряд */
	flex-direction:column;
	flex-flow: row nowrap;
	list-style:none;
	justify-content: space-between;
	max-width: inherit;
    width: 100%;
	justify-content: space-between;
}

.navitem {
    display: inline-block;
    border: 2px solid white;
    width: 35px;
    height: 35px;
	border-radius: 50%;	
    background-repeat: no-repeat;
    background-position: center;
	background-size: 65% 65%;
	cursor: pointer;
}

.nav-link {
    outline: 0;
	padding: 15px;
}



/* Стили панели Хлебных крошек ========================================================================== */

.navi {
	display: block;
	position: fixed;
    width: inherit;
    color: white;
    background-color:  var(--lightgray);
	margin-top: 56px; /* отступим сверху */
	top: 0;
	z-index: 400;
	transition: top 0.3s;
}

.navi__container {
    position: relative;
    display: flex; 
    align-items: center;
	justify-content: center; /* center Mobile | normal Desktop */
}

.navi__actions {
    display: flex;
	padding: 4px 0px;
	gap: 20px; 
}

.navi-btn {
    display: block;
    width: 100%;
    padding: 9px 16px;
	font-family: "pfbeausanspro";
    font-size: 12px;
    line-height: 12px;
    color: black;
    border: 0px;
    white-space: nowrap; /* запретим перенос */
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background-image: none;
    background-color: transparent;
    cursor: pointer;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.navi-btn:hover {
    color: var(--secondary);
    background-color: white;
}

.corporate {
    margin-left: 24px;
}

.notice {
	display: none; /* показываем только при необходимости */
	position: fixed;
    width: inherit;
	background-color: var(--notice);
	color: white;
	font-family: 'Vida31Pro';
    font-weight: bold;
	margin-top: 94px; /* отступим сверху */
	top: 0;
    z-index: 300;
	transition: top 0.3s ease-in-out;
}

.notice__container {
    position: relative;
    display: flex; 
    padding: 0 0 0 20px;
	flex-wrap: nowrap;
	justify-content: space-between;
    align-items: start;
}

.notice__close {
	float: right;
    margin: 4px 4px 4px 20px;
	cursor: pointer;
}	

.breadcrumbs {
	display: flex;
	gap: 6px; 
	font-family: "Vida31Pro";
    font-size: 12px;
    line-height: 38px;
    color: black;
    white-space: nowrap; /* запретим перенос */
	align-items: center;
	overflow: hidden;
}	
.breadcrumbs li { cursor: pointer; }
.breadcrumbs span { border-bottom: 1px solid black; }    
.breadcrumbs span:hover { color: var(--secondary); border-bottom: 1px solid var(--secondary); }
.breadcrumbs div { color: black; } /* var(--secondary); */
	
	
/* Стили бокового Меню ========================================================================== */

.menu__content { /* контент меню - "вылетаем" справа налево */
  position: relative;	
  width: 320px; /* устанавливаем фиксированную ширину, дабы упростить "вылет справа" */
  min-height: 100%; /* разворачиваем на всю высоту экрана */
  font-family: "pfbeausanspro"; 
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  background-color: white; /* фон */
  right: calc(-100%); /* прячем справа */
  transition: right 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.menu__show .backdrop,
.menu__show .menu__content { /* показывает "подложку" модального окна */
  opacity: 1;
  z-index: 1000; /* перекрывать любой контент! */
  pointer-events: auto; /* обеспечивает закрытие модального окна при клике за его пределами */
  overflow-y: auto;
}

.menu__show .menu__content { /* обеспечивает "вылет" модального окна справа налево */
  right: calc(320px - 100%); /* вылетаем справа налево */
}

.menu__header {
  display: flex; /* выстраивает все дочерние элементы в ряд */
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  background-color: var(--primary);
  color: white;	
}

.menu__logo {
    height: 56px;
	width: 56px;
	margin-left: 10px;
    margin-right: auto;
	background-image: url(../img/logo-inv.svg);
	background-repeat: no-repeat;
    background-position: center;
    background-size: 94%;
}

.menu__lang {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  line-height: 1.5;
  color: var(--secondary);
}

.menu__lang:focus,
.menu__lang:hover {
  color: white;
  cursor: pointer; 
}

.menu__lang_on {
  text-decoration: underline;
  color: white;
}

.menu__btn-close {
  margin-left: auto;	
  width: 44px;
  height: 44px;
  opacity: 1;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../img/icons/close.svg);
  background-repeat: no-repeat;
  background-position: center;
 }

.menu__btn-close:focus,
.menu__btn-close:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}

.menu__body {
  padding: 0;
}

.menu__item {
	display: flex;
    clear: both;
	align-items: center;
    padding: 8px;
	text-decoration: none;
    white-space: nowrap;
    border: 0;	
	border-top: 1px solid var(--beyond);
}
	
.menu__item:focus,
.menu__item:hover {
    background-color: var(--lightgray);
}
	
.menu__text {
	display: inline-block;
	margin-left: 16px;
	width: 260px; /* чтобы ссылка была пошире */
	vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
	cursor: pointer;
}

.sub-menu {
  position: relative;
  display: grid;
  overflow: hidden;
  line-height: 0;
  color: transparent;
  transition: line-height 0.3s, color 0.3s;	
}

.expanded { /* развернуть/свернуть sub-menu*/
	line-height: 2.5;
	color: var(--primary);
}
	
.sub-menu__item {
	overflow: hidden;
	text-transform: none;
}

.sub-menu__text {
	display: block;
	padding-left: 50px;
	padding-right: 6px;
	padding-top: 0px; /* 0.5lh; установить отступ пропрционально line-height - не работает на старых браузерах */
	padding-bottom: 0px;
    text-overflow: ellipsis;
	text-decoration: none;
}

.sub-menu__text:hover,
.sub-menu__text:focus-visible {
  background-color: var(--lightgray);
}



/* Стили Модального окна ========================================================================== */

.modal__content {  /* контент меню - "вылетаем" сверху вниз */
  position: relative;
  width: calc(100% - 16px);
  max-width: 400px;
  margin: 10px auto; /* центрируем по горизонтали */ 
  font-family: "pfbeausanspro"; 
  font-size: 13px;
  font-weight: normal;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  background-color: white; /* фон */
  border-radius: 4px;

  top: calc(0px - 100%); /* прячем сверху */
  /* transition: top 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
  transition: top 0.3s ease-in-out;
}
 
.modal__show .backdrop,
.modal__show .modal__content { /* показывает "подложку" модального окна */
  opacity: 1;
  z-index: 1000; /* перекрывать любой контент! */
  pointer-events: auto; /* обеспечивает закрытие модального окна при клике за его пределами */
  overflow-y: auto;
}

.modal__show .modal__content { /* обеспечивает "вылет" модального окна сверху вниз */
   top: 0px;
}

.modal__hiding .modal__content { 
   /* top: calc(0px - 100%); прячем сверху */
}

.modal__header {
  display: flex; /* выстраивает все дочерние элементы в ряд */
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  background-color: var(--secondary);
  color: white;	
}

.modal__title {
  margin: 0 auto;
  padding: 0 0 0 20px;
  text-align: center;
  line-height: 1.5;
  text-transform: uppercase;
  color: white;
  font-size: 16px;
}

.modal__margin {
  padding: 18px 18px 0px 18px;	
  width: 100%;
}	

.modal__menu {
	padding: 18px 18px 0px 18px;	
	width: 100%;
    font-family: 'Vida33Pro';
    font-size: 16px;
}	

.modal__menu li {
	padding: 6px;
    border-bottom: 1px solid #dddddd;
}
.modal__menu li:first-child {
	border-top: 1px solid #dddddd;
}	
.modal__menu li:hover {
    box-shadow: 0 4px 37px 3px rgba(0, 0, 0, 0.15);
}
.modal__menu li a{
	display: block; 
	cursor: pointer;	
}

.modal__img {
	margin: 0px auto;
	width:  200px;
	min-width: 200px;
	height:  200px;
	min-width: 200px;
	text-align: center;
}	
.modal__img img{
	max-width: 200px;
	max-height: 200px;
}	

.modal__price {
  padding: 18px 18px 0 18px;
  display: flex; /* выстраивает все дочерние элементы в ряд */
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-family: 'Vida33Pro';
  font-size: 18px;
}

.modal__input {
  display: flex; /* выстраивает все дочерние элементы в ряд */
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
  font-family: 'Vida33Pro';
  font-size: 18px;
}

.modal__cart {
	padding-right: 20px;
	margin-bottom: -6px;
}	

.modal__num_l {
	border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 36px;
    height: 36px;
	cursor: pointer;
	color: #fff;
    background-color: #00abe5;
    border-color: #00abe5;
	text-align: center;
    line-height: 1.9;
}	

.modal__num_r {
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
	border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 36px;
    height: 36px;
	cursor: pointer;
	color: #fff;
    background-color: #00abe5;
    border-color: #00abe5;
	text-align: center;
    line-height: 1.9;
}	

.modal__num {
	border-radius: 0;
	height: 36px;
    width: 50px;
	color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #00abe5;
	text-align: center;
}	

.contacts-title {
  margin: 0 auto;
  padding-left: 20px;
  text-align: center;
  line-height: 1.5;
  font-size: 16px;
  color: white;
}

.contacts-day {
	text-align: left;
    padding-left: 40px;
	font-size: 13px;
}	

.contacts-time {
	text-align: left;
    padding-left: 12px;
	font-size: 13px;
}	

.modal__btn-close {
  width: 44px;
  height: 44px;
  opacity: 1;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../img/icons/close.svg);
  background-repeat: no-repeat;
  background-position: center;
 }

.modal__btn-close:focus,
.modal__btn-close:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}

.modal__body { padding: 0; }

.modal__footer { padding: 0; }

.modal__list {
  padding-top: 12px;
}

.modal__item {
  display: flex;
  margin: 0px;
  padding: 0px;
  clear: both;
  line-height: 2.5;
  align-items: center;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;	
  border-bottom: 1px solid var(--beyond);
}
	
.modal__item:focus,
.modal__item:hover {
    background-color: var(--lightgray);
}

.modal__link {
  display: flex;
  align-items: center;
  clear: both;  
  margin: 0px; 
  width: 100%; 
  height: 40px; 
  gap: 20px;
  padding: 0 0 0 40px;
}

.modal__icon {
  display: inline-block;
  vertical-align: middle;
  height: 24px; 
}

.modal__text {
	display: inline-block;
	vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.modal__btn {  /* белый текст на голубом фоне */
	display: block;
	width: 100%;
	max-width: inherit; /* наследует значение родителя */
    margin: 0px auto; /* центрировать по горизонтали */
    padding: 8px 12px;
	border: 0px solid transparent;
    border-color: white;
    font-size: 16px;
	text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    border-radius: 0;
    background-color: var(--secondary);
	color: white;
}	

.modal__btn:hover {
    background-color: var(--cabinet);
}	

.btn-send { /* кнопка "Отправить" в модальном окне */
	display: block;
	padding: 8px;
	margin-bottom: 16px;
	width: 100%;
	border: 1px solid var(--secondary);
	background-color: var(--secondary); 
	color: white; 
    font-size: 18px;
	cursor: pointer;
	transition: all 0.2s linear;
}
.btn-send:hover { border-color: var(--primary); background-color: var(--primary); }	

.btn-cansel { /* кнопка "Отменить" в модальном окне */
	display: block;
	padding: 8px;
	margin-bottom: 16px;
	width: 100%;
	border: 1px solid var(--secondary);
	background-color: white;
	color: var(--secondary);  
    font-size: 18px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s linear;
}
.btn-cansel:hover { border-color: var(--primary); color: var(--primary); }	


.btn-green { color: var(--green); border-color: var(--green); }
.btn-green:hover { color: white; background-color: var(--primary); }

.btn-grey { border-color:  var(--lightgray); background-color: var(--lightgray); color: var(--secondary); }
.btn-grey:hover { border-color: var(--primary); background-color: var(--primary); color: white; }

.btn-red { color: var(--red); border-color: var(--red); }
.btn-red:hover { color: white; background-color: var(--primary); }


.modal__table  { /* имя вводимого реквизита */
	padding: 18px 18px 0px 18px ;
	font-size: 16px;
}

.td-left  { /* имя вводимого реквизита */
	padding: 13px 16px 0 0;
	text-align: left;
	vertical-align: top; 
	color: var(--fontcolor);  
}

.td-right  { /* значение вводимого реквизита */
	padding: 8px 0 0 0;
	width: 100%;
	text-align: left;
}

.modal__descr {
	font-size: 14px;
    padding-bottom: 30px;
}	


/* Стили окна ALTALERT ========================================================================== */

.altalert__content {  /* контент altalert - "вылетаем" сверху вниз */
  position: relative;
  width: calc(100% - 16px);
  max-width: 400px;
  margin: 10px auto; /* центрируем по горизонтали */ 
  font-family: "pfbeausanspro"; 
  font-size: 13px;
  font-weight: normal;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  background-color: white; /* фон */
  border-radius: 4px;

  top: calc(0px - 100%); /* прячем сверху */
  /* transition: top 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
  transition: top 0.3s ease-in-out;
}
 
.altalert__show .backdrop,
.altalert__show .altalert__content { /* показывает "подложку" altalert окна */
  opacity: 1;
  z-index: 2000; /* перекрывать сверх-любой контент! */
  pointer-events: auto; /* обеспечивает закрытие модального окна при клике за его пределами */
  overflow-y: auto;
}

.altalert__show .altalert__content { /* обеспечивает "вылет" модального окна сверху вниз */
   top: 0px;
}

.altalert__hiding .altalert__content { 
   /* top: calc(0px - 100%); прячем сверху */
}

.altalert__header {
  display: flex; /* выстраивает все дочерние элементы в ряд */
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  background-color: var(--primary);
  color: white;	
}

.altalert__title {
  margin: 0 auto;
  padding: 0 0 0 20px;
  text-align: center;
  line-height: 1.5;
  text-transform: uppercase;
  color: white;
  font-size: 16px;
  overflow-wrap: break-word;
}

.altalert__margin {
  padding: 18px 18px 0px 18px;	
  width: 100%;
}	


.altalert__btn-close {
  width: 44px;
  height: 44px;
  opacity: 1;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../img/icons/close.svg);
  background-repeat: no-repeat;
  background-position: center;
 }

.altalert__btn-close:focus,
.altalert__btn-close:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}

.altalert__body {
	padding: 20px 20px 40px 20px;
    text-align: center;
    font-size: 16px;
    font-family: 'Vida33Pro';
	overflow-wrap: break-word;
}

.altalert__footer {
	padding: 0 20px 40px 20px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	gap: 20px;
	align-items: stretch;
}


/* Стили формы ввода ========================================================================== */

.form__table { /* несколько колонок на десктопе или одна на мобилке */
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
    font-family: 'Vida33Pro';
	font-size: 16px;
    font-weight: normal;
    font-style: normal;
	text-align: left;
}	
.form__column { width: 100%; } /* 100% на мобилке и 47% на десктопе */

.form__vertical { /* серый вертикальный разделитель между колонками */
	width: 1px;
	border-left: 1px solid var(--background);
}	

.form__gorizontal { /* серый горизонтальный разделитель между блоками */
	margin-top: 20px;
	height: 1px;
	border-top: 1px solid var(--background);
	width: 100%;
}	

.form__text { /* сопроводительный текст */
	font-size: 14px;
}	

.form__comment { /* текст мелких примечаний */
	font-family: 'Vida33Pro';
	font-size: 12px;
}	

.form__row { /* блок из двух горизонтальных элементов */
	display: flex; 
	justify-content: space-between;
	flex-wrap: nowrap; 
    align-items: flex-start;
	gap: 20px;
}	

.form__block { /* два блока по вертикали: form__item + input-error */
    width: 100%;
}

.form__item { /* элемент ввода (название реквизита + поле ввода) */
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.hide-conf { opacity: 0; } /* команда на скрытие form__item */
.visible-conf { opacity: 1; } /* команда на отображение form__item */

.form__icon { /* иконка слева от названия реквизита */
	margin: 13px 8px 0 0;
	min-width: 24px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.form__after { /* иконка справа от названия реквизита */
	margin: 13px 0 0 8px;
	min-width: 24px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.form__name { /* название реквизита (максимизированное по ширине) */
	padding: 13px 16px 0 0;
    text-align: left;
    vertical-align: top;
    color: var(--primary);
	white-space: nowrap;
	width: 100%;
	overflow-x: hidden;	
}

.form__name-min { /* название реквизита (минимизированное по ширине) */
	padding: 13px 16px 0 0;
    text-align: left;
    vertical-align: top;
    color: var(--primary);
	white-space: nowrap;
}

.form__input { /* обрамление поля ввода (оптимизируется по ширине) */
	padding: 8px 0 0 0;
	text-align: left;
	width: 100%;
}
.minw-140 { min-width: 140px; } /* ограничить минимальный размер */
.minw-100 { min-width: 100px; } /* ограничить минимальный размер */

.form__act { /* кнопка справа внутри поля ввода */
	position: absolute;
    display: inline-block;
    margin-top: 5px;
    margin-left: -34px;
    min-width: 24px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
	cursor: pointer;
}

.input-str { /* поле ввода для одной строки */
	width: 100%;
	padding: 5px 8px;
	overflow: visible;	
	overflow-x: auto;
	overflow-y: auto;
	font-size: 16px;
    background-clip: padding-box;
    border: 1px solid var(--primary);
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}	
.input-str::placeholder {  color: var(--blue); }
.input-str:active { border-color: var(--blue); box-shadow: var(--shadow); }
.input-str:active::placeholder { color: transparent; }
.input-str:focus { border-color: var(--blue); box-shadow: var(--shadow); }
.input-str:focus::placeholder { color: transparent; }

.input-txt {
	width: 100%;
    margin: 0;
	resize: none;
	padding: 5px 8px;
	font-size: 16px;
    background-clip: padding-box;
    border: 1px solid var(--primary);
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}	
.input-txt::placeholder { color: var(--blue); }
.input-txt:active { border-color: var(--blue); box-shadow: var(--shadow); }
.input-txt:active::placeholder { color: transparent; }
.input-txt:focus { border-color: var(--blue); box-shadow: var(--shadow); }
.input-txt:focus::placeholder { color: transparent; }


.input-error { /* подсказака под полем ввода */
  font-family: "Vida33Pro";
  font-size: 10px;
  min-height: 16px;
  text-align: right;
  text-decoration: none;
  color: var(--red);
  outline: none;
}

.form__ok { /* кнопка ОК справа от form__item */
	margin: 8px 0 0 0; 
	padding: 5px 0px;
	width: 45px;
    font-size: 16px;
	text-align: center;
    background-clip: padding-box;
    border: 1px solid var(--primary);
    border-radius: 4px;
    transition: all .15s ease-in-out;
	cursor: pointer;
}

.form__ok:hover {
    background-color: var(--primary);
    color: white;
}

/* Стили футера ========================================================================== */

.footer__desc {
	display: none;
    margin: 0px auto; /* центрировать по горизонтали */
    padding: 0;
    width: inherit; /* наследует значение родителя */
	font-family: "pfbeausanspro";
    color: white;
    background-color: var(--primary);
    right: 0;
    left: 0;
	z-index: 500; /* перекрывать любой контент, кроме модального */
}

.footer__container {
	display: flex; /* выстраивает все дочерние элементы в ряд */
    padding-top: 45px;
    padding-bottom: 55px;
    color: white;
    background-color: var(--primary);
}

.footer__logo {
    height: 56px;
	width: 56px;
    margin-left: 20px;
    margin-right: 20px;
	background-image: url(../img/logo-inv.svg);
	background-repeat: no-repeat;
    background-position: center;
    background-size: 94%;
}

.footer__content {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;
}

.footer__column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 35px;
	flex-basis: 0; 
	width: auto;
}
.footer__column:nth-child(1), .footer__column:nth-child(4) { 
	flex-grow: 0; /* колонку с логотипом не растягивать при изменении размеров окна */
	width: auto; 
}

.footer__group { /* группа ссылок */  
	margin-bottom: 8px;
}

.footer__list { /* заголовок группы ссылок */
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.footer__link { /* ссылка в группе ссылок */
	font-family: "Vida31Pro";
    padding-left: 12px;
	padding-top: 0px;
    white-space: nowrap;
}
.footer__link:hover {
    color: var(--secondary);
}

.footer__item { /* одиночная ссылка */
    font-weight: bold;
    text-transform: uppercase;
	cursor: pointer;
    white-space: nowrap;
}
.footer__item:hover {
    color: var(--secondary);
}

.phones__title {
	font-family: "Vida31Pro";
}

.footer__phones {
	height: 24px;
	font-family: "Vida33Pro";
}

.socials {
    display: flex;
    align-items: center;
    gap: 24px;
	margin-bottom: 20px;
}

.socials__link {
	display: inline-block;
	width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.quality-control__certificates {
    display: flex;
    align-items: center;
    gap: 16px;
	margin-bottom: 20px;
}
.quality-control__certificates img { height: 36px; }

.footer__bottom {
    padding: 12px 0 16px 0;
    background-color: var(--secondary);
	font-size: 13px;
	font-family: "Vida31Pro";
    color: black;
}

.footer__bottom-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
	
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.footer__bottom-message {
	color: white;
}	


/* Общие стили раздела MAIN ========================================================================== */
	
.header__slogan {
	margin-top: 66px; /* 66px mobile | 200px desktop*/
	margin-left: 0px;  /* 0px mobile | 50px desktop*/
	max-width: 430px;
	float: none;  /* none mobile | left desktop*/
	font-family: "pfbeausanspro";
    font-size: 13px;
	color: var(--primary);
	text-align: center; 
	text-transform: uppercase; 
	margin-bottom: 1.5em;
}	

.header__slogan h1 { 
	font-size: 24px;  /* 24px mobile | 34px desktop*/
	font-family: "Vida31Pro";
	text-transform: none;
	font-weight: normal;
    font-style: normal;
	}

.header__slogan .h1 { 
	font-size: 24px;  /* 24px mobile | 34px desktop*/
	font-family: "Vida31Pro";
	text-transform: none;
	font-weight: normal;
    font-style: normal;
	}


.h-drop:before { 
	display: block; 
	margin: 10px auto; 
	background: url('../img/pic/drop_r.png'); 
    background-color: transparent;
    background-repeat: no-repeat;
	width: 56px;
	height: 29px; 
	content: ""; 
	}
.h-drop:after { content: none; }


.testing { position: relative; border-top: 2px solid var(--primary); background: url(../img/home/testing-bg.webp) no-repeat; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
.testing .testing-bg { display: none; position: absolute; bottom: -5px; left: 50%; margin-left: -195px; }
.testing .testing__main { position: relative; text-transform: uppercase; font-size: 11px; padding-top: 65px; padding-bottom: 20px; z-index: 1; width: 100%; text-align: center; }
.testing .testing__main p { margin-bottom: 1em; }
.testing .testing__lead { margin: 25px 0; padding: 5px 0; font-size: 12px; text-transform: uppercase; font-family: "pfbeausanspro"; font-weight: normal; font-style: normal; }
.testing .testing__lead h3 { margin-bottom: 0.3em; }
.testing .testing__lead p { margin-bottom: 0; }
.testing .testing__corporate { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: 370px; background-color: var(--primary); padding: 0 45px; color: white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.testing .testing__corporate-content { position: absolute; bottom: 0; left: 45px; width: 280px; margin-bottom: 40px; }
.testing .testing__corporate-content p { font-family: "Vida31Pro"; font-weight: normal; font-style: normal; font-size: 14px; margin-bottom: 1em; }
.testing .testing__corporate-title { margin-bottom: 1em; }
.testing .btn-lg { padding: 17px 0; line-height: 20px; width: 100%; font-size: 16px; }


.testing-alt { position: relative; background: #003671; color: white; text-align: center; padding-top: 40px; padding-bottom: 40px; font-size: 14px; min-height: 350px; }
.testing-alt p { font-family: "Vida31Pro"; font-weight: normal; font-style: normal; margin-bottom: 2em; }
.testing-alt:after { content: none; }
.testing-alt .h-sub { margin-bottom: 1em; }

.testing-alt .testing-alt__corporate-btn { position: absolute; right: 0px; bottom: 50%; margin-bottom: -125px; right: -180px; -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=$m11, M12=$m12,M21=$m21, M22=$m22, sizingMethod='auto expand'); zoom: 1; width: 250px; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; }

.testing-alt .left-alt__corporate-btn { position: absolute; bottom: 50%; margin-bottom: -125px; left: 40px; -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=$ m11, M12=$ m12, M21=$ m21, M22=$ m22, sizingMethod='auto expand'); zoom: 1; width: 250px; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; }

.testing-alt .btn-lg { padding: 17px 0; width: 320px; font-size: 18px; line-height: 20px; }

	
/* стандартная темная шапка страницы */	
.start__header { background: white; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; text-align: center; overflow: hidden; color: white; }
.start__title { margin-top: 66px; }
.start__text { font-size: 12px; text-transform: uppercase; font-family: "pfbeausanspro"; font-weight: normal; font-style: normal; line-height: 1.6; line-height: 1.8; margin: 0 auto 20px auto; max-width: 860px; }
.start__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; align-items: center; font-size: 0; padding-bottom: 20px; }
.start__menu li { font-size: 12px; text-transform: uppercase; white-space: nowrap; color: white; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; }
.start__menu li a { color: white; border-bottom: 2px solid white; padding-bottom: 8px; text-decoration: none; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; }
.start__menu li:hover { color: #00abe4; }
.start__menu li:hover a { color: #00abe4; padding-bottom: 6px; border-bottom: 4px solid #00abe4; }
	

/* стандартная панель поиска */	
.search__panel { margin: 0px 0px 18px 0px; max-height:305px; overflow-x: hidden; overflow-y: auto; }
.search__table { position: relative; text-align: left; font-size: 14px; font-family: "Vida31Pro"; }
.search__item { padding: 6px 6px 6px 12px; border: 1px solid var(--blue); cursor: pointer; white-space: nowrap; }
.search__item:hover { background: var(--blue); }
.search__result { height:200px; }	
.search__comment { padding: 12px 20px; text-align: center; font-size: 14px; font-family: "Vida31Pro"; }
.search__end { padding: 0px 20px 30px 20px; } 


.address__item {
	padding: 20px 14px 0 20px;
	display: flex; 
	flex-wrap: nowrap;
	justify-content: flex-start;
    align-items: center;
	width: 100%;
}	

.address__name {
	line-height: 1.5;
	font-family: "pfbeausanspro";
	font-size: 16px;
	text-align: left;
	white-space: normal;
	text-transform: none;
}	

.address__edit {
	width: 34px;
    height: 34px;
    background: url(../img/icons/del_d.svg) no-repeat;
    background-position-x: right;
    background-position-y: center;
    cursor: pointer;
}	
.address__edit:hover{
    background: url(../img/icons/del_b.svg) no-repeat;
    background-position-x: right;
    background-position-y: center;
}	
.address__add {
	padding: 30px 45px 40px 20px;
}

.goods_cart {
	display: inline-flex;
	font-family: 'Vida33Pro';
    font-size: 14px;
    align-items: center;
	min-width: 56px;
    color: red;
}	


.h-left { text-align: left; }
.h-right { text-align: right; }
.h-center { text-align: center; }
.h-wrap { white-space: normal; }
.h-nowrap { white-space: nowrap; }
.h-padding { padding-left: 12px; padding-right: 12px; border-radius: 8px; }
.h-line { font-size: 12px; text-transform: uppercase; font-family: "pfbeausanspro"; font-weight: normal; font-style: normal; font-size: 18px; }
.h-line:after { display: block; width: 145px; height: 2px; content: ""; margin: 2em auto; background: #003671; }
.h-line_left { text-align: left; }
.h-line_left:after { display: block; width: 145px; height: 2px; content: ""; margin: 1em 0 2em 0; background: #003671; }
.h-red { color: red; }

.article-list { display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
	gap: 30px;	
}
.article-list__item { margin-top: 40px; max-width: 300px; font-size: 14px; }
.article-list__item figure { margin-bottom: 25px; }
.article-list__item figure img { display: block; max-width: 100%; }
.article-list__item ul { list-style-type: square; }
.article-list__item ol { list-style-type: decimal; }
.article-list__content { text-align: left; font-size: 14px; color: #003671; font-family: "Vida31Pro"; font-weight: normal; font-style: normal; line-height: 1.6; }

.watch-about { background: url(../img/pic/zig-blue.png) 0 50% repeat-x; }
.watch-about__inner { text-align: center; }
.watch-about__inner .play-btn { display: inline-block; margin: 0 11px; }
.watch-about__title { display: inline-block; vertical-align: top; text-transform: uppercase; padding-top: 12px; width: 80px;}

.end_page { /* окончание раздела MAIN (секция перед футером) */
	padding-top: 30px; 
	padding-bottom: 30px; 
	border-top: 2px solid var(--primary);
	text-align: center;}

/* высота шапки = 56px + 38px , при этом 38px прячется в мобильной версии */
.anchor-padding { height: 54px; } /* длинный отступ для точного позиционирования якорных ссылок */
.anchor-padding-2 { height: 20px; } /* короткий отступ для точного позиционирования якорных ссылок */
	

/* СТИЛИЗАЦИЯ ЧЕКБОКСОВ И РАДИОКНОПОК

/* гасим оригинальный чекбокс */
input[type="checkbox"]:checked, 
input[type="checkbox"]:not(:checked), 
input[type="radio"]:checked, 
input[type="radio"]:not(:checked) 
{
	position: absolute; 
	opacity: 0; 
	visibility: hidden; 
	z-index: -1;
}

/* форматируем подпись к чекбоксу (label) */
input[type="checkbox"]:checked + label, 
input[type="checkbox"]:not(:checked) + label, 
input[type="radio"]:checked + label, 
input[type="radio"]:not(:checked) + label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 20px;
    cursor: pointer;
}

/* рисуем свой чекбокс рядом с label */
input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.54);
    background-color: #ffffff;
}

/* закругляем рамки чекбокса */
input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before {
    border-radius: 3px;
}
input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    border-radius: 100%;
}

/* добавляем анимацию на "галочку" чекбокса */
input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* рисуем саму "галочку" */
input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after {
    left: 4px;
    top: 5px;
    width: 13px;
    height: 7px;
    border-radius: 1px;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    left: 6px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #00ABE4;
}

/* отображаем состояние "галочки" */
/* выключена */
input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:not(:checked) + label:after {
    opacity: 0; 
}
/* включена */
input[type="checkbox"]:checked + label:after, 
input[type="radio"]:checked + label:after {
    opacity: 1; 
}

/* отображаем состояние "чекбокса" */
/* выключен */
input[type="checkbox"]:not(:checked) + label:before {
   background-color: #ffffff;
   border-color: rgba(0, 0, 0, 0.54);
}
/* включен */
input[type="checkbox"]:checked + label:before {
   background-color: var(--secondary);
   border-color: var(--secondary);
}

/* тень вокруг чекбокса 
input[type="checkbox"]:not(:checked) + label:before {

<div class="mat-checkbox-ripple mat-ripple" matripple=""><div class="mat-ripple-element mat-checkbox-persistent-ripple"></div></div>
*/


/* Media Queries - модифицируем некоторые стили в зависимости от пропорций и размера окна
=============================================================================================================================
	Вимание! Так как на старых версиях Safari (iPhones и iOS) часто не работают медиазапросы, то используем схему MobileFirst
	по ширине экраны делим на три категории:
	0-860px - мобильная версия
	860-1180px - узкий десктоп
	свыше 1180px - широкий десктоп
=============================================================================================================================
*/

.hide-mob { display: none; } /* none Mobile | block Desktop */
.hide-desk { display: block; } /* block Mobile | none Desktop */
.hide-all { display: none; } 

/* ЛЮБОЙ ДЕСКТОП */
@media screen and (min-width: 860px) {
	body { max-width: none; } /* 420px Mobile | none Desktop */
	
	/* задаем ширину секции и центрируем ее (т.к. не наследуется от body) */
	.limit-width { max-width: none;} /* 420px Mobile | none Desktop */
	.limit-width-860 { max-width: 860px;} /* 420px Mobile | 860 Desktop */

	/* задаем размеры основного контейнера и центрируем его */
	.container { max-width: 1366px; } /* 420px Mobile | 1366px Desktop */
	/* дополнительные ширины контейнера (используются только в десктопе) */
	.narrow		 { max-width: 860px; } /* стандартный */ 
	.narrow_wide { max-width: 920px; }  /* широкий */  
	.narrow_slim { max-width: 585px; }  /* узкий */ 
	
	.hide-mob { display: block; }
	.hide-desk { display: none; }
	
	.header__mob { display: none; } /* прячем в десктопной версии */
	.header__desc { display: block; } /* показываем в десктопной версии */
	.footer__desc { display: block; } /* показываем в десктопной версии */
	
	.navi__container { 	justify-content: normal; } /* center Mobile | normal Desktop */
	.navi__actions { gap: 20px; } /* 0px Mobile | 20px Desktop */

	.header__slogan { margin-top: 150px; margin-left: 50px; float: left; }	
	.header__slogan h1 { font-size: 34px; }
	.header__slogan .h1 { font-size: 34px; }

	.visibility { opacity: 0; }  /* 1 Mobile | 0 Desktop */

	.anchor-padding { height: 94px; margin-top: -38px;} /* длинный отступ для точного позиционирования якорных ссылок */
	.anchor-padding-2 { height: 58px; margin-top: -38px;} /* короткий отступ для точного позиционирования якорных ссылок */

	.form__column { width: 47%; } /* две колонки на десктопе и одна колонка на мобилке */
	.watch-about__title { padding-top: 25px; width: 170px; }

}


/* НИЗКИЙ ДЕСКТОП
@media screen and (min-width: 860px) and (max-height: 650px) {
} */


/* УЗКИЙ ДЕСКТОП */
@media screen and (min-width: 860px) and (max-width: 1180px) {
	.header__slogan { margin-top: 66px; margin-left: 0px; float: none; }
	.footer__content { flex-wrap: wrap; } 
	.footer__column { flex-basis: unset; width: calc(50% - 100px); }
	.footer__column:nth-child(1) { width: 56px; }
	.footer__column:nth-child(4) { width: 56px; }
}


/* НИЗКИЙ УЗКИЙ ДЕСКТОП
@media screen and (min-width: 860px) and (max-width: 1180px) and (max-height: 650px) {
} */


/* НИЗКАЯ МОБИЛЬНАЯ
@media screen and (max-width: 860px) and (max-height: 650px) {
} */