nav
  position: fixed
  width: 100%
  height: 60px
  top: 0
  z-index: 999

  .inner-nav
    width: 100%
    height: 100%

    .filter-nav
      display: none
      position: absolute
      width: 100%
      height: 60px
      top: 0
      left: 0
      padding: 0
      margin: 0
      list-style: none
      text-align: center

      .filter
        display: inline-block
        margin: 10px 15px

        .filter-btn
          display: inline-block
          text-align: center

          .icon
            display: inline-block
            width: 25px
            height: 25px

            svg
              width: 100%
              height: 100%

              path, polygon, rect
                fill: $color-gray

          .label
            display: block
            width: 100%
            text-align: center
            font-size: 9px
            font-weight: 700
            letter-spacing: 1px
            text-transform: uppercase
            color: $color-gray

          &:hover

            .icon

              svg

                path, polygon, rect
                  fill: $color-black

            .label
              color: $color-black

    .logo-con
      float: left
      position: relative
      width: 40px
      height: 40px
      margin: 10px 15px
      z-index: 9

      svg
        width: 100%
        height: 100%

        path, polygon, rect
          fill: $color-main

      &:hover

        svg

          path, polygon, rect
            fill: $color-black

    .menu
      float: right
      position: relative

      .menu-item
        display: inline-block
        margin-right: 30px
        font-size: 11px
        line-height: 60px
        font-weight: 700
        letter-spacing: 1px
        text-transform: uppercase
        color: $color-main

        &:hover
          color: $color-black

  &.scrolling
    z-index: 999
    background: $color-white

    .filter-nav
      display: block

  &.sticky
    z-index: 999
    background: $color-white