#wrapper {

  /* ====================== */
  /*        Exposé          */
  /* ====================== */
  .estate-detail {
    font-family: $font1;
    font-size: inherit;

    .legende_eclass {
      background: $boxes-background;
    }

    .big-img {
      margin-right: 0;
    }

    .pic {
      margin: 0;
      float: none;
      display: table-cell;
    }

    .small-pics {
      margin: 0;
      display: block;
      width: 100vw;
      left: calc(100vw - 100vw - (100vw - 1080px + 30px) / 2);
      padding: 30px 0;
      background: $boxes-background;
      margin-top: -60px;

      .slick-arrow {
        position: absolute;
        top: 50%;
        background: rgba(255, 255, 255, 0.7);
        width: 40px;
        height: 40px;
        z-index: 1;
        border-radius: 5px;
        cursor: pointer;
        margin-top: -20px;
        border: none;
        padding: 0;

        i {
          color: rgba(60, 60, 60, 0.8);
          font-size: 2.5rem;
          font-weight: 700;
        }
      }

      .slick-prev {
        left: 50px;
      }

      .slick-next {
        right: 50px;
      }
    }

    .obj-header {
      margin-top: 40px;
    }

    .field.verwaltung_techn-objektnr_extern {
      color: $mateColor2;
      font-family: $font2;
      text-align: center;

      .label, div:last-child {
        color: inherit;
        font-size: 1.5rem;
        font-weight: 400;
        float: none;
        display: inline-block;
      }
    }

    &.extended {
      .content {
        float: left;
        margin: 50px 0;
      }

      .right {
        margin-top: 20px;

        .obj-details {
          h2 {
            background: $mateColor2;
            color: #fff;
            text-transform: none;
            font-weight: 400;
            box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
            -webkit-box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
            font-family: $font2;
            margin: -45px 0 20px;
            display: block;
            width: min-content;
            font-size: 1.5rem;
          }

          > div {
            border: none;
          }

          .inside {
            background: $boxes-background;
            padding: 30px;
            box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
            -webkit-box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
            height: 100%;
          }
        }

        .field {
          margin: 5px 0;
          display: flex;
          align-items: center;
        }
      }
    }

    .field, &.extended .right .obj-details .field {
      .label {
        font-weight: 700;
        font-size: 1rem;
        color: $mateColor3;
      }

      div:last-child {
        font-weight: 700;
        font-size: 1rem;
        color: $primary-text-color;
      }
    }

    h3 {
      width: auto;
      background: $mateColor2;
      color: #f2f2f2;
      border: none;
      text-transform: none;
      display: inline-block;
      font-weight: 400;
      margin-top: 30px;
      margin-bottom: 0;
      padding: 7px 10px;

      + .field {
        margin-top: 15px;
      }
    }

    h4 {
      color: $primary-text-color;
    }

    .ce_form {
      margin-top: 20px;

      input, textarea {
        box-shadow: none;

        &::placeholder {
          color: #1b4673;
        }

        &:focus {
          outline: 0;
        }
      }

      .custom-control-label::before {
        border: 1px solid #e6e6e6;
        background: #fff;
      }

      .custom-checkbox {
        margin-bottom: 10px;
        overflow: hidden;

        .custom-control-label::before {
          border-radius: 0;
        }

        .custom-control-input:checked~.custom-control-label::before {
          background: $mateColor2;
        }
      }

      .widget-checkbox label {
        text-align: left;
      }
    }

    .description {
      float: left;
      margin-top: 20px;

      > div {
        padding: 15px 0;
      }

      .inside {
        background: $boxes-background;
        margin-bottom: 30px;
        padding: 30px;
        color: $boxes-text-color;
        box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);

        h3 {
          margin-top: 0;
          font-family: $font2;
          background: none;
          color: $mateColor2;
          font-size: 1.5rem;
          padding: 0 0 20px;
          margin-bottom: 20px;

          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            border-bottom: 3px solid $mateColor2;
          }
        }
      }
    }

    .form {
      padding: 50px 0;
    }

    .description, .contact, .maps, .obj-header {
      color: $primary-text-color;
    }

    .legende_eclass span {
      line-height: 22px;
    }

    .documents h3 {
      margin-bottom: 15px;
    }
  }

  .top-obj-details {
    position: absolute;
    width: 100vw;
    background: rgba($boxes-background, 0.8);
    color: #f2f2f2;
    display: flex;
    align-items: center;
    height: 180px;
    margin-top: -180px;
    left: calc(100vw - 100vw - (100vw - 1080px + 30px) / 2);

    .container > div {
      display: flex;
      width: 100%;

      > div {
        vertical-align: middle;
        width: calc(100% / 3);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .field {
      div:nth-of-type(2) {
        font-size: 2rem;
        font-weight: 700;
        text-align: left;
        color: $mateColor2;
        font-family: $font3;
      }

      .label {
        width: inherit;
        color: $boxes-text-color;
        text-align: left;
        font-weight: 700;
      }
    }

    .icon {
      padding-right: 15px;
    }

    .material-icons {
      font-size: 54px;
    }
  }

  /* ====================== */
  /*         Filter         */
  /* ====================== */

  #estate_filter_list {
    button {
      background: none;
      color: $mateColor2;
      border: 1px solid $mateColor2;
      box-shadow: none;
      font-weight: 400;
      padding: 10px;
      margin: 5px 5px 5px 0;

      &:hover {
        background: $mateColor2;
        color: $boxes-background;
      }
    }

    .button.active {
      background: $button-floating-background !important;
      color: $button-flat-color;
    }

    &.button-filter > div {
      background: $boxes-background;
      border-color: $pageBackground;
    }

    .header {
      color: $mateColor2;
      text-transform: uppercase;
      font-size: 14px;
      text-align: center;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    &.select-filter, &.button-filter {
      display: flex;
      align-items: center;
      height: 180px;
      background: $boxes-background;
      padding: 0 30px;
      margin-top: -150px;
      box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);

      > div {
        padding: 0 5px;
        background: $boxes-background;
        border: none;
        height: auto;
        margin-bottom: 20px;
      }
    }

    &.button-filter {
      height: inherit;
      padding-top: 30px;
      padding-bottom: 30px;
      align-items: flex-start;

      .header {
        text-align: left;
      }
    }

    .select-wrapper {
      .caret {
        z-index: 1;
        background: #615b4d;
        margin: 0;
        height: 100%;
        fill: #fff;
        width: 20px;
        pointer-events: none;
      }

      input.select-dropdown {
        margin-top: 5px;
        color: #615b4d;
        border: 1px solid #615b4d;
      }
    }
  }

  a.show-filter.btn, .hide-filter.btn {
    display: none;

    &.active {
      display: inline-block;
    }
  }

  .filter {
    margin-bottom: 60px;

    a.btn-reset-filter {
      text-transform: uppercase;
      font-weight: 700;
      margin: 15px 0;
      display: inline-block;
    }
  }

  /* ====================== */
  /*        Kopfbild        */
  /* ====================== */

  .estate-header-image {
    height: calc(100vh - 165px);
    font-family: $font1;

    h1, h2, h3, h4, h5, h6 {
      background: rgba($mateColor2, 0.9);
      text-align: center;
      margin: 0 auto 200px;
      color: $mateColorWhite;
      font-weight: 400;
      text-transform: none;
      padding: 30px 40px 25px;
    }
  }

  /* ====================== */
  /*         Liste          */
  /* ====================== */
  #estate_list {
    margin-top: 40px;
  }

  .mod_immoListView {
    font-family: $font1;

    &.block {
      overflow: visible;
    }

    .btn.btn-reset-filter {
      background: $mateColor1;
      color: $mateColor3;
      margin-bottom: 0;
      margin-top: -18px;
      left: 50%;
      position: absolute;
      display: flex;
      align-items: center;
      width: 200px;
      margin-left: -100px;
      justify-content: center;
    }

    .estate {
      width: 50%;

      &:hover {
        color: $mateColor2;
      }

      .content {
        padding: 50px 40px 10px 40px;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          left: 40px;
          bottom: 0;
          border: 2px solid $mateColor2;
          width: 50px;
        }
      }

      .fields {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px 30px;
        text-align: center;

        .label {
          color: $primary-text-color;
        }

        .value {
          font-size: 22px;
          font-weight: 700;
        }
      }

      h2 {
        color: $mateColor2;
        border: none;
        height: inherit;
        font-family: $font2;
        font-weight: 400;
        font-size: 26px;
        line-height: 30px;
      }

      .inner{
        background: $boxes-background;
        position: relative;
        height: 620px;
        box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.25);
      }

      .item {
        height: auto;
        position: relative;
        overflow: visible;
      }

      img {
        vertical-align: bottom;
      }

      .location {
        position: absolute;
        bottom: 20px;
        color: #fff;
        left: 40px;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        font-weight: 700;
        background: rgba(0,0,0,.3);
        padding: 2px 5px;
      }

      ul li {
        .label {
          color: rgba($primary-text-color, .4);
          font-weight: 400;
        }

        .value {
          color: $primary-text-color;
        }
      }

      .price {
        position: absolute;
        bottom: 0;
        padding: 10px 15px;
        width: 100%;
        background: $mateColor2;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

        li {
          list-style-type: none;
          text-align: center;
        }

        .label {
          color: #f2f2f2;
        }

        .value {
          color: #f2f2f2;
          font-weight: 700;
          font-size: 1.4rem;
        }
      }
    }

    nav {
      margin-top: 30px;
      width: 100%;

      p {
        float: right;
      }
    }

    .pagination {
      p {
        float: right;
      }

      ul {
        text-align: left;

        li {
          margin: 2px;

          a {
            background: transparent;
            color: $mateColor4;
            padding: 0 10px;
            font-size: 12px;
            line-height: 30px;
            letter-spacing: 1px;

            &:hover {
              background: $mateColor1;
              color: $mateColor4;
            }
          }

          &.active a {
            background: $mateColor6;
            color: $mateColorWhite;
            font-weight: 700;
          }
        }
      }
    }

    .read-more {
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      line-height: 36px;
      width: 60px;
      height: 60px;
      font-weight: 700;
      bottom: -30px;
      right: 30px;
      position: absolute;
    }
  }
}

