.vision-row
  position: relative
  .content-container
    position: relative
  .business
    margin-left: $contentGrid
    width: $contentGrid*6
    max-height: 650px
    padding: 100px $contentGrid
    background: white
    position: relative
    z-index: 1

    .logo
      width: 100%
      max-width: 260px
      margin-bottom: 100px
      h1
        display: none
      img
        width: 100%

    .content
      p, a, span
        +font-default(24px, 34px)
        color: $navyBlue

  .vision
    position: relative
    .vision-image
      position: absolute
      left: 0
      top: 0
      width: $contentGrid*5
      height: 80%
      background-image: url("/img/visie.jpg")
      background-position: 50% 50%
      background-size: cover

    .vision-text
      background: $lightBlue
      width: $contentGrid*6
      margin-left: $contentGrid*5
      padding: 100px $contentGrid
      position: relative
      z-index: 2
      h2
        +font-semi-bold(24px)
        color: white
        margin-bottom: 65px
      .content
        p,a,span
          +font-light(18px, 24px)
          color: white

  .background
    position: absolute
    width: 100%
    top: 0
    left: 0
    height: 800px //temp calculate with javascript
    +flex(flex-end, flex-end)
    +linear-gradient(top,  $gradient2 0%, $gradient1 100%)
    .image
      position: absolute
      height: 100%
      width: 100%
      top: 0
      left: 0
      background-image: url('/img/header_image.jpg')
      background-repeat: no-repeat
      background-position: 50% 50%
      background-size: cover
      mix-blend-mode: overlay
      opacity: 0.2
    .content-container
      +flex(flex-end, flex-end)
      height: 100%
    .button
      width: $contentGrid
      background-color: $navyBlue
      float: right
      position: relative
      z-index: 5
      cursor: pointer

      +flex(center, center) 
      span
        +arrowWhiteLarge
        +translate3d(0,0,0)
        +transition(all 0.3s)

      &:hover
        span
          +translate3d(0, 8px, 0)
    canvas
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0

+media-query(1350px)
  .vision-row
    .background
      .button
        display: none
    .vision
      .vision-text
        width: $contentGrid*7
        .content
          p,a,span
            +font-light(19px, 25px)
+media-query(1000px)
  .vision-row
    .business
      max-height: 500px

+media-query(740px)
  .vision-row
    margin-top: 60px
    .background
      canvas
        display: none
    .content-container
      width: 100%
    .business
      width: $contentGrid*9
    .vision
      .vision-image
        width: $contentGrid*9.5
        margin-top: -80px
        margin-left: $contentGrid*2
        position: relative
        height: 400px
        z-index: 4

      .vision-text
        width: 100%
        margin-left: 0
        margin-top: -70px
        padding-top: 140px
        h2
          +font-bold(30px)
          margin-bottom: 40px
        .content
          p,a,span
            +font-light(24px, 36px)

+media-query(500px)
  .vision-row
    margin-top: 60px
    .background
      display: none
    .business
      width: 100%
      margin: 0
      max-height: 460px
    .vision
      .vision-image
        display: none

      .vision-text
        padding-top: 80px