/*
/
/	  RESET
/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}





/*
/
/	  COLORS & GRADIENTS & FONTS
/
*/

:root {

	/* header gradient */
	--gradient-header: linear-gradient(to right, rgb(32,32,34), black);

	/* CBSN BASIC BLACK & WHITE */
	--color-black: 0,0,0;						/* #000000 */
	--color-offwhite: 245,245,245;				/* #f5f5f5 */

	/* HEX LAW: GLOBAL */
	--color-global-hexa: 245,245,245;			/* #f5f5f5 lighter */
	--color-global-hexb: 232,232,232;			/* #e8e8e8 darker */

	/* HEX LAW: CBSN */
	--color-cbsn-hexa: 39,45,59;				/* #272D3B lighter */
	--color-cbsn-hexb: 0,0,0;					/* #000000 darker */

	/* HEX LAW: PLAYLIST */
	--color-playlist-hexa: 164,3,3;				/* #A40303 lighter */
	--color-playlist-hexb: 71,1,1;				/* #470101 darker */

	/* PAGE BACKGROUND - GLOBAL COLORS */
	--gradient-bgd-global:
		linear-gradient( to right, rgb(var(--color-global-hexb)), rgb(var(--color-global-hexa)) );

	/* PLAYER PANEL BACKGROUND - PLAYLIST COLORS */
	--gradient-bgd-playlist:
		linear-gradient( to right, rgb(var(--color-playlist-hexb)), rgb(var(--color-playlist-hexa)) );

	/* PLAYER PANEL BACKGROUND - CBSN COLORS */
	--gradient-bgd-cbsn:
		linear-gradient( to right, rgb(var(--color-cbsn-hexb)), rgb(var(--color-cbsn-hexa)) );

	/* VIDEO CARD OVERLAY - PLAYLIST COLORS */
	--gradient-card-video-playlist:
		linear-gradient( rgba(var(--color-playlist-hexa),.15), rgba(var(--color-black),.15) );

	/* VIDEO CARD OVERLAY - CBSN COLORS */
	--gradient-card-video:
		linear-gradient( rgba(var(--color-cbsn-hexa),.15), rgba(var(--color-black),.15) );

	/* PLAYLIST CARD OVERLAY - CBSN COLORS */
	--gradient-card-playlist10:
		linear-gradient( rgba(var(--color-cbsn-hexa),.1), rgba(var(--color-black),.1) );
	--gradient-card-playlist30:
		linear-gradient( rgba(var(--color-cbsn-hexa),.3), rgba(var(--color-black),.3) );

	/* METADATA */
	--color-sponsored: 76,175,80;				/* #4CAF50 green */
	--gradient-live:
		linear-gradient( to bottom right, #D9071A, #E70262 );

}





@font-face {
	font-family: "PublHeadBold";
	src: url("../../fonts/PublicoHeadline-Bold-Web.woff2") format("woff2"),
		 url("../../fonts/PublicoHeadline-Bold-Web.woff") format("woff"),
		 url("../../fonts/PublicoHeadline-Bold-Web.otf") format("opentype");
}

@font-face {
	font-family: "PublHeadBlack";
	src: url("../../fonts/PublicoHeadline-Black-Web.woff2") format("woff2"),
		 url("../../fonts/PublicoHeadline-Black-Web.woff") format("woff"),
		 url("../../fonts/PublicoHeadline-Black-Web.otf") format("opentype");
}





/*
/
/	  MAIN
/
*/

main {
	text-align: center;
	width: 100vw;
}

#playerPanel {
	padding: 0 0 20px 0;
	background: var(--gradient-bgd-playlist);
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.16);
	overflow: hidden;
}
@media only screen and (min-width: 768px) {
	#playerPanel { padding: 0 0 40px 0; }
}

#pageContent {
	position: relative;
	background: var(--gradient-bgd-global);
}

#bgdImg {
	position: absolute;
	left: 0;
	top: 160px;
	width: 100%;
	opacity: .2;
    -webkit-mask-image: -webkit-linear-gradient(black 50%, transparent 100%);
    mask-image: linear-gradient(black 50%, transparent 100%);
    display: none;
}
@media only screen and (min-width: 768px) {
	#bgdImg { display: inherit; }
}

ul {
	clear: both;
}

.hgroup {
	position: relative;
	padding: 30px 0 0 0;
}
@media only screen and (min-width: 768px) {
	.hgroup { padding: 60px 0 0 0; }
}

