.property-detail
  margin-top: 20px
  .stay
    .stay-in-touch-button
      float: right
      color: $orange2

  .fb-share-button
    float: left
    clear: both
    margin-top: -10px
    margin-bottom: 15px
    min-height: 35px

  .property-meta
    #circle
      &:before
        content: 'Verkocht:'
        position: absolute
        left: 0px
        top: -30px

      float: right
      width: 80px
      height: 80px
      +flex(center, center)
      position: relative
      top: 15px
      right: -80px
      canvas
        position: absolute
        left: 0
        top: 0
    .mobile-show
      display: none
      +font-semi-bold(34px, 36px)

    h1
      +font-extra-light(36px, 36px)
      margin: 0
      padding-right: 150px
      position: relative

      span
        +font-semi-bold(30px, 36px)
        position: absolute
        right: 0
        top: 0
    h4
      +font-default(18px, 38px)
      color: $gray
      margin: 0 0 10px
      padding-left: 3px
      text-transform: capitalize

      span
        color: $gray
        +font-default(18px, 38px)

      .notify
        float: right
        margin-top: 8px
        padding: 3px 25px 6px 15px
        border-radius: 999px
        background: $light-gray
        color: $black
        +font-default(14px, 14px)

        i
          text-transform: lowercase
          font-style: normal
          color: white
          background: $blue
          border-radius: 9999px
          width: 15px
          height: 15px
          display: inline-block
          +font-semi-bold(10px, 10px)
          margin-right: 5px
          position: relative
          top: 3px
          &:before
            content: 'i'
            +font-semi-bold(14px, 10px)
            font-size: 14px
            line-height: 10px
            color: white
            width: 100%
            height: 100%
            +flex(center, center)
            +position(absolute, calc(50% - 7.5px) calc(50% - 7.5px) null null)

    .notify
      padding: 3px 25px 6px 15px
      border-radius: 999px
      background: $light-gray
      +font-default(14px, 14px)
      color: $black

      &.rental
        margin-bottom: 10px
        display: inline-block

      &.mobile-show
        display: none

      i
        text-transform: lowercase
        font-style: normal
        color: white
        background: $blue
        border-radius: 9999px
        width: 15px
        height: 15px
        display: inline-block
        +font-semi-bold(10px, 10px)
        margin-right: 5px
        position: relative
        top: 3px
        &:before
          content: 'i'
          +font-semi-bold(14px, 10px)
          font-size: 14px
          line-height: 10px
          color: white
          width: 100%
          height: 100%
          +flex(center, center)
          +position(absolute, calc(50% - 7.5px) calc(50% - 7.5px) null null)

  .main-image
    .overlay
      +position(absolute, 0 null null 0)
      height: 70%
      width: auto

    &.sold
      &:before
        content: ''
        background-image: url('/img/sold.svg')
        background-size: contain
        background-repeat: no-repeat
        background-position: 0% 0%
        width: 50%
        max-width: 250px 
        +position(absolute, null null 0 0)
        height: 100%
        z-index: 5
    img
      width: 100%

  .image-row
    position: relative
    margin-bottom: 50px

    .sub-images
      +position(absolute, 0 0 0 null)
      padding-left: 10px

      .grid6
        height: calc(50% - 5px)
        width: calc(50% - 5px)

      .small-image
        background-size: cover
        background-position: 50% 50%
        &.sub1, &.sub2
          margin-bottom: 10px

        &.sub1, &.sub3
          margin-right: 10px

      .photoslider
        background-color: $black
        +flex(center, center)
        cursor: pointer

        span
          +sprite(-80px -41px, 32px, 25px)
          display: block
          margin: 0 auto 15px

        p
          margin: 0
          text-transform: uppercase
          text-align: center
          &.amount
            +font-semi-bold(24px, 24px)
            color: white
            margin-bottom: 5px
          &.more
            +font-semi-bold(16px, 16px)
            color: $orange2
            &:after
              content: '›'
              margin-left: 5px
  .info-row
    margin-bottom: 70px

    h2
      +font-semi-bold(24px, 32px)
      margin: 0
      border-bottom: 2px solid $orange2
      padding-bottom: 10px

      &:before
        content: ''
        height: 10px
        width: 10px
        border: 3px solid $orange2
        display: inline-block
        +transform(rotate(45deg))
        margin: 0 15px 0 5px

    .text-block
      padding-right: 10%
      +font-light(18px, 24px)

      h2
        margin-bottom: 15px

      p, ul, li, span, em
        +font-light(18px, 24px)

      .projectOffer
        margin-top: 50px

      .facebook-share-property
        margin-top: 30px
        max-width: 200px
        margin-bottom: 50px
        +transform(scale(1))
        +transition(all 0.2s)
        cursor: pointer

        &:hover
          +transform(scale(1.05))
        img
          width: 100%
          display: block

      .headerTable, .sub-property
        .type, .surface, .bedrooms, .price, .floor
          display: inline-block

          &.alert
            color: $red

        .type
          width: calc(25% - 5px)
          padding-left: 10px
        .surface
          width: calc(15% - 5px)
          sup
            position: absolute
            margin-top: -5px
        .floor
          width: calc(8% - 5px)
        .bedrooms
          width: calc(8% - 5px)
        .price
          width: calc(21% - 5px)
          max-width: 100px
          +font-semi-bold(16px)
        .more-info-column
          width: calc(19% - 5px)
          max-width: 110px
          +font-light(16px, 18px)

      .headerTable
        +flex(space-between, center)
        span
          +font-semi-bold(16px, 16px)

      .sub-property
        margin: 0

        &:nth-child(even)
          background: #f6f6f6

        a
          +flex(space-between, center)

          span
            height: 40px
            padding-top: 10px
            +font-default(18px, 18px)

            &.more-info-column:after
              content: ''
              display: inline-block
              +sprite(-135px -40px, 12.5px, 12px)
              margin-top: 4px
              margin-left: 10px
              background-position: -135px -40px
              +transition(all 0.2s)
        &:hover
          background: lighten($orange2, 20%)
          a
            span.more-info-column:after
              background-position: -150px -40px

      .more-project-properties
        background: $black
        text-align: center
        margin: 50px 0 0
        +transition(all 0.2s)
        width: 100%
        max-width: 300px

        a
          color: white
          text-transform: uppercase
          +font-bold(22px, 24px)
          text-align: center
          padding: 20px 0
          display: block

          span
            display: block
            color: $orange2
            +font-semi-bold(16px, 24px)
            text-align: center
            +transition(all 0.2s)

        &:hover
          background: $orange2
          a
            span
              color: $black


    .property-info, .small-info
      padding-left: 10px

      .spec-list
        +flex(space-between, flex-start)
        margin-bottom: 50px

        .list1, .list2
          width: calc(50% - 15px)

          p
            margin: 0
            +font-light(18px, 18px)
            +flex(space-between, center)
            text-align: right
            clear: both
            height: 50px
            border-bottom: 1px solid rgba(127, 127, 127, 0.3)
            &.capt
              text-transform: capitalize
            em
              font-style: normal
              +font-light(18px, 18px)
            span
              +font-bold(14px, 18px)
              margin: 0
              text-transform: uppercase
              text-align: left
              +flex(space-between, center)
            &.codes-legal
              +flex(flex-start, center)
          i
            text-transform: lowercase
            font-style: normal
            color: white
            background: $blue
            border-radius: 9999px
            width: 15px
            height: 15px
            +flex(center, flex-end)
            +font-semi-bold(10px, 10px)
            margin-left: 10px
            cursor: crosshair
            position: relative
            &:before
              content: 'i'
              +font-semi-bold(14px, 10px)
              font-size: 14px
              line-height: 10px
              color: white
              width: 100%
              height: 100%
              +flex(center, center)
              +position(absolute, calc(50% - 7.5px) calc(50% - 7.5px) null null)

            &:hover
              span
                +translate3d(0, 0, 0)
                opacity: 1
                pointer-events: auto

            &.active
              span
                +translate3d(0, 0, 0)
                opacity: 1
                pointer-events: auto

            .code-block
              display: block

            >span
              margin-bottom: 30px !important

            span
              background: #F2F2F2
              border-radius: 3px
              +font-default(14px, 14px)
              color: $gray
              padding: 10px 14px
              margin: 0 0 0 -11px
              position: relative
              z-index: 999
              display: inline-block
              white-space: nowrap
              opacity: 0
              +translate3d(0, 10px, 0)
              +transition(all 0.3s)
              text-align: left
              pointer-events: none
              min-width: 350px

              .placeholder
                +flex(space-between, flex-start)
                padding: 10px
                background: none

                &:after
                  display: none

              em
                &:after
                  content: ':'
                  margin-right: 8px
                  margin-top: 15px
                font-weight: 600
                line-height: 15px
                font-style: normal
                display: inline-block
                width: 65px
                margin-bottom: 5px

              b
                font-weight: 400
                width: calc(100% - 65px)
                position: relative

              &:after
                content: ''
                width: 0
                height: 0
                border-left: 12px solid transparent
                border-right: 12px solid transparent
                border-top: 12px solid #F2F2F2
                position: absolute
                bottom: -12px
                left: calc(50% - 6px)

      .documents
        margin-bottom: 50px
        p
          display: inline-block
          margin-right: 5px
        .document
          padding: 10px 15px
          background: $black
          +font-semi-bold(16px, 16px)
          color: white
          +flex(center, center)
          +transform(scale(1.0))
          +transition(all 0.2s)

          span
            +sprite(-30px -41px, 14px, 18px)
            display: inline-block
            margin-right: 15px

          &:hover
            +transform(scale(1.05))

      #map
        margin-top: 20px
        width: 100%

    .small-info
      display: none
      padding-left: 0

