/*==========================================================================
  Contact row (Before the footer mostly)
  ========================================================================== */

.contact-row
  position: relative
  background-color: $lightBlue
  padding: 240px 0 80px

  .background
    position: absolute
    bottom: 0
    left: 0
    width: 50%
    height: 100%
    background-color: $lightGray2
    opacity: 0.5

    .projects &, .invest &, .posts &
      height: calc(100% - 100px)


  .content-placeholder
    position: relative
    z-index: 2
    text-align: right
    overflow: visible
    vertical-align: top

    +respond-to-width(1350)
      width: column(5, 12)
      .content
        right: column(-3, 24)
        padding: 50px column(3, 24)


  .content
    position: relative
    z-index: 3
    display: inline-block
    text-align: left
    right: column(-1, 24)
    width: 100%
    max-width: 420px
    background-color: white
    border-radius: 10px
    padding: 50px column(1, 12)

    h4
      color: $blue
      +phenomena
      font-size: 2rem
      line-height: 1.25
      max-width: 275px
      margin-bottom: 30px

    a
      text-decoration: none
      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: 20px
        background-color: transparent
        transition: all 0.3s

        span
          position: relative
          //right: -1px
          +phenomena
          font-size: 0.9rem
          transition: color 0.2s

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

    .phone-svg
      position: absolute
      left: -30px
      top: calc(50% - 32px)
      width: 55px
      height: 63px
      opacity: 0.1
      svg
        width: 100%

  .image-placeholder
    position: relative
    overflow: visible
    left: column(-1, 12)

    +respond-to-width(1350)
      width: column(13, 24)
      left: 0

    picture
      position: relative
      top: -40px
      width: 100%
      max-width: 700px
      display: block
      img
        width: 100%

  +respond-to-width(750)
    padding: 100px 0 40px

    .background
      height: calc(100% - 50px) !important

    .content-placeholder
      width: 100%
      display: block

      .content
        display: block
        right: 0
        width: calc(100% - 80px)
        margin-right: auto
        margin-left: 50px

    .image-placeholder
      display: block
      width: 75%
      margin-left: auto

  +respond-to-width(500)
    padding: 60px 0 60px

    .background
      height: 100% !important

    .grid-row
      width: 100%

    .content-placeholder
      .content
        margin-left: 0
        width: 100%
        border-radius: 0
        max-width: none

        .phone-svg
          left: 30px
          top: 63px
          width: 40px

        h4
          margin-left: 55px
          font-size: 1.6rem

    .image-placeholder
      width: 100%
      picture
        top: 0