/* CSS Document */

/* ==============================   VIDEO POPUP   =============================== */
#theBackground { position:absolute; position:fixed; left:0px; top:0px; background:#000000; opacity:0; width:100vw; height:100vh; z-index:10000; display:none; }

#theScreen { min-height:0 !important; position:fixed; left:0px; background:#FFFFFF; width:2px; height:2px; text-align:center; z-index:10001; display:none; padding:30px; box-sizing: border-box; }
#theScreen { display:flex; justify-content:center; align-items:center; text-align:center; }
#theScreen video { max-width:100%; max-height:100%; margin:0 auto; }

#theContent { display:flex; line-height:0; max-height:100%; max-width:100%; width:100%; height:100%; align-items:center; }
#theContent iframe { width:100%; height:100%; }
#closeScreen { width:60px; font-size:10px; float:right; position:absolute; top:0px; right:0px; clear:none; text-transform:uppercase; z-index:10001; padding:6px 10px; cursor:pointer; background:none; border:none; }
#closeScreen:hover { color:#000000; }

@media screen and (max-width: 500px) {
#theScreen { padding:7px; }
}
/* ============================== END VIDEO POPUP =============================== */

div.video-thumb { position:relative; background:#ccc; }
div.video-thumb > div { padding-bottom:65%; height:0; background-size:cover; background-position:center; }
div.video-thumb a { width:100%; height:100%; display:flex; align-items:center; position:absolute; top:0; left:0; font-size:4em; color:#fff; opacity:.7; text-decoration:none; }
div.video-thumb a i { margin:0 auto; text-shadow:0 1px 9px rgba(0,0,0,.7); }