.more-info
  background: $orange2
  height: 200px
  width: 100%
  +flex(center, center)

  p
    +font-default(24px)
    margin: 0 0 20px

.project-detail
  .info-row
    .text-block
      padding-right: 4%

+media-query(1020px)
  .property-detail
    .info-row
      .small-info
        display: block
        width: 100%
      .grid6
        width: 100%
        &.property-info
          margin-top: 20px
          padding-left: 0

        &.text-block
          padding-right: 0

        .larger-info
          display: none


+media-query(900px)
  .property-detail
    .property-meta
      .mobile-show
        display: block
        margin: 5px 0 10px

      h1
        padding-right: 0
        span
          display: none

      h4
        margin-bottom: 0

        .notify
          display: none


      .notify.mobile-show
        display: inline-block
        margin-bottom: 20px


+media-query(600px)
  .property-detail
    .stay
      width: 100%
      margin: auto 0 20px
      .stay-in-touch-button
        float: none
        margin: 0
    .property-meta
      width: 100%

    .image-row
      .main-image, .sub-images
        width: 100%
      .sub-images
        margin-top: 10px
        position: static
        padding-left: 0


+media-query(430px)
  .property-detail
    .info-row
      .small-info
        .spec-list
          display: block
          .list1, .list2
            width: 100%