/* ==========================================================================
    RESETS
    ========================================================================== */
*:focus,
*:hover,
*:active,
.btn:focus,
.btn:hover,
.btn:active,
a:focus,
a:hover,
a:active {
    outline: none;
    outline: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/* ==========================================================================
    UTILS
    ========================================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.in-block { display: inline-block; }
.no-gutter-left,
.no-gutter {
    padding-left: 0 !important;
}
.no-gutter-right,
.no-gutter {
    padding-right: 0 !important;
}
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-15 { margin-bottom: 15px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-25 { margin-bottom: 25px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }
.margin-bottom-50 { margin-bottom: 50px !important; }
.margin-bottom-70 { margin-bottom: 70px !important; }
.margin-bottom-80 { margin-bottom: 80px !important; }
.margin-bottom-90 { margin-bottom: 90px !important; }
.margin-top-0 { margin-top: 0 !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-25 { margin-top: 25px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-top-50 { margin-top: 50px !important; }
.margin-top-70 { margin-top: 70px !important; }
.margin-top-80 { margin-top: 80px !important; }
.margin-top-90 { margin-top: 90px !important; }

/* ==========================================================================
    DEFAULTS
    ========================================================================== */
body { overflow-x: hidden; background: #F2F2F2; }
body,
a {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #575757;
}
a:hover {
    text-decoration: none;
    color: #29B362;
}
.funnel { background-color: #F2F2F2; }
.content { padding: 30px 30px 80px; }
h2 {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #575757;
    margin-bottom: 38px;
}

/* ==========================================================================
    SKINS
    ========================================================================== */
.skin-purple .header {
    background-color: #9626AB;
}
.skin-purple .phone {
    color: #000;
}
.skin-purple .step i {
    color: #6A1A78;
}
.skin-purple .step::before,
.skin-purple .step::after {
    border-color: #6A1A78;
}
.skin-purple .step.active i::after {
    background-color: #6A1A78;
}

/* ==========================================================================
    ICONS
    ========================================================================== */
.ico-commercial-painting {
    height: 52px;
    width: 62px;
    background: url(../img/ico-commercial-painting.png) no-repeat;
}
.ico-exterior-painting {
    height: 58px;
    width: 59px;
    background: url(../img/ico-exterior-painting.png) no-repeat;
}
.ico-interior-painting {
    height: 56px;
    width: 46px;
    background: url(../img/ico-interior-painting.png) no-repeat;
}
.ico-other-painting {
    height: 56px;
    width: 56px;
    background: url(../img/ico-other-painting.png) no-repeat;
}

/* ==========================================================================
    HEADER
    ========================================================================== */
.header {
    padding-top: 30px;
    padding-bottom: 32px;
    color: #fff;
}
.step span { margin-bottom: 8px; }
.step i {
    font-size: 12px;
    position: relative;
    z-index: 1;
}
.step::after,
.step::before {
    content: "";
    border-bottom: 2px solid transparent;
    position: absolute;
    top: 33px;
    width: 50%;
}
.step::after { right: 0; }
.step::before { left: 0; }
.step.active i {
    color: #fff;
    position: relative;
}
.step:first-child.active i::after,
.step:last-child.active i::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 3px;
    top: 4px;
    left: 4px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
.step-center-active::after,
.step.active::before {
    border-color: #fff !important;
    width: 50%;
}
.step.active::before { left: 0; }
.step-center-active::after { right: 0; }
.step:first-child.active::after {
    border-color: #fff;
    width: 50%;
    right: 0;
}
.step:first-child::before,
.step:last-child::after {
    display: none;
}

/* ==========================================================================
    STEP 1
    ========================================================================== */
.row-17-5 {
    margin-right: -17.5px;
    margin-left: -17.5px;
}
.category-find-box {
    float: none;
    margin: 0 auto;
}
.form-group-option {
    width: 25%;
    padding-right: 17.5px;
    padding-left: 17.5px;
    cursor: pointer;
}
.form-group-option.category-find-box {
    width: 50%;
}
.form-group-option .line-icon {
    height: 180px;
    width: 100%;
    padding-top: 25px;
    background-color: #fff;
    margin-bottom: 14px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.form-group-option .ico {
    height: 82px;
    width: 82px;
    background-color: #F5F5F5;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    margin-bottom: 5px;
    position: relative;
}
.form-group-option .ico img {
    max-width: 56px;
    max-height: 56px;
    position: absolute;
    margin: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.form-group-option .line-icon span {
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
    line-height: 18px;
    padding: 0 20px;
}
.form-group-option-active .line-icon,
.form-group-option:hover .line-icon {
    background-color: #29B362;
    color: #fff;
}
.form-group-option-active .ico,
.form-group-option:hover .ico {
    background-color: #2ECC71;
}
.label-radio {
    cursor: pointer;
    margin-bottom: 0;
}
.label-radio input {
    height: 14px;
    width: 14px;
    margin: 0;
}
.label-radio input[type="radio"]+span:before,
.label-radio input[type="radio"]:checked+span:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.label-radio input[type=radio]+span:after,
.label-radio input[type=radio]+span:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    height: 14px;
    width: 14px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.label-radio input[type=radio]+span:before {
    border: 2px solid #ddd;
    background-color: #F2F2F2;
}
.label-radio input[type="radio"]:checked+span:after {
    background-color: #fff;
    border-color: #29B362 !important;
    border-width: 4px !important;
}
.label-radio input[type="radio"]:checked+span:after {
    border: 2px solid #fff;
}
.show-more-links {
    float: right;
    margin-top: 10px;
    color: #20a6db;
}

/* SELECT 2 CUSTOM */
.select2-container .select2-selection--single {
    height: 40px;
}
.select2-container--default .select2-selection--single {
    border-color: #ddd;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 5px 20px 5px 15px;
    text-align: left;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

/* ==========================================================================
    STEP 2
    ========================================================================== */
.label-radio-border {
    width: 100%;
    padding: 13px 15px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.label-radio-border span { font-weight: 400; }
.label-radio-border-active { background-color: #29B362; }
.label-radio-border-active span { color: #fff; }
.label-radio-border input { margin-right: 15px; }
.label-radio-border input[type=radio]+span:after,
.label-radio-border input[type=radio]+span:before {
    top: 13px;
    left: 14px;
}
.label-radio-border input[type=radio]+span:before {
    background-color: #fff;
}
.label-radio-border input[type="radio"]:checked+span:after {
    border-color: #fff !important;
    background-color: #29B362 !important;
}
.question { margin-bottom: 20px; }
.question p { margin-bottom: 20px; font-size: 20px; }
.gutter-5 {
    padding-right: 5px;
    padding-left: 5px;
}
.row-5 {
    margin-right: -5px;
    margin-left: -5px;
}
.form-group { margin-bottom: 10px; }

/* ==========================================================================
    STEP 3
    ========================================================================== */
label { font-weight: 400; }
.form-control {
    background: #fff;
    border: 1px solid #D9D9D9;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(102,102,102,0.50);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(102,102,102,0.50);
    box-shadow: inset 0px 1px 3px 0px rgba(102,102,102,0.50);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 40px;
    padding: 10px 15px;
    color: #4A4A4A;
}
.form-control.error {
    border-color: #FF475C;
    background-color: #f3e3e5;
}
.form-control.valid {
    border-color: #29B362;
    background-color: #e0ece5;
}
.form-control.valid+label.error {
    display: block !important;
    height: 20px;
    width: 20px;
    background: url(../img/ico-valid.png) no-repeat;
    top: 10px;
    right: -30px;
}
label.error {
    height: 14px;
    width: 14px;
    position: absolute;
    background: url(../img/ico-invalid.png) no-repeat;
    top: 14px;
    right: -25px;
    text-indent: -9999em;
    margin: 0;
    z-index: 2;
}
label#phone-error { right: 16px; }
textarea.form-control {
    height: 82px;
    resize: none;
}
.gutter-32-5 {
    padding-right: 32.5px;
    padding-left: 32.5px;
}
.row-32-5 {
    margin-right: -32.5px;
    margin-left: -32.5px;
}
.col-image { margin-top: 20px; }
.btn-submit {
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    padding: 15px 42px 19px 43px;
    background-color: #29B362;
    border-color: #29B362;
    height: 55px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
.btn-submit:hover,
.btn-submit:focus {
    background-color: #229C54;
    border-color: #229C54;
    color: #fff;
}
.text-submit {
    font-size: 10px;
    line-height: 12px;
    color: #999;
    width: 84%;
    margin: 0px 0 0 20px;
}
.text-submit a {
    font-size: 10px;
    line-height: 12px;
    color: #999;
}
.text-submit a:hover {
    text-decoration: underline;
}
.wrap-ipad p.title-ipad {
    font-size: 14px;
    color: #000;
    text-align: center;
}
.wrap-ipad p.description-ipad {
    font-size: 12px;
    color: #000;
    text-align: center;
}
.wrap-ipad img {
    width: 80%;
    float: left;
    margin: 20px 10% 0;
}

/* ==========================================================================
    FOOTER
    ========================================================================== */
.footer {
    width: 100%;
    float: left;
    position: fixed;
    bottom: 0px;
    padding: 16px 30px 15px;
    background-color: #ddd;
}
.box-phone { padding-top: 7px; }
.box-phone .text { color: #666; }
.phone {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
}
.phone:hover,
.phone:focus {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    text-decoration: underline;
}

.box-guard img {
    height: 36px;
    float: left;
    margin: 8px 0px 0px 20px;
}

.btn-next {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
    background-color: #999999;
    border-color: #999999;
    padding: 18px 55px;
    height: 55px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

.btn-next:hover, .btn-next:focus, .btn-next:active, .btn-next:visited {
    color: #fff !important;
    background-color: #999999 !important;
    border-color: #999999 !important;
}

/* ==========================================================================
    THANK YOU PAGE
    ========================================================================== */
body.thank-you-page .header, body.thank-you-page .footer {
    display: none;
}
body.thank-you-page .content-thank-you {
    margin-bottom: 20px;
}
body.thank-you-page .thank-you-box .btn-thank-you {
    background: transparent;
}


/* ==========================================================================
    CUSTOM STYLE
========================================================================== */

/* COLOR DEFAULT */
body.color-btn-default .header { background-color: #AAA; }
body.color-btn-default .step i { color: #666; }
body.color-btn-default .step.active i { color: #fff; }
body.color-btn-default .step.active i::after { background-color: #666; }
body.color-btn-default .step::before,
body.color-btn-default .step::after { border-color: #666; }

/* COLOR PRIMARY */
body.color-btn-primary .header { background-color: #397bb2; }
body.color-btn-primary .step i { color: #1b517c; }
body.color-btn-primary .step.active i { color: #fff; }
body.color-btn-primary .step.active i::after { background-color: #1b517c; }
body.color-btn-primary .step::before,
body.color-btn-primary .step::after { border-color: #1b517c; }

/* COLOR INFO */
body.color-btn-info .header { background-color: #5BC0DE; }
body.color-btn-info .step i { color: #319ab7; }
body.color-btn-info .step.active i { color: #fff; }
body.color-btn-info .step.active i::after { background-color: #319ab7; }
body.color-btn-info .step::before,
body.color-btn-info .step::after { border-color: #319ab7; }

/* COLOR SUCCESS */
body.color-btn-success .header { background-color: #29B362; }
body.color-btn-success .step i { color: #1e8949; }
body.color-btn-success .step.active i { color: #fff; }
body.color-btn-success .step.active i::after { background-color: #1e8949; }
body.color-btn-success .step::before,
body.color-btn-success .step::after { border-color: #1e8949; }

/* COLOR WARNING */
body.color-btn-warning .header { background-color: #F49C20; }
body.color-btn-warning .step i { color: #c47d1b; }
body.color-btn-warning .step.active i { color: #fff; }
body.color-btn-warning .step.active i::after { background-color: #c47d1b; }
body.color-btn-warning .step::before,
body.color-btn-warning .step::after { border-color: #c47d1b; }

/* COLOR DANGER */
body.color-btn-danger .header { background-color: #C9302C; }
body.color-btn-danger .step i { color: #8e1212; }
body.color-btn-danger .step.active i { color: #fff; }
body.color-btn-danger .step.active i::after { background-color: #8e1212; }
body.color-btn-danger .step::before,
body.color-btn-danger .step::after { border-color: #8e1212; }

/* COLOR INVERSE */
body.color-btn-inverse .header { background-color: #333; }
body.color-btn-inverse .step i { color: #000; }
body.color-btn-inverse .step.active i { color: #fff; }
body.color-btn-inverse .step.active i::after { background-color: #000; }
body.color-btn-inverse .step::before,
body.color-btn-inverse .step::after { border-color: #000; }

/* COLOR MAROON */
body.color-btn-maroon .header { background-color: #7c1616; }
body.color-btn-maroon .step i { color: #420b0b; }
body.color-btn-maroon .step.active i { color: #fff; }
body.color-btn-maroon .step.active i::after { background-color: #420b0b; }
body.color-btn-maroon .step::before,
body.color-btn-maroon .step::after { border-color: #420b0b; }

/* COLOR AQUA */
body.color-btn-aqua .header { background-color: #D5ECED; color: #666; }
body.color-btn-aqua .step i { color: #6bcbce; }
body.color-btn-aqua .step.active i { color: #fff; }
body.color-btn-aqua .step.active i::after { background-color: #6bcbce; }
body.color-btn-aqua .step::before,
body.color-btn-aqua .step::after { border-color: #6bcbce; }

/* COLOR DARK ORANGE */
body.color-btn-dark-orange .header { background-color: #BB4924; }
body.color-btn-dark-orange .step i { color: #893921; }
body.color-btn-dark-orange .step.active i { color: #fff; }
body.color-btn-dark-orange .step.active i::after { background-color: #893921; }
body.color-btn-dark-orange .step::before,
body.color-btn-dark-orange .step::after { border-color: #893921; }

/* COLOR MANTA */
body.color-btn-manta .header { background-color: #214752; }
body.color-btn-manta .step i { color: #ff6b61; }
body.color-btn-manta .step.active i { color: #fff; }
body.color-btn-manta .step.active i::after { background-color: #ff6b61; }
body.color-btn-manta .step::before,
body.color-btn-manta .step::after { border-color: #ff6b61; }
body.color-btn-manta .form-group-option-active .line-icon, body.color-btn-manta .form-group-option:hover .line-icon { background-color: #d6e8eb; }
body.color-btn-manta .form-group-option-active .ico, body.color-btn-manta .form-group-option:hover .ico { background-color: #b5d6da; }
body.color-btn-manta .form-group-option-active .line-icon span, body.color-btn-manta .form-group-option:hover .line-icon span { color: #0f2e33; }
body.color-btn-manta .label-radio input[type="radio"]:checked+span:after { border-color: #214752 !important; }
body.color-btn-manta .label-radio-border-active { background-color: #d6e8eb; }
body.color-btn-manta .btn-submit { background: #214752; border-color: #214752; }