header
  position: fixed
  z-index: 1000
  top: 0
  left: 0
  width: 100%
  +flex(space-between, center)
  padding: 30px 30px 0
  background-color: transparent
  transition: background-color 0.4s, padding 0.4s

  .logo
    position: relative
    transform: translate3d(0,0,0)
    transition: transform 0.3s

    a
      display: block
      text-decoration: none
      transform-origin: 0 50%

    .large, .small
      position: absolute
      left: 0
      top: 0
      opacity: 1
      transition: opacity 0.4s

    .anvil &
      width: 131px
      height: 50px
      .large
        +sprite(1px 1px, 131px, 50px)

      .small
        +sprite(1px 1px, 31px, 33px)

    // ---------------------------- Site specific styling
    .lacom-machinefabriek &
      width: 198px
      height: 50px

      .large
        +sprite(1px 166px, 198px, 50px)

      .small
        +sprite(1px 166px, 47px, 34px)

    .rols-machineonderdelen &
      width: 151px
      height: 51px

      .large
        +sprite(1px 110px, 151px, 51px)

      .small
        +sprite(1px 110px, 38px, 38px)

    .vdb-machinefabriek &
      width: 131px
      height: 50px

      .large
        +sprite(1px 55px, 131px, 50px)

      .small
        +sprite(1px 55px, 35px, 35px)

    .jansen-machining-technology &
      width: 310px
      height: 70px

      .large
        +sprite(1px 287px, 310px, 70px)

      .small
        +sprite(1px 287px, 65px, 60px)


  .left-wrapper
    +flex(flex-end, center)
    color: $lightBrown

    a
      color: $lightBrown
      text-decoration: none

    .phone, .language-menu
      margin-top: -2px
      opacity: 1
      transition: opacity 0.4s

    .phone
      font-weight: bold()
      font-size: 0.8rem
      letter-spacing: 0.07rem
      margin-right: calc(100vw / 12)
      transition: color 0.3s

      +respond-to-width-beyond(1440)
        margin-right: 120px

      +respond-to-width(1550)
        margin-right: 60px

      &:hover
        color: $brown

      //&:hover
      //  color: white !important

    .language-menu
      margin-right: calc(100vw / 12)

      +respond-to-width-beyond(1440)
        margin-right: 120px

      +respond-to-width(1550)
        margin-right: 60px

      span, a
        position: relative
        display: inline-block
        padding: 5px 0
        text-decoration: none
        font-size: 0.8rem
        line-height: 1
        font-weight: bold()
        text-transform: uppercase
        color: rgba($lightBrown, 0.5)
        transition: color 0.3s

        + *
          margin-left: 3px

        &:after
          content: ''
          position: absolute
          bottom: 0
          left: 0
          width: 100%
          height: 2px
          background-color: rgba($lightBrown, 0.5)
          transform: scale3d(0, 1, 1) 
          transform-origin: 100% 50%
          transition: transform 0.4s, background-color 0.3s

        &:hover
          &:after
            transform: scale3d(1, 1, 1)

      span
        color: $lightBrown
        &:after
          transform: scale3d(1, 1, 1)
          background-color: $lightBrown

    .toggle-menu
      +flex(flex-end, center)
      cursor: pointer

      p
        margin: -5px 10px 0 0
        font-weight: semibold()
        font-size: 1rem
        line-height: 1
        color: $black
        transition: color 0.3s

      .icon
        width: 20px

        span + span
          margin-top: 4px

        span
          width: 100%
          height: 2px
          display: block
          transform: scale3d(1, 1, 1)
          transform-origin: 0 50%
          background-color: $black
          transition: transform 0.6s, background-color 0.3s

      &:hover
        p
          color: rgba($black, 0.8)
        .icon
          span
            &:nth-of-type(2)
              transform: scale3d(0.8, 1, 1)

            &:nth-of-type(3)
              transform: scale3d(0.45, 1, 1)

  &.sticky
    background-color: white
    padding: 0 30px

    .logo
      .large
        opacity: 0

      // ---------------------------- Site specific styling
      .anvil &
        transform: translate3d(0, 8px, 0)

      .lacom-machinefabriek &
        transform: translate3d(0, 7px, 0)

      .rols-machineonderdelen &
        transform: translate3d(0, 7px, 0)

      .vdb-machinefabriek &
        transform: translate3d(0, 7px, 0)

      .jansen-machining-technology &
        transform: translate3d(0, 7px, 0)

    .left-wrapper
      .phone
        opacity: 0

      .language-menu
        opacity: 0

  &.menu-active
    background-color: transparent
    padding-top: 30px

    .left-wrapper
      .language-menu, .phone
        opacity: 1

      .phone
        &:hover
          color: white

      .toggle-menu
        p
          color: $lightBrown

        .icon
          span
            background-color: $lightBrown
            opacity: 0
            &:first-of-type, &:last-of-type
              opacity: 1
              width: 17px

            &:first-of-type
              transform: scale3d(1, 1, 1) rotate(45deg) !important
            &:last-of-type
              transform: scale3d(1, 1, 1) rotate(-45deg) !important

    &.sticky
      .logo
        transform: translate3d(0,0,0) !important
        .large
          opacity: 1

  +respond-to-width(700)
    padding-left: 20px
    padding-right: 20px

    &.sticky
      padding-left: 20px
      padding-right: 20px

    .lacom-machinefabriek &
      .logo
        a
          transform: scale3d(0.8, 0.8, 1)

      &.sticky
        .logo
          transform: translate3d(0, 10px, 0)

    .left-wrapper
      .phone, .language-menu
        display: none

    &.menu-active
      background-color: white
      padding-bottom: 20px
      padding-top: 20px

      .left-wrapper
        .toggle-menu
          p
            color: $black

          .icon
            span
              background-color: $black