.video-grid-item-box{
    width: 100%;
    height: auto;
    display: flex;
    margin: 3% auto;
    flex-wrap: wrap;
    justify-content: center;
}
.video-grid-item-boxB{
    width: 100%;
    height: auto;
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.video-grid-item{
    width: 20%;
    position: relative;
    display: inline-block;
    background: rgba(225,225,225,0.5);
    margin: 1%;
    padding: 1%;
    border-radius: 2%;
}
.video-grid-itemB{
    width: 60%;
    position: relative;
    display: block;
    margin: 0 auto;
}
.video-grid-itemBs{
    width: 13.3%;
    position: relative;
    display: inline-block;
    background: rgba(225,225,225,0.5);
    margin: 0 0.2%;
    padding: 0.7%;
}

.video-grid-text-block{
    position: relative;
    background-color: #2c2422;
    padding: 30px 0;
    border-left: 1px solid #332E2E;
    border-right: 1px solid #332E2E;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    text-align: center;
    width: 100%;
    font-size: 1em;
}
.video-grid-title {
    margin-bottom: 20px;
    color: #FFFFFF;
    text-transform: uppercase;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    letter-spacing: 2px;
}

.video-grid-title:before {
    content: "";
    position: absolute;
    border-bottom: 1px solid #413937;
    top: 50%;
    width: 80%;
    left: 10%;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.video-grid-location{
    color: #b88f68;
    font-size: 95%;
    letter-spacing: 2px;
}
.video-grid-thumb{
    overflow: hidden;
    width: 100%;
}
.video-grid-thumb a {
 display: block;
 height: auto;
 overflow: hidden;
 position: relative;
 transition: all 0.3s ease 0s;
 width: 100%;
} 
.video-grid-thumb img {
 display: block;
 width: 100%;
 height: auto;
 overflow: hidden;
 position: relative;
 transition: all 0.3s ease 0s; 
}
.video-grid-thumb:before, .video-grid-thumb:after {
 content: "";
 /*width: 32.9vw;
 height: 18.6vw;*/
 width: 100%;
 height: 75%;
 left: 0;
 opacity: 0;
 position: absolute;
 top: 0;
 transition: opacity 0.4s ease 0s;
 visibility: hidden;
}

@media screen and  (min-width: 1920px) {
    .video-grid-item-box {margin: 4% auto;}
}
@media screen and (min-width: 1690px) {
    .video-grid-thumb:before, .video-grid-thumb:after {    
         width: 100%;
         height: 76%;
        }
}
@media screen and (max-width: 1024px) {
    .video-grid-itemB {width: 78.5%;}
    .video-grid-itemBs {width: 18%;}
}
@media screen and (max-width: 768px) {
    .video-grid-itemB {width: 79%;}
    .video-grid-itemBs {width: 38%;}
    .video-grid-item {width: 35%;}
}
@media screen and (max-width: 736px) {
    .video-grid-item {
        width: 50%;
        position: relative;
        display: inline-block;
        background-color: #433936;
    }
    .video-grid-thumb:before, .video-grid-thumb:after {
        display: none;
    }
    .video-grid-itemB {width: 68%;}
    .video-grid-itemBs {width: 15.3%;}
    .video-grid-itemBs p{display: none;}
}

@media screen and (max-width: 667px) {
    .video-grid-text-block {
        position: relative;
        background-color: #2c2422;
        padding: 30px 0;
        border-left: 1px solid #332E2E;
        border-right: 1px solid #332E2E;
        transition: all 0.3s;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        text-align: center;
        width: 100%;
        font-size: 0.9em;
    }
}
@media screen and (max-width: 420px) {
    .video-grid-item {
        width: 100%;
        position: relative;
        display: inline-block;
        background-color: #433936;
    }
}

@media screen and (max-width: 414px) {
    .video-grid-itemB {
        width: 90%;
        margin: 0 auto;
    }
    .video-grid-itemBs {width: 43.5%;}
}