/* CSS-only parallax scrolling. html.parallax with body children .parallax-back and .parallax-front. Thanks http://keithclark.co.uk/articles/pure-css-parallax-websites/ */

html.parallax, html.parallax body {

	margin: 0;
	padding: 0;
	height: 100%;

}

.parallax-back {

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: red;

}

@supports (perspective: 1px) {	/* CSS Parallax is SUPPORTED */

	html.parallax body {

		position: absolute;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		perspective: 300px;
		perspective-origin: 100% 100%;

	}

	.parallax-front {

		transform-style: preserve-3d;
		transform: translateZ(0); /* Safari H/W acceleration */

	}

	.parallax-back {

		transform: translateZ(-150px) scale(1.5);
		transform-origin: 100% 100%;

	}

}
