/* Employer route only. Other audience diagrams keep their existing movement. */
.route-werkgevers .employer-route-date{font-size:12px}
.route-werkgevers .employer-route-label{font-size:15px;font-weight:500}
.route-werkgevers .employer-route-phase{font-size:10px;letter-spacing:.025em}
.route-werkgevers .employer-route-track-title{font-size:18px;font-weight:500}
.route-werkgevers .employer-route-track-label{font-size:14px}
.route-werkgevers .employer-route-track-detail{font-size:11px}
.route-werkgevers .employer-route-sources{display:block;margin-top:7px}
.route-werkgevers .employer-route-progress{
  offset-distance:0%;
  offset-rotate:0deg;
  animation:employer-route-journey 14s ease-in-out infinite;
}

/* One marker pauses at each of the four milestones, then reaches the split.
   The branch lines are static: they are options/fases, not concurrent journeys. */
@keyframes employer-route-journey{
  0%{offset-distance:0%;opacity:0}
  3%,9%{offset-distance:0%;opacity:1}
  26%,34%{offset-distance:24.1667%;opacity:1}
  51%,59%{offset-distance:48.3333%;opacity:1}
  76%,84%{offset-distance:72.5%;opacity:1}
  96%,98%{offset-distance:100%;opacity:1}
  100%{offset-distance:100%;opacity:0}
}

@media(max-width:760px){
  .route-werkgevers .employer-route-date{font-size:16px}
  .route-werkgevers .employer-route-label{font-size:18px}
  .route-werkgevers .employer-route-phase{font-size:12px}
  .route-werkgevers .employer-route-track-title{font-size:21px}
  .route-werkgevers .employer-route-track-label{font-size:16px}
  .route-werkgevers .employer-route-track-detail{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .route-werkgevers .employer-route-progress{animation:none!important;offset-distance:72.5%;opacity:1}
}