/**
 * @author Valentin Alisch, Nicolas Zupfer
 * @version 1.0
 *
 * Preloader
 */



/* Mobile */
#preloader {
	position: fixed;
	display: flex;
	align-items: center;
	padding: 10%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: black;
	z-index: 100000;
	transition: -webkit-transform 0.4s ease-in-out, -moz-transform 0.4s ease-in-out, transform 0.4s ease-in-out;

	-webkit-transform: translatex( -100% );
	-moz-transform: translatex( -100% );
	transform: translatex( -100% );
}
#preloader.onhold {
	-webkit-transform: translatex( 100% );
	-moz-transform: translatex( 100% );
	transform: translatex( 100% );
}
#preloader.active {
	-webkit-transform: translatex( 0 );
	-moz-transform: translatex( 0 );
	transform: translatex( 0 );
}
	#preloader.active ~ #page {
		-moz-transform: translateX( 100% );
		-webkit-transform: translateX( 100% );
		transform: translateX( 100% );
	}
	#preloader.active.onhold ~ #page {
		-moz-transform: translateX( -100% );
		-webkit-transform: translateX( -100% );
		transform: translateX( -100% );
	}

	#preloader .preloader--state {
		flex: 1;
		overflow: visible;
	}
		#preloader .preloader--state img {
			opacity: 0;
		}
			#preloader .preloader--state.active img {
				opacity: 1;
			}

#disrupt {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
	transform: translate( -50%, -50% );
	mix-blend-mode: difference;
	color: white;
	width: 100%;
	text-align: center;
	padding: 10%;

	font-size: 30px;
	line-height: 40px;
}

/* Tablet */
@media ( min-width: 900px ) {
	#disrupt {
		font-size: 45px;
		line-height: 60px;
	}
}

/* Desktop */
@media ( min-width: 1600px ) {
	#disrupt {
		font-size: 75px;
		line-height: 100px;
	}
}

/* Portrait */
@media ( orientation: portrait ) {
	#preloader {
		flex-direction: column-reverse;
		padding: 17% 10%;
	}

	@-moz-document url-prefix() {
		#preloader {
			flex-direction: row-reverse;
			writing-mode: vertical-lr;
		}
	}

		#preloader .preloader--state {
			max-height: 25%;
		}
			#preloader .preloader--state img {
				height: 138.5%;
				top: -19.25%;
				position: relative;
				width: auto;
			}
}

/* Landscape */
@media ( orientation: landscape ) {
	#preloader {
		padding: 10% 13.5%;
	}
		#preloader .preloader--state img { 
			width: 138.5%;
			left: -19.25%;
			position: relative;
		}
}