/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background:#fff;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

@font-face {
    font-family: Ubuntu; /* Èìÿ øðèôòà */
    src: url(Ubuntu-R.ttf); /* Ïóòü ê ôàéëó ñî øðèôòîì */
   }

body {
	font-family:'Times New Roman', Times, serif;
	width: 100%;
	font-size:18px;
}
.wrapper {
	width: 960px;
	margin: 0 auto;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
	position:relative;
	display:block;
	height: 600px;
	background: url(images/header1.jpg) no-repeat center center;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
     background-size: cover;         /* Generic*/
	}
	
#top{
background:#f1f1f1;
height:110px;
position:relative;
}
	
#logo{
float:left;
position:absolute;
margin-top:10px;
margin-left:0px;
height:95px;
width:400px;
}

#logo img{
height:100%;
width:100%;
margin-top:-10px;
}

.contacts{
width:480px;
height:100px;
position:relative;
margin-top:20x;
float:right;
background:rgba(100,100,100,0);
color:#2b2a29;
font-size:32px;
line-height:44px;
font-weight:bold;
font-family:'Times New Roman', Times, serif;
}
.contacts p{
margin-top:10px;
color:#000;
margin-left:-15px;
}

#mainform{
margin-top:150px;
position:absolute;
}

.success{
position:absolute;
height:200px;
width:100px;
color:red;
}

.slogan{
font-family:verdana;
position:absolute;
color:#fecc00;
font-size:30px;
font-weight:bold;
font-family:'Times New Roman', Times, serif;
line-height:35px;
text-align:center;
padding:0 10px;
margin-left:auto;
margin-right:auto;
height:110px;
display:block;
width:520px;
background:rgba(0,0,0,0.6);
z-index:1;
top: 25%;
left: 25%;
box-sizing:border-box;
overflow:hidden;
}

.requesttop{
height:100px;
margin-top: 22%;
margin-left:235px;
display: inline-block;

}
.requesttop input[type=text]{
width:225px;
height:35px;
border:1px solid #77c5d1;
color:#777;
font-size:17px;
font-weight:bold;
padding:0 20px;
box-sizing:border-box;
//letter-spacing:1px;
}


input{
margin-left:20px;
display: inline-block;
}
input:focus{
border:1px solid green;
ouline:none;
}


.btnsend{
height:50px;
width:370px;
background:linear-gradient(to top ,#fecc00,#fecc00);
margin-top:15px;
margin-left:10%;
color:#000;
font-size:18px;

border:none;
ouline:none;
border-radius:5px;
}
.btnsendclick{
background:red;
}

.btnsend:hover{
background:linear-gradient(to top ,#fecc00 ,#f2f2f2);
}



/* Middle
-----------------------------------------------------------------------------*/
.content {
width: 960px;
margin: 0 auto;
}



#offers{
background:#fecc00;
height:780px;
position:relative;
}

#ouroffers{
position:absolute;
width:500px;
height:100px;
z-index:1;
top: 5%;
left: 25%;
font-size:40px;
color:#000;
text-align:center;
font-weight:bold;
font-family:Ubuntu,'Times New Roman', Times, serif;
}

#photo_offers{
height:100px; 
width:250px;
left:0px;
top:150px;
position:relative;
display:inline-block;
}
#photo_offers img{
height:100%;
width:100%;
margin-left:20px
display:inline-block;
}

#projects{
background:#f1f1f1;
height:500px;
position:relative;
}

#projectsmake{
position:relative;
height:100px;
font-family:Ubuntu,'Times New Roman', Times, serif;
z-index:1;
top: 5%;
margin-left:auto;
margin-right:auto;
font-size:40px;
font-weight:bold;
color:#000;
text-align:center;
}


#benefits{
background:#fecc00;
height:900px;
position:relative;
}

#benefitlist{
height:650px;
width:800px;
background:rgba(0,0,0,0.1);
position:relative;
margin-left:auto;
margin-right:auto;
top:200px;
padding-top:15px;
z-index:2;
display:table;
}

#row{
display:table-row;
}
#rowtable{
color:#f1f1f1;
font-size:21px;
font-weight:solid;
font-family:Ubuntu,'Times New Roman', Times, serif;
margin-top:70px;
display:table-cell;
vertical-align: middle;
}


