
<!--[if IE]>
<style type="text/css">
	.play_bar {
		float: left;
		width: 68%;
	}
	.seekbar {
		float: left;
		width: 100%;
	}
</style>
<![endif]-->

<style>
	@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
		@media {
			.play_bar {
				float: left;
				width: 68%;
			}	
			.seekbar {
				float: left;
				width: 100%;
			}
		}
	}
	
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	   .play_bar {
			float: left;
			width: 68%;
		}
		.seekbar {
			float: left;
			width: 100%;
		}
	}
</style>
<style>
body
{
margin: 0px; padding: 0px; overflow: hidden;
}
.clear
{
clear:both;
}
.main
{
width:100%;
background: #30333B;
}
.play_media
{
top: -60%;
width: 20%;
display:none;
}
.video_wrap
{
width:100%;
}
.video_container {
height: 0;
position: relative;
padding-bottom:56.25%;
}
.video_container video 
{
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
position:absolute;
} 
.video_container iframe, .video_container .div_vid_res,.video_container embed
{
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
position:absolute;
} 
.controls
{
-moz-box-align: end;
align-items: flex-end;
bottom: 0;
display: flex;
left: 0;
opacity: 1;
padding: 10px;
position: absolute;
right: 0;
z-index: 8;
-webkit-box-align: end;
display: -webkit-box;
}
.playpauseui
{
color: #ffffff;
height: 36.5px;
transition: opacity 250ms ease-out 0s, background-color 40ms ease 0s, color 40ms ease 0s;
width:9%;
max-width:45px;
-webkit-transition:opacity 250ms ease-out 0s, background-color 40ms ease 0s, color 40ms ease 0s;
cursor:pointer !important;
}
.rounded-box
{
background: rgba(23, 35, 34, 0.75) none repeat scroll 0 0;
}
.playpauseui:hover
{
background-color: #00adef;
}
.play
{
box-sizing: border-box;
margin: 0 auto;
padding: 10px 0;
text-align: center;
width: 25%;
}
.pause
{
box-sizing: border-box;
margin: 0 auto;
padding: 10px 0;
text-align: center;
width: 25%;
display:none;
}
.play_bar
{
-moz-box-flex: 1;
-moz-box-pack: end;
display: flex;
flex: 1 1 0;
justify-content: flex-end;
position: relative;
height: 36.5px;
display:-webkit-box;
-webkit-box-pack: end;
-webkit-box-flex: 1;
-webkit-flex: 1;
}
.seekbar
{
-moz-box-flex: 1;
border: 0.1em solid #666666;
cursor: pointer;
flex: 1 1 0;
position: relative;
margin:14px 8px 10px 4px;
height:10px;
-webkit-box-flex: 1;
-webkit-flex: 1;
cursor:pointer;
}
.ptimescale
{
font-size: 11px; margin: 12px 0px; color: #ffffff;
}
.seekbar_buffer
{
background-color: #00adef;
height:100%;
width:0;
}
.volume
{
float:left;
position: relative;
height:36.5px;
padding: 0 1% 0 0;
}
.volume ul
{
margin:10px 0 0 10px;
padding:0;
}
.volume ul li
{
background-color: #00adef;
float: left;
list-style-type: none;
margin: 0 0 0 2px;
padding: 8px 2px;
transition: all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
cursor:pointer !important;
}
.volume ul li:hover
{
transform: scaleY(1.5);
-webkit-transform: scaleY(1.5);
}
.mute-unmute
{
-moz-box-flex: 0;
-moz-box-pack: end;
display: flex;
flex: 0 1 0;
height: 36.5px;
justify-content: flex-end;
width: 8%;
padding: 0 0 0 0;
}
.unmute
{
fill: #ffffff;
height: 100%;
margin: 6px 0 0 8px;
width: 1.6em;
cursor:pointer !important;
}
.mute
{
fill: #ffffff;
height: 100%;
width: 1.6em;
margin: 3px 0 0 15px;
display:none;
cursor:pointer !important;
 overflow: hidden;
}
.fullscreen
{
height: 36.5px;
margin:0;
padding:0 1% 0 1.5%;
width: 1.2em;
}
.fill
{
transition:fill 40ms ease 0s;
-webkit-transition:fill 40ms ease 0s;
fill:#ffffff;
}
.fillfullscreen
{
transition:fill 40ms ease 0s;
-webkit-transition:fill 40ms ease 0s;
fill:#ffffff;
height: 100%;
}
.fullsc
{
margin:11px 0 0 0;
cursor:pointer !important;
}
.fullscreen:hover .fillfullscreen
{
fill: #00adef;
}
.volfill_10 li:nth-child(-n+1)
{
	background: #ffffff;
}
.volfill_20 li:nth-child(-n+2)
{
	background: #ffffff;
}
.volfill_40 li:nth-child(-n+3)
{
	background: #ffffff;
}
.volfill_60 li:nth-child(-n+4)
{
	background: #ffffff;
}
.volfill_80 li:nth-child(-n+5)
{
	background: #ffffff;
}
.volfill_100 li:nth-child(-n+6)
{
	background: #ffffff;
}
.video-controls {
    background: none;
    bottom: 0;
    left: 0;
   /* opacity: 0;*/
    position: absolute;
    right: 0;
    transition: opacity 0.3s ease 0s;
	-webkit-transition:opacity 0.3s ease 0s;
}


