.sky-background
  background-image: url('/img/cloud_background.jpg')
  background-size: cover
  background-position: 50%
  padding: 160px 0 100px

  .content-container
    h2, h3
      +font-default(21px, 26px)
      height: 60px
      color: white
    p, em, li
      +font-light(18px, 24px)
      font-size: 16px
      line-height: 22px
      color: $gray
      strong
        color: white

  &.two-text-content
    .content-container
      +flex(center, flex-start)

    .right-text, .left-text
      display: inline-block
      width: $contentGrid*4
      padding: 0 $contentGrid/2
      &.no-title
        padding-top: 60px
  &.home-sky
    padding-top: 150px
  &.three-columns
    .content-container
      +flex(space-between, flex-start)
      padding: 0 $contentGrid

    .icon-column
      display: inline-block
      width: $contentGrid*3
      text-align: center
      .icon
        text-align: center
        margin-bottom: 30px
        height: 55px

      &.home_administration
        .icon:before
          content: ''
          +sprite(-210px -155px, 80px, 55px)
          display: inline-block

      &.home_information
        .icon:before
          content: ''
          margin-top: 8px
          +sprite(-374px -0px, 67px, 41px)
          display: inline-block

      &.home_communication
        .icon:before
          content: ''
          +sprite(-524px -80px, 64px, 44px)
          display: inline-block
          margin-top: 4px
  &.two-columns
    padding: 180px 0 130px
    .content-container
      +flex(space-between, flex-start)
      padding: 0
      max-width: 960px

    .icon-column
      display: inline-block
      width: 50%
      padding: 0 4%
      text-align: left
      .icon
        display: none
      h3
        max-width: 300px

  &.full-text
    padding: 100px 0 260px
    text-align: center
    h1
      +font-default(32px, 48px)
      font-size: 28px
      line-height: 32px
      color: white
    p, em, li
      +font-light(20px, 30px)
      font-size: 18px
      line-height: 28px
      max-width: 680px
      margin: auto
    .currency-switch
      list-style: none
      +flex(center, center)
      padding: 0
      text-align: center
      li
        display: inline-block
        width: auto
        margin: 0 10px
        padding: 0 0 3px
        font-size: 15px !important
        line-height: 20px !important
        cursor: pointer
        border-bottom: 2px solid transparent
        +transition(color 0.3s)

        &:hover
          color: white

        &.active
          color: white
          font-weight: bold
          border-bottom: 2px solid white
  &.feature-intro
    padding-bottom: 125px
    h1
      position: relative
      display: inline-block
      margin-bottom: 35px
      &:before
        content: ''
        +sprite(-35px -67px, 31px, 28px)
        display: inline-block
        position: absolute
        left: -50px
        top: 4px
    p, em, li
      +font-default(18px, 24px)
.orange-row
  padding: 70px 0
  background-color: $orange
  text-align: center
  position: relative

  &:before
    content: ''
    pointer-events: none
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 40px
    background-image: url('/img/horizontal-shadow.png')
    background-size: contain
    background-repeat: repeat-x

  h1
    color: white
    +font-default(34px, 46px)
    margin: 0 0 45px

  h2
    color: white
    +font-default(30px, 40px)
    margin: 0 0 30px

  p, em, li
    +font-light(28px, 40px)
    font-size: 24px
    line-height: 36px
    margin: 0 0 40px
    color: white

  .button
    border-radius: 4px
    border: 2px solid white
    display: inline-block

    a
      display: block
      padding: 10px 20px 10px 35px
      +font-default(21px, 25px)
      color: white
      &:after
        content: ''
        margin-left: 20px
        +arrowWhite
        +translate3d(0,0,0)
        +transition(all .3s)
    &:hover
      a:after
        +translate3d(5px, 0,0)

  &.trial
    h1
      +flex(center, center)
      &:before
        content: ''
        +sprite(-288px -75px, 56px, 53px)
        display: inline-block
        margin-right: 25px

