@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
  --vid-track-back: #111;
  --vid-track-front: #4768c4;
  --back-gradient: linear-gradient(to top, rgba(30,30,30,0.7) 0px, rgba(30,30,30,0.7) 21px, rgba(30,30,30,0.2) 22px, rgba(30,30,30,0.2) 100%);  
}

.vid {
  position: relative;
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

.vid-track {
  height: 8px;
  padding: 0px;
  background: var(--vid-track-back);
  margin: 0px 0px 0px 0px;
}

.vid-track-thumb {
  position: relative;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 100%;
  background: var(--vid-track-front);
}

.vid-video {
  display: flex;
  z-index: 0;
}

.vid-controls {
  left: 0px;
  top: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  opacity: 0.0;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

@media (hover: hover) {
  .vid-controls:hover {
    opacity: 1;
  }
}

.vid-controls-capture {
  opacity: 1;
}

.vid-controls-paused {
  opacity: 0.75;
}

.vid-play-button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  flex-grow: 1;
}

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e1e1e+0,1e1e1e+100&0.1+0,0.7+100 */

.vid-play-button-play {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAABBCAYAAABxVeynAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA65JREFUeNrcm9tLVFEUxvfA6aWo7CGQyIoo6MEgoqKn/tESpEzKLmaFXTC1UrO0TM1ulvfSLNNOaqlHp2/ht3Ejo46TZ2avs+DHKF7gY629bmefVBRFFcaY9+A8+GYSYAE4A46CJdAIXoI5zaJS8NQUPneDkKLKQSsYB4vaRYktgAHwFFTyc15j+KWd77cxFA+C/aAUNIHXmrwmnprEZ1GGn4lY+dkjUMazJl6NNIuyNsvs+BjcAi2+Cwuy+J3t4CQ4Ag4xPNvBB/BXq6fccJRU/4MhWcGQDH07b5sR5Zr8TTd44YRkWlP4ZbI94Bw4wUxZAtpAP4u4Sk+5tsD26iGzZCeY0S7K2jS9JV1JLZOJelHuebsLqkAPGKE3VYsyDL9h0AAu0WsLvieKjWwHOAb2gn0MSSneXflI/3F5anV9k47/DrjOPnI8zhKQD1HWpEgPgnpwkV6LNIVfJm/tAscZjsU8bzLavNXsqdUipbZVg8vMkr+2KiQLJcpN/9IY14FrDEk14bdeu3UWHAYHwAP2k580e8o1WRuMgpss3B8ZkouaRVkbYxg2cQLo1hZ+mayYlHJPIiH5CgxlOwH46KnVQ+kIPWaXrnOaRbkm6b+DE3cN6E2CKGujTP21PGtfkyBK7LdZXrhKSFYy/Ue+J4qNbCfbrSJOAnWcugc0i7JWwux4msVbQrJPJnCN4bdWu/UZ3JNGOTDJMGm3ToGfkhmTImqSofdcMqJ2UWkOnlU8U7J3DDWL+gKeOdmvX3P2s3WqhnWqV3udGnNCrYsdhoouPZONs/eTULvNWUvV6LFWly67jHfZdOk+ixplmN3nPDWY7TwVeHpuup3Jd9PLGJ9EzVOQ7CiuMKuFufwjX0R9Z5jJ6N7KPi5nK7QoucJg935Xc1my+CRqid6p5u6hhwKNJlGSnlP8eoK7BnlQEMsuPV+iUjz0QxQkD+I6jeKnHmmGmn0+1WFifj4Vt6gJ1ptGk8cniXGJmmF7I2LkAVu7yeMVuzhETTmhJil62OT5gtZWipqmRxq4AGkrVPHbClH2xosU0DImgoLeePlfUSFH6Rv0Up/x4G5SrqJke/PGLG9vZKxu8UFMLqLs0GY7ggp6J/RJ0GZFTfPc2MtU0oj+8XG6zEbULMfoJjagzUbxHdol1px6s3LbedIouO0crDOFNjLUmpmm1dxLD5yRwNacAYaaLAqfGOVvEIRsOsvNyrsekVFoAceCXtabBpOAt3IC9mjyKP+CScj7U/8EGADUJIOw8ZUk4QAAAABJRU5ErkJggg=='), var(--back-gradient);
  background-repeat: no-repeat;
  background-position: center center;
}

.vid-play-button-pause {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAABBCAYAAABxVeynAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNrs2jEKwCAMQNGkeP8rx/YCHWx1CO+Do4SH4mRWVXTrioZBQUH927jXl+cvF/Zsn+f6QUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUG99PyhzcMz00lBQUFB7WgKMADGugWFdrxTmAAAAABJRU5ErkJggg=='), var(--back-gradient);
  background-repeat: no-repeat;
  background-position: center center;
}

.vid-time {
  color: #eee;  
  margin: 0px 0px 0.2px 6.5px;      
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 100;
  user-select: none;
}