/*https://codepen.io/frxnz/pen/krMKpj*/
/* Some vars */


@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Sanchez:400italic,400);
@import url(https://fonts.googleapis.com/css?family=Roboto:100);

.brooks {
    position: relative;
    font-family: "Sanchez", serif;
    font-size: 2.4em;
    line-height: 1.5em;
    font-style: italic;
    padding: 25px;
    margin: 25px;
}

    .brooks:before {
        content: "\201C";
        position: absolute;
        top: 0.25em;
        left: -0.15em;
        color: #e7e6e4;
        font-size: 6em;
        z-index: -1;
    }

.ludwig {
    position: relative;
    padding-left: 1em;
    border-left: 0.2em solid #4d91b3;
    font-family: "Roboto", serif;
    font-size: 2.4em;
    line-height: 1.5em;
    font-weight: 100;
    padding: 25px;
    margin: 25px;
}

    .ludwig:before, .ludwig:after {
        content: "\201C";
        font-family: "Sanchez";
        color: #4d91b3;
    }

    .ludwig:after {
        content: "\201D";
    }

.groucho {
    position: relative;
    font-family: "Sanchez", serif;
    font-size: 2em;
    line-height: 1.5em;
    padding: 25px;
    margin: 25px;
    font-style: italic;
}

    .groucho footer {
        font-family: "Noto Sans", sans-serif;
        font-size: 0.4em;
        font-weight: 700;
        color: #d3d3cf;
        float: right;
    }

        .groucho footer:before {
            content: "\2015";
        }

    .groucho:after {
        content: "\201D";
        position: absolute;
        top: 0.28em;
        right: 0;
        font-size: 5.5em;
        font-style: italic;
        color: #e7e6e4;
        z-index: 0;
    }
    

.groucho-dark {
    position: relative;
    font-family: "Sanchez", serif;
    font-size: 2em;
    line-height: 1.5em;
    padding: 25px;
    margin: 25px;
}

    .groucho-dark footer {
        font-family: "Noto Sans", sans-serif;
        font-size: 0.4em;
        font-weight: 700;
        color: #383838;
        float: right;
    }

        .groucho-dark footer:before {
            content: "\2015";
        }

    .groucho-dark:after {
        content: "\201D";
        position: absolute;
        top: 0.28em;
        right: 0;
        font-size: 5.5em;
        font-style: italic;
        color: #383838;
        z-index: 0;
    }