#plus{
background:url(images/list.png) no-repeat center;
height:90px;
width:90px;
display:table-cell;
float:left;
vertical-align: middle;
}
.plusbtn{
position:absolute;
background:url(images/plusbtn.png) no-repeat top center;
height:200px;
width:200px;
top:135px;
left:39%;

}

#ourbenefits{
position:absolute;
height:100px;
//background:#ccc;
z-index:1;
top: 5%;
left: 18%;
font-size:40px;
font-weight:bold;
color:#000;
text-align:center;
font-family:Ubuntu,'Times New Roman', Times, serif;
}

ul#list{
top:100px;
margin-left:100px;
}

#benefitlist li{
list-style-image:url(images/list.png);
list-style-type:square;
margin-top:21px;
//line-height:60px;
}

#benefitlist span{
color:#f1f1f1;
font-size:21px;
font-weight:solid;
margin-top:20px;
margin-top:30px;
position:absolute;
font-family:Ubuntu,'Times New Roman', Times, serif;
}



#clients{
background:#c2c2c2;
height:950px;
position:relative;
}

#ourclients{
position:relative;
width:500px;
height:100px;
top: 5%;
left: 25%;
font-size:40px;
font-weight:bold;
color:#000;
text-align:center;
font-family:Ubuntu,'Times New Roman', Times, serif;

}

#offersblock{
position:relative;
margin-left:6px;
width:300px;
height:200px;
display:inline-block;
margin-top:80px;
padding:0px;
transition:all 0.5s;
}

#offer{
margin-top:40px;
position:absolute;
left:12px;
}

#offersblock img{
height:100%;
width:100%;
display: block;
border: none;
cursor:pointer;
}

#offersblock span{
  display: block;
  padding: 15px;
  width: 270px;
  position: relative;
  bottom: 0px;
  background: #f1f1f1;
  //opacity: 0.50;
  //filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  //-khtml-opacity: 0.50;
  //-moz-opacity: 0.50;
  text-align: center;
  font-weight:bold !important;
  color: #000;
  font-family:Ubuntu,'Times New Roman', Times, serif; 
}

#projectblock1{
position:relative;
margin-left:4px;
width:190px;
height:120px;
display:inline-block;
padding:30px;
transition:all 0.5s;
}
#projectblock2{
position:relative;
margin-left:4px;
width:160px;
height:120px;
display:inline-block;
padding:30px;
transition:all 0.5s;
}
#projectblock3{
position:relative;
margin-left:4px;
width:180px;
height:120px;
display:inline-block;
padding:30px;
transition:all 0.5s;
}
#projectblock4{
position:relative;
margin-left:4px;
width:130px;
height:130px;
display:inline-block;
padding:30px;
transition:all 0.5s;
}

#projectblock1 span{
  display: block;
  padding: 15px;
  width: 160px;
  position: relative;
  bottom: 0px;
  background: #c2c2c2;
  //opacity: 0.50;
  //filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  //-khtml-opacity: 0.50;
  //-moz-opacity: 0.50;
  text-align: center;
  color: #000;
  font-weight:bold !important;
   font-family:Ubuntu,'Times New Roman', Times, serif; 
}
#projectblock2 span{
  display: block;
  padding: 15px;
  width: 130px;
  position: relative;
  bottom: 0px;
  background: #c2c2c2;
  //opacity: 0.50;
  //filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  //-khtml-opacity: 0.50;
  //-moz-opacity: 0.50;
  text-align: center;
  color: #000;
  font-weight:bold !important;
   font-family:Ubuntu,'Times New Roman', Times, serif; 
}
#projectblock3 span{
  display: block;
  padding: 15px;
  width: 150px;
  position: relative;
  bottom: 0px;
  background: #c2c2c2;
  //opacity: 0.50;
  //filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  //-khtml-opacity: 0.50;
  //-moz-opacity: 0.50;
  text-align: center;
  color: #000;
  font-weight:bold !important;
   font-family:Ubuntu,'Times New Roman', Times, serif; 
}
#projectblock4 span{
  display: block;
  padding: 15px;
  width: 100px;
  position: relative;
  bottom: 0px;
  background: #c2c2c2;
  //opacity: 0.50;
  //filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  //-khtml-opacity: 0.50;
  //-moz-opacity: 0.50;
  text-align: center;
  color: #000;
  font-weight:bold !important;
   font-family:Ubuntu,'Times New Roman', Times, serif; 
}






