.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 '}