/* YT-like player for videojs */
/* exclusively created for pjfrix webspace 3.0 */

.video-js {overflow:hidden;}
.video-js .vjs-control-bar {
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    height: 2.4em;
}

.video-js[tabindex="-1"] {border-bottom: 1px solid #b1b1b1;}

/*.video-js .vjs-tech {height: 92%;}*/
.video-js .vjs-tech {padding-bottom: 16px;}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {opacity: 1;}

.video-js .vjs-control {
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    width: 30px;
    height: 25px;
    border: 1px solid #b1b1b1;
    border-left: 1px solid #eee;
}

.video-js .vjs-play-control {
    background-position:-1px 733px;
    color:transparent;
}
.video-js .vjs-play-control:hover {background-position:91px 733px;}
.video-js .vjs-play-control:active {background-position:63px 733px;}

.video-js .vjs-play-control.vjs-playing {background-position: 0 710px;}
.video-js .vjs-play-control.vjs-playing:hover {background-position: 92px 710px;}
.video-js .vjs-play-control.vjs-playing:active {background-position: 64px 710px;}

.video-js .vjs-mute-control {border:none;width:2.833em;height: auto;z-index:2;}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {bottom:7.5em;transition: bottom 0.25s;}
.vjs-mute-control.vjs-vol-0 {background-position:0px 526px;}
.vjs-mute-control.vjs-vol-0:hover {background-position:90px 526px;}
.vjs-mute-control.vjs-vol-0:active {background-position:62px 526px;}

.vjs-mute-control.vjs-vol-1 {background-position:0px 549px;}
.vjs-mute-control.vjs-vol-1:hover {background-position:90px 549px;}
.vjs-mute-control.vjs-vol-1:active {background-position:62px 549px;}

.vjs-mute-control.vjs-vol-2 {background-position:0px 572px;}
.vjs-mute-control.vjs-vol-2:hover {background-position:90px 572px;}
.vjs-mute-control.vjs-vol-2:active {background-position:62px 572px;}

.vjs-mute-control.vjs-vol-3 {background-position:0px 618px;}
.vjs-mute-control.vjs-vol-3:hover {background-position:90px 618px;}
.vjs-mute-control.vjs-vol-3:active {background-position:60px 618px;}

.video-js .vjs-current-time.vjs-time-control.vjs-control {
    border-left: none; 
    border-right: none;
    display: block;
    padding: 0;
}
.video-js .vjs-time-control {
    line-height: 2em;
    color:black;
    min-width:0.5em;
}
.video-js .vjs-duration.vjs-time-control.vjs-control {
    display: block;
    border-left: none;
    padding: 0;
}
.video-js .vjs-time-divider {
    display:block;
    border: 1px solid #b1b1b1;
    border-left: none; 
    border-right: none;
    text-align: center; 
    width: 0;
    height: 25px;
    padding: 0;
}

.video-js .vjs-fullscreen-control {
    background-position:-1px 687px;
    width: 32px;
    color:transparent;
}
.video-js .vjs-fullscreen-control:hover{background-position:-32px 687px;}
.video-js .vjs-fullscreen-control:active{background-position:-63px 687px;}

/* custom functionality */
.video-js .vjs-info-control {
    background-position:-1px 664px;
    width: 32px;
    color:transparent;
}
.video-js .vjs-info-control:hover{background-position:-33px 664px;}
.video-js .vjs-info-control:active{background-position:-65px 664px;}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
    width: 3.1em;
    border: 1px solid #b1b1b1;
    border-left: 1px solid #eee;
    color:transparent;
}
.video-js .vjs-volume-panel .vjs-volume-control {margin:0;left: -2.9em !important;}
.video-js .vjs-volume-vertical {
    bottom: 0em;}
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {opacity:1;transition: bottom 0.25s 1s;}
.vjs-volume-control {background-size:400px;}
.vjs-icon-circle::before, .vjs-seek-to-live-control .vjs-icon-placeholder::before, .video-js .vjs-play-progress::before {
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    background-position: 2px 503px;
    color: transparent;
}
.video-js .vjs-volume-level {background-color:transparent;}
.video-js .vjs-volume-level::before {
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    background-position: -44px 503px;
    color: transparent;
    font-size: 2em;
    top: -0.25em;
}
.vjs-volume-bar.vjs-slider-vertical {
    width:0.63em;
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    background-position: -11px 483px;
    height: 5.4em;
}
    
