.overlay {
        width: 100%;
        background: rgba(0,0,0,.75);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 99999;
    display: none;
    }

    .videoBox {
        position: fixed;
        width: 50%;
        left: 50%;
        top:50%;
        transform: translateY(-50%) translateX(-50%);
        padding: 0;
        background: transparent;
        text-align: center;
        border-radius: 0;
        z-index: 99999999;
        display: none;
    }


    .videoBox img {
        width: 100%;
    }

    .close {
        width: 36px;
        height: 36px;
        position: absolute;
        background: #151515;
        top: 0px;
        right: -36px;
        display: block;
        opacity: 1;
        cursor: pointer;
        transition: all 500ms ease;
    }
    .close:after{
        content: "\f00d";
        font-family: "Font Awesome\ 6 Pro";
        font-size: 18px;
        line-height: 36px;
        color: #fff;
    }

    .close:hover {
        background: var(--theme-secondary);
    }

    @media (min-width: 767px) {
        .videoBox {
            width: 36%;
        }
    }

    @media (max-width: 767px) {
        .videoBox {
            width: 90%;
        }
        
        .close {
            width: 36px;
            height: 36px;
            position: absolute;
            background: #151515;
            top: -36px;
            right: 0px;
            display: block;
            opacity: 1;
            cursor: pointer;
            transition: all 500ms ease;
        }
    }