* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
    height: 100%;
    font-family: "Source Sans Pro", "Segoe UI", Arial, Tahoma;
    font-size: 100%;
    margin: 0;
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    line-height: normal;
    overflow-x: hidden;
}

body {
    position: relative;
    background: #f4f4f4;
}

    body.scrollable {
        height: auto;
    }

.text-center {
    text-align: center;
}

.pull-right {
    float: right;
}

a {
    color: #5e0d0d;
}

    a:hover,
    a:active {
        color: #7f1313;
    }

input[type=text],
input[type=email],
input[type=tel],
select {
    width: 100%;
    font-size: 16px;
    height: auto;
    padding: 7px 8px 5px 8px;
    border: 1px solid #787878;
    background: #fff;
}

    input[type=text]:active,
    input[type=email]:active,
    input[type=tel]:active,
    select:active,
    input[type=text]:focus,
    input[type=email]:focus,
    input[type=tel]:focus,
    select:focus {
        border-color: #1a1a1a;
        outline: none;
    }

        input[type=text]:active + label,
        input[type=email]:active + label,
        input[type=tel]:active + label,
        select:active + label,
        input[type=text]:focus + label,
        input[type=email]:focus + label,
        input[type=tel]:focus + label,
        select:focus + label {
            color: #1a1a1a;
        }

    input:disabled,
    select:disabled {
        opacity: 0.5;
    }

label {
    font-size: 13px;
    color: #787878;
    font-weight: 600;
}

