/* Ticker orizzontale a tutta larghezza, fissato in cima alla pagina */

:root{ --pnTickerH: 26px;}

.pn_ticker{ position: fixed; top: 0; left: 0; width: 100%; height: var(--pnTickerH); z-index: 1003; display: flex; align-items: stretch; background: var(--primaryColor); overflow: hidden;}

/* L'header fisso e il contenuto scalano verso il basso dell'altezza del ticker */
.header_section{ top: var(--pnTickerH);}
body{ padding-top: calc(150px + var(--pnTickerH));}

.pn_ticker .label{ flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--whiteColor); font-family: var(--titleFont); font-size: 13px; font-weight: 900; line-height: 1; color: var(--primaryColor); text-transform: uppercase; white-space: nowrap;}
.pn_ticker .label img{ height: 13px; width: auto; object-fit: contain;}

.pn_ticker .viewport{ flex: 1 1 auto; position: relative; overflow: hidden;}

/* Due gruppi identici affiancati: a -50% il secondo e' esattamente dove era il primo */
.pn_ticker .track{ display: flex; width: max-content; height: 100%; animation: pn_ticker_scroll var(--pnTickerDuration, 60s) linear infinite;}
.pn_ticker:hover .track{ animation-play-state: paused;}
.pn_ticker .group{ display: flex; align-items: center; flex: 0 0 auto;}

.pn_ticker .item{ display: flex; align-items: center; gap: 7px; padding: 0 18px; white-space: nowrap; font-family: var(--titleFont); font-size: 14px; line-height: 1; color: var(--whiteColor);}
.pn_ticker .item::after{ content: ""; position: relative; left: 18px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.55);}
.pn_ticker .item .time{ font-weight: 900; opacity: 0.85;}
.pn_ticker .item a{ color: var(--whiteColor); font-weight: 500;}
.pn_ticker .item a:hover{ color: var(--whiteColor); text-decoration: underline;}

@keyframes pn_ticker_scroll{
  from{ transform: translateX(0);}
  to{ transform: translateX(-50%);}
}

@media (prefers-reduced-motion: reduce){
  .pn_ticker .track{ animation: none;}
  .pn_ticker .viewport{ overflow-x: auto;}
  .pn_ticker .group + .group{ display: none;}
}

@media (max-width:1199px){
  body{ padding-top: calc(100px + var(--pnTickerH));}
}

@media (max-width:767px){
  :root{ --pnTickerH: 24px;}
  body{ padding-top: calc(140px + var(--pnTickerH));}
  .pn_ticker .label span{ display: none;}
  .pn_ticker .label{ padding: 0 9px;}
  .pn_ticker .item{ font-size: 13px; padding: 0 14px;}
  .pn_ticker .item::after{ left: 14px;}
}