html,button,input,select,textarea {color: #222;}
html {font-size: 1em;line-height: 1.4;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
hr {display: block;	height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
audio,canvas,img,video {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
.browsehappy {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}
.ir {background-color: transparent;border: 0;overflow: hidden;/* IE 6/7 fallback */*text-indent: -9999px;}
.ir:before {content: "";display: block;width: 0;height: 150%;}
.hidden {display: none !important;visibility: hidden;}
.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto;}
.invisible {visibility: hidden;}
.clearfix:before,.clearfix:after {content: " "; /* 1 */	display: table; /* 2 */}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
textarea:focus, input:focus{outline: 0;}	

/*STYLES*/
/**/
.box_window {
  width: 700px;
  background: #fff;
  padding: 20px;
  position: fixed;
  top: 40px;
  left: 50%;
  margin-left: -350px;
  z-index: 9999;
  display: none;
  -webkit-border-radius: 4px 4px 4px;
  border-radius: 4px 4px 4px;
}
.bw_close {
  background: url("../img/close.png") no-repeat;
  width: 22px;
  height: 21px;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.bw_title {
  text-align: center;
  font-size: 47px;
  margin-bottom: 50px;
}
.bw_title span {
  font-size: 38px;
  color: #707070;
  display: block;
}
.bw_form_input {
  border: 1px #d9d9d9 solid;
  border-radius: 4px 4px 4px;
  margin-bottom: 10px;
  height: 50px;
  background: #ececec;
   font-size: 20px;
   width: 274px;
   padding-left: 10px;
}

.bw_form {
  width: 314px;
  margin: 0 auto;
}
.bw_form_bottom.buy_bottom {
  border-top: 0px;
  border-left: 0px;
  text-transform: uppercase;
  border-right: 0px;
  cursor: pointer;
  background: #4f8545;
  padding-left: 0;
  color: #fff;
  width: 284px;
  font-size: 20px;
  text-align: center;
  margin-top: 30px;
  height: 55px;
  border-bottom: 3px #3e5835 solid;
  line-height: 55px;
  -webkit-border-radius: 4px 4px 4px;
  border-radius: 4px 4px 4px;
}
.bw_form_bottom.buy_bottom:hover {
  background: #73a669;
}
.mask {
  position: fixed;
  background-image: url("../img/mask.png");
  width: 100%;
  display: none;
  height: 100%;
  z-index: 9900;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
@font-face {
    font-family: 'cuprum';
    src: url('../fonts/cuprum.eot');
    src: url('../fonts/cuprum.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cuprum.woff') format('woff'),
         url('../fonts/cuprum.ttf') format('truetype'),
         url('../fonts/cuprum.svg#cuprum') format('svg');
             
}	
	
	
#wrapper{
	background: url(../img/content-bg.png);	
	font-family: 'cuprum';		
}
.sl{transition: ease-out 0.2s;}
.cd{cursor: default;}

#wrapper, 
#header, 
#form, 
#content, 
#offers, 
#portfolio, 
#clients, 
#comments, 
#footer{
	width: 100%;
}
.header-wrap,
.form-wrap,
.offers-wrap,
.portfolio-wrap,
.clients-wrap,
.comments-wrap,
.footer-wrap{
	width: 960px;
	margin: 0 auto;
}

/*Шапка*/

#header,
#footer-top{
	background: url(../img/header-bg.png);
	height: 91px;	
}
	.header-wrap,
	#footer-top .footer-wrap{
		position: relative;
		height: 108px;
		background: url(../img/header-bg-shadow.png) bottom center no-repeat;
	}
		.header-logo{
			background:url() no-repeat center 13px;
			width: 200px;
			height: auto;
			padding-top: 7px;
		}
		.header-offer{
			color:#fff;
			font-size:16px;
			width:200px;
		}
				
		.header-phone{
			right: 0;
			width: 250px;
			text-align: right;
			float: right;
			position: absolute;
			top: 0;
			color:#fff;
		}
			.header-number {
				font-size: 34px;
			}
				.header-number span {
					font-size: 25px;
				}
			.header-phone .callback a{
				color:#fff;
				text-decoration:none;
				border-bottom: 1px dotted #999;
				display: inline;
				padding-bottom: 1px;
				font-size: 21px;
				
			}
			.header-phone .callback a:hover,
			.header-phone .callback a:active{
				border-bottom: 0px dotted transparent;
			}
			.header-phone .callback a:active{color:#d8d8d8;}

/*Форма*/

#form{
	height: 530px;	
	background-repeat: no-repeat;
	background-position: center;

}	.form-wrap{
		height: 100%;
		position: relative;
	}
	.form-wrap h2{
		margin-top: 0px;
		padding-top: 10px;
		font-size: 43px;
		text-align: center;
		text-shadow: 0 1px 3px #ecf1e0;
	}
	.form-wrap .iphone{
		float: right;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
	}
	.form-wrap form {
		width: 400px;
		z-index: 3;

	}
		.form-wrap .form-title{
			background: rgba(221,221,221,0.7);
			min-height: 105px;
			font-size: 31px;
			display: block;
			line-height: 1;
			text-align: center;
			text-shadow: 0 2px 1px #ecf1e0;
			margin-bottom: 2px;
			padding-top: 10px;			
		}
		.form-wrap section{
			background: #f6f6f6;
			display: block;
			width: 100%;
			padding-top: 10px;
			padding-bottom: 20px;
			z-index: 2;
			position: relative;	
			-webkit-box-shadow: 0 1px 3px 0 #c1c1c1;
				box-shadow:0 1px 3px 0 #c1c1c1;		
		}
			.form-wrap section div{
				position: relative;
			}
				.form-wrap section div img{
					position: absolute;
					left: 20px;
					top:3px;
					height:44px;
				}
			.form-wrap section input{
				display: block;
				width: 330px;
				margin: 0 auto;
				height: 30px;
				padding-left: 44px;
				margin-bottom: 10px;
				border: 1px solid #c3bfbf;
				-webkit-border-radius: 5px;
				border-radius: 5px;
				z-index:2;				
				font-family: 'cuprum'!important;
			}
			
			.form-wrap .form-name{background: #fff url(../img/form-name.png) no-repeat 10px center;;}
			.form-wrap .form-email{background: #fff url(../img/form-email.png) no-repeat 7px center;}
			.form-wrap .form-phone{background: #fff url(../img/form-phone.png) no-repeat 10px center;}
			.form-wrap .form-submit{				
				height: 50px;
				width: 378px;
				background: rgb(254,0,0); /* Old browsers */
				background: -moz-linear-gradient(top, rgba(254,0,0,1) 0%, rgba(224,0,0,1) 62%, rgba(233,0,0,1) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,0,0,1)), color-stop(62%,rgba(224,0,0,1)), color-stop(100%,rgba(233,0,0,1))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, rgba(254,0,0,1) 0%,rgba(224,0,0,1) 62%,rgba(233,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, rgba(254,0,0,1) 0%,rgba(224,0,0,1) 62%,rgba(233,0,0,1) 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, rgba(254,0,0,1) 0%,rgba(224,0,0,1) 62%,rgba(233,0,0,1) 100%); /* IE10+ */
				background: linear-gradient(to bottom, rgba(254,0,0,1) 0%,rgba(224,0,0,1) 62%,rgba(233,0,0,1) 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0000', endColorstr='#e90000',GradientType=0 );
				border: 3px solid #dddddd; /* IE6-9 */
				-webkit-border-radius: 10px;
				border-radius: 10px;
				font-size: 25px;
				color:#d8d8d8;				
			}
			.form-wrap .form-submit:hover{
				color:#fff;
			}
			.form-wrap .form-submit:active{
				border: none;
				box-shadow: none;
			}
			.form-wrap input:focus,
			.form-wrap input.error:focus,
			.form-wrap input.valid:focus {
			  	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
			  	border: 1px solid rgba(81, 203, 238, 1);
			}
			.form-wrap label.error{
				color:red;
				margin-left: 50px;
				line-height: 1;
				position: relative;
				top: -7px;
			}
			.form-wrap input.error{
				box-shadow: 0 0 5px rgba(255, 0, 0, 1);
			  	border: 1px solid rgba(255, 0, 0, 1);
			}
			.form-wrap input.valid{
				box-shadow: 0 0 5px rgba(34, 215, 58, 1);
				border: 1px solid rgba(34, 215, 58, 1);
			}

/*Предложения*/

#offers{
	padding-bottom: 20px;
}
	.offers-wrap h2,
	.portfolio-wrap h2,
	.clients-wrap h2,
	.comments-wrap h2 {
		font-size: 48px;
		text-align: center;
		text-shadow: 0 2px 1px #fff;
	}
	.offers-wrap h2{
		margin-top: 10px;
	}
	.offers-wrap hr{
		background: url('../img/offers-hr.png') no-repeat;
		height: 10px;
		border-top: none;
	}
	.offers-item {
		padding: 20px 0;
	}
		.offer{
			width: 250px;
			min-height: 240px;
			float: left;
			width: 33.333333%;

		}
		.offer.right{
			float: right;
		}
			.offer h4{
				font-size: 19px;
				text-align: center;
				width:250px;
				margin: 0;
				min-height: 80px;
				height:auto !important;
				height: 80px;   
			}
		
			.offer.mid h4,
			.offer.mid .wrap-offer{
				margin: 0 auto;
			}
			.offer.right .wrap-offer,
			.offer.right h4 {
				float: right;
			}
			.wrap-offer{
				width: 250px;
				height: 160px;
				background: #f6f6f6;
				-webkit-box-shadow: 0 10px 15px 0 #A1A1A1;
						box-shadow: 0 10px 15px 0 #A1A1A1;
						transition: box-shadow 0.2s;
				position: relative;
			}
			.wrap-offer:hover{
				-webkit-box-shadow: 0 10px 25px 0 #A1A1A1;
						box-shadow: 0 10px 25px 0 #A1A1A1;
				
			}
				.wrap-offer img{
					display: block;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					width: auto;
					height: auto;
					margin: auto;
				}
	
		.offers-wrap .offers-item .left{background: url('../img/offers-left.png') bottom right no-repeat;}
		.offers-wrap .offers-item .right{background: url('../img/offers-right.png') bottom left no-repeat;}
		.offers-wrap hr + .offers-item .left{background: url('../img/offers-left2.png') top right no-repeat;}
		.offers-wrap hr + .offers-item .right{background: url('../img/offers-right2.png') top left no-repeat;}

/*Наши работы*/

#portfolio{
	background: url('../img/works-bg.png') repeat-x;
	height: 778px;
	padding-top: 20px;
}
	.portfolio-wrap h2{
		margin-bottom: 0;
		margin-top: 10px;
	}
		.portfolio-item{
			width: 50%;
			float: left;		
		}
			.portfolio-item{
				max-height: 414px;				
				padding-bottom: 35px;
			}
				.portfolio-item-wrap{
					position: relative;
					margin: 0 auto;
					display: block;
					width: 350px;
				}
				.portfolio-wrap-img{				
					position: absolute;
					height: 255px;
					width: 350px;
					background: url(../img/work-wrap.png); 
					z-index: 1;
				}
				.portfolio-item img{
					display: block;
					margin: 0 auto;
					width: 320px;
					max-width: 320px;
					min-width: 320px;
					height: 210px;
					max-height: 210px;
					min-height: 210px;	
					position: absolute;	
					top: 24px;
					left: 15px;			
				}
				.portfolio-item h5{
					font-size: 25px;
					margin-left: 15px;
					margin-bottom: 0;
					margin-top: 250px;
				}

/*Клиенты*/

.clients-wrap h2{
	margin-top: 0;
	margin-bottom: 0;
}
	.clients-wrap .slider-wrap{
		/*background: url(../img/slider-bg.png);*/
		height: 316px;
		width: 100%;
		margin: 0 auto;			
	}
		.clients-wrap .slider-wrap img{
			margin: 20px 0;
		}

/*Отзывы*/
.comment{
	padding-bottom: 30px;
	margin-top: 30px;
	background: url(../img/offers-hr.png) no-repeat center bottom;
}
.comment .userpic{
	float: left;
	padding-right: 15px;
}
	.comment .userpic{
		height: 180px;
		min-height: 180px;
		max-height: 180px;
		width: 180px;
		min-width: 180px;
		max-width: 180px;
		overflow: hidden;
	}
	.comment .userpic, 
	.comment img{	
		
		-webkit-border-radius: 90px;
			    border-radius: 90px;
			    clear: both;
		behavior: url(../pie/PIE.htc);
		position: relative;    
	}
	.comment img{
		width: 180px;
	}
	.link-name{
		font-family: 'Georgia';
		font-weight: bold;
		font-size: 18px;
	}
		.link-name a{
			color:#005abb;
			text-decoration: none;
			background: url(../img/vk.png) no-repeat left center;
			padding-left:30px;
			margin-left: 10px;
			padding-bottom: 4px;
		}
		.link-name a:hover{
			color:#000;
		}
	.comment-text{
		font-family: 'Georgia';
		font-style: italic;
		font-size: 16px;
	}

#footer{
	height: 200px;
}
		.footer-wrap{
			position: relative;
		}
			#footer-top {				
				width: 100%;
				height: 91px;
			}
				.footer-copy {
					float: left;
					width: 400px;
					margin-top: 30px;
					font-size: 25px;
					font-family: Arial;
				}
				.footer-developed {
					float: right;
				}
.lt-ie9 #form section input{
	line-height: 27px;
}
.lt-ie8 .wrap-offer img{	
	position: static!important;
}
.lt-ie8 .offers-wrap hr{
	height: 2px;
}