// ----------------------------------------------------------------------------
// Muellbox
// ----------------------------------------------------------------------------
.muellbox {
  text-align: center;
  vert-align: top;
  margin:0;
  padding-bottom: 1em;
  width:49%;
  max-width:240px;
  display:inline-block;
  position: relative;
  background-color: $color-light-bg;

  figcaption {
    color: $color-font-primary;
    margin:0.6em 0;

    strong {
      font-weight: $font-bold;
      font-size:1.8em;
      display:block;
    }

    span {
      color:$color-font-secondary;
      font-size:1.4em;
    }
  }
  @include respond-to('small') {
    margin-right:1em;
  }
  @include respond-to('medium') {
    width:20%;

    margin-right: -3px;

    &.active::after {
      content: "";
      display: block;
      width:20px;
      height:20px;
      background-color: $color-light-bg;
      color:$color-font-primary;
      position: absolute;
      left:50%;
      bottom:-1em;
      transform: translateX(-50%) rotateZ(45deg);

      z-index: 250;
    }
  }
  @include respond-to('large') {
    margin-right: -3px;
  }
}
// ----------------------------------------------------------------------------
// Muellbox Collection
// ----------------------------------------------------------------------------
.muellbox-collection {
  @include sectionize($color-light-bg);

  position: relative;
  z-index: 100;

  .wrapper {
    padding: 1em 0 0 0;
    text-align: center;
    overflow: visible;

    h2 {
      text-align: left;
      padding-left:15px;
      margin:0;
      padding-bottom:0.3em;
      padding-top:.8em;

      @include respond-to('large') {
        padding-left:0;
      }
    }
  }

  &:after {
    clear:both;
  }
}
.MuellboxHolderPage {
  .muellbox-collection,
  .muellbox,
  .muellbox.active::after {
    background-color: $color-bg-no-color;
  }
}