/*==========================================================================
  Contact page
  ========================================================================== */
body.about
  .content
    h2
      color: $blue
      font-size: 2rem
      font-weight: 500
      line-height: 2.875rem

    .textblock
      //height: 475px
      text-align: center
      background-color: $neutral-200
      overflow: hidden
      position: relative
      z-index: 1

      > .grid-col
        width: 100%
        height: 100%
        > .grid-row
          position: relative
          height: 100%
          padding: 120px column(2, 14)

          .description
            color: $pastelBlue
            font-size: 1.125rem
            line-height: 2rem
            text-align: center

            strong
              color: $blue

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



    .employee-icons
      padding-top: 115px
      position: relative

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

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

          .top-triangle
            display: block
            width: 48px
            height: 48px
            position: absolute
            top: calc(-115px - 24px)
            left: 0
            margin-left: column(-1)
            z-index: 2

          .title-holder
            width: 100%
            overflow: visible
            text-align: center
            position: relative

            h3
              color: white
              font-size: 1.5rem
              font-weight: bold
              line-height: 2rem
              margin-bottom: 60px

            .diagonal-line
              width: 160px
              left: 44%
              top: 40%

              &.second
                width: 300px
                left: 42%
                top: 40%

              +respond-to-width(768)
                top: 75px

                &.second
                  top: 75px

              +respond-to-width(480)
                display: none

          .icon-holder
            z-index: 22
            width: 100%

            .grid-row
              +flex(center, flex-start)
              flex-wrap: wrap

              .icon
                width: 175px
                margin: 0 6% 100px 6%
                position: relative

                +respond-to-width(1000)
                  margin-bottom: 60px


                figure
                  position: relative
                  display: block
                  width: 175px
                  height: 175px
                  border-radius: 50%
                  background-color: $neutral-200
                  overflow: hidden
                  background-size: cover
                  background-position: 50%

                h3
                  width: 100%
                  color: $neutral-200
                  font-size: 1.125rem
                  font-weight: normal
                  line-height: 2rem
                  text-align: center
                  margin-bottom: 0

                h4
                  width: 100%
                  color: $pastelBlue
                  font-size: 1.125rem
                  font-weight: bold
                  line-height: 1.5rem
                  text-align: center
                  margin-top: 0

          .bottom-triangle
            display: block
            width: 90px
            height: 90px
            position: absolute
            top: calc(50% - 90px)
            right: column(-0.5)
            z-index: 2


+respond-to-width(1440)
  body.about
    .content
      .textblock
        > .grid-col
          > .grid-row
            padding: 60px column(2, 14)

      .employee-icons
        > .grid-col
          > .grid-row
            width: 100%

            .icon-holder
              .grid-row
                width: 100%

            .top-triangle
              margin-left: 0
              left: 25px

            .bottom-triangle
              right: 25px

+respond-to-width(960)
  body.about
    .intro
      padding-bottom: 0


+respond-to-width(768)
  body.about
    .content
      .textblock
        > .grid-col
          > .grid-row
            padding: 30px 0
            text-align: left

            &:after
              display: none

            .content
              h2
                margin-top: 0

            .description
              text-align: left

      .employee-icons
        padding-top: 30px

        > .grid-col
          > .grid-row
            width: 100%

            .top-triangle
              top: -55px

            .icon-holder
              .grid-row
                width: 100%

+respond-to-width(500)
  body.about
    .content
      .employee-icons
        padding: 40px 0 60px

        > .grid-col
          > .grid-row
            width: 100%
            .top-triangle
              top: calc(-30px - 24px)
              margin-left: 0

            .bottom-triangle
              display: none
            .icon-holder

              .grid-row
                display: block
                width: 100%

                .icon
                  margin: 0 auto

                  + .icon
                    margin-top: 60px