.project-overview
  position: relative
  z-index: 6
  margin-top: 100px
  .filter-info
    margin-bottom: 40px


  &.more-projects
    z-index: 5

  &:hover
    .project
      will-change: width
      h2
        will-change: translate3d, opacity

      ul
        li
          will-change: translate3d, opacity
      .overlay
        will-change: opacity

  .project
    width: calc(100% / 3)
    float: left
    position: relative
    background-size: cover
    background-position: 50% 50%
    +flex(center, center)
    overflow: hidden
    opacity: 0.2
    +transition(opacity 0.6s)

    &.selected
      opacity: 1

      &:hover
        .project-info
          h2
            opacity: 1
            +translate3d(0,0,0)
          hr
            opacity: 1
            +translate3d(0,0,0)
          ul
            li
              opacity: 1
              +translate3d(0,0,0)

        .overlay
          opacity: 0.6

    &.double
      width: calc(100% / 3 * 2)

    .project-info
      position: relative
      z-index: 6

      h2
        +font-bold(36px)
        color: white
        letter-spacing: 2.4px
        text-transform: uppercase
        text-align: center
        margin: 0 0 20px
        opacity: 0
        +translate3d(75px,0,0)
        +transition(all 0.4s)


      hr
        border: none
        border-bottom: 1px solid $orange
        width: 75%
        margin: 0 auto
        opacity: 0
        +translate3d(-75px,0,0)
        +transition(all 0.4s)
        +transition-delay(0.08s)

      ul
        list-style: none
        padding: 0
        li
          text-transform: uppercase
          font-style: italic
          text-align: center
          +font-default(18px)
          opacity: 0
          +translate3d(20px,0,0)
          +transition(all 0.4s)
          +transition-delay(0.16s)
          &:nth-of-type(1)
            +transition-delay(0.24s)
          &:nth-of-type(2)
            +transition-delay(0.30s)
          &:nth-of-type(2)
            +transition-delay(0.36s)
          &:before
            content: '#'
            color: $orange
            margin-right: 1px


    .overlay
      +position(absolute, 0 0 0 0)
      height: 100%
      width: 100%
      background: black
      opacity: 0
      +transition(all 0.4s)

  &.stick
    .filter-row
      position: fixed
      top: 70px
      left: 0
      width: 100%
      background: $darkBlue
      z-index: 9999

    .my-projects
      margin-top: 295px

.filter-row
  border-bottom: 4px solid $orange
  position: relative
  z-index: 5
  margin-bottom: 125px
  top: 0
  +transition(all 0.4s)

  .content-container
    height: 60px
    +flex(flex-start, center)

    p
      +font-default(21px)

    ul
      list-style: none
      padding-left: 50px

      li
        float: left
        font-style: italic
        +font-default(18px)
        text-transform: uppercase
        cursor: pointer
        padding-left: 50px


        p
          +font-default(18px)
          display: inline-block
          opacity: 0.6
          +transition(opacity 0.3s)


        span
          opacity: 0.6
          +transition(all 0.3s)
          margin-right: 1px

        &.active, &.all
          p
            opacity: 1 !important

          span
            opacity: 1
            color: $orange

        &:hover
          p
            opacity: 0.8
          span
            opacity: 1
            color: $orange
  p, ul
    margin: 0

+media-query(1200px)
  .project-overview
    .project
      .project-info
        h2
          +font-bold(30px)

+media-query(900px)
  .project-overview
    .project
      .project-info
        h2
          +font-bold(24px)
          padding: 0 10px

+media-query(700px)
  .project-overview
    margin-top: 40px

    &.stick
      .filter-row
        top: 0
    .project
      .project-info
        h2
          +font-bold(21px)

+media-query(670px)
  .project-overview
    .project
      .project-info
        h2
          margin-bottom: 10px

+media-query(500px)
  .filter-row
    height: 110px
    .content-container
      height: 110px
      ul
        li
          float: none
  .project-overview
    .project, .project.double
      width: 100%

      .project-info
        h2
          +font-bold(18px)  
          opacity: 1
          +translate3d(0,0,0)
        hr
          opacity: 1
          +translate3d(0,0,0)
        ul
          li
            opacity: 1
            +translate3d(0,0,0)

      .overlay
        opacity: 0.6