@media (max-width:1199px) {

  #wrapper {
    #estate_filter_list.select-filter {
      flex-wrap: inherit;

      >div {
        flex: inherit;
      }
    }

    .mod_immoListView .estate .fields .value {
      font-size: 18px;
    }
  }

}

@media (max-width: 1079px) {

  #wrapper .top-obj-details, #wrapper .estate-detail .small-pics {
    left: calc(100vw - 100vw - (100vw - 993px + 30px) / 2);
  }

}

@media (max-width:1024px) {

  #wrapper {
    #estate_filter_list.select-filter {
      flex-wrap: wrap;
      height: inherit;
      padding-top: 30px;
      padding-bottom: 30px;

      > div {
        width: calc(100% / 3);
      }
    }

    .top-obj-details {
      .field {
        div:nth-of-type(2) {
          font-size: 1.5rem;
        }
      }
    }
  }

}

@media (max-width:992px) {

  #wrapper {
    .mod_immoListView .estate {
      .content {
        padding-left: 20px;
        padding-right: 20px;

        &:after {
          left: 20px;
        }
      }

      .fields {
        position: relative;
        padding: 30px 20px;
        text-align: left;

        .label, .value {
          display: inline-block;
          width: 50%;
          font-size: 16px;
        }
      }

      .inner {
        height: 620px;
      }

      .location {
        left: 20px;
      }
    }

    .top-obj-details {
      left: -5%;
      width: 110%;
      margin-top: -110px;
      height: 120px;
    }

    .estate-detail .small-pics {
      left: -5%;
      width: 110%;
    }
  }

}

@media (max-width: 767px) {

  .estate-detail .top-obj-details .field>div:last-child {
    float: none;
  }

}

@media (max-width: 600px) {

  #wrapper {
    .estate-detail .small-pics {
      margin: 50px 0 0;
      padding: 0;
      width: 100%;
      left: 0;

      .slick-next {
        right: 10px;
      }

      .slick-prev {
        left: 10px;
      }
    }

    #estate_filter_list.select-filter {
      padding: 30px 15px 30px;

      > div {
        width: 50%;
      }
    }

    .estate-header-image {
      height: 400px;

      h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0;
      }
    }

    .mod_immoListView .estate {
      width: 100%;

      .inner {
        height: inherit;
      }
    }

    .top-obj-details {
      position: relative;
      left: 0;
      width: 100%;
      height: inherit;
      margin: 0;

      .container>div {
        display: block;
        padding: 10px 0;

        >div {
          width: 100%;
          padding: 10px 0;
        }
      }
    }
  }

}

@media (max-width:450px) {

  #wrapper {
    .top-obj-details {

    }
  }

}