.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: $broosDarkPurple

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

      //.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: $broosDarkBlue

      .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)

        p
          a
            text-decoration: none
            color: $broosOffwhite

      .content
        width: column(8, 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

          a
            text-decoration: none
            color: $broosOffwhite

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


        .grid-row
          width: 100%
          display: flex
          margin-bottom: 60px
          &:before
            display: none
          .text
            vertical-align: top
            width: column(4, 8.5)
            padding: 0 column(0.5, 8.5) column(0.5, 8.5) 0
            &:last-child
              padding-top: column(0.5, 8.5)
              padding-left: column(0.5, 8.5)

            h1
              color: white
              font-size: 2.5rem

          .images
            width: column(4.5, 8.5)

            picture
              background: black

        h1.mobile
          display: none

    +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: $broosDarkBlue

        .content
          +order(1)
          padding-top: 50px
          width: 100%
          background-color: $broosDarkPurple
          margin-left: 0
          padding-left: column(1, 12)

          .grid-row
            &:first-child
              flex-direction: column-reverse
            .text,
            .images
              width: 100%

            h1.desktop
              display: none

          h1.mobile
            display: block
            color: white
            font-size: 2.5rem