h1 {
	margin: auto;
	display: block;
	font-family: "PublHeadBlack", serif;
	font-size: 25px;
	color: black;
}
@media only screen and (min-width: 768px) {
	h1 { font-size: 45px; }
}

h2 {
	padding: 10px 0 0 0;
	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: rgba(0,0,0,.5);
}
@media only screen and (min-width: 768px) {
	h2 { font-size: 14px; }
}

h2 img {
	position: relative;
	top: 2px;
}

a {
	text-decoration: none;
}
a.sponsorLinkNew {		/* I think 1Blocker blocks "sponsorLink" */
	color: rgb(var(--color-sponsored));
}
a.taboolaLink {
	color: rgba(var(--color-black),.5);
}














/*
/
/	  SITE HEADER
/
*/

header {
	position: relative;
}
#headerMobile {
	background: var(--gradient-header);
}
#headerMobile ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 53px;
}
#headerMobile li {
	padding: 0 12px;
}
#headerMobile li:nth-child(2) img {
	height: 22px;
	width: auto;
}
#headerMobile li:last-child path {
	fill: rgb(var(--color-offwhite));
}

#headerDesktop {
	padding: 20px 0 20px 40px;
	margin: 0 0 40px 0;
	text-align: left;
	display: none;
}
#headerDesktop .logoFull {
	display: none;
}
@media only screen and (min-width: 1080px) {
	#headerMobile { display: none; }
	#headerDesktop { display: inherit; }
}
@media only screen and (min-width: 1280px) {
	#headerDesktop .logoFull { display: inherit; }
}

#headerDesktop li {
	display: inline-block;
	margin: 0 50px 0 0;
	vertical-align: middle;
}
#headerDesktop li:last-child {
	margin: 0;
}

#headerDesktop a {
	font-family: "proxima-nova", sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1.67px;
	text-decoration: none;
}
header a:link, header a:visited {
	color: rgb(var(--color-offwhite));
}
.headerIcon path {
	fill: rgb(var(--color-offwhite));
}

/* header hover */
header:hover {
	background: var(--gradient-header);
}
header:hover a:link, header:hover a:visited,
header:hover .headerIcon path {
	color: rgb(112,112,112);
	fill: rgb(112,112,112);
}
header:hover a:hover, header:hover a:active,
header:hover .headerIcon:hover path {
	color: rgb(var(--color-offwhite));
	fill: rgb(var(--color-offwhite));
}









/*
/
/	  PLAYER
/
*/

#player {
	margin: 0 auto 0 auto;
	position: relative;
	width: 320px;
	height: auto;
	display: block;
	box-shadow: 0 0 25px 0 rgba(0,0,0,.3);
	width: 100vw;
}

#playerHeadline {
	padding: 10px 0 0 20px;
	text-align: left;
}
#playerHeadline li {
	display: inline-block;
}
#playerHeadline .metadata {
	margin: 0 10px 0 0;
}
#playerHeadline h1 {
	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: rgb(var(--color-offwhite));
}
@media only screen and (min-width: 768px) {
	#playerHeadline {
		padding: 15px 0 0 40px;
	}
	#playerHeadline h1 {
		margin: 10px 0 0 0;
		font-size: 20px;
	}
}
@media only screen and (min-width: 1080px) {
	#player { width: 1000px; }
	#playerHeadline {
		margin: 0 auto;
		width: 1000px;
		padding: 15px 0 0 0;
	}
}
@media only screen and (min-width: 1600px) {
	#player { width: 1280px; }
	#playerHeadline {
		width: 1280px;
	}
}









/*
/
/	  PAID CONTENT BANNER
/
*/

.bannerPaid {
	margin: 0 auto;
	padding: 4px 0;
	position: relative;
	background: rgb(var(--color-sponsored));
	width: 100vw;
	display: none;
	text-align: center;
}
@media only screen and (min-width: 1080px) {
	.bannerPaid {
		width: 1000px;
	}
}
@media only screen and (min-width: 1600px) {
	.bannerPaid {
		width: 1280px;
	}
}

.bannerPaid img {
	margin: 0 auto;
	display: block;
	width: auto;
	height: 36px;
}











/*
/
/	  METADATA
/
*/

