media-player
{ 
	display: 		block;	
	position: 		absolute;
	width:			70vw;
	height:			calc(70vw * 0.45);
	left:			calc(50vw - 70vw/2);
	bottom:			2vh;
	font-size: 		0; /*otherwise there will be a gap under the video */
	filter:			drop-shadow(10px 10px 5px rgba(0,0,0,0.2));
}
@media screen and (max-width: 800px)
{
	media-player
	{ 
		width:			80vw;
		height:			calc(80vw * 0.45);
		left:			calc(50vw - 80vw/2);
	}
}

/* === viewport ======================= */

media-player media-viewport
{ 
	position: 			relative;
	bottom:				0px;
	left:				0px;
	width: 				66%;
	height:				100%;
	display:			inline-block;
	text-align: 		center;
	background-color: 	hsla(200, 100%, 20%, 80%);
	background-size: 	cover;
	border-radius:		10px 0px 0px 10px;
}

/* === engine ======================= */

media-player media-viewport video
{ 
	display: 		none; 
}
media-player media-viewport video[type="video"]
{
	display: 		inline-block !important;
	width: 			100%;
	height: 		100%;
	object-fit: 	cover;
}

/* === image ======================= */

media-player media-viewport media-image
{
	width: 					100%;
	height: 				100%;
	display: 				inline-block;
	object-fit: 			contain;
  	border:					0px;
	border-radius:			10px 0px 0px 10px;
  	margin:					0px;
  	padding: 				20px;
  	opacity: 				0;
	transition-property: 	opacity;
  	transition-duration: 	0.5s;
	background-size: 		contain;
	background-repeat: 		no-repeat;
	background-position: 	center;
	background-color: 		hsla(200, 100%, 20%, 80%);
	background-origin: 		content-box;
	backdrop-filter: 		blur(8px);
	-webkit-backdrop-filter:blur(8px);
}
@-moz-document url-prefix() /** Mozilla Firefox */
{
	media-player media-viewport media-image
	{
		backdrop-filter: none;	/** backgrop-filter blur() destroyes GUI */
	}
}

/* === headline ======================= */

media-player media-viewport media-headline
{ 
	visibility:		hidden;
	display: 		block;	
	position: 		absolute;
	top:			0px;
	left:			0px;
	max-width:		75%;
	font-family:	Exo;
	font-size:		24px;
	padding:		5px 20px 5px 20px;
	z-index: 		2147483647;
	background-color: 	hsla(200, 100%, 20%, 80%);
}

/* === chapters ======================= */

media-player media-chapters
{ 
	position: 				absolute; 
	right: 					0;
	top: 					0;
	width: 					34%;
	height: 				100%; 
	font-size: 				14px; 
	color: 					rgba(255,255,255,1);
	xbackground: 			rgba(0,0,0,0.4); 
	background: 			hsla(200, 100%, 40%, 60%); 
	overflow-y: 			scroll; -moz-scrollbars-vertical;
	display: 				inline-block; 
	border-radius:			0px 10px 10px 0px;
  	scroll-behavior: 		smooth !important;
	-ms-overflow-style: 	none;  /* IE and Edge */
  	scrollbar-width: 		none;  /* Firefox */
}
media-player media-chapters::-webkit-scrollbar
{
    display: none;
}

media-player media-chapters ol
{ 
	position: 	relative;
	margin: 	0; 
	padding:	0; 
	list-style-type: none;
}

media-player media-chapters ol li a
{ 
	display: 		block; 
	font-size: 		120%;
	padding: 		.7rem 1rem; 
	transition: 	.3s;
}

media-player media-chapters ol li a span:first-child
{ 
	display:		inline-block;
	width:			calc(100% - 60px);
	margin-right: 	10px;
}
media-player media-chapters ol li a span:last-child
{ 
	float: 			right;
	font-size: 		80%;
	opacity: 		0.8;
}

media-player media-chapters ol li a.current
{ 
	cursor: 		default;
	color: 			rgba(255,255,255,1);
	xbackground:	rgba(0,0,0,0.7); 
	background: 	hsla(200, 100%, 30%, 80%); 
}

media-player media-chapters ol li a:not(.current):hover
{ 
	cursor: 		pointer;
	color: 			rgba(255,255,255,1);
	xbackground:	rgba(0,0,0,0.5); 
	background: 	hsla(200, 100%, 35%, 80%); 
}
media-player media-chapters ol li a:not(.current):active
{ 
	xbackground:	rgba(0,0,0,0);
	background: 	hsla(200, 100%, 30%, 80%); 
}

/* === controls ======================= */

media-player media-viewport media-controls
{ 
	display: 		inline-block;	
	position: 		absolute;
	bottom:			5px;
	left:			10%;
	width:			80%;
	height:			32px;
	border-radius:	6px;
	background: 	rgba(64,64,64,0.9);
	padding:		5px 10px 5px 10px;
	z-index: 		2147483647;
	overflow-x:		hidden;
}

media-player media-viewport media-controls button
{
	background-color:	rgba(0,0,0,0);
	border:				0px;
	border-radius:		4px;
	color:				#FFF;
	font-size:			16px;
	width:				25px;
}
media-player media-viewport media-controls button:hover
{
	color:				rgba(160,160,160,1);
}
media-player media-viewport media-controls button:active
{
	color:				rgba(16,16,16,1);
}

media-player media-viewport media-controls button.play:after
{
	font-family: 	FontAwesome;
	content: 		"\f04b";
}
media-player media-viewport media-controls button.pause:after
{
	font-family: 	FontAwesome;
	content: 		"\f04c";
}
media-player media-viewport media-controls button.fullscreen:after
{
	font-family: 	FontAwesome;
	content: 		"\f065";
}
media-player media-viewport media-controls button.smallscreen:after
{
	font-family: 	FontAwesome;
	content: 		"\f066";
}

media-player media-viewport media-controls time-display
{
	display: 		inline-block;
	color:			#FFF;
	font-size:		14px;
	margin:			0px 10px 0px 10px;
}
media-player media-viewport media-controls input
{
	display: 		inline-block;
	margin:			0px 10px 0px 10px;
	width: 			calc(100% - 180px);
	height:			10px;
}