.video { width:98%;  margin:0 5px 0 20px; padding-top: 5vh;  display: flex; flex-wrap: wrap;  flex-direction:row;  align-items:flex-start;  justify-content:flex-start;  }
.video li{ width: calc(100%/3 - 14px ); margin:0px 20px 25px 0px;     background: #000;   box-shadow: 0 0 3px rgba(0,0,0,0.3); overflow: hidden;  position: relative; }
.video li:nth-child(3n+3) {margin:0px 0px 25px 0px; }
.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;  left:0; top: 35%;  width:100%;  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); opacity: 0; }
/*.video li:hover .title{opacity: 1;}	  */
.video li:hover h3{ transform: scale(.99);  -webkit-background-clip: text;}
.video li .post{ font-size: 14px; color: #fff;  margin:20px 0px 0px 0px; opacity:1; transition: all 0.35s ease 0s;opacity: 0;}
.video li:hover .post{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;} 
.video li:hover .link{ opacity: 1; }

@media only screen and (max-width:1280px){
  .video li { width: calc(100%/3-14px ); margin:0px 14px 25px 0px;  }
	.video li .box-content{   left:0; top: 15%;}
}

@media only screen and (max-width:1024px){
  .video li { width: calc(100%/3-7px ); margin:0px 10px 25px 0px;  }
	.video li .box-content{   left:0; top: 7%;}
	.video li .post{opacity: 1;}
	.video li .link{opacity: 0!important;}
}

@media only screen and (max-width: 768px) { 
  .video li { width: calc(100%/2 - 17px );  }
	.video li .box-content{   left:0; top: 13%;}
	.video li .post{opacity: 1;}
	.video li .link{opacity: 0!important;}
}

@media only screen and (max-width:480px){
  .video li { width: calc(100% - 32px );  }
  .video li .box-content{   left:0; top: 22%;}
	.video li .post{opacity: 1;}
	.video li .link{opacity: 0!important;}
}