/*==========================================================================
  News detail page
  ========================================================================== */
body.projects
  .content
    position: relative
    z-index: 5
    .project-detail-header

      .return-to-overview
        display: none
        width: 100%
        padding: 25px column(1)
        background-color: $red-500
        transition: background-color 0.3s

        &:hover
          background-color: lighten($red-500, 10%)
          svg
            transform: rotate(90deg) scale(1.2)

        svg
          position: relative
          top: 2px
          transform: rotate(90deg)
          width: 20px
          height: 16px

          .st0
            fill: white

        .text
          color: white
          margin-left: 10px
          font-size: 1rem
          line-height: 1.1rem

      > .grid-col
        > .grid-row
          .left
            color: $blue
            h4, .back-to-overview
              margin-bottom: 90px

            a:not(.back-to-overview)
              font-weight: bold
              color: $blue

            span.small-arrow
              display: inline-block
              font-size: 10px
              height: 20px
              color: $blue
              padding: 0 10px
              transform: scaleY(2)

          .right
            .white-block
              height: 270px
              padding: 83px column(1, 7)

              h4
                color: $blue-700
                font-size: 1.125rem
                line-height: 2rem
                margin-bottom: 0
                margin-top: 0
                font-weight: normal

              .header-content
                color: $pastelBlue
                font-size: 1.875rem
                line-height: 2.25rem

    .project-block
      position: relative
      z-index: 6
      background: $blue-300 url('/img/circles_and_triangles.png') repeat
      background-image: url('/img/circles_and_triangles.png'), linear-gradient(0deg, $blue-300 0%, $blue 100%)

      > .grid-col
        > .grid-row
          position: relative
          height: 100%
          min-height: 560px

          .image
            position: absolute
            top: 0
            width: column(7, 12)
            height: 100%

            &.right
              right: column(-1, 12)

            &.left
              left: column(-1, 12)

            figure
              display: block
              width: 100%
              height: 100%
              background:
                size: contain
                position: top left
                repeat: no-repeat
                //color: white

              img
                width: 100%
                display: none

          .content
            height: 100%
            width: 50%
            position: relative
            padding: 80px column(1, 12) 80px 0

            >*:first-child
              margin-top: 0

            h1, h2, h3, h4
              color: white

            h1
              font-size: 2rem

            h2
              font-size: 1.8rem

            p
              line-height: 2rem

            ul, ol
              li
                &:before
                  color: white

            p, li
              strong
                color: white

              a
                color: white
                text-decoration: underline

        &.left
          > .grid-row
            .content
              margin-left: 50%
              padding: 80px 0 80px column(1, 12)

    .dynamic-content
      background-color: white
      padding: 80px 0

+respond-to-width(960)
  body.projects
    .content

      .project-detail-header

        .return-to-overview
          +flex(flex-start, center)

        .left
          padding: 30px column(1)

        > .grid-col
          > .grid-row
            .right
              .white-block
                padding: 50px column(1) !important
                height: auto

                .header-content
                  padding-bottom: 0

                  &:before
                    display: none

      .project-detail, .project-block
        height: auto
        > .grid-col
          > .grid-row
            width: 100%
            .left, .right
              width: 100%

            .left
              padding: 60px column(1, 12)

      .project-block
        > .grid-col
          > .grid-row
            min-height: 0
            +flex()
            +flex-rows

            .image
              position: relative
              margin: 0 !important
              left: 0 !important
              right: 0 !important
              padding: 0
              width: 100%
              height: auto
              +order(2)

              figure
                height: auto
                background-image: none !important

                img
                  display: block

            .content
              padding: 60px column(1, 12)
              width: 100%
              margin-left: 0 !important
              +order(1)