@media handheld, only screen and (max-width: 400px) {

.play_media
{
background: none !important;
bottom: 0;
color: #ffffff;
display: block;
height: 120px;
left: 0;
position: absolute;
right: 0;
top: -115px;
transition: opacity 250ms ease-out 0s, background-color 40ms ease 0s, color 40ms ease 0s;
width: 100%;
}
.play_media:active 
{
background:none ! important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.playpauseui:active 
{
background:transparent ! important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.vhwidescreen
{
display:block ! important;
background: rgba(23, 35, 34, 0.75) none repeat scroll 0 0 !important;
width: 10%;
padding-top: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.vhwidescreen:hover 
{
background: #00adef !important;
}
.vhwidescreen:active 
{
background: #00adef !important;
-webkit-tap-highlight-color: #00adef !important;
}
.play,.pause
{
	box-sizing: border-box;
/*    margin: 9px 0 auto;*/
    padding: 0;
    text-align: center;
    width: auto;
}
.fullscreen_media
{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
    fill: #fff;
    height: 17px;
    padding: 3px !important;
    text-align: center;
    transition: fill 40ms ease 0s;
    width: 17px;
line-height: 18px;
}
.seekbar
{
display:block;
height: 6px;
margin: 21px 8px 10px 4px;
background:rgba(23, 35, 34, 0.75) none repeat scroll 0 0 !important;
border:0.1px solid #151E1E;
}
.ptimescale {
    font-size: 9px;
    margin: 18px 4px 19px 0;
}
.mute-unmute
{
display:none;
}
.volume
{
display:none;
}
.fullbg
{
background: rgba(23, 35, 34, 0.75) none repeat scroll 0 0 !important;
margin: 0;
padding: 6px 5px 6px 11px;
}
.fullsc
{
margin:0 !important;
}
.rounded-box
{
background: none;
}
}

@media only screen and (min-width: 235px) and (max-width: 319px) 
{
.play_media
{
background: none !important;
bottom: 0;
color: #ffffff;
display: block;
height: 120px;
left: 0;
position: absolute;
right: 0;
top: -115px;
transition: opacity 250ms ease-out 0s, background-color 40ms ease 0s, color 40ms ease 0s;
width: 100%;
}
.play_media:active 
{
background:transparent ! important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.playpauseui:active 
{
background:transparent ! important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.playpauseui
{
background:none ! important;
}
.vhwidescreen
{
	background: rgba(23, 35, 34, 0.75) none repeat scroll 0 0 !important;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display: block !important;
	height: 14px;
	padding: 5px !important;
	width: 14px;
}
.play,.pause
{
	margin:0 auto;
	padding:0;
	width:auto;
}
.mediumplay_btn,.mediumpause_btn
{
	display:none ! important;
}
.smallplay_btn,.smallpause_btn
{
	display:block ! important;
}
.vhwidescreen:active 
{
background: #00adef !important;
-webkit-tap-highlight-color: #00adef !important;
}
.vhwidescreen:hover 
{
background: #00adef !important;
}
.fullsc
{
margin:0 !important;
}
}
</style>
