.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

        .overview-header
          margin-bottom: 30px

        .overview-header--additional-top
          margin-top: 60px

        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%
            max-width: 650px
            position: relative
            margin-bottom: 30px

            .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

              .inner-content
                padding: 15px 25px 25px

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

                  +respond-to-width(1200)
                    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: #737373
                    text-align: center

                    svg
                      margin-bottom: 8px
                      color: #ffb200

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


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

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

              a
                position: relative
                display: block
                margin-top: 20px
                background-color: transparent
                transition: none
                font-weight: bold
                font-size: 16px
                line-height: 1
                color: #425963
                padding-left: 30px

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

                &.no-icon
                  padding-left: 0
                  &:before
                    display: none
                  &:after
                    content: ""
                    position: absolute
                    top: -1px
                    left: 117px
                    width: 18px
                    height: 18px
                    background: transparent url('/img/arrow.svg') no-repeat
                    background-size: cover


                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