/* Embedded Video */
video {
    width: 100%;
}

html {
    scroll-behavior: smooth;
}


.vs_wrapper {
    display: grid;
    grid-template-columns: repeat(3,100%);
    overflow:hidden;
    scroll-behavior: smooth;
    background-color: black;
}

.vs_section {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, auto);
    margin: 20px 0;
}

@media only screen and (max-width: 600px) {
    .vs_wrapper{
        grid-template-columns: repeat(1,100%);
    }
    .vs_section {
        grid-template-columns: repeat(1, auto);
        margin:0;
    }
}

.vs_item {
    position: relative;
    padding: 0 2px;
    transition: 250ms all;
}
.vs_item:hover { 
    /* margin: 0 40px; */
    transform: scale(1.1);
}


.vs_heading_text {
    position: absolute;
    top: 0;
    left: 20px;
    color: #fff;
    background: rgba(0,0,0,0.5);
}

.vs_text {
    position: absolute;
    top: 49px;
    left: 20px;
    color: #fff;
    background: rgba(0,0,0,0.5);
}


.vs_arrow_btn {
    position: absolute;
    color: #fff;
    text-decoration: none;
    font-size: 6em;
    background:rgb(0,0,0);
    width: 80px;
    padding: 20px;
    text-align: center;
    z-index: 1;
}

.vs_left-arrow {
    top:0; bottom:0; left:0;
    background: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

.vs_right-arrow {
    top:0; bottom:0; right: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

@media only screen and (max-width: 600px) {
    .vs_arrow_btn {
        display:none;
    }
}

.video_fullscreen {
 background-color: rgba(0, 0, 0, 0.9);
 position: fixed;
 height: 100vh;
 width: 100vw;
 top:58px;
 left:0;
 padding:12px;
}


.video_fullscreen video {
    max-height: calc(90vh - 58px);
}

.f_video_close {
 margin: auto;
 padding:8px 16px;
 color: white;
 float:right;
 border: 1px solid white;
 border-radius: 24px;
 text-align:center;
 width:auto;
 cursor: pointer;
}