.contacts {
  @include make-row();
  justify-content: space-evenly;
}


.contact-img {
  flex: 0 1 calc(40% - 1em);
  margin-bottom: 1em;
  height: 100px;
  display: flex;

  justify-content: center;
  align-items: flex-end;
  text-align: center;
  @include media-breakpoint-up(md) {
    margin-right: 1em;
    margin-bottom: 1em;
    align-items: flex-start;
    text-align: left;
  }
}


.contact-body {
  min-width: 5em;
  flex: 1 1 60%;
  text-align: center;
  @include media-breakpoint-up(md) {
    text-align: left;
  }
}


.contact-map {
  position: relative;

  .gmap-map {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}


.contact-img {

  img {
    max-width: 100%;
    height: auto
  }
}


.contact-position, .contact-company {
  font-size: $font-size-sm;
  line-height: $line-height-sm;
}


.contact-name, .contact-address [itemprop="name"] {
  font-weight: $headings-font-weight;
  margin: .125em 0 .5em;
  display: inline-block;
}


.contact-channels {
  .icon {
    margin-right: .25em;
  }

  a {
    color: inherit
  }

}


.contact-email-tooltip {
  white-space: nowrap;
}


.contact-card {
  @include make-col-ready();
  display: flex;
  flex-direction: column;

  @include media-breakpoint-up(md) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
  }
}


.contact-card--listview {
  flex: 0 1 50%;
  margin-bottom: $spacer;
  @include media-breakpoint-up(lg) {
    flex-grow: 1;
    flex-basis: 25%;
  }

  @include media-breakpoint-up(xxl) {
    flex-basis: 20%;
  }
}


.contact-card--fullview {

}


.contact-card--mapview {
  flex-direction: row;
    flex-wrap: nowrap;


  .contact-map {
    flex: 1 0 calc(50% - #{$grid-gutter-width} / 4);
    margin-right: $grid-gutter-width/2;

  }

  .contact-body {
    text-align: left;
    flex: 1 1 calc(50% - #{$grid-gutter-width} / 4);
  }
}


.contact-card--stoerung {
  flex-direction: column;
  flex-wrap: nowrap;
  text-align: center;

  .contact-img {
    margin-right: inherit;
    margin-bottom: inherit;
    @include media-breakpoint-up(md) {
      margin-bottom: .5em;
    }

    img {
      max-height: 100px;
      @include media-breakpoint-up(md) {
        max-height: 4em;
      }
    }
  }

  .contact-body {
    flex: 1 1 auto;
    color: $danger;
    text-align: center;
  }

  .contact-phone, .contact-name {
    margin: inherit !important;
    color: inherit;
    font-weight: 600;
  }

}


.f3-widget-paginator {
  width: 100%;

  @extend .pagination;
}
