.muellbox-detail {
  @include sectionize($color-dark-bg);
  position: relative;
  z-index: 50;
  overflow: hidden;

  .wrapper {
    padding:0 1.5em 2em 0;
  }
  
  h1 {
    margin-bottom: .25em;
    padding-left:15px;
    @include respond-to('large') {
      padding-left:0;
    }
  }
  
  .control {
    display:none;
    text-align:center;
    font-size:3em;
    
    @include respond-to('small') {
      display:block;
      float:left;
      width:5%;
      height:100%;
      padding:10% 0;

      &:hover .fa-chevron-left {
        animation: 1.5s ease 0s normal none infinite nudge-left;
      }
      &:hover .fa-chevron-right {
        animation: 1.5s ease 0s normal none infinite nudge-right;
      }

      @keyframes nudge-left {
        0% { transform: translateX(-6px); }
        50% { transform: translateX(6px); }
        100% { transform: translateX(-6px); }
      }
      @keyframes nudge-right {
        0% { transform: translateX(6px); }
        50% { transform: translateX(-6px); }
        100% { transform: translateX(6px); }
      }
    }
  }

  .group {
    float:left;
    width:100%;
    font-size:1.4em;
    padding:0 15px;

    @include respond-to('small') {
      float:left;
      width:45%;
      padding:0;
    }

    img {
      width: 45%;
      float:left;
      max-width: 180px;
    }
  }

  // ----------------------------------------------------------------------------
  // Description Container left Side
  // ----------------------------------------------------------------------------
  .description {
    overflow: hidden;
    width:100%;
    float:left;

    img {
      margin-right:1em;
      margin-bottom:.5em;
    }

    .short-description {
      padding-right:1em;
    }
    p:first-child {
      margin-top:0;
    }

    @include respond-to('small') {
      width:50%;
    }
  }

  // ----------------------------------------------------------------------------
  // Additional Info right Side
  // ----------------------------------------------------------------------------
  .additional-information {
    margin-top: 2em;
  
    h3 {
      margin-top: 0;
      line-height: 1em;
    }
    & > p {
      clear:both;
      margin:1em 0;
    }

    img {
      max-width:120px;
      width:30%;
      margin-bottom: 1em;
    }

    table {
      width:70%;
      float:left;
      font-size:1em;

      tr td:first-child {
        font-weight: $font-bold;
        text-align: right;
      }
    }

    @include respond-to('small') {
      width:40%;
      margin-top: 0;
    }
  }

  // ----------------------------------------------------------------------------
  // Loading
  // ----------------------------------------------------------------------------
  .loading-panel {
    display:none;

  }
  &.loading {

    .loading-panel {
      display:block;
      background-color: rgba(240, 240, 240, 0.8);
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      text-align: center;
      z-index: 100;

      .fa {

        font-size: 6em;
        color:$color-font-primary;
        position: relative;
        top: 40%;
        transform: translateY(-50%);
      }
    }
  }

}