/* Special thaks to Ian Lunn and the Paralax info. check him out @ ianlunn.co.uk */

@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
	min-width: 980px;
	padding: 0;
	background-color:#b0b0b0;
	overflow-x: hidden;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

p{
	margin: 0 0 20px 0;	
}

p, ul{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
}

img{
	border: 0;
}

h1, #pixels{
	font-family:"Museo 900", Verdana, serif;
	font-size-adjust:0.40;
	font-weight:700;
	font-style:normal;
}

h2{
	font-family:"Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
}

#header h1, #pixels{
	color: #48941A;
}

.float-left{
	float: left;	
	margin: 0 0 0 20px;
}

.float-right{
	float: right;
	margin: 0 20px 0 0;
}

.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}

.story{
	margin: 0 0px auto;
	min-width: 980px;
	overflow: visible;
	width: 980px;
	z-index: 400;
}

.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: absolute;
	width: 350px;	
}


#nav{
	list-style: none;
	position: fixed;
	right: 20px;
	z-index: 500;
}

#nav li{
	margin: 0 0 15px 0;	
	z-index: 500;
}

#header, #intro, #second{
	width: 100%;
}

#intro{
	background: url(images/leopard_print_v04.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
}

#intro .bg1{
	background: url(images/leopardpng.png) no-repeat fixed;
	background-size: 100%;
	height: 1500px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	top: -200px;
	width: 100%;
	overflow: hidden;
	z-index: 200;
}

#intro .video{
	margin: 0 ;
	padding: 30% 1% 0% 48%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	z-index: 400;		
}

#intro .title{
	background: url(images/logo_large.png) 50% 0 no-repeat fixed;
	background-size: 100%;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	overflow: hidden;
	z-index: 200;
}

#second{
	background: linear-gradient(#1d1b1f,#49484a) no-repeat fixed;
	color: grey;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 ;
	width: 100%;
}


#second .bg{
	background: url(images/long_face_3.png) no-repeat fixed;
	background-size: 100%;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	overflow: hidden;
	z-index: 200;
}

#third{
	background: url(images/bridge_bkg_v04_transparancy.png) no-repeat fixed;
	background-size: 107%;
	color: grey;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 ;
	width: 100%;
}


#third .cg{
	background: url(images/spitfire_3.png) no-repeat fixed;
	background-size: 100%;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 200;
	overflow: hidden;
}


/*Button at the end*/

section, section div {
  /* See it in slo-mo, you can change this */
  transition-duration: .6s;
}

* { box-sizing: border-box; }

section, .button { transition-timing-function: ease; }

section {
  float: right;
  display: inline-block;
  position: absolute;
  margin-top: 25%;
  margin-left: 54%;
  padding: .1rem .1rem 0;
  height: 3rem;
  width: 25rem;
  background: #A9ADB6;
  border-radius: .25rem;
  perspective: 300;
  z-index:300;
}


.button { opacity: 0; }

.cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

.innie, .outie, .spine, .shadow { position: absolute; width: 100%; }

.innie, .outie {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}
.innie:after, .outie:after {
  	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:100;
	font-style:normal;
  content:"Contact"; position:relative; top:.2rem;}

.innie {
  background-color: purple;
  text-shadow: 0 -2px 4px rgba(0,0,0,.2);
}

.spine {
  top: .25rem;
  background: purple;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.shadow {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;

}

.outie {
  background-color: purple;
  transform: translateZ(.25rem);
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}

section:hover { background: #b0b0b0; }
section:hover .button { opacity: 1; }

section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

section:hover .cover { transform: rotateX(-120deg);  }

section:hover .innie { background-color: grey; }
section:hover .spine { background-color: grey; }
section:hover .outie { background-color: black; color: rgba(255,255,255,0); }

section:hover .shadow { 
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}

#button {padding: 0rem; margin: .95rem 2rem 2rem 2rem;}
#button ul {list-style-type:none;}

#button li{display: inline; padding: .8rem; position:relative; }

#options {position:absolute;}

a {color: #460657; text-decoration: none; font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.8;
	font-weight:300;
	font-style:normal;}