.invest-page
  background: white
  margin-top: 140px
  .header-image
    min-height: 320px
    background-size: cover !important
    background-position: 50% 50% !important
    .header-text
      width: 50%
      left: 15%
      position: absolute
      top: 60px

      h3
        +font-light(34px, 50px)
        color: #fff
        text-transform: uppercase
        text-shadow: 3.4px 3.4px 15px rgba(0,0,0, 0.5)
        padding-right: 17%

        br
          display: none


      p
        +font-default(24px, 24px)
        color: #fff
        margin-bottom: 5px
        letter-spacing: 1px
        text-shadow: 3.4px 3.4px 15px rgba(0,0,0, 0.5)
        padding-right: 17%
    .invest
      position: absolute
      right: 0
      top: 0
      height: 100%
      background: white
      width: 37.5%
      min-width: 280px
      box-sizing: border-box
      padding-left: 5%
      padding-right: 30px
      +flex(flex-start, center)

      &:before
        content: ''
        background: url("/public/images/structure/swoosh.png") 100% 0 no-repeat
        background-size: contain
        height: 100%
        width: 200px
        position: absolute
        left: -200px
        top: 0

      h1
        +font-semi-bold(26px, 38px)
        margin-top: 0
        strong
          display: block
          +font-semi-bold(34px, 38px)
          color: #56AFD5

      p
        width: 100%
        max-width: 340px
        +font-default(16px, 22px)

      .why
        margin: 40px 0
        p
          color: #BC9850
          +flex(flex-start, center)
          margin-bottom: 30px

          span
            display: inline-block
            margin-right: 25px

            width: 30px
            height: 28px

          &.l1
            span
              background: url('/public/images/structure/house.svg') 50% 50% no-repeat
              background-size: contain

          &.l2
            span
              background: url('/public/images/structure/rend.svg') 50% 50% no-repeat
              background-size: contain

          &.l3
            span
              background: url('/public/images/structure/profit.svg') 50% 50% no-repeat
              background-size: contain
      .price
        p
          +font-default(15px)
          color: #BC9850
          margin-bottom: 10px

          span
            color: #575757

          strong
            +font-bold(28px, 28px)
            color: #BC9850
            margin-right: 10px

  .invest-explain
    width: 70%
    margin: auto
    padding: 120px 0

    .invest-warning-1
      max-width: 1238px
      width: 100%
      margin-bottom: 35px

    .invest-warning-2, .invest-warning-3
      display: none
      width: 100%
      margin-bottom: 35px

    .inner-text
      width: calc(100% / 12 * 5)
      >.resort_player
        display: none
        width: 100%
        margin-bottom: 30px

      h1
        +font-semi-bold(28px)
        color: #56afd5
        margin-bottom: 20px
        margin-top: 0

    .image-container
      width: calc(100% / 12 * 5)
      margin-left: calc(100% / 12)
      float: right
      img
        width: 100%

.invest-reasons
  padding: 120px 0

  h2
    width: 85%
    margin-left: 15%
    color: #56afd5
    +font-semi-bold(34px)
  >p
    width: 85%
    margin-left: 15%
    color: #ccae6c
    +font-semi-bold(18px)

  .reasons-block
    width: 70%
    margin: auto
    min-width: 800px
    ul
      width: calc(100% - 6px)
      border: 3px solid white
      list-style: none
      padding: 0
      +flex(flex-start, flex-start)
      overflow: hidden

      li
        width: calc(100% / 5)
        padding: 0
        +flex(center, center)
        text-align: center
        cursor: pointer
        opacity: 0.5

        .placeholder
          width: 100%
        p
          +font-default(14px, 16px)
          text-transform: uppercase
          color: #ccae6c
          margin: 0

          .no-upper
            text-transform: lowercase
            +font-default(14px, 16px)
            color: #ccae6c
            font-style: normal

        .icon-holder
          +flex(center, center)
          height: 80px

        &.active
          background: white
          opacity: 1
        &:hover
          opacity: 1

        &.clear
          display: none

        &#rendement
          span
            background: url('/public/images/static/invest/rendement.png') no-repeat
            background-position: 50% 50%
            background-size: contain
            display: inline-block
            height: 40px
            width: 50px


        &#voordeel
          span
            background: url('/public/images/static/invest/voordeel.png') no-repeat
            background-position: 50% 50%
            background-size: contain
            display: inline-block
            width: 45px
            height: 40px

        &#greenparks
          span
            background: url('/public/images/static/invest/landel.png') no-repeat
            background-position: 50% 50%
            background-size: contain
            display: inline-block
            width: 70px
            height: 59px

        &#ontzorgd
          span
            background: url('/public/images/static/invest/ontzorgd.png') no-repeat
            background-position: 50% 50%
            background-size: contain
            display: inline-block
            width: 50px
            height: 50px

        &#geniet
          span
            background: url('/public/images/static/invest/enjoy.png') no-repeat
            background-position: 50% 50%
            background-size: contain
            display: inline-block
            width: 77px
            height: 45px


  .text-holder
    width: 70%
    margin: auto
    min-width: 800px
    position: relative
    margin-top: -3px
    background: white

    >div
      opacity: 0
      position: absolute
      width: 100%
      +translate3d(0, 50px, 0)
      -webkit-transition: all 0.4s
      -moz-transition: all 0.4s
      transition: all 0.4s
      z-index: 5

      &.active
        display: block
        +translate3d(0, 0, 0)
        opacity: 1
        z-index: 998

      .inner-text
        width: 50%
        padding-top: 35px
        min-height: 300px

        img
          width: 100%
          display: none

        p
          padding: 0 10% 35px
          max-width: 425px

        h3
          font-size: 28px
          line-height: 34px
          color: #56afd5
          padding: 20px 10% 25px
          max-width: 425px

      .button
        background-color: #56afd5
        display: block
        +flex(center, center)
        height: 100px
        border-bottom: 5px solid #3c8daa
        position: absolute
        bottom: 0
        right: 0
        width: 50%

        &:hover
          background-color: #3c8daa
        p
          color: white
          text-align: center
          +font-bold(20px, 20px)
          margin: 0
          padding: 0
          span
            color: white
            display: block
            +font-default(19px, 20px)
            font-style: italic
            margin-top: 14px

      .image-container
        width: 50%
        float: right
        min-height: 200px
        background-size: cover !important
    #ontzorgd-text, #geniet-text
      .image-container
        float: left
      .inner-text
        float: right

      .button
        right: initial
        left: 0

