body {
  font-family: $font-sans;
  background-color: $white-color;
}

.teaser {
  &:not(:first-of-type) {
    margin: ($spacing-unit / 2) 0;
  }
  background-color: $white-color;
  @at-root {
    .teaser__image {
      display: inline-block;
      @include breakpoint(tablet) {
        max-width: 200px;
      }
    }
    .teaser__text {
      display: inline-block;
      vertical-align: middle;
      padding: ($spacing-unit / 2);
    }
  }
}
.teaser--with-image .teaser__text {
  @include breakpoint(tablet) {
    max-width: 60%;
  }
  @include breakpoint(desktop) {
    max-width: 70%;
  }
}

.header__title {
  background-color: $white-color;
}

.site-footer {
  background: $grey-color-light;
  padding: $spacing-unit;
  color: black;
  .footer-col {
    color: black;
  }
  h2 {
    font-family: 'Sintony', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.3em;
  }
}

.header__navigation {

  margin-top: $spacing-unit / 4;
  overflow: hidden;
  ul {
   
    overflow: hidden;
    background: $grey-color-light;
    margin: 0;
    padding: $spacing-unit /2 0;
  }
  text-align: center;
  .navigation__item {
    display: inline-block;
    padding: 0 10px;

    font-size: 1.0em;
  }
  a, a:visited, a:hover {
    text-decoration: none;
    color: $text-color;
  }
  a:hover{
    color: $purple-color;
  }
}
.subheader__navigation {
   margin-top: 7.5px;
  overflow: hidden;
  text-align: center; 
    margin-bottom: 0 !important;
    }

  .subheader__navigation .navigation__item {
    display: inline-block;
    padding: 0 10px;
    font-size: 1.0em; }
  .subheader__navigation a, .header__navigation a:visited, .header__navigation a:hover {
    text-decoration: none;
    color: #111; }
  .subheader__navigation a:hover {
    color: #620062; }

.navigation__item.active {
  font-weight: bold;
}

.navigation__item.active a {
  color: $purple-color;
}
.header__title {
    padding-top: $spacing-unit/4;
    padding-bottom: $spacing-unit/4;
    background-color: $purple-color;
    h1 {
        text-align: center;
        //border-bottom: 1px solid;
        //border-top: 1px solid;
    }
}

.site-title {
    font-family: 'Sintony', sans-serif;
    letter-spacing: 1px;
    font-size: 1.0em;
}

.header__logo {
  display: block;
  margin: auto;
}

.post-content {
  font-family: $font-serif;
}

.post__ingress {
  font-size: 1.15em;
  font-family: $font-serif;
  @include breakpoint(desktop) {
    width: 95%;
  }
}

.post__category {
  color: $brand-color;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 5px;
}

.post {
  overflow: auto;
  padding: $spacing-unit / 2;
  @include breakpoint(mobile) {
    padding: $spacing-unit;
  }
  background-color: $white-color;
}

h2 a,
h3 a,
h4 a {
  &, &:visited {
    color: $text-color;
  }
}

.section-main {
    @include breakpoint(mobile) {
    float: left;
    width: 68%;
    &.article-list {
      width: 73%;
    }
  }
}

.sidebar {
  @include breakpoint(mobile) {
    float: right;
    width: 25%;
  }
}

.teaser--magazine {
  margin: 0;
  padding: 10px 20px;
}

.magazine__number {
  text-align: center;
  margin: 5px;
}

.fourfold {
  @extend %clearfix;
}

.fourfold__row {
  @extend %clearfix;
  @include breakpoint(0, tablet) {
    border-top: 1px solid #ddd;
  }
}

.fourfold__cell {
    width: 33%;
    float: left;
    min-height: 100px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    word-wrap: break-word;
    @include breakpoint(0, tablet) {
      border: none;
    }
}

.author {
  margin: $spacing-unit;
  @at-root {
    .author__image {
      object-fit: cover;
      width: 150px;
      height: 150px;
      padding: 10px;
      display: inline-block;
    }
    .author__text {
      display: inline-block;
    }
    .author__job {
      font-weight: bold;
    }
  }
}
.authors {
  width: 50%;
  float: left;
}


.page--magazine {
  .teaser--magazine {
    @include breakpoint(mobile) {
      float: left;
      width: 30%;
    }
  }
}
.article-list--magazine {
  @include breakpoint(mobile) {
    width: 68%;
    float: right;
    .teaser:first-of-type {
      margin-top: 0;
    }
  }
  .teaser {
    margin-top: $spacing-unit / 2;
  }
  h2 {
    margin: 0;
  }
  .post-link {
    font-size: 0.8em;
  }
}

.sidebar__related {
  padding-top: $spacing-unit;
  margin-top: $spacing-unit;
  border-top: 1px solid $border-color;
}

.teaser--heading {
  padding: $spacing-unit / 2 $spacing-unit / 4 0;
}