/* @import url(font-awesome.min.css); */
/*@import url(49ada77dcc4b44f883931031523e6327.css);*/
 
 
/*********************
 * Wrapper
 *********************/
.js-video { position: relative; border-radius: 8px; }
/*********************
 * Elements inside js-video
 *********************/
video { max-width: 100%; max-height: 100%; background-size: cover; background-position: center center; }
.js-video button { -moz-appearance: none; -webkit-appearance: none; }
/*********************
 * UI
 *********************/
.playPause.ui-icon { position: absolute; top: 0px; left: 0px; right: 0; display: block; width: auto; bottom: 0px; }
.playPause.ui-icon:before, .playPause.ui-icon:after { position: absolute; top: 50%; left: 50%; }
.playPause.ui-icon:after { /*content: '';
  width: 50px;
  height: 50px;
  margin: -26px 0 0 -14px;
  background: rgba(0, 0, 0, 0.8);
  -moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;*/
}
.playPause.ui-icon:before { font-size: 50px; line-height: 80px; color: rgba(255, 255, 255, 0.8); z-index: 2; top: 50%; left: 50%; margin: -40px 0 0 -14px; }
.playPause.ui-icon.fa-pause:before, .playPause.ui-icon.fa-undo:before { margin-left: -17px; }
.playPause.ui-icon.fa-pause { opacity: 0; }
.ui { padding: 10px 1vw; font-size: 0; display: -webkit-flex; display: flex; }
.ui > div:nth-of-type(1), .ui > div:nth-of-type(4) { padding-top: 8px; }
.ui > div:nth-of-type(1) { -webkit-flex: 30 30 1px; flex: 30 30 1px; margin-right: 10px; }
.ui > div:nth-of-type(2) { -webkit-flex: 1 0 60px; flex: 1 0 60px; font-size: 12px; margin-right: 10px; text-align: center; line-height: 20px; }
.ui > div:nth-of-type(3) { -webkit-flex: 0 0 20px; flex: 0 0 20px; margin-right: 10px; }
.ui > div:nth-of-type(4) { -webkit-flex: 0 0 60px; flex: 0 0 60px; }
.timeDisplay { white-space: nowrap; }
.timeDisplay i { font-style: normal; }
.fullscreen { position: absolute; font-style: normal; left: 20px; bottom: 66px; display: block; width: 40px; height: 40px; text-align: center; cursor: pointer; -moz-transition: color 0.3s; -o-transition: color 0.3s; -webkit-transition: color 0.3s; transition: color 0.3s; }
.fullscreen:before { font-size: 30px; line-height: 40px; color: rgba(244, 209, 126, 0.2); }
.fullscreen:hover:before { color: rgba(244, 209, 126, 0.5); }
.ui-icon { font-size: 20px; vertical-align: middle; width: 20px; margin-right: 10px; cursor: pointer; }
/*********************
 * Progress
 *********************/
.progress, .volumeControl { background: rgba(0, 0, 0, 0.1); width: 100%; position: relative; height: 5px; cursor: pointer; overflow: hidden; border-radius: 2px; border: 0; }
.progress > * { position: absolute; top: 0; left: 0; height: 100%; }
.progress-time { background-color: black; }
.anim { -moz-transition: width 1000ms linear; -o-transition: width 1000ms linear; -webkit-transition: width 1000ms linear; transition: width 1000ms linear; }
.progress-buffer { background-color: rgba(0, 0, 0, 0.3); -moz-transition: width 250ms linear; -o-transition: width 250ms linear; -webkit-transition: width 250ms linear; transition: width 250ms linear; }
.volumeControl { width: 90%; overflow: visible; position: relative; background: rgba(0, 0, 0, 0.3); }
.volumeControl .ui-slider-handle { position: absolute; width: 9px; height: 9px; border: 0; top: -2px; background: transparent; }
.volumeControl .ui-slider-handle:after { content: ''; position: absolute; width: 100%; height: 100%; left: -50%; background: black; border-radius: 4px; }
.volumeControl .ui-slider-handle:focus { outline: none; }