.project-detail

  .color-wrapper
    background-color: transparent

  .project-detail-content
    position: relative
    padding-bottom: 60px

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

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

      .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(5, 12)
        margin-left: column(1, 12)
        padding: 50px 0 100px

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

        h2
          font-size: 1rem
          line-height: 1.2
          color: $royalForkLightBlue
          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

          &.return-button
            margin-top: 0
            margin-bottom: 52px
            .arrow
              svg
                transform: rotate(90deg)

            &:hover
              .arrow
                transform: translate3d(-5px,0,0)
            .arrow
              margin-left: 0
              margin-right: 15px
            p
              display: inline-block
              margin: 0
              font-size: 0.65rem

      .image-side
        position: relative
        display: inline-block
        vertical-align: top
        width: column(5, 12)
        margin-left: column(1, 12)

        figure
          //position: absolute
          //right: column(-1, 12)
          //top: 0
          //width: column(7, 12)
          //height: 100%


          //span
          //  position: absolute
          //  display: block
          //  width: 100%
          //  height: 100%
          //  background:
          //    size: cover
          //    position: center
          //
          //  &.medium
          //    display: none

          img
            display: none
            width: 100%

            &.large
              display: block

            +respond-to-width(1400)
              &.large
                display: none

              &.medium
                display: block

            +respond-to-width(1100)
              &.medium
                display: none

              &.large
                display: block

            +respond-to-width(600)
              &.large
                display: none

              &.medium
                display: block

        .small-offer-form
          margin-top: 50px
          background-color: rgba($royalForkLightBlue, 0.2)
          padding: 40px

          h3
            margin: 0 0 15px
            font-size: 0.9rem
            line-height: 1.2
            color: $agrimacDarkBlue

          >p
            font-size: 0.7rem
            line-height: 1.4
            color: $agrimacBlue

          .form
            padding: 20px 0 0

          .submit
            text-align: right

            .button
              background-color: $royalForkGreen
              color: white
              border-radius: 5px
              font-size: 0.7rem
              font-weight: semi-bold()
              text-transform: uppercase

              &:after
                border-radius: 5px


    +respond-to-width(1100)
      .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: $royalForkLightBlue

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

        .image-side
          margin-left: column(1, 12)
          width: column(10, 12)