.component {
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    width: 750px;
    margin: 0 auto;
    padding: 3rem;
}

    .component blockquote.quote {
        position: relative;
        text-align: center;
        padding: 1rem 1.2rem;
        width: 80%; /* create space for the quotes */
        color: #484748;
        margin: 1rem auto 2rem;
        font-size:1.3rem;
    }

    .component blockquote.EN {
        background: linear-gradient(to right, #039be5 4px, transparent 4px) 0 100%, linear-gradient(to left, #039be5 4px, transparent 4px) 100% 0, linear-gradient(to bottom, #039be5 4px, transparent 4px) 100% 0, linear-gradient(to top, #039be5 4px, transparent 4px) 0 100%;
        background-repeat: no-repeat;
        background-size: 20px 20px;
    }

    .component blockquote.DE {
        background: linear-gradient(to right, #039be5 4px, transparent 4px) 0% 0%, linear-gradient(to bottom, #039be5 4px, transparent 4px) 0% 0%, linear-gradient(to left, #039be5 4px, transparent 4px) 100% 100%, linear-gradient(to top, #039be5 4px, transparent 4px) 100% 100%;
        background-repeat: no-repeat;
        background-size: 20px 20px;
    }


    /* -- create the quotation marks -- */
    .component blockquote.quote:before,
    .component blockquote.quote:after {
        font-family: FontAwesome;
        position: absolute;
        color: #039be5;
        font-size: 34px;
    }

    .component blockquote.EN:before {
        content: "\f10d";
        top: -12px;
        margin-right: -20px;
        right: 100%;
    }

    .component blockquote.EN:after {
        content: "\f10e";
        margin-left: -20px;
        left: 100%;
        top: auto;
        bottom: -20px;
    }

    .component blockquote.DE:before {
        content: "\f10e";
        margin-right: -20px;
        bottom: -20px;
        right: 100%;
    }

    .component blockquote.DE:after {
        content: "\f10d";
        margin-left: -20px;
        left: 100%;
        top: -20px;
        bottom: auto;
    }

.zitat1 {
    position: relative;
    font-family: 'Verdana', serif;
    font-size: 2.4em;
    line-height: 1.5em;
}

    .zitat1 cite {
        font-family: 'Verdana', sans-serif;
        font-size: 0.6em;
        font-weight: 700;
        color: #bdbec0;
        float: right;
    }

        .zitat1 cite:before {
            content: '\2015'' ';
        }

    .zitat1:after {
        content: '\201d';
        position: absolute;
        top: 0.28em;
        right: 0px;
        font-size: 6em;
        font-style: italic;
        color: #bdbec0;
        z-index: -1;
    }

.sidekick {
    position: relative;
    /*color: #039be5;*/
    color:navy;
    padding-left: 1em;
    border-left: 0.2em solid navy;
    font-family: 'Roboto', serif;
    font-size: 2.4em;
    line-height: 1.5em;
    font-weight: 100;
}

    .sidekick:before, .sidekick:after {
        font-family: Calibri;
        /*color: #039be5;*/
        color: navy;
        font-size: 34px;
    }

    .sidekick:before {
        content: '\201e'
    }

    .sidekick:after {
        content: '\201c';
    }

    .sidekick cite {
        font-size: 50%;
        text-align: center;
        top: 50%
    }

        .sidekick cite:before {
            content: ' \2015 '
        }