/* ====================================================== 
   <!-- Video -->
/* ====================================================== */
/* Embedded directly in the webpage or embedded via a slider */
.uix-video,
.uix-video__slider {
	visibility: hidden;
	
}


/* Display cover and play buttons when some mobile device browsers cannot automatically play video */
.uix-video__cover {

	.uix-video__cover__placeholder {
		position: absolute;
		z-index: 5;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
		background-attachment: scroll;
		@include background-cover();	
	}

	.uix-video__cover__playbtn {
		display: none;
		position: absolute;
		z-index: 11;
		left: 50%;
		top: 50%;
		width: 64px;
		height: 64px;
		line-height: 64px;
		margin-left: -32px;
		margin-top: -32px;
		border: 3px solid #fff;
		border-radius: 50%;
		text-shadow: 1px 0 3px rgba(0,0,0,.3);

		
		&::before {
			display: inline-block;
			content: "\f04b";
			font-family: 'Font Awesome 5 Free';
			font-weight: 600;
			color: #fff;
			cursor: pointer;
			font-size: 1.5rem;
			margin: 15px;
			line-height: 1;
			margin-left: 1.3rem;
		}	
		
		
		
	}
	
	
}


.uix-video__slider {
	visibility: visible;
}

/* Video play button */
.uix-video__btn-play {
	display: none;
	position: absolute;
	z-index: 11;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	line-height: 44px;
	margin-left: -22px;
	margin-top: -22px;
	font-size: 3rem;
	text-shadow: 1px 0 3px rgba(0,0,0,.3);


	&::before {
		display: inline-block;
		content: "\f021";
		font-family: 'Font Awesome 5 Free';
		font-weight: 600;
		color: #fff;
		cursor: pointer;
	}

}	
[data-video-iframe] {
	display: none;
}


/* External container for video background. */

.uix-video__container-bg {
	position: relative;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}


@media all and (max-width: 768px) {
	
	.uix-video__container-bg {
		height: auto;
	}
	
}


/* Override the default button for videojs */
.video-js .vjs-big-play-button {
	position: absolute;
	z-index: 11;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	line-height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	border: 3px solid #fff;
	border-radius: 50%;
	text-shadow: 1px 0 3px rgba(0,0,0,.3);


	&::before {
		display: inline-block;
		content: "\f04b";
		font-family: 'Font Awesome 5 Free';
		font-weight: 600;
		color: #fff;
		cursor: pointer;
		font-size: 1.5rem;
		margin: 15px;
		line-height: 1;
		margin-left: 1.3rem;
	    transform: translateY(-3px);
	}	
	
	
	.vjs-icon-placeholder,
	.vjs-control-text {
		display: none;
	}
}