/*==========================================================================
  News overview page
  ========================================================================== */
body.projects
  .content
    .production-header, .project-detail-header
      > .grid-col
        > .grid-row
          .left
            .back-button
              &:hover
                svg
                  transform: rotate(0deg) scale(1.2)
              svg
                transform: rotate(0deg)
          .right
            .white-block
              min-height: 270px


    .project-overview, .project-detail
      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

        &:after
          content: ''
          position: absolute
          right: 0
          bottom: 0
          display: block
          width: 100vw
          height: 60px
          background-color: $blue

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

          .left
            height: 100%
            width: 50%
            position: relative
            z-index: 2
            padding: 100px 0 70px 0

            article
              position: relative
              &:before
                position: absolute
                left: 0
                content: 'P'
                height: 100px
                width: 100px
                border-radius: 50%
                background-color: $blue-300
                color: white
                margin-right: 30px
                z-index: 1
                +inline-flex(center, center)

              &:after
                position: absolute
                left: 0
                top: 0
                content: ''
                height: 100px
                width: 90%
                opacity: 0
                border-radius: 50px
                z-index: 0
                background-color: $blue-300
                transition: opacity 0.3s

              &:hover
                &:after
                  opacity: 0.5

              a
                width: column(5, 6)
                padding-left: 130px
                position: relative
                height: 100px
                margin-bottom: 60px
                display: block
                z-index: 2
                border: solid 1px transparent

                &:before
                  content: ''
                  position: absolute
                  opacity: 0
                  top: 0
                  left: 0
                  height: 100px
                  width: 100px
                  border-radius: 50%
                  background-color: $semiLightBlue
                  background-position: center center
                  background-repeat: no-repeat
                  background-size: 17.5%
                  background-image: url("/img/svg/arrow_white.svg")
                  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.25)
                  transition: opacity 0.3s, transform 0.3s

                &:hover
                  &:before
                    opacity: 1
                  &:after
                    transform: translate3d(10px,0,0)

                &:after
                  position: absolute
                  top: 0
                  right: 0
                  width: 16px
                  height: 100%

                  content: ""
                  background-position: center center
                  background-repeat: no-repeat
                  background-image: url("/img/svg/arrow_white.svg")
                  transition: background-position 0.2s

                h2
                  color: $neutral-200
                  font-size: 1.125rem
                  line-height: 2rem
                  margin-bottom: 0

                h3
                  margin-top: 0
                  color: $pastelBlue
                  font-size: 0.9375rem
                  line-height: 2rem


          .right
            position: absolute
            z-index: 1
            top: 0
            right: 0
            width: column(7, 12)
            margin-right: column(-1,12)
            overflow: visible
            height: 100%

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

              img
                width: 100%
                display: none

          .project-overview__paginator
            position: absolute
            z-index: 2
            left: 0
            bottom: 0
            width: 50%

+respond-to-width(960)
  body.projects
    .content
      .project-overview, .project-detail
        height: auto
        > .grid-col
          > .grid-row
            width: 100%

            .project-overview__paginator
              position: relative
              background-color: $blue

            .left, .right, .project-overview__paginator
              width: 100%

            .right
              position: relative
              margin-right: 0
              right: 0
              height: auto

              figure
                height: auto
                background-image: none !important

                img
                  display: block


            .left
              padding: 100px column(1, 12) 70px column(1, 12)

              article

                + article
                  margin-top: 60px

                a
                  width: 100%
                  padding-right: 40px
                  margin-bottom: 0

                  &:after
                    right: 40px

                &:after
                  width: 100%



+respond-to-width(425)
  body.projects
    .content
      .project-overview, .project-detail
        height: auto
        > .grid-col
          > .grid-row
            .left
              padding-top: 30px
              article
                &:before
                  width: 75px
                  height: 75px
                  top: 10px

                &:after
                  height: 75px
                  top: 10px
                  width: 105%

                a
                  padding-left: 100px
                  margin-bottom: 15px
                  width: 100%

                  &:before
                    width: 75px
                    height: 75px
                    top: 10px