:root {

	--body-font-size: 16px;
	--body-upper-font-size: 20px;
	--body-h-font-size: 40px;

	--header-padding-v: 45px;
	--header-padding-h: 0px;
	--header-back-color: #fff;
	--hdr-logo-width: 265px;
	--hdr-phone-width: 250px;
	--hdr-wa-width: 100px;
	--hdr-phone-size: 22px;
	--hdr-wa-size: 54px;
	--hdr-part-size: 82px;
	--hdr-part-padding: 15px;

	--block-one-padding-v: 80px;

	--block-video-height: 28vw;

	--where-item-height: 240px;

	--active-link-color: #e20;
	--active-color: #e20;

	--swiper-navigation-color: var(--active-color);
	--swiper-pagination-color: var(--active-color);
	--swiper-pagination-bullet-size: 12px;

	--dark-green-color: #253e40;

	--xxl-padding: 120px;
	--xl-padding: 80px;

	--footer-back-color: #162526;
	--footer-color: #fff;

	--scrollable-height: 460px;

	--scrollbar-width: 6px;
	--scrollbar-color: var(--dark-green-color);
}

body {
	color: #000;
	font-size: var(--body-font-size);
	/*font-family: 'NextArt';*/
	font-family: 'Manrope', sans-serif;
}

input:focus { outline: none; }

a, a:visited { color: inherit; text-decoration: inherit; }

a:hover { color: var(--active-link-color)  }

.margin-auto { display: block; margin-left: auto; margin-right: auto; }

.font20 {font-size: var(--body-upper-font-size)}

.active-color { color: var(--active-color) }

.btn:hover { color: inherit;  }

.paddingV50 {
	padding-top: 50px;
	padding-bottom: 50px;
}

h3 { font-size: 1.2em; line-height: 1.5em; }

h2 {
    font-size: var(--body-h-font-size);
    line-height: 1.5em;
}

h1 {
	font-size: var(--body-h-font-size);
    line-height: 1.5em;	
}

/********** HEADER ***********/

header {
	padding: var(--header-padding-v) var(--header-padding-h);
	background-color:var(--header-back-color);
}

header .hdr-part-size { height: var(--hdr-part-size); padding: var(--hdr-part-padding) }

header .page-wa { width: var(--hdr-wa-width); font-size: var(--hdr-wa-size); }

header .page-phone { width: var(--hdr-phone-width); font-size: var(--hdr-phone-size); }

header .page-slogan { width: calc( 100% - var(--hdr-phone-width) - var(--hdr-logo-width) - var(--hdr-wa-width)); }

header .logo-container { width: var(--hdr-logo-width); }

header .logo-container img { width: 100%; }

/******** BLOCK_1 *********/

.shadow {
	background-color: #fff;
	opacity: .7;
}

.block_1 { padding: var(--block-one-padding-v) 0; }

.block1_li {line-height: 1.4em; padding: 1em 0;}

.block1_li .icon { margin-right: .75em; }

.block1_li .icon + .toMiddle {
	max-width: calc(100% - 3em);
}

.block_1 .form-to-send {
    padding: 20px;
    background-color: #fff;
    border: 2px solid var(--active-color);
    width: 400px;
    max-width: 100%;
    margin-left: auto;
}

.block_1 input {
    border: none;
    border-bottom: 1px solid var(--active-color);
    width: 100%;
}

.block_1 .btn {
	width: 100%;
    background-color: #991c03;
    color: #fff;
    padding: 15px;
    border-radius: 0px;
    border: 2px solid rgba(0,0,0,.4);
}

.as-link { border-bottom: 1px dotted var(--active-color) }

/******** BLOCK_2 **********/

.paddingV80 {
	padding-top: var(--xl-padding);
	padding-bottom: var(--xl-padding);
}

.block_2 .li-image {
    width: 60px;
    margin-right: 30px;
    padding: 0;
}

.block_2 .li-image img {
    width: 100%;
}

.block_2 .li-text {
    width: calc(100% - 90px);
    padding: 0;
    height: 60px;
}

.squareImage {
    width: 280px;
    height: 245px;
}

.block_2 .learn-about {
    width: 860px;
    margin: 50px auto;
    max-width: 100%;
}

.learn-about .icon,
.learn-about .icon { margin-right: 20px }

.block_2 .learn-about .small {font-size: .75em; opacity: .6}

/********** BLOCK_3 *********/

.video-wrap-height {
	height: var(--block-video-height);
	padding: 0;
	background-color: var(--dark-green-color);
	color: #fff;
}

.video-wrap-height.flex .wrap { width: 620px; max-width: 90%; }

.video-wrap-height iframe { width: 100%; height: 100%; }

.paddingV120 { padding-top: var(--xxl-padding); padding-bottom: var(--xxl-padding); }

/********** BLOCK_5 *********/

.where-item-image {
	height: var(--where-item-height);
}

