/*video controlls.js styles*/

.hide{display:none;}
.show{display:block;}
.floatright{float:right !important;}
.floatleft{float:left;}

/*
#videoControls{
	height:8%;
	top:92%;
	width:100%;
	text-align: center;
	background-color:#d92a2e;
	background-color: rgba(0,0,0,0.4);
	position:relative;
	z-index: 2;
	-webkit-transition: top .5s ease-in;
	-moz-transition: top .5s ease-in;
	-ms-transition: top .5s ease-in;
	-o-transition: top .5s ease-in;
	transition: top .5s ease-in;
}
*/
#videoControls{
	height:8%;
	top:92%;
	width:100%;
	text-align: center;
	background-color:#d92a2e;
	background-color: rgba(0,0,0,0.4);
	position:relative;
	z-index: 2;
	-webkit-transition: opacity .5s ease-in;
	-moz-transition: opacity .5s ease-in;
	-ms-transition: opacity .5s ease-in;
	-o-transition: opacity .5s ease-in;
	transition: opacity .5s ease-in;
}

[class^="col-"] ,[class*= " col-"]{
	position: relative;
	top: 50%;
	float: left;
}

/*.col-80{
	width: 870px;
}*/

.col-7-5{
	width: 32px;
}

.col-7-6{
	width: 32px;
}

.col-5{
	width: 32px;
}
/*mute is the symbol with the sound waves...*/
#mute,
#unmute{
	left: 5px; /*the icon has some space in the transparency*/
}

#unmute,
#mute,
#play,
#pause
{	
	cursor:pointer;
	position: relative;
	color: #ffffff;
	text-align: center;
	top:-15px;
	width:32px;
	height:32px;
}

#unmute:hover,
#mute:hover,
#play:hover,
#pause:hover{
	-moz-opacity: 0.50;
	opacity: 0.50;
}

#timeDisplay{
	position: relative;
	top:-.55em;
	font-family:Arial, Helvetica, sans-serif;
	font-size: .6em;
	color: #ffffff;
	left: 5px;
	width: 100%;
	height: auto;
	margin: auto;
}

#scrubber{
	width:100%;
	height:100%;
	top: -50%;
	position: relative;
	text-align: center;
}
#track{
    width: 100%;
    height: 2px;
    background-color: white;
}

.draggable{
	position: relative;
    top: -5px;
    width: 8px;
    height: 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius:4px;
    border-radius: 4px;
    background-color: #ffffff;
}

#handle2{
	position: relative;
	top:-16px;
	width:16px;
	height:16px;
	cursor: pointer;
	-moz-border-radius: 8px; 
	-webkit-border-radius:8px; 
	border-radius: 8px;
	background-color:#d8292d;
	opacity: 0;
}
/*font size is more critical depending on the width of the video more than the actual device width - so depending on the eveolution of this tweak the media query so that the duration and other text fits smaller video controls..*/
@media (min-width: 600px) {
	.fs1{
	    font-size: 1em;
	}
}
@media (max-width:599px){
	.fs1{
	    font-size: .8em;
	}		
}
@media (max-width:500px){
	.fs1{
	    font-size: .6em;
	}		
}

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?dzg2bn');
	src:url('../fonts/icomoon.eot?#iefixdzg2bn') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?dzg2bn') format('truetype'),
		url('../fonts/icomoon.woff?dzg2bn') format('woff'),
		url('../fonts/icomoon.svg?dzg2bn#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	max-width: 25px;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-replay:before {
	content: "\e800";
	color: #cc0000;
}
.icon-cross:before {
	/*content: "\e805";*/
	background:url(../images/close.png) no-repeat;
}

.playBtn {
	background:url(../images/play.svg) no-repeat;
	max-width: 32px;
}

.pauseBtn {
	background:url(../images/pause.svg) no-repeat;
	max-width: 32px;
}

.unmuteBtn{
	background:url(../images/muted.svg) no-repeat;
	max-width: 32px;
}

.muteBtn{
	background:url(../images/mute.svg) no-repeat;
	max-width: 32px;
}

/*end of video controls*/