@keyframes zoomBig {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
		border-width: 3px;
	}

	40% {
		opacity: .5;
		border-width: 2px;
	}

	65% {
		border-width: 1px;
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
		border-width: 0;
	}
}

.tm-popup-video {
	position: relative;

	.video-link {
		display: inline-block;

		&:hover {
			.video-play {
				transform: scale3d(1.15, 1.15, 1.15);
			}
		}
	}

	.video-text {
		margin-top: 28px;
	}

	.video-poster {
		position: relative;
	}

	.video-play {
		position: relative;
		transition: all 1s cubic-bezier(0, 0, .2, 1) !important;
		border-radius: 50%;
		color: #fff;

		&:hover {
			transform: scale3d(1.15, 1.15, 1.15);
		}
	}

	.video-play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		line-height: 1;
		margin-left: 1px;
		z-index: 2;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			transform: translate(-50%, -50%);
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 17px solid currentColor;
		}
	}

	.video-overlay {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	&.style-poster-01,
	&.style-poster-02 {
		.video-play {
			color: #fff;
		}

		.video-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&.poster-full-wide {
			.video-link {
				display: block;
			}

			.video-poster {
				img {
					width: 100%;
				}
			}
		}
	}

	&.style-poster-01 {
		.video-play {
			width: 70px;
			height: 70px;
			background: transparent;
			border: 6px solid #fff;
		}

		.video-play-icon {
			&:before {
				border-top-width: 13px;
				border-bottom-width: 13px;
				border-left-width: 20px;
			}
		}
	}

	&.style-poster-02 {
		.video-poster {
			box-shadow: 0 2px 20px rgba(0, 0, 0, .15);
			border-radius: 5px;
			overflow: hidden;
		}

		.video-play {
			width: 78px;
			height: 78px;
		}

		.video-play-icon {
			z-index: 9;

			&:before {
				border-top-width: 9px;
				border-bottom-width: 9px;
				border-left-width: 14px;
			}
		}

		.video-mark {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			pointer-events: none;
		}

		.wave-pulse {
			width: 1px;
			height: 0;
			margin: 0 auto;

			&:before,
			&:after {
				opacity: 0;
				content: '';
				display: block;
				position: absolute;
				width: 200px;
				height: 200px;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				border: 3px solid #ee7455;
				animation: zoomBig 3.25s linear infinite;
			}

			&:before {
				animation-delay: .75s;
			}
		}
	}

	&.style-button {
		line-height: 0;

		> a {
			display: inline-block;
			text-align: center;
		}

		.video-play {
			display: block;
			margin: 0 auto;
		}

		.video-text {
			line-height: 1.4;
		}

		.video-play {
			width: 90px;
			height: 90px;
		}

		.video-play-icon {
			&:before {
				border-top-width: 11px;
				border-bottom-width: 11px;
				border-left-width: 19px;
			}
		}
	}

	// button 02 + button-03
	&.group-button-style-01 {
		.video-content {
			display: flex;
			align-items: center;
		}

		.video-play-wrap {
			position: relative;
			width: 78px;
			height: 78px;
		}

		.video-play {
			width: 78px;
			height: 78px;
		}

		.video-play-icon {
			z-index: 9;

			&:before {
				border-top-width: 9px;
				border-bottom-width: 9px;
				border-left-width: 14px;
			}
		}

		.video-mark {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			pointer-events: none;
		}

		.wave-pulse {
			width: 1px;
			height: 0;
			margin: 0 auto;

			&:before,
			&:after {
				opacity: 0;
				content: '';
				display: block;
				position: absolute;
				width: 200px;
				height: 200px;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				border: 3px solid #ee7455;
				animation: zoomBig 3.25s linear infinite;
			}

			&:before {
				animation-delay: .75s;
			}
		}
	}

	&.style-button-02 {
		.video-text {
			margin-top: 0;
			margin-left: 59px;
			font-size: 18px;
			font-weight: 500;
			color: rgba(255, 255, 255, .8);
			text-transform: uppercase;
			letter-spacing: 2px;
			line-height: 1.45;
		}
	}

	&.style-button-03 {
		.video-text {
			margin-top: 0;
			margin-left: 35px;
			font-size: 18px;
			color: #fff;
			font-weight: 600;
			line-height: 1.78;
		}

		.video-play {
			background: #fff;
		}

		.wave-pulse {
			&:before,
			&:after {
				border-color: #fff;
			}
		}
	}

	&.style-button-04 {
		.video-content {
			display: flex;
			align-items: center;
		}

		.video-text {
			margin-top: 0;
			margin-left: 10px;
			font-size: 14px;
			font-weight: 600;
			color: #fff;
		}

		.video-play {
			width: 34px;
			height: 34px;
			border: 1px solid #fff;
			background: none;
		}

		.video-play-icon {
			line-height: 0;

			&:before {
				display: none;
			}

			i {
				font-size: 10px;
			}
		}
	}

	&.style-button-05 {
		.video-content {
			display: flex;
			align-items: center;
		}

		.video-play {
			width: 78px;
			height: 78px;
		}

		.video-play-icon {
			z-index: 9;

			&:before {
				border-top-width: 9px;
				border-bottom-width: 9px;
				border-left-width: 14px;
			}
		}

		.video-play-wrap {
			padding: 13px;
			border: 3px solid rgba(8, 106, 216, .4);
			border-radius: 50%;
		}

		.video-text {
			margin-top: 0;
			margin-left: 23px;
			font-size: 18px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 2px;
			line-height: 1.45;
			color: rgba(255, 255, 255, .8);
		}
	}
}