@charset "UTF-8";

:root {
  --color-red: #d02e02;
  --color-white: #ffffff;
 
  --color-blue: #1d5998;
  --color-light-blue: #2384b8;
  --color-dark-blue: #11374b;

  --color-gray: #f2f2f2;
  --color-green: #9fcb51;
  --color-yellow: #ffce24;
  --color-black: #000000;

  --button-color: var(--color-yellow);
  --button-text-color: black;
  --button-hover-color: black;
  --button-hover-text-color: white;

  --link-color: var(--color-blue);
  
  --span: 2rem;
	--span-small: calc(var(--span) / 2);
  --span-large: calc(var(--span) * 2);

  --block-padding: calc(var(--span) * 5);

  --page-width: 1400px;

  --heading-color: var(--color-blue);

  --input-color: #fff;
  --input-border-color: var(--color-blue);
  --input-border: 2px solid var(--color-blue);
  --input-active-border: 2px solid var(--color-blue);
  --input-padding: var(--span-small) var(--span);

  --border-radius: 1rem; 
  --shadow: 0 0 5px 0 #00000020;

}

/* Reset */
/* -------------------------------------------------------------------- */
html { color: #000; background: #fff; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td {
margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
ol, ul { list-style: none; list-style-position: inside;}
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
legend { color: #000; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
* { box-sizing: border-box; vertical-align: top; }

/* HTML */
/* -------------------------------------------------------------------- */
html { height: 100%; font-size: 10px /* clamp(8px, 1vw, 12px); */ }
body { width: 100%; min-height: 100%; vertical-align: top; color: #202020; font-size: 1.7rem; font-family: "Roboto", "Tahoma", sans-serif; font-weight: 300; line-height: 1.3; }
body > .container { overflow: hidden; }

/* Main elements */
/* -------------------------------------------------------------------- */
img { display: inline-block; max-width: 100%; height: auto; }
p { margin-bottom: 0.5em; }
b { font-weight: bold; }
a { text-decoration: none; color: inherit; }
em { font-weight: bold; }
strong { font-weight: bold;}

/* Headings */
/* -------------------------------------------------------------------- */
h1, h2, h3, h4 { margin-bottom: 0.5em; line-height: 1.1; }
h1 { font-size: 3.2rem; font-weight: 400; }
h2 { font-size: 2.8rem; font-weight: 400; }
h3 { font-size: 2rem; }

/* Lists */
/* -------------------------------------------------------------------- */

.hidden { display: none !important; }
.clearfix { clear: both; }

.-with-shadow { box-shadow: --shadow; }
.-with-shadow:hover { box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); }

i { display: inline-block; -webkit-mask: center / contain no-repeat, transparent; mask: center / contain no-repeat, transparent; width: var(--span); height: var(--span); mask-position: center; mask-repeat: no-repeat; -wbkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; }

i[data-icon="more"] { mask-image: url(../img/icon-more.png); -webkit-mask-image: url(../img/icon-more.png);}
i[data-icon="phone"] { mask-image: url(../img/icon-phone.png); -webkit-mask-image: url(../img/icon-phone.png); }
i[data-icon="catalog"] { mask-image: url(../img/icon-catalog.png); -webkit-mask-image: url(../img/icon-catalog.png); }
i[data-icon="categories"] { mask-image: url(../img/icon-categories.png); -webkit-mask-image: url(../img/icon-categories.png); }
i[data-icon="buy-with-click"] { mask-image: url(../img/icon-buy-with-click.png); -webkit-mask-image: url(../img/icon-buy-with-click.png); }

i[data-icon="install"] { mask-image: url(../img/icon-install.png); -webkit-mask-image: url(../img/icon-install.png); }
i[data-icon="favorites"] { mask-image: url(../img/icon-favorites.png); -webkit-mask-image: url(../img/icon-favorites.png); }
i[data-icon="support"] { mask-image: url(../img/icon-support.png); -webkit-mask-image: url(../img/icon-support.png); }

i[data-icon="product-cheaper"] { mask-image: url(../img/icon-product-cheaper.png); -webkit-mask-image: url(../img/icon-product-cheaper.png); }
i[data-icon="product-delivery"] { mask-image: url(../img/icon-product-delivery.png); -webkit-mask-image: url(../img/icon-product-delivery.png); }
i[data-icon="preorder"] { mask-image: url(../img/icon-preorder.png); -webkit-mask-image: url(../img/icon-preorder.png); }

i[data-icon="purpose-dlya-dachi"] { background: url(../img/icon-purpose-villa.png) center/contain no-repeat; }
i[data-icon="purpose-v-avtomobil"] { background: url(../img/icon-purpose-car.png) center/contain no-repeat; }
i[data-icon="purpose-na-yaxtu"] { background: url(../img/icon-purpose-yacht.png) center/contain no-repeat; }
i[data-icon="purpose-v-zagorodnyij-dom"] { background: url(../img/icon-purpose-house.png) center/contain no-repeat; }
i[data-icon="purpose-v-ofis"] { background: url(../img/icon-purpose-office.png) center/contain no-repeat; }
i[data-icon="purpose-v-kvartiru"] { background: url(../img/icon-purpose-appartment.png) center/contain no-repeat; }
i[data-icon="logo"] { background: url(../img/icon-logo.png) center/contain no-repeat; }


/* Формы */
/* -------------------------------------------------------------------- */
.ui-form {  }


@media screen and (max-width: 768px) {
	.ui-form { flex-wrap: wrap; }
}

.ui-form .form-heading .comment { font-size: 90%; font-style: italic; }

.ui-form input:not([type="submit"]),
.ui-form textarea,
.ui-form select { width: 100%; }

.ui-form textarea { min-height: 10rem; }

.ui-form.-horizontal { display: flex; align-items: center; gap: 1rem; }

.ui-form-input.-required label::after { content: '*'; display: inline; color: var(--color-red); }
.ui-form-input.-error label { color: var(--color-red); }
.ui-form-input.-error input, .ui-form-input.-error select, .ui-form-input.-error textarea {
 --input-border: 2px solid var(--color-red);
}
.ui-form-input.-error .vcap input { border: 2px solid var(--color-red); }

.ui-form .ui-form-input { margin-bottom: var(--span); }
.ui-form .ui-form-input label { font-weight: normal; margin-bottom: 0.5em; display: block; font-size: 90%; }

.ui-form .form-heading { margin-bottom: var(--span); }
.ui-form .form-input.-fancy { display: flex; margin-bottom: var(--span); border: var(--input-border); }
.ui-form .form-input.-fancy > * { margin-bottom: 0; border: none; }
.ui-form .form-input.-fancy label { width: 30%; min-width: 200px; background: #f7f7f7; padding: 0.5rem 1rem; font-size: 90%; text-align: right; }


@media screen and (max-width: 640px) {
	.ui-form .form-input.-fancy { flex-wrap: wrap; }
	.ui-form .form-input.-fancy > * { flex-grow: 1; }

}


.ui-button, input[type="button"], input[type="submit"], button {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer;
  text-decoration: none; white-space: nowrap; font-size: 1.6rem; margin: 0; padding: 1rem var(--span);
  border-radius: var(--border-radius); align-items: center; 
 	background: var(--button-color); color: var(--button-text-color); outline: none; border: 0;  position: relative; transition: 0.3s all;
}

.ui-button i { background: black; }
.ui-button:hover, input:hover[type="button"], input:hover[type="submit"], button:hover { background: #202020; color: white; }

.ui-button > i { margin-right: 0.5rem; background-size: auto; }
.ui-button.-mini { padding: 0.5rem 1rem; border-radius: 0.5rem; }
.ui-button.-black { background: #202020; color: white; }
.ui-button.-black:hover { background: #505050; }
.ui-button.-black i { background: white; }

.ui-button.-tag { padding: 3rem; background: white; color: black; }

.ui-button.-hollow { background: white; border: var(--input-border); color: var(--text-color); display: inline-flex; }
.ui-button.-hollow:hover { background: var(--input-text-color); color: black; border-color: black; }

.ui-button.-blue { background: var(--color-blue); color: var(--color-white); }
.ui-button.-blue:hover { background: var(--color-black); color: white !important; }
.ui-button.-blue i { background: white; }

.ui-button.-gray { background: var(--color-gray); color: black; }
.ui-button.-gray:hover { background: black; color: white; }
.ui-button.-gray:hover i { background: white; }

.ui-round-button { display: flex; align-items: center; position: relative;  }
.ui-round-button::before { content: ''; display: block; border-radius: 50%; background: no-repeat center/auto 1.5rem, var(--button-color); width: 3rem; height: 3rem; margin-right: 0.5rem; transition: all .3s;}
.ui-round-button:hover::before { background-color: var(--button-hover-color); color: var(--button-hover-text-color); }
.ui-round-button.-blue::before { background: var(--color-blue); color: var(--color-white); }
.ui-round-button.-blue:hover::before { background: var(--color-black); }

.ui-radio-row { display: flex; gap: 1rem; align-items: center; justify-content: start; }
.ui-radio-row input { flex-basis: 2rem; }
.ui-radio-row label { margin-bottom: 0 !important; font-size: 95%; }

.ui-form-input.-radio-group .options { padding: 1rem; border-radius: 1rem; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); }


.ui-icon-button { --input-color: black; --input-background: transparent; background: var(--input-background); border: none; display: flex; align-items: center; gap: 1rem; padding: 0; color: var(--input-color); }
.ui-icon-button:hover { --input-color: var(--color-blue); background: var(--input-background); color: var(--input-color); }
.ui-icon-button i { width: 3rem; height: 3rem; min-width: 3rem; background: var(--input-color); }

.ui-button.-large { width: 100%; }

.ui-input, input[type="text"], input[type="checkbox"], input[type="password"], input[type="email"], select, textarea {
  padding: var(--input-padding); font-size: 1.5rem; border: var(--input-border); outline: 0; border-radius: var(--border-radius);
  display: block; 
  color: var(--color-black); overflow: hidden; background: var(--input-color); transition: all .3s; }

.ui-input:focus, input:focus[type="text"], input:focus[type="checkbox"], input:focus[type="password"], input:focus[type="email"], select:focus, textarea:focus {
	border-color: var(--color-blue); box-shadow: var(--shadow); border:var(--input-active-border); }

input[type="text"]:focus, input[type="checkbox"]:focus, select:focus, textarea:focus { background: white; box-shadow: var(--shadow); }
input[type="text"]::placeholder, textarea::placeholder { opacity: 0.8;  }

input[type="checkbox"] {  }
textarea { min-height: 5rem; }

/* Checkbox */
input[type="checkbox"] { cursor: pointer; width: 2rem; height: 2rem; appearance: none; -webkit-appearance: none;
	border: none; background: white; padding: 0; max-width: var(--span); position: relative; margin-right: 1rem; display: inline-block;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0; }  
input[type="checkbox"]:checked::after { display: inline-block; content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: var(--color-blue); }

/* Select */
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); 
	background-repeat: no-repeat; background-size: 1.5rem 1rem; background-position: right center;
	background-clip: border-box; -webkit-background-clip: border-box; }

input:disabled, select:disabled, textarea:disabled { opacity: 0.7; }

.vcap-input { display: flex; align-items: center; align-content: center; margin-bottom: var(--input-padding); }
.vcap-input input { margin-bottom: 0; }
.vcap-input label { margin-bottom: 0 !important; }
.vcap-input label a { color: var(--link-color); text-decoration: underline; }


.ui-tabs > nav { display: flex; flex-wrap: wrap; margin-bottom: 2px }
.ui-tabs > nav a { display: inline-block; padding: 1rem 2rem; text-decoration: none; font-size: 1.6rem; cursor: pointer; flex-grow: 1; text-align: center; margin-right:0.5rem; background: var(--color-gray); }
.ui-tabs > nav a:hover { background: var(--color-black); color: white; }
.ui-tabs > nav a.active { background: var(--color-blue); color: white; }
.ui-tabs > .content {	}
.ui-tabs > .content > * { display: none; padding: var(--span-large); border: 2px solid var(--color-gray); }
.ui-tabs > .content > *.active { display: block; }

.ui-slider .slick-slide {margin: 1rem; }

.ui-links-group a { color: black; display: inline-block; padding: 0.5rem 1rem; background: #e0e0e0; font-size: 1.6rem; margin-right: 0.5rem; margin-bottom: 0.5rem; text-decoration: none; transition: .3s all; border-radius: 0.3rem; }
.ui-links-group a:hover { color: white; background: black; }

.button-up {transition: opacity .3s ease; opacity: 0.6; background-color: var(--color-blue); height: 6rem; width: 6rem; bottom: 4rem; right: 4rem; cursor: pointer; display: none; position: fixed; z-index: 999; color: #fff;  align-items: flex-end; justify-content: center; border-radius: 50%; user-select: none; }
.button-up:before { content: ""; position: absolute; top: 40%; width: 2rem; height: 2rem;	border-left: 3px solid white; border-top: 3px solid white; transform: translateX(-50%) rotate(45deg); left: 50%; }
.button-up:hover {opacity: 1; background-color: black; }


/* Всплывающее окно */
/* -------------------------------------------------------------------- */
.ui-grid { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 2rem; justify-content: center;  }
.ui-grid.-narrow { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 1rem; }
.ui-grid.-narrower { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
.ui-grid.-wide { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); }
@media screen and (max-width: 640px) {
}

/* Панели */
/* -------------------------------------------------------------------- */
.ui-panel { padding: var(--span-large); box-shadow: var(--shadow); background: white; border-radius: var(--border-radius); }
.ui-panel.-gray { background: var(--color-gray); }
.ui-panel.-frameless { padding:0; overflow: hidden; }

/* Карточка */
/* -------------------------------------------------------------------- */
.ui-card { padding: var(--span-large); border-radius: var(--border-radius); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: all .3s; display: flex; gap: 1em; flex-flow: column;}
.ui-card:hover { box-shadow: inset 0 0 0 2px var(--color-blue); }

.ui-card.-horizontal { display: flex; align-items: center; flex-flow: row; background: linear-gradient(140deg, #207faf40, transparent 10rem); }
.ui-card::hover { background: white; }
.ui-card.-horizontal:hover { background: white; }

.ui-card.-mini { padding: var(--span);  font-size: 90%; }
.ui-card.-mini .image { width: 100px; height: 80px; flex-shrink: 0; display: flex; align-items: center; position: relative; }
.ui-card.-mini .image img { position: absolute; margin-bottom: 0; left:0; top:0; width:100%; height:100%; object-fit:contain; }

@media screen and (max-width: 768px) {
	.ui-card.-mini { padding: var(--span-small); }
	.ui-card.-mini .image { width: 6rem; height: 6rem;  }
}

.ui-article-card { border-radius: var(--border-radius); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: all .3s; display: flex; gap: 1em; flex-flow: column;}
.ui-article-card .content  { padding: var(--span); }
.ui-article-card .content h3 { color: var(--color-blue); }
.ui-article-card .content .text { font-style: italic; }
.ui-article-card .content .read-more { margin-top: 1em; }
.ui-article-card .image {  width: 100%; margin-bottom:0; background: var(--color-gray); position: relative; overflow: hidden; padding-top: 60%; }
.ui-article-card .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; }
.ui-article-card:hover { box-shadow: inset 0 0 0 2px var(--color-blue); }

.ui-article-card .read-more { font-size: 90%; }
.ui-article-card .read-more::before {
	mask: url(../img/icon-arrow.svg) center / 1.6rem auto no-repeat, linear-gradient(black, black); mask-composite: exclude, add;
	-webkit-mask: url(../img/icon-arrow.svg) center / 1.6rem auto no-repeat, linear-gradient(black, black); -webkit-mask-composite: exclude, add;
	}

.ui-article-item { display: flex; gap: 2rem; margin-bottom: 2rem; }
.ui-article-item .image { flex-basis: 25rem; flex-shrink: 0; }
.ui-article-item .image a { padding-top: 70%; position: relative; display: block; overflow: hidden; }
.ui-article-item .image img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; }
.ui-article-item .read-more { margin-top: 1rem;  }
.ui-article-item .read-more::before {
	mask: url(../img/icon-arrow.svg) center / 1.6rem auto no-repeat, linear-gradient(black, black); mask-composite: exclude, add;
	-webkit-mask: url(../img/icon-arrow.svg) center / 1.6rem auto no-repeat, linear-gradient(black, black); -webkit-mask-composite: exclude, add;
}


.ui-image-card { border-radius: var(--border-radius); box-shadow: var(--shadow); display: block; overflow: hidden; }
.ui-image-card .image { display: block; padding-top: 60%; position: relative !important; }
.ui-image-card img { position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; }


/* Адптивное меню */
/* -------------------------------------------------------------------- */
.ui-mobile-menu { display:none; position: fixed; top:0; left:0; width: 100%; height: auto; z-index: 200; max-height: 100%; overflow: auto; }
.ui-mobile-menu .menu-main li ul { position: relative; color: white; background: transparent;}
.ui-mobile-menu .menu-main li.active { background: none !important; color: white !important; }
.ui-mobile-menu .menu-main li.active > a,
.ui-mobile-menu .menu-main li.active > span { font-weight: bold; }
.ui-mobile-menu .menu-main li.active > ul { margin-left: 2rem; padding-left: 0;  background: #00000020;  }
.ui-mobile-menu .menu-main li ul li { border: none !important; }
.ui-mobile-menu li { display: block; } 
.ui-mobile-menu li a,
.ui-mobile-menu li span { display: block; padding: 0.5rem 0; }
.ui-mobile-menu li:hover > a { text-decoration: underline; }
.ui-mobile-menu .open-button { width: 100%; border-radius: 0; text-align: left; padding-left: 4rem; justify-content: start; background: black; height: 5rem; }
.ui-mobile-menu > ul { display: none; background: #000000d0; color: white; padding: 2rem 4rem; z-index: 100;  overflow: auto;  }
.ui-mobile-menu > ul > li > ul { display: none; padding: 1rem; margin: 0 -4rem; font-size: 90%; padding-left: 5rem; }
.ui-mobile-menu > ul > li.active > ul { display: block; background: #00000020;
	border-bottom: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.3); }
.ui-mobile-menu li.active > a { font-weight: bold; }
.ui-mobile-menu li.active > ul { display: block; }
.ui-mobile-menu .open-button::after {
	transition: all .3s; display: block; content: ''; right: 4rem; top: 50%; transform: translateY(-50%); position: absolute;
	width: 1.5rem; height: 1.5rem; background: url(../img/icon-burger.png) no-repeat center; background-size: 1.5rem auto;
}

@media screen and (max-width: 768px) {
	-body { padding-top: 5rem; }
	.main-menu { display: none; }
	.ui-mobile-menu { display: block;  }
	.ui-mobile-menu.open > ul { display: block; height: 100%; }
	.ui-mobile-menu.open .open-button { background: #b31503; }
	.ui-mobile-menu.open .open-button::after { opacity: 1; background-image: url(../img/icon-close.png);  }
}

/* Хлебные крошки */
/* -------------------------------------------------------------------- */
.breadcrumbs { font-size: 1.6rem; margin-bottom: 2rem;  }
.breadcrumbs ul { display: inline-flex; align-items: center; flex-wrap: wrap; }
.breadcrumbs li { padding: 0.5rem; position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; }
.breadcrumbs li:first-child::before { content:''; display: inline-block; width: 3rem; height: 3rem;
		background: url('../img/icon-breadcrumbs.png') center/1.5rem auto no-repeat , var(--color-gray); position: relative; margin-right:  0.75rem; border-radius: 50%;  }
.breadcrumbs li::after { content:'/'; display: inline-block; margin:0 0.5rem; position: relative; opacity: 0.7;  margin-left: 1rem; top: -0.2rem; }
.breadcrumbs li:last-child::after { display: none; }
.breadcrumbs li a { color: var(--color-blue); text-decoration: underline; }


/* On-page gallery */
/* -------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); justify-content: space-between; grid-gap: var(--span);
	--item-width: 10rem; --item-height: calc(var(--preview-width) / 1.5); --item-border: 2px solid var(--color-red); }
.gallery .section { position: relative; border-bottom: 2px solid var(--color-gray); background: var(--color-gray); display: flex; align-items: center; }
.gallery .section .image { width: var(--preview-width); height: var(--preview-height);  position: relative; }
.gallery .section img { position: absolute; display: block; width: 100%; height: 100%; top: 0;  left: 0; right: 0; bottom: 0; object-fit: cover; }
.gallery .section a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.gallery .section .title { text-align: left; padding: var(--span-small); transition: all .3s; display: flex; align-items: center; justify-content: flex-start; pointer-events: none; }
.gallery .section:hover { background: white; color: var(--color-red); border-color: var(--color-red); box-shadow: var(--shadow); }
.gallery .item { position: relative; border-bottom: var(--item-border); padding: 35%; display: block; transition: all .3s; top: 0; }
.gallery .item img { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; }
.gallery .item .title { text-align: center; text-decoration: underline; }
.gallery .item:hover { border: var(--item-border); box-shadow: var(--shadow); }


/* Page block */
/* -------------------------------------------------------------------- */
.page-block { --block-padding-vertical: var(--span-large); padding: var(--block-padding-vertical) var(--block-padding); overflow: hidden; position: relative; }
.page-block > .container { max-width: var(--page-width); margin: 0 auto; }
.page-block.-no-padding { padding-top:0; padding-bottom:0; }

@media screen and (max-width: 960px) {
	.page-block { --block-padding: calc(var(--span) * 3); }
}
@media screen and (max-width: 768px) {
	.page-block { --block-padding: var(--span); }
}

.page-block.-gray { background: var(--color-gray); }
.page-block.-black { background: var(--color-black); color: white; --text-color: white; --text-color: var(--color-black);}
.page-block.-dark-blue { background: var(--color-dark-blue); color: white; }
.page-block.-narrow { --block-padding-vertical: var(--span); }

.ui-section { margin-bottom: var(--span-large); }

.block-heading { font-size: 2.8rem; text-transform: uppercase; display: flex; align-items: center; margin-bottom: 1em; color: var(--heading-color); gap: 1rem;  }
.block-heading .side { flex-grow: 1; text-align: right; }
@media screen and (max-width: 768px) {
	.block-heading { flex-wrap: wrap; justify-content: center; }
	.block-heading .side { text-align: center; }
}

/* Блок сообщений */
/* -------------------------------------------------------------------- */
.message-box { background: linear-gradient(to right, transparent 30%, white, transparent 50%), #f2f2f2;
  position: relative; border-bottom: 2px solid #c5c5c5; display: flex; justify-content: flex-start; color: #494949;
  align-items: flex-start; padding: 2rem 4rem; padding-left: 12rem !important; text-align: left; margin: 2rem 0; flex-flow: column; 
  font-size: 90%;  min-height: 10rem; 
  border-radius: var(--border-radius); min-height: 100px;
}

.message-box h2 { text-align: left; font-size: 2.4rem; margin-bottom: 1rem; margin-top: 0; color: #2d67b6; }
.message-box > * { margin-bottom: 0.5rem;}
.message-box > *:last-child { margin-bottom: 0; }
.message-box:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 2rem; width: 8rem;	background: url("../img/icon-message-box-info.png") center / contain no-repeat; }
.message-box.home:before {  }
.message-box.home { border-color: #2a1c72; }

@media screen and (max-width: 768px) {
	.message-box { padding: 2rem !important; }
	.message-box:before { width: 6rem; height: 6rem; position: static; display: inline-block; left: auto; margin-right: 1rem; margin-bottom: 1rem; float: left; }
}

.pagination { display: flex; margin: 4rem 0; text-align: center; align-items: center; justify-content: start; flex-wrap: wrap; }
.pagination .title { margin-right: 2rem; }
.pagination ul { margin-bottom: 0 !important; margin-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pagination li a { display: inline-flex; margin: 0.25rem 0.25rem; background: #dddddd; border-radius: 50%; flex-basis: 4rem; min-width: 4rem; height: 4rem; transition: all .3s; align-items: center; justify-content: center; color: black;  text-decoration: none; }
.pagination li::before { display: none !important; }
.pagination li.active a { background: var(--color-blue);  color: #ffffff; }
.pagination li { display: inline-flex; list-style-type: none; margin-bottom: 0 !important; margin-left: 0; align-items: center; }
.pagination li.control a { background: #f0f0f0; }
.pagination li:not(.control) a { align-items: center; justify-content: center; text-decoration: none; }
.pagination li:hover:not(.active) a { background: black; color: white; }


/* Slider */
/* -------------------------------------------------------------------- */
.slider { display: block; position: relative; }
.slick-list { display: block;  position: relative; margin-bottom: 2rem; height: 100% !important; padding-bottom: 2rem;}
.slick-track { display: block; height: 100%; }
.slick-slider { position: relative; }

.slick-slider .slick-arrow { padding: 0; position: absolute !important; top: 50% !important;
	width: 5rem; height: 5rem; color: transparent !important;  transform: translateY(-50%); z-index: 100;
	box-shadow: none; background: white; border: 1px solid #2084b530; border-radius: 50%; }
.slick-slider .slick-arrow:hover { background: var(--color-blue); }
.slick-slider .slick-arrow::after { content: ''; display: inline-block; width: 2rem; height: 2rem; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
	mask:url(../img/icon-arrow.svg) center / contain no-repeat;
	-webkit-mask:url(../img/icon-arrow.svg) center / contain no-repeat;
	background: var(--color-blue); transition: .3s all; }
.slick-slider .slick-arrow:hover::after { background: white; }
.slick-slider .slick-prev { position: absolute; left: -6rem; transform: translateY(-50%) rotate(180deg);}
.slick-slider .slick-next { position: absolute; right: -6rem;   }
.slick-slider .slick-dots { position: absolute; bottom: -1rem;  left: 50%; white-space: nowrap; transform: translateX(-50%); }
.slick-slider .slick-dots li { display: inline-block; margin: 0.2rem; }
.slick-slider .slick-dots li button { display: inline-block; padding: 0; background: #ececec; color: transparent; width: 2rem !important; height: 2rem !important; border-radius: 50%; border: 2px solid white; }.slick-slider .slick-dots li.slick-active button { background: #2d67b6; }

@media screen and (max-width: 960px) {
	.slick-slider .slick-arrow { background-color: white; }
	.slick-slider .slick-prev { left: 1rem; }
	.slick-slider .slick-next { right: 1rem; }
}


/* Social icons */
/* -------------------------------------------------------------------- */
.social-icons { white-space: nowrap; }
.social-icons a { width: var(--span-large); height: var(--span-large); border-radius: 50%;  background: no-repeat center;
	margin-right: 0.25rem; position: relative; display: inline-flex; justify-content: center; align-items: center; transition: .3s all; }
.social-icons a:hover { background: var(--color-gray); }
.social-icons a:hover::after { transition: .3s all; filter: invert(100%); }
.social-icons a::after { content: ''; display: inline-block; width: 100%; height: 100%; opacity: 1; background: black;
	mask: no-repeat center / auto 1.5rem;  -webkit-mask: no-repeat center / auto 1.5rem; }
.social-icons a.vk::after { mask-image: url(../img/icon-social-vk.png); -webkit-mask-image: url(../img/icon-social-vk.png);}
.social-icons a.whatsapp::after { mask-image: url(../img/icon-social-whatsapp.png); -webkit-mask-image: url(../img/icon-social-whatsapp.png); }
.social-icons a.viber::after { mask-image: url(../img/icon-contacts-viber.png); -webkit-mask-image: url(../img/icon-contacts-viber.png); }


/* Статья */
/* -------------------------------------------------------------------- */
.article {
	--text-color: var(--color-black; );
	--link-color: var(--color-blue);
	--heading-color: var(--color-blue);
}

.article > .ui-panel { margin-bottom: var(--span); }
.article a { color: var(--link-color); text-decoration: underline; }
.article a:hover { color: black; text-decoration: none; }
.article section { margin-bottom: var(--span-large); }
.article h1, article h2 { color: var(--heading-color); }
.article h3 { color: var(--text-color); }
.article > h2:first-child { margin-top: 0; }
.article h1 + img { margin-top: 0; }
.article h1 + h2 { margin-top: 0; }
.article p { margin-bottom: 0.5em; }
.article p + img { margin-top: 0; }
.article i { width: auto; height: auto; }

.article em { font-weight: bold; color: var(--color-blue); font-style: normal; }
.article strong { font-weight: bold; }

.article img { margin-bottom: 2rem; }

.article .ui-slider { margin-left: -1rem; margin-right: -1rem; }

.article ul, .article ol { margin: 0; margin-bottom: var(--span);  }
.article ul > li { list-style-type: none; }
.article ol > li { list-style-type: decimal; }
.article ul > li,
.article ol > li { margin-bottom: 0.25em; }
.article ul > li::before { content:''; display: inline-block; width: 0.5rem; height:0.5rem; background: var(--color-blue); margin-right: 0.5rem; position: relative; border-radius: 2px; top:-2px; }

#article .content { margin-bottom: var(--span); }

/* Картинки */
/* -------------------------------------------------------------------- */
img.-full { width: 100%; height: auto; float: none; max-width: none; margin-left: 0; margin-right: 0; }
img.-left { float: left; margin-right: 2rem; max-width: 300px; height: auto; position: relative; }
img.-right { float: right; margin-left: 2rem; max-width: 300px; height: auto; position: relative; }

/* Таблицы */
/* -------------------------------------------------------------------- */
table { width: 100%; border: 2px solid #ccc; margin-bottom: 4rem; }
table caption { display: none; }
table td,
table th { border: 1px solid #d4d4d4; padding: 0.75rem 2rem; }
table th { background: #1b75b5; text-align: left; color: white; font-size: 1.8rem; }
table td { text-align: left; }
table td strong { color: #2a1c72; }

table.no-border { border: none; }
table.no-border td,
table.no-border th { padding:0; border: none; vertical-align: middle !important; }

@media screen and (max-width: 960px) {
	table { display: block; overflow: auto; max-width: 100%; }
}


#top { display: none; position: fixed; left:0; top:0; width: 100%; box-shadow: 0 5px 12px 0 #00000050; background: white; padding-top: 0.5rem; padding-bottom: 0.5rem; z-index: 200; }
#top.-visible { display: block; }
#top > .container { display: flex; justify-content: center; gap: 1rem 2rem; align-items: center; flex-wrap: wrap;  }
#top .phones {  text-align: right; line-height: 1.1; flex-basis: 50%; flex-grow: 1}
#top .phone { font-size: 2.2rem;  display: block; white-space: nowrap; }
#top .phone strong { color: var(--color-blue); }
#top .site-logo { display: block; min-width: 160px; background: url(../img/site-logo.png) center / contain no-repeat; padding-top: 4%; min-height: 5rem;}
#top .shop-mini-cart { overflow: hidden; }
#top .shop-mini-cart .total { width: 4rem; height: 4rem; background-size: 50% auto; }
#top .shop-mini-cart .total .count { display: none; }

@media screen and (max-width: 640px) {
	#top .phones { display: none; }
}

#header { padding-bottom: 1rem; z-index: 100; }
#header.page-block { overflow: visible;  }
#header > .container { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; justify-content: center; }
#header .site-logo { flex-basis: 230px; background: url(../img/site-logo.png) center / contain no-repeat; padding-top: 7%; min-height: 8.5rem;}
#header .slogan { max-width: 300px; font-size: 95%; box-shadow: inset 0 0 5px 0 #00000020; padding: 1rem; border-radius: 0.5rem; display: flex; align-items: center; border-left: 10px solid var(--color-blue); overflow: hidden; min-height: 8.5rem;  }
#header .worktime { font-size: 90%; flex-grow: 1; }
#header .worktime .title { background: var(--color-gray); padding: 0.5rem 0.5rem; margin-bottom: 0.25rem; border-radius: 0.5rem; font-weight: bold; display: inline-block; color: var(--color-red); }

#header .contacts { font-size: 1.7rem; justify-self: center; flex-grow: 1; flex-basis: 280px;}
#header .contacts a { color: var(--color-blue); text-decoration: underline; }

#header .shop-mini-cart { flex-grow: 1; flex-basis: 4rem; }

#header .phones {  overflow: hidden; text-align: right; line-height: 1.1; }
#header .phone { font-size: 2.4rem;  display: block; }
#header .phone strong { color: var(--color-blue); }
#header .callback-button { padding: 1.5rem 2rem; }
#header .callback-button i { width: 3rem; height: 3rem;  }

#header .social-icons a { background: var(--color-gray); }
#header .social-icons a.whatsapp { background: #9fcb50; }
#header .social-icons a.viber { background: #8351ac; }
#header .social-icons a.viber::after { background: white; }


@media screen and (max-width: 960px) {
	#header .worktime { flex-grow: 0; }
}

@media screen and (max-width: 768px) {
	#header .shop-mini-cart {  }
	#header .contacts { flex-grow: 0; text-align: center; }
}

@media screen and (max-width: 768px) {
	#header .slogan { display: none; }
}

@media screen and (max-width: 640px) {
	#header .site-logo { flex-basis: 160px; min-height: 6rem; }
	#header .worktime { display: none; }
}

@media screen and (max-width: 480px) {
	#header .callback-button { display: none; }
}



/* Slider */
/* -------------------------------------------------------------------- */
#slider { width: 100%; position: relative; overflow: hidden; background: linear-gradient(to top, #ececec, transparent 10rem); color: var(--color-white); --heading-color: var(--color-white); z-index: 1;}
#slider > .container { position: relative; padding-top: 26%; }
#slider .slides-container { position: absolute; height: 100%; top: 0; left: 0; right: 0; width: 100%; }
#slider .slide { margin:0; }
@media screen and (max-width: 768px) {
	#slider { display: none; }
}

#slider .slide > a { display: block; height: 100%; }

.slide { position: relative; text-align: right; height: 100%; }
.slide .image { position: absolute; top: 0; left: 0; right: 0; bottom: 0;  object-fit: cover; }
.slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .content-wrapper { text-align: right; }
.slide .content { position: absolute; left: var(--block-padding); top: 50%; transform: translateY(-50%); text-align: left; overflow: hidden; width: 50%; max-width: 500px; z-index: 10; }
.slide a.more { display: inline-flex; align-items: center; justify-content: center;
	flex-wrap: nowrap; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 1.6rem;
	margin: 0; padding: 1.5rem 3rem; border-radius: 0; background: #2a1c72; color: #ffffff;
	outline: none; border: 0; position: relative; transition: 0.3s all; margin-top: 2rem; }


@media screen and (max-width: 960px) {
	.slide .content { transform: translateY(-50%) scale(0.8); }
}



#about { --heading-color: var(--color-blue); position: relative; }
#about.page-block {}
#about::after { content: ''; display: block; position: absolute; right: 0rem; top:0; bottom:0; width: 100%; z-index:0;
	background: url(../img/about-bg-truck.png) center right / contain no-repeat; pointer-events: none; 
}
#about > .container { display: grid; gap: var(--span-large); grid-template-columns: minmax(300px, 23%) auto; }

#about h1 { color: var(--color-blue); padding-left: 8rem; max-width: 80rem; position: relative; }
#about h1::before { content:''; display: inline-block; width: 6rem; height: 6rem; background: url(../img/icon-logo.png) center/contain no-repeat; position: absolute; left:0; top: 50%; transform: translateY(-50%); }

@media screen and (max-width: 960px) {
	#about > .container { display: block; }
	#about .side .banner { display: none; }
	#about .text { margin-bottom: var(--span); }
}



#contacts.page-block { background: url(../img/contacts-bg.jpg) center / cover no-repeat; }
#contacts > .container { position: relative; }

#contacts form { background: linear-gradient(to top, #005ca120, white 50px), white; color: var(--color-black); width: 100%; max-width: 600px; margin-top: var(--span-large); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; --input-border: 2px solid var(--color-blue); --button-color: var(--color-blue); position: relative;  }
#contacts form h2 { background: linear-gradient(transparent, #00000020); padding: var(--span) 4rem; font-weight: 300; margin:-4rem; margin-bottom: 2rem; display: flex; align-items: center; line-height: 1;}
#contacts form h2::before { content:''; display: inline-block; width: 8rem; height: 8rem; background:url(../img/icon-contact-form.png) center / contain no-repeat; margin-right: 2rem; }
#contacts form::after { position: absolute; content:''; display: block; width: 500px; height: 110%; background: url(../img/contacts-bg-man.png) bottom center / contain no-repeat; bottom:0; left:95%; }

@media screen and (max-width: 960px) {
	#contacts form::after { display: none; }
	#contacts form { max-width: none; }
}

@media screen and (max-width: 768px) {
	#contacts form h2 { font-size: 2rem; }
	#contacts form h2::before { display: none; }
	#contacts.page-block { padding: 2rem 0; }
	#contacts form { margin-top: 0; }
}


#map > .container {  padding-top: 10rem; padding-bottom: 10rem; position: relative; z-index: 2; }
#map > ymaps { position: absolute; left:0; top:0; width: 100%; height: 100%; z-index: 1; }

#map .contacts-card { max-width: 600px; }
@media screen and (max-width: 960px) {
	.contacts-card { max-width: none; text-align: center; }
	.contacts-card > * { padding: 2rem; }
}

#footer.page-block {
	background:
		linear-gradient(45deg, #0c2b3d, transparent 20%),
		linear-gradient(-45deg, #0c2b3d, transparent 20%),
		var(--color-dark-blue);
	}
#footer > .container { display: flex; flex-flow: column; align-items: center; justiify-content: center; gap: var(--span-large); }

#footer .contacts { display: flex; gap: 2rem;  }
#footer .contacts .phones { }
#footer .contacts .phone { display: block; text-align: right; font-size: 2.5rem; }
#footer .contacts .phone strong { color: var(--color-yellow); font-weight: normal; }
#footer .contacts .ui-button i { width: 3rem; height: 3rem;   }
#footer .contacts .ui-button:hover { background: white; color: black; }

.bottom-links { display: flex; gap: var(--span-large); flex-grow: 1; flex-wrap: wrap; justify-content: space-between;  }
.bottom-links ul { font-size: 90%; }
.bottom-links li { padding: 0.5rem 1rem; transition: all .3s; }
.bottom-links li:hover { background: #00000030; border-radius: var(--border-radius); }
.bottom-links li:hover a { }
.bottom-links h2 { font-size: 2rem; padding: 0.5rem 1rem; }

#footer .developer { font-size: 1.2rem; display: flex; flex-flow: column; align-items: center; color: #ffffff60; }
#footer .developer::before { content:''; display: block; background: url(../img/vebas-logo.png) center / contain no-repeat; width: 160px; height: 40px; }

#footer .info { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid #ffffff1c; padding-top: var(--span); }
#footer .info .copyrights { flex-basis: 40rem; font-size: 1.5rem; color: #ffffff50; }
#footer .info .copyrights strong { color: white; }

@media screen and (max-width: 768px) {
	#footer .bottom-links { gap: var(--span-small); text-align: center; justify-content: center; }
	#footer .info .copyrights { text-align: center; }
	#footer .info { justify-content: center; gap: 2rem; }
	#footer .callback-button { display: none; }
	#footer .contacts { display: block; }
	#footer .contacts .phones { margin-bottom: 2rem; }
}

#content { padding-top: var(--span); }
#content.page-block {  }
#content > .container { display: grid; margin:0 auto; grid-template-columns: 325px calc(100% - 325px - 4rem); grid-gap: 4rem;  }
#article {  max-width: 100%; }

@media screen and (max-width: 960px) {
	#content > .container	{ display: block; }
	#side { display: none; }
}

#side { position: relative; z-index: 10; }
#side > .container > * { margin-bottom: var(--span); }
#side .banner { border-radius: var(--border-radius); overflow: hidden; }
#side .banner img { width: 100%; height: auto; }


.article-card { position: relative; align-items: center; max-width: 400px; box-shadow: var(--shadow); border-radius: var(--border-radius); }
.article-card .image { margin-bottom: var(--span); width: 100%; padding-top:100%; overflow: hidden; height:0; align-self: normal; position: relative; }
.article-card .image img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; }
.article-card .title { font-size: 1.8rem; padding: var(--span-small); color: var(--heading-color); }
.article-card .content > * { margin-bottom: var(--span); }
.article-card.-framed { padding: 2rem 4rem; box-shadow: 0 4px 5px 0 #00000020; background: linear-gradient(45deg, #00000010, transparent 100px); }

@media screen and (max-width: 640px) {
	.articles-list.ui-grid { display: block; }
	.article-card { display: flex; flex-wrap: wrap; }
	.article-card .image { width: 100%; margin-right: 0; padding-top: 50%; }	
}


.ui-button i { display: inline-block; width: 2rem; height: 2rem; background-position: center; mask-repeat: no-repeat; margin-right: 0.5rem; }


ol > li::marker  {  display: inline; }
ol > li::before,
ul > li::before { display: inline-block; }
ol > li > p { display: inline; }
ul > li > p { display: inline; }


.mfp-content { padding: 4rem; border-radius: 10px; overflow:hidden; background: white; display: inline-block; width: auto; max-width: 600px;  }
.mfp-content .ui-form { padding: 0; box-shadow: none; }
.mfp-content .vcap-input > label { font-weight: normal; }
.mfp-content .vcap-input > label a:hover { text-decoration: none; }
.mfp-content h2 { color: var(--color-blue); text-align: center; font-size: 2.5rem; }



.buttonUp {transition: opacity .3s ease;opacity: 0.6;background-color: #005ca1;
	height: 55px;width: 55px;bottom: 30px;right: 30px;cursor: pointer;display: none;position: fixed;z-index: 999; 
	color: #fff;align-items: flex-end;justify-content: center;border-radius: 35px;  user-select: none;}
.buttonUp:before { content: "";position: absolute;top: 40%;width: 40%;height: 40%;border-left: 3px solid white;border-top: 3px solid white;transform: rotate(45deg); left: 27%;}
.buttonUp:hover {opacity: 1;}

.ui-list-select-input { display: flex; gap: 1rem; flex-wrap: wrap; }
.ui-list-select-input > * { display: inline-block; border-radius: var(--border-radius); background: var(--color-gray); padding: 0.5rem 1rem; cursor: pointer; transition: all .3s; display: flex; align-items: center; gap: 0.5rem;  }
.ui-list-select-input.-colored > *:nth-child(2) { background-color: var(--color-yellow); color: black; }
.ui-list-select-input.-colored > *:nth-child(3) { background-color: var(--color-red); color: white; }
.ui-list-select-input.-colored > *:nth-child(4) { background-color: var(--color-green); color: white; }
.ui-list-select-input > *::before { content: ''; display: block; width: 2rem; height: 2rem; border-radius: 50%; background: white; border:2px solid var(--color-blue); }
.ui-list-select-input > *:hover { background-color: black !important; color: white !important; }
.ui-list-select-input > *.active { background: white !important; color: black; }
.ui-list-select-input > *.active::before { background-color: var(--color-blue); }

@media screen and (max-width: 768px) {
	.ui-list-select-input { flex-wrap: wrap; }
}

.ui-list {  display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 0.5rem 2rem; color: var(--color-blue); margin-left: 2rem; list-style-type: disc; list-style-position: initial;}
.ui-list a { color: var(--color-blue); }
.ui-list a:hover { text-decoration: underline; }


#mobile-map .mobile-filters { max-width: 500px; position:relative; z-index: 10; }
#mobile-map #coverage-map { position: absolute; left:0; top:0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

@media screen and (max-width: 768px) {
	#mobile-map { display: none; }
}

.feedback-preview .image { border-radius: 50%; height: 10rem; flex-basis: 10rem; flex-shrink:0; overflow: hidden;  position: relative; }
.feedback-preview .image img { position: absolute; left:0; top: 0; width: 100%; height: 100%; }
.feedback-preview .name { color: var(--color-blue); font-size: 2rem; margin-bottom: 1rem; font-weight: initial; }
.feedback-preview .text { font-size: 100%; font-style: italic;  }


.page-id-30 .feedback-preview:not(:last-child) { margin-bottom: 2rem; }

#news > .container { display: grid; gap: var(--span); grid-template-columns: 50% 50%; }
#news .news-list { grid-area: 1 / 1 / auto / span 2; }

#news .subscribe-form { grid-area: 2 / 1;  border-radius: var(--border-radius); border-left: 3px solid var(--color-blue); background: linear-gradient(#f2f3f5, #f2f3f5); padding: var(--span); align-items: center; }
#news .subscribe-form .ui-input { background: white; }
#news .subscribe-form h2 { color: var(--color-blue); font-weight: 300; max-width: 40rem;}
#news .banner { grid-area: 2 / 2;  }

@media screen and (max-width: 960px) {
	#news > .container { display: block; }
}



/* Инлайновое меню */
/* -------------------------------------------------------------------- */
.ui-inline-menu li { display: inline-block; position: relative; margin-right: 1rem;  }
.ui-inline-menu li a { padding: 1rem 1rem; display: block; transition: .3s all; }
.ui-inline-menu > li:hover > a { }

.ui-inline-menu ul { display: none; text-align: center;  }

.ui-inline-menu > ul > li { display: inline-block; transition: all .3s;}
.ui-inline-menu > ul { display: flex; }

.ui-inline-menu a, .ui-inline-menu span { display: block; padding: 0.5rem 1.5rem; }
.ui-inline-menu li ul { display: none; position: absolute; top: 95%; left: -0.5rem; z-index: 1000; text-align: left; } 
.ui-inline-menu li ul li { font-size: 1.5rem; padding: 0.5rem; display: block; transition: .3s all; min-width: 200px; }
.ui-inline-menu li:hover > ul { display: block; }

@media screen and (max-width: 1024px) {
	.ui-inline-menu > li { margin-right: 0; }
	.ui-inline-menu > li::before { display: none; }
	.ui-inline-menu > li:not(:first-child)::after { display: none; }
}

.menu-bottom { justify-content: center; }
.menu-bottom li:hover { background: var(--color-gray); }
.menu-bottom li.current { background: var(--color-red); color: white; }
.menu-bottom li.current > a, .menu-bottom li.current > span { padding: 0.5rem 1rem; }

.menu-side { background: var(--color-gray); border-right: 4px solid #d0d0d0; font-size: 1.5rem; overflow: hidden;}
.menu-side h2 { background: var(--color-blue); color: white; margin-bottom:0; padding: 1rem; padding-left: 2rem; font-size: 2.2rem;  }
.menu-side li { list-style-type: none;  position: relative; }
.menu-side li.parent::before { width: 1.5rem; height: 1.5rem; background: url(../img/icon-arrow-more.png) center no-repeat; display: inline-block; content: ''; position: absolute; left:2rem; top:0.5rem; }
.menu-side li.parent.active::before { transform: rotate(90deg); }
.menu-side ul > li:hover > a { background: white; }
.menu-side li.parent.current::before { filter: brightness(0%) invert(100%); top: 1rem;}
.menu-side li:not(:last-child) { border-bottom: 1px solid #e0e0e0; }
.menu-side li.active { background: linear-gradient(to top, #d0d0d0, #e0e0e0 1rem); border-top: 2px solid var(--color-red);}
.menu-side li.active > span { font-weight: bold; }
.menu-side li.active  li.active { background: white; }
.menu-side li.current > a, .menu-side li.current > span { background: var(--color-red); color: white; padding-top:1rem; padding-bottom: 1rem; font-weight: bold; }
.menu-side li a, .menu-side li span { display: block; padding: 0.4rem 1rem; padding-left: 4rem; transition: all .3s; }
.menu-side li ul { margin-left: 1rem; margin-bottom: 1rem; }


#navigation { overflow: visible; z-index: 100; margin-bottom: 1rem; font-weight: normal; }
#navigation > .container { display: flex; align-items: center; background: linear-gradient(215deg, #12457a, transparent 10%), var(--color-blue); color: white; border-radius: var(--border-radius); padding: 0.3rem; }
#navigation > .ui-quick-menu { flex-basis: 10rem; z-index: 100; position: relative; z-index: 100;  }
#navigation .main-menu { font-size: 1.6rem; }

#navigation .site-search { background: var(--color-yellow); padding: 0.3rem; border-radius: var(--border-radius); }
#navigation .site-search form { display: flex; align-items: center; gap:0.2rem; position: relative; }
#navigation .site-search input[name="search"] { width: 20rem; border: none; font-size: 1.4rem; padding-right: 4rem; }
#navigation .site-search input[type="submit"] { content: ''; width: 3rem; height: 3rem; border-radius: 50%;  position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); padding:0; background: url(../img/icon-arrow.svg) center / 1.5rem auto no-repeat, white; }
#navigation .site-search input[type="submit"]:hover { filter: invert(100%); }

@media screen and (max-width: 960px) {
	#navigation > .container { display: block; }
	.ui-quick-menu.-open .menu { width: 100%; }
	#navigation .site-search input[name="search"] { width: auto; flex-grow: 1; }
	#navigation .site-search form { width: 100%; }
}

.main-menu { justify-content: center; display: flex; align-items: center; flex-grow: 1; flex-wrap: wrap;  }
.main-menu li a, .main-menu li span { padding: 1rem 1rem; border-radius: var(--border-radius); margin-right: 0; }
.main-menu li:hover > a { background: var(--color-dark-blue); }
@media screen and (max-width: 1024px) {
	.main-menu li a, .main-menu li span { padding: 0.5rem 1rem; }
}

.ui-quick-menu { position: relative; z-index: 10; flex-basis: 15rem; }
.ui-quick-menu > .button { display: block; padding: 1.5rem; background: white; color: black; border-radius: var(--border-radius); padding: 1.5rem; position: relative; cursor: pointer; min-height: 100%; }
.ui-quick-menu > .button i { background: black; width: 2.7rem; height: 2.7rem; margin-right: 0.5rem; }
.ui-quick-menu > .button::before { display: inline-block; content: 'Каталог'; background: var(--color-yellow); position: absolute; left: 0.3rem; right: 0.3rem; top: 0.3rem; bottom: 0.3rem; border-radius: var(--border-radius); z-index: 0; display: flex; align-items: center; justify-content: center; font-weight: initial; }
.ui-quick-menu .search { display: flex; align-items: center; margin-bottom: 1rem; }
.ui-quick-menu .search input[type="submit"] { display: none; }
.ui-quick-menu .search input[type="text"] { width: 100%; }
.ui-quick-menu .menu { min-width: 35rem; }
.ui-quick-menu .menu > ul > li > ul { display: none; 	}


.ui-quick-menu .menu { display: none; position: absolute; background: white; padding: 1rem; left:0; top: 95%; border-radius: var(--border-radius); color: black; box-shadow: var(--shadow); border-top-left-radius: 0; }
.ui-quick-menu .menu .items { margin-left: -1rem; margin-right: -1rem; }
.ui-quick-menu .menu li > a { display: block;  padding: 0.5rem 2rem; color: var(--color-blue); text-decoration: underline; }
.ui-quick-menu .menu li:not(:last-child) { border-bottom: 1px solid #e8e8e8; }

.ui-quick-menu .menu li:hover { background: linear-gradient(to right, #1c599c, transparent 1rem), var(--color-gray); }
.ui-quick-menu .menu li:hover > a { text-decoration: none; color: inherit; }

.ui-quick-menu.-open .menu { display: block; }
.ui-quick-menu.-open > .button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }


.shop-mini-cart { display: inline-flex; gap: 1rem; align-items: center; justify-content: center; }
.shop-mini-cart .total { content: ''; display: block; width: 6rem; height: 6rem; background: url(../img/icon-cart.png) center / 3rem auto no-repeat, var(--color-yellow); color: black; border-radius: 50%; z-index: -1; position: relative; }
.shop-mini-cart .total .count { width: 2.5rem; height: 2.5rem; background: black; color: white; position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: initial; right: 0; top:0; }
.shop-mini-cart .price { display: inline-flex; align-items: center; }
.shop-mini-cart .price strong { font-size: 2.5rem; }

@media screen and (max-width: 768px) {
	.shop-mini-cart .total { width: auto; height: auto; }
	.shop-mini-cart .total::before { display: none; }
	.shop-mini-cart .total .count { position: relative; width: 3.5rem; height: 3.5rem; background: url(../img/icon-cart.png) center / 2rem auto no-repeat, var(--color-yellow); color: transparent; }

}

.shop-purpose-menu { background: #f3f3f3; border-radius: var(--border-radius); box-shadow: inset 0 0 20px #00000030; margin-bottom: var(--span); }
.shop-purpose-menu li { display: flex; align-items: center; text-decoration: underline; cursor: pointer; padding-left: 2rem; gap: 1rem; }
.shop-purpose-menu li i { width: 4.5rem; height: 4.5rem; }
.shop-purpose-menu li a {  padding: 1.5rem 0;  }
.shop-purpose-menu li:hover { background: linear-gradient(to right, transparent, white, transparent); }
.shop-purpose-menu li:hover a { text-decoration: none; }
.shop-purpose-menu li:not(:last-child) { border-bottom: 1px solid #00000020; }

.shop-purpose-menu.side-menu li { padding-left: inherit; }
.shop-purpose-menu.side-menu a { display: flex; gap: 1rem; align-content: center; }
.shop-purpose-menu.side-menu span { display: inline-block; align-self: center;  }
.shop-purpose-menu.side-menu > h2::before { content:''; display: inline-block; width: 3rem; height: 3rem; background: url(../img/icon-categories.png) center / contain no-repeat; }


.order-calculator { background: #2384b7; padding: var(--span-large); --text-color : white; --input-color: white; color: white; border-radius: var(--border-radius); }
.order-calculator label { display: block; font-size: 1.7rem; font-weight: initial; margin-bottom: 0.5em; }
.order-calculator .purpose-selector .ui-list-select-input { display: flex; align-items: stretch; justify-content: stretch; gap: 1rem; }
.order-calculator .purpose-selector span {background: #ffffff17; padding: 1rem; flex-grow: 1; }
.order-calculator > * { margin-bottom: 2rem;}
.order-calculator .vcap-input label a { color: white; }
.order-calculator .flex-label { display: flex; align-items: center; }
.order-calculator .flex-label label { flex-grow: 1; }
.order-calculator .flex-label .amount { font-size: 120%; }



.side-menu { background: var(--color-gray); padding: 1rem; border-radius: var(--border-radius); }
.side-menu > h2 { background: white; border-radius: var(--border-radius); padding: 1rem; font-size: 2rem; font-weight: normal; display: flex; align-items: center; gap: 1rem;}
.side-menu li { position: relative;}
.side-menu li > a { display: block; padding: 0.5rem 1rem; }
.side-menu li.has-children::after { content:''; display: block; position: absolute; right: 1rem; top: 50%;
	width: 1rem; height: 1rem; mask: url(../img/icon-arrow.svg) center / contain no-repeat;  -webkit-mask: url(../img/icon-arrow.svg) center / contain no-repeat; background: var(--color-blue); transform: translateY(-50%); }
.side-menu li:not(:last-child) { border-bottom: 1px solid #e0e0e0; }
.side-menu li > ul { display: none; position: absolute; top:0; left:99%; background: white; box-shadow: var(--shadow); z-index: 10; }
.side-menu li:hover > ul { display: block;  white-space: pre;}
.side-menu li:hover > a { font-weight: normal;  color: var(--color-blue); background: linear-gradient(to right, var(--color-blue), white 1.5rem), var(--color-gray); }

.side-menu li.active > a { font-weight: normal;  color: var(--color-blue); border-left: 3px solid var(--color-blue); }

.shop-menu.primary { background: var(--color-gray); padding: 1rem; border-radius: var(--border-radius); }
.shop-menu.primary > h2::before { content:''; display: inline-block; width: 3rem; height: 3rem; background: url(../img/icon-categories.png) center / contain no-repeat; }
.shop-menu.primary li { position: relative;  }
.shop-menu.primary li > a { display: block; padding: 0.5rem 1rem; }
.shop-menu.primary li:not(:last-child) { border-bottom: 1px solid #e0e0e0; }
.shop-menu.primary li:hover > ul { display: block;  }


.shop-cart-controls .count { text-align: center; padding: 1rem; display: none; }
.shop-cart-controls .number-input { align-items: center; gap: 0.5rem; flex-basis: 10rem; display: none;  font-size: 2.5rem; }
.shop-cart-controls .number-input input { font-size: 2rem; }
.shop-cart-controls .number-input > .count { display: inline-block; }
.shop-cart-controls .number-input span {  cursor: pointer; width:2.5rem; height: 3rem; border-radius: 0.5rem; background: var(--color-gray); text-align: center; font-weight: normal; line-height: 3rem; transition: all .3s; } 
.shop-cart-controls .number-input span:hover { background-color: var(--color-blue); color: white; }
.shop-cart-controls .add-to-cart { display: none; text-decoration: none; }
.shop-cart-controls[data-in-cart="0"] .add-to-cart { display: block; }
.shop-cart-controls[data-in-cart="1"] .number-input { display: flex; }

.ui-product-card { background: white; box-shadow: var(--shadow); border-radius: var(--border-radius); position: relative; font-size: 90%; }
.ui-product-card .image {  overflow: hidden; }
.ui-product-card .image a { display: block; padding-top: 70%; position: relative; }
.ui-product-card .image img { position: absolute; top: 50%; left:50%; width: 80%; height: 80%; object-fit: contain; transform: translate(-50%,-50%); margin-bottom: 0; }
.ui-product-card .title { padding: 1rem 2rem; height: 4em;  color: var(--color-blue); text-align: center; font-size: 1.6rem; font-weight: initial; text-decoration: underline; position: relative;  overflow: hidden; }
.ui-product-card .title::after { content: ''; position: absolute; left:0; right:0; bottom:0; height: 1rem; background: linear-gradient(to top, white, transparent); }
.ui-product-card .ui-button { font-size: 1.4rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }

.ui-product-card .shop-controls { background: var(--color-gray); display: flex; align-items: center; gap: 1rem; padding: 0.5rem 2rem;  justify-content: center; }
.ui-product-card .shop-controls .message { flex-grow: 1; text-align: center; color: var(--color-blue); }
.ui-product-card .shop-controls .price { display: flex; gap: 1rem; flex-grow: 1; align-items: center;  }
.ui-product-card .shop-controls .price strong { font-size: 2.4rem; }
.ui-product-card .shop-controls .price .old { text-decoration: line-through; font-size: 2.4rem; opacity: 0.7;}
.ui-product-card .shop-controls .price .no-price { font-size: 1.6rem; white-space: nowrap; }
.ui-product-card .shop-cart-controls { display: flex; justify-content: end; flex-shrink: 1; }
.ui-product-card .shop-cart-controls .count { background: white; box-shadow: inset 2px 2px 0 0 #00000020; border: none; width: 100px; }
.ui-product-card .shop-cart-controls .add-to-cart { background: var(--color-blue); color: white;}
.ui-product-card .shop-cart-controls .add-to-cart:hover { background: var(--color-dark-blue); }

.ui-product-card .bottom { padding: 0.5rem 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.ui-product-card .bottom > * { flex-grow: 1;  }

.ui-product-card .more { display: flex; align-items: center; gap: 0.5rem; font-size: 90%;  justify-content: center; }
.ui-product-card .more::before { width: 3rem; height: 3rem; content:''; display: inline-block; background: #d0d0d0; border-radius: 50%;  transition: all .3s;
	mask: url(../img/icon-arrow.svg) center / 1.6rem auto no-repeat, linear-gradient(black, black); mask-composite: exclude, add;
	-webkit-mask: url(../img/icon-arrow.svg) center / 1.6rem auto no-repeat, linear-gradient(black, black); -webkit-mask-composite: exclude, add; 
}
.ui-product-card .more:hover::before { background: var(--color-blue); }

.ui-product-card.-disabled { filter: grayscale(100%); opacity: 0.5; }


.ui-product-card .tags { position: absolute; left:0; top: 2rem; z-index: 5; display: flex; flex-flow: column; gap: 0.3rem; align-items: start;  }
.ui-product-card .tags .tag { font-size: 90%; display: inline-block; padding: 0.3rem 1rem; background: var(--color-gray); border-radius: 0.5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; transition: all .3s; position: relative; box-shadow: 0 0 5px 0 #ffffffa0; }
.ui-product-card .tags .tag:hover { padding-left: 1.4rem; }
.ui-product-card .tags .tag[data-id="new"] { background: var(--color-green); color: white;}
.ui-product-card .tags .tag[data-id="discount"] { background: var(--color-red); color: white;}
.ui-product-card .tags .tag[data-id="popular"] { background: var(--color-yellow); color: black;}
.ui-product-card .tags .tag[data-id="hit"] { background: var(--color-blue); color: white;}
.ui-product-card .tags .tag::after { background: linear-gradient(to right, #00000020, transparent 1rem); position: absolute; content:''; left:0; top:0; height: 100%; width: 1rem; mix-blend-mode: multiply;}

.ui-product-card:hover { box-shadow: 0 0 0 2px var(--color-blue), var(--shadow); }

.shop-subcaregories .ui-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.shop-subcaregories .ui-card { padding: var(--span-small); font-size: 1.5rem; }
.shop-subcaregories .ui-card.-mini .image { width: 4.5rem; height: 4.5rem; }

.shop-filters { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 1.5rem; justify-content: space-between; align-items: center; }
.shop-filters > * { display: flex; gap: 1rem;  }
.shop-filters .option { color: var(--color-blue); text-decoration: underline; cursor: pointer; }
.shop-filters .option.active { font-weight: normal; text-decoration: none; color: black; }
.shop-filters .search { }


#article #tags { display: none; }
hr.cut-here { display: none; margin-bottom: 2rem;  }

article.product { position: relative; }
article.product .popup-buttons { margin-top: 2rem; }
article.product .popup-buttons > * { display: flex; width: 100%; align-items: center; justify-content: center;  }
article.product .popup-buttons > *:not(:last-child) { margin-bottom: 1rem; }
article.product .popup-buttons > *:hover { background: #e0e0e0; }

article.product .ui-button.buy-with-click i { width: 3rem; height: 3rem;} 

article.product .shop-order { flex-grow: 1; }
article.product .shop-order .ui-button { width: 100%; margin-bottom: 1rem; min-height: 5rem; }
article.product .shop-order .ui-button i { width: 3rem; height: 3rem;} 

article.product .shop-buttons a { padding: 1rem;  padding-left: 3rem; display: block; font-size: 1.3rem; color: rgba(32, 32, 32, 0.5); font-style: italic; }
article.product .shop-buttons a[data-action=add-to-favorites] { background: url(../img/icon-favorites.png) no-repeat left center; }
article.product .shop-buttons a[data-action=add-to-compare] { background: url(../img/icon-compare.png) no-repeat left center; }

article.product .info { flex-wrap: wrap; display: flex; grid-template-columns: minmax(25rem, 30%) 1fr minmax(20rem, 25rem); grid-gap: 2rem; justify-content: space-between; align-items: start;  margin-bottom: 4rem; }

article.product .info .images { flex-basis: 29rem; position: relative; align-self: flex-start; flex-grow: 1; }
article.product .info .images .cover { box-shadow: var(--shadow); padding-top: 100%; position: relative; min-width: 250px; overflow: hidden; }
article.product .info .images .cover a { display: block; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 90%; width: 90%; }
article.product .info .images .cover img { width: 100%; height: 100%;  object-fit: contain; margin-bottom: 0; }
article.product .info .images .thumbnails { display: flex; align-items: center; }

article.product .info .data { flex-grow: 1; }
article.product .info .data .price { margin-bottom: 2rem; font-size: 2.2rem; font-weight: 300; }
article.product .info .data .price strong { font-size: bold; }
article.product .info .data .price .old { text-decoration: line-through; }
article.product .info .options { font-size: 1.5rem; }
article.product .info .options .option { margin-bottom: 0.2em; }
article.product .info .options .option a { color: #054f89; font-style: italic; }
article.product .info .options .option.product-id { margin-top: 1rem; }
article.product .info .options-selector { border: 1px solid #cfcfcf; border-radius: 0; margin-bottom: 1rem; padding: 2rem; }
article.product .info .options-selector .menu-property { width: 100%; max-width: 300px; }
article.product .info .options-selector .option:not(:last-child) { margin-bottom: 1rem; }
article.product .info .options-selector .ui-select select { width: 100%; }
article.product .info .options-selector .ui-select .input { margin-right: 0; }
article.product .info .options-selector .ui-color .input { padding-bottom: 0; }
article.product .info .options-selector .menu-property .title { font-weight: bold; margin-bottom: 0.5rem; }
article.product .info .rating { padding: 1rem 0; margin: 1rem 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
article.product .gallery { overflow: hidden; max-width: 33%; position: relative; }

article.product .shop-cart-controls { margin-bottom: 2rem; }
article.product .shop-cart-controls .count { flex-grow: 1; }
article.product .shop-cart-controls .add-to-cart { width: 100%; font-size: 1.7rem; font-weight: normal; text-align: center;  }
article.product .shop-cart-controls .add-to-cart:not(:hover) { background: var(--color-blue); color: white; }

article.product .thumbnails { display: block; max-width: 100%; position: relative; }
article.product .thumbnails .slick-track { height: 100%; padding: 0.5rem; }
article.product .thumbnails .slick-slide { width: auto !important; display: block; float: left; }
article.product .thumbnails .slick-dots { z-index: 100; }
article.product .thumbnails .image { border: 3px solid white;  margin: 0.5rem; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); height: 60px; width: 60px;  }
article.product .thumbnails img { height: 100%; width: 100%; object-fit: contain; }
article.product .thumbnails a { display: block; height: 100%; }

article.product .product-comments {  }
article.product .product-comments h2 { margin-top: 0; }
article.product .product-comments .comment-form h2 { color: #054f89; }
article.product .product-comments .comments-list h2 { color: #054f89; }
article.product .product-comments .comments-list { margin-top: 2rem; }

.tippy-content { font-size: 1.5rem; padding: 2rem; }

.rating { display: inline-flex; align-items: center; justify-content: flex-start; overflow: hidden; }
.rating .title { display: inline-block; margin-right: 0.5rem; }
.rating .values { display: inline-block; white-space: nowrap; }
.rating .values span { display: inline-block; width: 2rem; height: 2rem; background: url(../img/icon-rating.png) center no-repeat;
	margin: 0.2rem; cursor: pointer; }
.rating .values span.active { display: inline-block; width: 2rem; height: 2rem; background: url(../img/icon-rating-active.png); }


.product-cart { width: 100%; border: 2px solid var(--color-gray); border-bottom-width: 5px; text-align: left; border-radius: var(--border-radius); 
	margin-bottom: 2rem; font-size: 1.4rem; position: relative; top: 0; transition: 0.2s all; display: flex; min-height: 200px; padding: 2rem; }
.product-cart .cover { width: 20%;  width: 120px; position: relative; margin-right: 2rem; }
.product-cart .cover img { display: block; position: absolute; width: 90%; height: 90%; object-fit: contain; }
.product-cart .cover a { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.product-cart .cover:after { display: inline-block; content: ''; position: absolute; top: 50%; right: -10px; margin-top: -10px; transition: 0.2s all; width: 0; height: 0; border-style: solid; border-width: 15px 10px 15px 0; border-color: transparent #ffffff transparent  transparent; }

.product-cart .info { display: flex; flex-flow: column; justify-content: center; align-items: flex-start; width: 100%; }
.product-cart .info .title { font-size: 2rem; display: flex; justify-content: space-between;  align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; margin-top: 0; }
.product-cart .info .description { margin-bottom: 1rem; }

.product-cart .cart { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.product-cart .price { display: flex; align-items: center; gap: 1rem; font-size: 2.3rem; flex-grow: 1;  }
.product-cart .price strong { font-weight: normal; font-size: 120%; }

.product-cart:hover .cover:after { right: 0px; }
.product-cart:hover .add-button:before { background-color: #054f89; background-image: url(../img/icon-plus-white.svg); }
.product-cart .delete-button { border-radius: 99rem; background: #eee; padding: 0.5rem 1rem; position: absolute; right: 2rem; top: 2.5rem; cursor: pointer; transition: 0.2s all; }
.product-cart .delete-button:hover { background-color: #202020; color: white; }


.message-queue { position: fixed; top: 50%; padding: 3rem; left: 50%; right: 0; background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%); max-width: 800px; border-radius: 1rem;  z-index: 500; }
.message-queue .message { margin: 0 auto; max-width: 700px; display: block; background: white; padding: 1rem; margin-bottom: 0.5rem; border-radius: 3px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);  }
.message-queue .message: last-child { margin-bottom: 0;  }
.message-queue .message.error { border-left: 5px solid #a6051b;  }
.message-queue .message strong { font-weight: bold; }
.message-queue .message .large { font-size: 2.5rem;}
.message-queue .message .large strong { color: #a6051b; }
.message-queue .message.critical { border-left: 5px solid transparent; color: white; background: #a6051b;  }
.message-queue .message.warning { border-left: 5px solid #ffd376;  }

.shop-cart .total { margin: var(--span) 0; font-size: 2rem; padding-bottom: var(--span); border: 2px solid var(--color-gray); padding: 1rem; border-radius: var(--border-radius); }
.shop-cart .order-form { padding-top: var(--span); border-top: 2px solid var(--color-gray); }

.order-form { --input-color: white; --input-border: 2px solid var(--color-gray); }
.order-form .ui-form { }
.order-form .ui-form-input { margin-bottom: var(--span-small); }
.order-form .ui-form-section { flex-grow: 1; }
.order-form .ui-form-section h3 { padding: 1rem; border-radius: var(--border-radius); background: var(--color-blue); color: white; }
.order-form .ui-option-input .title { font-weight: normal; }

.ui-option-input { padding: 1rem; }
.ui-option-input .option { font-size: 1.5rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; cursor: pointer; }
.ui-option-input .option::before { content: ''; display: block; width: 2rem; height: 2rem; border: 2px solid var(--color-gray); border-radius: 50%; }
.ui-option-input .option.-active::before { background: var(--color-blue); box-shadow: inset 0 0 0 2px white; }

.ui-list.categories-list { font-size: 90%; }

#install .install-text .block-heading { margin-bottom: 1rem; font-size: 2rem; }
#install .install-text { display: flex; gap: var(--span); align-items: center; }
#install .teasers .ui-button { width: 100%; }
#install .teasers .ui-button:not(:last-child) { margin-bottom: 1rem; }
#install .teasers .ui-button i { width: 3rem; height: 3rem; }
#install .teasers .ui-button:hover { color: var(--color-blue); }

@media screen and (max-width: 960px) {
	#install .install-text { flex-wrap: wrap; }
	#install .teasers { text-align: center; width: 100%;  }
}

#shop-new-categories { border-top: 1px solid #e0e0e0; background:url(../img/shop-new-bg.png) top right no-repeat, var(--color-gray);  border-bottom: 1px solid #e0e0e0; }

.article-block { margin-bottom: 2rem; }

.article .shop-subcaregories.-sop i { width: 4.5rem; height: 4.5rem; display: inline-block;  }
.shop-subcaregories.-sop .ui-card.-horizontal { background: linear-gradient(140deg, #ffce2440, transparent 10rem); }
.shop-subcaregories.-sop .ui-card.-horizontal:hover { background: white; box-shadow: inset 0 0 0 2px var(--color-yellow);  }


.teasers-where > .container { display: flex; flex-wrap: wrap; align-items: center; margin: 15px -5px; }
.teasers-where .teaser { width: 33%; font-size: 16px; min-width: 270px; max-width: 400px;	text-transform: uppercase; padding: 5px; position: relative; top:0; transition: 0.5s all;}
.teasers-where .teaser > .container { background: white; background: white; box-shadow: 0 2px 0 0 #ccc; padding: 10px; padding-left: 130px; height: 100px; 
	display: flex; align-items: center; position: relative; }
.teasers-where .teaser > .container:before { content: ''; display: block;	min-width: 120px; height: 100px; background-position: center; background-repeat:no-repeat; 
	position: absolute; top: 0; left: 0px; bottom: 0;	}
.teasers-where .teaser:hover { top: -3px;}
.teasers-where .teaser[data-id="1"] > .container:before { background-image: url('/image/teaser-where-1.png'); }
.teasers-where .teaser[data-id="2"] > .container:before { background-image: url('/image/teaser-where-2.png'); }
.teasers-where .teaser[data-id="3"] > .container:before { background-image: url('/image/teaser-where-3.png'); }
.teasers-where .teaser[data-id="4"] > .container:before { background-image: url('/image/teaser-where-4.png'); }
.teasers-where .teaser[data-id="5"] > .container:before { background-image: url('/image/teaser-where-5.png'); }
.teasers-where .teaser[data-id="6"] > .container:before { background-image: url('/image/teaser-where-6.png'); }


.teasers-about > .container { display: flex; flex-wrap: wrap; align-items: center; margin: 20px -5px; margin-bottom: 30px }
.teasers-about .teaser { position: relative; top:0; width: 33%; font-size: 14px; font-style: italic; min-width: 270px; max-width: 400px;	padding: 5px; transition: 0.5s all; }
.teasers-about .teaser:hover { top: -3px;}
.teasers-about .teaser > .container { background: white; background: #fafafa; box-shadow: 0 2px 0 0 #ccc; padding: 20px !important; padding-left: 130px !important; height: 120px; 
	display: flex; align-items: center; position: relative; }
.teasers-about .teaser > .container:before { content: ''; display: block;	min-width: 120px; height: 120px; background-position: center; background-repeat:no-repeat; 
	position: absolute; top: 0; left: 0px; bottom: 0;	}

.teasers-about .teaser[data-id="1"] > .container:before { background-image: url('/image/teaser-company-1.png'); }
.teasers-about .teaser[data-id="2"] > .container:before { background-image: url('/image/teaser-company-2.png'); }
.teasers-about .teaser[data-id="3"] > .container:before { background-image: url('/image/teaser-company-3.png'); }
.teasers-about .teaser[data-id="4"] > .container:before { background-image: url('/image/teaser-company-4.png'); }
.teasers-about .teaser[data-id="5"] > .container:before { background-image: url('/image/teaser-company-5.png'); }

.simplesearch-paging { margin: 2rem 0 ; }



.order-calculator .ui-slider { position: relative; text-align: left; }
.order-calculator .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; }
.order-calculator .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.ui-widget .ui-widget { font-size: 1em; }
.ui-widget-content a { color: #333333; }
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

.ui-input-slider { background: white; border-radius: 0.5rem; margin-bottom: 2rem; margin-left:0 !important; margin-right:0 !important; }
.ui-slider-handle { background: var(--color-blue); border:3px solid white; border-radius: 50%; width: 3rem; height:4rem;}


.seo-tags { margin: 2rem 0; font-size: 1.5rem; }
.seo-tags a { display: inline-block; background: #e5e5e5; box-shadow: 0 2px 0 0 #00000040; color: black; border-radius: 3px; padding: 0.5rem 1rem;  text-decoration: none !important; transition: all .3s; margin-right: 0.5rem; margin-bottom: 0.5rem; }
.seo-tags a:hover { background: black; color: white; }


.ui-slider.-mini .slick-list { position: relative;}
.ui-slider.-mini.slick-initialized .slick-list { margin-left: 4rem; margin-right: 4rem;
	-mask: linear-gradient(to right, white 95%, transparent);
	-webkit-mask: linear-gradient(to right, white 95%, transparent);
}
.ui-slider.-mini { margin: 0; position: relative; }

.ui-slider.-mini > button { width: 3rem; height: 3rem; }
.ui-slider.-mini .slick-slide { margin: 0.5rem;}
.ui-slider.-mini .slick-list { margin-bottom: 0 !important; padding-bottom: 0; }
.ui-slider.-mini > button.slick-prev { left:0; }
.ui-slider.-mini > button.slick-next { right:0; }
.ui-slider.-mini.slick-slider .slick-arrow::after { -webkit-mask-size: 1.2rem auto; mask-size: 1.2rem auto; }

.ui-notification { padding: 2rem; box-shadow: var(--shadow); font-size: 120%; }

.search-results .search-form { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.search-results .search-count { margin-bottom: 2rem; }
.search-results .search-count .query { font-weight: bold; }
.search-results .search-count .count { font-weight: bold; }