html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

body,
button {
    margin: 0
}

.collapse.in,
.open>.dropdown-menu,
header,
nav {
    display: block
}

a {
    background-color: transparent;
    color: #337ab7;
    text-decoration: none
}

a:active,
a:hover {
    outline: 0
}

img {
    border: 0;
    vertical-align: middle
}

button {
    font: inherit;
    color: inherit;
    overflow: visible;
    text-transform: none;
    -webkit-appearance: button;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

body {
    overflow-x: hidden;
    line-height: 1.3;
    color: #333;
    background-color: #fff
}

a:focus,
a:hover {
    color: #23527c;
    text-decoration: underline
}

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

ul ul {
    margin-bottom: 0
}

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.dropdown {
    position: relative
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0
}

.open>a {
    outline: 0
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav>li,
.nav>li>a {
    position: relative;
    display: block
}

.nav>li>a {
    padding: 10px 15px
}

.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    background-color: #eee
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    border-color: #337ab7;
    background-color: #464646 !important
}

.nav>li>a>img {
    max-width: none
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent
}

.navbar-collapse {
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1)
}

.navbar-collapse.in {
    overflow-y: auto
}

.container>.navbar-collapse,
.container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px
}

.navbar-toggle:focus {
    outline: 0
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px
}

.navbar-nav {
    margin: 7.5px -15px
}

.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px
}

.navbar-nav>li>.dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.clearfix:after,
.clearfix:before,
.container:after,
.container:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before {
    display: table;
    content: " "
}

.clearfix:after,
.container:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after {
    clear: both
}

.show {
    display: block !important
}

@-ms-viewport {
    width: device-width
}

body,
html {
    font-size: 100%;
    background: #e5e5e5;
    font-family: roboto condensed, sans-serif
}

body a {
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all
}

a:hover {
    text-decoration: none
}

.header-top {
    padding: 1.5em 0;
    background: #fff
}

.logo {
    float: left
}

.logo a,
main,
main img {
    display: block
}

.social {
    float: right;
    width: 26.33%;
    padding: .32em 0
}

.social ul,
main *,
ul {
    padding: 0;
    margin: 0
}

.social ul li {
    display: inline-block;
    margin: 0
}

.social ul li a.facebook {
    background: url(../img/social.png) no-repeat 0 0;
    width: 32px;
    height: 32px;
    display: block
}

.social ul li a.twitter {
    background: url(../img/social.png) no-repeat -34px 0
}

.social ul li a.chrome {
    background: url(../img/social.png) no-repeat -68px 0
}

.social ul li a.in {
    background: url(../img/social.png) no-repeat -102px 0
}

.social ul li a.beh {
    background: url(../img/social.png) no-repeat -136px 0
}

.social ul li a.vem {
    background: url(../img/social.png) no-repeat -169px 0
}

.social ul li a.yout {
    background: url(../img/social.png) no-repeat -202px 0
}

.social ul li a.facebook:hover {
    opacity: .5
}

.logo a span {
    font-size: .9em;
    margin-left: 5em;
    padding-top: .5em
}

.head-bottom {
    background: #fa4b2a
}

ul.nav.navbar-nav li a,
ul.nav.navbar-nav li.active a {
    color: #fff !important;
    text-transform: uppercase !important
}

ul.nav.navbar-nav li.active a {
    background: #464646 !important;
    font-weight: 700
}

ul.nav.navbar-nav li a:hover {
    background: #464646 !important;
    color: #fff !important
}

ul.nav.navbar-nav li a {
    font-weight: 700 !important;
    padding: 15px 23px !important;
    border-right: 1px solid rgba(255, 255, 255, .32) !important;
    font-size: 1em
}

.head-bottom ul.dropdown-menu li a {
    color: #000 !important;
    padding: 8px 15px !important;
    font-size: .9em !important
}

.navbar-collapse {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.collapse {
    display: none
}

.button {
    margin: 1em 0 0;
    float: left
}

main * {
    outline: 0;
    border: 0;
    font-family: "Roboto";
    text-decoration: none;
    box-sizing: border-box
}

main {
    position: relative;
    margin: 0 auto;
    padding: 30px 15px;
    max-width: 960px;
    background-color: #fff
}

main h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
    margin-bottom: 30px
}

main p,
main ul li {
    font-size: 18px;
    line-height: 1.3;
    color: #333;
    margin-bottom: 15px
}

main ul li {
    margin-bottom: 10px;
    list-style: disc
}

main a {
    color: #1869a7
}

main ul {
    padding: 0;
    margin-left: 25px;
    margin-bottom: 20px
}

main img {
    width: 100%;
    max-width: 650px;
    margin: 15px auto
}

@media (min-width:768px) {
    .container {
        width: 750px
    }

    .navbar {
        border-radius: 4px
    }

    .navbar-header,
    .navbar-nav>li {
        float: left
    }

    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important
    }

    .navbar-collapse.in {
        overflow-y: visible
    }

    .container>.navbar-collapse,
    .container>.navbar-header {
        margin-right: 0;
        margin-left: 0
    }

    .navbar-toggle {
        display: none
    }

    .navbar-nav {
        float: left;
        margin: 0
    }

    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px
    }

    main h1 {
        font-size: 34px
    }

    main p,
    main ul li {
        font-size: 20px
    }

    main {
        padding: 30px 20px;
        border-left: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}

