@font-face {
	font-family: Mistral;
	src: url(mistral);
}

@font-face {
	font-family: Helvetica Neue;
	src: url(HelveticaNeue.dfont);
}

img {
	max-width: 100%; 
	height: auto;
}

#container {
	width: 1200px;
	max-width: 100%;
	overflow-x: hidden;
}


h1 {
	font-family: "Mistral", sans-serif;
	font-size: 70px;
}

p {
	font-family: "Helvetica Neue", sans-serif;
	font-size: 13px;
	line-height: 130%;
	letter-spacing: 0.75px;
}

img {
	max-width: 100%;
}

#director {
	position: absolute;
	left: 10%;
	top: 55%;
	z-index: 3;	
}

#longman {
	position: absolute;
	right: 5%;
	top: 10%;
	z-index: 3;	
}

#film {
	position: absolute;
	left: 40%;
	top: 10%;
	z-index: 3;
}

#climber {
	position: absolute;
	left: -5%;
	top: 65%;
	z-index: 3;
}

#guy {
	position: absolute;
	right: 10%;
	top: 130%;
	z-index: 3;
}

#juggle {
	position: absolute;
	right: 10%;
	top: 290%;
	z-index: 5;
}

#pick {
	position: absolute;
	right: 20%;
	top: 200%;
	z-index: 3;
}

#mountain {
	position: absolute;
	right: 0%;
	top: 545%;
	z-index: 3;
}

#dude {
	position: absolute;
	left: 1%;
	top: 800%;
	z-index: 3;
}

#camera1 {
	position: absolute;
	right: 8%;
	top: 440%;
	z-index: 3;
}

#final {
	position: absolute;
	width: 100%;
	top: 1030%;
	z-index: 3;
}

#one, #two, #three, #four, #five, #six, #seven, #nine, #ten, #eleven {
	position: absolute;
	overflow-x: hidden;
	z-index: 1;
	width: 100%;
	height: 100%;
}



#one {
	background: url(images/topimage.png) no-repeat;
	top: 0;
}

#two {
	background: #501818 url(images/blueblock.jpg) no-repeat;
	top: 100%;
}

#two h1 {
	float: right;
	position: absolute;
	right: 5%;
	top: 10%;
	width: 65%;
	color: #E8E6E6;
}

#two p {
	float: right;
	position: absolute;
	right: 5%;
	top: 40%;
	width: 35%;
	color: #E8E6E6;
}

#three {
	background: url(images/bottomimg.png) no-repeat;
	background-position: bottom left;
	top: 200%;
}

#three h1 {
	float: right;
	position: absolute;
	right: 5%;
	top: 5%;
	width: 65%;
}

#three p {
	float: left;
	position: absolute;
	left: 5%;
	top: 25%;
	width: 50%;
}

#four {
	background: #501818;
	top: 300%;
}

#four h1 {
	float: left;
	position: absolute;
	left: 5%;
	top: 10%;
	width: 65%;
	color: #E8E6E6;
}

#four p {
	float: left;
	position: absolute;
	left: 10%;
	top: 30%;
	width: 35%;
	color: #E8E6E6;
}

#five {
	background: #0E5168 url(images/lights.png) no-repeat;
	top: 400%;
}

#five h1 {
	float: left;
	position: absolute;
	left: 15%;
	top: 10%;
	width: 65%;
	color: #E8E6E6;
}

#five p {
	float: right;
	position: absolute;
	right: 15%;
	top: 30%;
	width: 55%;
	color: #E8E6E6;
}

#six {
	background: url(images/topimage.png) no-repeat;
	top: 500%;
}

#six h1 {
	float: right;
	position: absolute;
	right: 5%;
	top: 10%;
	width: 65%;
}

#six p {
	float: left;
	position: absolute;
	left: 5%;
	top: 40%;
	width: 35%;
}

#seven {
	background: #501818 url(images/camera.png) no-repeat;
	top: 600%;
}

#seven h1 {
	float: right;
	position: absolute;
	right: 5%;
	top: 10%;
	width: 65%;
	color: #E8E6E6;
}

#seven p {
	float: right;
	position: absolute;
	right: 10%;
	top: 40%;
	width: 35%;
	color: #E8E6E6;
}

#eight {
	position: absolute;
	background: url(images/bottomimg.png) no-repeat;
	background-position: bottom left;
	top: 700%;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	z-index: 1;
	height: 100%;
}

#eight #inside {
	width: 3000px;
}

#eight #inside h2 {
	font-style: italic;
	font-style: bold; 
	word-spacing: 260px;
	left: 15%;
	top: 5%;
	position: absolute;
	width: 2500px;
}

#eight #inside h1 {
	float: right;
	font-size: 25px;
	width: 200px;
	margin-top:-15%;
}

#eight #inside p {
	color: white;
	font-size: 9px;
	width: 100px;
	margin: 0 0 0 20%;
}

#GM, #TE, #CC, #FC, #JLC, #FFC, #GL, #QT, #RR, #MG {
	width: 250px;
	height: 400px;
	float:left;
	padding-top: 10%;
	margin-top: 1%;
}


#GM {
	background: url(images/GM.jpg) no-repeat;
}

#TE {
	background: url(images/TE.jpg) no-repeat;
	padding-left: 0.5%;
}	

#CC {
	background: url(images/CC.jpg) no-repeat;
	padding-left: 0.75%;
}

#FC {
	background: url(images/FC.jpg) no-repeat;
	padding-left: 1%;
}

#JLC {
	background: url(images/JLC.jpg) no-repeat;
	padding-left: 2.25%;
}

#FFC {
	background: url(images/FFC.jpg) no-repeat;
	padding-left: 2.75%;
}

#GL {
	background: url(images/GL.jpg) no-repeat;
	padding-left: 1.5%;
}

#QT {
	background: url(images/QT.jpg) no-repeat;
	padding-left: 1.5%;
}

#RR {
	background: url(images/RR.jpg) no-repeat;
	padding-left: 1.3%;
}

#MG {
	background: url(images/MG.jpg) no-repeat;
	padding-left: 1%;
}

#nine {
	background: #FFFFFF url(images/lights.png) no-repeat;
	top: 800%;
}

#nine h1 {
	float: right;
	position: absolute;
	right: 10%;
	top: 15%;
	width: 65%;
}

#nine p {
	float: right;
	position: absolute;
	right: 10%;
	top: 30%;
	width: 40%;
}

#ten {
	background: #501818;
	top: 900%;
}

#ten h1 {
	float: right;
	position: absolute;
	left: 70%;
	top: 10%;
	width: 30%;
	color: #E8E6E6;
}

#ten p {
	float: left;
	position: absolute;
	left: 10%;
	top: 30%;
	width: 35%;
	color: #E8E6E6;
}

#eleven {
	background: url(images/topimage.png) no-repeat;
	top: 1000%;
}

#eleven h1 {
	float: left;
	position: absolute;
	left: 10%;
	top: 10%;
	width: 65%;
}

#eleven p {
	float: right;
	position: absolute;
	right: 10%;
	top: 40%;
	width: 40%;
}

@media screen and (min-width: 0px) and (max-width: 400px) {
  p { display: none; }   /* hide it elsewhere */
}