/*==========================================================================
  Invest CTA row
  ========================================================================== */

.invest-row
  position: relative

  .invest-wrapper
    position: relative
    z-index: 2
    bottom: -100px
    padding: 60px 0
    background: $blue
    background: linear-gradient(90deg, $blueGradient)
    border-radius: 10px
    +flex(space-between, center)

    .title
      position: relative
      width: calc(100% - 265px - (100% / 12 * 2) )
      margin-left: column(2, 24)
      +flex(flex-start, center)
      min-height: 155px

      .diamond
        position: absolute
        left: -61.5px
        top: 0
        width: 155px
        height: 146px
        svg
          width: 100%
          opacity: 0.1

        #diamond
          .st0
            fill: #fff !important

          #star
            +animation-name(diamondShine)
            animation-timing-function: ease-in-out
            +animation-duration(4s)
            +animation-iteration-count(infinite)
            animation-play-state: running
            transform-origin: 84% 17%

      h4
        color: white
        +phenomena
        font-size: 1.8rem
        line-height: 1.25

        +respond-to-width(840)
          font-size: 1.4rem

        span
          color: $brown

    .buttons
      margin-right: column(2, 24)
      width: 245px
      .button
        +flex(space-between, center)
        border-color: white
        color: white

        &:after
          +arrowWhite

        &.full
          margin-top: 10px
          background-color: white
          color: $blue
          &:after
            +arrowBlue


    .waves
      position: absolute
      right: -175px
      bottom: 10px
      height: 90px
      opacity: 0.1

      .wave
        .wave-line
          .st0
            stroke: #fff


  .background
    position: absolute
    left: 0
    top: 0
    +flex(flex-start, flex-end)
    width: 100%
    height: 100%
    background-color: $lighterGray

    //picture
    //  width: 100%
    //  img
    //    width: 100%

    &:after
      content: ''
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%
      opacity: 0.5
      background:
        image: url("/img/backgrounds/sea.jpg")
        size: cover
        repeat: no-repeat
        position: 50% 0%

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

      +respond-to-width(1200)
        background-image: url("/img/backgrounds/sea@0,5x.jpg")

      +respond-to-width(700)
        background-image: url("/img/backgrounds/sea@0,3x.jpg")

      .home &
        opacity: 1
        background-image: url("/img/backgrounds/beach.jpg")

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

        +respond-to-width(1200)
          background-image: url("/img/backgrounds/beach@0,5x.jpg")

        +respond-to-width(700)
          background-image: url("/img/backgrounds/beach@0,3x.jpg")


  +respond-to-width(1500)
    .invest-wrapper
      margin-left: column(1, 24)
      width: column(22, 24)

  +respond-to-width(1150)
    .invest-wrapper
      margin-left: 0
      width: 100%

  +respond-to-width(750)
    padding-top: 150px

    .background
      height: 150px

    .grid-row
      width: 100%

    .invest-wrapper
      bottom: 0
      border-radius: 0
      padding: 60px column(1, 12)

      display: block

      .title
        width: 100%

      .buttons
        //margin-right: auto
        margin-left: column(1, 12)

      +respond-to-width(360)
        padding-top: 25px
        .title, .buttons
          margin-left: auto
          margin-right: auto
          width: 100%

        .title
          display: block

          .diamond
            position: relative
            left: 0
            margin: 0 auto 20px
            width: 90px
            height: auto

          h4
            width: 100%
            font-size: 1.2rem
            margin-bottom: 20px