#offersblock:hover{
opacity:0.7;
}


#projectblock1:hover{
opacity:0.7;
}

#projectblock2:hover{
opacity:0.7;
}
#projectblock3:hover{
opacity:0.7;
}
#projectblock4:hover{
opacity:0.7;
}


#block{
margin-left:6px;
width:250px;
height:140px;
display:inline-block;
padding:30px;background-size: cover;
}



#clients img{
margin-left:0px;
margin-top:5px;

}


#projectblock1 img{
height:100%;
width:100%;
display: block;
border: none;
cursor:pointer;
}
#projectblock2 img{
height:100%;
width:100%;
display: block;
border: none;
cursor:pointer;
}
#projectblock3 img{
height:100%;
width:100%;
display: block;
border: none;
cursor:pointer;
}
#projectblock4 img{
height:100%;
width:100%;
display: block;
border: none;
cursor:pointer;
}


#block img{
height:100%;
width:100%;
}

#contactus{
position:absolute;
width:500px;
height:100px;
top: 5%;
left: 25%;
font-size:40px;
color:#000;
font-weight:bold;
text-align:center;
font-family:Ubuntu,'Times New Roman', Times, serif;
}

#bottomarea{
top:150px;
left:10px;
position:absolute;
}

#adress{
width:180px;
height:300px;
margin-left:10px;
float:left;
}

#logobtm{
margin-top:20px;
height:40px;
width:180px;
}

#logobtm img{
width:100%;
height:100%;
}

#map{
width:420px;
height:300px;
//background:#ccc;
margin-left:10px;
float:left;
}

#map img{
width:100%;
height:100%;
margin-top:10px;
margin-left:-9px;
}

#formbottom{
width:300px;
height:300px;
margin-left:10px;
float:left;
}

#adressbottom{
color:#f9f9f9;
font-size:25px;
text-align:center;
display:block;
font-weight:bold;
margin-left:-20px;
}

#adress span{
color:#f9f9f9;
font-size:17px;
margin-top:10px;
display:block;
top:30px;
font-weight:bold;
}


#forminput{
display:inline-block;
}

#forminput input[type=text]{
margin-top:20px;
height:34px;
padding:0 5px;
color:#777;
font-size:17px;
font-weight:bold;
border-radius:1px;
width:250px;
background:#cecece;
border:none;
box-sizing:border-box;
margin-left:0px;
}

#forminput textarea{
margin-top:10px;
color:#777;
font-size:17px;
font-weight:bold;
border:none;
resize:none;
width:290px;
background:#cecece;
margin-top:20px;
border-radius:1px;
padding: 0 5px;
box-sizing:border-box;
}

#forminput input:focus{
border:1px solid green;
ouline:none;
}

#formbottom .submitbtm{
position:relative;
color:#000;
background:#fecc00;
margin-left:20%;
margin-top:10px;
height:50px;
width:180px;
border:none;
font-size:17px;
font-weight:bold;
border-radius:5px;

}
#formbottom .submitbtm:hover{
background:linear-gradient(to top ,#fecc00 ,#f2f2f2);
}

#yandexMetrika{
display:block;
float:right;
margin-top:-50px;
margin-right:30px;
position:relative;


}

#logo_basement
{
width:300px;
height:100px;
float:left;
display:block;
margin-top:-20px;
}

#logo_basement img{
width:100%;
height:100%;
}

#social{
background:#fecc00;
height:100px;
position:relative;
}

#social img{
display:inline-block;
margin: 20px 12px 0;

}

#social_btn{
//margin-left:auto;
margin-right:auto;
position:relative;
display:block;
margin-left:30%;
}

/* Footer
-----------------------------------------------------------------------------*/
.footer {
	height: 600px;
	background: #999;
    position:relative;
	}