.webPlayer { /*display: inline-block; */
position: relative; font-family: 'Segoe UI', Verdana, sans-serif; clear: both; margin-bottom: 10px; line-height: 1.4; font-size: 13px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); text-align: center; /* Chrome FIX for full screen */ }
.webPlayer a.smooth { transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; }
.webPlayer.jp-video-full > .controls { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0.8; z-index: 1000; }
.webPlayer.jp-video-full, .webPlayer.jp-video-full object, .webPlayer.jp-video-full video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 999; }
.webPlayer.jp-video-full > .playerScreen, .webPlayer.jp-video-full > .playerScreen > .video-play { z-index: 1000; }
.webPlayer .playerScreen { cursor: pointer; }
.webPlayer .playerScreen .video-play { display: block; position: absolute; z-index: 990; width: 100%; top: 0; left: 0; right: 0; bottom: 50px; background: url("preimg.png") no-repeat center center; opacity: 0.4; background-color: rgba(0, 0, 0, 0.4); }

/***********************/
.webPlayer .controls { display: block; position: relative; height: 40px; background: White; color: Black; padding: 5px 10px; z-index: 996; border: 0px solid #000000; }

/***********************/

.webPlayer .controls .leftblock { position: absolute; left: 30px; width: 50px; }

.webPlayer .controls .leftblock .play { display: block; width: 40px; height: 40px; background: url("playerUI.png") no-repeat 0 1px; /*opacity: 0.8;*/ }

.webPlayer .controls .leftblock .play:hover { /*opacity: 1;*/ }

.webPlayer .controls .leftblock .pause { display: block; width: 40px; height: 40px; background: url("playerUI.png") no-repeat -40px 1px; /*opacity: 0.8; */}

.webPlayer .controls .leftblock .pause:hover {/* opacity: 1;*/ }
.webPlayer .controls .progress { position: relative; display: block; margin: 0 130px 0 80px; text-align: left; }
.webPlayer .controls .progress span { font-size: 12px; margin-left: 1px; color: Black; }
.webPlayer .controls .progress .progressbar { display: block; height: 4px; background-color: #3C3C3C; background: rgba(255, 255, 255, 0.05); margin: 2.5px 0; }
.webPlayer .controls .progress .progressbar .seekBar { position: relative; display: block; cursor: pointer; padding: 1px; background: gray; }
.webPlayer .controls .progress .progressbar .seekBar .playBar { display: block; height: 2px; padding: 0; background: #FFFFFF; }
.webPlayer .controls .progress .progressbar .seekBar a { display: block; position: absolute; top: -2px; width: 8px; height: 8px; border-radius: 5px; background: #ffffff; margin-left: -3px; }
.webPlayer .controls .progress .progressbar .seekBar a div { width: 8px; height: 8px; background:black; }
.webPlayer .controls .progress .time { display: block; position: absolute; width: 50px; font-size: 11px; }
.webPlayer .controls .progress .time.current { left: 1px; text-align: left; color: Black; }
.webPlayer .controls .progress .time.duration { right: 0px; text-align: right; }
.webPlayer .controls .rightblock { position: absolute; right: 10px; width: 110px; top: 5px; }
.webPlayer .controls .rightblock .volumeText { display: block; position: absolute; bottom: -12px; text-align: center; width: 80px; font-size: 11px; }
.webPlayer .controls .rightblock .volumeBar { display: block; position: absolute; height: 4px; background-color: black; background: rgba(255, 255, 255, 0.05); width: 80px; top: 19px; left: 0; cursor: pointer; }
.webPlayer .controls .rightblock .volumeBar .currentVolume { position: relative; height: 2px; padding: 1px; background:gray;display:block !important;}
.webPlayer .controls .rightblock .volumeBar .currentVolume .curvol { display: block; height: 2px; padding: 0; background: gray;z-index: 997; }
.webPlayer .controls .rightblock .volumeBar .currentVolume a { display: block; position: absolute; top: -2px; margin-left: -3px; width: 8px; height: 8px; border-radius: 5px; background: black; }
.webPlayer .controls .rightblock .volumeBar .currentVolume a div { display: block; width: 8px; height: 8px;background:black; }
.webPlayer .controls .rightblock .fullScreen { display: block; float: right; width: 16px; height: 16px; background: url("playerUI.png") no-repeat 0 -50px; margin-top: 12px; opacity: 0.4; }
.webPlayer .controls .rightblock .fullScreen:hover { opacity: 0.8; }
.webPlayer .controls .rightblock .fullScreenOFF { display: block; float: right; width: 16px; height: 16px; background: url("playerUI.png") no-repeat 0 -68px; margin-top: 12px; opacity: 0.4; }
.webPlayer .controls .rightblock .fullScreenOFF:hover { opacity: 0.8; }
.webPlayer.audioPlayer .progress { margin-right: 100px; }
.webPlayer.audioPlayer .rightblock { width: 85px; }
.webPlayer.audioPlayer .rightblock .volumeText { bottom: -42px; }
.webPlayer.audioPlayer .fullScreen { display: none; }
.webPlayer.audioPlayer .fullScreenOFF { display: none; }

@media screen and (min-width: 0px) and (max-width: 400px) {
  .webPlayer .controls .progress span { display: none;}
 .webPlayer .controls .progress .progressbar .seekBar{ display: none;}
 .webPlayer .controls .progress .time.current{top:10px;}
 /**bar**/
.webPlayer .controls .rightblock .volumeBar .currentVolume{ display:block !important;}
 .webPlayer .controls .rightblock .volumeBar .currentVolume.horizontal{     height: 1px;background: gray; display:block !important;}
  /* show it on small screens */
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
     /* hide it elsewhere */
}