header.main
  background: url("/img/header_background.png") $darkBlue
  background-size: contain
  height: 100px
  +flex(center, center)
  border-bottom: 4px solid $orange
  +position(fixed ,0  null null 0)
  width: 100%
  z-index: 88

  +translate3d(0, -100%, 0)
  +transition(all 0.5s)

  &.active
    +transition(all 0s)
    +translate3d(0,0,0)


  &.show
    +translate3d(0,0,0)
  &.smaller
    height: 70px
    +transition(all 0.3s)
    .logo
      width: 235px
    nav ul
      margin: 0
      li
        span
          margin-top: 1px

  .logo
    +sprite(0 0, 285px, 45px)
    display: inline-block


  .content-container
    +flex(space-between, center)
    >a
      +flex(flex-start, center)
  nav
    width: 50%
    max-width: 700px

    ul
      list-style: none
      padding: 0
      +flex(space-between, center)

      li
        position: relative
        text-align: center
        margin-top: 11px

        &:hover
          span
            width: 100%
            background: $semiWhite

        &.active
          span
            width: 100%
            background: $orange

        span
          width: 1px
          height: 1px
          display: block
          margin-top: 5px
          +transition(all 0.3s)

        a
          display: block
          +font-bold(20px)
          letter-spacing: 1.2px
          color: $semiWhite
          text-transform: uppercase
          padding-left: 20px
          padding-right: 20px

.project header.main
  background: url("/img/header_background.png") rgba(0, 0, 40, 0.4) 
  height: 70px
  +transition(background 0.3s)
  &.full
    background-color: rgba(0, 0, 40, 1)

  .logo
    width: 235px

  nav ul
    margin: 0
    li
      span
        margin-top: 1px

+media-query(700px)
  header.main
    display: none
  .filter-row
    margin-top: 60px