/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */

/* The default control bar. Created by bar.js */
.vjs-kinepolis-skin .vjs-control-bar {
  position: absolute;
  bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  left: 0; right: 0; /* 100% width of div */
  margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
  height: 2.6em; /* Including any margin you want above or below control items */
  color: #fff;
  z-index: 1005;
  background: #2997FF;

  /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
  /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
  opacity: 1;
  display: none;
}

/* General styles for individual controls. */
.vjs-kinepolis-skin .vjs-control {
  position: relative; float: left;
  text-align: center; margin: 0; padding: 0;
  height: 2.6em; width: 2.6em;
}

.vjs-kinepolis-skin .vjs-control:focus {
  outline: 0;
}

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-kinepolis-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-kinepolis-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
/* Play Icon */
.vjs-kinepolis-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png'); margin: 0.5em auto 0; }
.vjs-kinepolis-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png') -25px 0; margin: 0.5em auto 0; }

/* Resolution. */
.vjs-kinepolis-skin .vjs-resolution-control {
  width: 6em;
  cursor: pointer !important;
  float: right;
}
.vjs-kinepolis-skin .vjs-resolution-control div {
  width: 50px;
  height: 16px;
  margin: 0.5em auto 0;
  background-color: #FFF;
  color: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.vjs-kinepolis-skin .vjs-resolution-control .vjs-control-text {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 2em;
}
.vjs-kinepolis-skin .vjs-resolution-selection {
  width: 50px;
  cursor: pointer !important;
  float: right;
  position: absolute;
  bottom: 44px;
  right: 132px;
}
.vjs-kinepolis-skin .selection-list-1 {
  height: 31px;
  background: url('../images/arrow_down.gif') 17px 19px no-repeat;
}
.vjs-kinepolis-skin .selection-list-2 {
  height: 49px;
  background: url('../images/arrow_down.gif') 17px 37px no-repeat;
}
.vjs-kinepolis-skin .selection-list-3 {
  height: 67px;
  background: url('../images/arrow_down.gif') 17px 55px no-repeat;
}
.vjs-kinepolis-skin .selection-list-4 {
  height: 85px;
  background: url('../images/arrow_down.gif') 17px 73px no-repeat;
}
.vjs-kinepolis-skin .selection-list-5 {
  height: 103px;
  background: url('../images/arrow_down.gif') 17px 91px no-repeat;
}
.vjs-kinepolis-skin .vjs-resolution-selection .vjs-control-content {
  width: 50px;
  background-color: #2997FF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.vjs-kinepolis-skin .vjs-resolution-selection .vjs-control-text {
  position: relative;
  margin: 0px;
}
.vjs-kinepolis-skin .vjs-resolution-selection .vjs-control-text .item-list {
  padding: 1px 0px;
}
.vjs-kinepolis-skin .vjs-resolution-selection .vjs-control-text .item-list ul {
  margin: 0px;
}
.vjs-kinepolis-skin .vjs-resolution-selection .vjs-control-text .item-list ul li {
  background: none;
  padding: 0px;
  height: 18px;
}
.vjs-kinepolis-skin .vjs-resolution-selection .item-list li.selected {
  color: orange;
}

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

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-kinepolis-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-kinepolis-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('../images/video-js.png') -75px -25px; margin: 0.5em auto 0; }
.vjs-kinepolis-skin .vjs-mute-control.vjs-vol-0 div { background: url('../images/video-js.png') 0 -25px; }
.vjs-kinepolis-skin .vjs-mute-control.vjs-vol-1 div { background: url('../images/video-js.png') -25px -25px; }
.vjs-kinepolis-skin .vjs-mute-control.vjs-vol-2 div { background: url('../images/video-js.png') -50px -25px; }


.vjs-kinepolis-skin .vjs-volume-control { width: 5em; float: right; }
.vjs-kinepolis-skin .vjs-volume-bar {
  position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;

  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #666;
  background: -moz-linear-gradient(top, #333, #666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
  background: -webkit-linear-gradient(top, #333, #666);
  background: -o-linear-gradient(top, #333, #666);
  background: -ms-linear-gradient(top, #333, #666);
  background: linear-gradient(top, #333, #666);
}
.vjs-kinepolis-skin .vjs-volume-level {
  position: absolute; top: 0; left: 0; height: 0.6em;

  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #fff;
  background: -moz-linear-gradient(top, #fff, #ccc);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top, #fff, #ccc);
  background: -o-linear-gradient(top, #fff, #ccc);
  background: -ms-linear-gradient(top, #fff, #ccc);
  background: linear-gradient(top, #fff, #ccc);
}
.vjs-kinepolis-skin .vjs-volume-handle {
  position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
  border: 1px solid #fff;
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
}

/* Progress
-------------------------------------------------------------------------------- */
.vjs-kinepolis-skin div.vjs-progress-control {
  background: #051221;
  height: 2em;
  left: 4.8em;
  position: absolute;
  right: 4.8em;
  top: -2em;
  width: auto;
}

.vjs-kinepolis-skin div.vjs-progress-control .vjs-progress-holder {
  margin: 0.5em 0 0;
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-kinepolis-skin .vjs-progress-holder {
  position: relative; cursor: pointer !important; /*overflow: hidden;*/
  padding: 0; margin: 0; /* Placement within the progress control item */
  height: 1.0em;
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;

  background: #ABABAB;
}
.vjs-kinepolis-skin .vjs-progress-holder .vjs-play-progress,
.vjs-kinepolis-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
  position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
  left: 0; top: 0; /*Needed for IE6*/
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
}

.vjs-kinepolis-skin .vjs-play-progress {
  background: #2997FF;
}
.vjs-kinepolis-skin .vjs-load-progress {
  opacity: 0.8;
  background: #FFF;
}

.vjs-kinepolis-skin div.vjs-seek-handle {
  position: absolute;
  width: 16px; height: 16px; /* Match img pixles */
  margin-top: -0.3em;
  left: 0; top: 0; /*Needed for IE6*/

  background: url('../images/video-js.png') 0 -50px;
  /* CSS Curved Corners. Needed to make shadows curved. */
  -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
  /* CSS Shadows */
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-kinepolis-skin .vjs-time-controls {
  background: #051221;
  height: 2em;
  position: absolute;
  right: 0;
  top: -2.2em;
  width: 4.8em;
}

.vjs-kinepolis-skin .vjs-current-time { left: 0; }

.vjs-kinepolis-skin .vjs-duration { right: 0; display: none; }
.vjs-kinepolis-skin .vjs-remaining-time { right: 0; }

.vjs-time-divider { display:none; }

.vjs-kinepolis-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-kinepolis-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-secondary-controls { float: right; }

.vjs-kinepolis-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-kinepolis-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('../images/video-js.png') -50px 0; margin: 0.5em auto 0; }

.vjs-kinepolis-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('../images/video-js.png') -75px 0; }


/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-kinepolis-skin .vjs-big-play-button {
  display: none; /* Start hidden */ z-index: 2;
  position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; text-align: center; vertical-align: center; cursor: pointer !important;
  border: 0.3em solid #fff;
  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
  background: #2997FF;
  /* CSS Shadows */
  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
  outline: none;
}

.vjs-kinepolis-skin div.vjs-big-play-button:hover {
  -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
}

.vjs-kinepolis-skin div.vjs-big-play-button span {
  position: absolute; top: 50%; left: 50%;
  display: block; width: 35px; height: 42px;
  margin: -20px 0 0 -15px; /* Using negative margin to center image. */
  background: url('../images/video-js.png') -100px 0;
}

/* Loading Spinner
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
  display: none;
  position: absolute; top: 50%; left: 50%; width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  background: transparent url('../images/ajax-loader.png') no-repeat;
}

/* Unwanted buttons
-------------------------------------------------------------------------------- */
.vjs-live-controls,
.vjs-playback-rate {
  display: none;
}

.vjs-kinepolis-skin.user-play-triggered.vjs-user-inactive .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 1.5s, opacity 1.5s;
  -moz-transition: visibility 1.5s, opacity 1.5s;
  -ms-transition: visibility 1.5s, opacity 1.5s;
  -o-transition: visibility 1.5s, opacity 1.5s;
  transition: visibility 1.5s, opacity 1.5s;
}

.vjs-kinepolis-skin.user-play-triggered.vjs-user-active .vjs-control-bar {
  display: block;
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 1.5s, opacity 1.5s;
  -moz-transition: visibility 1.5s, opacity 1.5s;
  -ms-transition: visibility 1.5s, opacity 1.5s;
  -o-transition: visibility 1.5s, opacity 1.5s;
  transition: visibility 1.5s, opacity 1.5s;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area {
  height: 100px;
  width: 100%;
  z-index: 1002;
  display: none;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul {
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li {
  display: block;
  float: left;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li a div {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li a .trailer-title-wrapper {
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 15px;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li a .trailer-title-wrapper div {
  width: auto;
  height: auto;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li a .field-name-field-trailer-still {
  float: none;
  margin: 0px;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li a .trailer-title-wrapper .trailer-title {
  padding-top: 15%;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li:hover a .trailer-title-wrapper {
  width: 100%;
  height: 100%;
}

#trailer-video .vjs-kinepolis-skin .vjs-playlist-area ul li img {
  width: 100%;
  height: 100%;
}