:root {
    --player-width: 192px;
    --player-height: 108px;
    --color-white: #f5f5f5;
}

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

ul {
	list-style: none;
}

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 -50%, #0255ae 150%);*/
		linear-gradient(to right, #e8e8e8, #f5f5f5);
}

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





/*
/
/   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 center;
	border-radius: 0px;
}

#playerWrapper header {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    opacity: 0.8;
    z-index: 9999;
    background: rgba(0,0,0,.5);
}

#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%); */
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 999;
}

li {
	padding: 2px;
}

#playerCloseIcon {
	width: 28px;
	height: 28px;
}

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





/*
/
/   WATCH LIVE BUTTON
/
*/

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

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

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

.slugHed {
    opacity: 0;
}

@-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;
    }
}








/*
/
/   WATCH LIVE PULSE
/
*/

.pulseContainer {
    position: relative;
    margin: 16px 5px 0 16px;
    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;
    }
}