
.landing-top {
    height: 42vh;
    width: 100%;
    background: url(../images/cars.JPG);
    background-position: center;
    background-size: cover;
    -webkit-filter: brightness(.7);
    filter: brightness(.7);
}

.other-navbar {
    background: #fff;
}

#testimonials {
    font-family: 'Quicksand', sans-serif;
    padding: 50px 0;
}

.test-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.test-header {
    font-family: inherit;
    margin: 0 auto;
    text-align: center;
    margin-top: -12rem;
    color: #fff;
    font-size: 3.5rem;
}

.test-header1 {
    font-family: 'Fjalla One', sans-serif;
    margin: 0 auto;
    text-align: center;
    margin-top: -12rem;
    color: #fff;
    font-size: 3.5rem;
    margin-bottom: 7rem;
}

.test-desc {
    font-family: inherit;
    text-align: center;
    padding-bottom: 3rem;
    color: #000000b0;
}

.client-container {
    padding: 2rem 0;
}

.client-row-wrapper {
    display: flex;
    flex-direction: column;
}

.client-test-desc {
    margin: 0 auto;
    font-family: inherit;
    text-align: left;
    font-size: 1rem;
}

.client-italic {
    font-family: inherit;
    text-align: right;
    font-style: italic;
    font-size: 1rem;
}

.horizontal-line {
    width: 70%;
    margin: 1rem auto 2rem;
}





/* ----------------------- */
/* MEDIA QUERIES ARE FUN!! */
/* ----------------------- */

/* 1024px */
@media only screen and (max-width: 1024px){
    .landing-top {
        background-position-x: 45%;
        height: 30vh;
    }
}

/* 414px */
@media only screen and (max-width: 414px){
    .testimonials {
        padding: 30px 0;
    }
    .test-header {
        font-size: 1.75rem;
    }

    .test-header1 {
        font-size: 2rem;
        margin-top: -8rem;
        margin-bottom: 4rem;
    }
    
    .test-desc {
        padding-bottom: 2rem;
        font-size: 1rem;
    }

    .client-test-desc {
        font-size: .875rem;
    }

    .client-italic {
        font-size: .875rem;
    }

    .horizontal-line {
        margin: 1rem auto 2rem;
    }
}

@media only screen and (max-width: 375px){
    .test-header1 {
        margin-top: -7rem;
        margin-bottom: 3rem;
    }
}

@media only screen and (min-device-width: 320px)
                   and (max-device-width: 812px) 
                   and (orientation: landscape) {
                       .landing-top {
                           height: 100vh;
                       }

                       .test-header1 {
                           margin-top: -9rem;
                       }
                   }
