.single_video_overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 888;
	opacity: 0;
	visibility: hidden;
	will-change: all;
	backface-visibility: hidden;
	transition: all .3s ease-in-out;

	&.active {
		opacity: 1;
		visibility: visible;
		background: rgba(0,0,0,0.1);	
	}
}

.single_video_container {
	position: fixed;
	z-index: 9999; 
	opacity: 0;
	visibility: hidden; 
	transition: all .5s ease;

	width: 80%;
	height: 40%;
	bottom: 30%;
	right: 10%;	
	
	@include breakpoint(large) {
		width: 64%;
		height: 79%;
		bottom: 7%;
		right: 18%;
	}
	
	&.active {
		opacity: 1;
		visibility: visible;

		.close-icon {
	        opacity: 1;
	        @include transition-delay(0.3s); 

	        .close-icon_top {
	            @include transform(rotate(-45deg) translateX(0%));
	            @include transition-delay(0.5s);    
	        }
	        .close-icon_bottom {
	            @include transform(rotate(45deg) translateX(0%));
	            @include transition-delay(0.5s);          
	        }
		}
	}

	.youtube-video 	{
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		width: 100%; 
		@include box-shadow(5px 5px 80px 5px rgba(0, 0, 0, 0.15))
		
		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	&.stuck	{
		width: 175px;
		height: 100px; 
		bottom: rem-calc(20);
		right: rem-calc(20);

		@include breakpoint(medium)	{
			width: 250px;
			height: 142px; 
			right: rem-calc(24);
		}

		@include breakpoint(large) {
			width: 350px;
			height: 200px; 
			right: rem-calc(25);
		}

		.youtube-video 	{
			@include box-shadow(5px 5px 40px 5px rgba(0, 0, 0, 0.15))
		}
		
	  
	}



	.close-icon {

		position: absolute;
		top: -34px;
		left:auto;
		right: 0px;

		width: rem-calc(26);
		height: rem-calc(26);

		@include breakpoint(small only) {
			top: -24px;
			width: rem-calc(18);
			height: rem-calc(18);			
		}

		.close-icon_top {
			height: 2px;  
		}
		.close-icon_bottom {
			height: 2px;        
		}

	}
}