@charset "UTF-8";
*{
margin: 0px;
padding: 0px;
text-align: left;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
display: block;
}
html{
height:100%;
}
body{
height:100%;
text-align: center;
margin: 20px;
color: #000;
font-size: 20px;
font-weight: normal;
font-family: 'Montserrat', sans-serif;
background: #FFF;
display: flex;
flex-direction: column;
}
img{
border: none;
}
.clearfix{
clear: both;
}
a{
text-decoration: none;
}

.main{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.wrap{
padding: 0px 10px;
}

footer{
padding: 30px 0px;
}
footer p{
color: #fcb641;
font-size: 20px;
font-weight: 400;
text-align: center;
}

.calc-block{
flex-grow: 1;
}
.calc-block .header{
color: #000;
font-size: 30px;
font-weight: 400;
text-align: center;
padding: 30px 0px;
}
.bold{
font-weight: 600;
}

.select_servise{
padding: 20px 0px;
}
.select_servise .item{
width: 25%;
height: 270px;
background-position: 50% 50%;
background-size: 100% 100%;
float: left;
transition: 0.1s linear;
}
.select_servise .item .fon_img{
height: 100%;
background: rgba(255,255,255,.6);
padding: 0%;
position: relative;
cursor: pointer;
transition: 0.1s linear;
}
.select_servise .item .fon_img .icon{
background-image: url(../img/preview-ico.png);
width: 100px;
height: 100px;
position: absolute;
top: 40%;
left: 50%;
margin: -50px 0px 0px -50px;
}
.select_servise .item .fon_img .title{
color: #000;
font-size: 18px;
font-weight: 800;
text-align: center;
position: absolute;
width: 100%;
left: 0%;
bottom: 5%;
text-transform: uppercase;
}
.select_servise .item .fon_img .title p{
color: #000;
font-size: 15px;
line-height: 16px;
height: 32px;
overflow: hidden;
font-weight: 500;
text-align: center;
padding: 5px 10px 0px 10px;
text-transform: lowercase;
}

.select_servise .item:hover{
background-size: 110% 110%;
}
.select_servise .item:hover .fon_img{
background: rgba(106,157,33,.8);
}
.select_servise .item:hover .fon_img .title{
color: #FFF;
}
.select_servise .item:hover .fon_img .title p{
color: #FFF;
} 


.select_servise .item .fon_img .icon.usl_1{
background-image: url(../img/icon-implantation.png);
background-position: 0px 0%;
}
.select_servise .item .fon_img .icon.usl_2{
background-image: url(../img/icon-koronky.png);
background-position: 0px 0%;
}
.select_servise .item .fon_img .icon.usl_3{
background-image: url(../img/icon-protezy.png);
background-position: 0px 0%;
}
.select_servise .item .fon_img .icon.usl_4{
background-image: url(../img/icon-viniry.png);
background-position: 0px 0%;
}
.select_servise .item .fon_img .icon.usl_5{
background-image: url(../img/icon-plomba.png);
background-position: 0px 0%;
}
.select_servise .item .fon_img .icon.usl_6{
background-image: url(../img/icon-udalenie-nerva.png);
background-position: 0px 0%;
}
.select_servise .item .fon_img .icon.usl_7{
background-image: url(../img/icon-udalenie-zuba.png);
background-position: 0px 0%;
}
.select_servise .item .fon_img .icon.usl_8{
background-image: url(../img/icon-chistka.png);
background-position: 0px 0%;
}

.select_servise .item:hover .fon_img .icon.usl_1{
background-image: url(../img/icon-implantation-white.png);
}
.select_servise .item:hover .fon_img .icon.usl_2{
background-image: url(../img/icon-koronky-white.png);
}
.select_servise .item:hover .fon_img .icon.usl_3{
background-image: url(../img/icon-protezy-white.png);
}
.select_servise .item:hover .fon_img .icon.usl_4{
background-image: url(../img/icon-viniry-white.png);
}
.select_servise .item:hover .fon_img .icon.usl_5{
background-image: url(../img/icon-plomba-white.png);
}
.select_servise .item:hover .fon_img .icon.usl_6{
background-image: url(../img/icon-udalenie-nerva-white.png);
}
.select_servise .item:hover .fon_img .icon.usl_7{
background-image: url(../img/icon-udalenie-zuba-white.png);
}
.select_servise .item:hover .fon_img .icon.usl_8{
background-image: url(../img/icon-chistka-white.png);
}

.progress-bar{
background-color: #f2f2f2;
height: 24px;
}
.progress-bar .real{
width: 0%;
display: inline-block;
height: 24px;
line-height: 24px;
background-color: #fcb641;
text-align: right;
color: #FFF;
font-size: 13px;
font-weight: normal;
overflow: hidden;
}
.progress-bar .real span{
display: inline-block;
padding: 0px 10px;
}
.progress-bar .real span b{
font-weight: normal;
}

.mess{
box-shadow: 0 0.25rem 1.7rem rgba(0, 0, 0, 0.2);
border-radius: 44px;
background-color: #fafafa;
margin: 20px auto 0px auto;
width: 410px;
position: relative;
}
.mess .img{
float: left;
padding: 0px 0px 0px 10px;
}
.mess .img img{
width: 50px;
}
.mess .text{
margin-left: 60px;
color: #000;
font-size: 13px;
font-weight: 400;
padding: 18px 0px 0px 0px;
}
.mess::after {
    background-color: #fafafa;
    bottom: -0.0rem;
    box-shadow: 0.5rem 0.5rem 1rem -0.4rem rgba(0, 0, 0, 0.1);
    content: "";
    height: 1.3rem;
    left: 0;
    margin: 0 auto;
    position: relative;
    right: 0;
    transform: rotate(45deg);
    width: 1.3rem;
    z-index: 0;
}

.oprosnik .answers{
display: flex;
flex-wrap: wrap;
}
.oprosnik .answers .item{
background-color: #fafafa;
border: 1px #fafafa solid;
box-shadow: 0 0.25rem 1.7rem rgba(0, 0, 0, 0.1);
padding: 15px;
float: left;
margin: 10px;
cursor: pointer;
transition: 0.1s linear;
}
.oprosnik .answers .item.select{
box-shadow: 0 0.25rem 1.7rem rgba(0, 0, 0, 0.2);
border: 1px #8ec63e solid;
}

.oprosnik .answers .item .check{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px #8ec63e solid;
float: left;
text-align: center;
}
.oprosnik .answers .item.select .check{
background-color: #8ec63e;
}

.oprosnik .answers .item .check i{
color: #fafafa;
font-size: 25px;
line-height: 40px;
}

.oprosnik .answers .item .text{
margin-left: 60px;
}
.oprosnik .answers .item .text .title{
font-weight: 600;
font-size: 20px;
line-height: 30px;
padding: 5px 0px;
}

.oprosnik .answers .item .text .price{
padding: 20px 0px 0px 0px;
font-size: 13px;
}
.oprosnik .answers .item .text .price div span{
font-weight: 500;
}
.oprosnik .answers .item .text .price div.price_chs{
font-weight: 600;
font-size: 18px;
padding: 3px 0px;
}
.oprosnik .answers .item .text .price div.price_chs span{
font-weight: 700;
color: #ff750d
}
.oprosnik .answers .item .text .price div.ekonom{

}
.oprosnik .answers .item .text .price div.ekonom span{
font-size: 15px;
color: #5abd68;
font-weight: 600;
}


.oprosnik .answers .item.col2{
flex: 1 40%;
}
.oprosnik .answers .item.col3{
flex: 1 25%;
}
.oprosnik .answers .item.col4{
flex: 1 20%;
}
.oprosnik .answers .item.col5{
flex: 1 15%;
}
.oprosnik .answers .item.col8{
flex: 1 8%;
}
.oprosnik .ask .button{
padding: 20px 0px;
text-align: center;
}
.oprosnik .ask .button .btn{
display: inline-block;
padding: 0px 60px;
height: 80px;
line-height: 80px;
border-radius: 40px;
color: #FFF;
font-weight: 600;
font-size: 24px;
text-transform: uppercase;
box-shadow: 0 0.25rem 1.7rem rgba(0, 0, 0, 0.1);
background-color: #fb8c23;
cursor: pointer;
transition: 0.1s linear;
}
.oprosnik .ask .button .btn i{
margin-left: 10px;
font-size: 30px;
}
.oprosnik .ask .button .btn:hover{
background-color: #fb8c23;
}

.oprosnik .ask{
display: none;
}
.oprosnik .ask.active{
display: block;
}

.oprosnik .ask .back{
position: absolute;
top: 50px;
left: 30px;
}
.oprosnik .ask .back i{
color: #000;
transition: 0.1s linear;
font-size: 25px;
padding: 10px;
}
.oprosnik .ask .back:hover i{
color: #ff750d;
}

.error-message{
display: none;
text-align: center;
color: #FF0000;
font-size: 16px;
padding: 10px 0px 0px 0px;
}

.itog{
padding: 30px 0px;
}
.itog p{
padding: 40px 0px 0px 0px;
text-align: center;
font-size: 16px;
font-weight: 400;
max-width: 700px;
margin: 0 auto;
}
.itog p a{
color: #10ace8;
text-decoration: underline;
}
.itog .price div{
text-align: center;
font-size: 18px;
}
.itog .price div span{
font-weight: 500;
}
.itog .price div.price_chs{
padding: 20px 0px;
font-size: 36px;
font-weight: 700;
}
.itog .price div.price_chs span{
color: #ff750d;
font-weight: 700;
}
.itog .price div.ekonom{
font-size: 22px;
font-weight: 500;

}
.itog .price div.ekonom span{
color: #2a950f;
font-weight: 700;
}

.itog .call{
padding: 20px 0px;
text-align: center;
}
.itog .call a{
display: inline-block;
padding: 0px 30px;
height: 60px;
line-height: 60px;
border-radius: 30px;
color: #FFF;
font-weight: 600;
font-size: 18px;
text-transform: uppercase;
box-shadow: 0 0.25rem 1.7rem rgba(0, 0, 0, 0.1);
background-color: #8ec63e;
cursor: pointer;
transition: 0.1s linear;
}
.itog .call a i{
margin-left: 10px;
font-size: 20px;
}
.itog .call a:hover{
background-color: #6a9d21;
}
.sent-mail{
padding: 10px 0px;
text-align: center;
}
.sent-mail p{
font-weight: 700;
}
.sent-mail form{
text-align: center;
padding: 15px 0px 0px 0px;
display: inline-block;
margin: 0 auto;
}
.sent-mail form input{
padding: 0px 10px;
border: 1px #10ace8 solid;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
float: left;
height: 30px;
line-height: 30px;
}
.sent-mail form button{
border: 1px #10ace8 solid;
background: #10ace8;
color: #FFF;
cursor: pointer;
padding: 1px 10px;
float: left;
height: 32px;
line-height: 24px;
} 
.last-mess{display: none;}

.kolvo{
text-align: center;
}
.kolvo input{
font-weight: 600;
font-family: 'Montserrat', sans-serif;
width: 70px;
text-align: center;
border: none;
}
.variant{display: none;}

.alternativa{
padding: 0px 0px 30px 0px;
}
.alternativa p{
text-align: center;
}
.oprosnik .answers.nopad .item .text{
margin-left: 0px;
}
.oprosnik .answers .item  a .title{
color: #10ace8;
}
[name=message]{display: none;}

.call .f{display: none;
text-align: center;
}
.call form{
text-align: center;
padding: 15px 0px 0px 0px;
display: inline-block;
margin: 0 auto;
}
.call form input{
padding: 0px 10px;
border: 1px #8ec63e solid;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
float: left;
height: 30px;
line-height: 30px;
}
.call form button{
border: 1px #8ec63e solid;
background: #8ec63e;
color: #FFF;
cursor: pointer;
padding: 1px 10px;
float: left;
height: 32px;
line-height: 32px;
}