.sbm-logobalk{position:relative;overflow:hidden;padding:32px 0}

.sbm-logobalk--fade{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}

.sbm-logobalk__spoor{
  display:flex;
  align-items:center;
  gap:88px;
  width:max-content;
  margin:0;
  padding:0;
  list-style:none;
  animation-name:sbm-logoschuif;
  animation-duration:52s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.sbm-logobalk--pauze:hover .sbm-logobalk__spoor{animation-play-state:paused}

.sbm-logobalk__item{
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
  margin:0;
  color:rgba(237,239,241,.32);
  transition:color .2s ease;
}

.sbm-logobalk__item > a{
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

.sbm-logobalk__merk{display:block;width:26px;height:26px;flex:none}
.sbm-logobalk__merk svg{display:block;width:100%;height:100%}
.sbm-logobalk__beeld{display:block;height:32px;width:auto}

.sbm-logobalk__naam{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em;
  white-space:nowrap;
  line-height:1;
}

@keyframes sbm-logoschuif{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Staat de widget op Apparaatinstelling volgen, dan valt hij bij uitgezette
   animaties terug op een statische rij. Op Altijd bewegen blijft hij schuiven. */
@media (prefers-reduced-motion:reduce){
  .sbm-logobalk--fade:not(.sbm-logobalk--altijd){-webkit-mask-image:none;mask-image:none}
  .sbm-logobalk:not(.sbm-logobalk--altijd) .sbm-logobalk__spoor{
    animation:none;
    width:100%;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:40px;
  }
  .sbm-logobalk:not(.sbm-logobalk--altijd) .sbm-logobalk__item[aria-hidden="true"]{display:none}
}