/* Responsive Video Embeds */
/* todo: consider .responsive-iframe-via-js
    (may be useful for multiple video popups on one page when alternating aspect ratios)
    */
.responsive-iframe {
}
.responsive-iframe .r-iframe-container {
    position: relative;
    padding: 0;
    width: 100%;
    /* DEFAULT aspect ratio: 16:9 */
    padding-top: calc(100% * 9/16);
    height: auto!important;
}
.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;

    /* For clean modal UX */
    opacity: 1;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}
.hide-iframe .responsive-iframe iframe {
    /* For clean modal UX (hide while iframe src reloads) */
    opacity: 0;
}
/* - ALT aspect ratio: 4:3 */
.responsive-iframe .r-iframe-container.aspect--4-3 {
    padding-top: calc(100% * 3/4);
}