#sticky-navigation
  position: fixed
  top: 0
  left: 0
  z-index: 50
  background-color: $blue
  width: 100%
  height: 60px
  transform: translate3d(0, -60px, 0)
  box-shadow: 0 6px 10px -5px rgba(0,0,0,0.1)
  opacity: 0
  transition: transform 0.4s, opacity 0.4s

  &.active
    transform: translate3d(0, 0, 0)
    opacity: 1

  .grid-row
    +flex(space-between, center)

  .menu
    display: inline-block
    width: 60px

    .placeholder
      position: relative
      width: 100%
      padding-bottom: 100%

      .icon-placeholder
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        +flex(center, center)
        cursor: pointer

        .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: white
            transition: transform 0.6s

            &:nth-of-type(2)
              transform: scale3d(0.8, 1, 1)

            &:nth-of-type(3)
              transform: scale3d(0.45, 1, 1)

        &:hover
          .icon
            span
              transform: scale3d(1, 1, 1) !important

  .logo-wrapper
    a
      font-size: 1rem
      line-height: 1
      color: white
      text-decoration: none
      font-weight: bold