html, body {margin: 0; padding: 0; width: 100%; height: 100%;}	
body {font: 18px 'PT Sans', Arial, "Helvetica CY", Sans-serif; min-width: 320px; background: #F4F9F9;}

img {border: none; vertical-align: bottom;}
a {color: #000;}
a:hover {border-color: transparent !important;}
form {margin: 0;}
input {border: 1px solid #6B6B6B; box-shadow: inset 0 0 3px -1px #6B6B6B; border-radius: 5px; font: 18px/18px 'PT Sans'; color: #4c4c4c; box-sizing: border-box; padding: 12px 10px 10px; margin: 5px 0; background: #fff;}
input.error {border-color: #c92356; background-color: #FCF3F6 !important; color: #c92356;}
input[name='name'], input[name='phone'], input[name='mail'] {padding-left: 42px; background: #fff url(img/i_user.png) no-repeat left center;}
input[name='phone'] {background-image: url(img/i_phone.png);}
input[name='mail'] {background-image: url(img/i_mail.png);}

h1,h2,h3,h4,h5,strong {font-weight: 700;}
.title {font: 700 42px/51px 'PT Sans'; margin: 70px 0 40px; text-align: center;}
.clear:after {clear: both; content: ""; display: inline-block; height: 0; position: relative; width: 100%; overflow: hidden;}
.jf {text-align: justify;}
.jf_block {text-align: justify;}
.jf_block:after {content: '_'; display: inline-block; width: 100%; font-size: 0;}
.left_block {float: left;}
.right_block {float: right;}
.ul_block {list-style: none; margin: 0; padding: 0;}
	.ul_block li {display: inline-block; vertical-align: top;}
.none {display: none;}
.img {position: relative;}
.img img {max-width: 100%; max-height: 100%; position: relative; z-index: 2;}
* {outline: none;}

.animate *, a {-webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s;}

#main {position: relative; overflow: hidden; min-width: 320px;}
.wrap {position: relative; max-width: 1000px; padding: 0 20px; margin: 0 auto; box-sizing: border-box;}
.wrap:not(.no_overflow) {overflow: hidden;}

.message span {display: block; padding: 10px 0 0; text-align: center; font-size: 15px;}
.message span.good {color: green;}
.message span.bad  {color: red;}
.message span:before {content: '!'; display: inline-block; width: 13px; height: 13px; border: 1px solid; border-radius: 50%; text-align: center; line-height: 13px; margin: -2px 5px 0 0; vertical-align: middle; font-size: 11px;}

.btn {display: inline-block; box-sizing: border-box; box-shadow: 0 4px 0 #025639; border: 1px solid #39BC4A; border-radius: 3px; font-size: 28px; line-height: 30px; text-align: center; padding: 12px 20px 12px; text-decoration: none; color: #fff; background: linear-gradient(to bottom, #32AB48 ,#0E7B3D 100%); margin-bottom: 4px;}
.btn:hover {background: linear-gradient(to bottom, #0E7B3D ,#32AB48 100%);}
.btn.center {margin: 0 auto;}

.box_form_phone {padding: 0 !important; background: none;}
	.box_form_phone .form_block {padding: 45px 50px; width: 280px;}
	.box_form h3 {font-size: 20px; line-height: 24px; font-weight: 400; margin: 0 0 20px;}
	.box_form_phone .btn {margin-bottom: 0 !important;}

.box_form.price_box {padding: 0 !important;}
.price_box .form {width: 280px; padding: 40px 30px 10px 30px; float: right; padding-top: 175px; background: url(img/kat.png) no-repeat center 15px; text-align: center;}
.price_box .form input {width: 100%;}
.price_box .form .btn {width: 100%; font-size: 22px; padding: 10px 5px 9px; margin: 10px 0 0;}

.item_box .form {padding-left: 530px; background-position: 540px 15px;}
.item_box .img {width: 490px; height: 100%; position: absolute; left: 0; top: 0; background: no-repeat center center / cover;}
.box_form.item_box {width: 830px;}

.thank_you_page {width: 100%; height: 100%;}
.thank_you_page td {vertical-align: middle; text-align: center;}
.thank_you_page h1 {margin: 0; font-size: 36px;}
.thank_you_page h2 {margin: 0; font-size: 22px; font-weight: 400;}


/**************** Шапка *******************/
#header {color: #fff; background: url(img/bg.jpg) no-repeat center center / cover; padding: 20px 0 90px; position: relative;}
#header:before {content: ''; z-index: 0; background: rgba(0,0,0,0.68); position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
	
	.header_top {overflow: hidden;}
		.header_top a {color: #fff; text-decoration: none;}
		.header_top .logo {float: left; max-width: 260px; padding-left: 100px; background: url(img/logo.png) no-repeat left center; font-size: 14px; line-height: 18px; margin-top: -2px;}
		.header_top .phone_header {float: right; max-width: 290px; text-align: right;}
			.header_top .phone_header strong {font-size: 28px; display: block; line-height: 28px;}
			.header_top .phone_header a[data-fancybox] {border-bottom: 1px dashed;}
	
	#header h1.title {max-width: 820px; margin: 50px auto 0; font-size: 38px; line-height: 43px;}
	#header h2.title {font-size: 28px; line-height: 30px; margin: 23px 0 50px; font-weight: 400;}

	.header_video {float: left; width: 61%; background: #000; height: 330px;}
	#header .form_block {float: right; width: 290px;}
	.form_block {background: rgba(255,255,255,0.85); border-radius: 5px; padding: 20 30 20 30; text-align: center; box-shadow: 0 0 8px rgba(0,0,0,0.75); color: #000;}
		.form_block h4 {font-size: 18px; line-height: 24px; font-weight: 400;}
			.form_block h4 span {background: #F1162B; color: #fff; padding: 0 3px;}
		.form_block input {width: 100%;}
		.form_block .btn {font-size: 24px; width: 100%; padding: 8px 10px 10px; margin: 10px 0 20px;}
		.form_block p {font-size: 14px; margin: 0 -2px -2px;}
		
        .cta {float: left;
        max-width: 290px;
        padding-left: 60px;
        background: url(img/excel.png) no-repeat left center;
        font-size: 18px;
        text-align: left;
        margin: 10 0 10 0;}
		

/*************** Получите расчет стоимости реконструкции фундамента прямо сейчас ******************/
#calculation {}
	
	.form_calc {font-size: 28px; text-align: center; padding-bottom: 40px; position: relative;}
		.form_calc p {margin: 0;}
		.radio_btns {max-width: 465px; text-align: left; margin: 11px auto 18px;}
		.radio_btns > input {display: none;}
			.form_calc label {display: inline-block; vertical-align: top; font-size: 22px; line-height: 25px; width: 160px; padding-right: 13px; margin: 11px 0; cursor: pointer;}
			.form_calc label:nth-child(3n) {margin-right: -70px;}
			.form_calc label:before {content: ''; display: inline-block; vertical-align: top; margin: 4px 4px 0 10px; width: 13px; height: 13px; box-shadow: 0 0 0 3px #fff, 0 0 0px 5px #757575; border-radius: 2px; background: #fff;}
			.form_calc label.active:before {background: linear-gradient(#01A136, #017830); box-shadow: 0 0 0 3px #fff, 0 0 0px 5px #018F32;}
			.form_calc label:hover:before {box-shadow: 0 0 0 3px #fff, 0 0 0px 5px #018F32;}
				.form_calc label input {display: none;}
		.form_calc .fix {display: inline-block; width: 105px; text-align: right;}
		.form_calc input {width: 70px; margin: 13px 0 19px; padding: 8px 10px; vertical-align: middle; text-align: center;}
		.form_calc .btn {margin: 10px 0 0; width: 260px;}
	
	
	.before_form {background: #F4F9F9; z-index: 1; position: absolute; left: 0; top: 0; right: 0; opacity: 0; transition: 0.4s;}
	.after_form {position: absolute; left: 0; top: 0; right: 0; opacity: 0; z-index: 1; padding-top: 185px; background: #F4F9F9 url(img/smety.png) no-repeat center top; transition: 0.4s;}
	
		.after_form h3 {color: #2CA346; font-size: 34px; margin: 0;}
		.after_form p {font-size: 22px; margin: 1px 0 11px;}
		.input_btn {max-width: 320px; margin: 0 auto;}
			.input_btn input {width: 100%; padding: 12px 20px 10px 43px; font-size: 22px; text-align: left; margin: 10px 0 5px;}
			.input_btn .btn {width: 100%;}
	
	.form_calc div.active {position: relative; opacity: 1; z-index: 2;}
	
	
/*************** Примеры наших работ ******************/
#examples .title {margin-bottom: 32px;}
	
	#examples ul {counter-reset: item_num;}
	#examples li {position: relative; display: block; margin: 30px auto 35px; max-width: 880px;}
	#examples li:before {counter-increment: item_num; content: counter(item_num); color: #DCE7E6; font-size: 140px; position: absolute; left: -90px; top: -5px; line-height: 140px; width: 100px; text-align: right; font-weight: 700;}
		#examples li .cont {box-shadow: 0 0 10px rgba(0,0,0,0.25); background: #fff; padding: 3px; border-radius: 5px; position: relative; font-size: 0; padding-bottom: 20px;}
			#examples li .cont > div {display: inline-block; vertical-align: top; box-sizing: border-box;}
			#examples li .img {width: 32%; font-weight: 700; text-align: center; font-size: 18px;}
				#examples li .img a {text-decoration: none; display: block; position: relative;}
				#examples li .img a:before {content: ''; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0; transition: 0.3s; background: url(img/lupa.png) no-repeat center center / contain; width: 100%; height: 100%;}
				#examples li .img a:hover:before {opacity: 1;}
					#examples li .img img {width: 100%; margin-bottom: 5px;}
			#examples li .text_block {width: 68%; padding-left: 2.3%; font-size: 18px;}
				#examples li .text_block p {margin: 10px 0; line-height: 23px;}
				#examples li .text_block .btn {font-size: 20px; padding: 2px 23px 2px;}
	
	.get_price {display: block; max-width: 560px; border-radius: 5px; margin: 53px auto 60px; padding: 18px 20px 20px; font-size: 39px;}
	
	.price_page .cont > span {background: linear-gradient(to bottom, #32AB48 ,#0E7B3D 100%); display: inline-block; width: 48%; color: #fff; font-size: 18px; line-height: 22px; border-radius: 4px; vertical-align: top; padding: 10px; text-align: center; box-sizing: border-box; font-weight: 700; margin: 10px 25% 0;}
	.price_page .img a {cursor: default;}
	.price_page .img a:before {display: none;}
	
/*************** Футер ******************/
#footer {padding-bottom: 30px;}

	.footer_cr {line-height: 23px; float: left;}
	.footer_phone {float: right; text-align: right;}
		.footer_phone a {text-decoration: none; display: block;}
		.footer_phone strong {font-size: 28px;}
		.footer_phone a[data-fancybox] {border-bottom: 1px dashed; margin-bottom: 4px; display: inline-block;}
	
/*************** Политика ******************/	
.policy_box {max-width: 800px; padding: 25px !important;}	


@media screen and (max-width: 900px) {
	
	.header_video {width: 53%;}
	
	.box_form.item_box {width: 760px;}
	.item_box .form {padding-left: 460px; background-position: 470px 15px;}
	.item_box .img {width: 420px;}

}


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

	.header_video {width: 100%; float: none;}
	#header .form_block {float: none; margin: 40px auto 0;}
	
	#examples li .cont {padding: 20px;}
	#examples li .img {width: 37%;}
	#examples li .text_block {width: 63%;}
	#examples li .text_block p:first-child {margin-top: 0;}
	
	.footer_cr {font-size: 14px; line-height: 18px;}
	.footer_phone {line-height: 23px;}
	.footer_phone a[data-fancybox] {margin: 0;}
	
	.box_form.item_box {width: 340px;}
	.item_box .form {padding-left: 40px; background: none; padding-top: 320px !important;}
	.item_box .img {width: 100%; height: 300px;}

}

@media screen and (max-width: 620px) {
	
	.title {font-size: 40px; line-height: 43px; margin: 50px 0 30px;}
	
	.header_top .logo {float: none; margin: 0 auto; width: auto; padding: 50px 0 0; text-align: center; background-position: center top;}
	.header_top .phone_header {float: none; width: auto; margin: 30px auto; text-align: center;}
	
	#header h1.title {margin-top: 20px; font-size: 33px; line-height: 100%;}
	#header h2.title {font-size: 23px; line-height: 100%;}
	
	.form_calc label {margin: 15px auto !important; display: block; width: 130px;}
	
	#examples li div .img {display: block; max-width: 350px; margin: 0 auto 20px; width: auto;}
	#examples li div .text_block {display: block; padding: 0; width: auto;}
	#examples li div .text_block a {display: block; max-width: 200px; margin: 20px auto 10px;}
	
	.footer_phone {float: none; width: 100%; text-align: center; margin-bottom: 30px;}
	.footer_cr {float: none; width: 100%; text-align: center;}
	
	.price_page .cont > span {display: block; width: 100%; margin: 15px 0 0;}
	
}

@media screen and (max-width: 460px) {
	
	.btn {width: 100% !important; max-width: 100% !important;}
	
	.title {font-size: 31px; line-height: 33px; margin: 30px 0 15px;}
	
	.header_video {height: 230px; min-height: 0;}
	#header .form_block {width: 100%; box-sizing: border-box;}
	#header .form_block .btn {font-size: 20px;}
	.form_block p {font-size: 12px;}
	
	#examples li .text_block {font-size: 15px;}
	
	.get_price {padding: 10px 20px 11px; font-size: 23px;}
	
	.form_calc .after_form .btn {font-size: 24px;}
	
	.box_form.item_box {width: 319px;}
	.price_box .form, .box_form_phone .form_block {padding: 28px;}
	
	.price_box .form {background: none;}
	
}