/*
    GitHub URL: https://github.com/gucastiliao/video-popup-js
*/

.videopopupjs { background-color: #000; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; text-align: start!important; }
.videopopupjs--hide { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: videoPopupJsHide; animation-name: videoPopupJsHide; }
.videopopupjs__close { float:right; width: 30px; height: 30px; cursor: pointer; display: block; margin:0px -20px 10px 0px;  color: rgba(255, 255, 255, 0.59); }
.videopopupjs__close:after { width: 30px; height: 30px; display: block; text-align: center; content: 'X'; font-family: 'Verdana'; border-radius: 50%; font-weight:bold; color:#fff; background: #2854a3; line-height: 2.2; font-size: 13px; }
.videopopupjs__close:hover { opacity: 0.5; }
.videopopupjs--animation { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: videoPopupJs; animation-name: videoPopupJs; }
.videopopupjs__content { margin: 0 auto; height: 100%; height: 500px; width: 100%; margin-top: 5%; }
.videopopupjs__content iframe { width: 100%; height: 100%; border:10px solid #fff;}
.videopopupjs__block--notfound { position: absolute; top: 0; bottom: 0; margin: auto 0; width: 100%; height: 500px; background-color: #fff; text-align: center; vertical-align: middle; line-height: 500px; font-family: 'Arial'; font-size: 20px; }

@media(max-width: 768px) {
.videopopupjs__content { max-width: 90%!important; }
}
@-webkit-keyframes videoPopupJs {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
 @keyframes videoPopupJs {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
 @-webkit-keyframes videoPopupJsHide {
 0% { opacity: 1;}
 100% { opacity: 0;}
}
 @keyframes videoPopupJsHide {
 0% { opacity: 1;}
 100% { opacity: 0;}
}