.metadata {
	display: inline-block;
	padding: 4px 5px 3px 6px;
	background: rgb(var(--color-offwhite));
	color: rgb(var(--color-cbsn-hexb));
	font-family: "proxima-nova", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	font-size: 10px;
	letter-spacing: 1.67px;
	border-radius: 2px;
	vertical-align: middle;
}
@media only screen and (min-width: 768px) {
	.metadata { padding: 8px 10px 6px 10px; }
}

#playerHeadline .metadata {
	display: none;
}

#playerPanel .metadata {
	color: rgb(var(--color-playlist-hexb));
}

.sponsored {
	background: rgb(var(--color-sponsored));
	color: rgb(var(--color-offwhite));
}

.live {
	background: var(--gradient-live);
	color: rgb(var(--color-offwhite)) !important;
}












/*
/
/	  VIDEO CARDS
/
*/

.vidGrid *,
.taboolaGrid * {
	transition: all .15s ease-in-out;
}

.cardVideo h1,
.cardVideo h2 {
	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
	text-align: left;
	text-transform: none;
	color: black;
}
.cardVideo h1 {
	font-size: 18px;
	line-height: 19px;
}
.cardVideoHero h1 {
	padding: 10px 0 0 0;
}
.cardVideo h2 {
	padding: 10px 0 0 0;
	font-size: 12px;
	color: rgba(0,0,0,.5);
}
.cardVideo h2 span {
	display: none;
}
.cardVideo h2 strong {
	font-weight: 400;
}
#playerPanel h1 {
	color: rgb(var(--color-offwhite));
}
#playerPanel h2 {
	color: rgba(var(--color-offwhite),.5);
}

.cardVideo {
	padding: 20px 0 0 0;
	cursor: pointer;
	text-align: left;
	display: block;
	clear: both;
}
.cardVideoThumbWrap {
	overflow: hidden;
}
.cardVideoThumb {
	margin: 0 0 0 20px;
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 2px;
	background-position: center;
	background-size: cover;
	float: right;
}
.cardVideoHero .cardVideoThumb {
	margin: 0;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
	width: 100%;
	height: auto;
	float: none;
}
.cardVideoContents {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.cardVideoContents .metadata {
	position: absolute;
	left: 20px;
	bottom: 15px;
	opacity: 0;
}
.cardVideoContents .sponsored {
	position: absolute;
	left: 5px;
	bottom: 5px;
	opacity: 1;
}
.cardVideo .btnPlay {
	position: absolute;
	width: 32px;
	height: 32px;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.cardVideoHero .btnPlay {
	width: 48px;
	height: 48px;
}

@media only screen and (min-width: 768px) {
	.cardVideo {
		padding: 0 0 15px 0;
		background: rgba(var(--color-global-hexa),.2);
		border-radius: 4px;
		overflow: hidden;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
		cursor: pointer;
		text-align: left;
	}
	.cardVideo h1 {
		padding: 15px 20px 0 20px;
		font-family: "PublHeadBold", serif;
		font-size: 20px;
		line-height: 22px;
	}
	.cardVideo h2 {
		padding: 10px 20px 0 20px;
		font-size: 14px;
		line-height: 16px;
	}
	.cardVideo h2 span {
		display: inherit;
	}
	.cardVideo h2 strong {
		font-weight: 700;
	}
	.cardVideo h2.metamobile {
		display: none;
	}
	.cardVideoThumb {
		margin: 0;
		padding-top: 56.25%; /* 16:9 Aspect Ratio */
		width: 100%;
		height: auto;
		border-radius: none;
		float: none;
	}
	.cardVideoContents {
		background: var(--gradient-card-video);
	}
	.cardVideoContents .sponsored {
		left: 20px;
		bottom: 10px;
	}
	.cardVideo:hover {
		background: rgb(var(--color-global-hexa));
		transform: scale(1.05);
	}
	.cardVideo:hover .cardVideoThumb {
		transform: scale(1.05);
	}
	.cardVideo:hover .cardVideoContents {
		background: none;
	}
	.cardVideo:hover .cardVideoContents .metadata {
		/* bottom: 15px; */
		opacity: 1;
	}
	.cardVideo .btnPlay {
		display: none;
	}

	/* player panel overrides */

	#playerPanel .cardVideo {
		background: rgba(var(--color-playlist-hexa),.2);
	}
	#playerPanel .cardVideo:hover {
		background: rgb(var(--color-playlist-hexa));
	}
	#playerPanel .cardVideoContents {
		background: var(--gradient-card-video-playlist);
	}
	#playerPanel .cardVideo:hover .cardVideoContents {
		background: none;
	}

}









