/** css document */
@charset 'utf-8';

/*!
Video.js Default Styles (http://videojs.com)
Version 4.6.1
Create your own skin at http://designer.videojs.com
*/
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-default-skin {
  color: #cccccc;
}
/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  left: 0;
  top: 0;
  height: 17px;
  width: 1px;
  background: #2fc9c9;
}
/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
.vjs-default-skin .vjs-control-bar {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 43px;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s;
}
.vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none;
}
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none;
}
.vjs-default-skin.vjs-error .vjs-control-bar {
  display: none;
}
/* IE8 is flakey with fonts, and you have to change the actual content to force
fonts to show/hide properly.
  - "\9" IE8 hack didn't work for this
  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
@media \0screen {
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: "";
  }
}
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
}
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
}
.vjs-default-skin .vjs-control:focus {
}
.vjs-default-skin .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control {
  width: 26px;
  height: 26px;
  margin-top: 9px;
  margin-left: 13px;
  cursor: pointer;
  opacity: 1.0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.vjs-default-skin .vjs-play-control:hover {
  opacity: 0.5;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.vjs-default-skin .vjs-play-control {
  background: url(./v_ply.png);
}
.vjs-default-skin.vjs-playing .vjs-play-control {
  background: url(./v_rsm.png);
}
/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control {
  cursor: pointer;
  float: right;
  margin: 9px 12px 0 0;
  width: 26px;
  height: 26px;
  background: url(./v_vol_3.png);
  opacity: 1.0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.vjs-default-skin .vjs-mute-control.ios {
  display: none;
}
.vjs-default-skin .vjs-mute-control:hover {
  opacity: 0.5;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0 {
  background: url(./v_vol_1.png);
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1 {
  background: url(./v_vol_2.png);
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2 {
  background: url(./v_vol_3.png);
}
.vjs-default-skin .vjs-volume-control {
  width: 140px;
  float: right;
  margin-right: 34px;
  top: 15px;
}
.vjs-default-skin .vjs-volume-control.ios {
  display: none;
}
.vjs-default-skin .vjs-volume-bar {
  width: 100%;
  height: 17px;
}
.vjs-default-skin .vjs-volume-bg {
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #404040;
}
.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 7px;
  left: 0;
  height: 2px;
  width: 100%;
  background: #015c60;
}
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 2px;
  height: 17px;
  left: 100%;
}
/* Progress
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 53px;
  right: 255px;
  width: auto;
  height: 17px;
  top: 15px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.vjs-default-skin .vjs-progress-control.ios {
  right: 34px;
}
.vjs-default-skin .vjs-progress-holder {
  height: 100%;
}
/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 2px;
  margin: 7px 0 8px 0;
  padding: 0;
  width: 0;
  left: 0;
  top: 0;
}
.vjs-default-skin .vjs-seek-bg {
  position: absolute;
  width: 100%;
  height: 1px;
  top: 7px;
  left: 0;
  background: #333333;
}
.vjs-default-skin .vjs-play-progress {
  background: #015c60;
}
.vjs-default-skin .vjs-load-progress {
  background: #404040;
}
.vjs-default-skin .vjs-seek-handle {
  width: 2px;
  height: 100%;
}
.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em /* Minor adjustment */;
}
/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-default-skin .vjs-big-play-button {
  left: 50%;
  top: 50%;
  margin-top: -52px;
  margin-left: -52px;
  display: block;
  z-index: 2;
  position: absolute;
  width: 104px;
  height: 104px;
  cursor: pointer;
  opacity: 1;
  background: url(./v_ply_big.png) no-repeat center center;
  border: none;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none;
}
.vjs-default-skin.vjs-playing .vjs-big-play-button {
  display: none;
}
.vjs-default-skin.vjs-paused .vjs-big-play-button {
  display: block;
}
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none;
}
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
}
.vjs-default-skin:hover .vjs-big-play-button {
  opacity: 0.5;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.vjs-error .vjs-big-play-button {
  display: none;
}
/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.4;
  background: url(./v_ldr.gif) no-repeat center center;
}
.video-js.vjs-error .vjs-loading-spinner {
  display: none !important;
}
/*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
     easily calculable. */

  font-size: 10px;
  /* Allow poster to be vertially aligned. */

  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/

  /* Provide some basic defaults for fonts */

  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */

  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */

  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Playback technology elements expand to the width/height of the containing div
    <video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}
.video-js.vjs-using-native-controls .vjs-poster {
  display: none;
}
.vjs-default-skin .vjs-hidden {
  display: none;
}
.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}
/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
    The .video-js classname on the video tag also isn't considered.
    This optional paragraph inside the video tag can provide a message to users
    about what's required to play video. */
.vjs-no-js {
  padding: 20px;
  color: #ccc;
  background-color: #333;
  font-size: 18px;
  font-family: Arial, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}
.vjs-no-js a,
.vjs-no-js a:visited {
  color: #F4A460;
}
/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */