/*
 * video-popup.scss
 * -----------------------------------------------
*/
.nivo-lightbox-theme-default .nivo-lightbox-close {
	background-position: 0 0;
	width: 32px;
	height: 32px;
}

/* Individual effect = play-video-button */
.tm-sc-video-popup {
	display: block;
	.hover-link {
		z-index: 14;
	}
	.thumb {
		@include scale(1);
	}

	&:hover .thumb {
		@include scale(1);
	}

	/* Text Holder */
	.text-holder {
		opacity: 1;
	}
	.text-holder-middle {
		top: 50%;
		margin-top: -36px;
		@include scale(1);
	}
	&:hover .text-holder-middle {
		top: 50%;
		@include scale(1.07);
	}
	.video-button-text {
	}
	.video-button {
		z-index: 11;
		position: absolute;
		top: 50%;
		left: 50%;
		background: rgba(255, 255, 255, 0.8);
		width: 60px;
		height: 60px;
		border-radius: 100%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		box-shadow: 0 0 1px 15px rgba(60,201,81,.4), 0 0 1px 30px rgba(60,201,81,.1), 0 0 1px 45px rgba(60,201,81,.1);
		@include transition(all 0.4s ease);
		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 10px solid #666;
			-webkit-transform: translate(-15%, -50%);
			transform: translate(-15%, -50%);
			@include transition(all 0.4s ease);
		}
	}
	&:hover .video-button {
		background: rgba(255, 51, 51, 0.9);
		width: 80px;
		height: 80px;
		box-shadow: 1px 1px 20px rgba(0, 0, 0, .3);
		&:before {
			border-left: 10px solid #fff;
		}
	}

	&.tm-sc-video-popup-button-with-text-right {
		display: inline-block;
		.effect-wrapper {
		}
		.thumb {
			img {
			}
			margin-right: 10px;
		}
		.video-button-text {
			line-height: 70px;
		}
		&:hover {
			.thumb {
				@include scale(0.95);
			}
		}
	}

	&.tm-sc-video-popup-css-button {
		display: inline-block;
		.animated-css-play-button {
			position: relative;
			width: 80px;
			height: 80px;
			border-radius: 100%;
			background-color: #ff3333;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
			opacity: 1;
			margin: 40px;
			color: #fff;
			font-size: 16px;

			&:before {
				content: ' ';
				display: block;
				position: absolute;
				border-radius: 100%;
				background-color: #ff3333;
				z-index: -1;
				opacity: .6;
				width: 110px;
				height: 110px
			}
			&:after {
				content: ' ';
				display: block;
				position: absolute;
				border-radius: 100%;
				background-color: #ff3333;
				z-index: -1;
				animation: video-play-button-animate 1.2s ease-in infinite forwards
			}
			i {
				font-size: 30px;
				color: #fff;
			}
		}
	}
	.effect-wrapper {
		.video-button-holder {
			opacity: 0.8;
			top: 40%;
		}
	}
}
@keyframes video-play-button-animate {
	0% {
		width:70px;
		height:70px;
		opacity:.8
	}
	100% {
		width:160px;
		height:160px;
		opacity:0
	}
}