/* CSS Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, figcaption, figure, hgroup, menu, nav, section, summary, time, mark, audio, video
{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
article,aside,details,figcaption,figure,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none; }
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

:root {
	--color-key0: #217A24;			/* зеленый */
	--color-key1: #1c3764;			/* синий */
	--color-key2: #f8ae19;			/* желтый */
	--color-key2-text: #ed8021;		/* желтый для белого фона */
	--color-grey: #666666;			/* серый */
	--color-lines: #c9c9d9;			/* цвет линий */
}

/* https://stackoverflow.com/questions/13430897/how-to-override-font-boosting-in-mobile-chrome */
html * { max-height:1000000px; }

/* Убираем подсветку autofill для инпутов */
INPUT:-webkit-autofill,
INPUT:-webkit-autofill:hover, 
INPUT:-webkit-autofill:focus, 
INPUT:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }

/* Убираем спиннер у INPUT[type=number] */
INPUT[type=number] { -moz-appearance: textfield; }
INPUT[type=number]::-webkit-inner-spin-button,
INPUT[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Убираем полосы прокрутки где нужно */
.no-scrollbars { scrollbar-width: none; scrollbar-height: none; -ms-overflow-style: none; }
.no-scrollbars::-webkit-scrollbar { width: 0px; height: 0px; background: transparent; }

/* Элементы ввода по умолчанию не наследуют шрифт заданный для BODY */
INPUT, TEXTAREA, BUTTON { font: inherit; }

/* Фирменная кнопка */
BUTTON.T {					position: relative; font-weight: 500; font-size: 17px; line-height: 20px; margin: 10px 0; padding: 8px 30px; color: #FFF; outline: none; border: none; background: var(--color-key2); cursor: pointer; border-radius: 3px; }
BUTTON.T:active {			filter: brightness(0.95); transform: translateY(2px); box-shadow: inset 1px 2px 5px rgba(0,0,0,0.15); }
BUTTON.T:disabled {			background: #CCC; color: #F2F2F2; }

/* Войдиите или зарегистрируйтесь */
#Locked {					font-size: 18px; font-weight: 500; line-height: 32px; }
#Locked SPAN {				position: relative; }
#Locked SPAN:before {		position: absolute; top: -1px; left: -34px; width: 25px; height: 25px; background: url(/i/icons.svg#lock) no-repeat center; content: ""; }
#Locked A {					color: var(--color-key2); }
#Locked A:hover {			color: var(--color-key1); }


/* Элементы */
A {							color: var(--color-key1); text-decoration: none; transition1: 200ms; }
A:hover {					color: var(--color-key2); }
H1 {						margin-bottom: 20px; font-size: 34px; font-weight: 700; }
EM {						font-style: normal; }
SMALL {						font-size: 80%; }
DATE {						color: var(--color-grey); }

@media screen and (min-width: 1234px) {

/* В десктопной версии не показываем элементы класса .Mobile */
.Mobile {					display: none !important; }

}


@media screen and (max-width: 1233px) {

H1 {						font-size: 26px; text-align: center; }

#Locked {					text-align: center; }

/* В мобильной версии не показываем элементы класса .Desktop */
.Desktop {					display: none !important; }

}

@font-face {
	font-family: 'Opti';
	src: url(/css/fonts/Opti-Light.eot);
	src: url(/css/fonts/Opti-Light.eot?#iefix) format('embedded-opentype'),
		url(/css/fonts/Opti-Light.woff2) format('woff2'),
		url(/css/fonts/Opti-Light.woff) format('woff'),
		url(/css/fonts/Opti-Light.ttf) format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Opti';
	src: url(/css/fonts/Opti-Regular.eot);
	src: url(/css/fonts/Opti-Regular.eot?#iefix) format('embedded-opentype'),
		url(/css/fonts/Opti-Regular.woff2) format('woff2'),
		url(/css/fonts/Opti-Regular.woff) format('woff'),
		url(/css/fonts/Opti-Regular.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Opti';
	src: url(/css/fonts/Opti-Medium.eot);
	src: url(/css/fonts/Opti-Medium.eot?#iefix) format('embedded-opentype'),
		url(/css/fonts/Opti-Medium.woff2) format('woff2'),
		url(/css/fonts/Opti-Medium.woff) format('woff'),
		url(/css/fonts/Opti-Medium.ttf) format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Opti';
	src: url(/css/fonts/Opti-Bold.eot);
	src: url(/css/fonts/Opti-Bold.eot?#iefix) format('embedded-opentype'),
		url(/css/fonts/Opti-Bold.woff2) format('woff2'),
		url(/css/fonts/Opti-Bold.woff) format('woff'),
		url(/css/fonts/Opti-Bold.ttf) format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
/*
@font-face {
	font-family: 'Opti';
	src: url(/css/fonts/Opti-Black.eot);
	src: url(/css/fonts/Opti-Black.eot?#iefix) format('embedded-opentype'),
		url(/css/fonts/Opti-Black.woff2) format('woff2'),
		url(/css/fonts/Opti-Black.woff) format('woff'),
		url(/css/fonts/Opti-Black.ttf) format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
*/
@media screen and (min-width: 1234px) {

HTML {											font-family: Opti, sans-serif; font-size: 16px; line-height: 1.2; border-top: 70px solid #fff; border-bottom: 70px solid var(--color-key1); }
BODY {											box-sizing: border-box; width: 100%; margin: 0; padding: 0; background: #E9E9F0; border-top: 60px solid var(--color-key1); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
BODY:before {									position: absolute; box-sizing: border-box; left: 0; top: 0; width: 100%; height: 70px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); content: ""; }

#Wrap {											position: relative; box-sizing: border-box; width: 100%; max-width: 1600px; min-height: calc(100vh + 27px); margin: -130px auto 0 auto; padding: 0 60px 90px 60px; outline1: 1px solid red; }

HEADER {										display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 50px; }
HEADER A {										text-decoration: none; }
HEADER HR {										flex-basis: 100%; height: 0; margin: 0; border: none; }

#Logo {											position: absolute; width: calc(0.25 * ( 100% - 120px )); height: 120px; left: 60px; top: 70px; z-index: 2; background: #FFF; display: flex; justify-content: center; align-items: center; }
#Logo:before {									display: block; position: absolute; left: calc(50% - 10px); top: 16px; width: 21px; height: 0; border-top: 7px solid #0057b8; border-bottom: 7px solid #ffc316; content: ""; }
#Logo:after {									position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 120px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.21); content: ""; }
#Logo IMG {										width: 77%; }

#About {										z-index: 3; height: 70px; flex-basis: 25%; font-size: 18px; font-weight: 600; color: var(--color-key1); background: #FFF;
												display: flex; justify-content: center; align-items: flex-end; text-align: center; }

#Burger {										display: none; }

#Search {										position: relative; flex-basis: 40%; display: flex; justify-content: flex-start; align-items: center; }
#Search INPUT {									width: 100%; height: 30px; padding: 0 10px; font-size: 110%; background: none; outline: none; border: 1px solid var(--color-lines); }
#Search INPUT:focus:valid {						background: url(/i/icons.svg#search-reset) no-repeat right center; background-size: 36px 24px; }
#Search INPUT:placeholder-shown {				font-size: 90%; }
#Search INPUT:-webkit-autofill {				-webkit-box-shadow: inset 0 0 0 50px #FFF !important; }
#Search INPUT:invalid {							box-shadow: none; }
#Search BUTTON {								width: 36px; height: 32px; margin-left: -3px; background-color: var(--color-key2); outline: none; border: none; cursor: pointer; border-radius: 3px; }
#Search BUTTON IMG {							width: 18px; height: 18px; margin-top: 4px; }
#Search BUTTON:active IMG {						transform: scale(.9); }

#Phone {										flex-basis: 35%; display: flex; justify-content: flex-end; align-items: center; }
#Phone A {										order: 1; position: relative; margin-right: 20px; text-align: right; color: var(--color-key1); font-size: 21px; font-weight: 600; }
#Phone A:before {								display: block; position: absolute; width: 20px; height: 20px; left: -24px; top: 2px; background: url(/i/icons.svg#phone) no-repeat center right; background-size: 20px; content: ""; }
#Phone A:hover {								color: var(--color-key2); }
#Phone SPAN {									order: 2; display: block; font-size: 75%; font-style: normal; text-align: right; }

#Menu {											flex: 1; height: 60px; margin-left: 25%; padding: 0 10px; display: flex; justify-content: flex-start; align-items: stretch; }
#Menu A {										position: relative; display: flex; align-items: center; color: var(--color-key2); font-weight: 500; padding: 0 .75em; transition: 100ms; }
#Menu A:hover,
#Menu A.Active {								color: #FFF; }
#Menu A:not(:last-child):after {				position: absolute; width: 1px; height: 20px; right: -1px; top: 20px; border-left: 1px solid #FFF; opacity: .25; content: ""; }

#Cart {											display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 500; white-space: nowrap; }
#Cart:before {									display: block; width: 1.3em; height: 1.3em; margin-right: .5em; background: url(/i/icons.svg#cart) no-repeat center; content: ""; }
#Cart EM {										color: var(--color-key2); }

#UserMenu {										flex: 1; height: 60px; margin-left: 25%; z-index: 9; display: flex; align-items: center; padding-left: 10px; font-weight: 500; }
#UserMenu A {									position: relative; padding: 0 .75em; color: var(--color-key1); transition: 100ms; }
#UserMenu A:hover {								color: var(--color-key2); }
#UserMenu A.Active {							color: #666; }

#Auth {											flex: 1; z-index: 9; height: 60px; margin-left: 25%; display: flex; justify-content: flex-end; align-items: center; font-weight: 500; }
#Auth:after {									display: block; width: 26px; height: 26px; margin-left: 5px; background: url(/i/icons.svg#auth) no-repeat center; content: ""; }

#UserInfo {										height: 60px; z-index: 9; font-weight: 500; color: var(--color-key1); display: flex; align-items: center; }
#UserInfo B {									display: none; }
#UserInfo I {									font-style: normal; }
#UserInfo IMG {									width: 26px; height: 26px; margin-left: 10px; }

FOOTER {										position: absolute; box-sizing: border-box; bottom: -70px; width: 100%; height: 70px; margin-left: -60px; padding: 0 60px; font-size: 15px;
												display: flex; justify-content: space-between; align-items: center; }
FOOTER:after {									position: absolute; width: 0; height: 0; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); border-left: 50vw solid transparent; border-right: 50vw solid transparent; border-bottom: 27px solid var(--color-key1); content: ""; }
FOOTER:before {									position: absolute; width: 0; height: 0; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); border-left: 30vw solid transparent; border-right: 30vw solid transparent; border-bottom: 45px solid var(--color-key2); content: ""; }

#BottomMenu {									display: flex; justify-content: flex-start; margin-left: -10px; }
#BottomMenu A {									padding: 0 10px; font-weight: 500; color: #fff; text-decoration: none; transition: 100ms; }
#BottomMenu A:hover {							color: var(--color-key2); }
#BottomMenu A:not(:last-child) {				border-right: 1px solid #ccc; }

#Social {										position: absolute; left: 50%; transform: translate(-50%,-10px); text-align: center; }
#Social A IMG {									filter: brightness(0) invert(1); transition: 100ms color; }
#Social A:hover IMG {							filter: none; }
#Social IMG {									height: 50px; padding: 0 10px; }
#TikTok IMG {									width: 27px; }
#Facebook IMG {									width: 22px; }
#Instagram IMG {								width: 22px; }
#YouTube IMG {									width: 25px; }

#LogoVD {										text-align: right;}
#LogoVD IMG {									width: 120px; }

}


@media screen and (max-width: 1233px) {

HTML {											font-family: Opti, sans-serif; font-size: 16px; line-height: 1.2; }
BODY {											width: 100%; background: #E9E9F0; }

#Wrap {											position: relative; box-sizing: border-box; width: 100%; min-height: 100vh; outline1: 1px solid green; }

HEADER {										position: fixed; z-index: 999; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; background: #FFF; }
HEADER HR {										flex-basis: 100%; height: 0; margin: 0; border: none; }
HEADER HR:first-of-type {						order: 4; }

MAIN {											position: relative; top: var(--header-height); padding: 20px 20px 46px 20px; max-width: 100%; overflow-x: hidden; }

#Logo {											order: 1; flex: 1; height: 60px; margin-left: 10px; display: flex; align-items: center; }
#Logo IMG {										width: 90%; margin-left: -2px; }
#About {										order: 2; flex: 1; margin-right: 10px; text-align: right; font-size: 15px; font-weight: 500; color: var(--color-key1); display: flex; justify-content: flex-end; align-items: center; }
#Cart {											order: 3; flex: 1; display: none; align-items: center; justify-content: flex-end; padding-right: 15px; }
#Cart SPAN {									font-size: 17px; font-weight: 500; }
#Phone,
#Menu,
#UserMenu,
#UserInfo,
#UserInfo IMG,
#Auth,
#Manager,
#BottomMenu {									display: none; }

#Search {										order: 5; flex: 1; position: relative; background: var(--color-key1); padding: 10px; display: flex; justify-content: flex-start; align-items: center; }
#Search INPUT {									width: 100%; height: 30px; padding: 0 10px; font-size: 17px; background: #FFF; outline: none; border: 1px solid var(--color-lines); border-radius: 0; }
#Search INPUT:focus:valid {						background: #FFF url(/i/icons.svg#search-reset) no-repeat right center; background-size: 32px 24px; }
#Search INPUT:placeholder-shown {				font-size: 16px; }
#Search INPUT:-webkit-autofill {				-webkit-box-shadow: inset 0 0 0 50px #FFF !important; }
#Search INPUT:invalid {							box-shadow: none; }
#Search BUTTON {								width: 36px; height: 32px; background-color: var(--color-key2); outline: none; border: none; cursor: pointer; border-radius: 0; }
#Search BUTTON IMG {							width: 18px; height: 18px; margin-top: 4px; }
#Search BUTTON:active IMG {						transform: scale(.9); }

#Burger {										order: 6; flex-basis: 30px; padding: 10px; background: var(--color-key1) url(/i/icons.svg#burger) no-repeat center; background-size: 24px; }
#Burger.Active {								background: var(--color-key1) url(/i/icons.svg#menu-close) no-repeat center; background-size: 20px; }

#MobileMenu {									display: none; }
#MobileMenu.Active {							display: flex; position: absolute; z-index: 9; box-sizing: border-box; width: 100%; height: calc(100vh - var(--header-height)); top: var(--header-height); left: 0; padding: 0; background: var(--color-key1);
												flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; }
#MobileMenu > * {								display: block; padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#MobileMenu #Auth {								flex-basis: 100%; color: #FFF; }
#MobileMenu .UserMenu,
#MobileMenu #Menu,
#MobileMenu #BottomMenu {						flex-basis: calc(50% - 20px); }
#MobileMenu #UserInfo,
#MobileMenu .Phone {							flex-basis: 100%; }
#MobileMenu A {									position: relative; color: var(--color-key2); font-size: 18px; line-height: 36px; }
#MobileMenu #Menu A,
#MobileMenu .UserMenu A,
#MobileMenu #BottomMenu A {						display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#MobileMenu .UserMenu:first-of-type A:last-child,
#MobileMenu #Menu A:last-child {				border: none; }
#MobileMenu A:hover {							background-color: var(--color-key2); color: var(--color-key1); border: none !important; }
#MobileMenu A:hover:before {					position: absolute; left: -10px; top: 0; width: 10px; height: 100%; background-color: var(--color-key2); content: ""; }
#MobileMenu A:hover:after {						position: absolute; right: -10px; top: 0; width: 10px; height: 100%; background-color: var(--color-key2); content: ""; }
#MobileMenu .Phone {							display: flex; justify-content: space-between; align-items: center; }
#MobileMenu .Phone SPAN {						text-align: right; font-size: 14px; color: #FFF; opacity: .36; }
#MobileMenu .Phone A {							padding-left: 25px; }
#MobileMenu .Phone A:before {					display: block; position: absolute; width: 30px; height: 30px; left: 0; top: 50%; transform: translateY(-50%); background: url(/i/icons.svg#phone) no-repeat center left; background-size: 20px 20px; content: ""; filter: sepia(100%) hue-rotate(-10deg) brightness(300%) saturate(300%); }
#UserInfo {										position: relative; color: #FFF; padding-left: 55px; }
#UserInfo B {									display: block; font-size: 18px; font-weight: 500; }
#UserInfo I {									font-style: normal; }
#UserInfo:before {								display: block; position: absolute; width: 40px; height: 40px; left: 10px; top: 50%; transform: translateY(-50%); background: url(/i/icons.svg#auth) no-repeat center left; background-size: 36px 36px; content: ""; filter: sepia(100%) hue-rotate(-10deg) brightness(300%) saturate(300%); }
#Auth {											position: relative; padding-left: 35px; }
#Auth:before {									display: block; position: absolute; width: 30px; height: 30px; left: 10px; top: 50%; transform: translateY(-50%); background: url(/i/icons.svg#auth) no-repeat center left; background-size: 20px 20px; content: ""; filter: sepia(100%) hue-rotate(-10deg) brightness(300%) saturate(300%); }

FOOTER {										position: absolute; box-sizing: border-box; top: calc(100% + var(--header-height)); width: 100%; padding: 0 40px 0 35px; background: var(--color-key1);
												display: flex; justify-content: space-between; align-items: stretch; }
FOOTER:after {									position: absolute; width: 0; height: 0; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); border-left: 50vw solid transparent; border-right: 50vw solid transparent; border-bottom: 12px solid var(--color-key1); content: ""; }
FOOTER:before {									position: absolute; width: 0; height: 0; bottom: calc(100% - 0px); left: 50%; transform: translateX(-50%); border-left: 43vw solid transparent; border-right: 43vw solid transparent; border-bottom: 25px solid var(--color-key2); content: ""; }
#Social {										}
#Social A IMG {									filter: brightness(0) invert(1); transition: 100ms color; }
#Social A:hover IMG {							filter: none; }
#Social IMG {									height: 48px; padding: 0 5px; transform: scale(.8); }
#TikTok IMG {									width: 27px; }
#Facebook IMG {									width: 22px; }
#Instagram IMG {								width: 22px; }
#YouTube IMG {									width: 25px; }
#LogoVD {										display: flex; align-items: center; }
#LogoVD IMG {									width: 90px; }

}
/* DESKTOP */
@media screen and (min-width: 1234px) {

.Overlay {										position: fixed; z-index: 10000; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); }

.Modal {										position: fixed; z-index: 10001; width: 480px; height: 240px; left: 50%; top: 50%; margin-left: -240px; margin-top: -120px;
												background-color: #FFF; animation: showModal 300ms; }
.Modal:before {									display: block; position: absolute; left: 0; top: -38px; width: 100%; height: 38px; background: var(--color-key1); content: ""; }
.Modal > DIV {									box-sizing: border-box; height: 278px; margin-top: -38px; transform: translateZ(0);
												display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

.Modal U {										position: absolute; width: 30px; height: 30px; right: 5px; top: 4px; background: url(/i/icons.svg#qua-close) no-repeat center; background-size: 26px; cursor: pointer; }
.Modal H3 {										flex-grow1: 5; width: 100%; margin: 0 0 0 20px; font-weight: 300; font-size: 16px; line-height: 38px; color: #FFF; }
.Modal H3 SPAN {								font-weight: 500; }
.Modal H3 SPAN A {								color: #FFF; text-decoration: none; }

.Buttons {										box-sizing: border-box; width: 100%; padding: 10px 30px 30px 30px; text-align: center; }
.Buttons BUTTON {								width: 130px; margin: 0; padding-left: 0; padding-right: 0; }
.Buttons BUTTON:first-child {					float: left; }
.Buttons BUTTON:last-child {					float: right; }
.Buttons BUTTON:only-child {					display: block; float: none; margin: 0 auto; }
.Buttons BUTTON[type=reset]:before { 			background: #444; }
.Buttons BUTTON[type=reset]:active:before { 	background: #222; }
.Buttons BUTTON[disabled]:before {				background: #999; }

@keyframes showModal {
	0% {										transform: scale(0.7); }
	45% {										transform: scale(1.05); }
	100% {										transform: scale(1.0); }
}

/* Окно ввода количества */
.Modal EM.Error {								color: var(--color-key1); }

.Input {										text-align: center; }
.Input LABEL {									position: relative; display: block; width: 200px; margin: 10px auto 7px auto; border: 1px solid #999; }
.Input LABEL:before {							position: absolute; z-index: 9; width: 40px; height: 36px; top: 0; left: 0; color: var(--color-key1); font-weight: 300; font-size: 24px; line-height: 34px; text-align: center; content: "–"; cursor: pointer; }
.Input LABEL:after {							position: absolute; z-index: 9; width: 40px; height: 36px; top: -1px; right: 0; color: var(--color-key1); font-weight: 300; font-size: 24px; line-height: 34px; text-align: center; content: "+"; cursor: pointer; }
.Input INPUT {									width: 100%; font-weight: 500; font-size: 22px; line-height: 36px; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; }
.Input LABEL.Minus:before {						top: 1px; }
.Input LABEL.Plus:after {						top: 0; }

.Price {										font-size: 24px; font-weight: 500; }
.Price SPAN {									font-size: 15px; }

/* Окно логина и напоминания пароля */
.LP .Inputs {									margin-top: 30px; }
.LP LABEL {										position: relative; display: block; width: 333px; margin: 15px auto; padding: 0 10px; border: 1px solid #999; }
.LP LABEL INPUT {								width: 100%; font-size: 18px; line-height: 36px; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; }
.LP INPUT::-webkit-input-placeholder {			font-weight: 300; }
.LP INPUT::-moz-placeholder {					font-weight: 300; }
.LP INPUT:-ms-input-placeholder {				font-weight: 300; }
.LP INPUT:-moz-placeholder {					font-weight: 300; }

.LP .Err {										position: absolute; left: 50%; top: 60px; color: var(--color-key1); white-space: nowrap; font-style1: italic; transform: translateX(-50%); }

.LP A {											position: absolute; bottom: -25px; right: 0; font-weight: 300; font-size: 14px; color: #FFF; border-bottom: 1px dotted #FFF; cursor: pointer; opacity: .75; }
.LP A:hover {									opacity: 1; }

}


/* MOBILE */
@media screen and (max-width: 1233px) {

.Overlay {										position: fixed; z-index: 10000; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); }

.Modal {										position: fixed; z-index: 10001; width: 360px; height: 210px; left: 50%; top: 50%; margin-left: -180px; margin-top: -200px;
												background-color: #FFF; animation: showModal 300ms; }
.Modal:before {									display: block; position: absolute; left: 0; top: -32px; width: 100%; height: 32px; background: var(--color-key1); content: ""; }
.Modal > DIV {									box-sizing: border-box; height: 242px; margin-top: -32px; transform: translateZ(0);
												display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

.Modal U {										position: absolute; width: 32px; height: 32px; right: 0; top: 0; background: url(/i/icons.svg#qua-close) no-repeat center; background-size: 24px; cursor: pointer; }
.Modal H3 {										width: 100%; margin: 0 0 15px 17px; font-weight: 300; font-size: 15px; line-height: 32px; color: #FFF; }
.Modal H3 SPAN {								font-weight: 500; }
.Modal H3 SPAN A {								color: #FFF; text-decoration: none; }


.Buttons {										box-sizing: border-box; width: 100%; padding: 10px 15px 15px 15px; text-align: center; }
.Buttons BUTTON {								width: 110px; margin: 0; padding: 4px 0 5px 0; }
.Buttons BUTTON:first-child {					float: left; }
.Buttons BUTTON:last-child {					float: right; }
.Buttons BUTTON:only-child {					display: block; float: none; margin: 0 auto; }
.Buttons BUTTON[type=reset]:before { 			background: #444; }
.Buttons BUTTON[type=reset]:active:before { 	background: #222; }
.Buttons BUTTON[disabled]:before {				background: #999; }

@keyframes showModal {
	0% {										transform: scale(0.7); }
	45% {										transform: scale(1.05); }
	100% {										transform: scale(1.0); }
}

/* Окно ввода количества */
.Modal EM.Error {								color: var(--color-key1); }

.Input {										text-align: center; }
.Input LABEL {									position: relative; display: block; width: 160px; margin: 10px auto 7px auto; border: 1px solid #999; }
.Input LABEL:before {							position: absolute; z-index: 9; width: 32px; height: 29px; top: 0; left: 0; color: var(--color-key1); font-size: 24px; line-height: 27px; font-weight: 300; text-align: center; content: "–"; cursor: pointer; }
.Input LABEL:after {							position: absolute; z-index: 9; width: 32px; height: 29px; top: -2px; right: 0; color: var(--color-key1); font-size: 24px; line-height: 27px; font-weight: 300; text-align: center; content: "+"; cursor: pointer; }
.Input INPUT {									width: 100%; font-size: 20px; line-height: 30px; font-weight: 500; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; }
.Input LABEL.Minus:before {						top: 2px; }
.Input LABEL.Plus:after {						top: 0; }

.Price {										font-size: 20px; font-weight: 500; }
.Price SMALL {									font-size: 18px; }
.Price SPAN {									font-size: 15px; }

/* Окно логина и напоминания пароля */
.LP LABEL {										position: relative; display: block; width: 300px; margin: 12px auto; padding: 0 5px; border: 1px solid #999; }
.LP LABEL INPUT {								width: 100%; font-size: 17px; line-height: 30px; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; }
.LP INPUT::-webkit-input-placeholder {			font-weight: 300; }
.LP INPUT::-moz-placeholder {					font-weight: 300; }
.LP INPUT:-ms-input-placeholder {				font-weight: 300; }
.LP INPUT:-moz-placeholder {					font-weight: 300; }

.LP .Err {										position: absolute; left: 50%; top: 45px; color: var(--color-key1); white-space: nowrap; font-style: italic; transform: translateX(-50%); }

.LP A {											position: absolute; top: calc(100% + 10px); right: -4px; font-size: 14px; color: #FFF; border-bottom: 1px dotted #FFF; cursor: pointer; opacity: .75; }
.LP A:hover {									opacity: 1; }

}

/* DESKTOP */
@media screen and (min-width: 981px) {

/* Верхняя панель */
BODY.USER .dt-inf {								display: none; }
.dt-inf {										text-align: center; white-space: nowrap; font-size: 18px; font-weight: 500; line-height: 32px; }
.dt-inf SPAN {									position: relative; }
.dt-inf SPAN:before {							position: absolute; top: -1px; left: -34px; width: 25px; height: 25px; background: url(/i/icons.svg#lock) no-repeat center; content: ""; }
.dt-inf A {										color: var(--color-key2); }
.dt-inf A:hover {								color: var(--color-key1); }
.dt-top-panel {									margin-top: -32px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.dt-space {										flex-basis: 60%; }

/* Фильтр */
.dt-search {									flex-basis: 25%; }
.dt-search INPUT {								width: 34px; height: 34px; padding: 0 0 0 34px; font-size: 15px; background: #FFF url(/i/icons.svg#filter) no-repeat 8px center; background-size: 17px; outline: none; border: none; transition: 200ms ease-in-out; }
.dt-search INPUT:hover,
.dt-search INPUT:focus,
.dt-search INPUT:not(:placeholder-shown){		width: 100%; background-color: #FFF; }

/* Размер страницы */
.dt-length {									margin-left: 15px; }
.dt-length SELECT {								font-size: 14px; padding: 5px; text-align: right; border: none; outline: none; background-color: transparent; }
.dt-length SELECT::-ms-expand {					background-color: transparent; border: none; }

/* Переключатель вида */
.dt-viewtype {									display: table; height: 30px; margin-left: 0; }
.dt-viewtype LABEL {							display: table-cell; width: 36px; background-size: 11px 11px !important; border: none; cursor: pointer; }
.dt-viewtype LABEL:first-of-type {				background: var(--color-key1) url(/i/icons.svg#lines) no-repeat center; }
.dt-viewtype LABEL:last-of-type {				background: var(--color-key1) url(/i/icons.svg#grid) no-repeat center; border-right: none; }
.dt-viewtype INPUT {							display: none; }
.dt-viewtype INPUT:checked + LABEL {			background-color: #FFF; filter: grayscale(1); }

/* Общий вид таблиц */
.dt-as-table {									display: none; width: calc(100% + 45px); margin-left: -45px; font-size: 17px; }
.dt-as-table THEAD TR {							border-bottom: 1px solid var(--color-lines); }
.dt-as-table TBODY TR {							border-top: 1px solid var(--color-lines); }
.dt-as-table THEAD TD {							padding: 10px 30px 10px 0; color: var(--color-grey); font-weight: 300; vertical-align: bottom; }
.dt-as-table TD {								position: relative; max-width: 250px; white-space: nowrap; cursor: pointer; }
.dt-as-table TD:not(:last-child) A {			display: block; padding: 10px 30px 10px 0; text-decoration: none; color: #000 !important; }

/* Свисающая правая колонка с фиксом для FF */
.dt-as-table TD:last-child {					position: absolute; }
@supports (-moz-appearance:none) {
	.dt-as-table TR {							position: relative; }
	.dt-as-table TD:last-child {				top: 0; height: 100%; }
}

/* Фото */
.dt-as-table TD:first-child {					padding: 0; border-top: 1px solid transparent; }
.dt-as-table TD:first-child:before {			position: absolute; width: 0; height: 0; top: 50%; transform: translateY(-50%); border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 10px solid #E9E9F0; content: ""; }
.dt-as-table TD:first-child A {					display: block; z-index: 3; width: 45px; padding: 10px 0; opacity: .3; }
.dt-as-table TD:first-child A IMG {				display: none; }
.dt-as-table TD:first-child A:not(:empty) {		background: url(/i/icons.svg#foto) no-repeat center; background-size: 15px; }
.dt-as-table TD:first-child A:not(:empty):before {	content: "\a0"; }
.dt-as-table TBODY TR TD:first-child A:hover {	opacity: .9; }

/* Наименование */
.dt-as-table TD:nth-child(4) {					width: 80%; text-align: left !important; }
.dt-as-table TD:nth-child(4) SPAN {				display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Количество в комплекте */
.dt-as-table TD.Q {								text-align: right; }

/* Наличие */
.dt-as-table TD:nth-last-child(3),
.dt-as-table TD:nth-last-child(3) A {			text-align: right; padding-right: 0; }
.USER .dt-as-table TD:nth-last-child(3) {		padding-right: 30px; }

/* Цена */
.dt-as-table TD:nth-last-child(2) {				display: none; }
.dt-as-table TD:nth-last-child(2),
.dt-as-table TD:nth-last-child(2) A {			padding-right: 0; text-align: right; }
.dt-as-table TD:nth-last-child(2) A IMG {		width: 11px; height: 13px; }
.dt-as-table TD:nth-last-child(2).Action A {	color1: var(--color-key1) !important; }
.USER .dt-as-table TD:nth-last-child(2) {		display: table-cell; }

/* Buy */
.dt-as-table TD:last-child {					padding: 0; /*border-top: 1px solid transparent;*/ }
.dt-as-table TD:last-child A {					visibility: hidden; display: block; box-sizing: border-box; width: 40px; height: 100%; padding: 10px 0; background: url(/i/icons.svg#buy) no-repeat center; background-size: 15px; }
.dt-as-table TD:last-child A.O {				visibility: visible; background-image: url(/i/icons.svg#check); padding: 12px 0; background-size: 15px; color: var(--color-key1); font-size: 14px; font-weight: 500; }

/* Жирность колонок */
.dt-as-table TBODY TD:nth-child(2) {			font-weight: 500; }
.dt-as-table TBODY TD:nth-last-child(2) {		font-weight: 500; }

/* Подсветка */
.dt-as-table TBODY TR:hover {					background-color: #FFF; border-color: transparent; }
.dt-as-table TBODY TR:hover + TR {				border-color: transparent; }
.dt-as-table TBODY TR:hover TD:last-child {	 	background: #FFF; }
.dt-as-table TBODY TR:hover TD:last-child A {	visibility: visible; }
.dt-as-table TBODY TR:hover TD:last-child:after { position: absolute; width: 0; height: 0; right: -10px; top: 50%; transform: translateY(-50%); border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 10px solid #FFF; content: ""; }

/* Фиксированная подсветка при переходе в модальное окно */
.dt-as-table TBODY TR.Fixed {					background-color: #d6d6d6; border-color: transparent; }
.dt-as-table TBODY TR.Fixed + TR {				border-color: transparent; }
.dt-as-table TBODY TR.Fixed TD:last-child A {	visibility: visible; }

/* Выделение текущей позиции в списке замен */
.dt-as-table TBODY TR.Cur {						background-color: #FFF; border-color: transparent; }
.dt-as-table TBODY TR.Cur + TR {				border-color: transparent; }
.dt-as-table TBODY TR.Cur TD:last-child {		background: #FFF; }
.dt-as-table TBODY TR.Cur TD:last-child:after { position: absolute; width: 0; height: 0; right: -10px; top: 50%; transform: translateY(-50%); border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 10px solid #FFF; content: ""; }

/* Грид */
.dt-as-grid {									display: none; margin-top: 35px; }
.dt-as-grid UL {								display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 30px; list-style: none; }
.dt-as-grid LI {								position: relative; height: 250px; background-color: #FFF; }
.dt-as-grid LI BUTTON {							display: none!important; position: absolute; z-index: 9; right: 8px; top: 8px; display: block; min-width: 32px; height: 32px; padding: 0 12px; color: var(--color-grey); font-weight: 700; background: var(--color-key1); border: none; border-radius: 16px; cursor: pointer; }
.dt-as-grid LI BUTTON.Q {						}
.dt-as-grid LI BUTTON.O {						transition: 200ms; opacity: 0; background: var(--color-key1) url(/i/cart1.svg#cart) no-repeat center 8px; background-size: 20px; }
.dt-as-grid LI A {								display: block; height: 100%; border: none; }
.dt-as-grid LI FIGURE {							height: 180px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.dt-as-grid LI FIGURE IMG {						transition: transform 200ms ease-in-out; }
.dt-as-grid LI FIGURE IMG.Brand {				opacity: .3; transform: scale(.3); filter: sepia(100%) hue-rotate(210deg) brightness(80%) saturate(120%); }
.dt-as-grid LI FIGURE IMG.Photo {				max-width: 100%; max-height: 180px; }
.dt-as-grid LI A > DIV {							display: block; position: absolute; box-sizing: border-box; width: 100%; height: 70px; left: 0; bottom: 0; padding: 10px 15px; color: #333; background-color: #D0D0E0;
												display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 16px; transform: 100ms; }
.dt-as-grid DIV .PN {							font-weight: 600; }
.dt-as-grid DIV .Price {						font-size: 17px; font-weight: 600; color: var(--color-key1); }
.dt-as-grid DIV .Title {						flex-basis: 100%; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-as-grid LI:hover DIV IMG.Photo {			transform: scale(1.612); }
.dt-as-grid LI:hover DESCRIPTION {				color: #FFF; background-color: var(--color-key1); }
.dt-as-grid LI:hover PRICE {					color: var(--color-key2); }
.dt-as-grid LI:hover BUTTON.O {					opacity: 1; }

/* Пагинация */
.dt-paging {									padding-top: 40px; text-align: center; }
.dt-paging-button {								all: unset; display: inline-block; padding: 6px 10px; margin: 0 2px; font-size: 16px; font-weight: 500; text-decoration: none !important; color: var(--color-key1); outline: none; cursor: pointer; }
.dt-paging-button:not(.disabled):hover {		color: var(--color-key2); }
.dt-paging-button.current {						color: var(--color-key2); font-size: 25px; }
.dt-paging-button.disabled {					cursor: default; color: #BBB; }
.dataTables_wrapper:after {						content: ""; display: table; clear: both; }

/* Не найдено */
.dt-not-found {									display: none; justify-content: center; align-items: center; height: 70px; margin-top: 20px; background: var(--color-key2); color: #FFF; font-size: 21px; font-weight: 600; }
.dt-not-found DIV.A {							animation: not-found 900ms cubic-bezier(0.455, 0.030, 0.515, 0.955) both; }
.dt-empty {										padding: 5px 0 5px 43px !important; }
@keyframes not-found {
	0%, 100% {									transform: translateX(0); }
	10%, 30%, 50%, 70% {						transform: translateX(-20px); }
	20%, 40%, 60% {								transform: translateX(20px); }
	80% {										transform: translateX(16px); }
	90% {										transform: translateX(-16px); }
}

/* Превьюшка */
#Preview {										position: absolute; z-index: 999; left: 60px; top1: 0; background: #FFF; padding: 12px; opacity: 0; transition: 300ms opacity; outline: 1px solid #CCC; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }
#Preview IMG {									display: block; max-width: 180px; max-height1: 180px; filter1: grayscale(1); }
#Preview.A {									opacity: 1; }

@keyframes not-found {
	0%, 100% {									transform: translateX(0); }
	10%, 30%, 50%, 70% {						transform: translateX(-20px); }
	20%, 40%, 60% {								transform: translateX(20px); }
	80% {										transform: translateX(16px); }
	90% {										transform: translateX(-16px); }
}

}


/* MOBILE */
@media screen and (max-width: 980px) {

/* Войдите или */
BODY.USER .dt-inf {								display: none; }
.dt-inf {										position: relative; margin: 45px 0 15px 0; text-align: center; font-weight: 500; }
.dt-inf:before {								position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 25px; height: 25px; background: url(/i/icons.svg#lock) no-repeat center; content: ""; }
.dt-inf A {										color: var(--color-key2); }
.dt-inf A:hover {								color: var(--color-key1); }

/* Фильтры */
.dt-top-panel {									display: none !important; }

/* Общий вид таблиц */
.dt-as-table {									width: 100%; }
.dt-as-table TR {								display: block; position: relative; padding: 15px 0; border-top: 1px solid var(--color-lines);
												display: flex; flex-wrap: wrap; justify-content: space-between; }
.dt-as-table THEAD TR {							border: none; }
.dt-as-table A {								display: block; font-size: 15px; color: #000; text-decoration: none; }

/* если есть фото */
.dt-as-table THEAD TR {								padding-left: 0 !important; }
.dt-as-table TR:not([img="0"]) {					padding-left: 55px; }
.dt-as-table TR:not([img="0"]) TD:nth-child(4) {	width: 260px; }

/* фотка */
.dt-as-table TD:first-child A {					display: block; position: absolute; left: 0px; top: 12px; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center;}
.dt-as-table TD:first-child A IMG {				max-width: 44px; max-height: 44px; background: #FFF; mix-blend-mode: multiply; }
.dt-as-table TD:first-child A:empty {			display: none; }

/* производитель */
.dt-as-table TD:nth-child(3) {					order: 1; } 
.dt-as-table TD:nth-child(3) A {				font-size: 14px; color: var(--color-grey); }
.dt-as-table TD:nth-child(3) A:not(:empty) {	padding-right: .3em; }

/* код */
.dt-as-table TD:nth-child(2) {					order: 2; flex-grow: 9; } 
.dt-as-table TD:nth-child(2) A {				font-size: 14px; color: var(--color-grey) !important; }

/* цена */
.dt-as-table TD:nth-last-child(2) {				order: 3; font-weight: 500; }

/* наименование */
.dt-as-table TD:nth-child(4) {					order: 4; width: 315px; margin-top: 3px; } 
.dt-as-table TD:nth-child(4) SPAN {				display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* остаток и единица */
.dt-as-table TD:nth-last-child(3) {				order: 5; margin-top: 3px; } 
.dt-as-table TD:nth-last-child(3) A {			font-size: 14px; color: var(--color-grey) !important; }

/* купить инлайн */
.dt-as-table TD:last-child {					display: none; }

/* Пагинация */
.dt-paging {									padding-top: 10px; text-align: center; }
.dt-paging-button {								all: unset; display: inline-block; padding: 6px 10px; margin: 0 2px; font-size: 16px; font-weight: 500; text-decoration: none !important; color: var(--color-key1); outline: none; cursor: pointer; }
.dt-paging-button:not(.disabled):hover {		color: var(--color-key2); }
.dt-paging-button.current {						color: var(--color-key2); font-size: 25px; }
.dt-paging-button.disabled {					cursor: default; color: #BBB; }
.dataTables_wrapper:after {						content: ""; display: table; clear: both; }

#Preview { 										display: none; }

}

/* FLEXSLIDER */

/* RESETS */
.flex-container a:hover,
.flex-slider a:hover { outline: none; }
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.flex-pauseplay span { text-transform: capitalize; }
/* BASE STYLES */
.flexslider { margin: 0; padding: 0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
.flexslider .slides img { width: 100%; display: block; }
.flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .flexslider .slides { display: block; }
* html .flexslider .slides { height: 1%; }
.no-js .flexslider .slides > li:first-child { display: block; }
/* DEFAULT THEME */
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; zoom: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); }
.flexslider .slides { zoom: 1; }
.flexslider .slides img { height: auto; -moz-user-select: none; }
.flex-viewport { max-height: 2000px; }
.loading .flex-viewport { max-height: 300px; }
@-moz-document url-prefix() { .loading .flex-viewport { max-height: none; } }
.carousel li { margin-right: 5px; }
.flex-direction-nav { *height: 0; }
.flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); }
.flex-direction-nav a.flex-next:before { content: '\f002'; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-direction-nav .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; }
.flexslider:hover .flex-direction-nav .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter: alpha(opacity=0); cursor: default; z-index: -1; }
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }
.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; }
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; }
.flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; }
.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; }
.flex-control-thumbs li { width: 25%; float: left; margin: 0; }
.flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -moz-user-select: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs .flex-active { opacity: 1; cursor: default; }
/* RESPONSIVE */
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
  .flex-direction-nav .flex-next { opacity: 1; right: 10px; }
}
/*.tox.tox-silver-sink.tox-tinymce-aux { display: none !important; }*/

/*.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {	left: 30px !important; top: 30px; }*/

:root {
 						--spacing: .75em;
 						--double-spacing: 1.5em;
}

.UGC {					font-size: 17px; line-height: 1.5; }
.UGC A {				color: var(--color-key1); text-decoration: underline; transition: 100ms; }
.UGC A:hover {			color: var(--color-key2); }
.UGC H2 {				margin: var(--spacing) 0; font-size: 26px; text-align: left; }
.UGC H3 {				margin: var(--spacing) 0; font-size: 21px; }
.UGC H4 {				margin: var(--spacing) 0; font-size: 17px; }
.UGC P {				margin: var(--spacing) 0; }
.UGC DIV {				margin: var(--spacing) 0; }
.UGC EM {				font-style: normal; color: var(--color-key2-text); }
.UGC SUP {				vertical-align: super; font-size: 65%; }
.UGC SUB {				vertical-align: sub; font-size: 65%; }

.UGC HR {				margin: var(--double-spacing) 0; background-color: var(--color-lines); height: 1px; border: 0; }

.UGC UL,
.UGC OL {				margin: var(--spacing) 0; list-style-position: inside; }
.UGC UL > LI::marker {	color: var(--color-key2); font-size: 20px; line-height: 0; }
.UGC OL > LI::marker {	color: var(--color-key2); font-weight: 500; }
.UGC LI > UL,
.UGC LI > OL {			margin-left: 2em; }
.UGC LI {				margin: var(--spacing) 0; }

.UGC DIV.Note1 {		margin: var(--spacing) 0; padding: 10px 0 10px 20px; border-left: 3px solid var(--color-key2); }
.UGC DIV.Note2 {		margin: var(--spacing) 0; padding: 20px; background-color: var(--color-key2); }
.UGC DIV.Note3 {		margin: var(--spacing) 0; padding: 10px 0 10px 20px; border-left: 3px solid var(--color-key1); }
.UGC DIV.Note4 {		margin: var(--spacing) 0; padding: 20px; background-color: var(--color-key1); color: #FFF; }
.UGC DIV.Note4 A {		color: var(--color-key2); }

.UGC TABLE {			margin: var(--spacing) 0; font-size: 14px; width: 100%; background-color: #FFF; }
.UGC TABLE TD {			padding: 5px; border: 1px solid var(--color-lines) !important; }
.UGC TABLE THEAD TD {	background-color: var(--color-key2); font-weight: 600; }
.UGC TABLE TFOOT TD {	background-color: #DDD; }

.UGC FIGURE.image {		width: 100%; display: flex !important; flex-direction: column; margin: var(--spacing) 0 var(--double-spacing) 0 !important; }
.UGC FIGURE.image.align-left { align-items: flex-start; }
.UGC FIGURE.image.align-center { align-items: center; }
.UGC FIGURE.image.align-right { align-items: flex-end; }
.UGC FIGCAPTION {		margin: var(--spacing) 0 0 0 !important; padding: 0 !important; color: var(--color-grey); }

.UGC .Embed { 			overflow: hidden; padding-top: 56.25%; position: relative; }
.UGC .Embed IFRAME {	position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 0; }
.UGC .Embed > SPAN {	position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); left: 0; top: 0; margin: 2px; }

/* https://www.joshwcomeau.com/css/custom-css-reset/ */

.UGC IMG,
.UGC PICTURE,
.UGC VIDEO,
.UGC CANVAS,
.UGC SVG {				display: block; height: auto; max-width: 100%; }

.UGC P,
.UGC H1,
.UGC H2,
.UGC H3,
.UGC H4 {				overflow-wrap: break-word; }

.UGC P {				text-wrap: pretty; }

.UGC H1,
.UGC H2,
.UGC H3,
.UGC H4 {				text-wrap: balance; line-height: 1.2; }


@media screen and (max-width: 1233px) {

.UGC H2 {				font-size: 23px; }
.UGC H3 {				font-size: 20px; }
.UGC H4 {				font-size: 17px; }

}