.video-js .vjs-play-progress::before {
    width:18px;
    height:18px;
    top: -0.13333333em;
}
.video-js .vjs-progress-control {border-right: none;}
.video-js .vjs-progress-control .vjs-progress-holder,
.video-js .vjs-progress-control .vjs-progress-holder:hover,
.video-js .vjs-progress-control:hover .vjs-progress-holder {font-size: 2.73333em;}
.video-js .vjs-play-progress {
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    background-position: 2px 754px;
}
.video-js .vjs-load-progress {
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    background-position: 2px 740px;
    border:1px solid #bebebe;
    border-bottom-color: #eaeaea;
}
.video-js .vjs-load-progress div {
    background-image: url(../img/elements/videojs/html5_player-vfl148010.gif);
    background-position: 2px 747px;
}
.vjs-play-progress .vjs-time-tooltip {opacity:0;}
.vjs-mouse-display .vjs-time-tooltip {opacity:1;}
.video-js .vjs-fullscreen-control[aria-disabled="true"] {display: none;}
/*** custom modal-like overlay for embedded content ***/
#video-info {position:absolute;top:0;left:0;right:0;opacity: 1;}

/*.video-info {overflow: hidden;}*/
.video-info .video-title {
	display: block;
	padding: 5px 10px; 
	font-size: 16px;
	background: rgba(0,0,0,.8);
}
.video-js.vjs-playing.vjs-user-active #video-info {top: 0; transition: opacity 0.25s ease-in; opacity: 1;}
.video-js.vjs-playing.vjs-user-inactive #video-info {top: -45px; transition: top 0.5s ease-in, opacity 0.5s ease-in;opacity: 0;}
.video-info .video-title, 
.video-info .video-desc {font-family: Arial, sans-serif; color: white;}
.video-info .video-desc {
	display:none; padding: 5px 15px 10px; 
	background: rgba(12,12,12,.75);
	box-shadow: 0 0 2px black, inset 0 2px 5px black;
}
.video-info .video-desc p {
	margin: 0 auto;
	font-size: 13px;
	white-space: pre-wrap;
}
.video-info .video-desc p.null-desc {font-style: italic; opacity: 0.75;}
.video-extra {
  font-size: 11px; opacity: .75;
  padding-top: 2px; margin-top: 6px;
  border-top: 1px solid #333;
}
.video-js.vjs-playing.vjs-user-active #video-info .video-desc {transition: opacity 0.3s ease-in; opacity: 1;}
.video-js.vjs-playing.vjs-user-inactive #video-info .video-desc {transition: top 0.5s ease-in, opacity 0.25s ease-in; opacity: 0;}
.video-extra .extra-key {font-weight: bold;color: #cbcbcb;}


/*** play button ***/
.video-js .vjs-big-play-button {
	background-image: url(../img/elements/videojs/LargeStartPlayButton.svg);
	background-size: contain; background-position: center;
	background-repeat: no-repeat; font-size: 6em;
	height: 2.25em; color: transparent;
	background-color: transparent;
	display: block; border: 0; top: 48%;
	transition: none;
	opacity: 0.9;
}
.video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button {
	background-color: transparent;  
	opacity: 1; border: 0;
	filter: brightness(1.1);
	transition: none;
}
.video-js.vjs-controls-disabled .vjs-big-play-button, .video-js.vjs-error .vjs-big-play-button, .video-js.vjs-has-started .vjs-big-play-button, .video-js.vjs-using-native-controls .vjs-big-play-button {display:none;}