header
  position: relative
  background: $blue-300
  background-image: url('/img/header_bg.jpg'), linear-gradient(0deg, $blue-300 0%, $blue 100%)
  background-repeat: no-repeat
  background-size: cover
  color: white

  .production &, .production-sub &, .project-sub &
    overflow: hidden

  &:before
    content: ''
    display: block
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    z-index: 0
    +background(linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 50%))


  > .grid-row
    position: relative
    height: 360px
    padding-top: 45px

    .home &
      height: 930px

      +respond-to-width(960)
        height: auto

    .top
      width: 100%
      padding: 10px 0
      overflow: visible
      z-index: 10

      .grid-row
        position: relative

        .logo
          display: block
          background: transparent url('/img/svg/Logo_on_dark.svg') no-repeat
          background-size: contain
          width: 225px
          height: 106px
          transform: translate3d(0,0,0)
          transition: width 0.3s, height 0.3s, transform 0.3s

        a.button
          min-width: 200px
          opacity: 1
          cursor: pointer
          pointer-events: all
          position: absolute
          right: 230px
          top: 50%
          margin-top: -25px
          z-index: 6

        .toggle-menu
          width: auto
          height: 100%
          z-index: 9999
          cursor: pointer
          position: absolute
          right: 0
          top: 0

          font-size: 1rem
          font-weight: bold
          line-height: 19px

          +flex(center, center)

          &:after
            content: ""
            display: block
            background-color: white
            width: 60px
            height: 0
            position: absolute
            top: -55px
            right: 0
            opacity: 0
            z-index: 1
            +transition(height 0.6s, opacity 0.6s)

          p
            margin: 0
            margin-right: 13px
            +transition( transform 0.6s)

          .icon
            width: 30px
            z-index: 5
            +transition(width 0.6s)

            span + span
              margin-top: 4px

            span
              width: 100%
              height: 3px
              display: block
              opacity: 1
              transform: scale3d(1, 1, 1)
              transform-origin: 0 50%
              background-color: white
              +transition(all 0.6s)

          &:hover
            .icon
              span
                transform: scale3d(1, 1, 1) !important


          &.active
            &:after
              height: 140px
              opacity: 1

            p
              transform: rotate(-90deg) translate3d(0, -30px,0)

            a.button
              opacity: 0
              cursor: default
              pointer-events: none

            .icon
              span
                transform: none

            .icon
              width: 20px
              span
                height: 2px
                background-color: $blue
                margin-left: -18px
                &:last-child
                  opacity: 0
                &:first-child
                  transform: rotate(45deg) scale3d(1, 1, 1) !important
                &:nth-child(2)
                  transform: rotate(-45deg) scale3d(1, 1, 1) !important
                  margin-top: 12px

      &.active
        .grid-row
          .logo
            width: 128px
            height: 60px
            transform: translate3d(0,4px,0)

    .home-streamert
      margin-left: 0
      width: column(5, 12)
      color: white
      height: 100%
      overflow: visible
      +flex(flex-start, center)

      // added for the sticker, remove when you remove the sticker
      +respond-to-width(860)
        padding-right: 36%

      +respond-to-width(630)
        padding-right: 0
        position: relative

      &:before
        content: ''
        display: block
        position: absolute
        width: 300px
        height: 300px
        background-image: url('/img/circles_and_triangles.png')
        top: 175px
        right: -70px

      .streamert-content
        padding-bottom: 10px

      p
        width: 10%
        margin-top: 0
        opacity: 0
        font-size: 0.75rem
        font-weight: bold
        letter-spacing: 1px
        line-height: 1rem
        color: rgba(white, 0.6)
        text-transform: uppercase
        //20px omhoog, delay 0.2s
        +transform(translate3d(0, 20px, 0))
        +animation(text 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.1s forwards)


      h1
        font-size: 2.875rem
        font-weight: 500
        line-height: 3.375rem
        margin-bottom: 45px
        opacity: 0
        +transform(translate3d(0, 30px, 0))
        +animation(text 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 1.1s forwards)
        //30px omhoog, delay 0.3s

      a.button
        opacity: 0
        background-color: $red
        z-index: 25
        +transform(translate3d(0, 60px, 0))
        +animation(text 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 1.1s forwards)

        &:hover
          background-color: lighten($red, 10%)


      // also remove the queries on the home-streamert div above
      .grand-opening-sticker 
        width: 250px
        height: 250px
        text-align: center
        border-radius: 999px
        background-color: $red-600
        box-shadow: 5px 5px 10px 5px rgba(0,0,0, 0.2)
        opacity: 0
        position: absolute
        right: 10%
        bottom: 5%
        z-index: 999
        transform: rotate(-7deg)
        +flex(center, center)
        +animation(sticker 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s forwards)

        +respond-to-width(1200)
          bottom: -5%

        +respond-to-width(960)
          bottom: 0
          right: 0

        +respond-to-width(860)
          bottom: auto
          top: 10%
          right: 0

        +respond-to-width(630)
          position: relative
          margin-top: -50px
          top: 0
          right: auto
          left: calc(100% - 250px)

        +respond-to-width(450)
          margin-top: 0
          top: 30px


        p
          width: 100%

          font-size: 1.5rem
          line-height: 1.5
          color: white
          margin: 0

    .diagonal-line
      top: 30px
      left: 30%

      &.second
        top: auto
        bottom: 170px
        left: 13%
        width: 500px

      &.third
        top: auto
        bottom: -71px
        left: -13%
        width: 200px
        z-index: 9

    .mouse
      position: absolute
      display: block
      width: 21px
      height: 35px
      top: 840px
      opacity: 0
      left: 50%
      margin-left: -11px
      z-index: 10
      +transform(translate3d(0,20px,0))
      +animation(text 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 1.1s forwards)

      .vertical-line
        display: block
        position: absolute
        width: 0
        height: 60px
        left: 50%
        margin-top: 5px
        opacity: 0.8
        border-left: solid 1.5px white

    .production
      position: absolute
      top: 0
      height: 1727px
      left: column(5,12)
      width: 960px

      .hexagon
        position: absolute
        display: block
        top: -3%
        left: -14.3%
        width: 95%
        height: 17%
        z-index: 0
        +transform(rotate(135deg) skew(-45deg))
        background-color: $red-600

    .hexagons
      position: absolute
      width: column(8,12)
      height: 1727px
      left: column(5, 12)
      top: 0
      z-index: 5
      overflow: visible

      +respond-to-width(1696)
        overflow: hidden
        width: column(7,12)
        //left: column(6, 12)

      .hexagon1
        position: absolute
        display: block
        top: 175px
        left: -118px
        width: 806.5px
        height: 16%
        opacity: 0
        +transform(rotate(135deg) skew(-45deg))
        background-color: $red-600
        +animation(hex1 0.9s cubic-bezier(0.250, 0.100, 0.250, 1) 0.5s forwards)

      .hexagon2
        position: absolute
        display: block
        top: 210px
        left: 0
        width: 960px
        height: 35%
        z-index: 5
        opacity: 0
        +animation(hex2 0.9s cubic-bezier(0.250, 0.100, 0.250, 1) 0.7s forwards)

        svg
          position: absolute

        img
          position: relative
          +animation(image1 80s linear 0.9s infinite)

          //&.clip-polygon
          //  -webkit-clip-path: polygon(571px 12px, 961px 12px, 389px 583px, 0px 584px)
          //  clip-path: polygon(571px 12px, 961px 12px, 389px 583px, 0px 584px)

      .hexagon3
        position: absolute
        display: block
        top: 564px
        left: 272.5px
        width: 806.5px
        height: 16%
        opacity: 0
        +transform(rotate(135deg) skew(-45deg))
        background-color: $red-600
        +animation(hex1 0.9s cubic-bezier(0.250, 0.100, 0.250, 1) 0.9s forwards)


      .triangle1
        position: absolute
        display: block
        top: 789px
        left: 0
        height: 23%
        width: 391.6px
        opacity: 0
        +animation(hex2 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 1.1s forwards)

        img
          position: relative
          +animation(image2 80s linear 0.9s infinite)

          //&.clip-polygon2
          //  -webkit-clip-path: polygon(391px 3px, 391px 393px, 0px 394px)
          //  clip-path: polygon(391px 3px, 391px 393px, 0px 394px)

      .triangle2
        position: absolute
        display: block
        top: 1182px
        left: 0
        width: 480px
        overflow: hidden
        padding-top: 488.625px
        height: 0
        opacity: 0
        +animation(hex2 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 1.1s forwards)

        &:after
          content: ""
          display: block
          position: absolute
          left: 0
          top: 80%
          width: 0
          height: 0
          border-top: 1500px solid $red-600
          border-right: 1500px solid transparent
          margin-top: -1500px

  &.is-small
    > .grid-row
      height: 180px

