/*==========================================================================
  Content block - Home
  ========================================================================== */

.home-content
  position: relative
  margin-top: -160px

  .background
    position: absolute
    left: 0
    height: 100%
    width: 50%
    background-color: white

    &:after
      content: ''
      position: absolute
      left: 100%
      bottom: 0
      height: calc(100% - 160px)
      width: 100%
      background-color: $lightGray2

  .grid-row
    min-height: 840px
    padding-top: 160px
    +flex(flex-start, center)
    position: relative
    &:after
      content: ''
      position: absolute
      z-index: 1
      top: 0
      right: column(5, 24)
      height: 100%
      width: 100%
      background-color: white

  &.service-content
    .left-icon
      position: absolute
      left: 0
      bottom: 40px
      z-index: 4
      width: 60px
      height: 212px
      &:after
        content: ''
        +sprite(-442px 0, 60px, 212px)
        display: block

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

    .grid-row
      +flex(flex-start, flex-start)
      min-height: 0

    section
      h1
        color: $globalBlue

      p
        color: rgba($darkGray, 0.8)
        a, strong
          color: $darkGray

      ul, ol
        li
          color: rgba($darkGray, 0.8)
          &:before
            color: rgba($darkGray, 0.8)

      +respond-to-width(1300)
        padding-right: 0

    .contact-options
      .option
        p
          color: $globalBlue
          a
            color: $servicesLightBlue

            &:hover
              color: darken($servicesLightBlue, 5%)

  &.job-content
    margin-top: 0

    +respond-to-width(840)
      background-color: $darkerBlue

    .background
      height: auto

    .grid-row
      &.home-intro
        padding-bottom: 0
        padding-top: 0
        z-index: 20

        +respond-to-width(1200)
          display: block

          .grid-col
            width: 100%
            margin-left: 0
            margin-right: 0

            &:first-child
              padding-bottom: 0

      &:after
        content: normal

      .references-slider
        background-color: transparent
        height: 0
        width: 100%
        padding-bottom: 100%

        .reference-nav
          bottom: -20px
          right: auto
          width: 100%
          +flex(center, center)

        li
          +sprite(-183px -230px, 20px, 20px)
          background-size: 600px 500px

          &:before
            content: normal

          &.active
            +sprite(-165px -230px, 20px, 20px)
            background-size: 600px 500px

      figure
        width: 100%
        background-size: contain
        background-position: 50% 25%
        opacity: 0
        transition: opacity 0.5s
        background-repeat: no-repeat

        &.active
          opacity: 1

      section
        background-color: transparent
        overflow: visible

        p
          color: $servicesLighterBlue
          margin: 0
          max-width: none

        h1
          color: white



    .left-icon
      position: absolute
      left: 0
      bottom: 40px
      z-index: 4
      width: 60px
      height: 212px
      &:after
        content: ''
        +sprite(-442px 0, 60px, 212px)
        display: block

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

    .grid-row
      padding-top: 0
      +flex(flex-start, flex-start)
      min-height: 0

    section
      h1
        color: $globalBlue

      p
        color: rgba($darkGray, 0.8)
        a, strong
          color: $darkGray

      ul, ol
        li
          color: rgba($darkGray, 0.8)
          &:before
            color: rgba($darkGray, 0.8)

      +respond-to-width(1300)
        padding-right: 0


    .links-holder
      +flex(flex-start, flex-end)

      +respond-to-width(425)
        display: block
        margin-top: 20px

      .internalLink
        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

        +respond-to-width(425)
          position: relative
          width: 100%

        &:after
          content: ''
          +arrowWhite
          margin-left: 60px
          transition: transform 0.3s
          +translate3dRotate(0,0,0,90deg)

          +respond-to-width(425)
            margin-left: 0
            position: absolute
            right: 5%
            margin-top: 2px

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

      .contact-options
        display: block
        margin-left: auto
        margin-top: 25px
        width: auto

        .option
          text-align: left
          width: 100%

          +respond-to-width(425)
            text-align: center

          p
            color: $blue
            a
              color: white

              &:hover
                color: darken(white, 5%)



  .job-info
    display: flex
    flex-direction: row
    justify-content: space-around
    margin-top: 32px
    margin-bottom: 48px

    +respond-to-width(768)
      flex-direction: column
      align-items: center

      svg
        margin-top: 16px

    .job-info__item
      width: 30%
      display: flex
      align-items: center
      flex-direction: column
      font-size: 16px
      line-height: 24px
      color: #b8d6e6
      text-align: center

      svg
        margin-bottom: 8px
        color: #ffb200

      +respond-to-width(768)
        width: 75%




    aside
      margin-top: 80px

  .job-info--contact
    margin-top: 36px
    .job-info__item
      svg
        color: #4fc2f8

  /* Main content
    ========================================================================== */

  section
    background-color: white
    padding-top: 80px
    padding-bottom: 100px
    position: relative
    z-index: 2

    +respond-to-width(1300)
      padding-right: 50px

    h1
      font-size: 1.6rem
      font-weight: bold()
      color: $darkBlue
      margin: 0 0 40px

      // Colleague styling
      [class^="vso"] &
        color: $turquoise

    p
      font-size: 0.9rem
      color: $darkGray
      margin: 0 0 40px
      max-width: 600px
      strong
        color: $fontBlack
      a
        color: $brightBlue
        text-decoration: none
        transition: color 0.3s
        &:hover
          color: darken($brightBlue, 15%)
        [class^="vso"] &
          color: $turquoise
          &:hover
            color: darken($turquoise, 10%)


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

      li
        position: relative
        padding-left: 20px
        font-size: 1.1rem
        color: $fontPurple
        //font-size: 0.8rem
        &:before
          position: absolute
          color: $fontPurple
          font-size: 1.2rem
          line-height: 1
          left: -20px

    ul
      li
        &:before
          content: '\2022'
          top: 3px

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

    >a
      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)

  /* Contact options bellow main content
    ========================================================================== */
  .contact-options
    +flex(space-between, flex-start)
    margin-top: 50px

    .option
      width: 50%
      p
        font-size: 0.9rem
        font-weight: bold()
        color: $brightBlue
        a
          display: block
          color: $blue
          text-decoration: none
          transition: color 0.4s

          &:hover
            color: $darkPink

      &.school-guide
        p
          a
            position: relative
            padding-left: 30px
            &:before
              content: ''
              position: absolute
              top: 2px
              left: 0
              +sprite(-95px -175px, 19px, 24px)
              display: inline-block

      // Colleague styling
      [class^="vso"] &
        p
          color: $darkTurquoise
          a
            color: $turquoise
            &:hover
              color: $brightTurquoise

  aside
    background-color: white

    .impression-image
      width: 100%
      position: relative
      z-index: 2

    &:after
      content: ''
      position: absolute
      right: 0
      top: 0
      width: 50%
      height: 100%
      background-color: $lightGray2

    +respond-to-width(1280)
      width: column(4, 10)


#vacature-contact
  background-image: url(/img/forest_top_view_grey.jpg)
  background-position: right bottom
  background-size: cover
  width: 100%

  background-color: #f06292

  .container
    width: 85.7142857143%
    max-width: 1680px
    margin-right: auto
    margin-left: auto

    .job-info
      display: flex
      flex-direction: row
      justify-content: space-around
      padding-top: 48px
      padding-bottom: 48px

      +respond-to-width(768)
        flex-direction: column
        align-items: center

        svg
          margin-top: 16px

      .job-info__item
        text-decoration: none
        width: 30%
        display: flex
        align-items: center
        flex-direction: column
        font-size: 16px
        line-height: 24px
        color: white
        text-align: center

        svg
          margin-bottom: 8px
          color: #ffb200

        +respond-to-width(768)
          width: 75%

#vacature

  .content-block, .full-text-block
    background-image: none
    &:nth-of-type(n)
      background-color: $bluer
    &:nth-of-type(2n)
      color: white
      background-color: $darkYellow
      p, strong, h2
        color: white
    &:nth-of-type(3n)
      color: white
      background-color: $bluer
      p, strong, h2
        color: white

    .image
      height: calc(100% - 100px)
      margin-top: 50px
      border-radius: 25px