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

.page

  .grid-row
    position: relative
    overflow: visible

  // Extra styling container
  .content-placeholder
    position: relative

    &:after
      content: ''
      position: relative
      z-index: 1
      display: block
      height: 60px
      width: 100%
      background-image: url("/img/forest_bottom.jpg")
      background-position: center
      background-size: cover

    .background
      position: absolute
      height: calc( 100% - 120px)
      width: 50%
      right: 0
      top: 120px
      background-color: white

    .right-icon
      position: absolute
      right: -30px
      top: 180px
      z-index: 4
      width: 60px
      height: 144px

      &.extra-margin-top
        top: calc( 180px + 20vh )

      &:after
        content: ''
        +sprite(-256px -78px, 60px, 144px)
        display: block

    .left-icon
      position: absolute
      left: column(-1, 9)
      bottom: 0
      z-index: 4
      display: block
      height: 212px
      width: 60px
      &:after
        content: ''
        position: relative
        left: -30px
        display: inline-block
        +sprite(-195px 0, 60px, 212px)

    .grey-block
      position: absolute
      z-index: 2
      left: 0
      bottom: 0
      width: 50%
      background-color: $lightGray2

  /* Wrapper for image and quote
     ===============================*/
  .page-impression
    position: relative
    z-index: 3
    right: column(-1, 24)
    width: column(9, 24)
    vertical-align: top
    padding-top: 60px
    padding-bottom: 40px
    overflow: visible

    // Quote
    .quote
      height: 240px
      background-color: $pink
      +flex(center, center)
      margin-bottom: 30px

      p
        margin: 0
        padding: 0 10%
        width: 100%
        color: rgba(white, 0.8)
        font-size: 1.4rem
        font-style: italic
        text-align: center


    // Image
    img
      width: 100%
      &.large
        display: none

    // Button
    .button
      position: absolute
      left: 0
      bottom: -45px
      display: inline-block
      padding: 15px 30px
      border-radius: 25px
      background-color: $yellow
      text-decoration: none
      font-size: 0.9rem
      line-height: 1
      font-weight: bold()
      color: white
      transition: background-color 0.3s

      &:after
        content: ''
        +arrowWhite
        margin-left: 20px
        +translate3d(0,0,0)
        transition: transform 0.3s

      &:hover
        background-color: $darkYellow
        &:after
          +translate3d(5px, 0, 0)

  /* Main content
     ===============================*/
  .main
    width: column(15, 24)
    padding: 0 column(2, 24) 0 column(3, 24)
    background-color: white
    z-index: 2

    .main-placeholder
      width: 100%
      padding: 0 column(2, 15) 0 column(3, 15)

    .content
      color: $darkGray
      font-size: 0.9rem


      h1, h2
        font-size: 2rem
        line-height: 1.2
        max-width: 580px
        color: $darkBlue
        margin: 0 0 40px

      p
        margin: 1rem 0

      ul, ol
        padding-left: 20px
        list-style: none

        li
          position: relative
          padding-left: 20px
          //font-size: 0.8rem
          &:before
            content: '•'
            position: absolute
            color: $darkBlue
            font-size: 1.2rem
            line-height: 1
            left: -20px

      ol
        counter-reset: ol-counter
        li
          &:before
            counter-increment: ol-counter
            content: counter(ol-counter)'.'
            font-size: 1rem
            top: 2px

      strong
        color: $fontBlack

      a:not(.button)
        color: $brightBlue
        text-decoration: none
        transition: color 0.3s, border 0.3s, opacity 0.3s
        &:hover
          color: darken($brightBlue, 15%)

    // Return button
    .return-link
      height: 100px
      margin-top: 20px
      +flex(flex-start, center)
      a
        font-size: 0.8rem
        color: $blue
        text-decoration: none
        font-weight: medium()
        transition: color 0.3s

        &:before
          content: ''
          margin-right: 10px
          +arrowBlue
          +translate3dRotate(0,0,0,180deg)
          transition: transform 0.3s

        &:hover
          color: $bluer
          &:before
            +translate3dRotate(-5px,0,0,180deg)

    // Contact button
    a.button
      display: inline-block
      margin-top: 100px
      padding: 15px 20px
      border-radius: 25px
      background-color: $yellow
      text-decoration: none
      font-size: 0.9rem
      line-height: 1
      font-weight: bold()
      color: white
      transition: background-color 0.3s

      &:after
        content: ''
        +arrowWhite
        margin-left: 20px
        +translate3d(0,0,0)
        transition: transform 0.3s

      &:hover
        background-color: $darkYellow
        &:after
          +translate3d(5px, 0, 0)

      [class^="vso"] &
        background-color: $turquoise
        &:hover
          background-color: $darkTurquoise

    // Relevant pages
    .relevant-pages
      @extend .page-links
      padding: 120px 0 100px

  &[class^="vso"]

    .content-placeholder
      .right-icon
        &:after
          +sprite(-379px -78px, 60px, 144px)

      .left-icon
        &:after
          +sprite(-442px 0, 60px, 212px)

    .page-impression
      .quote
        background-color: $turquoise

    .main
      .content
        h1, h2
          color: $darkTurquoise
        ul, ol
          li
            &:before
              color: $darkTurquoise
        a:not(.button)
          color: $turquoise
          &:hover
            color: darken($turquoise, 10%)
      a.button
        background-color: $turquoise
        &:hover
          background-color: $darkTurquoise

      .relevant-pages
        p
          color: $darkTurquoise

        ul
          li
            a
              color: $turquoise
              &:hover
                color: $brightTurquoise

              &.active
                color: $darkTurquoise

  &[class^="services"],
  &[class^="jobs"]

    .content-placeholder
      .right-icon
        &:after
          +sprite(-379px -78px, 60px, 144px)

      .left-icon
        &:after
          +sprite(-195px 0, 60px, 212px)

    .page-impression
      .quote
        background-color: $blue

    .main
      .content
        h1, h2
          color: $servicesBlue
        ul, ol
          li
            &:before
              color: $servicesBlue
        a:not(.button)
          color: $servicesBlue
          &:hover
            color: darken($servicesBlue, 10%)
      a.button
        background-color: $servicesLightBlue
        &:hover
          background-color: $servicesBlue

      .relevant-pages
        p
          color: $servicesBlue

        ul
          li
            a
              color: $servicesLightBlue
              &:hover
                color: darken($servicesLightBlue, 10%)

              &.active
                color: $servicesBlue

  /* Mobile view
    ========================================================================== */
  +respond-to-width(840)
    .content-placeholder
      .grey-block
        display: none

    .grid-row
      width: 100%
      +flex(flex-start, flex-start)
      +flex-rows

      .right-icon
        display: none

      .page-impression
        width: 100%
        right: 0
        padding-top: 0
        padding-bottom: 0

        .quote
          display: none

        img.large
          display: block

        img.medium
          display: none

        .left-icon
          display: none

    .main
      width: 100%
      padding: 50px column(1, 12)

      .return-link
        height: auto


      .content
        h2
          font-size: 1.6rem
          margin: 20px 0 50px

      a.button
        margin-top: 15px

      .relevant-pages
        padding: 60px 0 0

    .content-placeholder
      &:after
        display: none
  +respond-to-width(550)
    .grid-row
      .page-impression
        img.large
          display: none

        img.medium
          display: block