/*
/
/	  PLAYLIST CARDS
/
*/

.playlistGrid * {
	transition: all .15s ease-in-out;
}
.cardPlaylist {
   position: relative;
   width: 100%;
   padding-top: 75%; /* 4:3 Aspect Ratio */
   background-position: center;
   background-size: cover;
   cursor: pointer;
   overflow: hidden;
}
.cardPlaylist .metadata {
	margin: 20px 0 10px 20px;
}
.cardPlaylist h1 {
	padding: 0 10% 0 20px;
	font-family: "proxima-nova", sans-serif;
	font-weight: 800;
	font-size: 42px;
	line-height: 32px;
	text-transform: uppercase;
	text-align: left;
	color: rgb(var(--color-offwhite));
}
.cardPlaylistContents {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: left;
	background: var(--gradient-card-playlist30);
}
.cardPlaylistHero {
	border-radius: 2px;
}
.cardPlaylistHero h1 {
	font-size: 28px;
	line-height: 23px;
}
@media only screen and (min-width: 768px) {
	.cardPlaylistHero {
		border-radius: none;
	}
	.cardPlaylistHero h1 {
		font-size: 42px;
		line-height: 32px;
	}
	.cardPlaylist:hover .cardPlaylistContents {
		background: var(--gradient-card-playlist10);
	}
}







/*
/
/	  LIVE SHELF
/
*/

#liveShelfMobile {
	margin: 0 0 40px 0;
}
#liveShelfMobile .metadata {
	margin: 0 0 5px 0;
}
#liveShelf {
	position: relative;
	padding: 40px 0 0 40px;
	display: none;
	text-align: left;
	height: 120px;
}
#liveShelf li {
	display: inline-block;
	border-right: 1px solid rgba(var(--color-offwhite),.1);
	vertical-align: top;
	margin: 0 20px 0 0;
	width: 30%;
	cursor: pointer;
}
#liveShelf li:first-child {
	cursor: inherit;
}
#liveShelf li:last-child {
	margin: 0;
	border: none;
}
.cardLive {
	text-align: left;
}

.cardLiveThumb {
	position: relative;
	border-radius: 2px;
	overflow: hidden;
	float: left;
	margin: 0 10px 0 0;
	width: 72px;
	height: 72px;
	transition: all .2s;
}
.cardLiveThumb video,
.cardLiveThumb img {
	position: relative;
	left: -28px;
	width: auto;
	height: 100%;
	display: block;
}
.cardLiveThumb:before {
	content: 'live';
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 4px 4px 3px 6px;
	background: var(--gradient-live);
	color: rgb(var(--color-offwhite));
	font-family: "proxima-nova", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	font-size: 10px;
	letter-spacing: 1.67px;
	border-radius: 2px;
}
#liveShelf li:hover .cardLiveThumb {
	transform: scale(1.1);
}
#liveShelf li:first-child:hover .cardLiveThumb {
	transform: none;
}
.nowplaying:before {
	content: 'playing';
}
.cardLive .details .metadata {
	margin: 0 0 5px 0;
	display: none;
}
.cardLive h1 {
	margin: 0 10px 0 0;
	font-family: "proxima-nova", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 18px;
	text-transform: none;
	color: rgb(var(--color-offwhite));
}
.animated {
    animation-duration: .3s;
    display: block !important;
}

@media only screen and (min-width: 768px) {
	#liveShelfMobile {
		display: none;
	}
	#liveShelf {
		display: inherit;
	}
	.cardLiveThumb {
		width: 80px;
		height: 80px;
	}
	.cardLiveThumb video,
	.cardLiveThumb img {
		left: -31px;
	}
}
@media only screen and (min-width: 1080px) {
	#liveShelf {
		border-bottom: 0.5px solid rgba(255,255,255,.1);
	}
	.cardLiveThumb {
		margin: 0 20px 0 0;
		width: 142.22px;
	}
	.cardLiveThumb video,
	.cardLiveThumb img {
		left: 0;
	}
	.cardLive .details .metadata {
		display: inline-block;
	}
	.cardLiveThumb:before {
		content: '';
		padding: 0;
	}
}
@media only screen and (min-width: 1600px) {
	.cardLive .details .metadata {
		margin: 0 0 10px 0;
	}
	.cardLive h1 {
		font-size: 20px;
		line-height: 22px;
	}
}









/*
/
/	  BUTTONS
/
*/

