.services-ozapp

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

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


  .brochures-overview
    @extend .news-overview
    padding: 100px 0
    background-color: white

    +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
          +respond-to-width(840)
            background-image: none

          h4
            color: $blue
            +respond-to-width(840)
              width: 100%


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

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

          article
            width: 230px
            margin-right: 40px
            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
                position: relative
                font-weight: bold
                font-size: 22px
                line-height: 28px
                color: #FFFFFF
                background-color: $yellow
                width: 100%
                height: 200px
                padding: 15px 20px
                +flex(space-between, flex-end)

                &:before 
                  content: ""
                  position: absolute
                  top: 0
                  right: 0
                  border-width: 0 24px 24px 0
                  border-style: solid
                  border-color: #F2F2F2 #F2F2F2 $yellow $yellow
                  background: $yellow
                  -webkit-box-shadow: -2px 2px 5px rgba(0,0,0,0.2)
                  -moz-box-shadow: -2px 2px 5px rgba(0,0,0,0.2)
                  box-shadow: -2px 2px 5px rgba(0,0,0,0.2)
                  /* Firefox 3.0 damage limitation */
                  display: block
                  width: 0

              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)
              margin-right: 20px
              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