/*******************/
/* SHOWROOM STYLES */
/*******************/

html, body {height: 100%;}
#page {height: 100%;}
#player-wrapper {
	height: 100%;
	min-height: 560px !important;
	padding: 0 !important;
	position: relative;
	background-color: #000 !important;
	overflow: hidden;
}
#duration-bar {
	width: 0;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #FC0;
}
#control {
	width: 80px;
	height: 80px;
	position: absolute;
	top: 50px;
	left: 20px;
	z-index: 1;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	background-color: rgba(255,255,255,0.5);
	cursor: pointer;
	-webkit-transition: -webkit-transform 250ms ease;
	-moz-transition: -moz-transform 250ms ease;
	transition: transform 250ms ease;
	display: none;
}
#control div {
	width: 64px;
	height: 64px;
	position: absolute;
	margin: 8px;
	-webkit-border-radius: 32px;
	-moz-border-radius: 32px;
	border-radius: 32px;
	background-color: #F4F4F4;
}
#control img {
	width: 34px;
	margin: 15px;
	opacity: 0.75;
}
#control:hover {
	-webkit-transform: scale(0.95,0.95);
	-moz-transform: scale(0.95,0.95);
	transform: scale(0.95,0.95);
}
#player {
	width: 100%;
	height: 100%;
	background: url(../img/slides/01.jpg) no-repeat center #000;
	background-size: cover;
	-webkit-transition: opacity 500ms ease;
	-moz-transition: opacity 500ms ease;
	transition: opacity 500ms ease;
}
#previews {
	width: 280px;
	height: 100%;
	position: absolute;
	top: 30px;
	right: 0;
	z-index: 2;
	overflow: visible !important;
	background-color: rgba(0,0,0,0.75);
	-webkit-transition: -webkit-transform 250ms ease;
	-moz-transition: -moz-transform 250ms ease;
	transition: transform 250ms ease;
}
#scrollable {
	width: 100%;
	height: 100%;
	padding-right: 15px;
	margin-right: -15px;
	overflow-x: hidden;
	overflow-y: auto;
}
.preview {
	width: 220px;
	padding: 10px;
	margin: 20px;
	overflow: hidden;
	background-color: #F4F4F4;
	opacity: 0.25;
	cursor: pointer;
	-webkit-transition: opacity 250ms ease;
	-moz-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}
.preview:hover, .current {opacity: 1;}
.preview img {
	width: 100%;
}
#handle {
	width: 60px;
	height: 120px;
	position: absolute;
	top: 50%;
	left: -60px;
	margin-top: -60px;
	overflow: hidden;
	cursor: pointer;
}
#handle > div {
	width: 120px;
	height: 120px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	background-color: rgba(0,0,0,0.75);
}
#handle img {
	height: 50px;
	margin: 35px 0 0 20px;
	opacity: 0.35;
	-webkit-transition: opacity 250ms ease;
	-moz-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}
#handle:hover img {opacity: 1;}
#message {
	display: none;
	height: 100%;
	position: relative;
}
#message h1 {
	width: 400px !important;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -200px;
	font-size: 20px !important;
	line-height: 20px;
	text-align: center;
}

@media screen and (max-width: 970px) {
	#previews {
		top: 0px;
	}
}

@media screen and (max-width: 660px) {
	#player-wrapper {display: none;}
	#message {display: block;}
}