/**
 * @file
 * Style for the site-footer component.
 */
@media all and (min-width: 560px) {
  .site-footer .region {
    position: relative;
    float: left; /* LTR */
    width: 50%;
  }
  [dir="rtl"] .site-footer .region {
    float: right;
  }
}

@media all and (min-width: 560px) and (max-width: 850px) {
  .site-footer .region {
    box-sizing: border-box;
  }
  .site-footer .region:nth-child(2n+1) {
    padding-right: 10px; /* LTR */
  }
  [dir="rtl"] .site-footer .region:nth-child(2n+1) {
    padding-right: 0;
    padding-left: 10px;
  }
  .site-footer .region:nth-child(2n) {
    padding-left: 10px; /* LTR */
  }
  [dir="rtl"] .site-footer .region:nth-child(2n) {
    padding-right: 10px;
    padding-left: 0;
  }
  .region-footer-third {
    clear: both;
  }
}

@media all and (min-width: 851px) {
  .site-footer .region {
    width: 24%;
    padding: 0 0.65%;
  }
  .site-footer .region:first-child {
    padding-left: 0; /* LTR */
  }
  [dir="rtl"] .site-footer .region:first-child {
    padding-right: 0;
    padding-left: 10px;
  }
  .site-footer .region:last-child {
    padding-right: 0; /* LTR */
  }
  [dir="rtl"] .site-footer .region:last-child {
    padding-right: 10px;
    padding-left: 0;
  }
}

/* Der gesamte Footer soll einen schwarzen Hintergrund haben */
.site-footer {
  background: #000000;
  padding-left: 40px;
  padding-right: 40px;
}

/* Textfarbe der Überschriften soll weiß sein und einen Strich zur Abtrennung nach unten haben */
.site-footer h2 {
  color: #fff;
  padding-bottom: 1em;
  border-bottom: 2px solid #363636;
}

/* Textfarbe der Inhalte soll grau sein, auch die Links, denn die sind normalerweiße blau */
.site-footer .content,
.site-footer .content a {
  color: #7e8182;
}

/* Der Hover über einen Link soll weiß sein und sich langsam einfärben */
.site-footer .content a:hover,
.site-footer .content a:focus {
  color: #fffeff;
  padding-bottom: 0.25em;
  transition: color .3s ease;
}