// Variable 
$transition-duration: .25s;
$overlay-bg-color: rgba(255,255,255,.85);
$animation-bg-color: $overlay-bg-color;

// Animation
@-webkit-keyframes fluidboxLoading {
	0%		{ -webkit-transform: translate(-50%, -50%) rotateX(0)		rotateY(0);			}
	50%		{ -webkit-transform: translate(-50%, -50%) rotateX(-180deg)	rotateY(0);			}
	100%	{ -webkit-transform: translate(-50%, -50%) rotateX(-180deg)	rotateY(-180deg);	}
}
@keyframes fluidboxLoading {
	0%		{ transform: translate(-50%, -50%) rotateX(0)		rotateY(0);			}
	50%		{ transform: translate(-50%, -50%) rotateX(-180deg)	rotateY(0);			}
	100%	{ transform: translate(-50%, -50%) rotateX(-180deg)	rotateY(-180deg);	}
}

// Rules
.fluidbox {
	outline: none;
}
.fluidbox-overlay {
	background-color: $overlay-bg-color;
	cursor: pointer;
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	/* Transition time for overlay is halved to ensure that flickering doesn't happen */
	transition: all $transition-duration/2 ease-in-out $transition-duration/2;
}
.fluidbox-wrap {
	background-position: center center;
	background-size: cover;
	margin: 0 auto;
	position: relative;
	transition: all $transition-duration ease-in-out;

	/* To prevent flickering, we delay the showing of the image */
	.fluidbox-closed & img { transition: opacity 0s ease-in-out $transition-duration; }
}
.fluidbox-ghost {
	background-size: 100% 100%;
	background-position: center center;	
	position: absolute;
	-webkit-transition-property: opacity, -webkit-transform;
	-moz-transition-property: opacity, -moz-transform;
	-o-transition-property: opacity, -o-transform;
	transition-property: opacity, transform;
	transition-duration: 0s, $transition-duration;
	transition-delay: $transition-duration, 0s;

	.fluidbox-opened & { transition-delay: 0s, 0s; }
}
.fluidbox-loader {
	perspective: 200px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	&::before {
		/* You can replace this with any color you want, or even a loading gif if desired */
		background-color: $animation-bg-color;
		content: '';
		transform-style: preserve-3d;
		transition: all $transition-duration ease-in-out;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20%;
		padding-bottom: 20%;
	}
}

.fluidbox-loading .fluidbox-loader::before {
	-webkit-animation: fluidboxLoading 1s 0s infinite ease-in-out forwards;
	animation: fluidboxLoading 1s 0s infinite ease-in-out forwards;
	opacity: 1;
}