body {margin:0; padding:0;font-family: Roboto, sans-serif;background:rgba(222, 222, 222, 0.25);}

.clear {clear:both;}

h2{    background: url(../images/ugol.png) left 0px top 0px / auto auto no-repeat;     padding: 30px 0 0 40px;    font-weight: normal;    font-size: 33px;}

/***************/
.header {height:573px;background: url(../images/header_bg.png) center;}
.header .cont {height:100px;font-size: 20px;text-align:center;}
.header .cont .tel {    margin: 30px 0 0 40%; float:left;}
.header .cont .tel img {height: 30px;}
.tel_img {float:left;    margin: 0 20px 0 0;}
.tel_num {float:left;}

.header .cont .adr {float:left;margin: 30px 0 30px 60px;}
.header .cont .adr  img {height: 30px;}
.adr_img  {float:left;    margin: 0 20px 0 0;} 
.adr_text {float:left;}

.header .content {width: 1000px; margin: auto; margin: 150px auto 0 auto;}
.header .content .company {       
        font-size: 30px;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px 40px;
    float: left;
    margin: 0 0 0 60px;}
.header .content .company span{font-weight:bold;}

.header .content .info {float:right;text-align:right;}

.header .btn {height: 50px;margin-top: 40px;    text-transform: uppercase;}
.header .btn a {box-shadow: 0 0 0 transparent, 0px 2px 5px #eeac38;background: #fa0;padding: 15px 30px;font-size: 15px;color: #fff; text-decoration: none;}
.header .btn a:hover {box-shadow: none;text-decoration:underline;}



/***************/

.items {width: 1020px; margin:auto;text-align:center;}
.items .item {display:inline-block;background-color:#fff;    margin: 10px; padding:20px; width: 275px;}
.items .item .img {margin:30px 0;}
.items .item .img img{width: auto;height: 170px;overflow: hidden;}
.items .item .title{height: 70px;font-size: 27px;margin-bottom:20px;}
.items .item .descr {height: 60px;font-size: 15px;margin-bottom:20px;}
.items .item .price {height: 70px;font-size: 16px;}
.items .item .price span{font-size: 30px;}
.items .item .btn {height: 50px;}
.items .item .btn a {box-shadow: 0 0 0 transparent, 0px 2px 5px #eeac38;background: #fa0;padding: 15px 30px;font-size: 15px;color: #fff; text-decoration: none;}
.items .item .btn a:hover {box-shadow: none;text-decoration:underline;}
.items .item .ugol {height: 45px;
background: url("../images/ugol.png") left 0px top 0px / 26px no-repeat;
width: 45px;}

/***************/

.about {width: 955px; margin:40px auto;background-color:#fff;padding:40px;}
.about .text {float: left;width:55%;}
.about .img {float: right;}
.about .img img {width:100%;}
/***************/
.fos {background: #fa0; height:200px;padding:20px;}
.fos .content {width: 1000px; margin:auto;}
.fos h2 {color:#fff;background: url(../images/ugol_w.png) left 0px top 0px / auto auto no-repeat;}
.fos input {padding: 10px;box-sizing: border-box;background: #fff;width: 200px;height: 50px;    vertical-align: middle;}
.fos textarea {padding: 10px;box-sizing: border-box;background: #fff;width: 200px;height: 50px;    vertical-align: middle;}
.fos button {padding: 10px;box-sizing: border-box;background: #000;width: 200px;height: 50px;    vertical-align: middle;border: 0;    color: #fff;    font-size: 18px;}

/***************/
.rew {width: 930px; margin:40px auto;background-color:#fff;padding:40px;}

.rew .rew_item .name {font-weight:bold;}
.rew .rew_item {border: 1px solid #fa0;    padding: 10px;    margin-bottom: 20px;}
.rew .rew_item p {padding-left: 40px;}

/***************/
.contacts {height:434px;background: url(../images/footer_bg.png) center;}
.contacts .content {width: 1000px; margin:auto;}
.contacts .content .map {float:left;}
.contacts .content .map iframe {border:solid 2px #fa0;    margin-top: 40px; width:600px; height:350px;}
.contacts .content .cont {float:right;    margin: 100px 100px 0 0;font-size: 18px}
/***************/

.footer{}
.footer .content {width: 1000px; margin:auto;}
.footer .content .copyright {float:left;line-height: 100px;}
.footer .content .counters {float:right;margin-top: 35px;}


.end_line{min-height: 50px;background: #fa0;}

.callback_message_success 
{
    text-align: center;
    display: block;
    color: #118e11;
}

/*====  TABLET  =====*/
@media screen and (max-width: 900px){
.header .cont .tel {
    margin: 30px 0 0 21%;
}


/*====  MOBILE  =====*/
@media screen and (max-width: 700px){
    body {min-width:300px;}
    
    .header {    height: 340px;    background-size: auto 70%;    background-position-y: bottom;    background-repeat: no-repeat; margin-bottom: 60px;}
    .header .cont .tel {float:none;    margin: 30px auto 0 auto;height: 50px;width: 300px;font-size: 27px;}
    .header .cont .adr {float:none;margin: auto;height: 50px;width: 280px;}
    .header .cont .adr_text{    width: 230px;}
    
    .header .info {display:none;}
    .header .content {    width: initial;}
    .header .content .company {margin: 10px;    font-size: 20px;    float: none;}
    
    
    .items {    width: initial;}
    
    .about {    width: initial;    padding: 10px;    margin: 10px;}
    .about .text {float: none;    width: 100%;}
    
    .fos {height:initial;}
    .fos .content {    width: initial;}
    .fos form {    text-align: center;}
    
    .rew {    width: initial;    padding: 10px;    margin: 10px;}
    .rew .text {float: none;    width: 100%;}
    
    .contacts {height:initial; background:none;}
    .contacts .content {width: initial;}
    
    .contacts .content .map {float:none; text-align:center;}
    .contacts .content .cont{float:none;margin: 50px;}
    .contacts .content .map iframe { width:95%; height:350px;}
    
    .footer .content  {width: initial;}
    .footer .content .counters{float:none;}
    .footer .content .copyright{float:none;}
    
    
    
    
    
    
    
    
    
    
    
    
}