/*
  Fullscreen Video
   - Foundation 6 styles are embedded in the head of this doc
   - said Foundation 6 styles are completely unecessary for this to work
   - internet explorer (and it's lack of 'object-fit') essentially
     turns this from 6 lines of CSS into the monster below .. typical.
*/

.video-container {
    position: relative;
    min-height: 100vh;
    z-index: 0;
}

.flex-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 57.5%;
    z-index: -1;
}

.flex-video video {
    left: 50%;
    min-height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 
    the rules below are a replacement for 'object-fit'
    which is unavailable in all versions of IE
    .. the ':not' is to cover devices which arbitrarily
    update VH on scroll - see the JS
  */
}

@media (max-aspect-ratio: 1280 / 720) {
    .video-container:not(.fixed-device) .flex-video video {
        width: calc(100vh*1280/720);
        height: 100vh;
    }
}

@media (min-aspect-ratio: 1280 / 720) {
    .video-container:not(.fixed-device) .flex-video video {
        width: 100vw;
        height: calc(100vw*720/1280);
    }
}


/*
  Dummy Content
*/

.dummy-container-class {
    padding: 7.5%;
}

.dummy-container-class .flex-video {
    margin-bottom: 0;
}

.dummy-container-class .row {
    margin: 1em auto;
    padding: 1em;
}

.dummy-container-class .columns {
    overflow: hidden;
}

.dummy-container-class h1,
.dummy-container-class h2,
.dummy-container-class h3,
.dummy-container-class p {
    font-family: sans-serif;
    font-weight: 200;
    text-align: center;
    padding: 0.5em 1em;
    margin: 0 -1em;
}

.dummy-container-class.video-container .row {
    color: white;
    background: rgba(0, 0, 0, 0.5);
}

.dummy-container-class.video-container:last-of-type .row {
    position: absolute;
    bottom: 1em;
}

*::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
}