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

    .lacom &
      width: 198px
      height: 50px

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

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

    .lcHydraulics &
      width: 198px
      height: 52px

      .large
        +sprite(1px 108px, 198px, 52px)

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

  .left-wrapper
    +flex(flex-end, center)
    color: palette(secondary, 200)

    a
      color: palette(secondary, 200)
      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: palette(secondary, 400)

      //&: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(palette(secondary, 200), 0.5)
        transition: color 0.3s

        + *
          margin-left: 3px

        &:after
          content: ''
          position: absolute
          bottom: 0
          left: 0
          width: 100%
          height: 2px
          background-color: rgba(palette(secondary, 200), 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: palette(secondary, 200)
        &:after
          transform: scale3d(1, 1, 1)
          background-color: palette(secondary, 200)

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

      p
        margin: -5px 10px 0 0
        font-weight: semibold()
        font-size: 1rem
        line-height: 1
        color: palette(neutral, 900)
        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: palette(neutral, 900)
          transition: transform 0.6s, background-color 0.3s

      &:hover
        p
          color: rgba(palette(neutral, 900), 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
      .lacom &
        transform: translate3d(0, 7px, 0)

      .lcHydraulics &
        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: palette(secondary, 200)

        .icon
          span
            background-color: palette(secondary, 200)
            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 &
      .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: palette(neutral, 900)

          .icon
            span
              background-color: palette(neutral, 900)