.responsive-video,
.featured-picture {position: relative; margin: 0 0 1em 0;}



.responsive-video video {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  height: auto; }
  

/*.no-videoautoplay {
background: url(../video/poster.jpg) 50% 50% no-repeat;
background-size: cover;
}*/




/* NB: See css in doc head - animation not starting until 800px screen size */
.video-strapline {
opacity: 0; 
width: 100%; 
position: absolute;
top: 50%;
z-index: 20;
color: white;
text-align: center;
font-size: 2.5em;
font-family: 'Josefin Sans', 'Open sans', Arial, Helvetica, sans-serif;
font-weight: 200;
}


.video-agency-link,
.picture-agency-link {
width: 100%; 
position: absolute;
left: 0;
bottom: 1.2em;
opacity: 0;
cursor: pointer; 
background-color: #189595;
background-color: rgba(17, 128, 128, .8);
}

/* 31.25em = 500px (@ 16px font height )
@media only screen and (min-width : 31.25em) {
    
    .video-agency-link,
    .picture-agency-link {
        width: 80%; 
        left: 10%;
        bottom: 3em;
    }

} */

/* 50em = 800px (@ 16px font height ) */
@media only screen and (min-width : 50em) {
    
    .video-agency-link,
    .picture-agency-link {
            width: 60%; 
            left: 20%;
            bottom: 7em;
    }  
}

/* 64em = 1024px (@ 16px font height ) */
@media only screen and (min-width : 64em) {
    
    .video-agency-link,
    .picture-agency-link {
            width: 50%; 
            left: 25%;
            bottom: 8em;
    }   
}


.video-agency-link p,
.picture-agency-link p {text-align: center;} 

.video-agency-link a,
.picture-agency-link a {
padding: 1.5em;
display: block;
color: #fff;
font-size: 18px;
line-height: 20px;
}

/* 50em = 800px (@ 16px font height ) */
@media only screen and (min-width : 50em) {
    
/* .video-agency-link a,
.picture-agency-link a {
padding: .75em;
}  
} */

.video-agency-link span:nth-of-type(2),
.picture-agency-link span:nth-of-type(2) {
font-weight: bold;
}

}


/* 50em = 800px (@ 16px font height ) */
@media only screen and (min-width : 50em) {
    
    .video-strapline {font-size: 3em; font-weight: 300;}   
}



/* 64em = 1024px (@ 16px font height ) */
@media only screen and (min-width : 64em) {
    
    .video-strapline {font-size: 4em;}   
}

cite {padding: 3.5em 0 0 0;
      font-size: 12px;
}

/* 50em = 800px (@ 16px font height ) */
@media only screen and (min-width : 50em) {
    
    cite {padding: 0;
      font-size: 14px;
    }

}