@font-face {
    font-family: 'Suisse';
    src: url('fonts/suisseintl-light-webfont.woff2') format('woff2'),
         url('fonts/suisseintl-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Suisse';
    src: url('fonts/suisseintl-regular-webfont.woff2') format('woff2'),
         url('fonts/suisseintl-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'Suisse';
    src: url('fonts/suisseintl-book-webfont.woff2') format('woff2'),
         url('fonts/suisseintl-book-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}

@font-face {
    font-family: 'Suisse';
    src: url('fonts/suisseintl-semibold-webfont.woff2') format('woff2'),
         url('fonts/suisseintl-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}

@font-face {
    font-family: 'Suisse';
    src: url('fonts/suisseintl-bold-webfont.woff2') format('woff2'),
         url('fonts/suisseintl-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Suisse';
    src: url('fonts/suisseintl-black-webfont.woff2') format('woff2'),
         url('fonts/suisseintl-black-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

:root {
	--margin: 2vw;
	--margin2: 4vw;
	--all-width: 96vw;
	--font-medium: 22px;
	--blue: #0064b9;
	--black: #111;

	--buttonWidth: 30px;
	--buttonHeight: 26px;
	--buttonColor: darken(#2B32B2, 15%);
	--lineThickness: 4px;
	--transitionSpeed: .25s;
	--transitionEasing: ease-in-out;
}

* {margin:0; padding:0;}
html {font-family: 'Suisse'; font-size: 16px; font-weight: 400; 1letter-spacing: -1px; color: var(--black); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;}
body {}
h1 {font-size: 70px; color: #fff; line-height: 100%; font-weight: 700}
h1.big {font-size: 6.5rem; color: var(--black); font-weight: 700; letter-spacing: -4px; text-align: center; margin-top: var(--margin)}
.h1-desc {font-size: 1.3rem; text-align: center; font-weight: 700;}
h2 {font-size: 70px; line-height: 110%; font-weight: 900; margin-bottom: 38px}
h4 {font-weight: 600; margin-bottom: 3px; font-size: 1.3rem; letter-spacing: -1px; line-height: 105%;}
a, a:visited {color: color: var(--black)}
p {margin-bottom: 12px; line-height: 140%}
div {box-sizing: border-box;}
section {box-sizing: border-box;}
img {border: 0}
header {display: flex; justify-content: space-between; align-items: center; position: relative; width: var(--all-width); overflow: auto; margin: 18px auto 12px; background-color: #fff; box-sizing: border-box; z-index: 25;}

nav {display: flex}
nav div {display: flex; align-items: center;}
nav div a {position: relative; font-size: 24px; text-transform:uppercase; padding: 7px 16px 6px; font-weight: 600; text-decoration: none; letter-spacing: -1px; color: #272727; transition: all 300ms}
nav div a.nav-checked {background-color: var(--black); color: #fff;}
nav a:hover:not(.nav-checked) {background-color: #efefef}
nav #phone {padding-right: 0; 1font-size: 1.1em; 1font-weight: 800; background-color: #fff}

#logo img {display: block}

.desktop {display: block}
.mobile {display: none}

.lid {font-size: 22px; color: #444; font-weight: 500; line-height: 140%}
.header_bg {position: absolute; width: 100%; height: 260px; bottom: 0; z-index: 4; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );}

#logo a {border: 0}
#head {width: 100%; height: calc(100vh - 98px); overflow: hidden; position: relative; display: flex; align-items: center; background-position: center center; background-size: cover}
.minheight, .minheight #head_bg{height: 600px !important}

.dots_bg {
    position: absolute;
    z-index: 2;
    background: url('https://studia12.ru/img/cyber2.png');
    background-position: top left;
    width: 100%;
    height: 100%;
   opacity: 0.7; 	
}

.title {margin-left: var(--margin); z-index: 5; max-width: 50%;}
.title span {display: inline; color: #fff;}
.title div {1display: inline-block;}
.title h1 span, #title1 span, #title2 span, #title3 span {background-color: var(--black); -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;}
.title h1 {padding: 0px 0px 0px; line-height: 120%; text-transform:uppercase}
.title #title0 {font-size: 0.8rem; font-weight: 500; padding: 9px 0; text-transform: uppercase}
.title #title0 span {padding: 9px 16px; background-color: rgba(0,87,160,1);}
.title #title1 {padding: 9px 0}
.title h1 span {padding: 12px 16px;}
.title #title2 {font-size: 2rem; font-weight: 500; line-height: 150%;}
.title #title2 span {padding: 10px 16px;}
.title #title3 span {padding: 23px 18px 10px; font-size: 1.2rem;}
.title #title3 {font-size: 1rem;line-height: 150%; padding: 12px 0}

.twhite {top: 25% !important;}
.twhite h1 {font-size: 88px; padding-bottom: 12px; line-height: 105%; background-color: transparent; text-transform: uppercase;}
.twhite #title1 {color: #fff; font-size: 44px !important; letter-spacing: 0; line-height: 130% !important; font-weight: 700 !important; background-color: transparent}

.menu-wrap {position: fixed; 1display: none; top: 0; right: 0; background-color: #fff; width: 100%; height: 100vh; z-index:20; transform: translate3d(100%,0,0); transition: .8s cubic-bezier(.19,1,.22,1);}
.is-open {1display: block; transform: translateZ(0);}
.menu-inner {width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; z-index:21;}
.menu-nav {position: relative; 1color:#fff; margin-left: 3vw; display: flex; flex-direction: column; z-index:22; align-items: flex-start;}
.menu-nav > div {padding: 12px 0}
.menu-nav a {font-size: 38px; color:var(--black); font-weight: 600; text-decoration: none}
.menu-nav a:visited {color:var(--black)}
.burger {z-index: 29}

hr {color: #0057a0; background-color: #0057a0; border: 0; height: 8px; width: 160px; margin-bottom: 9px}

.all {width: var(--all-width); margin: 0 auto var(--margin)}

.tags {width: var(--all-width); margin: 0 auto; text-align: center; justify-content: center; display: flex; flex-wrap: wrap}
.tags a {border: 2px solid #e4e4e4; display: flex; text-transform: lowercase; color: #000; font-size: 22px; margin-right: -2px; padding: 8px 18px; text-decoration: none;}
.tags .filter-checked {background-color: var(--blue); border: 2px solid var(--blue); color: #fff; z-index: 9}
.tags a:hover {border: 2px solid var(--blue); z-index: 99}

.ban {width: 100%; max-width: 1300px; margin: 48px auto; box-shadow: 0px 0px 26px 0px rgba(0,0,0,0.3);}

#facts {width: 100%; margin: var(--margin) auto var(--margin2)}
#facts_wrap {display: flex; margin: 0 auto; justify-content: center}
#facts_wrap > div {text-align: center; padding: 15px 1.5vw 5px; border-left: 4px solid #f1f1f1}
#facts_wrap > div:first-child {border-left: 0}
#facts_wrap > div > p:first-child {font-size: 70px; font-weight: 700; line-height: 110%; letter-spacing: -2px}
#facts_wrap > div > p:last-child {font-size: 17px; color: #999; font-weight: 300;  letter-spacing: 0px}
.small > div > p:first-child {font-size: 60px !important}

.facts2 {width: 100%; margin: 0 auto 48px; z-index: 4; position: absolute; bottom: 0}
.facts2_wrap {display: flex; width: 75%; max-width: 1360px; margin: 0 auto; align-items: stretch; justify-content: space-between;}
.facts2_wrap > div {font-size: 15px; text-align: center; white-space: nowrap}
.facts2_wrap > div > p:first-child {font-size: 58px; font-weight: 700; line-height: 90%; margin-left:-3px; color: #fff}
.facts2_wrap > div small {font-size: 34px}
.facts2_wrap > div > p:last-child {font-weight: 400; color: #fff}
.facts2_wrap p span {letter-spacing: 0px}

.staff {width: var(--all-width); margin: 0 auto var(--margin2)}
.staff-wrap {display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; grid-gap: 2vw; width: 100%; margin: 0 auto;}
.staff-wrap h4 {margin-top: 6px;}
.staff-wrap img {width: 100%; display: block; 1filter: grayscale(70%);}

/*
.patents {width: var(--all-width); margin: 0 auto var(--margin2)}
.patents-wrap {display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-gap: 2vw; width: 100%; margin: 0 auto;}
.patents-wrap img {width: 100%; display: block;}


#cert {width: 96%; max-width: 1380px; margin: 0 auto 68px; }
#cert_wrap {display: flex; width: 100%; margin: 0 auto; align-items: stretch; flex-wrap: wrap; justify-content: space-between}
#cert_wrap > div {font-size: 17px; width: 300px; height: 426px; text-align: center; margin: 0 12px 56px;}
#cert_wrap img {width: 100%; box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5); transition: width 300ms}
*/

.text {width: 89%; max-width: 1360px; margin: 80px auto}
.text_wrap {display: flex; justify-content: space-between; width: 100%; align-items: flex-top; flex-wrap: wrap;}
.text_wrap div {width: 46%; min-width: 460px}
.text_wrap p {font-size: 16px; line-height: 150%; margin-bottom: 24px}
.text ul {margin-bottom: 24px; margin-left: 17px; list-style-type: none;}
.text li {margin-bottom: 9px; line-height: 150%; font-size: 16px;}
.text li:before {content: '— '; margin-left: -17px; color: #1889c7; }

.text2 {width: var(--all-width); max-width: 1280px; margin: var(--margin2) auto}
.text2 ul {margin-bottom: 24px; margin-left: 17px; list-style-type: none;}
.text2 li {margin-bottom: 9px; line-height: 150%; font-size: 16px;}
.text2 li:before {content: '— '; margin-left: -17px; color: #1889c7; }
.text2 p {line-height: 145%; margin-bottom: var(--margin); max-width: 1100px}

.text3 {width: 89%; max-width: 970px; margin: 82px auto 0}
.text3 p {font-size: 18px; line-height: 150%; margin-bottom: 12px; padding: 0 10px}
.text3 h3 {text-align: center; margin-bottom: 18px;}
.text3 h2 {text-align: center; margin-bottom: 38px;}
.text3 hr {margin: 32px auto 12px}
.dom {display: flex; width: 100%; margin: 18px auto 72px; align-items: center; justify-content: center; flex-wrap: wrap}
.dom > a {margin: 10px}
.dom img {width: 100%}
.const1 {width: 630px; height: 394px}
.const2 {width: 300px; height: 188px}
.const3 {width: 950px; height: 594px}
.const4 {width: 465px; height: 291px}
.tokarev {display: flex; width: 100%; margin: 18px auto 32px; align-items: center; justify-content: space-between; }
.text3 h3 {font-size: 28px; margin-left: 10px; margin-bottom: 12px}
.const_benefits {display: flex; width: 100%; margin: 18px 10px 32px; justify-content: space-between; flex-wrap: wrap}
.const_benefits > div {width: 100%; max-width: 450px; margin-bottom: 24px}
.const_benefits p, .tokarev p {padding: 0; font-size: 18px;}
.const_benefits h3, .tokarev h3 {margin-left: 0; text-align: left}

.dom .video {position: relative; padding-bottom: 56.25%; height: 0; margin: 42px auto 0; box-shadow: 3px 3px 40px 0px rgba(0,0,0,0.2);}
.dom .video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

.content_box {width: 100%; max-width: 860px; margin: 0 auto}

#history {background-color: #f1f6f9; width: 100%; padding: 32px 0; margin-bottom: 98px}
#history .text p {margin-bottom: 12px}
#history h3 {margin: 28px 0 6px;}

.text_rev {width: 89%; max-width: 860px; margin: 80px auto 140px}
.text_rev > p {font-size: 19px; line-height: 145%; margin-bottom: 19px; clear: both}
.rev {margin-bottom: 24px; float: left} 
.rev img {margin-right: 32px}
.rev h2 {margin-bottom: 12px}
.rev1:before {content: '— '; margin-left: -20px;}
.rev0 {float: right; margin-right: 32px}
.rev0 img {float: left; margin-right: 12px}
.rev0 a {color: #378bd2; font-size: 15px;}

#images {width: var(--all-width); margin: var(--margin2) auto; text-align: center}
#images img {max-width: 100%; margin: 0 auto 3vw; display: block}

#video_wrap {width: 100%; height: 650px; position: relative; text-align: center; margin-top: 88px}
#video_wrap a {transition: opacity 300ms; color: #fff; text-decoration: none; font-size: 20px; outline: none}
#video_wrap a img {transition: all 0.2s ease}
#video_wrap a:hover img {transform: scale(1.05)}
#video_wrap p {font-size: 26px; font-weight: 500; margin: 6px 0 18px}

.tec1 {1background-color: #f1f6f9; width: 100%; margin: 28px 0; padding: 48px 0 48px}
.tec1_inner {width: 90%; max-width: 1200px; margin: 0 auto;}
.tec1_wrap {width: 100%; margin: 46px auto 0; display: flex; justify-content: space-between; align-items: flex-top; flex-wrap: wrap;}
.tec1_wrap > div {width: 45%; font-size: 16px}
.tec1_wrap > div > .t:first-child {border: 0 !important;}
.tec1_wrap h3 {font-size: 32px; margin-bottom: 21px}
.tec1_wrap .t {padding: 8px 0;}
.tec1_wrap > div:first-child {width: 40%}
.tec1_wrap > div:last-child {width: 55%}
.tec1_wrap .t2 {font-size: 17px; text-align: right;}
.tec1_wrap .t14 {font-size: 26px; font-weight: 700}

.cards_wrap {margin: 48px auto; 1width: calc(var(--all-width) + 2vw); width: 98vw}
.cards {display: flex; align-content: flex-start; justify-content: flex-start; width: 100%; align-items: flex-top; flex-wrap: wrap;}
.card {width: calc(100% / 3); padding: 2vw 1vw}
.card a {text-decoration: none; border: 0; display: block}
.card1 {aspect-ratio: 5 / 3; position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.card1 img {object-fit: cover; height: 100%; display: block}
.card1 video {object-fit: cover; height: 100%; display: none}
.card1 div {width: 100%; height: 100%; overflow: hidden;}
.card2 p:first-child {font-weight: 400; margin-top: 12px; color: #afafaf !important; line-height: 100%;}
.card3 div:last-child {display: none}


.footer {width: 100%; background-color: var(--black); margin-top: var(--margin2); padding: var(--margin2) 0 var(--margin); text-align: center; }
.footer .contacts {justify-content: space-around;; display: flex; flex-wrap: wrap; text-align: left; margin: var(--margin2) auto var(--margin)}
.footer .tel a {color: #fff; font-size: 60px; font-weight: 700; text-decoration: none;}
.footer .tel-desc {color: #fff; font-size: 20px}
.footer table a {color: #8c8c8c; text-decoration: none; transition: color 200ms}
.footer table a:hover {color: #fff}
.footer td {vertical-align: top; text-align: left; line-height: 120%; color: #898989}
.footer .social {margin: var(--margin) 0; 1display: flex;}
.footer .contacts svg {margin: 0 6px 0 0; fill: #898989; width: 34px; height: 34px}
.footer .social img {width: 50px; margin: 0 6px 0 0}
.footer .social svg {max-height: 36px; max-width: 50px; margin: 0 6px 0 0; fill: #898989}
.copy {font-weight: 500; font-size: 18px; color: #383838;}


/*
#sale1 {width: 100%; 1max-width: 1300px; overflow: auto; margin: 38px auto; display: flex; justify-content: center; flex-wrap: wrap;}
#sale1 > div {margin: 28px; width: 560px; height: 680px; background-color: #f1f6f9; background-position: bottom center; background-repeat: no-repeat; text-align: center; padding-top: 34px; transition: box-shadow 350ms}
#sale1 > div:hover {box-shadow: 0px 3px 30px 0px rgba(0,0,0,0.35);}
#sale1 > div > div {height: 168px;}
#sale1 > div:last-child {padding-top: 200px;}
#sale1 > div:last-child p {font-size: 28px; line-height: 125%; font-weight: 700}
#sale1 > div:last-child a {font-weight: 400}
#sale11 > div:last-child a:hover {background-color: #fff; color: #0053a9 }
#sale1 p {margin-bottom: 3px; padding: 0; line-height: 20px; font-size: 15px}
#sale1 a {padding: 8px 22px; text-decoration: none; background-color: #0057a0; color: #fff; font-size: 17px; outline: none; transition: all 200ms}
#sale1 a:hover {background-color: #e2782d; }
#sale1 h3 {color: #272829; font-size: 32px; font-weight: 700; margin-bottom: 9px; 1letter-spacing: -1px}
#sale1 .price {font-size: 20px; font-weight: 700; margin-top: 8px}
#benefits {1background-color: #ebf2f6; width: 100%; margin: 68px 0 18px; text-align: center;}
#benefits > div {display: flex; justify-content: space-around; width: 96%; max-width: 1200px; flex-wrap: wrap; margin: 18px auto}
#benefits > div > div {width: 360px; height: 300px; margin: 19px; padding-top: 12px; text-align: center; 1background-color: #f1f6f9}
#benefits > div > div > p:nth-child(2) {font-size: 52px; color: #111; font-weight: 700; margin-bottom: 0px}
#benefits > div > div > p:nth-child(3) {font-size: 20px; color: #4f6ba0; font-weight: 500; margin-bottom: 0px}

#benefits2 {1background-color: #ebf2f6; width: 100%; margin: 0px 0 118px; text-align: center; 1overflow: auto}
#benefits2 > div {display: flex; justify-content: space-between; width: 96%; max-width: 1200px; flex-wrap: wrap; margin: 32px auto}
#benefits2 > div > div {width: 560px; 1height: 300px; 1margin: 21px 34px; padding-top: 12px; text-align: center; 1background-color: #f1f6f9}
#benefits2 > div > div > p:nth-child(2) {font-size: 52px; color: #111; font-weight: 700; margin-bottom: 0px}
#benefits2 > div > div > p:nth-child(3) {font-size: 20px; color: #4f6ba0; font-weight: 500; margin-bottom: 0px}
#benefits2 ul {text-align: left; margin-top: 21px; list-style: none;}
#benefits2 li {padding-left: 18px; text-indent: -25px; font-size: 18px; margin-bottom: 12px; line-height: 145%}
#benefits2 li::before {content: "✔ "; color: #0057a0; font-size: 24px; }

#benefits3 {background-color: #f1f6f9; width: 100%; padding: 62px 0 42px; margin: 48px 0 118px; text-align: center;}
#benefits3 > div {display: flex; justify-content: space-around; width: 96%; max-width: 1200px; flex-wrap: wrap; margin: 18px auto}
#benefits3 > div > div {width: 560px; height: 600px; margin: 19px; padding-top: 12px; text-align: center; 1background-color: #f1f6f9}
#benefits3 > div > div > p:nth-child(2) {font-size: 42px; color: #111; font-weight: 700; margin-top:18px}
#benefits3 > div > div > p:nth-child(3) {font-size: 20px; color: #4f6ba0; font-weight: 500; margin-bottom: 0px}
#benefits3 > div > div > p:nth-child(4) {text-align: center; margin-top: 16px; line-height: 140%}

#why {background-color: #ebf2f6; width: 100%; 1margin: 0 -15px 0; text-align: center; padding: 44px 0 72px; }
#why table {margin: 8px auto}
#why img {display: inline}
#why tr > td:nth-child(1) {text-align: center; width: 90px}
#why tr > td:nth-child(2) {text-align: left}
#why td {padding: 18px 0}
#why td > p:nth-child(1) {color: #1c8bd7; padding: 0}

.cb {position: absolute; width: 460px; height: 300px; top: 26%; right: 5%; padding: 32px 42px; z-index: 7; text-align: left}
.cb input[type="text"] {border: 0; font-size: 24px; padding: 9px 14px; outline: none; font-family: "Fira Sans"; margin-top: 14px; width: 340px}
.cb input[type="submit"] {margin-top: 14px; height: 45px}
.cb h3 {color: #fff; font-size: 30px; font-weight: 700; margin-bottom: 9px}
*/

.callback_form {width: 90%; max-width: 970px; 1height: 400px; margin: 84px auto 134px; background-color: #f1f6f9; padding: 52px 42px 62px; text-align: center}
.callback_form hr {margin: 9px auto}
.callback_form div {overflow: auto; display: inline-block; margin-top: 38px}
.callback_form input[type="text"] {background-color: #fff; height: 45px; border: 0; font-size: 24px; padding: 6px 14px; outline: none; font-family: "Fira Sans"; margin-right: 9px; width: 210px; float: left; }
.callback_form input[type="submit"] {margin-top: 0; height: 56px; float: left}
.callback_form h2 {margin-bottom: 9px;}
.callback_form input[type="text"]::-webkit-input-placeholder {color:#999; font-size: 18px}
.callback_form .private {margin-top: 32px; color:#979797; font-size: 14px}

.spicials {
	position: relative;
        height: 600px;
	margin: 100px 0;
	1background: url('http://mksgroup.ru/assets/front/img/bg_spicials.jpg') no-repeat 50% 0;
	background: url('/img/sale_0.jpg') no-repeat 50% 0;
	background-size: cover;
	color: #fff;
	1padding-top: 90px;
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	line-height:1.5;
}

.spicials > div > span { 1background-color: #0053a9;
	border: 2px solid #ffb300;
	font-size: 19px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 500;
	padding: 4px 9px;
}
.spicials1 {
text-transform: uppercase;
	color: #fff;
	font-size: 50px;
	line-height:1.2;
	font-weight: 700;
	margin: 32px 0 16px;
}
.blue_button {background-color: #0057a0; 1border: 2px solid #fff; padding: 16px 32px; text-decoration: none; color: #fff; font-size: 19px; outline: none; transition: all 200ms}
.blue_button:hover {background-color: #e2782d; }

@media screen and (min-width: 1201px) and (max-width: 1450px) {
	html {font-size: 20px}
	h1,h2 {font-size: 62px}
	nav div a {font-size: 19px; padding: 7px 12px 6px;}
	.tags a {font-size: 17px; padding: 6px 8px;}
	.card2 h3 {font-size: 22px}
	.twhite h1 {font-size: 74px;}
	.twhite #title1 {font-size: 38px !important}
	.staff_wrap {grid-template-columns: repeat(3, 1fr)}
	.minheight {height: 530px !important}
	#text_wrap p {font-size: 16px}
	.small > div > p:first-child {font-size: 44px !important; letter-spacing: -1px !important}
	.facts2 {margin-bottom: 48px}
	.facts2_wrap > div {font-size: 15px}
	.facts2_wrap > div > p:first-child {font-size: 46px}
	#facts_wrap > div > p:last-child {font-size: 17px}
	#footer div {margin: 0 56px}
}

@media screen and (max-width: 1200px) {
	:root {
		--margin: 2vw;
		--margin2: 4vw;
		--all-width: 94vw;
	}
	html {font-size: 14px}

	#head_bg {height: 100vh; margin-top: 0px}
	#logo img {width: 70%}
	.title {left: 4%; max-width: 94%; top: 35%}
	.twhite {top: 25% !important;}
	.twhite h1 {font-size: 38px}
	.twhite #title1 {font-size: 28px !important; line-height: 100% !important;}
	.facts2, #video_wrap, nav, .sh2, #facts, .cb {display: none}
	h1 {font-size: 38px}
	h1.big {font-size: 38px; letter-spacing: -1px; }
	h2 {font-size: 24px; line-height: 110%; max-width: 96%; margin-bottom: 21px}
	h4 {font-size: 1rem; letter-spacing: -1px}
	.text, .text2, #tec {margin: 32px auto}
	#tec {padding: 38px 0}
	#tec_wrap {margin-top: 0px}
	.text_wrap div {width: 100%; min-width: 300px}

	.card {width: 100%; padding: 18px 1vw}
	.card1 img {width: 140%;}
	.card2 p:first-child {margin-top: 3px}

	.tags a {font-size: 16px; padding: 3px 6px; margin: 3px}

	.staff-wrap {grid-template-columns: repeat(3, 1fr) !important}
	.staff-wrap p {font-size: 12px }

	#tec_wrap > div {width: 100%}
	.t13 {float: none; text-align: left; max-width: 100%; clear: left}
	.1t12 {padding-left: 0}
	#facts_wrap > div {text-align: left; padding: 14px 14px 14px 14px;}
	#facts_wrap > div > p:first-child {font-size: 28px;}
	#facts_wrap > div small {font-size: 18px}
	#staff_wrap {justify-content: center}
	.callback_form {margin: 34px auto 34px; text-align: center}
	.callback_form input[type="text"] {margin: 9px 0; width: 90%; float: none; }
	.callback_form input[type="submit"] {margin: 9px 0; float: none; }
	.dom {display: flex; flex-direction: row !important; height: auto !important}
	.dom > a {width: 100%; height: auto; margin: 10px 0}
	.tokarev {flex-wrap: wrap}
	.tokarev > div {width: 100%}
	.tokarev > div:first-child {text-align: center; margin-bottom: 12px}
	.text3 h3 {font-size: 20px}
	.text3 {margin-top: 18px !important}

	.footer .tel a {font-size: 34px}
	.footer .contacts > div {margin: 0 auto var(--margin)}
	.footer .contacts {flex-direction: column}
	.footer .contacts svg {width: 24px; height: 24px}
	.footer .social img {width: 34px}
	
	.desktop {display: none}
	.mobile {display: block}
}

[class*="ymaps-2"][class*="-ground-pane"] {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 3.5+ */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
}

.menu-toggle {
  border: none;
  cursor: pointer;
  outline: none;	
  position: relative;
  display: block;
  z-index: 30;
  width: var(--buttonWidth);
  height: var(--buttonHeight);
  background: transparent;
  border-top: var(--lineThickness) solid;
  border-bottom: var(--lineThickness) solid;
  color: var(--buttonColor);
  font-size: 0;
  transition: all var(--transitionSpeed) var(--transitionEasing);
}

.menu-toggle:before,.menu-toggle:after {
    content: '';
    display: block;
    width: 100%;
    height: var(--lineThickness);
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    background: currentColor;
    
    transform: translate(-50%, -50%);
    transition: transform var(--transitionSpeed) var(--transitionEasing);
} 

button:hover {
  color: lighten(var(--buttonColor), 15%);
}

button.is-active {
  border-color: transparent;
}
button.is-active:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

button.is-active:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}