/* AlpenPuls Portal V3.1.8 - ultra smooth live ticker */

/* The former CSS mask on the moving ticker can trigger extra raster work on
   some browsers. The fade is now rendered by two static overlay layers. */
.event-ticker-viewport{
  position:relative;
  isolation:isolate;
  contain:layout paint;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.event-ticker-viewport::before,
.event-ticker-viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  z-index:4;
  pointer-events:none;
}
.event-ticker-viewport::before{
  left:0;
  background:linear-gradient(90deg,rgba(3,18,30,.98),rgba(3,18,30,0));
}
.event-ticker-viewport::after{
  right:0;
  background:linear-gradient(270deg,rgba(3,18,30,.98),rgba(3,18,30,0));
}

.event-ticker{
  contain:layout paint style;
  transform:translateZ(0);
  backface-visibility:hidden;
  isolation:isolate;
}

.event-ticker-track{
  position:relative;
  z-index:1;
  animation:none!important;
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout style;
  transform-origin:0 50%;
}
.event-ticker-track.ap-smooth-marquee{
  animation-name:apTickerSmooth318!important;
  animation-duration:var(--ap-ticker-duration,38s)!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
}
@keyframes apTickerSmooth318{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--ap-ticker-shift,-900px),0,0)}
}

/* Keep the moving layer cheap to composite. */
.event-ticker-group,
.event-ticker-item,
.event-ticker-date,
.event-ticker-title,
.event-ticker-place,
.event-ticker-highlight{
  transform:translateZ(0);
  backface-visibility:hidden;
}
.event-ticker-item{
  transition:none!important;
}

/* Highlight remains visible, but without a long translucent gradient on the
   animated element. This noticeably reduces repaint cost on slower GPUs. */
.event-ticker-item.is-highlight{
  background:rgba(255,177,44,.075)!important;
}
.event-ticker-item.is-highlight::before{
  box-shadow:none!important;
}
.event-ticker-highlight{
  box-shadow:none!important;
}

/* The small pulse is decorative; keeping it static frees another animation
   layer while the ticker is moving. */
.event-ticker-dot{
  animation:none!important;
}

@media(max-width:780px){
  .event-ticker-viewport::before,
  .event-ticker-viewport::after{width:20px}
  .event-ticker-track{will-change:transform}
}