.js-video {
  position: relative;
width:100%;
  margin: 0 auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/*********************
 * Elements inside js-video
 *********************/
video {
  max-width: 100%;
  max-height: 70vh;
  background-size: cover;
  background-position: center center;
}

.js-video button {
  -moz-appearance: none;
  -webkit-appearance: none;
}

/*********************
 * UI
 *********************/
.playPause.ui-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 0;
  display: block;
  width: auto;
  bottom: 56px;
}
.playPause.ui-icon b, .playPause.ui-icon em{
  position: absolute;
  top: 50%;
  left: 50%;
}
/*
.playPause.ui-icon em{
  content: '';
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
}*/
.playPause.ui-icon b {
  font-size: 40px;
  line-height: 80px;
  color: rgba(244, 209, 126, 0.5);
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -14px;
}
.playPause.ui-icon.fa-play b, .playPause.ui-icon.fa-undo b{background: url(data:image/png;base64,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) no-repeat;width: 50px;height: 50px;background-size: cover;margin-left: -25px;margin-top: -25px;}
.playPause.ui-icon.fa-pause b, .playPause.ui-icon.fa-undo b{
  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;
position: relative;
}

/*********************
 * 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;
}