html {
    font-family: 'Open Sans', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
      box-sizing: border-box;
  }

  body {

      background: #fff;
      margin-left: 0;
      margin-right: 0;
      color: #333;
      font-size: 15px;
      font-weight:300;
  }

  p {
      margin: 5px 0;
      line-height: 25px;
  }

  a {
      text-decoration: none;
      color: #888;
  }

  h1 {
      font-size: 1.25rem;
  }

  b, strong {font-weight:400;}



  /* ========================================== */
  /* HEADER UND NAVIGATION */

  header {
      position: relative;
      margin: 20px auto 30px;
      width: auto;
      max-width: 800px;
      height: auto;
      text-align: center;
  }

  nav {
      z-index: 9999;
      background-color: #fff;
      margin-top: 45px;
  }

  nav ul {
      padding: 0;
      list-style: none;
  }

  nav ul li {
      display: inline-block;
      padding: 3px 20px;
      color: #888;           
  }

  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    nav ul li {
        display: block;
    }
    nav ul li a {
        font-size: 1.5rem; 
    }
  }

  nav ul li a {
      transition: color .5s ease;
      font-weight: 400;           
  }

  nav ul li a:hover,
  nav ul li a:active {
      color: #333;
  }


  /* ========================================== */
  /* BLOECKE / BEREICHE DER SEITE */

  section {
      position: relative;
      margin: 0 auto;
      text-align: center;
  }

  section:nth-child(even) {
      background-color: rgb(252,252,252);
  }

  figure {
      margin: 0;
  }

  figure img {
      max-width: 100%;
  }

  .multicolumn {
      -webkit-perspective:1;

      /* Anzahl Spalten */
      -webkit-column-count: 2; /* Ch, Saf, And, BB  */
      -moz-column-count: 2; /* Fx */
      column-count: 2; /* IE 10, Op 11.1+ */

      /* Abstand Spalten */
      webkit-column-gap: 4em;
      -moz-column-gap: 4em;
      column-gap: 4em;
  }
  .multicolumn p {
      line-height: 1rem;
  }

  @media only screen and (max-width: 768px) {
    .multicolumn {
        /* Anzahl Spalten */
        -webkit-column-count: 1; /* Ch, Saf, And, BB  */
        -moz-column-count: 1; /* Fx */
        column-count: 1; /* IE 10, Op 11.1+ */

    }  
  }
  @media only screen and (max-width: 768px) {
    .multicolumn p {
        display: block;
    }
  }

  .one-column {
      margin-bottom: 60px;
  }

  .one-column p {
      margin-bottom: 1.5rem;
  }


  article {
      overflow: hidden;
      width: 50%;
      display: table-cell;
      padding-right: 50px;
  }

  article h4  {
      margin: 10px 0;
  }


  figcaption {
      display: inline-block;
      line-height: 25px;
      margin-top: 20px;
      max-width: 75%;
  }

  figcaption span {
      display: block;
      margin-bottom: 10px;
      font-weight: 400;
 }

  .callout {
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      padding: 0 10px 30px;
      width: auto;
      max-width: 800px;
  }

  .callout a {
      text-decoration: underline;
  }

  .callout a:hover {
      color: #333;
  }

  .callout > h3 {
      font-weight: 300;
      font-size: 30px;
      text-align: center;
  }

  .callout > ul {
      padding-left: 1rem;
  }
  .callout > ul li {
      margin: 5px 0;
  }

   dl {
    border: 0px solid; 
   }

  .definition-list dt {
      margin-bottom: 0.21rem;
      font-weight:400;
  }

  .definition-list dd {
      margin: 0 0 1.5rem 0;
  }

  .definition-list dd img {
      width: 50%;
  }

  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .definition-list dd img {
        width: 100%;
    }
  }

  .align-rigt {
    text-align: right
  }

  .secondary-heading {
      font-weight: normal;
      font-size: 15px;
      color: #D98201;
  }

  .tertiary-heading {
      font-weight: normal;
      font-size: 15px;
      color: #D98201;
      margin-bottom: 0;
  }

  .tertiary-heading span {
      color: #333;
  }

  .competency-heading {
      margin-top: 60px;
      font-weight: 400;
  }

  /* Logo oben */
  .cliped-image {
      /*
      border-radius: 100%;
       ff */

      /* Clip-Path als Alternative
      -webkit-clip-path: circle(50% at 50% 50%);
      clip-path: circle(50% at 50% 50%);
      */
  }
  .cached-image {
    display: none;
    }

  .zitat-image {
      display: inline-block;
      padding-right: 2px;
      width: 45px;
      height: 45px;
      vertical-align: top;
      line-height: 50px;
      text-align: center;
      background: #12a8b5;
  }

  .zitat-image + p {
      display: inline-block;
      margin: -5px 0 0 20px;
      width: 90%;
  }

  .section-arrow {
      position: relative;
      top: -20px;
      display: inline-block;
      width: 40px;
      height: 40px;
      background: rgb(200,237,245);
      border-radius: 50%;
      line-height: 40px !important;
      text-align: center;
      color: #fff;
  }

  .back-to-top-button {
      position: relative;
      top: -40px;
      display: inline-block;
      width: 70px;
      height: 70px;
      background: rgb(217,130,1);
      border-radius: 50%;
      line-height: 70px !important;
      text-align: center;
      color: #fff;
  }


  /* ========================================== */
  /* FOOTER */
  footer {
      clear: both;
      position: relative;
      margin: 60px auto 0;
      width: auto;
      height: 100px;
      text-align: center;
      background: #333;
      color: #7d7d7d;
  }

  footer a:hover {
      color: ;
      text-decoration: underline;
  }

  footer .footer-copyright {
      margin: -40px auto 0; /* -40px --> gleicher Wert wie bei .back-to-top-button */
      max-width: 800px;
      text-align: left;
      padding-left: 10px;
  }

  footer i.rotate {
      /* Pfeil nach oben - rotieren */
      -webkit-transform: rotate(180deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: rotate(180deg); /* IE 9 */
      transform: rotate(180deg); /* IE 10, Fx 16+, Op 12.1+ */
  }


  /* ========================================== */
  /* HELFER-KLASSEN */

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

  .text-left {
      text-align: left !important;
  }

  .clear {
      clear: both;
  }

  .mt30 {
      margin-top: 35px !important;
  }

  .motto {
      margin-bottom: 50px;
  }

  .hr-small {
      margin: -20px auto 30px;
      width: 40px;
      border: solid 1px rgb(13,0,206);
  }

  .font-licence {
      margin-top: 10px;
      font-size: 11px;
  }

  /* ========================================== */
  /* ICONS */
  .icons-social-media {
      list-style: none;
      padding-left: 0;
  }

  .icons-social-media > li {
      display: inline-block;
      padding: 0 7px 0 7px;
      color: #888;
  }

  .icons-social-media > li i {
      font-size: 20px;
  }

  .icons-social-media > li i:hover {
      color: #333;
      transition: color .5s ease;
  }

  .icon-location {
      color: rgb(13,0,206);
      font-size: 25px !important;
  }

  .icon-mail {
      color: rgb(13,0,206);
      font-size: 20px !important;
  }


  /* ========================================== */
  /* MEDIA QUERIES FUER RESPONSIVE LAYOUT */

  @media (max-width: 726px) {
      .motto  {
          text-align: center;
      }
      .motto  p {
          margin-top: 10px;
      }
  }

  @media (max-width: 641px) {
      article {
          display: block;
          width: 100%;
      }
      figure {
          margin: 30px auto 0;
      }
      figcaption {
          display: block;
          width: 55%;
          margin: 0 auto;
      }

      .multicolumn {
          webkit-column-gap: 2em;
          -moz-column-gap: 2em;
          column-gap: 2em;
      }
  }