#selectForm
  background: #000

  .breadcrumb
    ol, ul
      li
        color: white
        span
          color: white
body.offer
  background: #000

.offer-content
  .header-placeholder
    height: 45px
    margin-bottom: 40px
    +flex(flex-start, flex-end)

  .type-block
    margin-bottom: 100px

    &.sticky
      .placeholder
        width: 100%
        height: 5px
      .content
        +position(fixed, null null null null)
        margin-top: -57px

    &.sticky-done
      .content
        +position(absolute, null null null null)

    h4
      +font-default(24px, 24px)
      margin: 0
      color: white


    #typeField
      background-color: $orange2
      padding: 40px 30px

      p
        margin: 0
        +font-bold(14px)
        margin-bottom: 20px
        text-transform: uppercase

      .checkBox
        margin-bottom: 2px
        label
          +font-light(16px)

    .stay-in-touch-button
      width: 100%
      margin: 20px 0
      padding: 0 10px
      +font-semi-bold(18px, 18px)

      p
        width: calc(100% - 33px)
        margin: 0
        +font-semi-bold(18px, 18px)
        color: white

      +media-query(800px)
        +font-semi-bold(22px, 22px)

        p
          +font-semi-bold(22px, 22px)

      +media-query(450px)
        +flex(center, center)
        max-width: none

        p
          display: inline-block
          width: auto

  .result-block
    h2
      +font-extra-light(36px, 36px)
      margin: 0
      color: white
      span
        +font-extra-light(36px, 36px)
        color: white
        text-transform: capitalize

  .properties
    padding-bottom: 100px
    .property
      height: 230px
      min-height: 170px
      //border: 1px solid $light-gray
      background: #FDFDFD
      margin-bottom: 25px

      a
        +flex(space-between, center)
        height: 100%

      &:last-of-type
        margin-bottom: 0

      .image
        width: calc(100% / 3)
        height: 230px
        min-height: 170px
        background-size: cover
        background-position: 50% 50%
        img
          height: 70%

      .info
        width: calc(100% / 3 * 2)
        height: 230px
        min-height: 170px
        padding: 20px 30px
        position: relative

        .price
          +font-semi-bold(24px, 30px)
          +position(absolute, 20px 30px null null)
          margin: 2px 0 0

        .name
          +font-extra-light(28px, 30px)
          margin: 0 0 10px

        .property-info
          +font-default(18px, 18px)
          color: $black
          margin: 0
          text-transform: capitalize

        .property-streamer
          margin: 10px 0
          +font-light(18px, 18px)

        .property-type
          +font-semi-bold(18px, 18px)
          +position(absolute, null null 20px 30px)
          margin: 0

          span
            +font-light(18px, 18px)

          .notify
            margin-left: 10px
            padding: 3px 25px 3px 15px
            border-radius: 999px
            background: $light-gray
            +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
          margin: 10px 0 0 -15px

          &.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)

        .click-button
          +position(absolute, null 30px 20px null )
          background-color: $black
          color: $orange2
          padding: 10px 30px
          &:hover
            background-color: lighten($black, 10%)

      &.sold
        .image
          position: relative
          &:before
            content: ''
            background-image: url('/img/sold.svg')
            background-repeat: no-repeat
            background-position: 0% 0%
            width: 100%
            +position(absolute, 0 null nulll 0)
            height: 70%
            z-index: 5

      &.rent
        .image
          position: relative
          &:before
            content: ''
            background-image: url('/img/rent.svg')
            background-repeat: no-repeat
            background-position: 0% 0%
            width: 100%
            +position(absolute, 0 null nulll 0)
            height: 70%
            z-index: 5

      &.option
        .image
          position: relative
          &:before
            content: ''
            background-image: url('/img/option.svg')
            background-repeat: no-repeat
            background-position: 0% 0%
            width: 100%
            +position(absolute, 0 null nulll 0)
            height: 70%
            z-index: 5

+media-query(1400px)
  .offer-content
    .properties
      .property
        height: 210px
        .image, .info
          height: 210px

+media-query(1100px)
  #searchLogo
    display: none

  .offer-content
    .type-block, .result-block
      width: 100%

    .type-block
      margin-bottom: 40px
      .header-placeholder
        margin-bottom: 10px

      #typeField
        padding: 20px
        >p
          display: none
        .boxes
          +flex(space-between, center)

        .checkBox
          display: inline-block

    .result-block
      margin-left: 0

+media-query(700px)
  .offer-content
    .properties
      .property
        .image
          width: 40%
        .info
          width: 60%
          padding: 10px 30px

          .name
            margin-bottom: 0
          .price
            position: static
            margin: 0
          .property-streamer
            margin: 5px auto

          .property-type
            position: static
            .notify
              display: none

          .notify.mobile-show
            display: inline-block

          .click-button
            padding: 5px 20px
            //position: static
            display: inline-block
            right: 15px
            bottom: 10px
            //margin-top: 10px

+media-query(650px)
  .offer-content
    .type-block
      #typeField
        .boxes
          display: block

        .checkBox
          width: 125px


+media-query(575px)
  .offer-content
    .header-placeholder
      max-width: 375px
      margin-left: auto
      margin-right: auto

    .properties
      .property
        height: auto !important
        max-width: 375px
        margin-right: auto
        margin-left: auto
        a
          display: block
        .image
          width: 100%
        .info
          width: 100%
          height: auto !important
          .name
            margin-bottom: 0
          .price
            position: static
            margin-bottom: 10px

          .property-streamer
            margin: 20px auto

          .property-type
            position: static

          .click-button
            padding: 5px 20px
            position: static
            display: inline-block
            margin-top: 10px

          .notify.mobile-show
            display: block
            margin: 20px 0 10px