body { background-color: Black; }

#title { color: White; 
         text-align:center; width: 80%;
         display: inline-block; }
#summary { color: White;
           font-style:italic;
           text-align:center; 
           width: 80%;}
	 
#counter  { color: Grey; font-size: 75%; }
#duration { font-size: 110%; text-align:center; width: 80%; color: Red; margin-top: -16px; }

#video_player {
	display: table;
	line-height: 0;
	font-size: 0;
	background: #000;
	max-width: 98%;
	margin: 16px auto 0;
}
#video_container {
	position: relative; 
}
#video_player div,
#video_player figcaption {
	display: table-cell;
	vertical-align: top;
}
#video_container video {
	position: absolute;
	display: block;
	width: 98%;
	top: 0;
	border-radius: 16px;
	border: 2px outset White;
	box-shadow: 1px 1px 3px 3px White;

}
#video_player figcaption {
	width: 15%;
	height: 160px;
	background-color: Grey;
	border: 2px outset White;
	border-radius: 16px;
	box-shadow: 1px 1px 3px 3px White;
}

#video_player figcaption a {
	display: block;
	opacity: .5;
	transition: 1s opacity;
}
#video_player figcaption a img,
figure video {
	width: 99%;
	height: auto;
	margin: 1px;
}
#video_player figcaption a.currentvid,
#video_player figcaption a:hover,
#video_player figcaption a:focus { 
	opacity: 1; 
}
@media (max-width: 700px) {
	#video_player video,
	#video_player figcaption { 
		display: table-row;
	}
	#video_container {
		padding-top: 56.25%; 
	}
	#video_player figcaption a {
		display: inline-block;
		width: 33.33%; 
	}
}