:root {
	/* Constants */
	--ml-light-1: #FFFFFF;
	--ml-light-1-overlay: rgba(255,255,255,.8);
	--ml-light-2: #C1C1C1;
	--ml-light-3: #DADADA;
	--ml-light-3-overlay: rgba(255,255,255,.1);
	--ml-dark-1: #333333;
	--ml-dark-1-overlay: rgba(0,0,0,0.8);
	--ml-dark-2: #4A4A4A;
	--ml-dark-3: #777777;
	--ml-dark-3-overlay: rgba(0,0,0,0.2);	
	
	/* Light */
	--ml-1: var(--ml-light-1); 
	--ml-1-overlay: var(--ml-light-1-overlay);
	--ml-2: var(--ml-light-3);
		
	/* Dark */
	--ml-alt-1: var(--ml-dark-1);
	--ml-alt-1-overlay: var(--ml-dark-1-overlay);
	--ml-alt-2: var(--ml-dark-2);
	--ml-alt-3: var(--ml-dark-3);
	--ml-alt-3-overlay: var(--ml-dark-3-overlay);
	
}

.hero {
	background-color: var(--ml-1);
	color:#C0C0C0
}

.description-hero {
	background-color: var(--ml-color1);
}

.description-words, .description-words h1, .description-words h3, .description-words h3 a {
	color: var(--ml-1);
}

.message-alert {
	background-color: var(--ml-light-overlay);
	color: var(--ml-alt-1);
}

.description-words h3 a:hover {
	color:var(--ml-alt-1-overlay);
}


.description-extras a {
	color: var(--ml-light-1);
	background-color: var(--ml-color2);
}

.description-extras a:hover {
	color: var(--ml-color2);
	background-color: var(--ml-light-1);
}

.watch-more-hero {
	background-color: var(--ml-1);
}

.watch-more-header{
	color:var(--ml-alt-2);
}

div.watch-more-flex-cell a h4{
	color: var(--ml-alt-1);
}

div.watch-more-flex-cell a span{
	color: var(--ml-alt-2);
}

.watch-series-hero {
	background-color: var(--ml-2);
}

@media only screen and (max-width : 820px) {
/*div.description-hero {
	background: linear-gradient(to left, var(--ml-color1), var(--ml-color2) );
	}
*/}

.messageplayer h1 {
	color:var(--ml-alt-1);
}

.infowrapper p {
	color:var(--ml-alt-1); font-size: 16px;
}

@media only screen and (max-width : 480px) {
	.messageplayer .infowrapper.about {
		background: var(--ml-alt-1);
	}
	.messageplayer .infowrapper.about p, .messageplayer .infowrapper.about h3 {
		color:var(--ml-2);
	}
}

@media only screen and (max-width : 600px) and (min-width : 481px) {
	.messageplayer .infowrapper.about {
		background: var(--ml-alt-1);
	}
	.messageplayer .infowrapper.about p, .messageplayer .infowrapper.about h3 {
		color:var(--ml-2);
	}
}

@media only screen and (min-width : 1100px) {
	.messagelisting div.box .boxInner {
		background-color: var(--ml-alt-1);
		box-shadow: 0 1px 1px 0 var(--ml-1-overlay);
	}
}