@font-face {font-family: 'pf-cond-l'; src: url('../fonts/PFDinTextCondPro-Light.ttf') format('truetype');}
@font-face {font-family: 'pf-cond-med'; src: url('../fonts/PFDinTextCondPro-Medium.ttf') format('truetype');}
@font-face {font-family: 'hn-neue'; src: url('../fonts/HelveticaNeueCyr-Roman.otf') format('opentype');}

body {background: #ebe9e7;}
p, ul, h2, h3, h4, h5 {padding: 0; margin: 0;}
ul {list-style: none;}
a:hover {color: inherit; text-decoration: none;}
a {outline: none !important;}



.container-fluid {max-width: 960px; padding: 0;}
.row {margin: 0;}

header {width: 100%;display: inline-block; min-height: 320px;background: url(../img/inner_menu_bg.jpg) top center no-repeat;}
header > div > div {float: left; width: 50%;}
header div > a {display: block;width: 160px; height: 160px; color: #fff; font: 700 16px/19px Arial; padding-top: 73px;}
header div > a:hover {color: #fff; text-decoration: none;}
header div > a span {padding: 2px;}
header .left a:first-child {background: #355495 url(../img/logo.png) center center no-repeat;}
header .left a + a {float: right; border: 24px solid #277fc3;}
header .left a + a span {background: #277fc3;}
header .right > a:first-child {border: 24px solid #277fc3;background: url(../img/m4_bg.jpg);}
header .right > a:first-child span {background: #277fc3;} 
header .right > a:nth-child(2) {border: 24px solid #802c0f; background: url(../img/m2_bg.jpg);}
header .right > a:nth-child(2) span {background: #802c0f;}
header .right > a {float: left;}
header ul {width: 165px; height: 160px; float: left; background: #0e619e url(../img/menu_inner_bg.gif) top right repeat-y; padding: 27px 0 0 18px;}
header li a {color: #fff; font: 700 12px Arial;}
header li a:hover {color: #fff;}
header li:first-child a:after {content: '';display: inline-block;width: 10px; height: 10px; background: url(../img/icon_home.png); margin-left: 5px;}
header .right > div {float: left; width: 160px; height: 160px; padding: 35px 0 0 10px; font: 14px pf-cond-l;color: #aea994; background: #fff;}
header .right > div p {font: 24px pf-cond-med;}
header .right > a:nth-child(5) {border: 24px solid #da9918; background: url(../img/m3_bg.jpg) 0 -15px; font-size: 13px;}
header .right > a:nth-child(5) span {background: #da9918; display: block;}
header .right > a:nth-child(6) {border: 24px solid #91961b; background: url(../img/m4_bg.jpg);}
header .right > a:nth-child(6) span {background: #91961b;}

.day21 {font: 300 43px/54px Roboto; color: #000; text-transform: uppercase; padding: 22px 15px;}

.top-form > p:first-child {height: 94px; background: url(../img/top-form-top.jpg) center top no-repeat; font: 300 24px/94px Roboto; color: #fff; text-transform: uppercase; padding-left: 25px;}
.top-form > div {min-height: 483px; background: url(../img/top-form-center.jpg) center top no-repeat;}
.top-form > div p {max-width: 347px;font: 500 36px/56px Roboto; background: url(../img/top-form-red.jpg); padding: 0 10px; text-align: center;color: #fff; border-top: 4px solid #fff; margin: 0 auto 0; position: relative; top: -4px;}
.top-form form {float: right; width: 290px; height: 512px;background: url(../img/header_iphone.png); margin: -120px 0 0; padding-top: 245px; max-width: 100%;}
.top-form .form-control {border-radius: 0; border: 1px solid #fff;background: #e5e2e0; height: 36px;font-family: Arial; width: 185px; margin: 0 auto 9px;}
.top-form .form-control[type='submit'] {background: transparent; color: #fff;}
.top-form > p:last-child {background-color: #121212;background-image: linear-gradient(to right, #900, #c30000 50%, #900); display: inline-block; width: 100%; color: #fff; text-transform: uppercase; vertical-align: top;}
.top-form > p:last-child > span {float: left;}
.top-form > p:last-child > span:first-child {width: 47.7%; font: 23px/38px hn-neue; padding: 12px 5px 12px 30px;}
.top-form > p:last-child > span span {display: block;font-size: 38px;}
.top-form > p:last-child > span:last-child {font: 75px hn-neue; padding-top: 10px; width: 52.3%;}

.disign-types {
    text-align: center;
    background: #fff;
    padding: 35px 0 105px;
    position: relative;
}

.disign-types a {
    display: inline-block;
    width: 106px;
    height: 106px;
    vertical-align:middle;
    font: 300 14px/19px Roboto;
    text-transform: uppercase;
    color: #fff;
    margin-top: 20px;
}

.disign-types a:hover {
    opacity: 0.8;
}

.disign-types-cursor-1{
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: -310px;
    background: url('/img/arrow_1.png') no-repeat center center;
    width: 48px;
    height: 65px;
}

.disign-types-cursor-2{
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: -200px;
    background: url('/img/arrow_2.png') no-repeat center center;
    width: 48px;
    height: 65px;
}

.disign-types-cursor-3{
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: -90px;
    background: url('/img/arrow_3.png') no-repeat center center;
    width: 48px;
    height: 65px;
}

.disign-types-cursor-4{
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: 20px;
    background: url('/img/arrow_4.png') no-repeat center center;
    width: 48px;
    height: 65px;
}

.disign-types-cursor-5{
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: 130px;
    background: url('/img/arrow_5.png') no-repeat center center;
    width: 48px;
    height: 65px;
}

.disign-types-cursor-6{
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: 240px;
    background: url('/img/arrow_6.png') no-repeat center center;
    width: 48px;
    height: 65px;
}

.disign-types a:nth-child(1) {background: #277fc3;}
.disign-types a:nth-child(2) {background: #802c0f;}
.disign-types a:nth-child(3) {background: #da9918;}
.disign-types a:nth-child(4) {background: #91961b;}
.disign-types a:nth-child(5) {background: #7d1b96;}
.disign-types a:nth-child(6) {background: #1b968c;}
.disign-types span {width: 106px; height: 106px; vertical-align: middle; display: table-cell;}
.disign-types a.passive{
    opacity: 0.3;
    margin-top: 20px;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-property: all;
}
.disign-types a.passive:hover{
    opacity: 1;
    margin-top: 0;
}

.blue-block {min-height: 151px;text-align: center;}
.blue-block > div {float: left;width: 50%; height: 151px;}
.blue-block > div:first-child {background: #009fe6 url(../img/bg-blue-block-left.jpg) right top no-repeat; position: relative;color: #fff; font: 300 32px/40px Roboto; text-transform: uppercase; padding-top: 63px;}
.blue-block > div:first-child:after {content: ''; width: 7px; height: 151px; top: 0; right: -3px;background: url(../img/bg-blue-block.jpg); position: absolute;}
/*.blue-block > div:first-child span {display: table-cell; height: 151px; line-height: 39px; vertical-align: middle;}*/
.blue-block img {position: relative; z-index: 2; max-width: 100%;}
.blue-block .one img {margin: -37px 0 0;}
.blue-block .two img {margin: -56px 0 0;}
.blue-block .three img {margin: -27px 0 0;}
.blue-block .thour img {margin: -36px 0 0;}
.blue-block .five img {margin: -32px 0 0;}
.blue-block .six img {margin: -19px 0 0;}
.blue-block .seven img {margin: -38px 0 0;}
.blue-block .eight img {margin: -32px 0 0;}

.numbers {background: #fff; padding: 40px 0 72px; display: inline-block; width: 100%; vertical-align: top;text-align: center;}
.numbers > div {float: left;width: 20%; font: 300 19px/20px 'Roboto'; color: #6a6c6b;}
.numbers .img-responsive {display: inline-block;}
.numbers p {height: 60px; line-height: 60px;}
.numbers span {display: block;padding: 10px 5px 0;}

.price {background: #fff; padding: 0 35px 42px;}
.price table {width: 100%; font: 300 14px/18px 'Roboto'; color: #7b7c7c; text-align: center; text-transform: uppercase;}
.price table td {width: 16%; border-top: 1px solid #ececec !important; padding: 12px 0;}
.price table td:first-child {width: 36%; text-align: left;}
.price table td:first-child p {text-transform: none;}
.price table tr:first-child td {border-top: none !important;}
.price table tr:first-child p {font-weight: 500;}
.price table tr:first-child img {display: block;margin: 12px auto 15px;}
.price table td.yes {background: url(../img/price-yes.png) center center no-repeat;}
.price table td.no {background: url(../img/price-no.png) center center no-repeat;}
.price table tr:last-child {text-transform: none;}
.price table tr:last-child span {display: block; font: 500 36px Roboto;}
.price table tr:last-child a {display: inline-block; width: 90%; color: #fff; background: #0084cc; font: 12px/36px Arial; margin-top: 24px; text-transform: uppercase;}
.price table.visible-xs-block td {width: 100px;}
.price table.visible-xs-block td:first-child {width: auto;}

.vidi_remonta {background: #fff; padding: 35px; width: 100%;}
.vidi_remonta table {width: 100%; font: 300 14px/18px 'Roboto'; color: #7b7c7c; text-transform: uppercase;}
.vidi_remonta table td {border-top: 1px solid #ececec !important; padding: 12px 0;}
.vidi_remonta table tr:first-child td {border-top: none !important;}

.structure {background: #fff; padding: 21px 0 67px;}
#structure-slider {background: url(../img/bg-structure.jpg) top center no-repeat;  background-size: contain;padding: 4.94% 22.6% 11.03% 23.96%;}
#structure-slider .carousel-control {top: 40%; margin-top: -23px; background: url(../img/structure-buttons.png); width: 46px; height: 46px; opacity: 1;}
#structure-slider .carousel-control.left {left: 25px;}
#structure-slider .carousel-control.right {right: 25px; background-position: 0 -54px;}
.structure > p {text-align: center;color: #7b7c7c; max-width: 690px; margin: 0 auto;}
.structure > p a {color: #7b7c7c; text-transform: uppercase; font: 13px/37px Arial; display: inline-block; padding: 0 8px; border: 1px solid #7b7c7c; text-align: center; position: relative; margin-bottom: 56px; font: 300 15px/20px Roboto;}
.structure > p a:after {content: ''; position: absolute; left: 0; bottom: -30px; width: 100%; border-top: 1px solid #7b7c7c;}

.pluses {background: #fff; color: #6a6c6b; font: 300 20px/20px 'Roboto'; text-align: center; padding: 27px 0 25px; display: inline-block;width: 100%; vertical-align: top;}
.pluses p {height: 85px; line-height: 85px; margin-bottom: 10px;}
.pluses img {display: inline-block;}
.pluses > div {margin-bottom: 15px;}

table.discount {width: 100%; text-align: center;color: #fff;}
table.discount td:first-child {width: 59.38%;}
table.discount td > div {background-size: cover;padding: 12px}
table.discount td > div:first-child {background: url(../img/bg-disc-red.png); font: 300 21px/26px Roboto; text-transform: uppercase;position: relative;}
table.discount td > div:first-child:after {content: '';display: block; width: 80%; border-top: 6px solid #fff; position: absolute;bottom: -3px; left: 50%; margin-left: -40%;}
table.discount td > div:first-child span {font: 300 41px Roboto;}
table.discount td > div:first-child p {font: 500 98px Roboto; margin: -15px 0 -10px;}
table.discount td > div:first-child + div {background: url(../img/bg-disc-blue.png); font: 300 18px/26px Roboto;}
table.discount td:last-child {background: #e3e4e4 url(../img/bg-disc-hand.png) right center no-repeat; background-size: contain; position: relative;}
table.discount td:last-child:before {content: ''; position: absolute;height: 100%; left: -7px; top: 0; background: url(../img/disc-liner.png); width: 7px;}

.brends {background: #fff; text-transform: uppercase; text-align: center; padding: 24px 0 44px;}
.brends > p {font: 500 23px Roboto;color: #d8003d;}
.brends > p span {display: block;font-weight: 300;color: #6c6c6c; letter-spacing: 8px;}
.brends > img {margin: 38px auto;}
.brends > a[data-toggle] {font: 500 15px Roboto; color: #6c6c6c; letter-spacing: 8px; display: inline-block; padding: 12px 0; border-top: 1px dotted #6c6c6c; border-bottom: 1px dotted #6c6c6c; position: relative;}
.brends > a[data-toggle]:before {content: ''; background: url(../img/brends-collapse.png); width: 33px; height: 33px; position: absolute; top: 6px; left: -48px; text-decoration: none !important;}

.form-blue {text-align: center;background: #fff; padding: 0 0 80px; color: #fff;}
.form-blue form {max-width: 823px; background-image: linear-gradient(to right, #0e619e, #277fc3 49%, #0e619e); margin: 0 auto 20px; padding: 0 15px;}
.form-blue form p {font: 300 18px Roboto; padding: 6px 0 12px;}
.form-blue .row {margin: 0 0 25px;}
.form-blue form div div {float: left;width: 33.33%;padding: 0 7px; position: relative;}
.form-blue form div div:after {content: '';position: absolute;top: 100%; left: 0; width: 100%; height: 25px; background: url(../img/form-blue-shadow.png) top center no-repeat; background-size: contain;}
.form-blue .row input {width: 100%; display: block; background: #fff;border: none; font: 300 15px Roboto; color: #555; text-align: center; padding: 9px; text-transform: uppercase;}
.form-blue .row input::-moz-placeholder {opacity: 1; color: #555;}
.form-blue .row input::-webkit-input-placeholder {opacity: 1; color: #555;}
.form-blue input[type='submit'] {color: #fff; background: #cb0034; font: 300 23px Roboto;border: 1px solid #fff; display: inline-block; height: 53px;padding: 0 12px; text-transform: uppercase;}
.form-blue > p {color: #555; font: 300 17px/18px Roboto;}

.arguments {background: #fff; text-align: center; padding: 30px 0 60px;counter-reset: args;}
.arguments > div {display: inline-block;width: 24%; padding: 0 5px 10px;color: #7b7c7c; font: 300 14px/17px Roboto; vertical-align: top;}
.arguments > div > p:first-child {height: 80px; line-height: 80px;}
.arguments img {display: inline-block;}
.arguments .liner {border-top: 1px solid #cbcbcb;position: relative;margin: 17px 0;}
.arguments .liner:before {counter-increment: args; content: counter(args); position: absolute; left: 50%; top: -12px; width: 24px; height: 24px; border-radius: 12px; border: 1px solid #cbcbcb; font: 15px/22px hn-neue; text-align: center; color: #cbcbcb; background: #fff; outline: 5px solid #fff; margin-left: -13px;}
.arguments .liner + p {font: 500 18px/19px Roboto; padding-bottom: 10px;}

.gallery {display: inline-block; width: 100%; vertical-align: top; text-align: center;}
.gallery > a {float: left;width: 25%; height: 240px; position: relative; overflow: hidden;}
.gallery > a img {position: absolute;top: 0; left: 50%; margin-left: -120px;}
.gallery > a.img-2 {width: 50%;}
.gallery > a.img-2 img {margin-left: -240px;}
.gallery > a.img-4 {width: 50%; height: 480px;}
.gallery > a.img-4 img {margin-left: -240px;}
.gallery > a > span {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); font: 300 14px Roboto; color: #fff; opacity: 0; text-transform: uppercase;}
.gallery > a > span:hover {opacity: 1; transition: all .5s;}
.gallery > a > span span {height: 240px; display: table-cell; vertical-align: middle; padding: 0 10px; width: 100%;}

.gallery > a.gallery_link {
    float: none;
    display: inline-block;
    margin: 30px 0;
    font-size: 22px;
    text-decoration: none;
    color: #fff;
    height: 75px;
    line-height: 75px;
    padding: 0 50px;
    background: linear-gradient(to right, #802c0f 0%, #bb380a 50%, #802c0f 100%);
    width: auto;
    box-shadow: 0px 30px 30px -30px rgba(0,0,0,0.7);
}

.gallery > a:last-child:hover {
    background-image: -o-linear-gradient(left, #8a0500 0px, #c30000 50%, #8a0500 100%);
    background-image: -webkit-linear-gradient(left, #8a0500 0px, #c30000 50%, #8a0500 100%);
    background-image: -moz-linear-gradient(left, #8a0500 0px, #c30000 50%, #8a0500 100%);
}

.mt-240 {margin-top: -240px;}
.ml240 {margin-left: 240px;}
.p20 {padding: 20px;}
#form-order {display: none;}
#form-order-design {display: none;}
.order {margin: 0 auto;}
.order input {height: 36px; margin: 0 auto 13px; border-radius: 0; text-transform: uppercase; width: 185px;}
.order input[type='submit'] {border: 1px solid #037cb5;background: #0095dc; color: #fff;}

.smeta {background: #fff; font: 400 16px/28px Roboto; color: #7b7c7c; padding: 20px 0; counter-reset: smeta; display: inline-block; width: 100%; vertical-align: top;}
.smeta form > div {float: left; width: 33.33%; padding: 0 10px 0 25px;}
.smeta li {padding-left: 17px;position: relative;}
.smeta li:before {content: counter(smeta); counter-increment: smeta; position: absolute;top: 0; left: -5px;}
.smeta li input[type='checkbox'] {vertical-align: -2px;}
.smeta li input[type='text'] {width: 61px; height: 30px; border: 1px solid #cacac9; background: #fff; padding-left: 5px;}
.smeta label {margin: 0;font-weight: inherit; display: block;}
.smeta label.inline {display: inline;padding-right: 7px; white-space: nowrap;}
.smeta .order {padding-top: 25px; clear: both; max-width: 550px; margin: 0 auto; text-align: center;}
.smeta .order span {display: block; font: 17px/18px Roboto; padding-bottom: 15px;}

.works {display: inline-block; width: 100%; vertical-align: top; background: #fff; padding-bottom: 10px;}
.works p {float: left;width: 33.33%; font: 17px Roboto; color: #717171; text-align: center; text-transform: uppercase; padding: 9px 0;}
.works a {float: left;width: 33.33%; position: relative;}
.works a:before {content: ''; width: 48px; height: 48px; background: url(../img/ico-works.png); position: absolute; left: -24px; top: 50%; margin-top: -24px; background-size: contain;}
.works a:first-of-type {clear: left;}
.works a:nth-of-type(3n+1):before {display: none;}

.youtube {background: #fff; padding: 50px 0;}
.youtube div {width: 642px; height: 440px; padding: 20px 28px 0 21px; margin: 0 auto; background: url(../img/youtube.png); background-size: contain;}
.youtube iframe {width: 601px; height: 335px;}


@media screen and (max-width: 992px) {
	header .left a:first-child {max-width: 300px; height: 320px; width: auto;}
	header {background-position: left top;}
	header .left {width: 100%; height: 320px;}
	header .right {float: none; width: auto; clear: both; text-align: center;}
	header .right > div, header .right > ul, header .right > a {display: inline-block;margin: 10px 15px; float: none; vertical-align: top; text-align: left;}
	.top-form form {float: none;margin: 15px auto 0;}
	.top-form > p:last-child > span:first-child {font: 20px/38px hn-neue;}
	.top-form > p:last-child > span span {font-size: 29px;}
	.top-form > p:last-child > span:last-child {font: 60px hn-neue; padding-top: 20px;}
	.numbers > div {width: 33%; display: inline-block; float: none; margin-bottom: 30px; vertical-align: top;}
	.numbers img {max-height: 60px;}
	.price {padding: 0 5px 42px;}
	table.discount td > div:first-child span {font-size: 32px;}
	table.discount td > div:first-child p {font-size: 70px;}
	.form-blue .row div:first-child {float: none;width: 100%; margin-bottom: 25px;}
	.form-blue .row div {width: 50%;}
	.arguments > div {width: 32%;}
}

@media screen and (max-width: 767px) {
	.day21 {font: 300 32px/43px Roboto;}
	.top-form > p:first-child {font: 300 20px/94px Roboto;}
	.top-form > p:last-child > span {display: block;width: auto !important; text-align: center; float: none;}
	.top-form > p:last-child > span:last-child {padding-top: 0;}
	.price table.visible-xs-block {display: table !important;}
	.brends > a[data-toggle] {letter-spacing: normal;}
	.arguments > div {width: 49%;}
	.youtube div {width: 450px; height: 308px; padding: 14px 20px 0 15px;}
	.youtube iframe {width: 421px; height: 235px;}
}

@media screen and (max-width: 600px) {
	.top-form > p:first-child {font: 300 16px/94px Roboto;}
	/*.blue-block > div {float: none;width: auto;}*/
	.blue-block > div:last-child {height: auto; padding: 15px 0;}
	.blue-block > div:last-child img {margin-top: -20px !important;}
	.blue-block > div:first-child:after {right: -1px;}
	table.discount td:last-child {display: none;}
	table.discount td:first-child {width: 100%;}
	.smeta {font: 400 13px/22px Roboto;}
}

@media screen and (max-width: 480px) {
	.gallery > a {width: 50%;}
	.gallery > a.img-2 {width: 100%;}
	.smeta form > div {float: none;width: 280px; margin: 0 auto;font: 400 16px/28px Roboto;}
	.youtube div {width: 280px; height: 192px; padding: 9px 12px 0 9px;}
	.youtube iframe {width: 259px; height: 146px;}
}	

@media screen and (max-width: 450px) {
	.day21 {font: 300 22px/32px Roboto;}
	.top-form > div p {font: 500 30px/56px Roboto;}
	.top-form > p:first-child {font: 300 16px/1.5 Roboto; padding-top: 20px;}
	.top-form > p:last-child > span:first-child {font: 16px/26px hn-neue;}
	.top-form > p:last-child > span span {font-size: 24px;}
	.top-form > p:last-child > span:last-child {font: 40px hn-neue;}
	.numbers > div {display: block; width: 90%; margin: 0 auto 30px;}
	.blue-block > div:first-child {font: 300 18px/24px Roboto;padding-top: 63px;}
	#structure-slider .carousel-control.left {left: 10px;}
	#structure-slider .carousel-control.right {right: 10px;}
	.pluses {font: 300 13px/14px 'Roboto';}
	table.discount td > div:first-child {font-size: 16px;}
	table.discount td > div:first-child span {font-size: 24px;}
	table.discount td > div:first-child p {font-size: 60px; margin: 0;}
	.brends > p {font-size: 20px;}
	.brends > p span {letter-spacing: normal;}
	.brends > a[data-toggle]:before {display: none;}
	.form-blue .row div {float: none;width: 100%; margin-bottom: 25px;}
	.form-blue .row {margin-bottom: 0;}
	.form-blue input[type='submit'] {font-size: 16px;}
	.arguments > div {width: 100%;}
	.works a:before {content: ''; width: 24px; height: 24px; background: url(../img/ico-works.png); position: absolute; left: -12px; top: 50%; margin-top: -12px; background-size: contain;}
}