/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-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/.
*/

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

html, body
{	margin:0px; padding:0px; height:100%; width:100%; position:relative;	}

body{
	font-size:10px;
	font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-weight:300;
	font-style:normal;
	color:#5B6C7B;
}


p{
	margin: 0 0 20px 0;	
}

p, ul{
	
	font-size-adjust:0.488;
	
}

img{
	border: 0;
}


#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;
}

#nav{
	list-style: none;
	position: absolute;
	top: 0px;
	margin:0px; 
	padding:7px 0px;
	text-align:center;
	width:100%;
	background: rgba(255, 255, 255, 0.7);
	z-index:999;
	
}

#nav li
{
	display:inline; margin:15px 0px; padding:0px; list-style:none; line-height:2em;
	font-size:1.7em;
	color:#A9CE58; 
}

#nav li a
{	color: rgb(91, 108, 123); text-decoration:none;	padding:0px 10px;}

#header, #home, #graphics{
	width: 100%;
}

.story
{
	margin:0px auto;
	padding:40px 0px;
	width:1000px;	
}

div.leftSide
{
	float:left;
	width:25%;	
}
div.rightSide
{
	float:right;
	width:60%;	
}

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

div.hideme
{
    margin-left:-80%;
}

.parallaxArea
{
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: white;
	height: 75%;
	margin: 0 auto;
	padding: 0;
	position:relative;
}

.titleArea
{
	position:absolute; 
	bottom:35px;
	font-size:7.5em;
	font-weight:700;
	z-index:999;
	text-align:center;
	width:85%;
	margin:0px 7.5%;
	text-transform:uppercase;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.8);	
	line-height:1.1em;
}

#home{
	background-image:url(images/landscape.jpg);
	
}

.clear
{	clear:both;	}

.plain
{
	background-color:#fff;
	/*height:400px;*/
	width:100%;	
}

.plain.white strong
{	color:#A9CE58;	}

.green
{	background-color:#A9CE58; 	color:#fff;		}

.grey
{	background-color:#28343C;	color:#fff;		}

.greenText
{	color:#A9CE58;		}
.greyText
{	color:#E6E7E8;		}

p.sectors
{
	font-size:1.3em; text-align:center;	
}

.lightGrey
{	background-color:#E6E7E8;	color:#5B6C7B;	}

#graphics{
	background-image:url(images/skyscraper.jpg);
}


.grey h3, .plain.white h1 span, .plain.white .h1Style span
{	color:#A9CE58;	}

#websites
{
	background-image:url(images/spiderweb.jpg);
}

#localclub{
	background-image:url(images/football.jpg);
}

h1 span, .h1Style span
{	font-size:0.7em; line-height:0.9em;	}
h1, .h1Style
{	font-size:4.5em;	line-height:1.1em; text-transform:uppercase; font-weight:bold; margin:30px 0px 0px 0px;	}

h1.floatBottom, .h1Style.floatBottom
{	position:absolute; bottom:-8px; left:0px;	}


.title
{	margin-bottom:20px; position:relative	}

h3
{	font-size:2.5em;	line-height:1.1em;  font-weight:bold; margin:15px 0px 15px 0px;	}

p 
{ 	font-size:1.8em; line-height:1.4em; margin:15px 0px;	}

p.quote
{	text-align:center;	 font-size:3em; width:80%; margin:30px auto; line-height:1.4em;	}

p.quote span
{	font-size:0.7em; line-height:0.5em;	}

.threeColumn
{
	width:33%; display:inline-block;
	margin-bottom:20px;	
	text-align:center;
}
.threeColumn img
{	max-width:90%; height:auto;	}
#Portfolio .threeColumn img
{	max-width:98%; height:auto;	}

p.caps
{
	text-transform:uppercase; font-size:1.3em; color:#999; line-height:1.8em; letter-spacing:1px; margin-bottom:10px;
}

p.caps span
{	display:block;	}


label
{	 margin-bottom:5px; font-size:1.5em;	}


.tab
{
	width:45%;
	margin:1% 2% 1% 0px;
	float:left;	
}
.tab.right
{
	float:right;	
}

input[type="text"], textarea, select
{	width:98%; padding:4px 1%; border:1px solid #efefef; background:#fdfdfd; margin-bottom:5px; 
	font-family:'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:1.3em; height:20px;	}

select
{	height:30px	; width:100%;}

textarea
{
	height:140px;	
	margin-bottom:22px;
}

input[type="submit"]
{	width:auto; padding:3px 20px ; height:28px;  text-align:center; border:1px solid #5B6C7B; background:#5B6C7B; margin:5px 0px; 
	font-family:'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:1.6em;	color:#fff; font-weight:300; }


@media only screen and (max-width:1024px)
{
	.story
	{
		width:90%;	
	}

}
@media only screen and (max-width:800px)
{	
	h1, .h1Style
	{	font-size:4em;		}
	
	.titleArea
	{	font-size:5em;	}
	.titleArea br
	{	display:none;	}
}
@media only screen and (min-width:409px) and (max-width:600px)
{
	
	p.caps span
	{	display:inline-block; vertical-align:top; width:45%; 	}
}
@media only screen and (max-width:600px)
{
	
	#nav li
	{	font-size:1.5em;	}

	p.caps
	{	text-align:left;	}

	div.leftSide, div.rightSide
	{
		float:none;
		width:100%;	
	}
	div.leftSide
	{	text-align:center;	}
	
	div.leftSide img
	{	max-width:40%; height:auto;	}

	
	div.hideme
	{
		margin-left:-120%;
	}
	
	h1, .h1Style
	{	font-size:3.5em;		}
	
	.parallaxArea
	{ 	height:60%;	}


	#Portfolio .threeColumn
	{	width:50%;	}
	
	.titleArea
	{	font-size:3.5em;	}

}