.line-navigation-container
  width: 85%
  max-width: 1050px
  margin-bottom: -105px
  position: relative
  bottom: -100px
.line-navigation
  position: relative
  z-index: 16

  &:before, &:after
    content: ''
    +sprite(-872px -218px, 102px, 72px)
    display: inline-block
    position: absolute
    z-index: -1
    left: -50px
    bottom: -20px
  &:after
    left: auto
    right: -50px
    +transform(scaleX(-1))

  ul
    list-style: none
    padding: 0 15px
    +flex(space-around, center)
    height: 85px
    background: url('/img/banner-background.svg')
    background-size: contain
    background-repeat: no-repeat
    &:before, &:after
      content: ''
      +sprite(-330px -46px, 18px, 17px)
      display: inline-block
      position: relative
      bottom: -6px

    >p
      position: relative
      &:nth-of-type(1), &:nth-of-type(7)
        bottom: 1px
      &:nth-of-type(2), &:nth-of-type(6)
        bottom: 4px
      &:nth-of-type(3), &:nth-of-type(5)
        bottom: 7px
      &:nth-of-type(4)
        bottom: 9px

    li
      display: inline-block
      color: $lightGray
      opacity: 0.4
      pointer-events: none
      &.active
        opacity: 1
        pointer-events: all
      p, p a
        color: $lightGray
        +font-default()
        font-size: 17px !important
        line-height: 60px !important
        display: block
        +transition(all 0.3s)
      p
        border-right: 2px solid $lightGray
        margin: 0
        padding: 0 15px

        &:last-of-type
          border-right: none
        &:hover a
          color: $beige
        a.active
          color: $blue
          +font-bold()

      &:nth-of-type(1)
        +transform(rotate(-2.5deg))
        margin-bottom: -5px
      &:nth-of-type(2)
        +transform(rotate(-1.3deg))
        margin-bottom: 2px
      &:nth-of-type(3)
        margin-bottom: 7px
        +transform(rotate(-0.9deg))
      &:nth-of-type(4)
        margin-bottom: 10px
        +transform(rotate(-0.6deg))
      &:nth-of-type(5)
        margin-bottom: 10px
        +transform(rotate(0.6deg))
      &:nth-of-type(6)
        margin-bottom: 7px
        +transform(rotate(0.9deg))
      &:nth-of-type(7)
        +transform(rotate(1.3deg))
        margin-bottom: 2px
      &:nth-of-type(8)
        +transform(rotate(2.5deg))
        margin-bottom: -5px

    p
      color: $lightGray
      +font-default()
      font-size: 17px !important
      line-height: 17px !important
.part
  .line-navigation-container
    bottom: -175px

+media-query(1500px)
  .line-navigation-container
    margin-bottom: -150px
    max-width: 720px
  .line-navigation
    &:before, &:after
      content: ''
      background: url('/img/banner-side.svg')
      background-size: contain
      background-repeat: no-repeat
      height: 115px
      width: 140px
    ul
      background: url('/img/noise.png') $darkGray
      +flex(space-around, center)
      +flex-rows
      padding: 15px 60px
      position: relative
      height: auto
      &:before, &:after
        position: absolute
        bottom: calc(50% - 8px)
      &:before
        left: 22px
      &:after
        right: 22px

      >p
        display: none
      li
        width: 150px
        +transform(rotate(0deg) !important)
        text-align: center
        margin-bottom: 0px !important
        p
          line-height: 40px !important
          a
            line-height: 40px !important

+media-query(900px)
  .line-navigation-container
    margin-bottom: -185px
    max-width: 560px
    margin-top: -30px
    .line-navigation
      &:before, &:after
        bottom: -80px
        height: 200px
        width: 180px
      &:before
        left: -80px
      &:after
        right: -80px
  .part
    .line-navigation-container
      margin-bottom: -210px
      bottom: -100px

+media-query(740px)
  .line-navigation-container
    width: 100%
    max-width: none
    margin-top: -20px
    padding: 8px 0
    z-index: 35
    margin-bottom: -30px
    background: url('/img/noise.png') $darkGray
    .line-navigation
      border-bottom: 2px dashed rgba(250, 242, 224, 0.5)
      border-top: 2px dashed rgba(250, 242, 224, 0.5)
      &:before, &:after
        display: none
      ul
        margin: 0
        li
          width: 40%

+media-query(400px)
  .line-navigation
    ul
      padding: 15px 10px
      &:before, &:after
        display: none