.projects-row, .projects-home-row
  width: 100%
  max-width: 1340px
  margin: auto
  position: relative
  +transition(height 0.2s)

  .coffee
    background: $black
    cursor: pointer
    height: 270px
    margin: 0
    width: calc(720 / 2340 * 100% + (20px / 3))
    color: white
    +flex(center, center)
    +font-bold(80px, 80px)
    box-sizing: border-box
    +transition(all 0.3s)
    border: 0px solid $yellow

    &:hover
      em
        color: $yellow
      span:after
        opacity: 0

      &.left
        span:after
          +transform(translate3d(200px, 0, 0))
      &.right
        span:after
          +transform(translate3d(-300px, 0, 0))
      &.top
        span:after
          +transform(translate3d(0, 110px, 0))
      &.bottom
        span:after
          +transform(translate3d(0, -180px, 0))

    span
      color: white
      +font-bold(80px, 80px)
      position: relative
      &:after
        content: ''
        width: 100%
        height: 6px
        +position(absolute, null 0 0 0)
        background: $yellow
        +transform(translate3d(0,0,0))
        opacity: 1
        +transition(all 0.3s)
    em
      color: white
      +font-bold(80px, 80px)
      font-style: normal
      +transition(all 0.2s)

  .project
    width: calc(720 / 2340 * 100% + (20px / 3))
    float: left
    position: absolute
    +transition(all 1s)
    overflow: hidden

    &.home
      position: relative
      float: none
      width: 100%
      margin-bottom: 30px

      a
        .overlay-color
          background-color: rgba(255,222,0,0.90)
        p
          color: $black
          &:after
            background-color: $black

    &.notActive
      display: none

    //&.right
    //  .overlay-color
    //    +transform(translate3d(100.5%,0,0))
    //
    //&.left
    //  .overlay-color
    //    +transform(translate3d(-100.5%,0,0))
    //
    //&.top
    //  .overlay-color
    //    +transform(translate3d(0,-100.5%,0))
    //
    //&.bottom
    //  .overlay-color
    //    +transform(translate3d(0,100.5%,0))
    //
    //&.animating
    //  .overlay-color
    //    +transform(translate3d(0,0,0))

    a
      +position(absolute, 0 0 0 0)
      width: 100%
      height: 100%
      +flex(center, center)

      .overlay-color
        +position(absolute, 0 0 0 0)
        width: 100%
        height: 100%
        background-color: rgba(17,24,32,0.90)
        //+transition(transform 0.4s)
        +transform(translate3d(0,-100%,0))

      p
        +font-bold(18px, 24px)
        position: relative
        z-index: 5
        +transform(translate3d(0, -50px, 0))
        opacity: 0
        color: $yellow
        +transition(all 0.3s)

        &:after
          content: ''
          height: 1px
          width: 0
          background-color: $yellow
          +position(absolute, null null -10px 0 )
          +transition(all 0.3s)
          +transition-delay(0.3s)
          z-index: 99

    &:hover
      a
        p
          +transform(translate3d( 0, 0, 0))
          +transition-delay(0.2s)
          opacity: 1

          &:after
            width: 75px
            left: calc(50% - 37.5px)

    img
      width: 100%
      display: block

+media-query(1120px)
  .projects-row
    width: 95%
    .project, .coffee
      width: calc(50% - 40px)

+media-query(400px)
  .projects-row
    .project, .coffee
      width: calc(100% - 40px)