/*
Custom Video.js skin for Video Embed & Thumbnail Generator
by Kyle Gilman (http://www.kylegilman.net/)
*/



/* Base UI Component Classes
-------------------------------------------------------------------------------- */
@font-face{
  font-family: 'VideoJS';
  src: url('font/vjs.eot');
  src: url('font/vjs.eot#iefix') format('embedded-opentype'),
  url('font/vjs.woff') format('woff'),
  url('font/vjs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.kg-video-js-skin {
  color: #ccc;
}

/* Slider - used for Volume bar and Seek bar */
.kg-video-js-skin .vjs-slider {
  z-index: 1002;
  outline: 0; /* Replace browser focus hightlight with handle highlight */
  position: relative;
  cursor: pointer;
  padding: 0;
  background: rgb(50, 50, 50); /* IE8- Fallback */
  background: rgba(100, 100, 100, 0.5);
}

.kg-video-js-skin .vjs-slider:focus {
  background: rgb(70, 70, 70); /* IE8- Fallback */
  background: rgba(100, 100, 100, 0.70);

  -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
     -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
          box-shadow: 0 0 2em rgba(255, 255, 255, 1);
}

.kg-video-js-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.kg-video-js-skin .vjs-slider-handle:before {
  /*content: "\f111";*/ /* Circle icon = f111 */
  content: "\e009"; /* Square icon */
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;

  position: absolute;
  top: 0;
  left: 0;

  /* Rotate the square icon to make a diamond */
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* Control Bar
-------------------------------------------------------------------------------- */
/* The default control bar. Created by controls.js */
.kg-video-js-skin .vjs-control-bar {
  display: none; /* Start hidden */
  position: absolute;
  /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  bottom: 0;
  /* 100% width of player div */
  left: 0;
  right: 0;
  /* Controls are absolutely position, so no padding necessary */
  padding: 0;
  margin: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  background-color: rgb(0, 0, 0);
  /* Slight blue so it can be seen more easily on black. */
  background-color: rgba(40, 40, 40, 0.7);
  /* Default font settings */
  font-style: normal;
  font-weight: normal;
  font-family: Arial, sans-serif;
  z-index: 1002;
}

/* General styles for individual controls. */
.kg-video-js-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em;
}

/* FontAwsome button icons */
.kg-video-js-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);
}

/* Replacement for focus outline */
.kg-video-js-skin .vjs-control:focus:before,
.kg-video-js-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
}

.kg-video-js-skin .vjs-control:focus { /*  outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ }

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.kg-video-js-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
-------------------------------------------------------------------------------- */
.kg-video-js-skin .vjs-play-control {
  width: 5em;
  cursor: pointer;
}
.kg-video-js-skin .vjs-play-control:before {
  content: "\e001"; /* Play Icon */
}
.kg-video-js-skin.vjs-playing .vjs-play-control:before {
  content: "\e002"; /* Pause Icon */
}

/* Rewind
-------------------------------------------------------------------------------- */
/*.kg-video-js-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.kg-video-js-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
*/

/* Volume/Mute
-------------------------------------------------------------------------------- */
.kg-video-js-skin .vjs-mute-control,
.kg-video-js-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}
.kg-video-js-skin .vjs-mute-control:before,
.kg-video-js-skin .vjs-volume-menu-button:before {
  content: "\e006"; /* Full volume */
}
.kg-video-js-skin .vjs-mute-control.vjs-vol-0:before,
.kg-video-js-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003"; /* No volume */
}
.kg-video-js-skin .vjs-mute-control.vjs-vol-1:before,
.kg-video-js-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004"; /* Half volume */
}
.kg-video-js-skin .vjs-mute-control.vjs-vol-2:before,
.kg-video-js-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005"; /* Full volume */
}

.kg-video-js-skin .vjs-volume-control {
  width: 5em;
  float: right;
}
.kg-video-js-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0;
}

.kg-video-js-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em;
}

.kg-video-js-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;

  background: #66A8CC
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
    -50% 0 repeat;
}
.kg-video-js-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
}

