/* Lead Forms CSS
 * For Home Value and Dream Home lead forms
 */

/* Home Value Step 1 */
.free-home-evaluation.step_1 {
    width: 100%;
    height: 100%;
    margin: auto;
    box-sizing: border-box;
    background-image: url('../images/hv-bg-buildings.png'), url('../images/hv-bg.jpg');
    background-size: 100% auto, cover;
    background-position: center bottom, center center;
    background-repeat: no-repeat, no-repeat;
}
.free-home-evaluation.step_1.dream_home {
    width: 100%;
    height: 100%;
    margin: auto;
    box-sizing: border-box;
    background-image: 
        url(../images/dh-balloonhouse.png),
        url(../images/dh-clouds.png),
        url(../images/dh-bg.jpg);
    background-repeat:
        no-repeat,
        repeat-x,
        no-repeat;
    background-size:
        80px auto,
        100% auto,
        cover;
    background-position:
        left 18% bottom 20px,
        center bottom,
        center center;
    
    image-rendering: auto,auto,-moz-crisp-edges;
}
.free-home-evaluation.step_1 .webform-component-markup:nth-of-type(1) {
    padding-top: 5%;
    transition: padding-top ease-out 0.3s;
}
.free-home-evaluation.step_1 .webform-component-markup:nth-of-type(1) h1 {
    margin-top: 0;
}
.free-home-evaluation.step_1.dream_home .webform-component-markup:nth-of-type(1) h1,
.free-home-evaluation.step_1.dream_home .webform-component-markup:nth-of-type(1) p {
    color: #fff;
}
.loading .submit_last_step.form-submit {
    -webkit-appearance: none;
    background-image: url(./../images/loader.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    color: transparent;
    pointer-events: none;
}
.free-home-evaluation.step_1.dream_home input[type="submit"] {
    background-color: #2ac04a !important;
    border: 2px solid #eee;
    border-left: 0;
}
.free-home-evaluation.step_1.dream_home input[type="submit"]:hover {
    background-color: #40DB61 !important;
}
.webform-client-form-inside .free-home-evaluation.step_1.dream_home .webform-component-textfield input[type=text] {
    border-color: #eee !important;
}

@media (min-width: 1400px) {
    .free-home-evaluation.step_1 {
        background-size:
            auto 250px,
            cover;
        background-repeat:
            repeat-x,
            no-repeat;
    }
    .free-home-evaluation.step_1.dream_home {
        background-size:
            auto auto,
            100% auto,
            cover;
    }
}
@media (max-width: 720px) {
    .free-home-evaluation.step_1.dream_home {
        background-size:
            auto 180px,
            auto 90px,
            cover;
    }
}
@media (max-width: 568px) {
    .free-home-evaluation.step_1 .webform-component-markup:nth-of-type(1) {
        padding-top: calc(50vh - 150px);
    }
    .free-home-evaluation.step_1:not(.dream_home) {
        background-size:
            auto 120px,
            cover;
    }
    .free-home-evaluation.step_1.dream_home {
        background-size:
            auto 150px,
            auto 80px,
            cover;
    }
}

@media (min-height: 600px) {
    .free-home-evaluation.step_1 .webform-component-markup:nth-of-type(1) {
        padding-top: 14%;
    }
}
@media (min-height: 800px) {
    .free-home-evaluation.step_1 .webform-component-markup:nth-of-type(1) {
        padding-top: 18%;
    }
}