/********** BLOCK_6 *********/

.video-wrap-height.red-back {
	background-color: #7e4444;
}

.b300 { width: 350px; max-width: 100%; }

.b300 .inline-form {
	font-size: 2vh;
}

.b300 .inline-form input {
	padding: .7em 2em;
	color: #000;
}

.b300 .inline-form .btn {
	padding: 1.6em 2em;
    font-size: 1.2vh;
    background-color: rgb(135 45 38);
    border-radius: 0;
    border-bottom: 2px solid #000;
}

/**************************/

.redBtn {
    padding: 1em 2em;
    font-size: .75em;
    background-color: #872d26;
    color: #fff;
    border-bottom: 2px solid #000;
    border-radius: 0;
    font-weight: 600;
}

.redBtn:hover {
	color: #fff;
}

/************************/

.brand-item {
	width: 20%;
	padding: 15px;
	height: 92px;
}

.brand-item img {
	max-height: 100%;
	display: block;
	margin: 0 auto;
}

/******** BLOCK_10 ********/

.block_10 {
	background-color: #f7f7f7;
}

div.li .icon + .toMiddle {
	width: calc(100% - 85px);
}

.swiper-slider { overflow: hidden; }

#certSlider {
	padding: 0px 60px 30px;
}

/******************************/

.storeItem {
	padding: 30px 15px;
	border-left: 1px dotted #666;
}

.storeItem:first-child {
	border-left: none;
}

.store-img img { max-width: 100%; height: 30vh; display: inline-block; }


/******************************/

footer {
	color: var(--footer-color);
	background-color: var(--footer-back-color);
}

/******************************/

.modalWrapper {
	
}

.modalShadow {
	background-color: var(--footer-back-color);
	opacity: .5;
}

.modalWin {
	width: 400px;
	background-color: #fff;
    position: relative;
    margin: auto;
}

.modal-inner {
	max-height: var(--scrollable-height);
	padding: 15px 30px 30px;
}

.modalWin .scrollable {
	overflow-y: auto;
	height: calc(var(--scrollable-height) - 45px);
}

.modalWin .modal-header {
	position: relative;
}

.modalWin .close-modal {
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	position: absolute;
	cursor: pointer;
}

.modal-inner input {
    font: inherit;
    padding: 15px;
}

.modal-inner .sendForm {
    padding: 15px;
    background-color: var(--active-color);
    border-radius: 0;
    color: #fff;
    border-bottom: 2px solid #000;
}

.pretty-scroll::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.pretty-scroll::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 5px;
}

.pretty-scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.pretty-scroll::-webkit-scrollbar:horizontal {
    height: 6px;
}

/******************************/

@media (max-width: 1100px) and (min-width: 769px) {

	:root {
		--header-padding-v: 15px;
		--body-font-size: 13px;
		--body-upper-font-size: 16px;
		--body-h-font-size: 28px;
		--xxl-padding: 90px;
		--xl-padding: 50px;
	}

	.brand-item { height: 55px; padding: 10px; }
	
}

@media (max-width: 768px) and (min-width: 600px) {

	:root {
		--hdr-phone-size: 17px;
		--hdr-phone-width: 186px;
		--hdr-wa-size: 35px;
		--hdr-wa-width: 70px;
		--hdr-logo-width: 200px;

		--header-padding-v: 15px;
		--body-font-size: 12px;
		--body-upper-font-size: 15px;
		--body-h-font-size: 28px;
		--xxl-padding: 60px;
		--xl-padding: 30px;

		--block-video-height: 38vw;
	}

	.squareImage {
	    width: 210px;
	    height: 230px;
	}

	.brand-item { height: 40px; padding: 10px; }

	.storeItem:nth-of-type(3) { border-left: none; }
	
}

@media (max-width: 599px) {
	:root {
		--hdr-phone-size: 26px;
		--hdr-phone-width: 100%;
		--hdr-wa-size: 55px;
		--hdr-wa-width: 100%;
		--hdr-logo-width: 100%;

		--header-padding-v: 15px;
		--body-font-size: 13px;
		--body-upper-font-size: 14px;
		--body-h-font-size: 20px;
		--xxl-padding: 40px;
		--xl-padding: 20px;

		--block-video-height: 56vw;
	}

	header .page-slogan { width: 100%; }

	.squareImage {
	    width: 100%;
	    height: 230px;
	}

	.brand-item { 
		width: 50%;
	    height: 44px;
	    padding: 10px;
	    margin-bottom: 15px;
	}

	.storeItem {
    	padding: 15px 15px;
    	border-left: none;
	}

	.learn-about .icon, .learn-about .icon + .toMiddle {
	    max-width: calc(100% - 50px);
	}

	#certSlider {
	    padding: 0px 15px 30px;
	}

	.store-img + .store-img { margin-top: 30px; }

	footer * { text-align: center;  }
}