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

.videopopupjs{
    background-color:rgba(0,0,0,0.75) !important;
    width:100% !important;
    height:100% !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2147483646 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:start !important;
    margin:0 !important;
    padding:0 !important;
    isolation:isolate !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{
    position:absolute;
    top:-36px;
    right:0;
    width:30px;
    height:30px;
    cursor:pointer;
    display:block;
    color:rgba(255, 255, 255, 0.85);
    z-index:2;
}
.videopopupjs__close:after{
    width:30px;
    height:30px;
    display:block;
    text-align:center;
    content:'X';
    font-family:'Verdana';
    border-radius:50%;
    background:#333;
    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{
    position:relative;
    margin:0 auto;
    width:92%;
    max-width:560px;
    height:auto;
    padding:0;
    box-sizing:border-box;
}
.videopopupjs__content iframe{
    display:block;
    width:100%;
    height:315px;
    max-height:50vh;
    aspect-ratio:16/9;
    background:#000;
    border:0;
    border-radius:4px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.videopopupjs__block--notfound{
    width:100%;
    height:200px;
    background-color:#fff;
    text-align:center;
    line-height:200px;
    font-family:'Arial';
    font-size:18px;
    border-radius:4px;
}
body.sl-video-popup-open{
    overflow:hidden !important;
}
@media(max-width: 768px){
    .videopopupjs__content{
        width:92% !important;
        max-width:92% !important;
    }
    .videopopupjs__content iframe{
        height:min(42vh, 220px);
    }
}
@-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; }
}