header {
	position: absolute;
	z-index: 100;
}

/* Parallax base styles
  --------------------------------------------- 
Based on demo at http://keithclark.co.uk/articles/pure-css-parallax-websites/  
*/


.parallax {
	height: 500px; /* fallback for older browsers */
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-perspective: 300px;
	perspective: 300px;
	scroll-behavior: smooth;
}

.parallax__group {
	position: relative;
	height: 500px; /* fallback for older browsers */
	height: 100vh;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.parallax__layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.parallax__layer--fore {
	-webkit-transform: translateZ(90px) scale(.7);
	transform: translateZ(90px) scale(.7);
	z-index: 1;
}

.parallax__layer--base {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	z-index: 4;
}

.parallax__layer--back {
	-webkit-transform: translateZ(-300px) scale(2);
	transform: translateZ(-300px) scale(2);
	z-index: 3;
}

.parallax__layer--deep {
	-webkit-transform: translateZ(-600px) scale(3);
	transform: translateZ(-600px) scale(3);
	z-index: 2;
}



/* Home Parallax Groups
--------------------------------------------- */

#group1 {
	z-index: 5; /* slide over group 2 */
}

#group1 h1 {
	position: absolute;
	color: #fff;
	width: 100%;
	top: 50%;
	left: 0;
	margin: -24px 0 0;
	text-align: center;
}

#group1 .parallax__layer--base {
	background: transparent url('/lib/img/story/mountains.jpg') no-repeat 0 0;
	background-size: cover;
}

#group2 {
	z-index: 3; /* slide under groups 1 and 3 */
}

#group2 .parallax__layer--back {
	margin-left: -5px;
	background: transparent url('/lib/img/story/city.jpg') no-repeat 0 0;
	background-size: cover;
}

#group3 {
	z-index: 4; /* slide over group 2 and 4 */
}

#group3 .parallax__layer--base {
	background: transparent url('/lib/img/story/tropical.jpg') no-repeat 0 0;
	background-size: cover;
}


#group4 {
	z-index: 2; /* slide under group 3 and 5 */
}

#group4 .parallax__layer--back {
	margin-left: -7px;
	background: transparent url('/lib/img/story/cuba.jpg') no-repeat 0 0;
	background-size: cover;
}

#group5 {
	z-index: 3; /* slide over group 4 and 6 */
}

#group5 .parallax__layer--base {
	background: transparent url('/lib/img/story/florida-keys.jpg') no-repeat 0 0;
	background-size: cover;
}

#group6 {
	z-index: 2; /* slide under group 5 and 7 */
}

#group6 .parallax__layer--back {
	background: rgb(245,235,100);
}

#group7 {
	z-index: 3; /* slide over group 7 */
}

#group7 .parallax__layer--base {
	background: rgb(255,241,100);
}



/* Story-specific styles
--------------------------------------------- */

body,
html {
	overflow: hidden;
}

body {
	font: 100% / 1.5 Arial;
}

* {
	margin:0;
	padding:0;
}

.parallax {
	text-align: center;
}

.title {
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.fitImg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.parallax .parallax__layer p {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
	width: 60%;
	margin: 0 20%;
	color: #fff;
	font: normal 24px/36px "adobe-garamond-pro", sans-serif;
	text-align: left;
}

.buttons {
	margin-top: 33%;
}

.footerContainer nav {
	display: none;
}