.blue-row
  background: #56AED4
  text-align: center
  padding: 65px 0 40px

  p
    width: 85%
    margin: 0 auto 30px
    +font-light(21px)
    color: white
    strong
      color: white

  h4
    width: 85%
    margin: 0 auto 10px
    color: white
    +font-bold(26px)

  h5
    width: 85%
    margin: 0 auto 10px
    color: white
    +font-light(26px)

  .link
    border: 2px solid white
    border-radius: 7px
    display: inline-block
    margin-top: 15px
    width: auto 

    &:hover
      background: white
      a
        color: #56AED4
        em
          color: #56AED4
        &:after
          background-image: url('/public/images/structure/arrow_right_blue.png')

    a
      display: block
      padding: 10px 25px
      color: white
      +font-default(16px)

      em
        font-weight: bold
        display: inline-block
        color: white

      &:after
        content: ''
        background-image: url('/public/images/structure/arrow_right.png')
        height: 9px
        width: 11px
        margin-left: 5px
        display: inline-block
+media-query(1750px)
  .invest-page
    .header-image
      .invest
        p
          max-width: none

+media-query(1600px)
  .invest-page
    .header-image
      .invest
        h1
          margin-bottom: 10px
        .why
          margin: 20px 0
          p
            margin-bottom: 15px
        .price
          p
            margin-bottom: 0

    .invest-explain
      .inner-text
        width: 50%

+media-query(1350px)
  .invest-page
    .header-image
      .header-text

        h3 br
          display: block

+media-query(1200px)
  .invest-reasons
    .text-holder
      background: transparent
      >div
        .inner-text
          width: 100%
          background: white
          img
            display: block

        .button
          position: relative
          width: 100%

        .image-container
          display: none
      #rendement-text
        .inner-text
          padding-bottom: 0

  .invest-page
    .header-image
      .header-text
        left: 7.5%

        h3
          +font-light(26px, 38px)
          padding-right: 0
        p
          +font-default(20px, 22px)
          padding-right: 0

      .invest
        p
          +font-default(14px, 16px)
        h1
          +font-bold(22px, 24px)
          strong
            +font-bold(26px, 28px)
        .why
          margin: 15px 0
          p
            margin-bottom: 8px
            span
              width: 22px
        .price
          p
            +font-default(14px)
            strong
              +font-bold(24px, 24px)
+media-query(1050px)
  .invest-page
    .invest-explain
      .invest-warning-1
        display: none
      .invest-warning-2
        display: block
        min-width: 375px

    .header-image
      .invest
        p
          margin-bottom: 10px
        h1
          +font-bold(16px, 16px)
          strong
            +font-bold(18px, 18px)

+media-query(950px)
  .invest-page
    .invest-explain
      .image-container
        display: none
      .inner-text
        width: 100%
        >.resort_player
          display: block

  .invest-reasons
    .reasons-block
      min-width: initial
      ul
        display: block

        li
          float: left
          width: 50%
          &.clear
            display: block
            float: left
            clear: both
            height: 0px !important

    .text-holder
      min-width: initial

//+media-query(700px)
//  .invest-page
//    .header-image
//      .header-text
//        right: 9.5%
//        h3
//          +font-light(30px, 38px)

+media-query(675px)
  .invest-page
    .header-image
      .header-text
        display: none

+media-query(450px)
  .invest-page
    .invest-explain
      .invest-warning-2
        display: none
      .invest-warning-3
        display: block

    .header-image
      .header-text
        width: 70%

  .invest-reasons
    .reasons-block
      ul
        li
          .icon-holder
            height: 40px

          span
            height: 25px !important