/*==========================================================================
  About page
  ========================================================================== */
body.about
  position: relative
  &:before
    content: ''
    position: absolute
    display: block
    right: 0
    bottom: 774px
    width: 648px
    height: 648px
    background: url('/img/svg/big_hamer.svg')
    background-size: 130%
    background-position: 170% -25%
    background-repeat: no-repeat
    transform: scaleX(-1)

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

  div.about-header
    width: 100%
    position: relative

    h1
      color: #2D323C
      font-size: 26px
      font-weight: 600
      line-height: 41px
      margin-top: 15px
      margin-bottom: 30px
      width: 80%
      display: inline-block

    a.button
      display: inline-block
      position: absolute
      right: 0
      margin-top: 15px

  .about-content
    width: 100%
    background-color: white
    box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
    padding: 30px
    margin-bottom: 60px

    +respond-to-width(425)
      margin-bottom: 0

    > .grid-row
      width: 100%
      +flex()

      +respond-to-width(1150)
        flex-direction: column

      .left
        width: 100%
        h2
          color: #3C414B
          font-size: 20px
          font-weight: 600
          line-height: 32px

        p, ul
          color: #696E78
          font-size: 16px
          line-height: 24px

        .intro-left, .intro-right
          display: inline-block
          width: 45%
          height: 100%
          margin-right: 5%
          margin-bottom: 30px
          vertical-align: top
          p
            margin-top: 0

          +respond-to-width(1150)
            width: 100%

          ul
            padding-left: 20px

        .intro-right
          position: relative
          margin-right: 0
          width: 49%

          +respond-to-width(1150)
            width: 100%
            padding-bottom: 60%

          figure
            position: absolute
            z-index: 5
            top: 0
            left: 0
            width: 100%
            height: 100%


            span
              position: absolute
              top: 0
              left: 0
              width: 100%
              height: 100%
              background-size: cover
              background-color: #F0F5FA
              background-position: center
              background-repeat: no-repeat

      .right
        overflow: visible
+respond-to-width(950)
  body.about
    div.about-header
      padding: 0 30px
      a.button
        right: 30px

    .about-content
      margin-bottom: 0
      box-shadow: none

+respond-to-width(425)
  body.about
    .about-content
      padding: 20px