section#home
  padding-top: 75px
  background-image: url(../img/audience.jpg)
  background-size: cover
  background-position: center center
  background-repeat: no-repeat
  height: 795px
  +media($ipad-portrait)
    background-size: auto 550px
    background-position: top center

  .content
    +glashelder-outer-container()

    h1
      position: relative
      font-size: 56px
      line-height: 72px
      font-family: $font-serif
      color: $white
      font-weight: normal
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.55)
      filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135)
      top: 20px
      +media($ipad-portrait)
        top: 30px
        font-size: 42px
        line-height: 1.5em

    a.button
      text-decoration: none
      position: relative
      display: inline-block
      background-color: $brand-secondary
      color: $white
      font-family: $font-sans
      font-weight: bold
      font-size: 18px
      padding: 10px 20px
      left: -10px
      border-radius: 5px
      text-shadow: 0px 0px 10px rgba(darken($brand-secondary, 10), 1)
      +transition(background-color .3s)

      &:hover
        background-color: lighten($brand-secondary, 10)

      &:after
        content: ''
        width: 20px
        height: 20px
        background-image: url(../img/icons/icon-more.svg)
        display: inline-block
        position: relative
        margin-left: 45px
        top: 3px

    .floating-panel
      background-color: $white
      padding: 25px 50px
      width: 100%

section#intro-text
  margin-top: -315px
  overflow: hidden

  .content
    +glashelder-outer-container()

    .col-left

      +span-columns(6)
      +media($ipad-portrait)
        +span-columns(12)

      .inner
        position: relative
        box-sizing: content-box
        padding-top: 40px
        padding-left: 65px
        padding-right: 2.5%
        padding-bottom: 100px
        left: -65px
        width: 100%
        background-color: $white
        +clearfix

        +media($ipad-portrait)
          left: -40px
          padding-left: 40px
          padding-right: 40px

      .text
        display: table
        width: 100%

      p, h3
        +span-columns(5 of 6)
        +media($ipad-portrait)
          +span-columns(12)
      h3
        color: $brand-tint
        margin-bottom: 0


      .item
        display: block
        width: 100%
        +clearfix
        margin-top: 2em
        .icon
          +span-columns(1 of 6)
          width: 45px
          +media($ipad-portrait)
            display: none
        .text
          +span-columns(5 of 6)
          +media($ipad-portrait)
            +span-columns(12)
        h3, p
          margin: 0
          padding: 0
          color: $brand-tint
        h3
          letter-spacing: .075em
          text-transform: uppercase


    .col-right
      +span-columns(6)
      +media($ipad-portrait)
        display: none

      .title
        position: relative
        width: 310px
        background-color: $brand-color
        padding-left: 2.5%
        left: -2.5%
        margin-top: 40px

        h2
          margin: 0
          color: $white
          padding: 30px 60px
          font-size: 20px

      .referentie
        position: relative
        box-sizing: content-box
        width: 100%
        background-color: $brand-tint
        padding: 40px 65px 40px 0px
        border-bottom: 4px solid $brand-light
        padding-left: 2.5%
        left: -2.5%
        &:last-child
          border-bottom: none
        h3, p
          margin: 0
          padding: 0
          padding-left: 60px
        h3
          color: $white
          font-family: $font-serif
        p
          color: $white
          font-style: italic


section#intro-action
  position: relative
  margin-top: -50px

  .content
    width: 100%
    max-width: 620px
    margin: 0 auto

    .nieuwsgierig
      background-color: $brand-tint
      max-width: 450px
      width: 100%
      padding: 35px 55px

      h4, p, a
        color: $white
        margin: 0
        padding: 0
        font-family: $font-sans
        text-decoration: none

      h4
        font-size: 20px
        margin-bottom: 1em


    .top-shadow
      height: 10px
      margin-top: -10px
      background-image: url(../img/topshadow.png)
      max-width: 536px
      width: 100%
      opacity: .5

    .wall-of-fame-call
      color: $white
      font-family: $font-serif
      font-style: italic
      font-weight: normal
      text-align: center
      margin: 2em 0

    .button-large
      margin-bottom: 1em


.error-page
  section#home
    height: auto
    max-height: 100%
    background-attachment: fixed
    +media($ipad-portrait)
      background-size: auto
      background-position: top center

    .floating-panel
      margin: 150px 0 150px 0

  footer
    padding-top: 25px
    .arrow
      display: none