.home-page
  background-color: #f1f1f1
  margin-top: 95px
  .invest
    .link
      border: 2px solid white
      border-radius: 7px
      display: inline-block
      width: auto
      background-color: #56AED4
      margin-top: -10px

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

      a
        display: block
        padding: 10px 25px
        color: white
        +font-default(16px)
        &:after
          content: ''
          background-image: url('/public/images/structure/arrow_right.png')
          height: 9px
          width: 11px
          margin-left: 5px
          display: inline-block

      &.green
        background-color: #75db33
        a
          font-weight: bold
        &:hover
          border: 2px solid #75db33
          background-color: white

          a
            color: #75db33
            font-weight: bold
            &:after
              background-image: url('/public/images/structure/arrow_right_green.png')

.home-page.invest-page .invest-explain
  padding-bottom: 120px
  width: 90%
  max-width: 1400px

.inline-nav
  background: url('/public/images/static/home/inline_nav.jpg') 50% 50% no-repeat
  background-size: cover
  .content-container
    width: 90%
    max-width: 1400px
    margin: auto
    padding: 340px 0 20px
    +flex(space-between, flex-end)

    .btn
      border-radius: 7px
      display: inline-block
      width: calc((100% - 100px)/3)
      background-color: white
      margin-top: -10px

      &:hover
        a
          &:after
            +translate3d(10px, 0,0)
      a
        display: block
        padding: 10px 25px
        +font-semi-bold(16px)
        color: #575757
        position: relative
        &:after
          content: ''
          position: absolute
          right: 30px
          top: 17px
          background-image: url('/public/images/structure/arrow_right_gray.png')
          +translate3d(0,0,0)
          -webkit-transition: all .4s
          transition: all .4s
          height: 9px
          width: 11px
          display: inline-block

.news
  position: relative

  .background
    position: absolute
    width: 100%
    height: 50%
    left: 0
    bottom: 0
    background: white

  .content-container
    width: 90%
    max-width: 1400px
    margin: auto
    +flex(space-between, flex-start)

    .block-button
      height: 60px
      width: 100%
      position: absolute
      bottom: 0
      right: 0
      background: #56AED4

      p
        +font-bold()
        line-height: 60px !important
        font-size: 16px !important
        padding: 0 25px
        color: white
        &:after
          content: ''
          background-image: url('/public/images/structure/arrow_right.png')
          height: 9px
          width: 11px
          margin-left: 15px
          display: inline-block
          +translate3d(0,0,0)
          -webkit-transition: all .3s
          transition: all .3s

    .article
      width: calc((100% - 8px) / 12 * 6)
      background: white
      border: 2px solid #f1f1f1
      border-bottom: none
      position: relative
      display: inline-block

      .block-button
        width: calc(100% / 5 * 3)

        &:hover
          p:after
            +translate3d(15px,0,0)


      .image
        position: absolute
        height: 100%
        width: calc(100% / 5 * 2)
        background-size: cover
        background-position: 50% 50%

      .content
        width: calc(100% / 5 * 3)
        margin-left: calc(100% / 5 * 2)
        margin-top: 0
        padding: 25px
        box-sizing: border-box
        padding-bottom: 70px

        h4
          +font-bold()
          line-height: 24px !important
          font-size: 16px !important
          color: #cdae6e

        p
          a
            color: #56AED4
            +font-semi-bold()
            font-style: italic
            font-size: 14px !important
            line-height: 24px !important

    .build
      width: calc((100% - 8px) / 12 * 5)
      margin-left: calc((100% - 8px) / 12)
      position: relative
      display: inline-block
      border: 2px solid #f1f1f1
      border-bottom: none

      &:hover
        .block-button
          p:after
            +translate3d(15px,0,0)

      .image
        position: absolute
        width: 100%
        height: calc(100% - 60px)
        background-size: cover
        background-position: 50% 50%

.invest-reasons-home
  padding: 125px 0 100px
  background: white
  text-align: center
  h2
    max-width: 80%
    margin: auto
    text-align: center
    color: #56afd5
    +font-semi-bold(36px, 45px)
  h4
    color: #575757
    max-width: 80%
    margin: auto
    text-align: center
    +font-default(26px, 36px)

  .golf
    margin: 15px auto
    width: 109px
    height: 15px
    background-size: contain
    background-position: 50% 50%
    background-repeat: no-repeat
    background-image: url('/public/images/structure/wave2.png')

  p
    max-width: 80%
    margin: auto
    text-align: center
    +font-light(20px)

  .btn
    border-radius: 7px
    display: inline-block
    background-color: #575757
    margin-top: -10px
    border: 2px solid white
    padding: 0 10px

    &:hover
      border: 2px solid #575757
      background: white
      a
        color: #575757
        &:after
          background-image: url('/public/images/structure/arrow_right_gray.png')
    a
      display: block
      padding: 10px 25px
      +font-semi-bold(16px)
      color: white
      position: relative
      &:after
        content: ''
        background-image: url('/public/images/structure/arrow_right.png')
        height: 9px
        width: 11px
        margin-left: 15px
        display: inline-block

  .reasons-block
    width: 90%
    margin: auto
    margin-bottom: 40px
    max-width: 1200px
    ul
      width: 100%
      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

        .placeholder
          width: 100%
        p
          +font-semi-bold()
          font-size: 13px !important
          line-height: 16px !important
          text-transform: uppercase
          text-align: center
          color: #ccae6c
          margin: 0
          max-width: none

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

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

        &.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

+media-query(1100px)
  .news
    .background
      height: 75%
    .content-container
      display: block

      .article, .build
        width: 100%
        margin-left: 0

      .build
        margin-top: 40px

+media-query(960px)
  .inline-nav
    background-position: 0 50%
    .content-container
      padding-top: 150px
      display: block
      .btn
        margin-top: 20px
        display: block
        width: 260px

  .invest-reasons-home
    .reasons-block
      ul
        max-width: 600px
        display: block
        margin-left: auto
        margin-right: auto
        li
          float: left
          width: 50%
          &:nth-child(2n + 1)
            clear: both
          &.clear
            display: block
+media-query(680px)
  .news
    .content-container
      .article
        .block-button
          width: 100%
        .image
          width: 100%
          height: 250px
          position: relative
          top: 0
          left: 0
        .content
          width: 100%
          margin-left: 0
+media-query(430px)
  .invest-reasons-home
    .reasons-block
      ul
        li
          float: none
          width: 100%
          max-width: 180px
          margin: auto