@import "../../../../assets/scss/mixin";
.g5plus-video{
	text-align: center;
	a{
		display: inline-block;
		@include border-radius(50%);
		color: #FFF;
	}
	&.style1 a
	{
		width: 80px;
		height: 80px;
		display: inline-block;
		i{
			font-size: 45px;
			line-height: 80px;
			padding-left: 7px;
		}
	}
	&.style2 a
	{
		width: 60px;
		height: 60px;
		i{
			font-size: 30px;
			line-height: 60px;
			padding-left: 5px;
		}
	}
	a{
		background: rgba(255,255,255,0.2);
		-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
		-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
		transition: transform ease-out 0.1s, background 0.2s;
		&:after {
			top: 0;
			left: 0;
			padding: 0;
			z-index: -1;
			box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
			opacity: 0;
			-webkit-transform: scale(0.9);
			-moz-transform: scale(0.9);
			-ms-transform: scale(0.9);
			transform: scale(0.9);
			pointer-events: none;
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			content: '';
			-webkit-box-sizing: content-box;
			-moz-box-sizing: content-box;
			box-sizing: content-box;
		}
		&:hover{
			background: rgba(255,255,255,0.05);
			-webkit-transform: scale(0.93);
			-moz-transform: scale(0.93);
			-ms-transform: scale(0.93);
			transform: scale(0.93);
			color: var(--g5-color-accent);
			&:after {
				-webkit-animation: sonarEffect 1.3s ease-out 75ms;
				-moz-animation: sonarEffect 1.3s ease-out 75ms;
				animation: sonarEffect 1.3s ease-out 75ms;
			}
		}
	}
}
@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}
@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}