*{
 margin:0;
 padding:0;
 -webkit-text-size-adjust:none;
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 outline:none;
 font-family:'Roboto', Arial, Helvetica, sans-serif;
}
html{
 height:100%;
}
body{font-family:'Cuprum','sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;background-color:#14141a;font-size:14px;color:#FFF;-moz-text-shadow: 1px 1px 0 #000;-webkit-text-shadow: 1px 1px 0 #000;text-shadow: 1px 1px 0 #000;min-height: 100%;min-width: 320px;}

.video-info {
 bottom: 5%;
 width: 100%;
 position: absolute;
 z-index: 12;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row wrap;
 justify-content: space-around;
 font-weight: bold;
}
.channel-info{
 top: 1px;
 width: 100%;
 position: absolute;
 z-index: 12;
 font-weight: bold;
}
.video-info span {
 flex-grow: 1;
 text-align: center;
 margin: 0px 1px 0px 1px;
 font-size: large;
}
.video-info a, .channel-info a {
 display: block;
 position: relative;
 width: 100%;
 height: 100%;
 line-height: 30px;
 text-align: center;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 font-size: 14px;
 color: #ffffff;
 text-decoration:none;
 background: rgba(0, 0, 0, 0.6);
}
.video-info a:hover, .channel-info a:hover{
 color: #FFF;
 text-decoration:none;
 background: rgba(0, 0, 0, 0.9);
}

/* related videos in player */
.player-related-videos {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 padding: 5px 10px 30px 10px;
 background: rgba(0, 0, 0, 0.31);
 overflow: hidden;
}
.player-related-videos .player-related-videos-container {
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
 text-align: center;
}
.player-related-videos .player-related-videos-item {
 position: relative;
 display: inline-block;
 vertical-align: middle;
 margin-top: 5px;
}
.player-related-videos .player-related-videos-item .title {
 display: none;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 height: 52px;
 overflow: hidden;
 text-align: left;
 padding: 5px;
 color: #ffffff;
 background: -moz-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0px, rgba(12, 12, 12, 0.8)), color-stop(50px, transparent));
 background: -webkit-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
 background: -o-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
 background: -ms-linear-gradient(top, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
 background: linear-gradient(to bottom, rgba(12, 12, 12, 0.8) 0px, transparent 50px);
}
.player-related-videos .player-related-videos-item .duration {
 display: none;
 position: absolute;
 bottom: 5px;
 right: 5px;
 color: #ffffff;
 background: rgba(12, 12, 12, 0.8);
 padding: 2px 5px;
}
.player-related-videos .player-related-videos-item:hover .title,
.player-related-videos .player-related-videos-item:hover .duration {
 display: block;
}
}

@media screen and (min-width: 1200px){
 .video-info{
  bottom: 4.5%;
 }
}
@media screen and (max-width: 1200px){
    .video-info{
     bottom: 5.5%;
    }
}
@media screen and (max-width: 800px) {
 .video-info {
  bottom: 8%;
 }
}
 @media screen and (max-width: 550px){
  .video-info{
   bottom: 10%;
  }
  .video-info a {
   font-size: 12px;
   line-height: 20px;
  }
}
@media screen and (max-width: 320px){
 .video-info{
  bottom: 15%;
 }
}