.hide
  display: none

.orange-search
  background: $orange2
  +position(fixed, 80px 0 null 0)
  z-index: 100

  .content-container
    +flex(space-between, center)
    height: 75px

  #locationField
    position: relative
    width: calc(100% / 12 * 5)
    min-width: 200px
    #cityField
      width: 100%
      +appearance(none)
      background: white
      outline: none
      padding: 10px 25px 10px 25px
      color: $black
      +font-default(17px, 17px)
    .selectric
      .label
        padding: 0 20px
        +font-light(17px, 17px)
        color: $black
        text-transform: capitalize
        +flex(flex-start, center)
    .selectric-items
      li
        text-transform: capitalize 
    input
      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 10px null)
      pointer-events: none

  #priceField
    width: calc(100% / 12 * 4)

    .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)
      background: white
      outline: none
      padding: 10px 25px 10px 60px
      color: $gray
      +font-default(17px, 17px)


    >p
      margin-bottom: 20px
    .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: calc(100% / 8)
    max-width: 240px
    min-width: 120px
    height: 40px
    cursor: pointer
    +flex(center, center)
    position: relative

    &: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
      margin: 0

#submit2Button
  background: $black
  width: 100%
  height: 40px
  cursor: pointer
  +flex(center, center)
  margin-top: 20px
  position: relative

  &: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
    margin: 0

#searchLogo
  +sprite(0 0, 40px, 40px)
  margin: 15px auto 0
  display: block

.pac-container
  .pac-item
    +font-light(16px, 16px)
    .pac-item-query
      +font-light(16px, 16px)
    .pac-matched
      +font-semi-bold(16px, 16px)

+media-query(1070px)
  .orange-search
    #priceField
      .selectric-wrapper
        .selectric
          .label
            padding: 0 5px

+media-query(850px)
  .orange-search
    #priceField
      #min_price, #goal_property
        margin-right: 10px

+media-query(600px)
  .orange-search
    .content-container
      display: block
      padding-top: 20px
      padding-bottom: 20px
      height: auto

    #locationField, #priceField, #submitButton
      width: 90%
      margin: auto
      min-width: 315px

    #priceField
      margin-top: 10px
      margin-bottom: 15px
      +flex(space-between, center)

      .clear
        display: none