@charset "utf-8";
@import url("fonts.css");

* {margin: 0; padding: 0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
body {color: #08080a;font-size: 16px;font-family: "Georgia", serif;background-color: #a6c0ea;}
ul {list-style: none;}
img {max-width: 100%; height: auto; vertical-align: middle;}
a img {border: none;}
a {color: #08080a; display: inline-block; text-decoration: none; position: relative; font-weight: bold;}
a:hover {text-decoration: none;}
a::after {content: ''; display: block; position: absolute; border-bottom: 1px solid #494744; width: 0; left: 50%; bottom: 0;}
a:hover::after, .menu .active a::after {width: 100%; left: 0;}
article, aside, footer, header, hgroup, main, nav, section {display: block;}
.top {background: rgba(255, 255, 255, .58);}
a, a::after, a::before, ::-webkit-input-placeholder {-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}

.clearfix::before, .clearfix::after {content: ''; display: table;}
.clearfix::after {clear: both;}
.fl-left {float: left;}
.fl-right {float: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.uppercase {text-transform: uppercase;}
.btn {background-color: #fec41d; border: none; text-align: center; cursor: pointer; font-size: 17px; display: inline-block; vertical-align: middle; color: #fff; min-height: 30px; padding: 0 10px; font-family: "ClearSansRegular";}
.btn.first {line-height: 30px;}
.btn.second {min-height: 43px;}
.btn::after {display: none;}
.btn > span {display: inline-block; line-height: 17px;}
h3.title {color: #ffffff;font-size: 22px;line-height: 50px;letter-spacing: -1px;margin-bottom: 32px;}
.title {color: #2c3032; font-size: 33px; line-height: 50px; letter-spacing: -1px; margin-bottom: 32px;}
.md_title {color: #2c3032; font-size: 25px; line-height: 58px; letter-spacing: .4px; margin-bottom: 30px; font-family: "ClearSansRegular";}
.small_text {font-size: 12px; display: block; margin-top: 20px;}

/*Input*/
.input {background-color: transparent; background-color: rgba(255, 255, 255, 0); border: 2px solid transparent; width: 100%; height: 37px; line-height: 33px; padding: 0 18px; font-size: 21px; font-family: "ClearSansRegular"; margin-bottom: 20px;}
.input::-webkit-input-placeholder {text-indent: 0;}
.input:focus::-webkit-input-placeholder {text-indent: 120%;}
.info {font-size: 17px; font-family: "ClearSansRegular";}
.form.first .input, .form.first .input::-webkit-input-placeholder {color: #2c3032;}
.form.second .input, .form.second .input::-webkit-input-placeholder {color: #fff;}
.form.first .input {border-color: #4c4c4c;}
.form.second .input {border-color: #fff;}
.form.second .btn {background-color: #fff; color: #fec41d; font-weight: bold;}

/*Wrapper*/
#wrapper {background: url(../images/top_bg.jpg) no-repeat top center; min-height: 955px; overflow: hidden; padding: 0 20px;}

/*Mid*/
.mid {max-width: 824px;margin: 0 auto;padding: 0 10px;/* background: rgba(255, 255, 255, .58); *//* background-color: white; */}

/*Main Header*/
#main_header {margin-bottom: 35px; padding-top: 22px;}

/*Logo*/
.logo {background: url(../images/logo.png) no-repeat top left;height: 106px;width: 175px;}
.logo a {display: block;height: 115px;cursor: pointer;}
.logo a::after {display: none;}

/*Contacts*/
.contacts {margin-top: 5px;}
.rooms {margin-bottom: 6px;}
.rooms_in {font-family: "ClearSansThin";}
.rooms_in li {background: no-repeat top left; color: #313131; font-weight: bold; padding-left: 48px;}
.rooms_in .first {background-image: url(../images/icon17.png);}
.rooms_in .second {background-image: url(../images/icon18.png);}

/*Menu*/
.open_menu {width: 35px; cursor: pointer; display: none;}
.open_menu span {display: block; height: 6px; width: 100%; background-color: #2c3032; margin-top: 6px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .25); -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .25);}
.menu {display: inline-block; padding-left: 6px; vertical-align: middle;}
.menu li {float: left; margin-left: 16px; font-family: "ClearSansThin";}
.menu li a {display: block; color: #08080a;}

/*Top*/
.main_top_content {/* background: rgba(255, 255, 255, .58); */padding: 40px 0;max-width: 824px;margin: 0 auto;}
.top_in .lower {padding: 45px 30px 0 60px;}
.list {font-family: "ClearSansRegular"; font-size: 21px; line-height: 25px;}
.list li {background: url(../images/icon2.png) no-repeat left 6px; margin-bottom: 36px; padding-left: 32px;}
.top_in .lower .list {width: 50.4%;}
.top_in .lower .form {width: 46.4%;}
.top_in .md_title br {display: none;}

/*Services*/
.services {margin-top: 90px;}
.services_boxes {padding: 65px 40px 10px;}
.services_boxes .box {display: inline-block; vertical-align: top; width: 32.8%; text-align: center; margin-bottom: 30px;}
.services_boxes .box .icon {background: no-repeat center; min-height: 65px; margin-bottom: 20px;}
.services_boxes .box .icon1 {background-image: url(../images/u1.png);}
.services_boxes .box .icon2 {background-image: url(../images/u2.png);}
.services_boxes .box .icon3 {background-image: url(../images/u3.png);}
.services_boxes .box .name {font-size: 21px; font-family: "ClearSansThin"; font-weight: bold;}
.services .btn {min-width: 216px;}

/*Gaurantee*/
.gaurantee {position: relative; z-index: 5; margin-bottom: 20px;}
.gaurantee_boxes .box {display: inline-block; vertical-align: top; margin-bottom: 24px; min-height: 220px; padding: 22px 30px; position: relative; z-index: 5;}
.gaurantee_boxes .box, .modal_div {background-color: #fff; -webkit-box-shadow: 1px 1px 21px 2px rgba(0, 0, 0, .31); -moz-box-shadow: 1px 1px 21px 2px rgba(0, 0, 0, .31); -o-box-shadow: 1px 1px 21px 2px rgba(0, 0, 0, .31); box-shadow: 1px 1px 21px 2px rgba(0, 0, 0, .31);}
.gaurantee_boxes.second .box {min-height: 260px;}
.gaurantee_boxes .box.small {width: 39%;}
.gaurantee_boxes .box.small:nth-child(odd) {margin-right: 2%;}
.gaurantee_boxes .box.big {width: 58%;}
.gaurantee_boxes .box.big:nth-child(odd) {margin-right: 2%;}
.gaurantee_boxes .title {background: url(../images/icon6.png) no-repeat 0 14px; margin-bottom: 0; line-height: 42px; min-height: 64px; padding-left: 38px;}
.gaurantee_boxes.second .title {min-height: 94px;}
.gaurantee_boxes .text {font-size: 21px; font-family: "ClearSansLight"; color: #242424; padding-left: 38px; font-weight: bold;}

/*Call*/
.call {position: relative; margin-bottom: 30px; margin-left: -20px; margin-right: -20px;}
.call.block {margin-bottom: 90px;}
.call.block::after {content: ''; display: block; background-color: #e6a60d; min-height: 250px; width: 170%; position: absolute; left: -54%; right: 0; top: 0; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg);}
.call_in {background-color: #fec41d; min-height: 351px; padding: 24px 0;}
.call_in .mid { position: relative; z-index: 5;}
.call_in .title {margin-bottom: 16px;}
.call_in p {font-size: 21px; font-family: "ClearSansLight";}
.form.second {max-width: 312px;}
.call_in .form.second {position: absolute; bottom: 0; right: 10px;}

/*Scheme*/
.scheme_boxes {background: url(../images/icon16.png) no-repeat bottom center; max-width: 640px; margin: 0 auto 50px;}
.shecheme_boxes_in {width: 48%; text-align: center;}
.shecheme_boxes_in .box {position: relative; padding-bottom: 48px; min-height: 144px;}
.shecheme_boxes_in .box::after {content: ''; background: url(../images/icon15.png) no-repeat bottom center; display: block; height: 48px; width: 100%; position: absolute; bottom: 0; left: 0;}
.shecheme_boxes_in .box.first::after {bottom: 10px;}
.shecheme_boxes_in .box.second::after {bottom: 6px;}
.shecheme_boxes_in .box.fourth::after {display: none;}
.shecheme_boxes_in .box.eighth::after {bottom: 10px;}
.shecheme_boxes_in .box .icon {background: no-repeat bottom center; min-height: 50px;}
.shecheme_boxes_in .box .icon1 {background-image: url(../images/icon7.png);}
.shecheme_boxes_in .box .icon2 {background-image: url(../images/icon8.jpg);}
.shecheme_boxes_in .box .icon3 {background-image: url(../images/icon9.png);}
.shecheme_boxes_in .box .icon4 {background-image: url(../images/icon10.png);}
.shecheme_boxes_in .box .icon5 {background-image: url(../images/icon11.png);}
.shecheme_boxes_in .box .icon6 {background-image: url(../images/icon12.png);}
.shecheme_boxes_in .box .icon7 {background-image: url(../images/icon13.png);}
.shecheme_boxes_in .box .icon8 {background-image: url(../images/icon14.png);}
.shecheme_boxes_in .box .name {font-size: 21px; font-family: "ClearSansLight"; font-weight: bold; line-height: 18px; min-height: 50px;}

/*Second Carousel*/
.second_carousel {max-width: 690px; margin: 0 auto;}
.second_carousel .slick-dots {text-align: center; margin-top: 50px; margin-bottom: 60px;}
.second_carousel .slick-dots li {display: inline-block; margin-left: 14px; vertical-align: top;}
.second_carousel .slick-dots button {background-color: #242424; border: none; cursor: pointer; height: 6px; width: 6px; text-indent: -9999px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;}
.second_carousel .slick-dots .slick-active button {background-color: #fec41d;}
.second_carousel .avatar {height: 127px; width: 127px; line-height: 127px; margin-left: 40px; text-align: center; position: relative; float: left;}
.second_carousel .avatar::after {content: ''; display: block; background-color: #fec41d; height: 145px; width: 154px; position: absolute; left: -40px; top: 20px; z-index: -1;}
.second_carousel .text {padding-left: 210px; padding-right: 30px;}
.second_carousel .text > span {font-size: 19px; font-family: "ClearSansBold"; color: #fec41d;}
.second_carousel .text p {font-size: 21px; font-family: "ClearSansLight"; font-weight: bold;}

/*Modal*/
#overlay {z-index: 9998; position: fixed; background-color: #000; opacity: 0.4; -moz-opacity: 0.4; filter: alpha(opacity=4); height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; display: none;}
#modal1 {height: 260px; width: 518px; margin-left: -259px; margin-top: -130px;}
#modal2 {height: 460px; width: 718px; margin-left: -359px; margin-top: -230px;}
.modal_div {background-color: #fff; padding: 30px 20px; position: fixed; top: 45%; left: 50%; display: none; width: 430px; margin-left: -215px; opacity: 0; z-index: 9999; overflow-y: auto; overflow-x: hidden;}
.modal_div .form {max-width: 322px; margin: 10px auto 0;}
.modal_div .form .input, .modal_div .form .input::-webkit-input-placeholder {color: #2c3032;}
.modal_div .form .btn {margin-top: 14px;}
.modal_close {font-size: 56px; font-family: "ClearSansThin"; font-weight: bold; position: absolute; right: 14px; top: 14px; z-index: 10; cursor: pointer; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.work_list {-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}

/*Main Footer*/
#main_footer .mid {margin-bottom: 40px;}

@media only screen and (max-width: 826px) {
    .btn {font-size: 15px;}
    .logo {height: 69px; width: 98px; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; -ms-background-size: contain; background-size: contain;}
    .menu li {margin-left: 10px; font-size: 15px;}
    .call_in .title {font-size: 25px;}
}

@media only screen and (max-width: 768px) {
    .btn {font-size: 14px; padding: 0 5px;}
    .menu {padding-left: 0;}
    .menu li {font-size: 14px; margin-left: 8px;}
    .call_in .title {font-size: 22px;}
}

@media only screen and (max-width: 684px) {
    .header_con {position: relative;}
    .header_con .contacts {text-align: right;}
    .header_con .rooms_in {margin-right: 80px; text-align: left;}
    .header_con .rooms_in {background-position: 0 8px; font-family: "ClearSansThin";}
    .header_con .rooms_in li {font-size: 21px;}
    .header_con .contacts .btn {margin-right: -10px;}
    .open_menu {display: block; position: absolute; top: 0; right: -10px; z-index: 10;}
    .open_menu.opened ~ .menu {display: block;}
    .header_con .menu {background-color: #fff; display: none; position: absolute; min-width: 260px; text-align: right; right: -30px; top: -22px; padding: 74px 16px 40px 10px;}
    .header_con .menu::before {content: ''; display: block; height: 5px; width: 120%; margin-left: -10px; margin-bottom: 10px; box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .14);}
    .header_con .menu li {float: none; font-size: 25px; line-height: 58px;}
    .header_con .menu li a {display: inline-block;}
    .header_con .menu li a::after {width: 100%; left: 0; bottom: 14px;}
    .header_con .menu li a:hover::after, .header_con .menu .active a::after {width: 0; left: 50%;}
    .header_con .btn {font-size: 17px; padding: 0 10px;}
    .gaurantee_boxes .box {width: 100%!important;}
}

@media only screen and (max-width: 600px) {
    .btn {font-size: 17px; font-weight: bold;}
    .top_in .lower .list, .top_in .lower .form {float: none; width: 100%;}
    .top_in .lower {padding-left: 0; padding-right: 0;}
    .form .text-right {text-align: center;}
    .top_in .lower .text-right .btn {font-size: 20px;}
    .services_boxes .box {width: 100%;}
    .services .btn {font-size: 20px; margin-bottom: 20px;}
    .call_in {text-align: center;}
    .call_in .title {font-size: 33px;}
    .call_in .form.second {position: static; max-width: 320px; margin: 30px auto 0;}
    .call.block::after {width: 344%; left: -145%; -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -o-transform: rotate(-50deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg);}
    .first_carousel {margin-left: 10px;}
    .first_carousel .slick-prev {left: -30px;}
    .first_carousel .mid {max-width: 100%;}
    .first_carousel .clearfix {position: relative;}
    .first_carousel .image {width: 100%;}
    .first_carousel .main_images {display: none;}
    .first_carousel .thumbnails a::before {display: none;}
    .first_carousel .text {width: 100%; margin-left: 0; float: none; text-align: center; margin-bottom: 20px;}
    .first_carousel .title {text-align: left;}
    .first_carousel p {text-align: left;}
    #main_footer .rooms {font-size: 20px;}
    #main_footer .menu {display: none;}
}

@media only screen and (max-width: 475px) {
    .second_carousel {text-align: center;}
    .second_carousel .avatar {display: inline-block; width: 100%; float: none; margin-bottom: 60px;}
    .second_carousel .text {padding: 0;}
    .modal_div {width: 100%!important; margin-left: 0!important; left: 0!important; padding-bottom: 30px;}
}

@media only screen and (max-width: 380px) {
    .header_con .rooms_in {margin-right: 0; text-align: center;}
    #main_footer .logo, #main_footer .contacts {display: block; float: none; text-align: center; margin: 0 auto;}
    #main_footer .contacts {width: 100%; margin-top: 20px;}
    #main_footer .rooms_in {float: none; display: inline-block;}
    .top_in .md_title br {display: block;}
}

.gallery {
    margin: 10px 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

.gallery img{
    width: 230px;
    padding: 5px;
    filter: grayscale(100%);
    transition: 1s;
}

.gallery img:hover{
    filter: grayscale(0);
    transform: scale(1.1);
}