button,
input[type="button"],
input[type="submit"] {
    height: 32px;
    border: none;
    background-color: #5e0d06;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a2726', endColorstr='#5e0d06', GradientType=0 ); /* IE6-9 */
    background-image: -moz-linear-gradient(top, #7a2726 0%, #5e0d06 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7a2726), color-stop(100%, #5e0d06)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #7a2726 0%, #5e0d06 100%); /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, #7a2726 0%, #5e0d06 100%); /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #7a2726 0%, #5e0d06 100%); /* W3C */
    color: #fff;
    padding: 2px 10px;
    font-weight: 600;
    font-size: 14px;
    -moz-box-shadow: 0 1px 0 0 rgba(0,0,0,1);
    -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,1);
    box-shadow: 0 1px 0 0 rgba(0,0,0,1);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0px 1px 1px #000;
    cursor: pointer;
    line-height: 1;
}

    button.secondary,
    input[type="button"].secondary,
    input[type="submit"].secondary {
        background-color: #e5e5e5;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#b3b3b3', GradientType=0 ); /* IE6-9 */
        background-image: -moz-linear-gradient(top, #e5e5e5 0%, #b3b3b3 100%); /* FF3.6+ */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(100%, #b3b3b3)); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #b3b3b3 100%); /* Chrome10+,Safari5.1+ */
        background-image: -o-linear-gradient(top, #e5e5e5 0%, #b3b3b3 100%); /* Opera 11.10+ */
        background-image: linear-gradient(to bottom, #e5e5e5 0%, #b3b3b3 100%); /* W3C */
        color: #323232;
        text-shadow: 0px 1px #fff;
        border: 1px solid #a6a8ab;
    }

    button.lg,
    input[type="button"].lg,
    input[type="submit"].lg {
        font-size: 18px;
        height: 36px;
        padding: 9px 20px;
    }

    button.delete {
        background: transparent;
        border: 1px solid #AA180B;
        box-shadow: none;
        filter: transparent;
    }

    button.round {
        border-radius: 50%;
        width: 32px;
    }

    button:disabled,
    input[type="button"]:disabled,
    input[type="submit"]:disabled {
        background: #d2d2d2;
        color: #787878;
        box-shadow: none;
        text-shadow: none;
        filter: none;
    }

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.input-wrapper {
    position: relative;
}

    .input-wrapper + .input-wrapper {
        margin-top: 14px;
    }

    .input-wrapper.with-label input,
    .input-wrapper.with-label select {
        margin-top: 17px;
    }

    .input-wrapper.with-label label {
        position: absolute;
        top: 0;
        left: 0;
    }

    .input-wrapper .example {
        font-size: 13px;
        color: #a8a8a8;
        font-style: italic;
        margin-top: 1px;
    }

    .input-wrapper.invalid-input input {
        border-color: #7a2726;
    }

    .input-wrapper.invalid-input label {
        color: #7a2726;
    }

    .input-wrapper.invalid-input .example {
        display: none;
    }

    .input-wrapper .validation-message {
        top: 100%;
        font-size: 13px;
        background: #7a2726;
        padding: 0 4px;
        color: #fff;
        display: block;
    }

.view-container {
    display: none;
    position: relative;
    z-index: 999;
    background: #f4f4f4;
}

    .view-container.with-map {
        background: none;
    }

    .view-container.centered {
        width: 960px;
        margin: 0 auto;
    }

    .view-container .inner {
        padding: 20px;
        height: 100%;
        overflow: auto;
    }

    .view-container.with-nav .inner {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .view-container .inner > h3 {
        font-weight: 600;
        margin-bottom: 0;
    }

        .view-container .inner > h3.first {
            margin-top: 0;
        }

    .view-container .text-instructions {
        color: #787878;
        font-size: 14px;
        margin-bottom: 20px;
    }

        .view-container .text-instructions .highlight {
            font-weight: bold;
        }

    .view-container .btm-actions {
        margin-top: 30px;
    }

        .view-container .btm-actions button.lg {
            min-width: 100px;
        }

        .view-container .btm-actions .go-home {
            margin-top: 20px;
            display: block;
            font-size: 13px;
        }

.content-area {
    min-width: unset;
    position: relative;
    padding: 55px 0 0 0;
    font-size: 0;
    white-space: nowrap;
    max-width: 100%;
    min-height: 100%;
    height: 100%;
    z-index: 999;
}

    .content-area h3 {
        font-size: large;
    }

.view-area {
    height: 100%;
    width: 100%;
    position: relative;
}

.subview-area {
    display: none;
    width: 100%;
    position: relative;
}

.subview-area-visible {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
}

.content-area .view-container {
    width: 100%;
    height: 100%;
    font-size: initial;
    white-space: normal;
    vertical-align: top;
    z-index: 2;
    opacity: 1;
    transition: opacity 200ms linear;
    display: inline-block;
}

    .content-area .view-container.subview {
        z-index: 3;
    }

    .content-area .view-container.with-map {
        height: auto;
    }

.content-area.forward .view-container.showing {
    animation: showViewLeft 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.forward .view-container.hiding,
.content-area.forward .view-container.hiding-xs {
    animation: hideViewLeft 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.backward .view-container.showing {
    animation: showViewRight 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.backward .view-container.hiding,
.content-area.backward .view-container.hiding-xs {
    animation: hideViewRight 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.up .view-container.showing {
    animation: showViewUp 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.down .view-container.hiding,
.content-area.down .view-container.hiding-xs {
    animation: hideViewDown 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.forward .view-container.subview.showing,
.content-area.forward .view-container.subview.hiding,
.content-area.backward .view-container.subview.showing,
.content-area.backward .view-container.subview.hiding,
.content-area .view-container.subview.visible {
    top: -100%;
}

.content-area.with-subview .view-container:not(.subview) {
    opacity: 0;
}

.content-area .view-container.visible {
    display: inline-block;
}

.content-area .view-container.hidden,
.content-area .view-container.hidden-xs {
    display: none;
}

.content-area .view-container > .scroll-wrapper {
    height: 100%;
    padding-top: 60px;
    z-index: 1;
    overflow: auto;
}

.content-area .instructions {
    background: #27527F;
    padding: 20px;
    color: #fff;
}

    .content-area .instructions .step-info {
        color: #879fb7;
        font-size: 14px;
    }

.financing {
    text-align: center;
}

.financing-promo {
    width: 100%;
    padding: 20px;
}

    .financing-promo span {
        display: block;
        user-select: none;
    }

    .financing-promo .financing-promo-contents {
        background: white;
        border: 1px solid #d6d6d6;
        text-align: center;
        padding: 10px;
    }

        .financing-promo .financing-promo-contents span.title {
            color: black;
            font-weight: 800;
            font-size: 24px;
        }

        .financing-promo .financing-promo-contents span.desc {
            padding: 6px 0;
            font-size: 18px;
            color: #848484;
        }

        .financing-promo .financing-promo-contents span.action {
            padding: 7px 0;
            color: #427ab6;
            font-weight: 600;
            font-size: 16px;
        }

            .financing-promo .financing-promo-contents span.action span {
                display: inline-block;
            }

        .financing-promo .financing-promo-contents a span.action {
            color: white;
            background: #427ab6;
            border-radius: 15px;
            display: inline-block;
            padding: 7px 25px;
            font-weight: 500;
            margin-top: 15px;
        }

.blankcanvas {
    visibility: collapse
}

#content-area {
    overflow: hidden !important;
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation:landscape) {
    #content-area {
        overflow: auto !important;
    }
}

@media (min-width: 768px) {
    .view-container.with-map {
        background: #f4f4f4;
    }

    .content-area {
        padding-top: 66px;
    }

        .content-area.forward .view-container.showing {
            animation-name: showViewLeftSm;
        }

        .content-area.forward .view-container.hiding,
        .content-area.forward .view-container.hiding-xs {
            animation-name: hideViewLeftSm;
        }

        .content-area.backward .view-container.showing {
            animation-name: showViewRightSm;
        }

        .content-area.backward .view-container.hiding,
        .content-area.backward .view-container.hiding-xs {
            animation-name: hideViewRightSm;
        }

        .content-area .view-area {
            width: 400px;
        }

            .content-area .view-area.no-map {
                width: 100%;
            }

        .content-area .subview.over-map {
            position: absolute;
            left: 400px;
            right: 0;
            width: auto;
        }

        .content-area.forward .view-container.hiding-xs,
        .content-area.backward .view-container.hiding-xs,
        .content-area.down .view-container.hiding-xs {
            animation: none;
        }

        .content-area .view-container.hidden-xs,
        .content-area.with-subview .view-container.hiding-xs:not(.subview),
        .content-area.with-subview .view-container.hidden-xs:not(.subview) {
            opacity: 1;
            display: inline-block;
        }

    .blankcanvas{
        visibility: visible
    }
}