.project-detail
  padding: 100px 0 0
  width: 100%


  .project-header
    +flex(space-between, center)

    .project-info, .project-meta
      display: block

    .project-info
      +calc('width', '#{$contentGrid} * 6')
      border-right: 1px solid $lightGray

      h1
        +font-default(40px)

    .project-meta
      padding-left: 20px
      +calc('width', '#{$contentGrid} * 6')
      +flex(space-around, flex-start)

      .meta-placeholder
        padding: 0 10px
        min-width: 180px
        word-break: break-word

      h5
        margin-bottom: 0
        text-transform: uppercase

      p
        margin: 0

  .project-reference
    padding: 50px 0

    .placeholder
      max-width: 800px
      margin: 0 auto

    p
      text-align: center
      color: $black
      +font-default(21px, 32px)
      margin: 0 0 10px 0

    span
      display: block
      color: $black
      +font-bold(24px, 32px)
      margin: 25px 0 0
      text-align: center

  .sticky-previous-next, .nosticky-previous-next
    height: 60px
    width: 100%
    border-top: 1px solid $gray
    background: white
    z-index: 9
    +position( fixed, null 0 0 0)


    .placeholder
      width: 100%
      height: 60px
      margin: auto
      +flex(center, center)

      span
        position: relative
        padding: 0 5px
        &:after
          content: ''
          height: 2px
          width: 100%
          background-color: $yellow
          +position(absolute, null 0 -5px 0 )
          +transition(all 0.3s)
          z-index: -1

      .previous
        width: 45%
        text-align: right
        &:before
          content: ''
          margin-right: 10px
          +sprite(-20px -300px, 12px, 10px)
          +transform(rotate(180deg))
          display: inline-block

        &:hover
          span:after
            height: calc(100% + 5px)

      .over
        width: 10%
        margin: 0 20px
        text-align: center
        span
          +sprite(0 -300px, 16px, 16px)
          display: inline-block
          &:after
            display: none


      .next
        width: 45%
        &:after
          content: ''
          margin-left: 10px
          +sprite(-20px -300px, 12px, 10px)
          display: inline-block

        &:hover
          span:after
            height: calc(100% + 5px)

  .nosticky-previous-next
    position: relative

  .sticky-previous-next
    +transform(translate3d(0, 0 , 0))
    +transition(all 0.3s)
    &.hide
      +transform(translate3d(0, 60px , 0))


+media-query(750px)
  .project-detail
    .project-header
      display: block

      .project-meta, .project-info
        width: 100%
        padding-right: 0
        padding-left: 0
        border: none
        display: block

      .project-meta
        >div
          margin-right: 40px
          display: inline-block