/******************* PLAYER *********************/

.player {
  position:relative;
  margin:auto;
  background:#151A1F;
  box-shadow:1px 1px 5px rgba(0,0,0,.5);
  width:1280px;
  height:720px;
  padding:10px;
}
.player > div {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
}
.player video {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transition:opacity .25s;
  opacity:1;
}

/******************* TITLE *********************/

.player .title {
  position:absolute;
  left:0;
  right:0;
  top:0;
  text-align:left;
  padding:20px;
  background:linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,0));
  opacity:1;
  transition:opacity .5s;
}
.player .title h1 {
  font-size:18px;
  line-height:20px;
  padding:0;
  margin:0;
  font-weight:normal;
  color:#fff;
  margin:0;
  padding:0;
}
.player .title a {
  position:absolute;
  top:20px;
  right:20px;
  color:#fff;
  text-decoration:dotted;
}

/******************* CONTROLS *********************/

.player .mute svg g {
  fill:#fff;
  stroke:#fff
}
.player .mute:hover svg g {
  fill:#e7271e;
  stroke:#e7271e
}

.player .controls {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:40px;
  padding:0 5px;
  background:rgba(13,34,63,0.7);
  opacity:1;
  transition:opacity .5s;
}
.player .controls .progress {
  position:absolute;
  top:0;
  left:40px;
  bottom:0;
  right:215px;
}
.player .controls .volume {
  position:relative;
  display:inline-block;
  height:40px;
  width:75px;
}
.player .controls .bar {
  position:absolute;
  top:18px;
  bottom:17px;
  left:8px;
  right:8px;
  border-radius:5px;
  background:#000;
  pointer-events:none;
}
.player .controls .bar > div {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  background:#e7271e;
  border-radius:5px;
}
.player .controls .bar > div:after {
  position:absolute;
  right:-4px;
  top:-4px;
  width:13px;
  height:13px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 0 3px rgba(0,0,0,.5);
  content:""
}
.player .controls .volume:hover .bar > div:after,
.player .controls .progress:hover .bar > div:after {
  background:#e7271e;
}

.player .controls .time {
  color:#fff;
  display:inline-block;
  float:right;
  line-height:40px;
  font-size:13px;
  padding:0 10px;
  min-width:75px;
}
.player .controls .time span {
  color:#999;
}
.player .controls .icon {
  position:relative;
  display:inline-block;
  width:19px;
  height:19px;
  color:#fff;
}
.player .controls > .icon {
  margin:11px 6px;
}
.player .controls .icon:before {
  width:19px;
  height:19px;
  line-height:19px;
  font-size:17px;
}
.player .controls .icon:hover {
  color:#e7271e;
}
.player .controls .pause,
.player .controls .play {
  float:left;
}

.player .controls .pause,
.player .controls .icon-settings-gear,
.player .controls .icon-view-full-screen-exit {
  display:none;
}

.player .controls .rates {
  position:absolute;
  top:-105px;
  right:-10px;
  text-align:right;
  margin:0;
  padding:10px 10px 0 10px;
  background:rgba(13,34,63,0.7);
  list-style:none;
}
.player .controls .rates li {
  position:relative;
  display:block;
  line-height:20px;
  padding:0 0 0 40px;
  cursor:pointer;
  margin:1px 0;
  font-size:13px;
  color:#fff
}
.player .controls .rates li:hover,        
.player .controls .rates li:hover .icon:before {
  color:#e7271e
}
.player .controls .rates li .icon {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:20px;
}
.player .controls .rates li .icon:before {
  font-size:10px;
} 

.player > div > .play {
  position:absolute;
  width:100px;
  height:100px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  opacity:.75;
  pointer-events:none;
}
.player > div:hover > .play {
  opacity:1;
}
.player .loader {
  position:absolute;
  width:100px;
  height:100px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  pointer-events:none;
  transition:opacity .25s;opacity:0;
}
.player.loading .loader {
  opacity:1;
}
.player.loading video {
  opacity:.25
}

.player .controls .time,
.player .controls .mute,
.player .controls .volume,
.player .controls .icon-settings-gear,
.player .controls .icon-view-full-screen,
.player .controls .icon-view-full-screen-exit {
  float:right;
}

.player.settings .icon-settings-gear {
  display:block
}
.player.novolume .volume {
  display:none;
}
.player.nofullscreen .icon-view-full-screen,
.player.nofullscreen .icon-view-full-screen-exit {
  display:none;
}

.player > div:-moz-full-screen {
  width:100% !important;
}
.player > div:-webkit-full-screen {
  width:100% !important;
}
.player > div:-ms-fullscreen {
  width:100% !important;
}
.player > div:fullscreen {
  width:100% !important;
}

.player.playing .controls .play  {display:none;}
.player.playing .controls .pause {display:block;}

.player.loading > div > .play,
.player.playing > div > .play    {display:none;}

.player.inactive.playing:not(.moving) .controls,
.player.inactive.playing:not(.moving) .title {opacity:0;}

/******************* WEBKIT *********************/

:-moz-full-screen .icon-view-full-screen {display:none !important}
:-webkit-full-screen .icon-view-full-screen {display:none !important}
:-ms-fullscreen      .icon-view-full-screen {display:none !important}
:fullscreen          .icon-view-full-screen {display:none !important}

:-moz-full-screen    .icon-view-full-screen-exit {display:block !important}
:-webkit-full-screen .icon-view-full-screen-exit {display:block !important}
:-ms-fullscreen      .icon-view-full-screen-exit {display:block !important}
:fullscreen          .icon-view-full-screen-exit {display:block !important}

.player .controls {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}