body {
    display: grid;
    grid-template-areas: "content";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
}

button {
    text-transform: uppercase;
}

#companyLogo {
    width: 100%;
}

#brand {
    text-decoration: none;
    color: #333333;
}

#content {
    grid-area: content;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

    #content .card {
        width: 450px;
    }

h1, h2, h3, h4, h5 {
    text-transform: uppercase;
}

.validation-summary-errors {
    background-color: white;
    color: red;
    margin-top: 1rem;
    padding: 1rem;
}

.card, .card-header, .card-body {
    background-color: #fff;
}

.card-header {
    border: none;
}

.card-body {
    padding: 1rem 3rem;
}

.line {
    margin: 2.5rem 0 2rem 0;
    line-height: .7;
    text-align: center;
}

    .line span {
        display: inline-block;
        position: relative;
    }

        .line span:before,
        .line span:after {
            content: "";
            position: absolute;
            height: 5px;
            border-bottom: 1px solid black;
            top: 0;
            width: 5rem;
        }

        .line span:before {
            right: 100%;
            margin-right: 15px;
        }

        .line span:after {
            left: 100%;
            margin-left: 15px;
        }

/* Portrait and Landscape */
@media only screen and (min-device-width: 300px) and (max-device-width: 700px) {
    #brand {
        width: 150px;
        text-decoration: none;
        color: #333333;
    }

    #content {
        justify-content: start;
        padding: 0;
        background-image: none !important;
    }

        #content .card {
            width: 100vw;
            height: 100vh;
        }

    .card-body {
        padding: 1rem;
    }
}