@charset 'utf-8';

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  overflow: clip;
  white-space: nowrap;
}

.steer-clients {
  position: relative;
  padding: 5em 0;
  overflow: clip;
  background: #fff;
  z-index: 9;
}
.steer-clients__list {
  position: relative;
  --client-logo-height: 60px;
  --client-logo-width: calc(3.4 * var(--client-logo-height));
  height: var(--client-logo-height);
}
.steer-clients__list li {
  position: absolute;
  min-width: calc(100vw / (var(--clients-logo-count) - 1));
  width: var(--client-logo-width);
  text-align: center;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  --clients-logo-duration: 2s;
  animation: clientsLogoSlider calc(var(--clients-logo-duration) * var(--clients-logo-count)) linear 0s infinite forwards;
  animation-delay: calc(-1 * var(--clients-logo-duration) * (var(--clients-logo-count) - var(--clients-logo-number) + 1));
}
.steer-clients__list img {
  height: var(--client-logo-height);
  width: auto;
}
@keyframes clientsLogoSlider {
  0% {
    transform: translate3d(
      calc(100% * (var(--clients-logo-count) - 1.75)),
      0,
      0
    );
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@media (min-width: 600px) {
  .steer-clients__list {
    --client-logo-height: 75px;
  }
}
/* effect... */
.pj .content {
    margin-top: 0;
    padding-top: 10rem;
}