.data-security-row
  background-color: $lighterGray
  padding: 50px 0 60px

  h3
    +font-default(22px, 36px)
    color: $darkBlue
    margin-bottom: 45px
    text-align: center
  .items
    +flex(center, center)
    +flex-direction(row)
    +flex-wrap(wrap)
    +flex-flow(row wrap)
    .item
      width: $contentGrid
      min-width: 120px
      padding: 0 20px
      position: relative
      border-right: 2px solid $gray
      &:last-of-type
        border-right: none

      .image
        height: 80px
        width: 100%
        background-size: contain
        background-position: 50%
        background-repeat: no-repeat
      p
        +font-light()
        text-align: center
        color: $darkBlue
        font-size: 15px !important
        line-height: 18px !important
  .link
    text-align: center
    a
      +font-light()
      text-align: center
      color: $darkBlue
      font-size: 16px !important
      line-height: 18px !important
      .arrow
        margin-left: 10px
        +arrowBlue
        +translate3d(0,0,0)
        transition: all 0.3s
    &:hover
      a
        .arrow
          +translate3d(5px,0,0)
.video-row
  margin-top: -40px
  padding-bottom: 140px
  .video-block
    width: 95%
    max-width: 960px
    margin: auto
    .video-wrapper
      position: relative
      padding-bottom: 53.6% /* 16:9 */
      padding-top: 25px
      height: 0
      iframe, .video-overlay
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
      .video-overlay
        z-index: 2
        +flex(center, center)
        opacity: 1
        background-image: url('/img/videoOverlay/home-video-nl.jpg')
        background-position: 50%
        background-size: cover
        cursor: pointer
        +transition(all 0.2s)
        .button
          width: 25%
          max-width: 150px
          +transform(scale(1))
          +transition(all 0.4s)
          img
            width: 100%
        &:hover
          .button
            +transform(scale(0.8))

        &.hide
          opacity: 0
          pointer-events: none
          +transition(all 0.5s)
          +transition-delay(0.7s)
          .button
            +transition(all 0.8s)
            +transform(scale(0.3))

  .line
    width: 98%
    max-width: 1200px
    margin: auto
    height: 1px
    background-color: $lighterGray
    display: block

.divide-row
  height: 60px
  width: 100%
  &.orange
    background-color: $orange
  &.negative-margin
    margin-top: -120px

+media-query(1050px)
  .sky-background
    &.home-sky
      padding-top: 90px
  .video-row
    padding-bottom: 80px
+media-query(950px)
  .sky-background
    &.three-columns
      .content-container
        display: block
        .icon-column
          width: 100%
          max-width: 600px
          margin-left: auto
          margin-right: auto
          padding-bottom: 40px
          border-bottom: 2px solid $lightestGray
          margin-bottom: 40px
          +flex(space-between, center)
          .icon
            width: 15%
          .content
            width: 75%
            text-align: left
            h3
              height: auto

          &:last-of-type
            border-bottom: none
            margin-bottom: 0

+media-query(900px)
  .sky-background
    &.two-text-content
      .right-text, .left-text
        width: $contentGrid*5

+media-query(800px)
  .sky-background
    .content-container
      h2, h3
        +font-default(24px, 28px)
      p
        +font-light(20px, 26px)

    &.two-text-content
      .right-text, .left-text
        width: $contentGrid*6

+media-query(700px)
  .sky-background
    &.three-columns
      .content-container
        padding: 0
    &.two-columns
      .content-container
        +flex-rows
      .icon-column
        width: 100%
        padding: 0 10%
        &:first-of-type
          margin-bottom: 60px
  .data-security-row
    .items
      .item
        width: 30%
        margin-bottom: 60px
        &:nth-of-type(3)
          border-right: none

+media-query(600px)
  .sky-background
    &.two-text-content
      .content-container
        display: block
      .right-text, .left-text
        display: block
        margin: auto
        width: $contentGrid*10
        &.no-title
          padding-top: 30px

+media-query(500px)
  .sky-background
    &.three-columns
      .content-container
        .icon-column
          .icon
            +transform(scale(0.7))
            +transform-origin(50% 50%)

+media-query(420px)
  .sky-background
    &.three-columns
      .content-container
        .icon-column
          .content
            padding: 0 10px
  .data-security-row
    .items
      .item
        width: 140px
        margin-bottom: 60px
        &:nth-of-type(2), &:nth-of-type(4)
          border-right: none
        &:nth-of-type(3)
          border-right: 2px solid $gray
  .orange-row
    h1
      +font-default(28px, 40px)

    h2
      +font-default(24px, 30px)

    p
      +font-light(21px, 32px)