#sticky-navigation
  position: fixed
  z-index: 2000
  transition: transform 0.4s, background 0.4s, box-shadow 0.4s
  top: 0
  left: 0
  transform: translate3d(0, 45px, 0)

  &.active
    transform: translate3d(0, 0, 0)
    background-color: $blue
    //box-shadow: 0 6px 10px -5px rgba(0,0,0,0.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

+respond-to-width(960)
  #sticky-navigation
    transform: translate3d(0, 0, 0)

//+respond-to-width(450)
//  #sticky-navigation
//    .grid-row
//      width: 100%
//      padding-left: column(1, 14)