@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto:400,700');

html {font-size:62.5%; height:100%; background:#efefef url(../vis/body_bg.png); color:#383737}
body {font:1.8rem/1.4 Roboto, Tahoma, Arial, sans-serif; height:100%; min-height:100%; min-width:320px}

a {color:#383737}
a:hover {color:#000}

h1 {font-family:'Roboto Slab'; font-size:4.8rem; font-weight:700; margin:0 0 15px}
h2 {font-family:'Roboto Slab'; font-size:3.4rem; font-weight:700; margin:0 0 15px}

ul {margin:1em 0 1em 1.1em; padding:0; list-style:disc}
ul li {margin:0.15em 0}

p {margin:0.5em 0}

::-webkit-input-placeholder {color:#a7a8a8; text-indent:0; transition:color 1s ease, text-indent 0.5s ease}
::-moz-placeholder {color:#a7a8a8; text-indent:0; transition:color 1s ease, text-indent 0.5s ease}
:-moz-placeholder {color:#a7a8a8; text-indent:0; transition:color 1s ease, text-indent 0.5s ease}
:-ms-input-placeholder {color:#a7a8a8; text-indent:0; transition:color 1s ease, text-indent 0.5s ease}
:focus::-webkit-input-placeholder {color:transparent; text-indent:-10em; transition:color 0.5s ease, text-indent 1s ease}
:focus::-moz-placeholder {color:transparent; text-indent:-10em; transition:color 0.5s ease, text-indent 1s ease}
:focus:-moz-placeholder {color:transparent; text-indent:-10em; transition:color 0.5s ease, text-indent 1s ease}
:focus:-ms-input-placeholder {color:transparent; text-indent:-10em; transition:color 0.5s ease, text-indent 1s ease}

#page {position:relative}

form {border:0; margin:0;}
fieldset {border:0; margin:0; padding:0}
form .fieldList {margin:0; padding:0; list-style:none}
form .field {margin:20px 0; clear:both}
input[type='text'],
input[type='password'],
textarea {background:#f7f7f2; padding:10px 20px; border:1px #d2cece solid; border-radius:3px; font-size:1.4rem; width:100%; box-sizing:border-box; height:50px}
input[type='text']:focus,
input[type='password']:focus,
textarea:focus {cursor:text}
textarea {display:block; height:auto}
form .submit {margin:0}
form .submit input {display:block; background:#1385ce; color:#fff; font-size:2.4rem; height:50px; line-height:50px; border:0; border-radius:3px; border-bottom:3px #196ca1 solid; text-align:center; text-decoration:none; width:100%; box-shadow:none; transition:all 0.25s ease}
form .submit input:hover {box-shadow:0 0 4px rgba(0,0,0,0.5)}
form .comment {display:block; font-size:1.1rem; color:#777; font-style:italic}
form .field-file {font-size:0}
form .field-file .comment {display:inline-block; width:50%; font-size:1.5rem; vertical-align:top; line-height:1.3; margin-right:5%}
form .field-file .comment strong {display:block;}
form .field-file .fileInput {display:inline-block; width:45%; vertical-align:top; font-size:1.5rem}
form .field-file .fileInput input {width:100%}

header {position:absolute; top:0; left:0; width:100%; z-index:999}
header .headerWrapper {max-width:970px; padding:0 10px; margin:0 auto; }
header .logo {font-family:'Roboto Slab'; position:absolute; left:50%; top:15px; margin:0 0 0 -485px; text-decoration:none; width:260px; overflow:hidden}
header .logo .title {display:block; font-weight:bold; font-size:3.5rem; font-weight:bold; text-transform:uppercase; color:#383737; height:34px; line-height:34px; white-space:nowrap; position:relative}
header .logo .subtitle {display:block; color:#a4b2ba; font:italic 1.1rem Arial, sans-serif; margin:3px 0 0; text-align:center}
header .phoneBlock {padding-top:20px; font-size:1.4rem; white-space:nowrap; text-align:right}
header .phoneBlock .callbackBlock {display:inline-block; vertical-align:middle; margin-right:40px; line-height:3.1rem; text-transform:uppercase; padding:0; background:url() left center no-repeat}
header .phoneBlock .phoneList {display:inline-block; vertical-align:middle; font-size:1.8rem; margin:0; padding:0 0 0 30px; list-style:none; text-align:right; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCI+PHBhdGggZmlsbD0iIzVCNTk1NiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45NiA2LjFjMS4xMiAyLjE2IDIuNzcgMy44IDQuOTQgNC45M0w5LjU4IDkuNGMuMjMtLjI0LjUtLjMuNzctLjIuODQuMyAxLjczLjQ0IDIuNjcuNDQuMjIgMCAuNC4wNy41NC4yLjE0LjE1LjIuMzIuMi41NFYxM2MwIC4yMi0uMDYuNC0uMi41NHMtLjMyLjItLjUzLjJjLTMuNSAwLTYuNS0xLjI0LTktMy43M0MxLjUgNy41LjIzIDQuNS4yMyAxIC4yMy43OC4zLjYuNDMuNDYuNi4zMi44LjI2IDEgLjI2aDIuNjNjLjIgMCAuMzguMDYuNTIuMnMuMi4zMi4yLjUzYzAgLjkuMTUgMS44LjQ0IDIuNjMuMDUuMyAwIC41Ni0uMi43N0wyLjk0IDYuMXoiLz48L3N2Zz4=) left center no-repeat; overflow:hidden; line-height:1.2}
header .phoneBlock .phoneList .phone {margin:0; padding:0}
header .phoneBlock .phoneList .phone-main {font-size:2.1rem}

section.frame {overflow:hidden; position:relative}
section.frame .frameWrapper {max-width:970px; padding:50px 10px; margin:0 auto; position:relative; z-index:2}

.slideListBlock {margin:0; padding:0 0 26px; list-style:none; position:relative}
.slideListBlock .blockWrapper {overflow:hidden}
.slideListBlock .slideList {margin:0; padding:0; list-style:none}
.slideListBlock .slideList .slide {margin:0; padding:0; position:relative}
.slideListBlock .slideList .imageWrapper {display:block; text-align:center; font-size:0; height:260px}
.slideListBlock .slideList .imageWrapper:after {content:''; display:inline-block; height:100%; width:0; vertical-align:middle}
.slideListBlock .slideList .imageWrapper .image {display:inline-block; vertical-align:top; max-width:100%; font-size:1.2rem}
.slideListBlock .slideList .content {text-shadow:1px 1px #fff; position:absolute; left:16px; right:16px; bottom:30px; overflow:hidden; font-size:2.4rem; line-height:1.25; font-weight:700; font-family:'Roboto Slab'; white-space:normal; text-align:center}
.slideListBlock .slideList .content big,
.slideListBlock .slideList .content .accent {font-weight:normal; }
.slideListBlock .navBlock {position:absolute; left:0; width:100%; bottom:0; text-align:center; font-size:0}
.slideListBlock .navBlock .slide {display:inline-block; border:2px #231916 solid; background:#231916; border-radius:4px; width:4px; height:4px; margin:0 6px 8px; box-shadow:0 0 2px rgba(255,255,255,0.3); transition:all 0.5s ease}
.slideListBlock .navBlock .slide-active {background:#ffbf26}
.jsEnabled .slideListBlock .slideList {white-space:nowrap; font-size:0}
.jsEnabled .slideListBlock .slideList .slide {display:inline-block; vertical-align:top; width:100%; margin:0 -100% 0 0; opacity:0; visibility:hidden; -webkit-filter:blur(5); -ms-filter:blur(5); -moz-filter:blur(5); filter:blur(5); transition:all 0.5s ease}
.jsEnabled .slideListBlock .slideList .slide-active {opacity:1; visibility:visible}



.frame-promo .slideListBlock {float:right; width:365px; margin:0 0 2em 2em}
section.frame-promo .frameWrapper {padding-top:0}

.frame-promo {background:#e2f5ff; min-height:295px; border-bottom:1px #bfbfbf solid; box-shadow:0 5px 5px #bfbfbf; padding-top:105px}
.frame-promo:before {content:''; position:absolute; left:50%; width:760px; height:90px; margin-left:-550px; top:0; z-index:1; background:url(../vis/header_bg_1.png) center top no-repeat}
.frame-promo:after {content:''; position:absolute; left:50%; width:840px; height:56px; margin-left:-50px; bottom:0; z-index:1; background:url(../vis/header_bg_2.png) center bottom no-repeat}
.frame-promo .textBlock {max-width:570px; text-shadow:1px 1px 1px #fff}
.frame-promo .textBlock .action {display:block; background:#1385ce; margin:30px 0 0; color:#e2f5ff; width:268px; border:3px #6ea6ca solid; border-radius:5px; padding:10px 0; text-align:center; text-decoration:none; text-shadow:none; box-shadow:none; transition:all 0.25s ease}
.frame-promo .textBlock .action:hover {box-shadow:0 0 4px rgba(0,0,0,0.5)}

.frame-features {background:#208fd6 center center no-repeat; background-size:cover; color:#fff; font-size:1.7rem}
.frame-features:before,
.frame-features:after {content:''; position:absolute; left:50%; margin:0 0 0 -520px; width:1040px; top:0; height:20px; background:url(../vis/frame_shadow.png) center -20px no-repeat; z-index:3}
.frame-features:after {top:auto; bottom:0; background-position:center 0}
.frame-features ul {margin:0 0 0 1.1em}
.frame-features .intro {text-transform:uppercase; text-align:center; padding:30px 0 0; margin:0 0 40px; position:relative}
.frame-features .intro:before {content:''; left:50%; margin:0 0 0 -100px; width:200px; border-top:2px #fff solid; position:absolute; top:0}
.frame-features .featureListBlock {}
.frame-features .featureListBlock .featureList {counter-reset: item; list-style:none; margin:0; padding:0}
.frame-features .featureListBlock .feature {background:rgba(52,157,224,0.8); padding:15px 15px 15px 60px; margin:2px; overflow:hidden}
.frame-features .featureListBlock .feature ul {list-style:disc}
.frame-features .featureListBlock .feature:before {content: counter(item) '. '; counter-increment: item; font-size:3.6rem; line-height:3.6rem; font-weight:700; color:#aae0fd; float:left; margin:0 0 0 -45px}

section.frame-production {overflow:hidden}
section.frame-production .frameWrapper {padding-bottom:0}

.frame-production .productTabBlock {position:relative}
.frame-production .productTabBlock .productList {margin:0; padding:0; list-style:none}
.frame-production .productTabBlock .productList .product {margin:0; padding:0}
.frame-production .productTabBlock .productList .productTitle img {vertical-align:middle; height:170px; max-width:100%}

.jsEnabled .frame-production .productTabBlock {margin:275px 0 0; padding:50px 100px 0; border-top:1px #eee solid}
.jsEnabled .frame-production .productTabBlock .productList {font-size:0;}
.jsEnabled .frame-production .productTabBlock .product .content {display:none; vertical-align:top; font-size:1.4rem}
.jsEnabled .frame-production .productTabBlock .product-active .content {display:block}
.jsEnabled .frame-production .productTabBlock .productTitle {position:absolute; top:-225px; width:25%; margin:0; font-size:1.7rem; color:#2395de; text-transform:uppercase; cursor:pointer; padding-top:170px; height:54px; overflow:hidden}
.jsEnabled .frame-production .productTabBlock .productTitle img {position:absolute; left:0; bottom:54px; max-width:100%; height:auto;}
.jsEnabled .frame-production .productTabBlock .productTitle strong {font-weight:normal; display:block; max-width:210px; margin:0 15px; height:48px; border-bottom:6px #fff solid; transition:all 0.5s ease}
.jsEnabled .frame-production .productTabBlock .product-active .productTitle strong {font-weight:normal; display:block; max-width:210px; margin:0 15px; border-bottom:6px #2395de solid}
.jsEnabled .frame-production .productTabBlock .product:nth-of-type(4n+1) .productTitle {left:0}
.jsEnabled .frame-production .productTabBlock .product:nth-of-type(4n+2) .productTitle {left:25%}
.jsEnabled .frame-production .productTabBlock .product:nth-of-type(4n+3) .productTitle {left:50%}
.jsEnabled .frame-production .productTabBlock .product:nth-of-type(4n+4) .productTitle {left:75%}
.jsEnabled .frame-production .productTabBlock .tabSwitch {position:absolute; left:0; width:100%; top:0}
.jsEnabled .frame-production .productTabBlock .tabSwitch .step {position:absolute; width:56px; top:262px; height:56px; background:#cacaca url(../vis/tabswitch_ico.png) left center no-repeat; border-radius:56px; transition:all 0.25s ease}
.jsEnabled .frame-production .productTabBlock .tabSwitch .step:hover {background-color:#1385ce}
.jsEnabled .frame-production .productTabBlock .tabSwitch .step-prev {left:0; background-position:left center}
.jsEnabled .frame-production .productTabBlock .tabSwitch .step-next {right:0; background-position:right center}

.frame-features h2 {text-align:center}

.stepListBlock {padding:40px 0}
.stepListBlock .stepList {margin:0 0 0 -30px; padding:0; list-style:none; font-size:0}
.stepListBlock .stepList .step {display:inline-block; vertical-align:top; font-size:1.8rem; width:25%; padding-left:50px; box-sizing:border-box; text-align:center; position:relative}
.stepListBlock .stepList .step:after {content:''; position:absolute; width:151px; height:36px; background:url(../vis/step_arr_top.png) center center no-repeat; left:100%; margin-left:-45px; top:-30px}
.stepListBlock .stepList .step:nth-of-type(2n):after {background-image:url(../vis/step_arr_bottom.png); top:auto; bottom:-30px;}
.stepListBlock .stepList .step:last-child:after {content:none}
.stepListBlock .stepList .step:before {content:''; display:block; height:150px; background:center center no-repeat; background-size:contain; margin:0 0 20px}
.stepListBlock .stepList .step-contact:before {background-image:url(../img/img_step_contact.png)}
.stepListBlock .stepList .step-courier:before {background-image:url(../img/img_step_courier.png)}
.stepListBlock .stepList .step-check:before {background-image:url(../img/img_step_check.png)}
.stepListBlock .stepList .step-pay:before {background-image:url(../img/img_step_pay.png)}
.stepListBlock .stepList .step .title {margin:0 0 10px; display:block; font-family:'Roboto Slab'; font-weight:700}
.stepListBlock .stepList .step .desc {font-size:1.4rem}

.frame-order .frameWrapper {}
.frame-order .frameWrapper:after {content:''; display:table; clear:both}
.frame-order .frameWrapper .feedbackIntro{content:''; width:50%; float:left; margin:0 30px 0 0}
.frame-order .frameWrapper .feedbackIntro:after {content:''; display:block; padding:0 0 80%; margin:0 -20px -40px -15%; background:url(../img/img_contact1.png) right center no-repeat; background-size:contain}
.frame-order .frameWrapper .feedbackForm {overflow:hidden}

.callbackForm {background:#fff; padding:30px; border-radius:5px; border:1px #d2d2d2 solid}

.feedbackForm {background:#fff; padding:30px; border-radius:5px; border:1px #d2d2d2 solid}
.feedbackForm .fieldList {margin:0}
.feedbackForm .field {padding:0; box-sizing:border-box; margin:0 0 20px 0 }
.feedbackForm .field:nth-of-type(2n-1) {padding-left:0}
.feedbackForm .field-text {width:100%; float:none; clear:both}
.feedbackForm .submit {margin:0}
.feedbackForm textarea {height:150px; min-height:100px; max-height:250px; width:100%}
.feedbackForm .comment {font-size:1.1rem; color:#777; font-style:italic; margin:20px 0 0}

.frame-gallery {background:#e2f5ff}
.frame-gallery:before,
.frame-gallery:after {content:''; position:absolute; left:50%; margin:0 0 0 -520px; width:1040px; top:0; height:11px; background:url(../vis/frame_shadow2.png) center -11px no-repeat; z-index:3}
.frame-gallery:after {top:auto; bottom:0; background-position:center 0}

.popupBlock {display:none}
.mfp-content .popupBlock {display:block; max-width:500px; margin:0 auto; position:relative}

.galleryBlock {margin:25px 0 0}
.galleryBlock .galleryList {margin:0 0 0 -14px; padding:0; list-style:none; }
.galleryBlock .galleryList .item {margin:0 0 14px 14px; padding:0; display:inline-block; width:226px; height:220px; font-size:1.4rem; overflow:hidden; position:relative; background:#000; box-shadow:none; transition:all 0.5s ease; text-align:left; vertical-align:top; border:1px #e6eaec solid}
.galleryBlock .galleryList .item:hover {box-shadow:0 0 2px rgba(0,0,0,0.25)}
.galleryBlock .galleryList .item a {display:block}
.galleryBlock .galleryList .item a:after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../vis/zoom_ico.png) center center no-repeat; opacity:0; visibility:hidden; transition:all 0.5s ease; transform:rotate(15deg) scale(1.4)}
.galleryBlock .galleryList .item .image {display:block; width:226px; height:220px; opacity:1; transition:all 0.5s ease}
.galleryBlock .galleryList .item .desc {position:absolute; left:0; bottom:-50px; padding:18px 20px; width:204px; background:rgba(34,131,165,0.8); color:#fff; opacity:0; visibility:hidden; transition:all 0.5s ease}
.galleryBlock .galleryList .item .title {font-weight:normal}
.galleryBlock .galleryList .item .location {display:block}
.galleryBlock .galleryList .item a:hover .image {opacity:0.7}
.galleryBlock .galleryList .item a:hover .desc {bottom:0; opacity:1; visibility:visible; }
.galleryBlock .galleryList .item a:hover:after {opacity:1; visibility:visible; transform:rotate(0) scale(1); }
.galleryBlock .action-load {display:block; border:1px #92caec solid; font-size:1.8rem; height:55px; line-height:55px; text-align:center; color:#1385ce; border-radius:3px; margin:20px 0 0; text-decoration:none}

.footerGuaranteer {height:150px; max-width:970px}

.mapBlock iframe {display:block}

footer {background:#fff; margin:-150px 0 0; color:#9b9696; font-size:1.1rem; background:#383737; min-height:150px}
footer .action-top {position:fixed; right:50%; margin-right:-630px; bottom:50px; font-size:1.4rem; text-align:center; text-decoration:none; text-shadow:1px 1px 1px #fff; z-index:997}
footer .action-top:before {content:''; display:block; width:50px; height:50px; background:url(../vis/action_totop_ico.png) center center no-repeat; border:6px #378fd2 solid; border-radius:50px; margin:0 auto 10px; box-shadow:inset 0 0 10px 1px rgba(255,255,255,0.5), 0 0 10px 1px rgba(255,255,255,0.5)}
footer .wrapper {max-width:970px; padding:60px 10px 0; margin:0 auto; overflow:hidden}
footer .copyright {overflow:hidden}
footer .counters {float:right; margin-left:10%; padding-top:1em}
footer .counters img {display:inline-block; margin-left:10px}



@media screen and (max-width:1280px) {
	footer .action-top {right:10px}
}

@media screen and (max-width:1024px) {
	header .logo {left:10px; margin:0}
	header .phoneBlock {right:10px; margin:0}
}

@media screen and (max-width:960px) {
	.jsEnabled .frame-production .productTabBlock {padding-left:56px; padding-right:56px}
	.jsEnabled .frame-production .productTabBlock .productTitle {font-size:1.4rem;}
	#phoneZoom {font-size:10rem}
}

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

@media screen and (max-width:800px) {
	.frame-promo .slideListBlock {float:none; width:auto; margin:0}
	.frame-promo .textBlock {max-width:none}
}

@media screen and (max-width:720px) {
	.stepListBlock .stepList {margin:0 80px -30px 0}
	.stepListBlock .stepList .step {clear:both; display:block; padding:40px 0 0 180px; margin:0 0 30px; width:auto; text-align:left}
	.stepListBlock .stepList .step:before {float:left; width:150px; margin:-40px 0 30px -180px}
	.stepListBlock .stepList .step:nth-of-type(2n):after,
	.stepListBlock .stepList .step:after {background:url(../vis/step_arr_right.png) right center no-repeat; width:36px; height:151px; margin:0; top:50%; bottom:auto; transform:rotate(20deg); right:-20px; left:auto}
	
	footer .wrapper {padding:30px 10px 0 10px}

}

@media screen and (max-width:640px) {
	header .phoneBlock .callbackBlock {margin-right:20px}
	
	.jsEnabled .frame-production .productTabBlock .productTitle {font-size:1.2rem; padding-top:120px; top:-175px}
	
	.jsEnabled .frame-production .productTabBlock {padding-left:0; padding-right:0}
	.jsEnabled .frame-production .productTabBlock .tabSwitch {display:none}
	
	.frame-production .productTabBlock .chars .illustration {float:none; margin-left:0; max-width:100%}
	
	.frame-order .frameWrapper .feedbackIntro {float:none; width:auto; margin:0 0 30px}
	.frame-order .frameWrapper .feedbackIntro:after {content:none}
	.frame-order .frameWrapper .feedbackIntro:before {content:''; display:block; padding:0 0 80%; margin:0 0 20px; background:url(../img/img_contact1.png) right center no-repeat; background-size:contain}
}

@media screen and (max-width:576px) {
	.stepListBlock .stepList {margin:0 0 -30px 0} 
	.stepListBlock .stepList .step:nth-of-type(2n):after,
	.stepListBlock .stepList .step:after {content:none}
}

@media screen and (max-width:520px) {

}

@media screen and (max-width:400px) {
	h1 {font-size:3.2rem}
	header .phoneBlock {text-align:center}
	header .phoneBlock .callbackBlock {display:block}
	header .phoneBlock .phoneList {font-size:2.4rem}
	
	.stepListBlock .stepList .step {clear:both; display:block; padding:0 0 0 120px; margin:0 0 30px; width:auto; text-align:left}
	.stepListBlock .stepList .step:before {float:left; width:90px; margin:-40px 0 30px -120px}
}