.home-search
  background: url('/img/home-background.jpg') 50% 50%
  background-size: cover
  margin-top: -75px

  #selectForm
    background: none !important

  .placeholder
    width: 95%
    max-width: 600px
    margin: auto
    padding: 90px 0 280px
    position: relative

    h1
      margin: 0 0 45px 0
      padding: 0
      +font-bold(42px)
      color: white
      text-shadow: 0px 4px 8px rgba(0,0,0,0.4)

  .orange-block
    background: $orange2
    padding: 30px 10%
    position: relative

    .hide
      display: none

    hr
      border: 0
      height: 0
      margin: 0
      border-bottom: 1px solid white
      opacity: 0.3
      +position(absolute, null 0 null 0)
      width: 100%

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

    #typeField, #priceField, #locationField
      padding-bottom: 30px

    #typeField, #priceField
      padding-top: 30px

    #locationField
      position: relative

      #cityField
        width: 100%
        +appearance(none)
        outline: none
        padding: 10px 25px 10px 25px
        color: $black
        +font-default(17px, 17px)

      .selectric-items
        li
          text-transform: capitalize
      .selectric
        .label
          padding: 0 20px
          +font-light(17px, 17px)
          color: $black
          text-transform: capitalize
          +flex(flex-start, center)
      input
        margin-top: 5px
        height: 40px
        width: 100%
        +font-light(17px)
        color: $gray
        padding: 0 20px
        border: 1.5px transparent solid

      input[type=text]:focus, textarea:focus
        box-shadow: 0 0 20px #84bfef
        border: 1.5px #84bfef solid
        border-radius: 0

      .search
        +sprite(-12px -41px, 14px, 16px)
        +position(absolute, null 15px 40px null)
        pointer-events: none

    #typeField
      .alert
        text-transform: none
        color: $red
        +font-default(14px, 30px)

      .selecting
        float: right
        color: $gray
        span
          +font-default(16px, 14px)
          text-transform: none
          color: $gray
          cursor: pointer

          &.inactive
            opacity: 0.3
      .boxes
        margin-top: 20px
        .checkBox
          float: left
          width: calc(100% / 3)

          input:checked
            background-color: $blue

    #priceField
      .before
        position: absolute
        margin-top: 11px
        margin-left: 20px
        color: $gray
        +font-default(14px, 17px)
        text-transform: uppercase

      .arrow
        background: url('/img/arrow.svg')
        background-size: cover
        background-position: 50% 50%
        height: 5px
        width: 10px
        display: inline-block
        position: absolute
        margin-left: -25px
        margin-top: 18px

      #min_price, #max_price, #goal_property
        width: 100%
        +appearance(none)
        outline: none
        padding: 10px 25px 10px 60px
        color: $black
        +font-default(17px, 17px)

      >p
        width: 100%
        float: left
        margin-bottom: 10px
        //&:first-of-type
        //  margin-right: 4%
      .selectric-wrapper
        width: 100%
        float: left

        .selectric
          .label
            padding: 0 20px
            +font-default(17px, 17px)
            color: $black
            text-transform: none
            +flex(flex-start, center)

            &:before
              color: $gray
              +font-default(14px, 17px)
              text-transform: uppercase
              margin-right: 10px

        &:first-of-type
          margin-right: 4%
          //.selectric
            //.label
            //  &:before
            //    content: 'van'

        &:nth-of-type(3)
          .selectric
            .label
              &:before
                content: 'tot'
    #submitButton
      background: $black
      width: 80%
      max-width: 240px
      height: 50px
      +flex(center, center)
      margin: auto
      position: relative
      cursor: pointer

      &:hover
        background: lighten($black, 10%)
      &:active
        background: lighten($black, 20%)

      &:before
        content: ''
        +sprite(-12px -41px, 14px, 16px)
        display: inline-block
        margin-left: -40px
        +position(absolute, calc(50% - 8px) null null null)
      p
        +font-semi-bold(18px)
        color: white
        text-transform: uppercase

+media-query(850px)
  .home-search
    .placeholder
      padding: 45px 0 140px

+media-query(600px)
  .home-search
    margin-top: -185px
+media-query(550px)
  .home-search
    .orange-block
      #typeField
        .selecting
          display: none
        .boxes
          width: 100%
          .checkBox
            width: calc(100% / 2)
            margin-bottom: 10px

      #priceField
        #min_price, #goal_property
          margin-bottom: 20px

        #min_price, #max_price, #goal_property
          width: 100%
          max-width: 300px