.project-detail
  .color-wrapper
    background-color: transparent

  .project-detail-content
    position: relative

    .background
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-color: white

      .left
        position: absolute
        top: 0
        left: 0
        display: block
        height: 100%
        width: column(5, 28)
        background: $agrimacDarkBlue

      //.right

    .grid-row
      position: relative
      z-index: 2

      &:before
        content: ''
        position: absolute
        top: 0
        left: 0
        display: block
        height: 100%
        width: column(7, 24)
        background: $agrimacDarkBlue

      .sub-menu, .content
        position: relative
        z-index: 2
        display: inline-block
        vertical-align: top
        font-size: 1rem
        line-height: 1.6

      .sub-menu
        width: column(3, 12)

      .content
        width: column(7, 12)
        margin-left: column(1, 12)
        padding: 72px 0 100px

        h1
          font-size: 2rem
          line-height: 1.2
          color: $agrimacDarkBlue
          margin: 0 0 32px

        h2
          font-size: 1rem
          line-height: 1.2
          color: white
          font-weight: semi-bold()
          margin: 0 0 1rem

        p
          font-size: 0.8rem
          line-height: 1.8

        .button
          margin-top: 60px
          border-radius: 5px
          &:after
            border-radius: 5px

    +respond-to-width(840)
      .background
        display: none

      .grid-row
        width: 100%
        +flex(flex-start, flex-start)
        +flex-rows

        &:before
          display: none

        .sub-menu
          width: 100%
          padding: 50px column(1, 12)
          +order(2)
          background: $agrimacDarkBlue

        .content
          +order(1)
          padding-top: 50px
          width: column(10, 12)