.video { width:98%; max-width:1360px;  margin:5% auto; 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 - 20px ); margin:0px 20px 25px 0px;     background: #000;   box-shadow: 0 0 3px rgba(0,0,0,0.3); overflow: hidden;  position: relative; transition: all 0.3s;}
.video li:before{content: "";background: repeating-radial-gradient(circle farthest-side at top right, #b7a055 0%, #d4c28b 10%); width: 100%; height: 100%; opacity: 0;  position: absolute;  top: 0;  left: 0;  z-index: 1; transition: all 0.3s ease 0s;}
.video li:hover:before{ opacity: 0.8; }
.video li img{ width: 100%; height: 100%; transition: all 0.3s ease 0s;}
.video li:hover img{ transform: scale(1.1,1.1); }
.video li .box-content{ text-align: center; opacity: 0; filter: blur(5px); position: absolute; bottom: -25px;  left: -25px; z-index: 1; transition: all 0.3s ease 0s;}
.video li:hover .box-content{ opacity: 1; filter: blur(0); left: 20px; bottom: 10px;}
.video li .title{ color: #fff; background-color: rgba(0,0,0,0.6); font-size: 22px; font-weight: 700;  text-transform: uppercase;  padding: 25px 20px; margin: 0;}
.video li .post{ color:#a99e73; background-color: #fff; font-size: 16px;  font-style: italic; text-align: center;  text-transform: capitalize;  letter-spacing: 1px;  padding: 3px 7px;  box-shadow: 0 0 5px -2px #fff; display: inline-block; transform: translateY(-15px);}
.video li .icon{ text-align: center; padding: 0;  margin: 0; list-style: none; position: absolute; top: -100px;  right: -100px; z-index:  2;  transition: all 0.3s;}
.video li:hover .icon{ top: 10px; right: 10px;}
.video li .icon li{ display: inline-block; }
.video li .icon li a{ color:#6b2fbf; background-color: #fff; font-size: 18px;  line-height: 40px; width: 80px; height: 80px; margin: 0 3px; border: 1px solid #fff; border-radius: 50%; display: block;  transition: all 0.3s ease 0s;}
.video li .icon li a:hover{  color: #fff; background-color: transparent; box-shadow: 0 0 15px #fff;  border: none; transform: rotate(360deg);}
 @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 );  }
}