/*temp.css*/

.video-thumbnail {
	position: relative;
	float: right;
	cursor: pointer;
}

.video-thumbnail:before {
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	content: "\f04b";
	font-family: FontAwesome;
	font-size: 100px;
	color: #fff;
	opacity: .8;
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.video-thumbnail:hover:before {
	color: #eee;
}

.vidDemo, #zoomText  {
	display: flex;
	width: 70%;
	height: 15%;
	background: rgba(255, 255, 255, 0.8);
	position: relative;
	top: 55%;
	margin: 0 auto;
	text-align: center;
	font-size: 2.5vh;

	justify-content: center;
	align-items: center;
}

#zoomText {
	top: -45%;
}

.vidDemo .wrapper a, #zoomText .wrapper a{
	margin: 0 6px;
}

@media (max-width: 575.98px) { 
	.vidDemo, #zoomText  {
		width: 80%;
		height: 30%;
		top: 55%;
	}

	#zoomText {
		top: -45%;
	}

	.vidDemo .wrapper, #zoomText .wrapper {
		font-size: 2.4vw;
		display: flex;
		flex-flow: row wrap;
		align-items: baseline;
		padding: 6px;
		justify-content: center;
	}

	.vidDemo .wrapper a, #zoomText .wrapper  a{
		font-size: 3vw;
		padding: 4px;
		margin: 0 6px;
	}
}

@media (max-width: 850px) { 
	.vidDemo, #zoomText  {
		height: 25%;
	}
}