/************/
/* Controls */
/************/
#control-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
  display: none; }

#player-container:hover #control-bar, .controls-show {
  bottom: 0;
  -webkit-animation: expandBottom .10s ease-out 1;
  -moz-animation: expandBottom .10s ease-out 1;
  animation: expandBottom .10s ease-out 1; }

.controls-hide {
  bottom: -52px !important;
  -webkit-animation: resetBottom .5s ease-in 1 !important;
  -moz-animation: resetBottom .5s ease-in 1 !important;
  animation: resetBottom .5s ease-in 1 !important; }

.overlay-show {
  cursor: default;
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  -webkit-animation: fadeIn 0.10s     ease-out 1;
  -moz-animation: fadeIn 0.10s     ease-out 1;
  animation: fadeIn 0.10s     ease-out 1;
  -webkit-animation: showCursor 0.10s ease-out 1;
  -moz-animation: showCursor 0.10s ease-out 1;
  animation: showCursor 0.10s ease-out 1; }

.overlay-hide {
  cursor: none;
  background: transparent;
  -webkit-animation: fadeOut .5s    ease-out 1;
  -moz-animation: fadeOut .5s    ease-out 1;
  animation: fadeOut .5s    ease-out 1;
  -webkit-animation: hideCursor .5s ease-out 1;
  -moz-animation: hideCursor .5s ease-out 1;
  animation: hideCursor .5s ease-out 1; }

#control-bar {
  width: 100%;
  height: 20px;
  background: #000;
  color: #FFF;
  position: relative;
  text-align: center;
  display: table;
  padding: 5px 10px;
  box-sizing: border-box;
  box-shadow: rgba(255, 255, 255, 0.12) 0px 26px 2px inset; }

@-webkit-keyframes expandBottom {
  0% {
    bottom: -52px; }
  100% {
    bottom: 0px; } }

@-moz-keyframes expandBottom {
  0% {
    bottom: -52px; }
  100% {
    bottom: 0px; } }

@keyframes expandBottom {
  0% {
    bottom: -52px; }
  100% {
    bottom: 0px; } }

@-webkit-keyframes resetBottom {
  0% {
    bottom: 0px; }
  100% {
    bottom: -52px; } }

@-moz-keyframes resetBottom {
  0% {
    bottom: 0px; }
  100% {
    bottom: -52px; } }

@keyframes resetBottom {
  0% {
    bottom: 0px; }
  100% {
    bottom: -52px; } }

@-webkit-keyframes hideCursor {
  0% {
    cursor: default; }
  100% {
    cursor: none; } }

@-moz-keyframes hideCursor {
  0% {
    cursor: default; }
  100% {
    cursor: none; } }

@keyframes hideCursor {
  0% {
    cursor: default; }
  100% {
    cursor: none; } }

@-webkit-keyframes showCursor {
  0% {
    cursor: none; }
  100% {
    cursor: default; } }

@-moz-keyframes showCursor {
  0% {
    cursor: none; }
  100% {
    cursor: default; } }

@keyframes showCursor {
  0% {
    cursor: none; }
  100% {
    cursor: default; } }

@-webkit-keyframes fadeIn {
  0% {
    background: transparent; }
  100% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); } }

@-moz-keyframes fadeIn {
  0% {
    background: transparent; }
  100% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); } }

@keyframes fadeIn {
  0% {
    background: transparent; }
  100% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); } }

@-webkit-keyframes fadeOut {
  0% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); }
  70% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); }
  100% {
    background: transparent; } }

@-moz-keyframes fadeOut {
  0% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); }
  70% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); }
  100% {
    background: transparent; } }

@keyframes fadeOut {
  0% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); }
  70% {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); }
  100% {
    background: transparent; } }

.controls {
  display: table-cell;
  vertical-align: middle;
  padding: 10px; }

.control-div {
  width: 20px;
  height: 20px;
  padding: 0; }

.control-button {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer; }

.fa {
  width: 20px; }

.range-label {
  color: #FFF; }

.controls-check {
  display: none; }

.control-range {
  overflow: hidden;
  background: transparent; }

.control-range::-webkit-slider-runnable-track {
  background-color: #000;
  border: 1px solid #333;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  -webkit-box-shadow: inset 0 0 10px #999;
  box-shadow: inset 0 0 10px #999; }

.control-range::-moz-range-track {
  background-color: #000;
  border: 1px solid #333;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden; }

.control-range::-ms-track {
  background-color: #000;
  border: 1px solid #333;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden; }

.control-range::-ms-fill-lower {
  background-color: #000;
  border: 1px solid #333;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden; }

.control-range::-ms-fill-upper {
  background-color: #000;
  border: 1px solid #333;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden; }

.control-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: #ff5722;
  height: 15px;
  width: 15px;
  cursor: pointer;
  -moz-border-radius: 10px;
  border-radius: 10px; }

input[type=range]:focus {
  outline: none; }

/**************/
/* Play/Pause */
/**************/
#play-label {
  display: table-cell; }

#pause-label {
  display: none; }

#play-pause-check:checked ~ #play-label {
  display: none; }

#play-pause-check:checked ~ #pause-label {
  display: table-cell; }

/**********/
/* Volume */
/**********/
#mute-label {
  display: table-cell; }

#unmute-label {
  display: none; }

#mute-check:checked ~ #mute-label {
  display: none; }

#mute-check:checked ~ #unmute-label {
  display: table-cell; }

#volume-bar {
  -webkit-appearance: none !important;
  -webkit-transform: translate3d(0px, 0px, 0px);
  margin: 0;
  padding: 0;
  width: 110px;
  writing-mode: bt-lr;
  -webkit-transform: rotate(270deg);
  position: absolute;
  left: -35px; }

.volume {
  width: 20px;
  padding: 0; }

.volume:hover .volume-range {
  display: block; }

div.volume-range {
  padding-bottom: 20px;
  position: absolute;
  display: none;
  bottom: 10px;
  left: 50px;
  height: 110px;
  transition: height 0.25s ease-out;
  padding: 10px;
  width: 20px; }

.firefox {
  bottom: 60px !important; }

#volume-bar::-moz-range-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  position: relative; }

#volume-bar::-ms-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  position: relative; }

/********/
/* Seek */
/********/
.time {
  color: #FFF;
  width: 25px;
  cursor: default;
  padding: 0 10px; }

#seek-bar {
  width: 100%;
  -webkit-appearance: none !important;
  -webkit-transform: translate3d(0px, 0px, 0px); }

.hide-pointer {
  display: none; }

#seek-pointer {
  width: 50px;
  position: absolute;
  bottom: 33px;
  left: 90px;
  border-radius: 5px;
  padding: 2px 0px;
  font-size: 0.75em;
  opacity: 0.6; }

#seek-bar::-moz-range-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  position: relative; }

#seek-bar::-ms-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  position: relative; }

/**************/
/* Fullscreen */
/**************/
#fullscreen-label {
  display: table-cell; }

#unfullscreen-label {
  display: none; }

#full-screen-check:checked ~ #fullscreen-label {
  display: none; }

#full-screen-check:checked ~ #unfullscreen-label {
  display: table-cell; }