.video-box{
position:relative;
}
.video-box .image{
position:relative;
overflow:hidden;
}
.video-box .image img{
position:relative;
width:100%;
}
.video-box .overlay-box{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
text-align:center;
overflow:hidden;
line-height: 80px;
background:rgba(68,57,120,0.08);
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.video-box .overlay-box:hover{
background:rgba(68,57,120,0.20);
}
.video-box .overlay-box span{
position: relative;
width:80px;
height: 80px;
top: 45%;
z-index:99;
color: #222222;
font-weight:400;
font-size:24px;
text-align: center;
border-radius:50%;
padding-left:4px;
background-color: #ffffff;
display: inline-block;
margin-top: -40px;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.video-box .overlay-box span:after{
width: 100%;
height: 100%;
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation-delay: .6s;
animation-delay: .6s;
content: "";
position: absolute;
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
-webkit-animation: ripple 3s infinite;
animation: ripple 3s infinite;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.video-box .overlay-box:hover span{
transform: rotate(360deg);
-moz-transition:rotate(360deg);
-webkit-transition:rotate(360deg);
-ms-transition:rotate(360deg);
-o-transition:rotate(360deg);
}