@media (max-width:1024px) {
    ul.nav.navbar-nav li a {
        padding: 15px 14px !important
    }
}

@media (max-width:966px) {
    ul.nav.navbar-nav li a {
        padding: 12px 5px !important;
        font-size: .95em
    }

    .social {
        width: 36.33%
    }
}

@media (max-width:767px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .navbar-nav .open .dropdown-menu>li>a {
        padding: 5px 15px 5px 25px;
        line-height: 20px
    }

    .navbar-nav .open .dropdown-menu>li>a:focus,
    .navbar-nav .open .dropdown-menu>li>a:hover {
        background-image: none
    }
}

@media (max-width:736px) {
    .social {
        width: 42.33%
    }

    .header-top {
        padding: 1em 0
    }

    .navbar-nav {
        margin: 7.5px 0
    }

    .navbar-toggle .icon-bar {
        background: #fff !important
    }
}

@media (max-width:568px) {
    .logo {
        float: left;
        width: 40%;
        text-align: center
    }

    .social {
        width: 100%;
        float: right;
        text-align: right;
        margin-top: 1em;
        padding: 0
    }
}

@media (max-width:414px) {
    .logo {
        width: 46%
    }
}

@media (max-width:384px) {
    .logo {
        width: 50%
    }
}

@media (max-width:320px) {
    .social {
        text-align: center
    }

    .header-top {
        padding: .8em 0 0
    }

    .navbar-toggle {
        margin-top: 4px;
        margin-bottom: 4px
    }
}









.step-quest>* label:active {
    background: #d0d0d0
}

.content_img p {
    color: #656565;
    font-weight: 500;
    margin-bottom: 30px
}

#quiz,.step-quest {
    display: flex;
    flex-wrap: wrap
}

#quiz {
    min-height: 50vh;
    align-items: center;
    padding: 50px;
    background: #f9f9f9
}

#quiz_form {
    width: 100%
}

#last_step,#other_steps,#step1,#step2,#step3,#step4 {
    display: none
}

#step0 {
    display: block
}

#last_step h2,#step1 h2,#step2 h2,#step3 h2 {
    text-align: center;
    margin-bottom: 50px!important
}

#last_step,#other_steps,#step0 {
    text-align: center
}

.step-quest {
    justify-content: center;
    margin-left: -15px;
    margin-right: -15px
}

.step-quest>* {
    width: 50%;
    padding: 0 15px;
    margin-bottom: 30px
}

.step-quest>* label {
    display: block;
    border: 2px solid #eee;
    padding: 15px 30px;
    border-radius: 5px;
    height: 100%
}

.step-quest>* label.checked {
    border: 2px solid #54a8fb;
    /* box-shadow: 1px 1px 12px #ccc */
}

.step-quest>* label input {
    margin-right: 15px;
    display: none
}

.step-quest>* label input#price_input {
    display: block;
    width: 100%;
    border-radius: 3px;
    pointer-events: none;
    font-size: 1.2rem;
    text-align: center
}

.step-quest>* img {
    margin-bottom: 15px
}

.step-quest>div>input {
    padding: 15px 0;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 1.3rem;
    text-align: center
}

#last_step {
    line-height: 22px
}

#progress_bar {
    height: 5px;
    width: 100%;
    background: rgba(84,168,251,.2)
}

#progress_in {
    width: 0%;
    height: 100%;
    background: #54a8fb;
    transition: all .3s ease;
    -o-transition: all .3s;
    -webkit-transition: all .3s ease 0s
}

#curr_step {
    margin-bottom: 15px;
    margin-top: 40px
}

@media screen and (max-width: 1020px) {
    .form {
        display:flex;
        flex-direction: column;
        align-items: center
    }

    body img {
        height: auto
    }

    body img,center>img {
        max-width: 100%
    }
}

@media screen and (max-width: 999px) {
    .logo::after {
        display:none
    }

    .container {
        background: 0 0;
        border: 0;
        width: 100%;
        margin: 10px auto 0
    }

    .main_content {
        display: block;
        margin: 0 auto
    }

    .header>.wrapper {
        width: 100%;
        text-align: center;
        padding: 39px 0 0
    }

    .menu {
        text-align: center;
        display: block
    }

    .header_menu_block {
        position: relative
    }
}

@media (max-width: 768px) {
    .form {
        display:-webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }

    select {
        font-size: 24px
    }
}

