/*
 * flat.video Skin for jPlayer
 * http://www.jplayer.org
 *
 * Copyright (c) 2014 Happyworm Ltd
 *
 * Authors: Mark Boas, Mark J Panaghiston
 * Version: 3.0.0
 * Date: 14th November 2014
 */

@charset "UTF-8";

/* Setting the size.
 * 1) With the responsive design, the skin will adapt to match the container width
 * 2) For fixed width, the 360p and 270p classes given below
 * 3) The class name, width and height must match the jPlayer size option setting
 * 4) HDTV aspect ratio is 16:9
 * 5) More info at http://jplayer.org/latest/developer-guide/#jPlayer-option-size
 */

.jp-flat-video-responsive {
	min-width: 320px; /* 180p */
	max-width: 1280px; /* 720p */
	width: 100%;
	height: auto;
}

.jp-flat-video-360p {
	width: 640px;
	height: 360px;
}

.jp-flat-video-270p {
	width: 480px;
	height: 270px;
}

.jp-flat-video {
	position: relative;
	text-align: left;
	min-height: 64px;

	/* Hide iOS touch highlight */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Disable selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* define your text color here */
	color: #ffffff;
}

.jp-flat-video,
.jp-flat-video * {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 0;
	line-height: 0;
}

.jp-flat-video *:focus {
	/* Disable the browser focus highlighting. */
	outline:none;
}
.jp-flat-video button::-moz-focus-inner {
	/* Disable the browser CSS3 focus highlighting. */
	border: 0;
}

.jp-flat-video-full {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.jp-flat-video .jp-jplayer {
	width:100% !important;
	height:auto !important;
}

.jp-flat-video .jp-jplayer img {
	width:100% !important;
	height:auto !important;
	position:absolute;
	top:0;
}

.jp-flat-video .jp-jplayer video {
	background-color:#000;
	width:100% !important;
	height:auto !important;
}

.jp-flat-video .jp-gui {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 36px;
}

.jp-flat-video .jp-control {
	position: absolute;
	top: 0;
	width: 36px;
	height: 100%;

	/* define your pause/play and fullscreen/restore button background color here */
	background-color: #eb0090;
}

.jp-flat-video .jp-play-control {
	left: 0;
}

.jp-flat-video .jp-screen-control {
	right: 0;
}

.jp-flat-video .jp-button {
	display: block;
	text-decoration: none;

	width: 36px;
	height: 100%;
	font-size: 32px;
	line-height: 36px;

	text-align: center;
	background: none;
	cursor: pointer;

	/* define your pause/play and fullscreen/restore button icon color here */
	color: #ffffff;
}
.jp-flat-video .jp-button:focus {
	/* define your pause/play button in focus icon color here */
	color: #e5f7ff;
}

.jp-flat-video .jp-button:before {
	display: block;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	font-variant: normal;
	text-transform: none;
	speak: none;
	width: 36px;
	line-height: 36px;
	text-align: center;
	opacity: 1.0;
}

.jp-flat-video.jp-state-playing .jp-play:before {
	content:" ";
	display:inline-block;
	width:11px;
	height:11px;
	margin-top:-8px;
	margin-left:-1px;
	background:url(../img/icn_pause.png);
	background-size:cover;
	vertical-align:middle;
}
.jp-flat-video .jp-play:before {
	content:" ";
	display:inline-block;
	width:10px;
	height:11px;
	margin-top:-8px;
	margin-left:-1px;
	background:url(../img/icn_playbtn.png);
	background-size:cover;
	vertical-align:middle;
}
.jp-flat-video.jp-state-full-screen .jp-full-screen:before {
}
.jp-flat-video .jp-full-screen:before {
	content:" ";
	display:inline-block;
	width:17px;
	height:17px;
	margin-top:-8px;
	margin-left:-1px;
	background:url(../img/icn_fullscreen.png);
	background-size:contain;
	vertical-align:middle;
}

.jp-flat-video .jp-bar {
	position: absolute;
	top: 0;
	left: 36px;
	right: 36px;
	height: 100%;
	background:#000000;
}

.jp-flat-video .jp-seek-bar.jp-seek-bar-display {
	min-width: 0;
	/* define your unplayed progress bar background color here */
	background-color: #232323;
}
.jp-flat-video .jp-seek-bar {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 100%;

	cursor: pointer;
}

.jp-flat-video .jp-play-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: rgb(199,10,240);
	background: -moz-linear-gradient(left,  rgba(199,10,240,1) 0%, rgba(97,54,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(199,10,240,1) 0%,rgba(97,54,255,1) 100%);
	background: linear-gradient(to right,  rgba(199,10,240,1) 0%,rgba(97,54,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c70af0', endColorstr='#6136ff',GradientType=1 );
}

.jp-flat-video .jp-details,
.jp-flat-video .jp-timing {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	padding: 0 12px;
	line-height: 36px;
}
.jp-flat-video .jp-timing {
	text-align: right;
}
.jp-flat-video .jp-title,
.jp-flat-video .jp-duration {
	font-size: 13px;
	line-height: 36px;
}

.jp-flat-video .jp-no-solution {
	position: absolute;
	bottom: 0;
	left: 64px;
	right: 64px;
	height: 48px; /* 64px - 8px - 8px = 48px */
	padding: 8px 0;

	line-height: 24px;
	font-size: 16px;
	text-align: center;
	display: none;

	/* define your error message text color here */
	color: #000000;

	/* define your error message background color here */
	background-color: #b28282;
}