html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

h1 {
    font-size: 1.25em;
    color: #444;
    text-align: center;
    text-transform: uppercase;
 }

#video-container {
    position: relative;
    max-width: 40em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
    overflow: hidden;
 }

#video-container video {
    display: block;
    width: 100%;
    height: auto;
 }

#video-container iframe { 
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    right: 0;
    border: 0;
    background-color: #fff;

 }
#video-container iframe:nth-child( even ) { 
    right: -100%;
    animation: iframe 1s ease-in forwards;
 }

@keyframes iframe {
100% {
    right: 0;
  }
}

#display-image {
    position: absolute;
    top: 3%;
    left: -100%;
    border: 1px solid #fff;
    cursor: pointer;
    animation: image 1s ease-in forwards;
 }

@keyframes image {
100% {
    left: 2%;
  }
}

.hide {
    display: none;
 }

#content {
    max-width: 62.5em;
    padding: 2em;
    margin: 2em auto;
    border: 1px solid #999;
    border-radius: 0.75em;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 ),
            0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
    background-color: #fff;
 }