.btnPrimary {
	margin: 20px 0 0 0;
	padding: 12px 0 10px 0;
	width: 100%;
	font-family: "proxima-nova", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1.67px;
	border-radius: 4px;
	cursor: pointer;
	color: black;
	border: 1px solid rgba(0,0,0,.15);
	background: rgba(255,255,255,0);
	transition: all 0.15s;
}
@media only screen and (min-width: 768px) {
	.btnPrimary {
		margin: 0;
		width: 200px;
	}
}
.btnPrimary:hover {
	color: rgb(var(--color-offwhite));
	border: 1px solid black;
	background: black;
}
.btnPrimary:active {
	color: black;
	border: 1px solid black;
	background: rgba(255,255,255,0);
}

#playerPanel .btnPrimary {
	color: rgb(var(--color-offwhite));
	border: 1px solid;
	/* had to declare color separately for it to work...??? */
	border-color: rgba(var(--color-offwhite),.15);
}
#playerPanel .btnPrimary:hover {
	color: black;
	border: 1px solid;
	border-color: rgb(var(--color-offwhite));
	background: rgb(var(--color-offwhite));
}







/*
/
/	  WATCH LIVE PILL BUTTON
/
*/

#watchLive {
	position: fixed;
	right: 20px;
	bottom: 20px;
	background: var(--gradient-live);
	border-radius: 5px;
	width: 175px;
	height: 50px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.50);
	transition-duration: 0.2s;
	overflow: hidden;
	text-align: left;
}

#watchLive:hover {
	filter: brightness(105%);
	width: 530px;
}

#watchLive a {
	margin: 17px 0 0 0;
	display: block;
	text-decoration: none;
	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: rgb(var(--color-offwhite));
	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;
	}
}
*/

#watchLive span {
	opacity: 0;
}

#watchLive:hover span {
	opacity: 1;
	transition-duration: 0.2s;
	transition-delay: 0.2s;
}

.pulseContainer {
	position: relative;
	margin: 19px 9px 0 19px;
	width: 16px;
	height: 16px;
	float: left;
}
.pulseRefillWhite {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: rgb(var(--color-offwhite));
	animation: animPulseRefillWhite 6s infinite ease-in-out;  /* name duration delay */
	z-index: 23;
}
.pulseRefillRed {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #AF041D;
	animation: animPulseRefillRed 6s infinite ease-in-out;
	z-index: 22;
}
.pulse {
	position: absolute;
	border-radius: 50%;
	background-color: rgb(var(--color-offwhite));
	animation: animPulse 6s infinite ease-in-out;
	z-index: 21;
}
.disc {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	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;
		opacity: 1;
	}
	10% {
		top: -2px;
		left: -2px;
		width: 16px;
		height: 16px;
		opacity: 1;
	}
	20% {
		top: 3px;
		left: 3px;
		width: 6px;
		height: 6px;
		opacity: 0;
	}
}







/*
/
/	  MINIPLAYER
/
*/

#miniplayer {
	position: fixed;
	top: 10px;
	right: 10px;
	box-shadow: 0 0 25px 0 rgba(0,0,0,.3);
	display: none;
}
#miniplayer video {
	display: block;
	width: 192px;
	height: auto;
}
@media only screen and (min-width: 580px) {
	#miniplayer video {
		width: 320px;
	}
}
@media only screen and (min-width: 768px) {
	#miniplayer {
		top: 20px;
		right: 20px;
	}
	#miniplayer video {
		width: 500px;
	}
}







/*
/
/	  Z-INDEX
/
*/

#miniplayer {
	z-index: 8;
}
#watchLive {
	z-index: 7;
}
#pageContent {
	z-index: 6;
}
.cardLiveThumb:before {
    z-index: 5;
}
/* NOT SURE IF THIS IS NECESSARY:
.cardLiveThumb video.,
.cardLiveThumb img {
    z-index: 4;
}
*/
#liveShelf,
header {
    z-index: 3;
}
#player,
.bannerPaid,
#playerPanel .hgroup,
#playerPanel .vidGrid {
    z-index: 2;
}
#bgdImg {
    z-index: 1;
}









/*
/
/	  GRID
/
*/

.vidGrid {
	position: relative;
	padding: 0 20px 0 20px;
}
.vid4, .vid5, .vid6, .vid7, .vid8, .vid9, .vid10, .vid11, .vid12 {
	display: none;
}
.vidFoot {
	grid-row: 3;
	clear: both;
}

