/* ==========================================================================
   Full Screen Image Slider shortcode style - begin
   ========================================================================== */

.eltdf-full-screen-image-slider {
	@include eltdfRelativeHolderLayout();
	opacity: 0;
	
	&.eltdf-fsis-is-init {
		opacity: 1;
	}
	
	&.eltdf-fsis-active {
		
		.eltdf-fsis-slider {
			
			.owl-nav {
				
				.owl-prev {
					left: -100px;
				}
				
				.owl-next {
					right: -100px;
				}
			}
			
			.owl-dots {
				bottom: -30px;
			}
		}
		
		.eltdf-fsis-prev-nav {
			left: -100px;
		}
		
		.eltdf-fsis-next-nav {
			right: -100px;
		}
	}
	
	.eltdf-fsis-slider {
		@include eltdfRelativeHolderLayout();
		height: 100vh;
		z-index: inherit;
		
		.admin-bar & {
			height: calc(100vh - 32px);
		}
		
		.owl-stage-outer {
			overflow: visible;
		}
		
		.owl-nav {
			
			.owl-prev,
			.owl-next {
				width: 40px;
				text-align: center;
				@include eltdfTransition(left .4s ease, right .4s ease);
			}
			
			.owl-prev {
				left: 25px;
				
				&:hover {
					left: 15px;
				}
			}
			
			.owl-next {
				right: 25px;
				
				&:hover {
					right: 15px;
				}
			}
		}
		
		.owl-dots {
			position: absolute;
			left: 0;
			bottom: calc(8% - 14px);
			width: 100%;
			margin: 0;
			counter-reset: section;
			z-index: 3;
			@include eltdfTransition(bottom .4s ease);
			
			.owl-dot {
				margin: 0 14px;
				color: $default-text-color;
				font-size: 16px;
				line-height: 28px;
				font-weight: 500;
				
				&:hover,
				&.active {
					color: $default-heading-color;
				}
				
				span {
					display: none;
				}
				
				&:after {
					counter-increment: section;
					content: '0' counter(section);
				}
			}
		}
	}
	
	.eltdf-fsis-thumb-nav {
		position: absolute;
		top: 20%;
		height: 60%;
		width: 100px;
		display: block;
		z-index: 1;
		background-position: 20% 20%;
	}
	
	.eltdf-fsis-prev-nav {
		left: 0;
		@include eltdfTransition(background .3s ease, left .4s ease);
	}
	
	.eltdf-fsis-next-nav {
		right: 0;
		@include eltdfTransition(background .3s ease, right .4s ease);
	}
	
	.eltdf-fsis-slider-mask {
		@include eltdfAbsoluteHolderLayout();
		z-index: -1;
		
		&.eltdf-drag {
			z-index: 2;
		}
	}
	
	.eltdf-fsis-item {
		@include eltdfRelativeHolderLayout();
		height: 100vh;
		overflow: hidden;
		
		.admin-bar & {
			height: calc(100vh - 32px);
		}
		
		&.eltdf-fsis-content-image-init {
			
			.eltdf-fsis-image-top {
				top: -2%;
			}
			
			.eltdf-fsis-image-left {
				left: 9%;
			}
			
			.eltdf-fsis-image-right {
				right: 14%;
			}
			
			.eltdf-fsis-title,
			.eltdf-fsis-subtitle {
				top: 0;
				opacity: 1;
			}
		}
		
		&.eltdf-fsis-image-hover {
			
			.eltdf-fsis-image-top {
				top: calc(-2% - 10px);
				left: calc(28% - 20px);
			}
			
			.eltdf-fsis-image-left {
				bottom: calc(2% - 20px);
				left: calc(9% - 10px);
			}
			
			.eltdf-fsis-image-right {
				bottom: calc(7% - 20px);
				right: calc(14% - 10px);
			}
			
			.eltdf-fsis-frame-top,
			.eltdf-fsis-frame-bottom {
				height: 18%;
			}
			
			.eltdf-fsis-frame-left,
			.eltdf-fsis-frame-right {
				width: 18%;
			}
		}
		
		&.eltdf-fsis-active-image {
			
			.eltdf-fsis-image-top {
				top: calc(-2% - 25px);
				left: calc(28% - 50px);
			}
			
			.eltdf-fsis-image-left {
				bottom: calc(2% - 50px);
				left: calc(9% - 25px);
			}
			
			.eltdf-fsis-image-right {
				bottom: calc(7% - 50px);
				right: calc(14% - 25px);
			}
			
			.eltdf-fsis-frame-top,
			.eltdf-fsis-frame-bottom {
				height: 0;
			}
			
			.eltdf-fsis-frame-left,
			.eltdf-fsis-frame-right {
				width: 0;
			}
		}
	}
	
	.eltdf-fsis-image-wrapper {
		@include eltdfTableLayout();
	}
	
	.eltdf-fsis-image-inner {
		@include eltdfTableCellLayout();
		text-align: center;
	}
	
	.eltdf-fsis-image {
		@include eltdfAbsoluteHolderLayout();
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
	}
	
	.eltdf-fsis-content-image {
		position: absolute;
		
		img {
			width: auto;
			max-width: 600px;
		}
	}
	
	.eltdf-fsis-image-top {
		top: -50%;
		left: 28%;
		@include eltdfTransform(rotate(-23deg));
		@include eltdfTransition(top .8s ease, left .8s ease);
	}
	
	.eltdf-fsis-image-left {
		bottom: 2%;
		left: -50%;
		@include eltdfTransform(rotate(-10.5deg));
		@include eltdfTransition(bottom .8s ease, left .8s ease);
	}
	
	.eltdf-fsis-image-right {
		bottom: 7%;
		right: -50%;
		@include eltdfTransform(rotate(-12deg));
		@include eltdfTransition(bottom .8s ease, right .8s ease);
	}
	
	.eltdf-fsis-title {
		position: relative;
		top: 15px;
		margin: 0;
		padding: 0 12%;
		line-height: 1.2em;
		color: #fff;
		opacity: 0;
		box-sizing: border-box;
		@include eltdfTransition(opacity .2s ease-in, top .3s ease-in);
	}
	
	.eltdf-fsis-subtitle {
		position: relative;
		top: 25px;
		margin: 20px 0 0;
		padding: 0 14%;
		color: #fff;
		opacity: 0;
		box-sizing: border-box;
		@include eltdfTransition(opacity .2s ease-in, top .3s ease-in);
	}
	
	.eltdf-fsis-frame {
		position: fixed;
		background-color: #fff;
		@include eltdfTransition(all .6s ease);
	}
	
	.eltdf-fsis-frame-top {
		top: 0;
		left: 0;
		width: 100%;
		height: 20%;
	}
	
	.eltdf-fsis-frame-bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 20%;
	}
	
	.eltdf-fsis-frame-left {
		top: 0;
		left: 0;
		width: 20%;
		height: 100%;
	}
	
	.eltdf-fsis-frame-right {
		top: 0;
		right: 0;
		width: 20%;
		height: 100%;
	}
}
/* ==========================================================================
   Full Screen Image Slider shortcode style - end
   ========================================================================== */