.about
  .default-page-content
    .content
      padding-bottom: 75px

  .about-extra
    padding: 75px 0
    background-color: $offsetWhite


    .content
      font-size: 0.8rem
      p:first-of-type
        margin-top: 0

      p
        a
          color: $darkGreen
          font-weight: semi-bold()
          text-decoration: none

    .document-list
      vertical-align: top

      h4
        font-size: 1rem
        margin-bottom: 25px
        color: $darkGreen
        text-transform: uppercase
        opacity: 0.5
        padding: 0 40px

      ul
        list-style: none
        padding: 0
        margin: 0

        li
          background: $darkGreen
          transition: background 0.1s

          &:hover
            background-color: lighten($darkGreen, 4%)

          &:nth-child(even)
            background: $darkerGreen
            &:hover
              background-color: darken($darkerGreen, 4%)

          a
            position: relative
            z-index: 2
            text-decoration: none
            padding: 20px 40px
            +flex(space-between, center)

            span
              display: block
              width: 25px
              height: 31px
              svg
                width: 100%
                path
                  fill: white
                  transition: fill 0.3s

            h3
              font-size: 0.9rem
              color: white
              width: calc(100% - 40px)

    +respond-to-width(1200)
      .content
        margin-left: 0
        width: column(5, 12)

      .document-list
        width: column(6, 12)

    +respond-to-width(840)
      .content, .document-list
        width: 100%

      .document-list
        margin-top: 45px
        margin-left: 0