@-webkit-keyframes a {
	0% {
		-webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
		transform: translate(-50%, -50%) rotateX(0) rotateY(0);
	}
	
	50% {
		-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0);
		transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0);
	}
	
	to {
		-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg);
		transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg);
	}
}

@keyframes a {
	0% {
		-webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
		transform: translate(-50%, -50%) rotateX(0) rotateY(0);
	}
	
	50% {
		-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0);
		transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0);
	}
	
	to {
		-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg);
		transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg);
	}
}

.fluidbox {
	outline: none;
}

.fluidbox__overlay {
	background-color: hsla(0, 0%, 100%, .85);
	cursor: pointer;
	cursor: zoom-out;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: -100%;
	left: 0;
	bottom: -100%;
	right: 0;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.fluidbox--opened .fluidbox__overlay {
	pointer-events: auto;
}

.fluidbox__wrap {
	background-position: center center;
	background-size: cover;
	margin: 0 auto;
	position: relative;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.fluidbox--closed .fluidbox__thumb, .fluidbox__thumb {
	-webkit-transition: opacity 0s ease-in-out 0s;
	transition: opacity 0s ease-in-out 0s;
}

.fluidbox__ghost {
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	-webkit-transition: opacity 0s 0s, -webkit-transform .5s 0s;
	transition: opacity 0s 0s, -webkit-transform .5s 0s;
	transition: opacity 0s 0s, transform .5s 0s;
	transition: opacity 0s 0s, transform .5s 0s, -webkit-transform .5s 0s;
}

.fluidbox--opened .fluidbox__ghost {
	cursor: pointer;
	cursor: zoom-out;
}

.fluidbox--closed .fluidbox__ghost {
	-webkit-transition: opacity 0s .5s, -webkit-transform .5s 0s;
	transition: opacity 0s .5s, -webkit-transform .5s 0s;
	transition: opacity 0s .5s, transform .5s 0s;
	transition: opacity 0s .5s, transform .5s 0s, -webkit-transform .5s 0s;
}

.fluidbox__loader {
	opacity: 0;
	-webkit-perspective: 200px;
	perspective: 200px;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.fluidbox__loader:before {
	background-color: hsla(0, 0%, 100%, .85);
	content: "";
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20%;
	padding-bottom: 20%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.fluidbox--loading .fluidbox__loader {
	opacity: 1;
	-webkit-transition: opacity .5s ease-in-out .5s;
	transition: opacity .5s ease-in-out .5s;
}

.fluidbox--loading .fluidbox__loader:before {
	-webkit-animation: a 1s 0s infinite ease-in-out forwards;
	animation: a 1s 0s infinite ease-in-out forwards;
}