:root{
  --ff-red:#df0e1a; --ff-navy:#0b2a4b; --ff-white:#fff;
  --ff-alert-h:24px; --ff-alert-speed:18s;
  --ff-z-alert:108; --ff-z-bell:108;
}

/* wrapper gives positioning context for absolute variants */
.ff-alert-anchor{ position: relative; }

/* bar */
.ff-alert
 {
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--ff-z-alert);
    transform: translateY(-100%);
    transition: transform .25s ease;
    width: 100%;
    margin: auto;
    background: #011131;
    padding-bottom: 10px;
}
.ff-alert--absolute{ position:absolute; }
.ff-alert--fixed{ position:fixed; }
.ff-alert.is-open{ transform:translateY(0); }

.ff-alert__bar{
  height:var(--ff-alert-h); background:transparent; color:var(--ff-white);
  display:flex; grid-template-columns:1fr auto; align-items:center;
}
.ff-alert__marquee{ overflow:hidden; white-space:nowrap;
    padding-bottom: 3px;    padding-top: 5px;
   width: 100%;
}
.ff-alert__track{ display:inline-block; padding-left:100%; animation:ff-marquee var(--ff-alert-speed) linear infinite; }
.ff-alert__bar:hover .ff-alert__track{ animation-play-state:paused; }
@keyframes ff-marquee{ from{transform:translateX(0)} to{transform:translateX(-100%)} }
.ff-alert__marquee a, .ff-alert__marquee span{
  display:inline-block; padding:0 2rem; line-height:var(--ff-alert-h);
  color:var(--ff-white); text-decoration:none; font-weight:600; letter-spacing:.02em; font-size:14px;
}
.ff-alert__close{ appearance:none; border:0; background:var(--ff-red); color:#fff; width:var(--ff-alert-h); height:var(--ff-alert-h); cursor:pointer; display:none; }