/*==========================================================================
  Main page
  ========================================================================== */

.page
  .default-page-wrapper
    position: relative
    background-color: $broosBlue
    &:after
      content: ''
      position: absolute
      left: 0
      top: 0
      display: block
      width: 100%
      height: 100%
      background: linear-gradient(0deg, $blackAbsoluteGradient)
      opacity: 0.1



  .default-page-content
    padding-top: 72px

    .images, .content
      position: relative
      z-index: 2
      display: inline-block
      vertical-align: top
      font-size: 1rem
      line-height: 1.6

    .content
      margin-left: column(1, 12)
      width: column(4, 12)
      padding: 0 0 100px
      color: white

      h1
        font-size: 2rem
        line-height: 1.2
        color: white
        font-weight: bold()
        margin: 0 0 32px

      h2
        font-size: 1.6rem
        line-height: 1.2
        color: white
        font-weight: semi-bold()
        margin: 0 0 1rem

      p, ul
        font-size: 0.9rem

        >strong
          color: white

      .button
        margin-top: 50px
        background-color: $broosYellow
        color: white

    .images
      width: column(5, 12)
      margin-left: column(1, 12)

      picture
        display: block

  &.about
    .default-page-content
      .content
        .button
          margin-top: 0

    .images
      width: column(5, 12)
      margin-left: column(1, 12)
      margin-bottom: 75px
      picture
        display: block
        box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2)

        img
          width: 100%

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

      .images
        width: column(6, 12)

  /* Mobile view
    ========================================================================== */
  +respond-to-width(840)
    .default-page-content
      .content
        margin-left: 0
        width: 100%
        padding-bottom: 50px
      .images
        width: 100%
        margin-left: 0
        margin-bottom: 75px

        picture
          img
            width: 100%