.kg-video-js-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;

  width: 1em;
  height: 1em;
}

.kg-video-js-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em;
}

/*.kg-video-js-skin .vjs-menu-button .vjs-volume-control {
  height: 1.5em;
}*/

/* Progress
-------------------------------------------------------------------------------- */
.kg-video-js-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;

  /* Shrink the bar slower than it grows. */
  -webkit-transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
     -moz-transition: top 0.4s, height 0.4s, font-size 0.4s,    -moz-transform 0.4s;
       -o-transition: top 0.4s, height 0.4s, font-size 0.4s,      -o-transform 0.4s;
          transition: top 0.4s, height 0.4s, font-size 0.4s,         transform 0.4s;

}

/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
.kg-video-js-skin:hover .vjs-progress-control {
  font-size: .9em;

  /* Even though we're not changing the top/height, we need to include them in
      the transition so they're handled correctly. */
  -webkit-transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
     -moz-transition: top 0.2s, height 0.2s, font-size 0.2s,    -moz-transform 0.2s;
       -o-transition: top 0.2s, height 0.2s, font-size 0.2s,      -o-transform 0.2s;
          transition: top 0.2s, height 0.2s, font-size 0.2s,         transform 0.2s;
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.kg-video-js-skin .vjs-progress-holder {
  /* Placement within the progress control item */
  height: 100%;
}

/* Progress Bars */
.kg-video-js-skin .vjs-progress-holder .vjs-play-progress,
.kg-video-js-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.kg-video-js-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprising works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */
  background: #66A8CC
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
    -50% 0 repeat;
}
.kg-video-js-skin .vjs-load-progress {
  background: rgb(100, 100, 100); /* IE8- Fallback */
  background: rgba(255, 255, 255, 0.4);
}

.kg-video-js-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}

.kg-video-js-skin .vjs-seek-handle:before {
  padding-top: 0.1em; /* Minor adjustment */
}

/* Time Display
-------------------------------------------------------------------------------- */
.kg-video-js-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
}
.kg-video-js-skin .vjs-current-time { float: left; }
.kg-video-js-skin .vjs-duration { float: left; }
/* Remaining time is in the HTML, but not included in default design */
.kg-video-js-skin .vjs-remaining-time { display: none; float: left; }
.vjs-time-divider { float: left; line-height: 3em; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.kg-video-js-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
}
.kg-video-js-skin .vjs-fullscreen-control:before {
  content: "\e000"; /* Enter full screen */
}
.kg-video-js-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b"; /* Exit full screen */
}

/* Big Play Button (at start)
---------------------------------------------------------*/
.kg-video-js-skin .vjs-big-play-button {
  display: block;
  z-index: 2;
  position: absolute;
  top: 49%;
  left: 49%;
  width: 8em;
  height: 8em;
  margin: -4em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  

  /* Need a slightly gray bg so it can be seen on black backgrounds */
  background-color: rgb(40, 40, 40);
  background-color: rgba(40, 40, 40, 0.6);

  border: 0.6em solid rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.7);

  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;

  -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s, background-color 0.4s;
     -moz-transition: border 0.4s,    -moz-box-shadow 0.4s,    -moz-transform 0.4s, background-color 0.4s;
       -o-transition: border 0.4s,      -o-box-shadow 0.4s,      -o-transform 0.4s, background-color 0.4s;
          transition: border 0.4s,         box-shadow 0.4s,         transform 0.4s, background-color 0.4s;
}

.kg-video-js-skin:hover .vjs-big-play-button,
.kg-video-js-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 1);
  /* IE8 needs a non-glow hover state */
  background-color: rgb(80, 80, 80);
  background-color: rgba(50, 50, 50, 0.8);

  -webkit-transition: border 0s, -webkit-box-shadow 0s, -webkit-transform 0s, background-color 0s;
     -moz-transition: border 0s,    -moz-box-shadow 0s,    -moz-transform 0s, background-color 0s;
       -o-transition: border 0s,      -o-box-shadow 0s,      -o-transform 0s, background-color 0s;
          transition: border 0s,         box-shadow 0s,         transform 0s, background-color 0s;
}

