/*==========================================================================
  Engineering page
  ========================================================================== */
body.engineering
  .content
    .steps
      > .grid-col
        > .grid-row
          > .grid-col
            height: auto
            padding: 120px column(3, 12)
            //margin-left: column(3, 12)
            //width: column(6, 12)
            overflow: visible
            background-color: $neutral-200

            &:after
              content: ''
              display: block
              position: absolute
              top: 0
              left: column(11, 12)
              width: 30vw
              height: 100%
              background-color: $neutral-400
              z-index: 0

            h2
              color: $blue
              font-size: 2rem
              font-weight: 500
              line-height: 2.875rem
              max-width: 310px

            .content
              overflow: visible

              ul
                list-style: none
                position: relative
                overflow: visible

                &:before
                  content: ''
                  position: absolute
                  left: 0
                  top: 24px
                  display: block
                  height: 78%
                  width: 0
                  border-left: 3px solid $blue

                &:after
                  content: ''
                  position: absolute
                  bottom: calc(23.2% - 70px)
                  left: -5%
                  display: block
                  width: 10%
                  height: 50px
                  background-color: $neutral-200
                  z-index: 0

                li
                  color: $pastelBlue
                  font-size: 1.125rem
                  line-height: 2rem
                  position: relative
                  overflow: visible
                  margin-left: 110px

                  +respond-to-width(1440)
                    margin-left: 60px

                  &:before
                    content: ''
                    display: block
                    width: 12px
                    height: 12px
                    border: 3px solid $blue
                    background-color: $pastelBlue
                    border-radius: 50%
                    position: absolute
                    left: -158px
                    top: 12px
                    z-index: 1

                    +respond-to-width(1440)
                      left: -108px

                  h3
                    color: $blue
                    font-size: 1.5rem
                    font-weight: bold
                    line-height: 2.875rem



    .projectholder
      position: relative
      overflow: visible
      padding: 130px 0
      background: $blue url('/img/circles_and_triangles.png') repeat
      background-image: url('/img/circles_and_triangles.png'), linear-gradient(0deg, $blue-300 0%, $blue 100%)

      &:before
        content: ''
        display: block
        width: 100%
        height: 100%
        z-index: 0
        transform: skew(-45deg)
        background-color: $pastelBlue

        position: absolute
        top: 0
        right: column(7,12)

        //box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5)

      > .grid-col
        overflow: visible
        > .grid-row
          overflow: visible

          .top-triangle
            display: block
            width: 48px
            height: 48px
            position: absolute
            top: calc(-130px - 24px)
            margin-left: column(-0.5, 12)
            z-index: 2

      .left
        width: column(5,12)
        .description
          z-index: 1
          ul
            list-style: none
            margin: 0
            li
              position: relative
              color: white
              font-size: 1.375rem
              font-weight: 500
              line-height: 2rem
              padding-left: 45px
              margin-bottom: 30px

              &:before
                content: ''
                margin-top: 7px
                position: absolute
                left: 0

                width: 0
                height: 0
                border-bottom: 16px solid $blue-300
                border-left: 16px solid transparent


      .right
        width: column(7, 12)
        vertical-align: top

        figure
          display: inline-block
          width: 35.5%
          height: 0
          padding-bottom: 35.5%
          margin-right: 60px
          background:
            color: white
            size: contain
            position: center center
            repeat: no-repeat

        .content
          vertical-align: top
          display: inline-block
          width: 56%

          +respond-to-width(1520)
            width: 52%

          h4
            opacity: 0.6
            color: white
            font-size: 0.75rem
            font-weight: bold
            letter-spacing: 1px
            line-height: 1rem
            text-transform: uppercase
            margin-bottom: 0

          h2
            color: $neutral-200
            font-size: 2rem
            font-weight: 500
            line-height: 2.875rem
            margin: 0
            margin-bottom: 30px

          p
            color: $pastelBlue
            font-size: 1.125rem
            line-height: 2rem

          a.button
            margin-top: 15px
            width: 200px
            background-color: $pastelBlue
            &:hover
              background-color: lighten($pastelBlue, 10%)

+respond-to-width(960)
  body.engineering
    .content
      .steps
        > .grid-col
          > .grid-row
            > .grid-col
              height: auto
              padding: 30px 30px 30px 0

              &:after
                display: none

              h2
                max-width: unset

              .content
                ul
                  li
                    margin-left: 60px
                    &:before
                      left: -108px
      .projectholder
        padding: 60px 0

        > .grid-col
          > .grid-row
            .top-triangle
              top: calc(-60px - 24px)

        &:before
          right: auto
          left: column(-7,12)

        .left, .right
          width: 100%

        .left
          .description
            padding-bottom: 60px
            ul
              +flex()
              flex-wrap: wrap
              li
                width: 45%

        .right
          .content
            width: 50%

            h4
              margin-top: 0



+respond-to-width(768)
  body.engineering
    .content
      .projectholder
        &:before
          display: none

        .left
          .description
            ul
              li:before
                border-bottom: 16px solid white

+respond-to-width(564)
  body.engineering
    .content
      .projectholder
        &:before
          display: none

        > .grid-col
          > .grid-row
            width: 100%
            .left
              padding: 0 column(1)
              .description
                padding-bottom: 30px
                ul
                  li
                    width: 100%

            .right
              figure
                width: 100%
                padding-bottom: 60%

              .content
                width: 100%
                padding: 45px column(1) 0 column(1)


+respond-to-width(425)
  body.engineering
    .content
      .projectholder
        .right
          .content
            a.button
              width: 100%