* { 
  box-sizing: border-box;
  font-family: Avenir, Helvetica, sans-serif;
}
body { margin: 0; }
figure#video-track-container { 
  font-size: 0; 
  position: relative; 
  background: #000; 
  margin: 0; 
}
figure#video-track-container video { 
  width: 75%;
  height: auto;
  display: inline-block; 
}
figure#video-track-container figcaption { 
  position: absolute; 
  right: 0; top: 0;
  background: #222; 
  width: 25%; 
  font-size: .8rem; 
  color: #666; 
  height: 100%; 
  overflow-y: scroll; 
  -moz-scrollbars-vertical;
}
figure#video-track-container figcaption ol { 
  position: relative;
  list-style-type: none;
  margin: 0; 
  padding: 0; 
}
figure#video-track-container figcaption ol li a { 
  display: block; 
  padding: .7rem 1rem; 
  border-bottom: 1px dashed #000; 
  transition: .3s;
}
.current { 
  background: hsl(117,80%,63%); 
  color: #000;  
}
figure#video-track-container figcaption ol li a:not(.current):hover, 
figure#video-track-container figcaption ol li a:not(.current):focus { 
  background: hsl(117,80%,30%); 
  color: #000; 
  cursor: pointer;
}
figure#video-track-container figcaption::-webkit-scrollbar {
    width: 13px;
    height: 100%;
}
figure#video-track-container figcaption::-webkit-scrollbar-track {
    background-color: #000; 
}
figure#video-track-container figcaption::-webkit-scrollbar-thumb:vertical {
    background: hsl(45,80%,20%);
    width: 13px;
    height: 20px;
}

@media screen and (max-width: 500px) {
  figure#video-track-container video, 
  figure#video-track-container figcaption { 
    display: block; 
    width: 100%;
}
  figure#video-track-container video { 
    border-bottom: 10px solid #111;
}
figure#video-track-container figcaption { 
  position: static; 
  height: 200px;
  }
}