.hp {
width: 100%;
}
.hp-screen {
position: relative;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
border-radius: 6px 6px 0 0;
background: #101012;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .08);
}
.hp-body {
filter: drop-shadow(0 14px 30px rgba(43, 41, 45, .18));
}
.hp-carousel,
.hp-slides,
.hp-slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hp-slide > video,
.hp-slide > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hp-slide > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hp-live {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 7px 3px 6px;
border-radius: 4px;
background: #E02020;
color: #fff;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
line-height: 12.5px;
}
.hp-live:before {
content: '';
flex: 0 0 auto;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
animation: heroLiveDot 2s ease-in-out infinite;
}
.hp-play {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
}
.hp-film-host {
max-width: none;
margin: 0;
background: none;
border-radius: 0;
overflow: visible;
}
.hp-bar {
position: relative;
padding: 0 14px 11px;
border-radius: 0 0 6px 6px;
background: #fff;
box-shadow: 0 1px 0 rgba(43, 41, 45, .06) inset;
}
.hp-track {
position: relative;
height: 3px;
margin: 0 -14px 11px;
background: rgba(43, 41, 45, .10);
}
.hp-track__fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--hp-progress, 0%);
background: #E02020;
}
.hp-controls {
display: flex;
align-items: center;
gap: 16px;
}
.hp-icon {
display: inline-flex;
flex: 0 0 auto;
color: rgba(43, 41, 45, .72);
}
.hp-icon svg {
display: block;
width: 20px;
height: 20px;
}
.hp-icon--full svg {
width: 17px;
height: 17px;
}
.hp-now {
display: inline-flex;
align-items: center;
gap: 5px;
color: #2B292D;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1;
}
.hp-now__dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #E02020;
}
.hp-gap {
flex: 1 1 auto;
}
.hp-stream {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
--hp-h: 20px;
}
.hp-dest {
display: block;
flex: 0 0 auto;
width: auto;
height: var(--hp-h);
overflow: visible;
}
.hp-dest__roll {
display: block;
position: relative;
height: var(--hp-h);
}
.hp-dest__item {
position: absolute;
top: 0;
right: 0;
left: auto;
width: auto;
display: flex;
align-items: center;
height: var(--hp-h);
opacity: 0;
transition: opacity .12s ease;
}
.hp-dest__item.is-on {
position: relative;
opacity: 1;
transition: opacity .16s ease .12s;
}
.hp-dest__text {
color: rgba(43, 41, 45, .72);
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
line-height: var(--hp-h);
white-space: nowrap;
text-align: right;
}
.hp-stream,
.hp-dest {
flex-shrink: 1;
min-width: 0;
}
.hp-dest__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.hp-dots {
position: static;
margin: 18px 0 0;
padding: 0;
justify-content: center;
opacity: 1;
}
.hp-dots li:before {
background: rgba(43, 41, 45, .12);
transition: background .2s, box-shadow .2s;
}
.hp-dots li.active:before {
background: #00ffff;
box-shadow: 0 0 0 1px rgba(43, 41, 45, .5);
}
.hp:hover .hp-dots li:before {
background: rgba(43, 41, 45, .28);
}
.hp:hover .hp-dots li.active:before {
background: #00ffff;
box-shadow: 0 0 0 1px #2B292D;
}
@media (max-width: 767px) {
.hp-bar { padding: 0 10px 9px; }
.hp-track { margin: 0 -10px 9px; }
.hp-controls { gap: 11px; }
.hp-icon svg { width: 17px; height: 17px; }
.hp-icon--full svg { width: 14px; height: 14px; }
.hp-now { font-size: 11px; }
.hp-now__dot { width: 7px; height: 7px; }
.hp-stream { --hp-h: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.hp-live:before { animation: none; }
.hp-dest__item,
.hp-dest__item.is-on { transition: none; }
}