* {
	box-sizing: border-box;
}

html, body {
	background-image: linear-gradient(#900, #C00);
	margin:0;
	height:100%;
	overflow:hidden;
	font-family: Arial, Helvetica, sans-serif;
}

.header {
	/*background:rgba(0,0,0,0.25);*/
	padding:10px;
	color:#FFF;
	height:60px;
	text-align:center;
}

.header:after {
	content: '';
	display: block;
	clear: both;
}

.header .logo {
	/*float:left;*/
}

.header .present {
	max-width:600px;
	margin:0 auto;
	font-size:0.9em;
	margin-top:10px;
}

.footer {
	/*background:rgba(0,0,0,0.1);*/
	padding:10px;
	color:#FFF;
	height:60px;
	text-align:center;
}


.footer .present {
	max-width:600px;
	margin:0 auto;
	font-size:0.80em;
}

.videoList {
	height:calc(100% - 120px);
	width:100%;
	background-image: url('img/x.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	box-sizing: border-box;
	white-space: nowrap;
}

.videoList .video {
	float:left;
	display:inline-block;
	padding:3px;
	width:25%;
	height:calc(100% / 6);
}

.videoList .video.past .int {
	background:rgba(0,0,0,0.1);
}

.videoList .video.current .int {
	background:rgba(0,0,0,0.2);
	border:solid 2px #FFF;
}

.videoList .video .int {
	display:block;
	color:#FFF;
	cursor:pointer;
	height:100%;
	position: relative;
}

.videoList .video .int:hover {
	background:rgba(0,0,0,0.05);
}

.videoList .video.past .int:hover {
	background:rgba(0,0,0,0.15);
	color:#FC0;
}

.videoList .video.current .int:hover {
	background:rgba(0,0,0,0.25);
	color:#FC0;
	border:solid 2px #FC0;
}

.videoList .video .int span {
	display:block;
	text-align:center;
	position: absolute;
	width:100%;
	top: 50%;
	transform: translateY(-50%);
	font-size:1.6em;
}

.layer {
	display:none;
	z-index:100;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.7);
	width:100%;
	height:100%;
}

.layer .content {
	text-align:center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:100%;
	max-height:100%;
}
.layer .content .wrapper{
	position: relative;
	padding-bottom: 68%;
	margin:0 auto;
	max-width: 90%;
	height: 0;
	box-shadow: 0px 0px 25px rgba(0,0,0,0.8);
}

.layer iframe {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:none;
}

@media only screen and (orientation: landscape) {
	.layer .content {
		width:70%;
	}

	.layer .content .wrapper{
		/*max-width: 70%;*/
	}
}

.layerText {
	display:none;
	z-index:101;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.7);
	width:100%;
	height:100%;
}

.layerText .content {
	text-align:center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:100%;
	max-height:100%;
	color:#FFF;
	font-size:1.2em;
	padding:25px;
}