.home-menu-row
  position: relative
  padding: calc(100vw / 12) 0 0

  +respond-to-width-beyond(1440)
    padding: 120px 0 0

  .grid-row
    position: relative
    z-index: 3

  .streamer
    height: calc(100vw / 12)
    +flex(space-between, flex-end)

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

    p
      position: relative
      bottom: -9px
      width: column(9, 12)
      max-width: 600px
      margin: 0
      padding-left: 30px
      font-size: 1.2rem
      line-height: 1.6
      color: $brown

    .button-placeholder
      display: inline-block
      vertical-align: bottom
      width: column(3, 12)
      padding-left: 20px
      +flex(flex-start, flex-end)

      .button
        color: $brown
        border-color: $brown
        background-color: transparent
        transition: background-color 0.3s

        .arrow
          +sprite(470px 1px, 19px, 13px)
          margin-left: 20px


        &:hover
          color: white
          background-color: $brown

          .arrow
            background-position: -470px -29px

    +respond-to-width(1200)
      display: block
      height: auto

      p
        width: 100%
        bottom: 0
        padding-right: 50px

      .button-placeholder
        margin: 50px 0
        width: 100%
        padding-left: 30px

  .menu
    display: block

    .nav-item
      display: inline-block
      vertical-align: top
      width: column(3, 12)
      padding: calc(100vw / 12 * 2) 30px calc(100vw / 12 * 2)

      +respond-to-width-beyond(1440)
        padding: 240px 30px 240px

      .main-link
        position: relative
        +flex(flex-start, center)
        text-decoration: none
        transform: translate3d(0, 0, 0)
        transition: transform 0.5s ease-in-out

        .icon
          +flex(center, center)
          width: 30px
          height: 30px

          &:before
            content: ''
            display: inline-block

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

        .arrow
          position: absolute
          right: 0
          top: 10px
          display: block
          +sprite(200px 255px, 21px, 12px)
          opacity: 1
          transform: translate3d(0,0,0)
          transition: opacity 0.4s

        &:hover
          &.only-one
            p
              color: $lightGrey


      ul
        padding: 0 0 0 35px
        margin: -24px 0 0
        list-style: none
        font-size: 0.9rem
        font-weight: medium()
        line-height: 1.2

        li
          position: relative
          padding-left: 40px
          opacity: 0
          transform: translate3d(30px, 0, 0)
          transition: transform 0.4s, opacity 0.4s
          transition-delay: 0s

          + li
            a
              padding-top: 10px

          &:first-of-type
            transform: translate3d(0,0,0)

            &:before
              position: absolute
              left: 0
              top: 12px
              content: ''
              display: block
              width: 20px
              height: 2px
              background-color: $blue
              transform: translate3d(-30px, 0, 0)
              transition: transform 0.4s

          a
            display: inline-block
            padding-bottom: 10px
            text-decoration: none
            color: $lightBrown
            transition: color 0.3s, opacity 0.2s

            &:hover
              color: $black

          &.more
            a
              color: $blue
              font-size: 0.8rem
              .arrow
                display: inline-block
                margin-left: 6px
                +sprite(338px 148px, 12px, 9px)
                transform: translate3d(0,0,0)
                transition: transform 0.3s

              &:hover
                opacity: 0.5
                .arrow
                  transform: translate3d(5px, 0, 0)

        +respond-to-width(1500)
          padding: 0 0 0 40px
          li
            padding-left: 0

            &:first-of-type
              &:before
                left: -40px

      &:hover
        .main-link
          .arrow
            opacity: 0

        &.dropout
          .main-link
            transform: translate3d(0, -75px, 0)
          ul
            li
              transform: translate3d(0, 0, 0)
              opacity: 1

              @for $i from 1 through 8
                &:nth-child(#{$i})
                  transition-delay: #{($i - 1) * 0.04}s

              &:before
                transform: translate3d(0,0,0)


      &.about .main-link .icon:before
        +sprite(412px 28px, 26px, 25px)
      &.specialisms .main-link .icon:before
        +sprite(355px 25px, 27px, 22px)
      &.segments .main-link .icon:before
        +sprite(385px 28px, 25px, 25px)
      &.machine-park .main-link .icon:before
        +sprite(278px 229px, 25px, 25px)

  &:hover
    +respond-to-width-beyond(1300)
      .menu
        .nav-item
          .main-link
            will-change: transform
            p
              will-change: color
          ul
            li
              will-change: transform, opacity

  +respond-to-width(1300)
    .menu
      padding: calc(100vw / 12) 0 calc(100vw / 12)
      .nav-item
        display: block
        width: 100%
        padding-top: 0
        padding-bottom: 0

        + .nav-item
          margin-top: 40px

        .main-link
          transform: translate3d(0,0,0) !important

          .arrow
            display: none

          &:hover
            p
              color: $lightGrey 

        ul
          display: none
          margin: 0
          padding-top: 20px
          padding-bottom: 20px
          li
            opacity: 1
            transform: translate3d(0,0,0)

            &:first-of-type
              &:before
                transform: translate3d(0,0,0)

  +respond-to-width(700)
    position: relative
    z-index: 2
    background-color: white
    .grid-row
      width: 100%

    .streamer
      p
        max-width: none

      .button-placeholder, p
        padding-right: 20px
        padding-left: 20px

    .menu
      padding-left: 20px
      padding-right: 20px

      .nav-item
        padding-left: 0
        padding-right: 0