html{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	}


/* reset5 © 2011 opensource.736cs.com MIT */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input[type=submit],input[type=button],button{margin:0!important;padding:0!important;}input,select,a img{vertical-align:middle;}
/* End reset5 © 2011 opensource.736cs.com MIT */

/* Standard Stylesheet */
html{
	padding:0;
	margin:0;
	height:100%;
	position:relative;
	overflow-y: scroll; 
	}
body{
	padding:0;
	margin:0;
	height:100%;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	}
a{
	color:inherit !important;}

/* Switch */
#switch-centre{
	width:80px;
	height:80px;
	position:absolute;
		top:36px;
		right:460px;
		z-index:5000;
}
#switch-centre a{
	width:100%;
	height:100%;
}
#switch-image{
	width:0px;
	height:80px;
	position:absolute;
		top:0px;
	background-size:100% 100%;
}
#switch-image.leftimg .leftvis,
#switch-image.rightimg .rightvis{
	display:block;
	width:100%;
	height:80px;
}
#switch-image.leftimg .rightvis,
#switch-image.rightimg .leftvis{
	display:none;
}


/* Page containers */
#page-container{
	width:100%;
	height:100%;
	position:relative;
	text-align:center;
	}
#page-container-center{
	position:relative;
	width:1000px;
	text-align:left;
	margin:0 auto;
	min-height:100%;
	}
/* Content Blocks */
#content-container1 {
	position:relative;
		top:0;
		left:0;
    float:left;
    width:100%;
	background-color:#393939;
    overflow:hidden;
	height:100%;
	}
#content-container2 {
	position:relative;
    float:left;
    width:100%;
	right:50%;
	background-color:#f1f1ef;
	min-height:100%;
	}
#col-left {
    float:left;
	width:50%;
	left:50%;
    position:relative;
	color:#393939;
	z-index:2;
	}
#col-right {
    float:left;
	width:50%;
	left:50%;
    position:relative;
	color:#f1f1ef;
	z-index:2;
	}
#leftFrame{
	padding-bottom:80px;
	padding-left:10px;
	}
#header-left{
	margin-top:30px;
	width:100%;
	position:relative;
	}
#header-right{
	margin-top:30px;
	text-align:right;
	width:100%;
	position:relative;
	}
#header-left h1 {
	margin-left:100px;
	z-index: 2;
	position:relative;
	text-transform:capitalize;
	padding-top:11px;
	
	/* Will need to be cancelled with Animation */
	top:21px;
	left:12px;
	opacity:0;
	
	}
#header-right h1{
	margin-right:240px;
	z-index: 2;
	position:relative;
	text-transform:capitalize;
	padding-top:11px;
	
	/* Will need to be cancelled with Animation */
	top:21px;
	left:5px;
	opacity:0;
	}	
	
.header-image{
	display:block;
	position:absolute;
	z-index: 2;
	overflow:hidden;
	padding:0;
	height:360px;
	width:246px;
	background-size:100% 100%;
	}
	
#hl.header-image {
	top:0;
	right:0;
	background-image:url(images/brainL.png);
	background-position:top left;
	}
#hr.header-image{
	top:0;
	left:0;
	background-image:url(images/brainR.png);
	background-position:top right;
	}	
#l {
	width:100%;
	opacity:0;
	margin-top:50px;
	}
#r{
	text-align:right;
	width:100%;
	opacity:0;
	margin-top:50px;
	}
.footer{
	display: block;
	float:right;
	margin:20px 0 0 0;
	font-size:0.7em;
	width:710px;
	height:30px;
	overflow:hidden;
	}
/* Background Blocks */
#background-left{
	position:fixed;
		top:0;
		left:0;
	height:100%;
	width:50%;
	z-index:0;
	background-color:#f1f1ef;
	}
#background-right{
	position:fixed;
		top:0;
		right:0;
		bottom:0;
		left:50%;
	height:100%;
	width:50%;
	z-index:0;
	background-color:#393939;
	}
/* Page Hover Buttons */
#left-page{
	position:absolute;
		top:0;
		right:50%;
		bottom:0;
		left:0;
	width:50%;
	z-index:0;
	opacity:1;
	}
#right-page{
	position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:50%;
	width:100%;
	z-index:0;
	opacity:1;
	}
.clear{
	clear:both;
	font-size:2px;
	line-height:1em;
	margin:0;
	padding:0;
	}
.page-height{
	width:0px;
	display: block;
	float:left;
	height:100px;
	}
