.card-video-media {
	.box-sizing();
	padding: 75px 0;
	background-color: @black;
	position: relative;

	&.active {

		figcaption {

			&:before {
				background-image: url('../images/svg/pause-white.svg');
			}
		}
	}
	
	figure {
		position: relative;
		padding-bottom: 56.25%; /*16:9*/
		height: 0;
		overflow: hidden;

		iframe,
		object,
		embed,
		video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	figcaption {
		.transition(opacity, 300ms, linear);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		color: @white;
		cursor: pointer;

		&:hover {

			&:before {
				background-color: rgba(0,0,0,0.75);
			}
		}

		&.playing {
			.opacity(0);
		}

		&:before {
			.transition(background-color, 100ms, linear);
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 20px;
			background-image: url('../images/svg/play-white.svg');
			z-index: 1;
			background-color: rgba(0,0,0,0.4);
		}
	}

	.tag {
		.font-size(10);
		line-height: 13px;
		height: auto;
		position: absolute;
		top: 20px;
		right: 20px;
		background-color: @red;
		color: @white;
		padding: 5px 10px;
		font-family: @suiss-int;
	}

	article {
		position: absolute;
		bottom: 0;
		left: 0px;
		right: 0px;
		height: 75px;
		z-index: 1;
		background-color: @black;
		color: @white;

		h4,
		time {
			z-index: 2;
		}

		h4 {
			.font-size(12);
			line-height: 18px;
			color: #989898;
			position: absolute;
			left: 20px;
			bottom: 20px;
			right: 70px;
			text-transform: uppercase;
			font-weight: 500;
			letter-spacing: 2px;

			span {
				.font-size(14);
				display: block;
				color: @white;
				text-transform: none;
			}
		}

		time {
			.font-size(12);
			position: absolute;
			bottom: 0;
			right: 0;
			background-color: @black;
			padding: 5px 15px;
			font-family: @suiss-int-mono;
			display: none;
		}
	}
}
