.photo-header
  padding-top: calc(100vw / 12 * 1.5)
  position: relative
  z-index: 3

  +respond-to-width-beyond(1440)
    padding-top: 180px

  .text-wrapper, #header-image-slider
    display: inline-block
    vertical-align: top

  .text-wrapper
    padding-top: calc(100vw / 12 * 0.5)
    width: column(4, 12)
    margin-left: column(1, 12)
    padding-right: 30px

    +respond-to-width-beyond(1440)
      padding-top: 60px

    #breadcrumb
      margin-bottom: calc(100vw / 12 * 0.5)

      +respond-to-width-beyond(1440)
        margin-bottom: 60px

    h1
      margin: 0
      font-size: 2rem
      line-height: 1.2
      color: $black

      .specialism-nl-3 &
        max-width: 310px


  #header-image-slider
    position: relative
    width: column(7, 12)
    margin-bottom: calc(100vw / 12 * -0.5)
    +respond-to-width-beyond(1440)
      margin-bottom: -60px


    .placeholder
      position: relative
      width: 100%
      padding-bottom: 60%

      figure
        position: absolute
        z-index: 1
        top: 0
        left: 0
        width: 100%
        height: 100%
        opacity: 0
        transform: translate3d(0,-20px,0)
        transition: opacity 0.4s, transform 0.3s

        .size
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-position: center
          background-size: cover

          &.small, &.medium
            display: none

          +respond-to-width(875)
            &.large
              display: none

            &.medium
              display: block

          +respond-to-width(400)
            &.medium
              display: none

            &.small
              display: block


        &.active
          z-index: 2
          opacity: 1
          transform: translate3d(0, 0, 0)

    .slider-navigation-labels
      position: absolute
      right: 100%
      bottom: calc(100vw / 12 * 0.5 + 12px)
      width: column(2, 7)

      +respond-to-width(1440)
        width: 240px

      +respond-to-width-beyond(1440)
        bottom: 72px

      .navigation
        position: absolute
        right: 16px
        bottom: 0
        span
          +flex(center, center)
          width: 12px
          height: 12px
          cursor: pointer
          border-radius: 100%
          border: 2px solid $lighterBrown
          transition: border 0.3s

          + span
            margin-top: 6px

          &:hover
            border-color: $darkerBrown

          &.active
            border-color: $blue

            // ---------------------------- Site specific styling
            .lacom-machinefabriek &
              border-color: $flatRed

            .rols-machineonderdelen &
              border-color: $rollsYellow

            .vdb-machinefabriek &
              border-color: $vdbGreen

            .jansen-machining-technology &
              border-color: $jansenBlue

      .caption
        p
          position: absolute
          left: 0
          bottom: 0
          margin: 0
          padding: 0 34px 0 12px
          font-size: 0.85rem
          line-height: 1.2
          color: $lightBrown
          opacity: 0
          transform: translate3d(0,-20px,0)
          transition: opacity 0.4s, transform 0.3s

          &.active
            opacity: 1
            transform: translate3d(0,0,0)

  +respond-to-width(1200)
    padding-top: 150px

    .text-wrapper, #header-image-slider
      display: block
      width: column(10, 12)
      margin-left: auto
      margin-right: auto

    #header-image-slider
      .slider-navigation-labels
        .caption
          display: none

    .text-wrapper
      padding-top: 0
      padding-right: 0
      margin-bottom: 40px

      #breadcrumb
        margin-bottom: 10px

  +respond-to-width(700)
    .grid-row
      width: 100%

    .text-wrapper, #header-image-slider
      width: calc(100% - 40px)

    #header-image-slider
      position: relative
      .slider-navigation-labels
        z-index: 5
        right: auto
        left: 12px
        bottom: 12px
        width: 12px
        .navigation
          right: 0

  +respond-to-width(600)
    #header-image-slider
      width: 100%
      margin-bottom: 0