.playlistGrid {
	padding: 20px 15% 0 15%;
}
.playlist2, .playlist3, .playlist4 {
	display: none;
}
.playlist1, .playlist2, .playlist3, .playlist4 {
	grid-row: 1;
}
.playlistFoot {
	grid-row: 2;
	display: none;
}

.taboolaGrid {
	padding: 0 20px 0 20px;
}
.taboola3, .taboola4, .taboola5, .taboola6 {
	display: none;
}

@media only screen and (min-width: 768px) {
	.vidGrid {
		padding: 40px 40px 0 40px;
		display: grid;
		grid-gap: 40px;
		grid-template-rows: repeat(3, auto);
		grid-template-columns: repeat(3, 1fr);
	}
	.vid1, .vid2, .vid3 {
		display: inherit;    /* necessary for vertical height */
		grid-row: 1;
	}
	.vid4, .vid5, .vid6 {
		display: inherit;
		grid-row: 2;
	}
	.vid1, .vid4 {
		grid-column: 1;
	}
	.vid2, .vid5 {
		grid-column: 2;
	}
	.vid3, .vid6 {
		grid-column: 3;
	}
	.vidFoot {
		grid-column: 1/4;
	}

	.taboolaGrid {
		padding: 20px 40px 0 40px;
		display: grid;
		grid-gap: 40px;
		grid-template-rows: repeat(1, auto);
		grid-template-columns: repeat(3, 1fr);
	}
	.taboola1, .taboola2, .taboola3 {
		display: inherit;    /* necessary for vertical height */
	}

	.playlistGrid {
		padding: 40px 0 0 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		grid-row-gap: 40px;
		grid-column-gap: 0;
	}
	.playlist1 {
		grid-column: 1;
	}
	.playlist2 {
		display: inherit;
		grid-column: 2;
	}
	.playlistFoot {
		display: block;		/* "inherit" doesn't work in this case */
		grid-column: 1/3;
	}
}

@media only screen and (min-width: 1080px) {
	.vidGrid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
	.vid1, .vid2, .vid3, .vid4 {
		display: inherit;
		grid-row: 1;
	}
	.vid5, .vid6, .vid7, .vid8 {
		display: inherit;
		grid-row: 2;
	}
	.vid9, .vid10, .vid11, .vid12 {
		display: none;
	}
	.vid1, .vid5 {
		grid-column: 1;
	}
	.vid2, .vid6 {
		grid-column: 2;
	}
	.vid3, .vid7 {
		grid-column: 3;
	}
	.vid4, .vid8 {
		grid-column: 4;
	}
	.vidFoot {
		grid-column: 1/5;
	}

	.taboolaGrid {
		grid-template-columns: repeat(4, 1fr);
	}
	.taboola1, .taboola2, .taboola3, .taboola4 {
		display: inherit;
	}

	.playlistGrid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.playlist1 {
		grid-column: 1;
	}
	.playlist2 {
		grid-column: 2;
	}
	.playlist3 {
		grid-column: 3;
		display: inherit;
	}
	.playlist4 {
		display: none;
	}
	.playlistFoot {
		grid-column: 1/4;
	}
}

@media only screen and (min-width: 1600px) {
	.vidGrid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
	}
	.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
		display: inherit;
		grid-row: 1;
	}
	.vid7, .vid8, .vid9, .vid10, .vid11, .vid12 {
		display: inherit;
		grid-row: 2;
	}
	.vid1, .vid7 {
		grid-column: 1;
	}
	.vid2, .vid8 {
		grid-column: 2;
	}
	.vid3, .vid9 {
		grid-column: 3;
	}
	.vid4, .vid10 {
		grid-column: 4;
	}
	.vid5, .vid11 {
		grid-column: 5;
	}
	.vid6, .vid12 {
		grid-column: 6;
	}
	.vidFoot {
		grid-column: 1/7;
	}

	.taboolaGrid {
		grid-template-columns: repeat(6, 1fr);
	}
	.taboola1, .taboola2, .taboola3, .taboola4, .taboola5, .taboola6 {
		display: inherit;
	}

	.playlistGrid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
	.playlist1 {
		grid-column: 1;
	}
	.playlist2 {
		grid-column: 2;
	}
	.playlist3 {
		grid-column: 3;
		display: inherit;
	}
	.playlist4 {
		grid-column: 4;
		display: inherit;
	}
	.playlistFoot {
		grid-column: 1/5;
	}
}