figure#video-track-container { 
  font-size: 0; 
  position: relative; 
  background: #000; 
  margin: 0; 
  max-width: 1000px;
}
figure#video-track-container video { 
  width: 75%;
  height: auto;
  display: inline-block; 
  aspect-ratio: 887 / 512;
  max-width: 1000px;
}
figure#video-track-container figcaption { 
position: absolute;
    right: 0;
    top: 0;
    background: #222;
    width: 25%;
    font-size: 1rem;
    color: #999;
    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.watched { 
    background: #3d4551; 
    color: #dfe1e2;
}
figure#video-track-container figcaption ol li.watched a { color: #dfe1e2;}
figure#video-track-container figcaption ol li a { 
    display: block; 
    padding: .7rem 1rem; 
    border-bottom: 1px dashed #000; 
    transition: .3s;
    font-family: 'Merriweather', serif;
    color: #97d4ea;
    font-weight: 400;
}
.current { 
  background: #d9e8f6; 
  color: #000;  
}

figure#video-track-container figcaption ol li a.current:hover, 
figure#video-track-container figcaption ol li a.current:focus { 
  background: #d9e8f6; 
  color: #000; 
  cursor: pointer;
}
figure#video-track-container figcaption ol li a:not(.current):hover, 
figure#video-track-container figcaption ol li a:not(.current):focus { 
  background: #d9e8f6; 
  color: #000; 
  cursor: pointer;
}


figure#video-track-container figcaption ol li a small {
    clear: both;
    display: block;
    font-size: .75em;
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
    color: #fff;
    font-weight: 300;
} 

figure#video-track-container figcaption ol li.currentli a, 
figure#video-track-container figcaption ol li.currentli a small, 
figure#video-track-container figcaption ol li a:not(.current):hover small, 
figure#video-track-container figcaption ol li a:not(.current):focus small, 
figure#video-track-container figcaption ol li a:hover small {
        color: #000;
}
figure#video-track-container figcaption ol li a small::before {
    content:'';
    clear: both;
    display: block;
}
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;
  }
}