/*
    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{
        width:30px;
        height:30px;
        cursor:pointer;
        display:block;
        margin-bottom:10px;
        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%;
        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{
        margin:0 auto;
        height:100%;
        height:500px;
        width:100%;
        margin-top:5%;
    }
    .videopopupjs__content iframe{
        width:100%;
        height:100%;
    }
    .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;
        }
    }