/*
Author: Loaf Creative
*/

/* RESET CSS */
@import url("reset.css");

@font-face {
    font-family: 'FoundersGroteskBold';
    src: url('fonts/foundersgrotesk-bold-webfont.eot');
    src: url('fonts/foundersgrotesk-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/foundersgrotesk-bold-webfont.woff') format('woff'),
         url('fonts/foundersgrotesk-bold-webfont.ttf') format('truetype'),
         url('fonts/foundersgrotesk-bold-webfont.svg#FoundersGroteskBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'FoundersGroteskRegular';
    src: url('fonts/foundersgrotesk-regular-webfont.eot');
    src: url('fonts/foundersgrotesk-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/foundersgrotesk-regular-webfont.woff') format('woff'),
         url('fonts/foundersgrotesk-regular-webfont.ttf') format('truetype'),
         url('fonts/foundersgrotesk-regular-webfont.svg#FoundersGroteskRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img{ height:auto; width:auto; position:absolute; outline:none; border:none; -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality;display: block; }
#supersized .new_slide {z-index: 10;}
#supersized .active_slide {z-index: 11;}

/* =Main Structure
-------------------------------------------------------------- */
body {
	background: white;
	font-size: 12px;
	color: white;
}

#logo {
	padding-top: 40px;
	width: 154px;
	height: 39px;
}
#dark {display: none;}
#dark, #light {position: absolute;z-index: 6}

#copy {margin-top: 40px;width: 360px;}


html, body, #wrapper {
    min-height: 100%;
    height: 100%; 
    margin: 0;
    padding: 0;
}


html>body #wrapper {
    height: auto; /*this undoes the IE hack, hiding it
                    from IE using the child selector*/
}

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 0 60px;
}
    
#main {
    height: auto;
    padding-bottom: 180px;   /*same height + padding of footer */
}
#footerwrap {
    position: absolute;
    bottom: 20px;
    z-index: 6;
}

#social {float: left;margin: 8px 0 0 20px;}
#footer p {float:left;}
#strapline {margin-bottom: 20px;width: 700px;}
#aboutTab, #contactTab {position: absolute;cursor: pointer;z-index: 15;display: none;}
#aboutImg, #homeImg {position: absolute;}
#homeImg {display: none;}
#aboutTab {
	left: 0;
	top:120px;
}
#contactTab {
	top: 0px;
	left: 350px;
}
		
#aboutPage {
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 5;
	background: white;
	position: absolute;
	display: none;
}

#aboutCopy {
	color: black;
	width: 340px;
	float: left;
	margin: 120px 0 0 60px;
}
#clientLogos {
	color: black;
	margin: 120px 0 0 45px;
	float: left;
}


/*FORM */
#contactForm {
	position: absolute;
	width: 400px;
	left: 350px;
	top: -360px;
	z-index: 15;
	padding: 40px 20px 20px 20px;
	background: black;
}
#closeForm {
	float: right;
	margin-top: -30px;
}
#enquiryForm {margin-top: 15px;}
.field {
	float: left;
	height: 40px;
	margin-bottom: 6px;	
}
#contactForm input[type=text] {
	height: 14px;
	width: 183px;
	color: #000;
}

#contactForm textarea {
	width: 390px;
	height: 80px;
}
#contactForm input[type=text], #contactForm textarea {
	background: #666;
	border: none;
	color: #000;
	padding: 3px;
	font-size: 12px;
	margin: 3px 0 3px 0;
}
.submitBtn {
	margin: 6px 0 0 0px;
	padding: 4px 0 4px 0px;
	background: #666;
	width: 70px;
	text-align: center;
	color: white;
	cursor: pointer;
	float: left;
}
#preloader {
	float: left;
	display: none;
	margin: 10px 0 0 10px;
}


/* =Fonts
-------------------------------------------------------------- */

h1, h2 {
	font-family: 'FoundersGroteskBold';
	font-size: 15px;
	margin-bottom: 10px;
}
p {
	font-family: 'FoundersGroteskRegular';
	font-size: 14px;
	line-height: 14px;
}
h3 {
	font-family: 'FoundersGroteskBold';
	font-size: 69px;
	line-height: 50px;
	color: white;
}
#footer p {font-size: 11px;line-height: 15px;}
		

a {
	color: white;
}

a:hover {
	color: gray;
}


#list ul {
	list-style: none;
}

#list ul li a {
	color: gray;
	text-decoration: none;
	font-size: 12px;
}

#list ul li a:hover {
	color: white;
	text-decoration: underline;
}