.component{
  margin:0 auto;
  padding: 3rem;
}

.component blockquote.quote {
    position: relative; 
    text-align: left;
    
    width: 100%;  /* create space for the quotes */
    color: #484748;
    margin: 1rem auto 1rem;
}

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

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

.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;
  padding-left: 1em;
  border-left: 0.2em solid #039be5;
  font-family: 'Roboto', serif;
  font-size: 2.4em;
  line-height: 1.5em;
  font-weight: 100;
}
.sidekick:before, .sidekick:after {
  font-family: Calibri;
    color: #039be5;
    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 '}