/*
CSS for the demo: Recreating the Nikebetterworld.com Parallax Demo
Demo: Recreating the Nikebetterworld.com Parallax Demo
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Demo URL: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

@charset "utf-8";
/* --------------------------------------------------------------------------- base */
body{
	margin: 0;
	min-width: 976px;
	padding: 0;
}
img {
	border: 0;
}
#header, #intro, #second {
	width: 100%;
}
.story {
	margin: 0 auto;
	width: 960px;
	padding: 0 8px;
}

.story .float-left, .story .float-right {
	padding: 100px 0 0 0;
	width: 450px;	
}
.story .float-left {
	float:left;	
}
.story .float-right {
	float:right;	
}
.clearfloat {
	clear:both;	
}


/* --------------------------------------------------------------------------- typo */
h1 {
	font-family: Quan-Light;
	color:#333;
	font-size:56px;
	font-weight:normal;
	line-height:80%;
}
.hcircle {
	background: url(images/icon-circle.png) no-repeat 0 7px;
	padding-left:50px;
}
.hwaves {
	background: url(images/icon-waves.png) no-repeat 0 7px;
	padding-left:50px;
}
.hplus {
	background: url(images/icon-plus.png) no-repeat 0 7px;
	padding-left:50px;
}
h2 {
	font-family: Quan-Light;
	font-size:32px;
	font-weight:normal;
	line-height:80%;
	margin:0;
	padding:0;
}
h3 {
	font-family: Quan-Bold;
	font-size:20px;
	font-weight:normal;
	line-height:80%;
	margin:10px 0 10px 0;
	padding:0;
}

.orange { color:#EA690C; }
.white { color:#fff; }
.bold {	font-family: Quan-Bold; }

p {
	margin: 0 0 20px 0;	
	font-family: Quan-Light;
	font-size:20px;
	font-style:normal;
}

ul{
	font-family: Quan-Light;
	font-size:20px;
	font-style:normal;
}



/* --------------------------------------------------------------------------- nav */
#nav {
	float:right;	
	font-family: Quan-Light;
	color:#fff;
	font-size:21px;
	margin-top:37px;
}
#nav li {
	float:left;	
	margin-left:20px;
	list-style-type: none;
}

#nav li a:link, #nav li a:visited{
	color: #fff;
	text-decoration: none;
}
#nav li a:hover, #nav li a:active, #nav li a:focus {
	/*color:#EA690C;*/
}
#nav .active {
	font-family: Quan-Bold;
}
#header{
	background: url(images/nav-bar.png) no-repeat 50% 0;
	height: 100px;	
	position:fixed;
	z-index:100;
}
#navbararrow {
	background: url(images/nav-bar-arrow.png) no-repeat -40px 0;
	height:25px;
	position:relative;
	top:75px;
	transition: background 0.4s ease 0s;
	-moz-transition: background 0.4s ease 0s;
	-ms-transition: background 0.4s ease 0s;
	-webkit-transition: background 0.4s ease 0s;
	-o-transition: background 0.4s ease 0s;
}
.logo {
	margin: 28px 0 0 0;	
	float:left;
}


/* --------------------------------------------------------------------------- cons */
#intro {
	background:url(images/wall.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 555px;
	margin: 0;
	padding: 160px 0 0 0;
}

#second{
	background: url(images/fire.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 540px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 0 50px 0;
}
#second h1 {    
	width:600px;	
}

#third {
	background: url(images/blueprints.jpg) 50% 0 no-repeat fixed;
	color: #333;
	height: 1100px;
	padding: 0 0 0 0;	
	overflow:visible;
}
.fullthird {
	background: url(images/devices.png) 50% 125px no-repeat;
}


#fourth {
	background: url(images/gradient.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 950px;
	padding: 100px 0 0 0;
}
#fourth ul {
	list-style:none;
	margin:0;
    padding: 0;
}
#fourth ul li {
	line-height:1em;
    margin: 0 0 15px 0;
    padding: 0 0 0 25px;
    background:url(images/check.png) no-repeat 0 4px;
}
.fourthpadding {
	padding-top:20px !important;	
}



#fifth{
	height: 850px;
	margin: 0 auto;
	padding: 0 0 0 0;
	background: #fff url(images/fireprinter.jpg) 50% 0 no-repeat fixed;
}

#sixth {
	margin: 0 auto;
	padding: 0 0 0 0;
	background: #fff url(images/dove.jpg) 50% 0 no-repeat fixed;
}
.con-sixth {
	background: url(images/content-sixth.png) 49% 550px no-repeat;
	padding-top:150px;
}
.sixthwidth {
	width:590px;
}
.fullsixth {
	background:#D96A11;
	margin-top:115px;
	color:#fff;
	padding: 35px 0 30px 0;
}
.sixthpadding {
	padding-top:20px !important;	
}
#sixth a:link, #sixth a:visited{
	color: #fff;
	text-decoration: none;
}
#sixth a:hover, #sixth a:active, #sixth a:focus {
	color:#333;
}
.bcleft {
	float:left;	
}
.bcright {
	float:right;
}
.bcleft, .bcright {
	margin:30px 0 10px 0;
	color:#333;
}
.bcleft p, .bcright p {
	font-size:16px !important;
}
.bcleft a:link, .bcright a:link, .bcleft a:visited, .bcright a:visited {
	color: #333 !important;
	text-decoration: none;
	margin: 0 5px;
}
.copy {
	font-family:Arial;	
	font-size:12px;
}
a.pdf {
	background: #D96A11;
	color: #fff;
	padding: 8px 15px;
	border-radius: 4px;
	margin-top: 30px;
	font-family: Quan-Light;
	font-size: 20px;
}