.kg-video-js-skin:hover .vjs-big-play-button:before {
	color: white;
	transition-property: color;
	transition-duration: 0s;
}

.kg-video-js-skin .vjs-big-play-button:before {
  content: "\e001"; /* Play icon */
  font-family: VideoJS;
  font-size: 5.5em;
  line-height: 1.5em;
  text-align: center; /* Needed for IE8 */
  transition-property: color;
  transition-duration: 0.4s;
  position: absolute;
  left: 2px;
  width: 100%;
  height: 100%;
}

/* Loading Spinner
---------------------------------------------------------*/
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;

  font-size: 5em;
  line-height: 1;

  width: 1em;
  height: 1em;

  margin-left: -0.5em;
  margin-top: -0.5em;

  opacity: 0.75;

  -webkit-animation: spin 1.5s infinite linear;
     -moz-animation: spin 1.5s infinite linear;
       -o-animation: spin 1.5s infinite linear;
          animation: spin 1.5s infinite linear;
}

.kg-video-js-skin .vjs-loading-spinner:before {
  content: "\e00a"; /* Loading spinner icon */
  font-family: VideoJS;

  position: absolute;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}

/* Add a gradient to the spinner by overlaying another copy.
   Text gradient plus a text shadow doesn't work
   and `background-clip: text` only works in Webkit. */
.kg-video-js-skin .vjs-loading-spinner:after {
  content: "\e00a"; /* Loading spinner icon */
  font-family: VideoJS;

  position: absolute;
  width: 1em;
  height: 1em;
  text-align: center;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.kg-video-js-skin .vjs-menu-button {
  float: right;
  cursor: pointer;
}

.kg-video-js-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em; /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;

  border-left: 2em solid transparent;
  border-right: 2em solid transparent;

  border-top: 1.55em solid rgb(0, 0, 0); /* Same top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
}

/* Button Pop-up Menu */
.kg-video-js-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0; margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em; /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;

  left: -5em; /* Width of menu - width of button / 2 */

  background-color: rgb(0, 0, 0);
  background-color: rgba(7, 40, 50, 0.7);

  -webkit-box-shadow: -20px -20px 0px rgba(255, 255, 255, 0.5);
     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
          box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}

/*.kg-video-js-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
.kg-video-js-skin .vjs-menu-button:hover .vjs-menu {
  display: block;
}
.kg-video-js-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  font-weight: normal;
  text-align: center;
  text-transform: lowercase;
}
.kg-video-js-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000;
}
.kg-video-js-skin .vjs-menu-button ul li:focus,
.kg-video-js-skin .vjs-menu-button ul li:hover,
.kg-video-js-skin .vjs-menu-button ul li.vjs-selected:focus,
.kg-video-js-skin .vjs-menu-button ul li.vjs-selected:hover {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.75);
  color: #111;
  outline: 0;

  -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
          box-shadow: 0 0 1em rgba(255, 255, 255, 1);
}
.kg-video-js-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

/* Subtitles Button */
.kg-video-js-skin .vjs-subtitles-button:before { content: "\e00c"; }

/* There's unfortunately no CC button in FontAwesome, so we need
    to manually create one. Please +1 the fontawesome request.
    https://github.com/FortAwesome/Font-Awesome/issues/968 */
.kg-video-js-skin .vjs-captions-button {
  font-size: 1em; /* Font icons are 1.5em */
}
.kg-video-js-skin .vjs-captions-button:before {
  content: "\e008";
  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: none;
}


/* Replacement for focus outline */
.kg-video-js-skin .vjs-captions-button:focus .vjs-control-content:before,
.kg-video-js-skin .vjs-captions-button:hover .vjs-control-content:before {
  -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
          box-shadow: 0 0 1em rgba(255, 255, 255, 1);
}