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

/*
	-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	
	*/

#videos{
	width:500px;
	height:200px;
	background-color:#C1272D;
	float:left;
	margin-bottom:20px;
	
	-webkit-opacity:1;
	-moz-opacity:1;
	-o-opacity:1;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	opacity:1;
	
	-webkit-transform: rotatex(0deg);
	-moz-transform: rotatex(0deg);
	-o-transform: rotatex(0deg);
	-ms-transform: rotatex(0deg);
	transform: rotatex(0deg);
	
	-webkit-transform-origin:top;
	-moz-transform-origin:top;
	-o-transform-origin:top;
	-ms-transform-origin:top;
	transform-origin:top;
	
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	-ms-transition: 0.25s;
	transition: 0.25s;
	
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
	
	overflow:hidden;
	position:relative;
}

#videos.videos_hide{
	-webkit-transform: rotatex(-110deg);
	-moz-transform: rotatex(-110deg);
	-o-transform: rotatex(-110deg);
	-ms-transform: rotatex(-110deg);
	transform: rotatex(-110deg);
	
	-webkit-opacity:0;
	-moz-opacity:0;
	-o-opacity:0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	opacity:0;
	
	margin-bottom:0px;
}

#videos .show{
	width:100%;
}

#videos .show .back{
	width:100%;
	height:100px;
	top:50px;
	position:absolute;
	background-color:#75272D;
}

#videos .show .image{
	width:800px;
	height:650px;
	top:0px;
	right:0px;
	position:absolute;
}

#videos h1{
	font-family:'Life Savers', cursive;
	color:#FFF;
	font-size:42px;
	font-weight:normal;
	margin:23px 0 0 0;
	padding:0 0 0 15px;
}

#display_videos{
	width:800px;
}

#videos_player{
	width:800px;
	height:0;
	background-color:#75272D;
}

#videos_player iframe{
	padding:15px;
}

#videos_thumbs {
	width:785px;
	padding:15px 0 15px 15px;
}

#main_video{
	/*width:450px;*/
	width:320px;
	height:240px;
	background-size:100% auto;
	background-color:#000;
	background-position:center;
	overflow:hidden;	
}

#main_video a{
	display:block;
	width:100%;
	height:100%;
	position:relative;
	color:#FFF;
	font-size:24px;
	font-weight:300;
}

#main_video a .video_title{
	width:430px;
	padding:10px;
	background-color:#000;
	position:absolute;
	bottom:0;
	
	-webkit-transform: rotatex(-90deg);
	-moz-transform: rotatex(-90deg);
	-o-transform: rotatex(-90deg);
	-ms-transform: rotatex(-90deg);
	transform: rotatex(-90deg);
	
	-webkit-transform-origin:bottom;
	-moz-transform-origin:bottom;
	-o-transform-origin:bottom;
	-ms-transform-origin:bottom;
	transform-origin:bottom;
	
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	-ms-transition: 0.25s;
	-webkit-transition: 0.25s;
	
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
}

#main_video a:hover .video_title{
	-webkit-transform: rotatex(0deg);
	-moz-transform: rotatex(0deg);
	-o-transform: rotatex(0deg);
	-ms-transform: rotatex(0deg);
	transform: rotatex(0deg);
}

#videos .thumbs{
	width:460px;
}

#videos .thumbs ul{
	margin:0;
	padding:0;
}

#videos .thumbs ul li{
	list-style:none;
	width:210px;
	height:150px;
	margin:20px 10px 20px 5px;
	float:left;
	background-color:#000;
	background-size:100% auto;
	background-position:center;
	overflow:hidden;
}

#videos .thumbs ul li a{
	display:block;
	width:100%;
	height:100%;
	position:relative;
	color:#FFF;
	font-size:16px;
	font-weight:300;
}

#videos .thumbs ul li a .video_title{
	width:200px;
	padding:5px;
	background-color:#000;
	position:absolute;
	bottom:0;
	
	-webkit-transform: rotatex(-90deg);
	-moz-transform: rotatex(-90deg);
	-o-transform: rotatex(-90deg);
	-ms-transform: rotatex(-90deg);
	transform: rotatex(-90deg);
	
	-webkit-transform-origin:bottom;
	-moz-transform-origin:bottom;
	-o-transform-origin:bottom;
	-ms-transform-origin:bottom;
	transform-origin:bottom;
	
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	-ms-transition: 0.25s;
	transition: 0.25s;
	
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
}

#videos .thumbs ul li a:hover .video_title{
	-webkit-transform: rotatex(0deg);
	-moz-transform: rotatex(0deg);
	-o-transform: rotatex(0deg);
	-ms-transform: rotatex(0deg);
	transform: rotatex(0deg);
}

#videos #videos_player_load{
	position:absolute;
	width:450px;
	height:0px;
	top:215px;
	left:10px;
}