@charset "utf-8";
/* CSS Document */

#music-slider>*, #video-slider>* {
	width: 60vw;
	margin-left: 5vw;
	margin-bottom: 5vmin;
}

#music-slider iframe {
	height: 166px;
}

#video-slider {
	text-align: center;
}
#video-slider>* {
	margin: 0 auto;
}
#video-slider iframe {
	height: 33.75vw; /*60:33.75 = 16:9*/
}

@media only screen and (orientation: portrait){
#music-slider>*, #video-slider>* {
	width: 95%;
	margin-left: 0;
}

#music-slider iframe {
}

#video-slider iframe {
	height: 48vw;
	margin-bottom: 0.5vh;
}
}

/*below is old design */

.slide {
	background-color: #111;
}

.slide a {
	color: #fffff8;
}


#music-player {
	position: fixed;
	bottom: 0;
	right: -48vmax;
	width: 48vw;
	height: 25%;
	z-index: 1000;
	background-color: #fffff8;
}

#music-player iframe {
	position: absolute;
	top: 0;
	left: 0;
}

.player-float-button {
	position: absolute;
	top: 30px;
	left: -30px;
	width: 30px;
	height: 30px;
	background-color: #333;
	cursor: pointer;
}
#video-player {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0) transparent;
	/* RGBa with 0.6 opacity */
	background: rgba(255, 255, 255, 0.9);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#video-player iframe {
	position:absolute;
	height: 78%; 
	width: 80%;
	top: 5%;
	left: 10%;
}

@media only screen and (orientation: portrait){
	#video-player iframe {
		height: 50%; 
		width: 100%;
		top: 0;
		left: 0;
	}
}