/* DASHPORT process screenshot carousel. Page-local; works with the .dp-redesign-workflow__* markup. */
.dp-redesign-workflow__screen {
  touch-action: pan-y;
}
.dp-redesign-workflow__screen:focus-visible,
.dp-redesign-workflow__bar:focus-visible,
.dp-redesign-workflow__arrow:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}
.dp-redesign-workflow__screen:focus-visible {
  outline-color: #D4AF37;
}
.dp-redesign-workflow__slide[hidden] {
  display: none;
}
.dp-redesign-workflow__slide--shot {
  display: block;
  border: 0;
  background: #FAF9F3;
}
.dp-redesign-workflow__slide--shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.dp-redesign-workflow__slide--shot.is-entering {
  animation: dp-carousel-in .35s ease both;
}
@keyframes dp-carousel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.dp-redesign-workflow__bars .dp-redesign-workflow__bar:first-child span {
  background: rgba(255, 255, 255, .28);
}
.dp-redesign-workflow__bars .dp-redesign-workflow__bar:hover span {
  background: rgba(255, 255, 255, .6);
}
.dp-redesign-workflow__bars .dp-redesign-workflow__bar.is-active span {
  background: #D4AF37;
}
.dp-redesign-workflow__bar,
.dp-redesign-workflow__arrow {
  cursor: pointer;
}
@media (max-width: 700px) {
  .dp-redesign-workflow__bar {
    height: 32px;
  }
  .dp-redesign-workflow__arrows {
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dp-redesign-workflow__slide--shot.is-entering {
    animation: none;
  }
}