/* Start:/bitrix/templates/rommats/template_styles.css?174855473420138*/
/* RESET STYLES */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0; width: 100%;}
table td {vertical-align: top;}

/* cyrillic-ext */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6aez4K2oVqwIvtg2H68T.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6aez4K2oVqwIvtE2H68T.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6aez4K2oVqwIvts2H68T.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6aez4K2oVqwIvtU2Hw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6ae84K2oVqwItm4TCp0y2knT.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6ae84K2oVqwItm4TCpQy2knT.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6ae84K2oVqwItm4TCp4y2knT.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/play/v19/6ae84K2oVqwItm4TCpAy2g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {height: 100%;}

body
{
	background: #333;
}

.page * {box-sizing: border-box; transition: all 0.3s, color 1ms; outline: none;}

.page {min-width: 360px; font-family: 'Play', Tahoma; font-size: 1.125rem; line-height: 1.5; box-sizing: border-box; height: 100%; color: #fff; padding-left: 300px; --sb-track-color: transparent; --sb-thumb-color: #ee2020; --sb-size: 15px;}
.page input {}
.page a {color: #fff;}

.page *::-webkit-scrollbar
{
	width: var(--sb-size);
}

.page *::-webkit-scrollbar-track
{
	background: var(--sb-track-color);
	/* border-radius: 15px; */
}

.page *::-webkit-scrollbar-thumb
{
	background: var(--sb-thumb-color);
	/* border-radius: 15px; */
	border: 5px solid #555;
	border-top: 0;
	border-bottom: 0;
}

@supports not selector(::-webkit-scrollbar)
{
	.page *
	{
		scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
	}
}

.page .sidebar {position: fixed; top: 0; left: 0; height: 100%; background: #555; width: 300px; text-align: center; padding: 40px 20px; display: flex; gap: 40px; flex-direction: column; justify-content: center;}
.page .sidebar .preview {display: flex; flex-direction: column; border-bottom: 1px solid #777; padding-bottom: 40px;}
.page .sidebar .preview .logo {background: url(/bitrix/templates/rommats/./images/face2.webp) 50% 50% no-repeat; display: block; width: 120px; height: 120px; border-radius: 50%; background-size: 100%; margin: 0 auto 10px;}
.page .sidebar .preview h1 {font-size: 125%;}
.page .sidebar .preview .info {}
.page .sidebar .preview .cert {margin: 10px auto 0; display: block; width: 120px;}
.page .sidebar .mobile-menu {display: none; font-size: 150%;}
.page .sidebar .menu {display: flex; flex-direction: column; gap: 10px; overflow-y: auto;}
.page .sidebar .menu li {}
.page .sidebar .menu li a {color: #fff; display: flex; padding: 5px 20px; text-decoration: none; border-radius: 5px;}
.page .sidebar .menu li a:before {}
.page .sidebar .menu li a:hover, .page .sidebar .menu li a.active {background: #ee2020;}

.page .content {display: flex; flex-direction: column; max-width: 1620px; gap: 80px;}

.page .content .block {min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 40px;}
.page .content .block > h2 {font-size: 175%; border-bottom: 4px solid #ee2020; padding: 0 10px; text-align: center; max-width: 400px; margin: 0 auto 40px;}
.page .content .block > p {text-align: center; max-width: 600px; margin: 0 auto 40px;}

.page .content .block .certificate {display: flex; padding: 10px 20px; margin: auto auto 0; background: #ee2020; color: #fff; border-radius: 25px; text-decoration: none;}

.page .content .block .contacts-form {display: flex; gap: 20px; flex-direction: column; max-width: 400px; width: 100%; margin: 0 auto;}
.page .content .block .contacts-form label {display: flex; border: 1px solid #555; padding: 0 10px; border-radius: 5px;}
.page .content .block .contacts-form label:before { opacity: 0.7; margin: 12px 0 auto;}
.page .content .block .contacts-form label input {font: inherit; display: block; padding: 10px 10px 10px 0; background: none; border: none; width: 100%; color: #fff;}
.page .content .block .contacts-form label textarea {font: inherit; display: block; padding: 10px 10px 10px 0; background: none; border: none; width: 100%; color: #fff; resize: none; height: 150px;}
.page .content .block .contacts-form button {font: inherit; background: #ee2020; padding: 10px 20px; border: none; color: #fff; border-radius: 25px; cursor: pointer; max-width: 150px; margin: 0 auto;}

#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-content {background: none !important; color: #fff !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-text:before {background: none !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-textarea:before {background: none !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-item {display: flex; flex-direction: column; gap: 10px;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-item__title {font-weight: normal !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-text__input {color: #fff !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-textarea__input {color: #fff !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-items {gap: 20px !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-textblock {padding: 40px;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-text {border-radius: 5px !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-button__title:before {border-radius: 25px;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-button__title {padding: 5px 20px !important;}
#crf_b1ec8d6630f87f78c7f88e62b7195bad-wrapper .ramform-item__bottom {opacity: 1 !important;}

.page .stat {display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;}
.page .stat__item {display: flex; gap: 10px; align-items: center;}
.page .stat__item-number {font-size: 250%; color: #ee2020; border-right: 2px solid #555; padding-right: 10px; line-height: 1;}

.page .content .block .links {display: flex; gap: 20px; justify-content: center; margin: 0 0 40px;}
.page .content .block .links li {}
.page .content .block .links li a {font-size: 150%; border: 1px solid #555; border-radius: 50%; padding: 15px;}
.page .content .block .links li a:before {}
.page .content .block .links li a:hover {background: #ee2020;}

.page .module {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.page .module__item {display: flex; gap: 20px; padding: 20px; border: 1px solid #555; border-radius: 5px; flex: 1 1 500px; max-width: 500px;}
.page .module__item-image {flex: 0 0 auto; width: 100px; height: 100px; background: #eee; border-radius: 5px;}
.page .module__item-data {display: flex; flex-direction: column; justify-content: space-between; gap: 10px; flex: 1 1 auto;}
.page .module__item-name {font-weight: bold;}
.page .module__item-text {opacity: 0.7;}
.page .module__item-bottom {display: flex; justify-content: space-between; align-items: center; margin-top: auto;}
.page .module__item-price {font-size: 130%; color: #ee2020;}
.page .module__item-detail {border-radius: 50%; padding: 10px; background: #555;}
.page .module__item-detail:hover {background: #ee2020; transform: rotate(45deg);}

@media (max-width: 575px)
{
	.page .module__item {flex-direction: column;}
	.page .module__item-image {margin: 0 auto;}
	.page .module__item-price {font-size: 100%; font-weight: bold;}
}

.page .service {display: flex; gap: 20px; flex-wrap: wrap;}
.page .service__item {border: 1px solid #555; padding: 20px; display: flex; flex-direction: column; border-radius: 5px; flex: 1 1 400px; text-align: center;}
.page .service__item-name {}
.page .service__item-price {color: #ee2020; font-size: 200%;}
.page .service__item-time {margin: 0 0 30px;}
.page .service__item-list {padding: 30px 0 30px; border-top: 1px solid #555; display: flex; gap: 5px; flex-direction: column; text-align: left;}
.page .service__item-list li {display: flex; gap: 10px;}
.page .service__item-list li:before {content: ""; width: var(--icons-size); height: var(--icons-size); background: url(/bitrix/templates/rommats/./images/icons.webp?1) 50% 50% no-repeat; background-size: var(--icons-size) calc(var(--icons-count)*var(--icons-size)); flex: 0 0 auto; background-position: 0 calc(var(--icons-size)*-11); margin-top: 4px;}
.page .service__item-order {display: block; padding: 10px 20px; max-width: 150px; margin: auto auto 0; background: #ee2020; color: #fff; border-radius: 25px; text-decoration: none;}
.page .service__item-order:hover {background: rgba(238, 32, 32, 0.6);}

.page .portfolio {display: flex; flex-wrap: wrap; gap: 40px;}
.page .portfolio__item {flex: 1 1 400px;}
.page .portfolio__item-image {width: 100%; height: auto;}

.page .discount {display: flex; gap: 20px; flex-direction: column;}
.page .discount__item {border: 1px solid #555; display: flex; border-radius: 5px;}
.page .discount__item-value {color: #fff; font-size: 200%; flex: 0 0 150px; display: flex; align-items: center; justify-content: center; position: relative; margin: 10px; border-radius: 5px; overflow: hidden;}
.page .discount__item-value:before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #555; z-index: -2; background: repeating-linear-gradient( -45deg, #333, #333 5px, #555 5px, #555 15px); opacity: 0.7;}
.page .discount__item-value:after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; background: #ee2020; border-top: 5px solid #333; z-index: -1;}
.page .discount__item-value_25:after {height: 25%;}
.page .discount__item-value_10:after {height: 10%;}
.page .discount__item-value_100:after {height: 100%;}
.page .discount__item-info {padding: 20px; display: flex; flex-direction: column; gap: 20px;}
.page .discount__item-name {font-weight: bold;}
.page .discount__item-text {opacity: 0.7;}
.page .discount__item-link {display: inline-flex; gap: 10px; padding: 10px 20px; max-width: 250px; margin: auto auto 0; background: #ee2020; color: #fff; border-radius: 25px; text-decoration: none;}
.page .discount__item-link:hover {background: rgba(238, 32, 32, 0.6);}
.page .discount__item-link:hover .icon {transform: rotate(45deg);}

@media (max-width: 575px)
{
	.page .discount__item {flex-direction: column;}
	.page .discount__item-value {flex: 0 0 47px;}
	.page .discount__item-info {padding: 10px;}
	
	.page .discount__item-value:after {bottom: 0; left: 0; top: 0; right: auto; border-top: none; border-right: 5px solid #333;}
	.page .discount__item-value_25:after {width: 25%; height: auto;}
	.page .discount__item-value_10:after {width: 10%; height: auto;}
	.page .discount__item-value_100:after {width: 100%; height: auto;}
}

.page
{
	--icons-count: 17;
	--icons-size: 1.25em;
}

.page .icon {display: inline-flex; gap: 10px; align-items: center;}
.page .icon:before {content: ""; width: var(--icons-size); height: var(--icons-size); background: url(/bitrix/templates/rommats/./images/icons.webp?1) 50% 50% no-repeat; background-size: var(--icons-size) calc(var(--icons-count)*var(--icons-size)); flex: 0 0 auto;}

.page .icon-avatar:before {background-position: 0 calc(var(--icons-size)*0);}
.page .icon-mail:before {background-position: 0 calc(var(--icons-size)*-1);}
.page .icon-portfolio:before {background-position: 0 calc(var(--icons-size)*-2);}
.page .icon-discount:before {background-position: 0 calc(var(--icons-size)*-3);}
.page .icon-module:before {background-position: 0 calc(var(--icons-size)*-4);}
.page .icon-service:before {background-position: 0 calc(var(--icons-size)*-5);}
.page .icon-message:before {background-position: 0 calc(var(--icons-size)*-6);}
.page .icon-vk:before {background-position: 0 calc(var(--icons-size)*-7);}
.page .icon-tg:before {background-position: 0 calc(var(--icons-size)*-8);}
.page .icon-chat:before {background-position: 0 calc(var(--icons-size)*-9);}
.page .icon-tr:before {background-position: 0 calc(var(--icons-size)*-10);}
.page .icon-check:before {background-position: 0 calc(var(--icons-size)*-11);}
.page .icon-pdf:before {background-position: 0 calc(var(--icons-size)*-12);}
.page .icon-next:before {background-position: 0 calc(var(--icons-size)*-13);}
.page .icon-menu:before {background-position: 0 calc(var(--icons-size)*-14);}
.page .icon-hosting:before {background-position: 0 calc(var(--icons-size)*-15);}
.page .icon-close:before {background-position: 0 calc(var(--icons-size)*-16);}

.page .bx-prev, .page .bx-next {display: inline-flex; gap: 10px; align-items: center; font-size: 150%; border: 1px solid #555; border-radius: 50%; padding: 10px; margin-top: -25px; background: #333;}
.page .bx-prev:before, .page .bx-next:before {content: ""; width: var(--icons-size); height: var(--icons-size); background: url(/bitrix/templates/rommats/./images/icons.webp?1) 50% 50% no-repeat; background-size: var(--icons-size) calc(var(--icons-count)*var(--icons-size)); flex: 0 0 auto;}
.page .bx-prev:before {background-position: 0 calc(var(--icons-size)*-13); transform: rotate(180deg);}
.page .bx-next:before {background-position: 0 calc(var(--icons-size)*-13);}

.page .bx-prev:hover, .page .bx-next:hover {background: #ee2020;}

@media (max-width: 975px)
{
	.page {padding: 0;}
	
	.page .sidebar {position: fixed; width: 100%; height: auto; flex-direction: row; padding: 10px; justify-content: space-between; z-index: 10000; min-width: 360px;}
	.page .sidebar .preview {height: 50px; justify-content: center; font-size: 80%; padding-left: 60px; position: relative; align-items: start; line-height: 1.2; padding-bottom: 0; border-bottom: none;}
	.page .sidebar .preview .logo {width: 50px; height: 50px; margin: 0; position: absolute; left: 0; top: 50%; margin-top: -25px;}
	.page .sidebar .preview .cert {display: none;}
	
	.page .sidebar .menu {border: none; padding: 10px; display: flex; position: fixed; top: 70px; width: 200px; height: calc(100vh - 70px); background: #555; left: -250px; box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.5); border-top: 2px solid #333;}
	.page .sidebar .menu li {}
	.page .sidebar .menu li a {padding: 5px 10px;}
	.page .sidebar .menu li a:hover {padding: 5px 10px;}
	.page .sidebar .menu li a.active {padding: 5px 10px;}
	
	.page .content {position: relative; left: 0; gap: 0;}
	.page .content .block {padding: 90px 10px;}
	
	.page .sidebar .mobile-menu {display: inline-flex;}
	.page.menu-opened .sidebar .mobile-menu:before {background-position: 0 calc(var(--icons-size)*-16);}
	
	.page.menu-opened {overflow-x: clip;}
	.page.menu-opened .sidebar .menu {left: 0;}
	.page.menu-opened .content {left: 200px;}
	.page.menu-opened .content:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 10;}
}


@media (max-width: 575px)
{
	.page .sidebar .menu {width: 65px;}
	.page .sidebar .menu li a span {display: none;}
	
	.page.menu-opened .content {left: 65px;}
}

.grecaptcha-badge {visibility: hidden; z-index: -100;}

.page .hosting-image {max-width: 400px; width: 90%; height: auto;}
.page .hosting-order {display: flex; gap: 10px; padding: 10px 20px; margin: auto auto 0; background: #ee2020; color: #fff; border-radius: 25px; text-decoration: none;}
.page .hosting-order:hover {background: rgba(238, 32, 32, 0.6);}
.page .hosting-order:hover .icon {transform: rotate(45deg);}
.page .hosting-info {display: flex; gap: 5px; flex-direction: column; margin: 0 auto 40px; max-width: 400px;}
.page .hosting-info li {display: flex; gap: 10px;}
.page .hosting-info li:before {content: ""; width: var(--icons-size); height: var(--icons-size); background: url(/bitrix/templates/rommats/./images/icons.webp?1) 50% 50% no-repeat; background-size: var(--icons-size) calc(var(--icons-count)*var(--icons-size)); flex: 0 0 auto; background-position: 0 calc(var(--icons-size)*-11); margin-top: 4px; }




.page .page-not-found {text-align: center; margin: 0 0 40px;}
.page .page-not-found__code {font-size: 1000%; line-height: 1; font-weight: 600; text-shadow: 4px 4px 0 #000; color: #555;}
.page .page-not-found__text {opacity: 0.5;}


.page .modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 90px 10px 20px; background: rgba(0, 0, 0, 0.9); z-index: 10001;}
.page .modal.active {display: flex;}
.page .modal__area {display: flex; align-items: center; justify-content: center; position: relative; background: #333; border-radius: 5px;}
.page .modal__content {padding: 20px;}
.page .modal__close {position: absolute; left: 50%; margin-left: -25px; top: -70px; background: #333; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 50%;}
.page .modal__close:hover {background: #555;}

.page .discount-prices {text-align: center;}
.page .discount-prices tr {}
.page .discount-prices tr th {vertical-align: middle; padding: 10px 20px;}
.page .discount-prices tr th:first-child {border-right: 1px solid #555;}
.page .discount-prices tr td {vertical-align: middle; padding: 10px 20px; border-top: 1px solid #555; width: 50%;}
.page .discount-prices tr td:first-child {border-right: 1px solid #555;}
/* End */
/* /bitrix/templates/rommats/template_styles.css?174855473420138 */