.main-menu
  max-width: 320px
  position: fixed
  left: 0
  top: 120px
  z-index: 999
  +translate3d(0,0,0)
  +transition(all 0.5s)

  &.scrolled
    +translate3d(0, -110px , 0)
  &.no-home
    top: 15px
    &.scrolled
      +translate3d(0,0,0)
  ul
    list-style: none
    padding: 0
    margin: 0
    max-width: 320px

    li
      position: relative
      //height: 80px
      margin-top: 5px
      pointer-events: none
      a
        position: relative
        pointer-events: all
        padding: 0 0 8px 20px
        +font-bold(19px)
        line-height: 19px !important
        +flex(flex-start, center)
        color: $lightGray
        height: 80px
        width: 190px
        +transition(all 0.3s)
        &:hover
          width: 200px
          padding-left: 25px
      span
        +orangeLabel
        position: absolute
        z-index: -1
        right: 0
        top: 0

      &.active
        height: 90px
        &.parts, &.other
          height: auto
          margin-bottom: 20px
          a
            width: 250px
          .sub-menu
            display: block
          ul li a
            width: 165px
        &.other
          ul
            li:first-of-type
              a:after
                bottom: -7px

        &.photoalbum
          a
            +font-bold(21px)
            line-height: 24px
        a
          +font-bold(25px)
          color: $darkGray
          width: 215px
          padding-left: 20px
          padding-bottom: 0 !important
          &:before
            content: ''
            display: inline-block
            margin-right: 10px
            position: relative
            top: -2px
            +sprite(-329px -30px, 15px, 15px)

        span
          +whiteLabel
      .sub-menu
        background-color: $darkGray
        margin-top: 2px
        display: none
        width: 180px
        padding: 0 5px 7px
        position: relative
        &:before
          content: ''
          position: absolute
          top: 0
          right: 0
          height: 8px
          width: calc(100% - 15px)
          background-color: black
          opacity: 0.1
        &:after
          content: ''
          position: absolute
          bottom: -8px
          right: -8px
          height: 100%
          width: 100%
          background-color: black
          opacity: 0.1
          z-index: -1

        li
          display: inline-block
          height: 50px !important
          border-left: 2px dashed rgba(250, 242, 224, 0.2)
          border-right: 2px dashed rgba(250, 242, 224, 0.2)
          a
            +font-default(17px)
            color: $lightGray
            height: 50px
            padding: 0 15px
            +flex(flex-start, center)
            width: 165px
            position: relative
            &:after
              content: ''
              height: 1px
              width: 134px
              display: inline-block
              position: absolute
              bottom: 0
              left: 15px
              border-bottom: 2px dashed rgba(250, 242, 224, 0.5)
            &:before
              display: none !important
          &:last-of-type
            border-bottom: 2px dashed rgba(250, 242, 224, 0.2)
            a:after
              display: none
          &:hover
            a
              color: $blue
          &.active
            a
              color: $beige
.part
  .main-menu
    ul
      li
        span
          +blueLabel
        &.active
          span
            +whiteLabel
+media-query-larger(2200px)
  .main-menu
    max-width: none
    left: calc((100% - 2200px) / 2 - 15px)
    ul
      overflow: hidden
      li
        -webkit-box-shadow: inset 17px 0px 17px -12px rgba(0,0,0,0.2)
        -moz-box-shadow: inset 17px 0px 17px -12px rgba(0,0,0,0.2)
        box-shadow: inset 17px 0px 17px -12px rgba(0,0,0,0.2)

+media-query(1350px)
  .main-menu
    ul
      li
        a
          width: 170px
          padding: 0 15px 8px 20px
          &:hover
            width: 180px
        &.active
          a
            width: 195px
          &.parts
            a
              width: 225px

+media-query(800px)
  .main-menu
    ul
      li
        a
          width: 165px
          padding: 0 0 8px 20px
          &:hover
            width: 175px
        &.active
          a
            width: 185px

+media-query(1150px)
  .main-menu
    display: none

+media-query-height(650px)
  .main-menu
    display: none