div#video-container {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        transition: all 1s ease-out;
    }
    div#video-container .greylayer {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background-color: #ffffffa6;
    }
    div#video-container video {
        position: relative;
        display: block;

        width: 100%;
        z-index: 2;

    }
    .vrame {
            position: relative;
            width: 31%;
            margin: 77px auto;
            display: block;
            
    }
    
    .vrame button.readmore {
        position: absolute;
        bottom: 0px;
        right: 0px;
        z-index: 100;
        border: none;
        color: #fff;
        background-color: #072655;
        padding: 4px 12px;
    }
    
    .vrame .vlose {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 100;
        border: none;
        background-color: #00000000;
        padding: 3px 10px;
        font-family: monospace;
        font-size: 20px;
    }   

@media only screen and (max-width: 1024px) and (orientation: portrait) {
    .vrame {
        position: relative;
        width: 80%;
        margin: 100px auto;
        display: block;
    }
    div#video-container .greylayer {
        background-color: #ffffffe0;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .vrame {
        position: relative;
        width: 50%;
        margin: 100px auto;
        display: block;
    }
    div#video-container .greylayer {
        background-color: #ffffffe0;
    }
}

@media only screen and (max-width: 480px) {
    .vrame {
        position: relative;
        width: 100%;
        margin: 50px auto;
        display: block;
    }
}