.video { width:100%;  padding-top: 2vh;  display: flex; flex-wrap: wrap;  flex-direction:row;  align-items:flex-start;  justify-content:flex-start;  }
.video li{ width: calc(100%/3 - 20px ); margin:0px 20px 25px 0px;     background: #000;   box-shadow: 0 0 3px rgba(0,0,0,0.3); overflow: hidden;  position: relative; }
.video_ctrl{border: 1px solid #333;}
.video li:after{  content: "";  background: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: -30%;  bottom: 0;  right: 70%;  transform: skew(35deg) translateX(-50%); transition: all 0.35s ease 0s;}
.video li:hover:after{ transform: skew(20deg) translateX(0); }
.video li img{ width: 100%; height: auto; opacity: 0.3;transition: all 0.35s ease 0s;}
.video li:hover img{ opacity: 0.8; }
.video li .box-content{ position: absolute;  top: 20px; left:25%;  margin: auto; padding: 20px;z-index: 1; text-align: center;}
.video li .title{ font-size:1.25rem; line-height:1.5rem;   font-weight:500; color: #fff; margin: 0 0 10px 0; transform: scale(1);  transition: all 0.35s ease 0s;  text-shadow: 0px 2px 3px rgba(0,0,0,.5);  }
.video li:hover h3{ transform: scale(.99);  -webkit-background-clip: text;    }
.video li .post{ display: block; font-size: 14px; color: #fff;  margin:20px 0px 0px 0px; opacity:1; transition: all 0.35s ease 0s;}
.video li:hover .link{ opacity: 1; }
.video li .link{ display: block; margin: 5px auto;  width:50px; height: 50px; padding-top:1.5vh; opacity: 0;  border-radius:50em;  background: #FFFDFD ;transition: all 0.35s ease 0s;} 
@media only screen and (max-width:1024px){
  .video li{ width: calc(100%/3-10px ); margin:0px 10px 25px 0px;  }
.video li .box-content{   left:15%; top: 10px; }

}
@media only screen and (max-width: 768px) { 
  .video li{ width: calc(100%/2 - 20px );  }
	.video li .box-content{   left:5%;  }
	
}
@media only screen and (max-width:480px){
  .video li{ width: calc(100% - 15px );  }
}