/*==========================================================================
  Contact page
  ========================================================================== */
.contact
  .location
    position: relative
    margin-bottom: 150px

    .grid-row
      position: relative
      width: 100%
      max-width: none

      .waves
        position: absolute
        opacity: 0.15
        left: 0
        bottom: 15px
        width: 420px

    .info
      width: 50%
      padding: 90px 0 180px
      vertical-align: top

      +respond-to-width(1000)
        padding: 50px 0

      .placeholder
        display: block
        margin-left: auto
        max-width: 840px
        width: 100%

        .contact-info
          position: relative
          width: column(8, 12)
          margin-left: column(3, 12)

          &:after
            content: ''
            position: absolute
            z-index: -1
            right: 0
            bottom: -90px
            height: 90%
            width: column(7, 8)
            background-color: $lightGray05

            +respond-to-width(575)
              display: none

          figure
            width: 100%
            max-width: 256px
            margin-bottom: 60px
            img
              width: 100%

          h5
            +metropolisSemiBold
            font-size: 0.75rem
            line-height: 1.25
            color: $blue
            text-transform: uppercase

          p
            color: $brown
            margin-bottom: 30px

          a
            text-decoration: none
            color: $blue
            font-size: 0.9rem
            +flex(flex-start, center)

            &:first-of-type
              margin-bottom: 12px

            .icon
              +flex(center, center)
              width: 32px
              height: 32px
              border: 2px solid rgba($brown, 0.8)
              border-radius: 100%
              margin-right: 12px
              background-color: transparent
              transition: all 0.3s

              span
                position: relative
                //right: -1px
                +phenomena
                font-size: 0.9rem

            &:hover
              .icon
                background-color: $brown
                border-color: $brown
                color: white

    .map
      position: absolute
      left: 50%
      top: 0
      height: 100%
      width: 50%
      max-width: 980px

      picture
        width: 100%
        display: none
        img
          width: 100%

      background:
        image: url("/img/backgrounds/map.jpg")
        size: cover
        repeat: no-repeat
        position: 0% 50%

    +respond-to-width(1000)
      margin-bottom: 80px

      .info
        display: block
        width: 75%
        margin: 25px auto 0

        .placeholder
          .contact-info
            margin: auto
            width: 100%
            max-width: 450px

      .map
        position: relative
        display: block
        background: none
        width: column(22, 24)
        margin: auto
        left: auto
        picture
          display: block
          margin: auto
          width: column(22, 24)

      .grid-row
        .waves
          position: relative
          bottom: 30px

    +respond-to-width(575)
      margin-bottom: 50px

      .info
        margin: 0 auto

      .grid-row
        .waves
          display: none

  .contact-form
    position: relative
    padding: 100px 0
    background-color: $lightGray05

    .grid-row
      position: relative

      .form-placeholder
        width: column(15, 24)

        .form
          max-width: none

          .form-element
            input, textarea
              border-color: $brown

            textarea
              padding: 10px 15px
              background-color: rgba($blueishGray, 0.5)
              overflow-x: hidden

          .extra_message
            margin-bottom: 35px


        h2
          +phenomena
          font-size: 2rem
          line-height: 1.25
          color: $blue

        >p
          font

      .side-image
        position: relative
        vertical-align: top
        display: inline-block
        left: column(-1, 12)
        width: column(7, 22)
        height: 100%

        .image-placeholder
          position: relative
          display: block
          width: 100%
          height: 0
          padding-bottom: 175%

          &:after
            content: ''
            position: absolute
            width: 100%
            height: 100%

            background:
              size: cover
              position: top center
              image: url("/img/backgrounds/sea_side.jpg")

            +respond-to-width(1750)
              background-image: url("/img/backgrounds/sea_side@0,75x.jpg")

  +respond-to-width(950)
    .contact-form
      padding: 40px 0 0

      .grid-row
        width: 100%
        padding-bottom: 150px

        .side-image
          position: absolute
          bottom: 0
          left: 0
          width: 100%
          height: 150px

          .image-placeholder
            width: 100%
            height: 100%
            padding-bottom: 0
            
            &:after
              background-image: url("/img/backgrounds/sea_side_hor.jpg")

        .form-placeholder
          display: block
          width: column(10, 12)
          margin: auto

          +respond-to-width(650)
            .form
              .multiple-elements
                display: block
                >*
                  width: 100%