+keyframes(hex1)
  0%
    opacity: 0
    +transform(rotate(135deg) skew(-45deg) translate3d(-1000px, 0, 0))
  100%
    opacity: 1
    +transform(rotate(135deg) skew(-45deg) translate3d(0, 0, 0))

+keyframes(hex2)
  0%
    opacity: 0
    +transform(translate3d(-500px,500px,0))
  100%
    opacity: 1
    +transform(translate3d(0,0,0))


+keyframes(text)
  0%
    opacity: 0
  100%
    opacity: 1
    +transform(translate3d(0,0,0))


+keyframes(image1)
  0%
    x: -180px
  50%
    x: 0
  100%
    x: -180px

+keyframes(image2)
  0%
    x: -180px
  50%
    x: 0
  100%
    x: -180px

+keyframes(sticker)
  0%
    opacity: 0
    transform: rotate(-7deg) scale(3.0)
  100%
    opacity: 1
    transform: rotate(-7deg) scale(1.0)




+respond-to-width(960)
  header
    height: auto
    min-height: 260px
    overflow: hidden

    &.is-small
      min-height: auto

    > .grid-row
      padding-bottom: 55px
      height: auto

      .top
        .logo
          //background: transparent url('/img/svg/Logo_on_dark.svg') no-repeat
          height: 80px

        .toggle-menu
          &.active
            &:after
              height: 130px

      .mouse
        display: none


    .home &
      height: auto

      .home-streamert
        width: 100%
        margin-top: 90px

        p
          width: 100%

      .hexagons
        display: none

+respond-to-width(768)
  header
    > .grid-row
      .top
        a.button
          display: none

        .grid-row
          .logo
            width: 150px
            height: 75px

          .toggle-menu
            top: -7px

    &.is-small
      > .grid-row
        height: 100px


+respond-to-width(425)
  header
    height: auto
    min-height: 170px

    .projects &
      min-height: 110px

    .sub &
      min-height: 170px