/*!
Video.js sochi Styles (http://videojs.com)
Version GENERATED_AT_BUILD
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-sochi-skin' with a new name. Then add your new
skin name to your video tag instead of the sochi skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-sochi-skin {
  color: #84898e;
}
/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face{
  font-family: 'VideoJS';
  src: url('../fonts/vjs.eot');
  src: url('../fonts/vjs.eot?#iefix') format('embedded-opentype'),
  url('../fonts/vjs.woff') format('woff'),
  url('../fonts/vjs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-sochi-skin .vjs-slider {
  /* Replace browser focus hightlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  /*background-color: #ffffff;*/
}
.vjs-sochi-skin .vjs-slider:focus {
  /* box-shadow */
  /*-webkit-box-shadow: 0 0 2em #ffffff;*/
  /*-moz-box-shadow: 0 0 2em #ffffff;*/
  /*box-shadow: 0 0 2em #ffffff;*/
}
.vjs-sochi-skin .vjs-slider-handle {
  position: absolute;
  display: none;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}
.vjs-sochi-skin .vjs-slider-handle:before {
  content: "\e009";
  font-family: VideoJS;
  font-size: 1.1em;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  position: absolute;
  top: 0;
  left: 0;
  /* Rotate the square icon to make a diamond */
  /* transform */
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
/* Control Bar
--------------------------------------------------------------------------------
The sochi control bar that is a container for most of the controls.
*/
.vjs-sochi-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
     If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  /* background-color-with-alpha */
  background-color: rgba(10, 23, 41, 0.6);


}
/* Show the control bar only once the video has started playing */
.vjs-sochi-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */

  visibility: visible;
  opacity: 1;
  /* transition */
  -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;
}
/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-sochi-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}
.vjs-sochi-skin.vjs-controls-disabled .vjs-control-bar {
  display: none;
}
.vjs-sochi-skin.vjs-using-native-controls .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-sochi-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: "";
  }
}
/* General styles for individual controls. */
.vjs-sochi-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em;
}
/* FontAwsome button icons */
.vjs-sochi-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 */
.vjs-sochi-skin .vjs-control:focus:before,
.vjs-sochi-skin .vjs-control:hover:before {
  /*text-shadow: 0em 0em 1em #ffffff;*/
  color:#fff;
}
.vjs-sochi-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 */
.vjs-sochi-skin .vjs-control-text {
  /* hide-visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-sochi-skin .vjs-play-control {
  width: 5em;
  cursor: pointer;
}
.vjs-sochi-skin .vjs-play-control:before {
  content: "\e001";
}
.vjs-sochi-skin.vjs-playing .vjs-play-control:before {
  content: "\e002";
}
/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-sochi-skin .vjs-mute-control,
.vjs-sochi-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}
.vjs-sochi-skin .vjs-mute-control:before,
.vjs-sochi-skin .vjs-volume-menu-button:before {
  content: "\e006";
}
.vjs-sochi-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-sochi-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003";
}
.vjs-sochi-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-sochi-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004";
}
.vjs-sochi-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-sochi-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005";
}
.vjs-sochi-skin .vjs-volume-control {
  width: 5em;
  float: right;
}
.vjs-sochi-skin .vjs-volume-bar {
  width: 5em;
  height: 0.5em;
  margin: 1.1em auto 0;
}
.vjs-sochi-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em;
}
.vjs-sochi-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  background-color:#fff;
  background-color:rgba(255,255,255,0.6);
}
.vjs-sochi-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
}
.vjs-sochi-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em;
}
.vjs-sochi-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em;
}
/* Progress
--------------------------------------------------------------------------------
*/
.vjs-sochi-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 7px;
  /* Set above the rest of the controls. */
  top: -7px;
  /* Shrink the bar slower than it grows. */
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 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 */
.vjs-sochi-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. */

  /* transition */
  /*-webkit-transition: all 0.2s;*/
  /*-moz-transition: all 0.2s;*/
  /*-o-transition: all 0.2s;*/
  /*transition: all 0.2s;*/
}
/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-sochi-skin .vjs-progress-holder {
  height: 100%;
}
/* Progress Bars */
.vjs-sochi-skin .vjs-progress-holder .vjs-play-progress,
.vjs-sochi-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}
.vjs-sochi-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprisingly 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-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.6);
}
.vjs-sochi-skin .vjs-load-progress {
  background-color: #999999; /* IE8- Fallback ;*/
  background-color: rgba(255, 255, 255, 0.16);
}
.vjs-sochi-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}
.vjs-sochi-skin .vjs-seek-handle:before {
  padding-top: 0em /* Minor adjustment */;
}
/* Time Display
--------------------------------------------------------------------------------
*/
.vjs-sochi-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
}
.vjs-sochi-skin .vjs-current-time {
  float: left;
}
.vjs-sochi-skin .vjs-duration {
  float: left;
}
/* Remaining time is in the HTML, but not included in sochi design */
.vjs-sochi-skin .vjs-remaining-time {
  display: none;
  float: left;
}
.vjs-time-divider {
  float: left;
  line-height: 3em;
}
/* Fullscreen
--------------------------------------------------------------------------------
*/
.vjs-sochi-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
}

.vjs-sochi-skin .vjs-fullscreen-control:before {
  content: "\e000";
}
/* Switch to the exit icon when the player is in fullscreen */
.vjs-sochi-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b";
}