:root {
    --player-width: 448px;
    --player-height: 252px;
    --color-white: #f5f5f5;
}

html, body, main, header, div, span, video, strong, img, a, h1, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul {
	list-style: none;
}

/* remove gross spacing below some elements */
img, video, li {
	display: block;
}

body {
	line-height: 1;
	background: linear-gradient(rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0) 300px), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(to right, #011839, #0255ae);
}

main {
	width: 100vw;
	height: 100vh;
}

.backgroundImg {
	position: fixed;
	top: -135px;
	width: 100vw;
	height: auto;
	opacity: 0.1;
	-webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
}



/*
/
/   MINIPLAYER
/
*/

#playerWrapper {
    position: fixed;
    top: 20px;
    right: 20px;
    width: var(--player-width);
    height: var(--player-height);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
    z-index: 9;
	overflow: hidden;
	transform-origin: center top;
	border-radius: 0px;
}

#playerCloseOverlay {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 9999;
}

#playerOverlay {
    position: absolute;
    width: var(--player-width);
    height: 220px;
    background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 20%);
    opacity: 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 999;
}

#playerOverlay header {
	margin: 5px;
}

#playerOverlay h1 {
	padding: 8px 0 0 0;
	font-family: "proxima-nova";
	font-size: 15px;
	font-weight: 600;
	color: var(--color-white);
	width: 414px;
}

#playerGrabIcon,
#playerCloseIcon {
	width: 28px;
	height: 28px;
	opacity: 0.75;
    float: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

#playerVideo {
    width: var(--player-width);
    height: var(--player-height);
}

/* show header */
#playerWrapper:hover #playerOverlay {
    opacity: 1;
}

#playerWrapper:hover #playerCloseOverlay {
    opacity: 1;
}





/* hand cursor */
#playerOverlay {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* active state */
#playerOverlay:active {
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%);
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

/* grab icon */
#playerOverlay:active #playerGrabIcon {
	opacity: 1;
}

/* close icon */
#playerCloseIcon {
	cursor: pointer;
}
#playerCloseIcon:hover {
    opacity: 1;
}



/*
/
/   WATCH LIVE BUTTON
/
*/

.watchlive {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #C20E12;
    background-image: linear-gradient(135deg, #D9071A, #E70262);
    border-radius: 5px;
    width: 175px;
    height: 50px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.50);
    z-index: 8;
    transition-duration: 0.2s;
    overflow: hidden;
}

.watchlive:hover {
    filter: brightness(105%);
    width: 530px;
    transition-duration: 0.2s;
}

.watchlive a {
    margin: 17px 0 0 0;
    display: block;
    text-decoration: none;
    font-family: "proxima-nova";
    font-weight: 400;
    font-size: 16px;
    color: #F5F5F5;
    letter-spacing: 0;
    -webkit-animation: glow 6s infinite;
	animation: glow 6s infinite;
}

.watchlive strong {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1.7px;
}

@-webkit-keyframes glow {
	0% {
        text-shadow: 0 0 .5px #F5F5F5;
    }
    10% {
        text-shadow: 0 0 3px #F5F5F5, 0 0 6px #F5F5F5, 0 0 9px #F5F5F5, 0 0 12px #D9071A;
    }
    30% {
        text-shadow: 0 0 .5px #F5F5F5;
    }
}
        
@keyframes glow {
    0% {
        text-shadow: 0 0 .5px #F5F5F5;
    }
    10% {
        text-shadow: 0 0 3px #F5F5F5, 0 0 6px #F5F5F5, 0 0 9px #F5F5F5, 0 0 12px #D9071A;
    }
    30% {
        text-shadow: 0 0 .5px #F5F5F5;
    }
}

.slugHed {
    opacity: 0;
}

.watchlive:hover .slugHed {
    opacity: 1;
    transition-duration: 0.2s;
    transition-delay: 0.2s;
}

.pulseContainer {
    position: relative;
    margin: 19px 10px 0 19px;
    width: 16px;
    height: 16px;
    float: left;
}
.pulseRefillWhite {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #f5f5f5;
    animation: animPulseRefillWhite 6s ease-in-out;
    animation-iteration-count: infinite;
    z-index: 23;
}
.pulseRefillRed {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #AF041D;
    animation: animPulseRefillRed 6s ease-in-out;
    animation-iteration-count: infinite;
    z-index: 22;
}
.pulse {
    position: absolute;
    background-color: #f5f5f5;
    animation: animPulse 6s ease-in-out;
    animation-iteration-count: infinite;
    z-index: 21;
}
.disc {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #AF041D;
    z-index: 20;
}

@-webkit-keyframes "animPulseRefillWhite" {
    0% {
        -webkit-transform: translateZ(0) scale(0);
        transform: translateZ(0) scale(0);
    }
    25% {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
    }
}

@-webkit-keyframes "animPulseRefillRed" {
    0% {
        -webkit-transform: translateZ(0) scale(0);
        transform: translateZ(0) scale(0);
    }
    5% {
        -webkit-transform: translateZ(0) scale(0);
        transform: translateZ(0) scale(0);
    }
    15% {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
    }
}

@-webkit-keyframes "animPulse" {
    0% {
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    opacity: 1;
    }
    10% {
    top: -2px;
    left: -2px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    opacity: 1;
    }
    20% {
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    opacity: 0;
    }
}