@media screen and (max-width: 768px) {
    .top-line {
        display:block
    }

    .top-line>div:first-child {
        justify-content: center
    }

    .view1 {
        text-align: center
    }

    .header_menu_block {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .main_content {
        margin:0 auto;
        border-radius: 5px
    }

    .menu>.active {
        margin: 0 0 0 -4px
    }

    .header>.wrapper {
        padding: 20px 0 0
    }

    .header_text {
        padding: 22px 0;
        width: 300px
    }

    .header_menu_block {
        margin: 10px auto 0;
        position: relative
    }

    .menu a {
        margin: 10px 0
    }
}

@media screen and (max-width: 540px) {
    .bg1,.gray-block,blockquote {
        margin-left:0!important;
        margin-right: 0!important
    }
}

@media screen and (max-width: 480px) {
    .logo img {
        width:100%;
        padding-left: 0!important
    }

    .content_title {
        font-size: 23px!important
    }

    h2.h2 {
        font-size: 20px!important
    }

    .main_content p {
        text-align: left;
        padding-left: 0!important;
        padding-right: 0!important
    }

    .main_content {
        margin: 0 auto;
        width: 100vw
    }

    .content_img {
        margin-left: 0!important;
        margin-right: 0!important
    }

    .header>.wrapper {
        padding: 10px 0 0
    }

    .header_menu_block {
        display: none
    }

    input {
        width: 90%
    }
}

@media screen and (max-width: 420px) {
    body img {
        height:auto;
        max-width: 100%
    }
}

@media screen and (max-width: 410px) {
    .menu {
        margin-top:12px;
        margin-right: 10px
    }
}

@media screen and (max-width: 345px) {
    .order_block img {
        width:100%
    }
}

@media screen and (max-device-width: 1024px) {
    #quiz h2 {
        margin-bottom:50px!important
    }

    .step-quest,.step-quest>* {
        margin-bottom: 15px
    }

    #type-home>*,#type-repair>* {
        width: 50%;
        text-align: left;
        margin-bottom: 15px
    }

    .step-quest>* label {
        display: flex;
        align-items: center;
        padding: 15px;
        justify-content: center
    }

    .step-quest>* img {
        width: 30%;
        margin-bottom: 0;
        margin-right: 20px
    }

    .step-quest>div>input {
        padding: 10px 30px;
        font-size: 1.1rem
    }
}

@media screen and (max-device-width: 800px) {
    #quiz {
        padding:0 15px
    }

    #quiz h2 {
        font-size: 1.8rem
    }

    .step-quest>* img {
        display: none
    }

    .step-quest>* label {
        text-align: center;
        padding: 10px 15px
    }
}

@media screen and (max-device-width: 480px) {
    #quiz h2 {
        margin-bottom:40px!important
    }

    #type-home>*,#type-repair>*,.step-quest>* {
        width: 90%
    }
}

@media screen and (max-device-width: 380px) {
    #quiz h2 {
        font-size:1.6rem
    }

    #type-home>*,#type-repair>*,.step-quest>* {
        width: 100%
    }
}


/***************************quiz-styles - start**************************/
#quiz,
.step-quest {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
#quiz {
  position: relative;
  min-height: 50vh;
  align-items: center;
  padding: 20px 10px;
  background: #f9f9f9;
  margin: 15px auto 45px;
  /* background-image: url(../img/head-bg.webp); */
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
}
#quiz_form {
  width: 100%;
}
#last_step,
#other_steps,
#step1,
#step2,
#step3,
#step4,
#step5,
#step6,
#step7,
#step8,
#step9,
#step10 {
  display: none;
}
#step0 {
  display: block;
}
#last_step h2,
#step1 h2,
#step2 h2,
#step3 h2,
#step4 h2,#step5 h2,#step6 h2,#step7 h2,#step8 h2,#step9 h2{
    line-height: 1.1;
  text-align: center;
  margin-bottom: 20px !important;
}
#last_step,
#other_steps,
#step0 {
  text-align: center;
}
.step-quest {
  justify-content: center;
  margin-left: -15px;
  margin-right: -15px;
}
.step-quest > * {
  width: 75%;
  padding: 0 15px;
  margin-bottom: 3px;
}
.step-quest > * label {
  display: block;
  border: 2px solid #85d5cd;
  padding: 15px 30px;
  border-radius: 5px;
  height: 100%;
  background-color: #fff;
}
.step-quest > * label.checked {
  border: 2px solid #85d5cd;
  /* box-shadow: 1px 1px 12px #ccc; */
}
.step-quest > * label input {
  margin-right: 15px;
  display: none;
}
.step-quest > * label input#price_input {
  display: block;
  width: 100%;
  border-radius: 3px;
  pointer-events: none;
  font-size: 1.2rem;
  text-align: center;
}
.step-quest > * img {
  margin-bottom: 15px;
}
.step-quest > div > input {
  padding: 15px 0;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 5px;
  font-size: 1.3rem;
  text-align: center;
}
#last_step {
  line-height: 22px;
}
#progress_bar {
  bottom: 0;
  position: absolute;
  height: 5px;
  width: 100%;
  background: rgb(72 103 67 / 20%);
}
#progress_in {
  width: 0%;
  height: 100%;
  background: #2c838a;
  transition: all 0.3s ease;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s ease 0s;
}
#curr_step {
  margin-bottom: 15px;
  margin-top: 40px;
}

#quiz label {
  cursor: pointer;
}