@disappear-duration: 1s;

.shiftingtiles {
	height: 900px;
	width: 1440px;
	overflow: hidden;

	.image {
		background-size: cover;
		background-image: /* to be filled in */;
	}

	& > .loading {
		display: none;
		position: absolute;
		line-height: 1080px;
		text-align: center;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background: black;
		color: white;
	}

	& > .row {
		position: relative;
		width: 200%;
		height: 50%;
		margin: 0 0;

		.single, .dual {
			background: white;
			float: left;
			height: 100%;
			box-sizing: border-box;
			border: 2px solid white;
		}
		.single { 
			width: 20%; 
			.image();
			-webkit-transform-origin: 0 100%;
		}
		.dual { 
			width: 10%;
			-webkit-transform-origin: 0 50%;
			> div {
				width: 100%;
				height: 50%;
				box-sizing: border-box;
				border: solid white;
				border-width: 3px 0 0 0;
				.image();
			}
			> div:first-child {
				border-top: 0;
			}
		}

		&:not(:first-child) {
			margin-left: -100%;
			
			.single, .dual {
				float: right;
			}
			.single { -webkit-transform-origin: 100% 0; }
			.dual { -webkit-transform-origin: 100% 50%; }
		}
	}
}

.single.disappear {
	-webkit-animation: disappear-single @disappear-duration;
	-webkit-transform-origin: 100% 0;
	-webkit-animation-fill-mode:forwards;
}
.dual.disappear {
	-webkit-animation: disappear-dual @disappear-duration;
	-webkit-transform-origin: 0 50%;
	-webkit-animation-fill-mode:forwards;
}
.dual.disappear + *, .single.disappear + * {
	-webkit-animation: bounce (@disappear-duration/2);
	-webkit-animation-delay: (@disappear-duration/2s);
}
.dual.disappear + * + *, .single.disappear + * + * {
	-webkit-animation: bounce (@disappear-duration/2);
	-webkit-animation-delay: (@disappear-duration/2 + .05s);
}
.dual.disappear + * + * + *, .single.disappear + * + * + * {
	-webkit-animation: bounce (@disappear-duration/2);
	-webkit-animation-delay: (@disappear-duration/2 + .1s);
}


.shiftingtiles.leave .row {
	-webkit-animation: leave-r 1s;
	-webkit-animation-fill-mode: forwards;
	
	&:first-child {
		-webkit-animation: leave-l 1.5s;
	}
}
.shiftingtiles.left .row {
	> * {
		display: none;
	}
}

.disappear-frames(@origwidth) {
	0%   { -webkit-transform: scale(1); }
	20%  { width: @origwidth; -webkit-transform: scale(.01); }
	50%  { -webkit-transform: scale(0); width: 0%; }
	100% { -webkit-transform: scale(0); width: 0%; border-width: 0; }
}
.bounce {
	0%  { margin: 0; }
	20% { margin: 0 15px; }
	40% { margin: 0; }
	70% { margin: 0 10px; }
	90% { margin: 0; }
	94% { margin: 0 5px; }
	100% { margin: 0; }
}
.leave(@dir) {
	0% { -webkit-transform: translate3d(0, 0, 0); }
	99% { -webkit-transform: translate3d((@dir * 1920px), 0, 0); display: block; }
	100% { -webkit-transform: translate3d((@dir * 1920px), 0, 0); display: none; }
}

@-webkit-keyframes disappear-single {.disappear-frames(20%); }
@-moz-keyframes disappear-single {.disappear-frames(20%); }
@-ms-keyframes disappear-single {.disappear-frames(20%); }
@-o-keyframes disappear-single {.disappear-frames(20%); }
@keyframes disappear-single {.disappear-frames(20%); }

@-webkit-keyframes disappear-dual {.disappear-frames(10%);}
@-moz-keyframes disappear-dual {.disappear-frames(10%);}
@-ms-keyframes disappear-dual {.disappear-frames(10%);}
@-o-keyframes disappear-dual {.disappear-frames(10%);}
@keyframes disappear-dual {.disappear-frames(10%);}

@-webkit-keyframes bounce {.bounce;}
@-moz-keyframes bounce {.bounce;}
@-ms-keyframes bounce {.bounce;}
@-o-keyframes bounce {.bounce;}
@keyframes bounce {.bounce;}

@-webkit-keyframes leave-l {.leave(1);}
@-moz-keyframes leave-l {.leave(1);}
@-ms-keyframes leave-l {.leave(1);}
@-o-keyframes leave-l {.leave(1);}
@keyframes leave-l {.leave(1);}
@-webkit-keyframes leave-r {.leave(-1);}
@-moz-keyframes leave-r {.leave(-1);}
@-ms-keyframes leave-r {.leave(-1);}
@-o-keyframes leave-r {.leave(-1);}
@keyframes leave-r {.leave(-1);}