.jobs

  .white-styling-block
    position: relative
    height: 160px
    width: 100%
    background-color: white
    margin-top: -160px

  +respond-to-width(840)
    .image-wrapper
      background-image: none


  .jobs-overview
    @extend .news-overview
    padding-top: 10%
    padding-bottom: 100px
    margin-top: -5%
    background-color: white

    +respond-to-width-beyond(1550)
      margin-top: -200px

    +respond-to-width-beyond(1400)
      margin-top: -10%

    +respond-to-width(840)
      padding-bottom: 0

    &:after
      background-color: $servicesLightBlue
      width: 25%
      bottom: auto
      top: 0
      height: 100%

    .grid-row
      .styling
        left: -30px
        bottom: -50%

      .overview-placeholder
        padding: 0
        background-color: transparent

        h4
          color: $blue
          font-size: 16px
          +respond-to-width(840)
            width: 100%


        .articles
          padding-top: 0
          +respond-to-width(840)
            width: column(12,14)

          +respond-to-width(500)
            width: 100%

          article
            width: 100%
            position: relative
            margin-bottom: 60px

            .content
              height: 100%
              width: 100%
              font-size: 1rem
              line-height: 1.4
              color: $darkGray
              background-color: #F2F2F2

              +respond-to-width(1280)
                //font-size: 0.85rem

              h2
                font-weight: bold
                font-size: 24px
                line-height: 28px
                color: #FFFFFF
                background-color: $yellow
                width: 100%
                padding: 15px 20px

              p, a
                font-size: 16px
                line-height: 24px
                color: $darkGray
                margin: 0
                padding: 5px 30px
                max-width: none

              a
                position: relative
                background-color: transparent
                transition: none
                font-weight: bold
                font-size: 16px
                color: #425963
                padding-left: 30px
                margin-left: 30px
                margin-bottom: 15px

                &:before
                  content: ""
                  position: absolute
                  top: 3px
                  left: 0
                  width: 20px
                  height: 25px
                  background: transparent url('/img/download_icon.svg') no-repeat

                span
                  font-weight: normal
                  color: $globalBlue

                &:hover
                  color: lighten(#425963, 10%)

                  span
                    color: $blue

            &.intern
              .content
                h2
                  background-color: $globalBlue

            +respond-to-width(950)
              a
                .content
                  font-size: 0.9rem

            +respond-to-width(650)
              width: 100%
              a
                .content
                  font-size: 1.2rem
                figure
                  padding-top: 50%

            +respond-to-width(400)
              a
                .content
                  font-size: 1rem
                figure
                  padding-top: 60%

        .pagination.bottom
          text-align: center
          margin-top: 25px

      .overview-image
        z-index: 20
        width: 50%
        margin-right: column(-1, 12)
        vertical-align: top

        .image
          img
            width: 100%

        +respond-to-width(840)
          width: 100%
          margin-right: 0
          margin-left: 0
          line-height: 0


  .dynamic-block
    .image
      span
        background-position: 0 48.5%


    .button:after
      margin-left: 60px