/* ==========================================================================
   Single Image shortcode style - begin
   ========================================================================== */

.eltdf-single-image-holder {
    @include eltdfRelativeHolderLayout();

	&.eltdf-has-shadow {

		.eltdf-si-inner {
			box-shadow: $default-box-shadow;
		}
	}
	
	.eltdf-si-inner {
		@include eltdfRelativeHolderLayout();
		
		a, img {
			position: relative;
			display: block;
		}
	}
	
	/***** Custom Link Behavior Style - begin *****/
	
	&.eltdf-image-behavior-custom-link {
		
		.eltdf-si-inner {
			
			a {
				@include eltdfImageOverlayHoverStyle();
			}
		}
	}
	
	/***** Custom Link Behavior Style - end *****/

	/**** White Overlay ****/

	&.eltdf-image-behavior-white-overlay {
		.eltdf-si-inner {
			@include eltdfImageOverlayHoverStyle();
		}
	}
	
	/***** Lightbox Behavior Style - begin *****/
	
	&.eltdf-image-behavior-lightbox {
		
		.eltdf-si-inner {
			
			a {
				@include eltdfImageOverlayHoverStyle();
			}
		}
	}
	
	/***** Lightbox Behavior Style - end *****/
	
	/***** Zoom Behavior Style - begin *****/
	
	&.eltdf-image-behavior-zoom {
		
		.eltdf-si-inner {
			overflow: hidden;
			
			.touchevents & {
				cursor: pointer;
			}
			
			&:hover {
				
				img {
					@include eltdfTransform(scale(1.04));
				}
			}
			
			img {
				@include eltdfTransform(scale(1));
				@include eltdfTransitionTransform(.3s ease-in-out);
			}
		}
	}
	
	/***** Zoom Behavior Style - end *****/
	
	/***** Grayscale Behavior Style - begin *****/
	
	&.eltdf-image-behavior-grayscale {
		
		.eltdf-si-inner {
			overflow: hidden;
			
			.touchevents & {
				cursor: pointer;
			}
			
			&:hover {
				
				img {
					-webkit-filter: grayscale(0);
					filter: none;
				}
			}
			
			img {
				filter: url('img/desaturate.svg#grayscale');
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				filter: gray;
				filter: grayscale(100%);
				@include eltdfTransition(all .3s ease-in-out);
			}
		}
	}
	
	/***** Grayscale Behavior Style - end *****/
	
	/***** Moving Behavior Style - begin *****/
	
	&.eltdf-image-behavior-moving {
		
		.eltdf-si-inner {
			overflow: hidden;
			padding: 10% 0;
			background-repeat: no-repeat;
			background-position: 0 center;
			background-size: 120%;
			@include eltdfTransition(background .7s ease-out);
			
			&:hover {
				background-position: 90% center;
			}
			
			.touchevents & {
				cursor: pointer;
			}
			
			img {
				z-index: -1;
				max-width: 80%;
			}
			
			@include ipad-landscape {
				padding: 0;
				background: none;
				
				img {
					z-index: inherit;
					max-width: 100%;
				}
			}
		}
	}
	
	/***** Moving Behavior Style - end *****/
}
/* ==========================================================================
   Single Image shortcode style - end
   ========================================================================== */