/* ###################### */
/* Navigation */
/* ###################### */

#left-navigation{
	margin-top:15px;
	}
#left-navigation li{
	list-style:none;
	}
#left-navigation li a{
	color:#393939;
	}
#left-navigation li a:hover{
	background-color:#00a1b0;
	color: #393939;
	}
#left-navigation li a.active{
	background-color:#888;
	color: #393939; 
	}
#left-navigation li a.active:hover{
	background-color:#00a1b0;
	color:#f1f1ef;
	}
#right-navigation{
	margin-top:15px;
	}
#right-navigation li{
	list-style:none;
	}
#right-navigation li a{
	color:#f1f1ef;
	}
#right-navigation li a:hover{
	background-color:#EE2F80;
	color: #f1f1ef; 
	}
#right-navigation li a.active{
	background-color:#666;
	color: #f1f1ef; 
	}
#right-navigation li a.active:hover{
	background-color:#EE2F80;
	color:#f1f1ef;
	}

/* ###################### */
/* Text & Font Styles */
/* ###################### */
	
	h1{
		font-size: 62px;
		font-weight:normal;
		letter-spacing: 0;
		}

	h2{
		font-size: 26px;
		font-weight:600;
		letter-spacing: 0;
		line-height:1.4em;
		margin-top:2em;
		}

	h3{
		font-size: 1.09em;
		font-weight:normal;
		letter-spacing: 0;
		line-height:1.4em;
		margin-top:1em;
		}

	h4{
		}

	h5{
		}

	p{
		font-weight:light;
		letter-spacing: 0;
		line-height:1.6em;
		margin-top:0.6em;
		margin-bottom:1.1em;
		font-size:1.09em;
		color:#666;
		font-weight: 300;
		}

	em{
		}

	strong{
		}

	ul{
		}

	li{
		font-size: 2em;
		line-height:1.2em;
		font-weight:200;
		letter-spacing: 0;
		}
		
	li a{
		font-weight:200;
		padding:4px 10px 7px 10px;
		}
	
	a{
		color:inherit;
		text-decoration:none;
		font-weight:normal;
		display:block;
		}
		
	.portfolioText a{
		display:inline;
		font-weight:bold;
		}
	table{
		margin:0 0 -1.1em 0;
		padding:0;
		}
	tr{
		margin:0;
		padding:0;
		}
	td{
		margin:0;
		padding:0;
		width:235px;
		}
/* ###################### */
/* Portfolio Pages Style */
/* ###################### */

.portfolioFrame{
	display:block;
	margin-left:10px;
	margin-top:20px;
	width:739px;
	}
.portfolioItem{
	display:block;
	float:left;
	margin:20px 0px 0px 19px;
	width:224px;
	height:316px;
	position:relative;
	overflow:hidden;
	}
	
.portfolioText{
	background-color:rgb(34,34,34);
	background-color:rgba(34,34,34,0.8);
	display:block;
	position:absolute;
		bottom:0;
		right:0;
		left:0;
	margin:0 0 -100% 0;
	padding:0;
	text-align:center;
	height:auto;
	}
.portfolioText p{
	font-size: 0.8em;
	display: block;
	width: 200px;
	margin:15px 10px;
	padding:0;
	line-height:1.4em;
	line-spacing:1em;
	text-align:left;
	color:#f1f1ef;
	}
.portfolioText p.client{
	font-size:0.8em;
	text-align:left;
	color:#888;
	}
div#flip-clients{
	padding:0;
	width:710px;
	margin:20px 0 20px 0;
	}
div.client:nth-child(5n-4){
	text-align:left;}
div.client:nth-child(5n){
	text-align:right;}
div.client{
	display:block;
	text-align:center;
	vertical-align:middle;
	float:left;
	width:140px;
	height:100px;
	line-height:100px;
	padding:0;
	margin:0;}
div.client a,
div.client img{
	margin:0;
	padding:0;
	}

/* ###################### */
/* Story Pages Style */
/* ###################### */
#leftFrame{
	display:block;
	margin-right:30px;
	width:700px;
	}
/* ###################### */
/* BBQ-Fixes */
/* ###################### */
.bbq-item{
	display:block;
	}

/* ###################### */
/* Contact Page */
/* ###################### */
.email{
	padding:0;
	margin:0;
	}
	
/* ##################### */
/* New dynamic Content */

#contentR,
.content,
.content portfolioItem,
.content portfolioItem img{
	opacity:inherit;
	}

.content.hidden{
	display:none;
	}