.jobs-content
  overflow: hidden

.job-description
  margin-bottom: 60px
  h2
    color: $lightOrange
  p, ul
    color: $fontGray

.job-imgholder
  padding-top: 3.5em
  figure
    display: block
    width: 100%
    height: 0
    padding-bottom: 100%
    margin: 0
    background-repeat: no-repeat
    background-size: cover
    background-position: center center

body.jobs

  .jobs-content
    &:after
      content: ""
      opacity: 0.5
      top: 0
      left: 0
      bottom: 0
      right: 0
      position: absolute
      z-index: -5
      background: white url('/img/clouds_bg.jpg') no-repeat

    .breadcrumb
      margin: 108px 0 0 0

  h1
    font-style: italic
    font-size: 40px
    line-height: 38.46px
    letter-spacing: -0.2px
    color: $fontGray
    margin: 58px 0

  .jobs-intro
    padding: 0
    height: auto
    margin-bottom: 60px
    z-index: 1

    .grid-col
      vertical-align: top

      h1
        margin: 73px 0

    .textholder
      margin-left: column(1)
      .text
        font-size: 24px
        line-height: 38px
        color: $fontLightGray
        padding-top: 45px

        p
          letter-spacing: -0.3px

  .jobs-diensten-menu
    margin-bottom: 110px
    z-index: 1
    .grid-col
      vertical-align: top
      display: flex
      align-items: stretch
      justify-content: space-between
      flex-wrap: wrap
      overflow: visible
      article
        margin-bottom: 60px
        box-shadow: 1px 1px 10px 0 rgba(black, 0.1)
        a
          text-decoration: none
          padding: 30px
          background-color: white
          width: 100%

          .content
            color: $darkGray
            h3
              color: $lightOrange

          &:hover
            .content
              color: $fontBlack
    h1
      margin: 70px 0 77px 0

  .diensten-blok
    //background: white url('/img/clouds_bg.jpg') no-repeat
    padding-top: 128px
    position: relative

    h1
      margin-bottom: 60px
      line-height: 60px
      text-align: center

    .icon-holder
      height: 645px
      background-color: $fontGray
      margin-left: column(0.5)
      width: column(13)
      z-index: 1
      padding-top: 5px

      .grid-row
        height: 275px

        .grid-col
          padding: 90px 0 0 65px
          text-align: center
          color: white
          width: column(4.45)
          height: 100%
          letter-spacing: 0.2px

          h4
            font-size: 28px
            line-height: 62px

          img
            width: 55px
            height: 70px
            margin: 0 auto

          p
            font-size: 18px
            line-height: 24px
            margin-top: -8px

          .button
            top: 70px

    .hexagon-frame
      height: 100%
      width: 100%
      position: absolute
      top: 0
      overflow: hidden
      z-index: 0

      .big-hexagon-holder
        left: 62.5%
        position: relative
        top: 25%

        svg
          transform: rotate(10deg) scale(1.1)

          .st0
            fill: url(#SVGID_1_)

    .dienstenLink
      width: 100%
      font-size: 19px
      line-height: 24px
      text-align: center
      padding: 67px 0 125px

      a
        color: $fontLightGray
        text-decoration: none
        border-bottom: solid 2px $fontLightGray
        padding-bottom: 1px

  .call-to-action-contact
    left: column(-1)

+respond-to-width(1120)
  body.jobs
    .jobs-diensten-menu
      height: 930px
      .diensten-menu
        .grid-col
          a
            flex-basis: 100%
            flex-grow: 0
            margin-right: 0

            .button
              margin-bottom: 40px

+respond-to-width(840)
  body.jobs
    .jobs-content
      .breadcrumb
        margin-top: 40px
    .top
      padding-top: 30px
    .jobs-intro
      .offset-1
        margin-left: 0
      .textholder
        .text
          font-size: 20px

    .jobs-diensten-menu
      margin-bottom: 110px
      z-index: 1
      .offset-1
        margin-left: 0
      .grid-col
        article
          width: 100%
          margin-left: 10px
          a
            flex-basis: 100%
            font-size: 18px

    .uit-je-dak
      a.button
        min-width: 180px
        height: 40px
        font-size: 14px
        line-height: 40px

+respond-to-width(760)
  body.jobs
    .jobs-intro
      height: auto
      padding-bottom: 0
      margin-bottom: 50px
      .grid-col
        width: 100%

        h1
          margin: 10% 0
      .textholder
        margin-left: 0
        .text
          padding-top: 0
          font-size: 18px


      .imgholder
        width: 100%

    .jobs-diensten-menu
      height: auto
      margin-bottom: 50px

+respond-to-width(435)
  body.jobs
    .jobs-content
      .breadcrumb
        margin-top: 0
    .jobs-intro
      .grid-col
        h1
          font-size: 32px

      .textholder
        .text
          p
            margin: 0
            font-size: 16px
            line-height: 24px


    .jobs-diensten-menu
      h1
        margin-bottom: 10%
      .grid-row
        .col-13
          width: 100%
          margin-left: 0

          a
            height: 70px
            line-height: 70px
            padding-top: 0
            margin-bottom: 30px
            &:before
              margin-right: 30%
            svg
              left: 18px
              width: 35px
              top: 0
            .bg
              width: 70px
              height: 70px
              left: 0
              top: 0

    .uit-je-dak
      margin-bottom: 1px

    .call-to-action-contact
      margin-bottom: 0
      padding-bottom: 0
      left: 0
      .grid-row
        width: 100%

        .cta-text
          width: 100%
          margin: 0
          padding-bottom: 5%

          h2, h4
            padding-left: 30%

        .round-portrait
          left: 10%

      .phone, .mail
        height: 65px
        img
          height: 75%