.project-filter
  position: fixed
  top: 70px
  height: 45px
  left: 0
  width: 100%
  z-index: 15
  margin-bottom: 0
  background-color: rgba(0, 0, 40, 0.4)
  +transition(background-color 0.3s)
  &.full
    background-color: rgba(0, 0, 40, 1)

  .content-container
    height: 45px

.project-page
  position: relative
  z-index: 8
  overflow: hidden

  &:hover
    .photo-container
      will-change: translate3d

    .right-column, .mobile-project
      .info, .quote-container
        will-change: opacity, translate3d

  .photo-container, .header-container
    +translate3d(0,0,0)
    +transition(all 0.4s)
    img
      width: 100%

  .content-container
    padding-top: 150px
    padding-bottom: 250px
    &.extra-padding
      padding-top: 200px

  .left-column
    width: calc(50% - 20px)
    .photo-container
      &.animateB
        +translate3d(-75px, 0, 0)
      &.animateL
        +translate3d(0, 75px, 0)
  .right-column
    width: calc(50% - 20px)
    float: right

  .left-column, .right-column
    .photo-container
      margin-bottom: 40px
  .right-column, .mobile-project
    .photo-container
      &.animateB
        +translate3d(75px, 0, 0)
      &.animateL
        +translate3d(0, 75px, 0)

  .right-column, .mobile-project
    .info
      width: calc(100% /6 * 5)
      margin-left: calc(100% /6)
      +translate3d(50px, 0, 0)
      opacity: 0
      +transition(all 0.5s)
      &.animate
        opacity: 1
        +translate3d(0, 0, 0)

      .inner
        margin-top: -100px
        margin-bottom: 150px
        h1
          padding-left: calc(100% / 5)
          +font-bold(30px, 32px)
          text-transform: uppercase
          letter-spacing: 2.4px
          height: 100px
          +flex(flex-start, center)
          border-bottom: 1px solid $orange

        ul, p
          padding-left: calc(100% / 5)
        ul
          list-style: none
          li
            font-style: italic
            text-transform: uppercase
            +font-default(16px)
            &:before
              content: '#'
              color: $orange
              margin-right: 2px

        p
          +font-default(21px)
          font-style: italic

    .quote-container
      padding: 150px 0
      margin: 0
      +flex(center, center)
      opacity: 0
      +translate3d(0, 75px, 0)
      +transition(all 0.5s)

      &.animate
        opacity: 1
        +translate3d(0, 0, 0)
      >div
        display: inline-block
      p
        +font-default(28px)
        font-style: italic
        width: 65%
        margin: auto
        &:not(.author)
          &:before
            content: open-quote
            color: $orange
            position: relative
            top: -5px
            left: -5px

          &:after
            content: close-quote
            color: $orange
            position: relative
            right: -5px
      .author
        position: relative
        left: 15px
        top: 10px
        +font-bold(21px)
        font-style: italic
        &:before
          content: '—'
          color: $orange
          margin-right: 10px

  .mobile-project
    display: none
    .info
      width: 100%
      margin-left: 0
      .inner
        ul, p, h1
          width: 80%
          margin-left: auto
          margin-right: auto
          max-width: 500px
          padding-left: 0
    .photo-container
      width: 80%
      margin: 40px auto
  hr
    border: none
    border-bottom: 4px solid $orange
    margin: 0


+media-query(750px)
  .project-page
    .mobile-project
      display: block
    .right-column, .left-column
      display: none


+media-query(700px)
  .project-page
    margin-top: 60px
  .project-filter
    top: 60px
    margin-top: 0
    border-bottom: 2px solid $orange
    .content-container
      ul
        padding-left: 5px
        li
          padding-left: 20px

+media-query(550px)
  .project-page
    margin-top: 170px !important

  .project-filter
    top: 60px
    height: 110px
    .content-container
      height: 110px
      ul
        padding-left: 0
        li
          float: none