#mList {
    max-width: 295px;
    margin: auto;
  }
   @media screen and (orientation: landscape) and (min-width: 801px) {
  
  #mList {
    max-width: 600px;
  }
  }
  
  /* EOF demo */
  #mList A {
    line-height: 350px !important;
    color: #FFF;
    font-weight: bold;
    text-align: center;
  }
  
  #mList A {
    margin: 10px;
    width: 100%;
    height: 350px;
    line-height: 155px; /* match height */
    color: #FFF;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 0px solid #000;
    display: inline-table;
    background-color: #000;
  }
  
  /* media list title overlay */
  
  
  #mList A DIV {
    visibility: visible;
    background: rgba(0, 0, 0, 0.04);}
  
  /* On hover actions */
  #mList  :hover{
    /* background-color: rgba(0, 0, 0, 0.43); */
  }
  
  #mList A:hover DIV { 
    /* visibility: hidden;  */
    background-color: rgba(0, 0, 0, 0.43);
  }
  #mList A DIV{
    transition-duration: 0.5s,0.2s;
  transition-timing-function: ease-in;
  transition-delay: 0.2s,0.2s;
  }
  
  #mList A:hover {
     /* border: 1px solid #F00; */
     }
  
  /* === popup media player === */
  
  /* background overlay */
  
  #mPlayer {
    display: none;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 20;
    left: 0;
    top: 0;
  }
  
  /* video player */
  
  #mPlayer DIV {
    position: fixed;
    background: #000;
    width: 560px; /* width of YouTube Player */
    height: 315px; /* height of YouTube Player */
    left: calc(50vw - 280px); /* 280 is .5(560), centers x axis*/
    top: calc(50vh - 157px); /* 157 is .5(315), centers y axis*/
  }
/* video style start */
.video-video-box-button-sm button {
  color: #222;
  font-size: 20px;
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding-top: 2.5px;
  padding-left: 8.5px;
  margin: 30px;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  cursor: pointer;
}
.video-video-box-button-sm {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
.video-video-box {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.blog-grid img {
  border-radius: 5px;
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.blog-grid:hover img {
  transform: translateY(-2.5px);
  -webkit-box-shadow: 0 20px 30px rgba(0,0,0,.1);
  -moz-box-shadow: 0 20px 30px rgba(0,0,0,.1);
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
}
.video-img-center{
  display: flex;
justify-content: center;
align-items: center;
}
.video-video-box-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
}