/* ==========================================================================
   Vertical Split Slider shortcode style - begin
   ========================================================================== */

.eltdf-vss-initialized {
	
	.eltdf-content {
		
		.eltdf-content-inner {
			
			> .eltdf-container {
				
				> .eltdf-container-inner {
					padding: 0;
				}
			}
			
			> .eltdf-full-width {
				
				> .eltdf-full-width-inner {
					padding: 0;
				}
			}
		}
	}
}

.eltdf-vertical-split-slider {
	position: relative;
	opacity: 0;
	margin: 0 -2px;
	overflow: hidden;
	
	.eltdf-vss-ms-left,
	.eltdf-vss-ms-right {
		position: absolute;
		width: 50%;
		height: 100%;
		box-sizing: border-box;
	}

	.eltdf-vss-ms-left {
		top: 0;
		left: 0;
		
		.eltdf-vss-ms-section {
			background-position: 100% center;
			background-size: cover;
		}
	}

	.eltdf-vss-ms-right {
		top: 10000px;
		right: 0;
		
		.eltdf-vss-ms-section {
			background-position: 0 center;
			background-size: cover;
		}
	}
	
	.eltdf-vss-ms-section {
		
		&.ms-table{
			display: table;
			width: 100%;
			table-layout: fixed;
			box-sizing: border-box;
		}
		
		.ms-tableCell {
			display: table-cell;
			vertical-align: middle;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			@include eltdfTransition(padding .45s cubic-bezier(.4, 0, .2, 1));
		}
		
		.ms-easing {
			@include eltdfTransition(all 0.7s ease-out);
		}
	}
	
	&.eltdf-vss-scrolled {
		
		.eltdf-vss-ms-left {
			
			.eltdf-vss-ms-section {
				
				.ms-tableCell {
					padding: 7.5rem 0 7.5rem 7.5rem;
				}
			}
		}
		
		.eltdf-vss-ms-right {
			
			.eltdf-vss-ms-section {
				
				.ms-tableCell {
					padding: 7.5rem 7.5rem 7.5rem 0;
				}
			}
		}
		
		.eltdf-vss-horizontal-mask {
			
			&:before,
			&:after {
				@include eltdfTransform(scaleY(1));
			}
		}
		
		.eltdf-vss-vertical-mask {
			
			&:before,
			&:after {
				@include eltdfTransform(scaleX(1));
			}
		}
	}
	
	.eltdf-vss-horizontal-mask {
		
		&:before,
		&:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			background-color: #fff;
			height: 7.5rem;
			z-index: 500;
			@include eltdfTransform(scaleY(0));
			@include eltdfTransitionTransform(.45s cubic-bezier(.4, 0, .2, 1));
		}
		
		&:before {
			top: 0;
			-webkit-transform-origin: center top;
			-ms-transform-origin: center top;
			transform-origin: center top;
		}
		
		&:after {
			bottom: 0;
			-webkit-transform-origin: center bottom;
			-ms-transform-origin: center bottom;
			transform-origin: center bottom;
		}
	}
	
	.eltdf-vss-vertical-mask {
		
		&:before,
		&:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			background-color: #fff;
			width: 7.5rem;
			z-index: 500;
			@include eltdfTransform(scaleX(0));
			@include eltdfTransitionTransform(.45s cubic-bezier(.4, 0, .2, 1));
		}
		
		&:before {
			left: 0;
			-webkit-transform-origin: center left;
			-ms-transform-origin: center left;
			transform-origin: center left;
		}
		
		&:after {
			right: 0;
			-webkit-transform-origin: center right;
			-ms-transform-origin: center right;
			transform-origin: center right;
		}
	}
}

.eltdf-vss-responsive {
	display: none;
	
	.eltdf-vss-ms-section {
		background-position: center;
		background-size: cover;
	}
}

#multiscroll-nav {
	position: fixed;
	top: 50%;
	right: 37px;
	margin-top: -10px;
	opacity: 1;
	z-index: 1000;
	@include eltdfTransition(opacity .5s ease-out);
	
	.eltdf-fullscreen-menu-opened & {
		z-index: -1;
	}

	ul {
		margin: 0;
		padding: 0;

		li {
			position: relative;
			display: block;
			margin: 12px 3px;
            overflow: hidden;

			a {
				position: relative;
				display: block;
				width: 1px;
				height: 21px;
				padding: 0 5px;
				margin: 0 auto;
				z-index: 1;
				box-sizing: border-box;
				transition: all .2s ease;
				
				&.active {
					height: 38px;
					transition: all .2s ease;

					span {
						background-color: $default-heading-color;
					}
				}
				
				.eltdf-light-header & {
					border-color: $header-light-color;
					
					&.active {
						background-color: $header-light-color;
					}
				}
				
				.eltdf-dark-header & {
					border-color: $header-dark-color;
					
					&.active {
						background-color: $header-dark-color;
					}
				}
				
				span {
					display: block;
					position: absolute;
					top:0;
					left: 5px;
					height: 100%;
					width: 1px;
					background-color: $default-text-color;
				}
			}
		}
	}
}
/* ==========================================================================
   Vertical Split Slider shortcode style - end
   ========================================================================== */