@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);



/*.container {
    max-width: 800px;
    margin: 10px auto;
}*/

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

.quote-card {
    max-width: 97%;
    margin: 10px auto;
    background: #f3f4f5;
    color: #222222;
    box-shadow: none;
    padding: 2rem;
    padding-left: 60px;
    box-sizing: border-box;
    border-radius: .5rem;
    /* box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12); */
    position: relative;
    overflow: hidden;
    min-height: 120px;
    /* width: 85%; 
    margin-bottom: 2rem;
        */
}

    .quote-card p {
        font-size: 1.0rem;
        line-height: 1.5;
        margin: 7px;
        max-width: 87%;
        font-style: italic;
    }

    .quote-card cite {
        font-size: 16px;
        margin-top: 10px;
        display: block;
        font-weight: 200;
        opacity: 0.8;
    }

    .quote-card:before {
        font-family: Georgia, serif;
        content: "“";
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 5em;
        color: #dee2e6;
        font-weight: normal;
    }

    .quote-card:after {
        font-family: Georgia, serif;
        content: "”";
        position: absolute;
        bottom: -40px;
        line-height: 80px;
        right: 12px;
        font-size: 10em;
        color: #dee2e6;
        font-weight: normal;
    }

@media (max-width: 640px) {
    .quote-card:after {
        font-size: 7em;
        right: 15px;
    }
}


.quote-card.gray-card {
    background: #e9ecef;
    color: #222222;
    box-shadow: none;
}

    .quote-card.gray-card:before, .quote-card.gray-card:after {
        color: #5FAAFF;
    }