
/*Video Box*/

.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);
}