/*==========================================================================
  Contact page
  ========================================================================== */
body.about
  .content-header
    position: relative
    display: block
    height: 450px
    top: -225px
    margin-bottom: -225px
    background-repeat: no-repeat
    background-color: white
    background-size: cover
    background-position: center 40%

  .content
    .afspraakblok
      height: auto
      min-height: 550px

      .left
        margin-bottom: 0
        color: $douvDarkBlue

        a.button
          min-width: 300px

          &:after
            right: 6%

    .top, .bottom
      padding-top: 90px
      background-color: white
      margin-bottom: 0

      .left, .right
        width: column(6, 12)
        margin: 0 auto
        overflow: visible

        figure
          position: relative
          width: 100%
          height: 300px
          background-repeat: no-repeat
          background-size: cover

          &:after
            content: " "
            position: absolute
            display: block
            width: 15px

            height: 90%
            background-color: $douvYellow

        a.button
          color: $douvBlue
          margin-top: 30px

          &:hover
            color: $douvDarkBlue


      .left
        figure
          left: column(-0.5, 6)
          &:after
            left: auto
            right: -7.5px
            bottom: 0

      .right
        figure
          right: column(-0.5, 6)
          &:after
            right: auto
            left: -7.5px
            top: 0

    .top
      color: $douvDarkBlue
      .right
        width: column(4,12)
        margin-left: column(1,12)

        a.button
          &:after
            background-position: -86px center

          &:hover
            &:after
              background-position: -60px center

      h2
        color: $douvBlue


    .bottom
      padding-bottom: 90px
      color: $douvDarkBlue
      .left
        width: column(4,12)
        margin: 0 column(1,12)

        a.button
          &:after
            background-position: -86px center

          &:hover
            &:after
              background-position: -60px center

      h2
        color: $douvBlue


+respond-to-width(840)
  body.about
    .content-header
      width: 100%
      top: 0
      margin-bottom: 0

    .content
      .afspraakblok
        .right
          float: none


      .top, .bottom
        margin-top: 0
        padding-left: column(1, 12)
        padding-right: column(1, 12)

        .left, .right
          margin: 0
          padding: 0
          width: 100%

          figure
            left: 0
            right: 0

      .bottom
        display: -ms-flexbox      /* TWEENER - IE 10 */
        display: -webkit-flex     /* NEW - Chrome */
        display: flex
        flex-direction: column-reverse


+respond-to-width(435)
  body.about
    .content
      .top, .bottom
        padding-top: 0
        padding-left: 0
        padding-right: 0

      .top .right,
      .bottom .left
        padding-left: column(1, 12)
        padding-right: column(1, 12)

      .top
        padding-bottom: 30px
      .bottom
        padding-top: 30px
        padding-bottom: 60px