.next-previous-projects

  .content-container
    position: relative
    height: 200px //calculated by Javscript
    z-index: 5
    width: 100%

  .np-project
    position: absolute
    width: 50%
    top: 0
    height: 100% //calculated by Javscript
    left: 0
    +flex(center, center)
    &.next-project
      left: auto
      right: 0


    .background
      +position(absolute, 0 0 0 0)
      width: 100%
      height: 100%
      background-size: cover !important
      background-position: 50% 50%


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

      a
        +flex(center, center)

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

        h2
          +font-bold(20px)
          color: white
          letter-spacing: 2.4px
          text-transform: uppercase
          text-align: center
          margin: 0 0 20px
          padding: 0 10px
          +translate3d(0,0,0)
          +transition(all 0.3s)

        hr
          border: none
          border-bottom: 1px solid $orange
          width: 65%
          margin: 0 auto
          +translate3d(0,0,0)
          +transition(all 0.3s)
          +transition-delay(0.1s)

        ul
          list-style: none
          padding: 0
          li
            text-transform: uppercase
            font-style: italic
            text-align: center
            +font-default(18px)
            +translate3d(0,0,0)
            +transition(all 0.3s)
            +transition-delay(0.2s)
            &:before
              content: '#'
              color: $orange
              margin-right: 1px


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

    &:hover
      .inner
        .project-info
          h2
            opacity: 0
            +translate3d(75px ,0,0)
          hr
            opacity: 0
            +translate3d(-75px ,0,0)
          ul
            li
              opacity: 0
              +translate3d(20px,0,0)

        .overlay
          opacity: 0