@charset "UTF-8";
/* CSS Document */
/*resets*/
body {
font: 12px Roboto,Arial,sans-serif;
background-color: #000;
color: #fff;
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
margin: 0;
padding: 0;
}

* {
	padding: 0px;
	margin: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.video {
	position: relative;
	width: 100%!important;
	/*width: 100%;*/
	height: 100%
}

.player {
	/*width: 100%;*/
	/*width: 100vw;*/
	width: 380px;
	background-image:url(images/pl_bg.jpg);
	/*background-repeat: no-repeat;*/
	border-radius: 10px;
	height: 40px;
	height: 70px;
	font-family: Arial, sans-serif;
/*the font fo all text in the player, CHANGE IT @@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	position: relative;	
	bottom: 70px;
	bottom: 100px;
	/*HOT vertcal position of the player, if outside player, adjust iframe!- was 70px*/
	z-index: 2;
	opacity: 0.4;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-webkit-transition: opacity 0.3s ease-in;
	transition: opacity 0.3s ease-in;
	font-size:10px;
	margin: 0px auto;
}

.player img {
	width: 100%;
	height: auto;
}

.video:hover .player {
	opacity: 1;
}

.player .progress {
	/*width: 40%*/;
	/*width: 30%;*/
	height: 15px;
	border-radius: 5px;
	/*background: #8600B1;*//*HOT-change this*/
	background: red;
	box-shadow: inset 0 -5px 17px rgba(255,255,255, 1);
	/*box-shadow: inset 0 -5px 17px rgba(0,0,0,0.7);*//*HOT- if you want an inset shadow - was inset 0 -5px 10px rgba(0,0,0,0.5)-modern is flat not 3d*/
	/*float: left;*/
	cursor: pointer;
	/*margin: 12.5px 0 0 10px;*/
	/*position: relative;	*/
	position: absolute;
	width: 90%;
	margin-top: 50px!important;
	margin-left: 20px;
}

.player .progress-bar {/*the one that grows with time*/
	background: #0132FF;/*HOT - was #33b5d5*/
	box-shadow: inset 0 -5px 10px rgba(0,0,0,0.7);
	border-radius: 5px;
	height: 100%;
	position: relative;
	z-index: 999;
	width: 0;
	/*background-color: #000;*/
}

.player .button-holder {
	position: relative;
	left: 10px;/*push it a little to the right, to be inside the bar*/
}

.player .progress-button {	
	background-image:url(images/prog_btn2.png);/*background: #fff *HOT*/
	background-repeat:no-repeat;
	box-shadow: 0 0 20px rgba(0,0,0,0.7);
	/*border-radius: 30px;*/		/*roundness of button*/
	width: 20px;
	height: 20px;/*was 15, made 20 for image vers*/
	position: absolute;
	left: -20px;
	bottom: -17px;/*HOY Vertical position button-added for image btn*/
	background-color: #8600B1;
	
}

.player [class^="buffered"] {/*not used*/
	background: rgba(255,255,255,0.1);
	position: absolute;
	top: 0;
	left: 30px;
	height: 100%;
	border-radius: 5px;
	z-index: 1;
}

.player .play-pause {	
	float: left;/*so its side by side wiht the rest*/
	margin: 0 4px 0 3px;
	cursor: pointer;/*so it looks clickable*/
}


.player .play{
	width:40px;/*change according to th image you make for it- was 40*/
	height:40px;/*change according to th image you make for it- was 40*/
	background-image:url(images/new_play_btn.png);/*HOT MUST CHANGE TO YOUR OWN@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	background-repeat:no-repeat;/*added for new image*/
	background-position:center;/*added for new image- works faster then using top and left*/
	/*position: relative;*/
	/*top: 10;*//*to move down*/
	/*left: 1;*//*to move right*/	
}


.player .play .pause-button, .player .pause .play-button {
	display: none;
	/*when in Play hide the Pause, when in Pause hide the Play*/
}

.player .pause-button {
	/*everything said about the play image is true for the pause image*/
	height: 40px;
	width:40px;
	background-image:url(images/new_pause_btn.png);
	background-repeat:no-repeat;/*added for new image*/
	background-position:center;/*added for new image- works faster then using top and left*/
}

.player .time {/*container for counters: current time(ctime), and total time(ttime)*/
	/*color: #EB80F9;*/
	/*HOT-changes only current time*/ 
	/*font-size: 10px;*//*HOT*/
	font-size: 16px;
	position: relative;
	float:left;/*side by side with progression bar*/
	top: 12.5px;/*vertical positioning*/
	margin-left: 16px;/*horiz positioning prog bar*/
	cursor:default;/*make sure it doesnt look clickable (but still selectable)- user-slect:none make it unselectale*/
}

.player .stime, .ttime {
	/*color: #EB80F9;*/
	color: #000;
	/*color only for the total time he X's 0:00/XX*/
}

.player .play:hover {
	text-shadow: 0 0 5px #fff;/*Opptional. according to your own tase*/
}

.player .play:active, .pause-button:active span {
	text-shadow: 0 0 7px #fff;/*Opptional*/
}

.player .pause-button:hover span {
	box-shadow: 0 0 5px #fff;/*Opptional*/
	
} .player .pause-button:active span {
	box-shadow: 0 0 7px #fff;/*Opptional*/
}

.player .volume {/*comtainer for volume bar*/
	position: relative;/*so it can be a parent to its position children*/
	float: left;
	width: 38px;
	margin-left: 10px;
	height: 100%;
}

.player .volume-icon {
	height: 100%;
	margin-left: 2px;
	cursor: pointer;
	background-image:url(images/vol_1.png);
	background-repeat:no-repeat;
	/*background-position: 2px 8px;*/
}

.player .v-change-1  {
	background-image:url(images/vol_2.png) !important;
	background-repeat:no-repeat;
	/*background-position: 2px 8px;*/
}

.player .volume-icon-hover {
	background-color: #4f4f4f;
}

.player .volume-holder {
	height: 105px;
	width: 100%;
	position: absolute;
	display: none;
	background: #8600B1;
	left: 0;
	border-radius: 9px 9px 0 0;
	top: -105px;
	z-index:10;
}

.player .volume-bar-holder {
	background: #333;
	width: 20px;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
	margin: 13px auto;
	height: 85px;
	border-radius: 15px;
	position: relative;
	cursor: pointer;
}

.player .volume-button {
	background-image:url(images/prog_btn2.png);
	/*background-image:url(images/volbtn2.png);*/
	width: 20px;
	height: 20px;	
}

.player .volume-button-holder {
	
	position: relative;
	top: -8px;
}

.player .volume-bar {
	background: #0132FF;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.7);
	border-radius: 15px;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0px;	
}

.player .fullscreen {
	width: 57px;
	cursor: pointer;
	float: left;
	height: 100%;
	margin-left: 5%;
	margin-top: -2.3%;
	
	margin-left: 80px;
}

.player .fullscreen img {
	position: relative;
	width: auto;
	height: 100;
}

.player .fullscreen a {
	width: 60px;
	height: 40px;
	display: block;
	position: relative;
	top: 13px;
	left: 4px;
	background-image:url(images/fullscreen2.png);
	background-repeat:no-repeat;
	margin: 0px auto;
}

.ResponsiveIframeSrc{
		/*width: 100% !important;*/
	}

.vidOne{
	/*width: 100%;*/
	width: auto;
	height: 100%;
}

body {
	/*width: 100% !important;
	height: 100% !important;*/
}