/* local CSS extensions */

.caption {
    font-size: 75%;
    color: #303030;
    margin-top: 0;
    margin-bottom: 2em;
}

/* responsive YouTube video container

Thanks to
https://jonsuh.com/blog/responsive-youtube-vimeo-embed-and-html5-video-with-css/

For 4:3 aspect use 

    padding-bottom: 67.5%;

but our YouTube videos seem to be natively widescreen.

*/

.js-video {
    height: 0;
    padding-top: 25px;
    padding-bottom: 56.34%;  /* 16:9 aspect  */
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.js-video.widescreen {
    padding-bottom: 56.34%;
}

.js-video.vimeo {
  padding-top: 0;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}