body > .mobile
  +media($iphone-portrait)
    display: block


body > header
  +media($iphone-portrait)
    display: none
  position: fixed
  left: 0
  right: 0
  top: 0
  height: 100px
  background-color: $white
  color: $white
  z-index: 1000
  +transition(all .75s cubic-bezier(0.500, 0.010, 0.000, 1.000))

  .content
    +glashelder-outer-container()

  .page-heading
    +span-columns(6)
    +transform-origin(left center)
    +transition(transform .75s cubic-bezier(0.500, 0.010, 0.000, 1.000))
    +media($ipad-portrait)
      +span-columns(4)
      +transform(scale(.8))
    white-space: nowrap
    line-height: 0

    a
      text-decoration: none

    .logo-embleem
      opacity: 1
      +transition(opacity .2s cubic-bezier(0.500, 0.010, 0.000, 1.000))

    h1, h2
      +transition(transform .75s cubic-bezier(0.500, 0.010, 0.000, 1.000))

    h1, h2, .logo-embleem
      position: relative
      display: inline-block
      margin: 0
      padding: 0
      background-repeat: no-repeat
      background-position: left center
      text-indent: -9999px
      & .inner
        display: block
        width: 100%
        height: 100%
        background-repeat: no-repeat
        background-position: left center
        opacity: 0
        +transition(opacity .75s cubic-bezier(0.500, 0.010, 0.000, 1.000))

    .logo-embleem
      background-image: url(../img/embleem.svg)
      width: 50px
      height: 60px
      top: 15px

    .logo
      background-image: url(../img/glashelder.svg)
      width: 145px
      height: 32px
      top: 29px
      left: 10px
      .inner
        background-image: url(../img/glashelder-white.svg)

    .logo-sub
      background-image: url(../img/tekst-communicatie.svg)
      width: 133px
      height: 13px
      top: 58px
      left: -81px
      .inner
        background-image: url(../img/tekst-communicatie-white.svg)


  .menu
    +span-columns(6)
    +media($ipad-portrait)
      +span-columns(8)
    position: relative
    white-space: nowrap
    text-align: right
    top: 30px
    +transition(transform 1s)
    ul
      display: inline-block
      height: 30px
      list-style: none
      margin: 0
      padding: 0
      border-bottom: 2px $light-gray solid
      +transition(border-bottom 1s)

      li
        position: relative
        display: inline-block
        +box-sizing(border-box)

        a
          position: relative
          display: block
          top: 1px
          height: 29px
          line-height: 29px
          font-family: $font-sans
          color: $light-gray
          text-decoration: none
          font-size: 20px
          margin-left: 20px
          +transition(color 1s, border-bottom 1s)
          +media($ipad-portrait)
            font-size: 16px
            font-weight: bold

      li:first-child a
        margin-left: 0

      li.active a, li:hover a
        font-family: $font-sans
        color: $brand-color
        border-bottom: 2px $brand-color solid

body.scrolled > header
  height: 75px
  background-color: $brand-color
  color: $white

  .logo-embleem
    opacity: 0

  h1
    +transform(translate(-65px,-5px))
    .inner
      opacity: 1

  h2
    +transform(translate(32px,-24px))
    .inner
      opacity: 1

    h1, h2, .logo-embleem
      position: relative
      display: inline-block
      margin: 0
      padding: 0
      background-repeat: no-repeat
      background-position: left center
      text-indent: -9999px

  .menu
    +transform(translate(0px, -10px))

    ul
      border-bottom: 2px #aadafd solid
    ul li a
      color: #aadafd
      border-bottom: 2px #aadafd solid
    ul li.active a, ul li:hover a
      color: $white
      border-bottom: 2px $white solid