:root{
	--blue: #10528d;
	--gray: #f0f6f8;
	--black: #2c2c2c;
}

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background-color: rgba(74,98,120,.3); }
::-webkit-scrollbar-thumb:hover{ background-color: rgba(74,98,120,1); }
::-webkit-scrollbar-track{ background-color: rgba(74,98,120,.1); }
::-webkit-scrollbar-track:hover{ background-color: rgba(74,98,120,.2); }

html{ font-size: 15px; }
body{ margin:0; color: #000; font-size: 1rem; font-family: 'Montserrat', Arial, sans-serif; line-height: 1.4; }
img{ border:0; max-width: 100%; }
input::-moz-focus-inner, select::-moz-focus-inner{ border:0; }
input{ padding:0; margin:0; border:0; }
hr{ border-width: 2px; margin-top: 1.5rem; margin-bottom: 2.5rem; }
a{ text-decoration: none; color: inherit; transition: color .2s; }
a:hover, a:visited{ text-decoration: none; color: inherit; }
:focus, :active{ outline: none; }
[data-modal]{ cursor: pointer; }

h1, h2, h3, h4, h5, h6, .title, .title_lg{ font-weight: bold; margin-bottom: 1.5rem; text-transform: uppercase; }
h1, .title_lg{ position: relative; font-size: 2.4rem; margin-bottom: 2rem; z-index: 10; }
h2, .title{ font-size: 2.2rem; margin-bottom: 2rem; }

ul.unstyled,
ol.unstyled{ margin: 0; padding: 0; list-style: none; }

header{ height: 100px; background-color: #2c2c2c; color: #fff; }
header > .container{ display: flex; align-items: center; }
header .logo{ flex-shrink: 0; margin-right: 30px; }
header .logo a{ display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; }
header .header__content{ flex-grow: 1; }
header .header__info{ color: #b9bcbd; font-size: .85rem; }
header .header__phones{ text-align: right; }
header .header__phones a{ font-weight: bold; white-space: nowrap; }
header .header__top{ display: flex; align-items: center; min-height: 50px; }
header .menu-btn{ flex-shrink:0; position: relative; display: block; width: 34px; height: 24px; cursor: pointer; vertical-align: top; margin-left: 20px; cursor: pointer; }
header .menu-btn span:after,
header .menu-btn span:before{ display: block; content: ''; }
header .menu-btn span,
header .menu-btn span:after,
header .menu-btn span:before{ position: absolute; width: 100%; height: 2px; background: #fff; transition: background .3s; }
header .menu-btn span{ top: 50%; display: block; margin-top: -1px; }
header .menu-btn span:after{ bottom: -10px; }
header .menu-btn span:before{ top: -10px; }
header .menu-btn.active span,
header .menu-btn.active span:after,
header .menu-btn.active span:before{ background: #fff; }
header .menu-btn.active span{ transform: rotate(45deg); }
header .menu-btn.active span:after{ bottom: 0; transform: rotate(-90deg); }
header .menu-btn.active span:before{ top: 0; opacity: 0; }

section{ position: relative; width: 100%; padding-top: 50px; padding-bottom: 50px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
section.section_top{ padding-top: 160px; padding-bottom: 70px; }

.banner-dots{ position: relative; }
.banner-dots:before,
.banner-dots:after{ content:''; display: block; position: absolute; width: 130px; height: 130px; background: url('img/dots.svg') center center no-repeat; }
.banner-dots:before{ left: -300px; bottom: 50px; }
.banner-dots:after{ left: 60%; top: 10px; }

.row_flex > [class*="col"]{ display: flex; flex-direction: column; }
.row_sm{ margin-left: -10px; margin-right: -10px; }
.row_sm > [class*="col"]{ padding-left: 10px; padding-right: 10px; }
.row_xs{ margin-left: -7px; margin-right: -7px; }
.row_xs > [class*="col"]{ padding-left: 7px; padding-right: 7px; }

.btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 10px 30px; border: 1px solid var(--blue); background-color: var(--blue); color: #fff; fill: #fff; font-size: .85rem; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s, border-color .3s; }
.btn:visited{ color: #fff; }
.btn_white{ background-color: #fff; border-color: #fff; color: var(--primary); fill: var(--primary); }
.btn_white:visited{ color: var(--primary); }
.btn_gray{ background-color: var(--gray-dark); border-color: var(--gray-dark); }
.btn_red{ background-color: var(--red); border-color: var(--red); }
.btn_bordered{ background-color: transparent; border-color: var(--primary); color: var(--primary); fill: var(--primary); }
.btn_white.btn_bordered{ background-color: transparent; border-color: #fff; color: #fff; fill: #fff; }
.btn_white.btn_bordered:visited{ color: #fff; }

.inp{ height: 60px; padding: 0 20px; border-radius: 5px; border: 1px solid #c9c9c9; font-size: 1.07rem; }
.ta{ height: 100px; padding: 10px 20px; border-radius: 5px; border: 1px solid #c9c9c9; font-size: 1.07rem; resize: none; }

.color-white{ color: #fff; fill: #fff; stroke: #fff; }
.color-blue{ color: var(--blue); fill: var(--blue); stroke: var(--blue); }
.color-red{ color: var(--red); fill: var(--red); stroke: var(--red); }

.text{ font-size: 1rem; }
.text_xs{ font-size: .7rem; }
.text_sm{ font-size: .85rem; }
.text_md{ font-size: 1.2rem; }
.text_lg{ font-size: 1.4rem; }
.text_xl{ font-size: 1.75rem; }

.font-regular{ font-weight: 400; }
.font-semibold{ font-weight: 600; }
.font-bold{ font-weight: 700; }

.bg-black{ background-color: var(--black); }
.bg-gray{ background-color: var(--gray); }
.bg-blue{ background-color: var(--blue); }

.engine{ position: relative; display: inline-block; z-index: 10; }
.engine img:first-child{ min-width: 290px; }
.engine__after{ position: absolute; top: -50px; left: 60%; }

.modal-link{ cursor: pointer; }
.modal-wrap{ position: fixed; display: flex; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition:opacity .4s, visibility .4s; z-index: 1000; }
.modal-wrap .close-modal-btn{ position: fixed; right: 10px; top: 10px; padding: 10px; cursor: pointer; }
/*.modal-wrap .modal{ position: relative; max-width: 90vw; width: 460px; padding: 40px 45px; background-color: #fff; color: #000; z-index: 1010; -webkit-transition: transform ease-in-out .3s; -moz-transition: transform ease-in-out .3s; -o-transition: transform ease-in-out .3s; transition: transform ease-in-out .3s; moz-transform: translateY(-30%) scale(.9); -ms-transform: translateY(-30%) scale(.9); -webkit-transform: translateY(-30%) scale(.9); -o-transform: translateY(-30%) scale(.9); transform: translateY(-30%) scale(.9); }*/
.modal-wrap .modal{ position: relative; max-width: 90vw; width: 460px; padding: 40px 45px; background-color: #fff; color: #000; z-index: 1010; }
.modal-wrap .modal .inp,
.modal-wrap .modal .ta{ width: 100%; }
.modal-wrap .modal .modal__body{ max-height: 82vh; overflow-x: hidden; overflow-y: auto; }
.modal-wrap.active{ opacity: 1; visibility: visible; }
/*.modal-wrap.active .modal{ -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }*/

.product-list{ display: flex; margin-left: -15px; margin-right: -15px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; overflow-y: hidden; overflow-x: auto; }
.product-list::-webkit-scrollbar{ display: none; }
.product{ padding-left: 15px; padding-right: 15px; width: 33.33%; }
.product__name{ margin-bottom: 45px; color: var(--blue); font-weight: bold; text-transform: uppercase; }
.product__photo{ position: relative; width: 100%; margin-bottom: 25px; padding-bottom: 56%; }
.product__photo img{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; max-width: 100%; max-height: 100%; margin: auto; -o-object-fit: contain; object-fit: contain; -webkit-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; transition: opacity 0.1s linear; z-index: 2; }
.product__text{ padding-top: 15px; font-size: 14px; line-height: 1.8; }

.advantages{ list-style: none; margin: 0; padding: 0; }
.advantages li{ display: flex; margin-bottom: 40px; }
.advantages li img{ flex-shrink: 0; width: 60px; height: 60px; margin-right: 30px; }

.guarantee-icon{ width: 70px; }

.examples-slider .slide{ padding-bottom: 75%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.examples-slider .owl-item.active.center{ opacity: 1; }
.examples-slider .owl-nav > div{ position: absolute; width: 40px; height: 40px; top: 50%; margin-top: -20px; border-radius: 50%; background-color: #f43636; font-size: 0; cursor: pointer; }
.examples-slider .owl-nav > div:before{ content: ''; display: block; position: absolute; width: 14px; height: 14px; top: 50%; margin-top: -7px; transform: rotate(45deg); border: 1px solid #fff; border-radius: 1px; }
.examples-slider .owl-nav .owl-prev{ left: 30%; }
.examples-slider .owl-nav .owl-prev:before{ left: 44%; border-top: 0; border-right: 0; }
.examples-slider .owl-nav .owl-next{ right: 30%; }
.examples-slider .owl-nav .owl-next:before{ right: 44%; border-bottom: 0; border-left: 0; }

.client{ padding-bottom: 65%; margin-bottom: 40px; background-position: center center; background-repeat: no-repeat; background-size: contain; }

.tooltip-horizontal-scroll-icon_hand{ animation: tooltip-horizontal-scroll-icon_anim-scroll-hand 2s infinite }
.tooltip-horizontal-scroll-icon_card{ animation: tooltip-horizontal-scroll-icon_anim-scroll-card 2s infinite }

@keyframes tooltip-horizontal-scroll-icon_anim-scroll-hand {
	0% { transform: translateX(80px) scale(1); opacity: 0 }
	10% { transform: translateX(80px) scale(1); opacity: 1 }
	20%,60% { transform: translateX(175px) scale(.6); opacity: 1 }
	80% { transform: translateX(5px) scale(.6); opacity: 1 } to { transform: translateX(5px) scale(.6); opacity: 0 }
}

@keyframes tooltip-horizontal-scroll-icon_anim-scroll-card {
	0%,60% { transform: translateX(0) }
	80%,to { transform: translateX(-240px) }
}

footer{ padding: 70px 0 40px; background: var(--black); color: #fff; }
footer ul{ margin-bottom: 1.5rem; }
footer .footer__map{ position: relative; padding-bottom: 60%; }
footer .footer__map iframe{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

@media only screen and (min-width: 576px) {
	h2, .title{ margin-bottom: 3rem; }
}

@media only screen and (min-width: 768px) {
	.slider-wrap{ margin-left: -20%; margin-right: -20%; }
	.examples-slider .owl-item{ opacity: .5; transition: opacity .5s; }
}

@media only screen and (min-width: 992px) {
	header .menu-btn{ display: none; }
	header .header__bottom{ display: flex; align-items: center; min-height: 50px; border-top: 1px solid #555; }
	header .header__menu{ width: 100%; display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
	header .header__menu li{ padding: 0 12px; border-left: 1px solid #4e95d4; line-height: 10px; }
	header .header__menu li.li_bordered{ border-right: 1px solid #4e95d4; }
	header .header__menu li.li_no-border{ border: 0; }
	header .header__menu li a{ font-weight: bold; font-size: .67rem; text-transform: uppercase; letter-spacing: 1px; }
}

@media only screen and (min-width: 1200px) {
	/*header .header__menu li{ padding: 0 40px; }*/
	header .header__menu li{ padding: 0 20px; }
	header .header__menu li a{ letter-spacing: 1.5px; }

	.btn{ padding: 10px 40px; }

	.banner-padding_top{ padding-top: 50px; }
	.banner-padding_bottom{ padding-bottom: 50px; }
	.engine{ margin-top: -50px; }

	.advantages{ margin-right: 40px; }
}

@media only screen and (min-width: 1600px) {
	
}

@media only screen and (max-width: 1199px) {
	
}

@media only screen and (max-width: 991px) {
	header{ height: 75px; }
	header .logo a{ width: 80px; height: 75px; padding: 2px; }
	header .logo a img{ max-height: 94%; }
	header .header__info{ color: #b9bcbd; font-size: .85rem; }
	header .header__menu{ position: fixed; display: flex; flex-direction: column; width: 300px; top: 0; bottom: 0; right: -100%; padding: 42px 25px 25px; margin: 0; list-style: none; background: var(--blue); color: #fff; transition: right .5s; z-index: 1000; }
	header .header__menu.active{ right: 0; }
	header .header__menu a{ font-size: 1.2rem; font-weight: bold; }
	header .header__menu li:not(:last-child){ margin-bottom: 1rem; }
	header .header__menu .menu-btn{ position: absolute; top: 13px; right: 10px; }

	.engine__after{ width: 130px; }
}

@media only screen and (max-width: 767px) {
	.examples-slider .owl-nav .owl-prev{ left: 30px; }
	.examples-slider .owl-nav .owl-next{ right: 30px; }
}

@media only screen and (max-width: 575px) {
	h1, .title_lg{ font-size: 2.1rem; }
	h2, .title{ font-size: 1.8rem; }

	.client_wide{ padding-bottom: 40%; }

	.engine{ margin-top: 40px; }
	.engine__after{ left: 70%; width: 100px; }

	.product{ min-width: 70%; max-width: 70%; }

	.modal-wrap .modal{ padding: 30px; }
}

@media only screen and (max-width: 479px) {
	.product{ min-width: 80%; max-width: 80%; }
}

@media only screen and (max-width: 399px) {
	
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
	select, textarea, input{ font-size: 15px; }
}