.cta-bottom
  padding-top: 180px
  overflow: hidden
  background-color: $neutral-200
  position: relative
  z-index: 1
  > .grid-col
    width: 100%
    height: 100%
    overflow: visible
    > .grid-row
      display: flex
      height: 100%
      overflow: visible
      .left
        width: column(5, 12)
        top: -3rem

        h2
          color: $blue-300
          font-size: 1.5rem
          font-weight: bold
          line-height: 2rem
          display: inline-block
          width: 100%
          margin: 0
          margin-bottom: calc(10px - 1.125rem)

        p
          color: $blue-700
          font-size: 1.125rem
          line-height: 2rem

          &:first-child
            margin-top: 0

        ul
          list-style: none
          margin: 0
          padding: 0

          li
            position: relative
            padding-left: 0
            color: $blue-300
            font-size: 1.5rem
            font-weight: bold
            line-height: 2rem
            padding-bottom: 15px
            margin-bottom: 30px
            border-bottom: 1px solid rgba($pastelBlue, 0.6)

            &:first-child
              margin-top: 60px

            &:after
              position: absolute
              top: -6px
              right: 6px
              width: 18px
              height: 100%

              //padding-top: 2rem
              content: ""
              background-position: center center
              background-repeat: no-repeat
              background-image: url("/img/svg/arrow_color.svg")
              transition: right 0.2s

            &:hover
              &:after
                right: 0px


            a
              width: 100%
              text-decoration: none
              color: $blue-300
              display: inline-block
              transition: color 0.2s

              &:hover
                color: $blue

      .right
        width: column(6, 12)
        margin-left: column(1, 12)
        overflow: visible

        .white-block
          background-color: white
          +flex(space-between, center)
          margin-bottom: 85px
          box-shadow: 0 0 100px 0 rgba(0,40,105,0.12)

          .person
            width: 50%
            padding: 20px 40px

            figure
              position: relative
              width: 100%
              max-width: 240px
              margin-left: auto
              margin-right: auto
              border-radius: 100%

              // Inside shadow
              &:before
                content: ''
                position: absolute
                left: 0
                top: 0
                z-index: 2
                width: 100%
                height: 100%
                border-radius: 100%
                box-shadow: inset 0 0 10px 5px rgba(0,0,0, 0.05)

              img
                border-radius: 100%
                width: 100%


            .author
              margin: 20px auto 0
              color: $pastelBlue
              font-size: 1.125rem
              line-height: 2rem
              text-align: center


          .content
            width: 50%
            padding: 60px 10px

            h2
              margin-bottom: 5px
              color: $blue-300
              font-size: 1.5rem
              font-weight: bold
              line-height: 2rem

            p
              margin: 0
              color: $pastelBlue
              font-size: 1.125rem
              line-height: 2rem

              span
                font-weight: bold
                line-height: 2rem
                margin-right: 15px

              a
                color: $blue-300
                font-size: 1.125rem
                font-weight: bold
                line-height: 2rem
                transition: text-decoration 0.3s

                &:hover
                  text-decoration: underline

          +respond-to-width(1200)
            .person
              width: 40%
              padding: 20px
            .content
              width: 60%

        &:before
          content: ''
          display: block
          position: absolute
          width: 300px
          height: 300px
          background-image: url('/img/circles_and_triangles.png')
          bottom: 185px
          right: -120px
          opacity: 0.5
          z-index: 0


        a.button
          margin: 25px 0
          background-color: $green
          color: white
          text-decoration: none
          font-size: 1rem
          font-weight: 500
          line-height: 1.1875rem
          padding: 15.5px 20px
          &:hover
            background-color: lighten($green, 10%)
          +respond-to-width(1440)
            min-width: 200px

        .blue-footer
          position: relative
          bottom: 0
          z-index: 2
          display: block
          padding: 50px 0 50px 150px
          width: 55vw
          padding-left: 130px
          background-color: $pastelBlue
          box-shadow: 0 0 100px 0 rgba(0,40,105,0.2)

          +respond-to-width(1440)
            padding-left: 60px

          a.button
            margin: 0
            padding: 15.5px 20px
            color: white
            background-color: transparent
            text-decoration: none
            font-size: 1rem
            font-weight: 500
            line-height: 1.1875rem
            border: 1px solid white
            &:hover
              background-color: lighten($pastelBlue, 10%)
              border-color: transparent

          &:before
            content: ''
            position: absolute
            z-index: -1
            left: 0
            top: 0
            display: block
            height: 100%
            width: 100%
            background-color: $pastelBlue

          .top-triangle
            display: block
            position: absolute
            top: -53px
            left: -56px
            width: 85px
            height: 85px
            z-index: -2

+respond-to-width(960)
  .cta-bottom
    padding-top: 60px

    > .grid-col
      > .grid-row
        flex-wrap: wrap
        width: 100%
        .left, .right
          width: 100%
          margin-left: 0

        .left
          top: 0
          margin-bottom: 120px
          padding: 0 column(1)

        .right
          .white-block
            margin-bottom: 0
            width: 100%

            .person
              width: 50%
              padding: 20px 40px

            .content
              width: 50%

          .top-triangle
            display: none
          .blue-footer
            padding-left: 0
            width: 100%
            height: 200px
            +flex(center, center)


+respond-to-width(520)
  .cta-bottom
    padding-top: 5px
    > .grid-col
      > .grid-row
        .left
          margin-bottom: 10px
          padding-top: 30px
        .right

          .blue-footer
            .top-triangle
              display: none

          .white-block
            display: block
            padding: 40px 0
            text-align: center

            .person, .content
              width: 100%
              margin-right: auto
              margin-left: auto

            .person
              padding: 0 20px

              figure
                max-width: 200px

              .author
                display: none

            .content
              padding: 20px 20px 0

          a.button
            width: 80%