section#nieuwsgierig
  background-color: $white

  .content
    +glashelder-outer-container()
    position: relative

    .arrow
      position: relative
      display: block
      max-width: 455px
      width: 100%
      margin: 0 auto
      text-align: center
      font-family: $font-sans
      top: -32px
      text-decoration: none
      +media($ipad-portrait)
        display: none

      &:before
        content: ''
        position: relative
        display: block
        height: 32px
        max-width: 400px
        z-index: 99
        margin: 0 auto
        background-color: $brand-secondary
        background-image: -moz-linear-gradient(top,  rgba(0,0,0,0) 75%, rgba(0,0,0,.1) 100%) /* FF3.6+ */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.1))) /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* Chrome10+,Safari5.1+ */
        background-image: -o-linear-gradient(top,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* Opera 11.10+ */
        background-image: -ms-linear-gradient(top,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* IE10+ */
        background-image: linear-gradient(to bottom,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* W3C */

      h3
        color: $white

      .arrow-body
        width: 100%
        padding-top: 25px
        background-color: $brand-secondary
      .arrow-tip
        width: 100%

    & > h2
      text-align: center
      font-size: 32px
      +media($ipad-portrait)
        text-align: left

    & > h3
      text-align: center
      font-size: 1.5em
      font-family: $font-serif
      font-weight: normal
      font-style: italic
      line-height: 1.5em
      margin-top: 3em
      margin-bottom: 3em
      opacity: 0
      +transition(opacity 1s)
      +transition-delay(.25s)
      &.on-screen
        opacity: 1

    .button-large
      margin-bottom: 3em
      opacity: 0
      +transition(opacity 1s)
      +transition-delay(.25s)
      &.on-screen
        opacity: 1

    .col
      +span-columns(4)

      display: inline-block
      
      +media($ipad-portrait)
        +span-columns(12)

      opacity: 0
      +transition(opacity 1s)
      &.on-screen
        opacity: 1
      &:nth-child(2)
        +transition-delay(.25s)
      &:nth-child(3)
        +transition-delay(.5s)
      &:nth-child(4)
        +transition-delay(.75s)

      h3
        text-align: center
        font-size: 1.35em
        margin-bottom: 2em

        +media($ipad-portrait)
          text-align: left
          display: inline-block
          margin-bottom: 0

        .count
          display: block
          font-family: $font-serif
          font-size: 1.25em
          margin-bottom: 1em

          +media($ipad-portrait)
            display: inline-block
            margin-right: 10px
            margin-bottom: 0