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

/*	Theme Name: Oikos Architects	 				*/
/*	File Name: layout_A_allDevices.css 				*/
/*	Author: Ben Guthrie								*/
/*	Author URI: http://www.TheGuthrieProject.com	*/




/*	Oikos Blue:			#3b669c;					*/
/*	Oikos Blue, greyed: #273268;					*/
/*	Oikos Blue, dark: 	#080a17;					*/





body, html {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	
/*	overflow: auto; 
	overflow-y: auto;		/* Note: When active, these overflow controls cause superScrollorama to stop working */
	overflow-x: none;		/* Note: Required for PageSlide to work on iOS */
	-webkit-overflow-scrolling: touch;
	
	-webkit-font-smoothing: antialiased;
/*	text-rendering: optimizeLegibility;	*/
	}


body {
	zoom: reset;
	overflow:auto;
	}





.smallScreen, 
.mediumScreen, 
.hideFromLargeScreens, { display:none; }

.largeScreen,
.hideFromSmallScreens,
.hideFromMediumScreens,
.allScreensExceptSmall { display:inline-block; }

span { display:inline !important; }

.alignCentre {  
	text-align: center !important;
	width: 100% !important;
	left: 0 !important;
	}








/*	Backgrounds	
-------------------------------------------------------------- */

.siteBackground {
	display:block;
	position:fixed;
	overflow:none;
	width:100%;
	height:100%;
	background: #080a17; /* Old browsers */
	background: -moz-linear-gradient(top,  #181c26 0%, #080a17 40%, #080a17 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#181c26), color-stop(40%,#080a17), color-stop(100%,#080a17)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #181c26 0%,#080a17 40%,#080a17 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #181c26 0%,#080a17 40%,#080a17 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #181c26 0%,#080a17 40%,#080a17 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #181c26 0%,#080a17 40%,#080a17 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181c26', endColorstr='#080a17',GradientType=0 ); /* IE6-9 */
	z-index:-999;
	}

.noBackground {
	background:none !important;
	}

.backgroundFade_light, 
.backgroundFade_mid, 
.backgroundFade_dark 
	{
	position: fixed;
	display: block;
	height:100%;
	width:100%;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background-repeat:repeat;
	z-index:-1;
	transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	}

.backgroundFade_light 
{ background-image:url(../../__data/buttons_and_stuff/dot_translucent_gray_40perCent.png); }

.backgroundFade_mid  
{ background-image:url(../../__data/buttons_and_stuff/dot_translucent_gray_60perCent.png); }

.backgroundFade_dark  
{ background-image:url(../../__data/buttons_and_stuff/dot_translucent_gray_80perCent.png); }









/*	Menu Containers	
-------------------------------------------------------------- */

#menuBar_largeScreens,
#menuBar_mediumScreens,
#menuBar_smallScreens {
	display:block;	
	position:fixed;
	top:0px;
	height:60px;
	left:0px;
	right:0px;
	padding:0px;
	
	color: #fff !important;
	background-color: #080a17;
	background-color: rgba(8, 10, 23, 0.8);
	
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
	
	z-index:999;
	}

#menuBar_mediumScreens,
#menuBar_smallScreens {
	display:none;
	height:30px;
	}








/* Menu Elements
-------------------------------------------------------------- */

.menu_LeftHandSide, 
#menu_LeftHandSide, 
.menu_RightHandSide, 
#menu_RightHandSide 
	{
	position:absolute;
	display:block;
	text-align:left;
	}
#menu_LeftHandSide {
	left:5%;
}
.menu_RightHandSide, 
#menu_RightHandSide 
	{
	right:3%;
	}

#menu_LeftHandSide li,
#menu_RightHandSide li {
	float: left;
	position: relative;
	display:block;
	top:20px;
	margin:0;
	padding-bottom:15px;
/*	background:green;	*/
}

#menu_LeftHandSide ul ul li,
#menu_RightHandSide ul ul li {
	padding-top:10px;
/*	background:red;	*/
	}

#menu_LeftHandSide a,
#menu_RightHandSide a {
	background:none;
	padding-left:20px;
	padding-right:15px;
	padding-top:5px;
	padding-bottom:7px;
}

#menu_LeftHandSide ul ul,
#menu_RightHandSide ul ul {
	display: none;
	position: absolute;
	left: 0px;
	top:30px;
	padding:0;

	background-color:#4e505a; 
	background-color: rgba(78, 80, 90, 0.96);

/*	border-color:#fff;	
	border-style:solid;
	border-width:1px;	*/
	
	border-radius: 3px;	
	-moz-border-radius: 3px;

	z-index: 99999;
}
#menu_LeftHandSide ul ul {
	width:12em;
}
#menu_RightHandSide ul ul {
	width: 19em;
}

#menu_LeftHandSide ul ul li,
#menu_RightHandSide ul ul li {
	display:block;
	top:0px;
	left:0px;
	line-height:1.5em;
	font-size:0.83em;
	text-align:left !important;
	text-justify: distribute;
}

#menu_LeftHandSide ul ul a,
#menu_RightHandSide ul ul a {
	height: auto;
}
#menu_RightHandSide ul ul a {
	text-align:right;
}

#menu_LeftHandSide ul ul ul,
#menu_RightHandSide ul ul ul {
	top: -0.5em;
	left:-15em;
	width:16em;
	background-color:#404348;
}
#menu_LeftHandSide ul ul ul {
	left:0;
	right:-16em;
}

#menu_LeftHandSide ul li:hover > ul,
#menu_RightHandSide ul li:hover > ul {
	display: block;
}







/* MenuBar logos 
-------------------------------------------------------------- */

.smallMenu_logo {
	display:block;
	position:absolute;
	left:3%;
	top:8px;
}

.menuBar_logo img {
	margin-top:-10px;
}








/* PageSlide Menu for small devices 
-------------------------------------------------------------- */

#pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
	overflow: auto; 
    z-index: 999999;
    
    /* Specify the pageSlide width */
    width: 280px;
/*	width: 80%;	*/
    padding: 0px;

    /* Style the pageSlide appearance */
    background-color: #333;
	background-color: rgba(51, 51, 51, 0.9);
    color: #fff;
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222;
	}

.pageslide {
	height:auto;
	overflow-y: auto;
	overflow-x: none;
	-webkit-overflow-scrolling: touch;
		
	margin: 0;
	padding:0;
	
    background-color: #333;
	background-color: rgba(51, 51, 51, 0.9);
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222;	}


#pageslide .menu_LeftHandSide,
#pageslide .menu_RightHandSide,
#pageslide #nav,
#pageslide #nav a,
#pageslide #nav li,
#pageslide #nav li a,
#pageslide #nav ul,
#pageslide #nav ul ul,
#pageslide #nav ul li,
#pageslide #nav ul ul li,
#pageslide #nav_2,
#pageslide #menu_RightHandSide {
	position:relative;
	display:inline;	
	clear:none;
	float:left;
	text-align:left;
	width:200px;
	left:0;
	right:0;
	margin:0;
	padding-left:5px;
	padding-top:0px;
	padding-bottom:10px;
	font-size: 0.95em;
	line-height:1.0em;
	
	color: #fff;
	background:none;
	background-color:none;
	border: none; 
	}

#pageslide #menu_RightHandSide {
	top:200px !important;
	}

#pageslide  #nav ul ul li, 
#pageslide  #nav2 ul ul li {
	top:-1.5em;
	padding-left:10px;
}

#pageslide  #nav ul ul ul li, 
#pageslide  #nav2 ul ul ul li {
	top:1.5em;
}

.open_pageSlide {				/* Style the pageSlide Menu Button */
/*	display: none;
	float: left;
	width: 40px;
	height: 30px;
	top:7px;
	margin-right: 0px;
	background: url(../../__data/buttons_and_stuff/menu.png) center center no-repeat #19130C;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-border-radius: 6px;
	box-shadow: inset 0 0 3px #000;
	text-indent: -999999px;	
	border: 0;	*/
}










/* Landing Page Elements
-------------------------------------------------------------- */

#LandingPage_Container {
	display:block;
/*	position:relative;	*/
	position:absolute;
	top:15%;
	left:2%;
	right:0;
	width:94%;
/*	background:blue;	*/
	}

#LandingPage_Logo {
	display: block;
	position: absolute;
	top:34%;
	left:0%;
	height:35%;
	width:13%;
/*	background:green;	*/
	}

#LandingPage_Text {
	display: block;
	position: relative;
	top:0;
	left:16%;
	width:82%;
/*	background:red;	*/
	}




/* Animated Scrollorama homePage items */

.logoText_animation { 
	position: relative; 
	display: block; 
	margin: auto; 
	width: 100%; 
	left: 0; 
	}

.logoText_animation span { 
	display: inline-block; 
	position: relative; 
	line-height: 93px; 
	}

.logoText_animation h1 { 
	display: inline-block; 
	position: relative; 
	line-height: 93px;
	}



/* homepage logo & hover popUp */

.logo {
	height: 100%;
	top:0;
	left:0;
	border: none;
	outline:none;
	}
.logo img {
	max-height: 100%;
	max-width: 100%;
	}


.logo ul {
	display: none;
	position: absolute;
	left:5%;
	top:-80%;
	width:35.0em;
	padding:0;

	background-color:#fff; 
	background-color: rgba(250, 250, 250, 0.7);

/*	border-color:#000;	
	border-style:solid;
	border-width:1px;	*/
	
	border-radius: 3px;	
	-moz-border-radius: 3px;
	
	z-index: 99999;
}
.logo ul li {
	display:block;
/*	font-family: 'Times New Roman', Times New Roman, Times, serif;	*/
	font-family: 'HelveticaNeueW02-UltLt', Helvetica Neue, Helvetica, Arial, sans-serif;
	color:#333;
	font-size-adjust:none;
	padding:10px;
	padding-left:20px;
	padding-right:30px;
	}
.logo ul li b {
/*	font-family: 'Times New Roman', Times New Roman, Times, serif;	*/
	font-weight:bold;
	font-weight:900;
	}

.logo:hover > ul {
	display: block;
}








/* Typical Page Elements
-------------------------------------------------------------- */

#pageContent_fullWidth {
	display:block;
	position:absolute;
	width:85%;
	top:60px;
	left:5%; 
	padding-top:5%;
	padding-left:5%;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: hidden;
/*	background-color:green;	*/
	}


#pageContent_PrimaryPageContent,
#pageContent_SecondaryPageContent {
	display:block;
	position:relative;
	float:left;
	height: auto;
	padding-top:10%;
/*	background:blue;	*/
	}
#pageContent_fullWidth, 
#pageContent_PrimaryPageContent {
	min-height: 73%;
	}


.leftColumn_40percent,
.rightColumn_40percent { 
	width:20% !important;
/*	background-color:orange; */
	}
.leftColumn_60percent,
.rightColumn_60percent,
.rightColumn_60percent_projectPages { 
	width:50% !important;
/*	background-color:green;	*/
	}

.leftColumn_40percent {
	right:60%;
	padding-left: 12%;
	padding-right:8%;
	} 
.leftColumn_60percent {
	left:0%;
	padding-left: 9%;
	padding-right:11%;
	}
.rightColumn_40percent {
	right:0%;
	padding-left: 3%;
	padding-right:7%;
	}
.rightColumn_60percent,
.rightColumn_60percent_projectPages {
	left:40%;
	padding-left: 3%;
	padding-right:7%;
	}

.reducedPadding { 
	width:31% !important;
	padding-left: 5% !important;
	padding-right:3% !important;
	}



.leftColumn_30percent {
	right:70%;
	width:20%;
	padding-left: 5%;
	padding-right:5%;
	} 
.rightColumn_70percent {
	left:30%;
	width:60%;
	padding-left:7%;
	padding-right:3%;
	}















/* Project Grids
-------------------------------------------------------------- */

.boxedGrid
	{
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
	border:0;
	*border:none;
	outline:0;
	*outline:0;
	}

.gridItem
	{
    float: left;
    width: 32%;
    margin-left:  0.5%;
	margin-right: 0.5%;
	margin-top: 0.5%;
	margin-bottom: 0.5%;
	border:0;
	*border:none;
	outline:0;
	*outline:0;
	}
 
.gridItem img
	{
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	*border:none;
	*outline:none;
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
	transition:all .2s linear;
	}
	
.gridItem a
	{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	display:block;
	line-height:0;
	position:relative;
	text-decoration:none;
	overflow:hidden;
	*border:none;
	*outline:none;	
	}	
	
.gridItem a:hover img
	{
	opacity:.3;
	filter: alpha(opacity=30); 
	-ms-filter:"alpha(opacity=30)";
	}
	
.gridItem a:hover li
	{
	opacity:1;
	filter: alpha(opacity=100); 
	-ms-filter:"alpha(opacity=100)";
	}

.gridItem a>li
	{
	opacity:0;
	filter: alpha(opacity=0); 
	-ms-filter:"alpha(opacity=0)";

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	
	height:100%;	
	width:100%;	
	padding-left:5px;
	padding-right:5px;
	padding-top:35%;
	position:absolute;

	font-family: 'HelveticaNeueW02-55Roma', Helvetica Neue, Helvetica, Arial, sans-serif;
	text-align:center;

	-webkit-transition:opacity .2s linear;
	-moz-transition:opacity .2s linear;
	-o-transition:opacity .2s linear;
	transition:opacity .2s linear;

	z-index:1;
	}
	






	








/* Images
-------------------------------------------------------------- */

img {
	border:none;
	outline:none;
	}

.ImgCircle { 
	border:0;
	border-radius:300px;
	box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
	-moz-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
	}

.clipArt {
	width: 100%;
	border: none;
	outline:none;
	}
.clipArt img {
	max-height: 100%;
	max-width: 100%;
	}
		
.membershipLogos {
	height:80px;
	letter-spacing: 1em;
	}








/*	Social Media Inserts
-------------------------------------------------------------- */

#facebookWrapper {
	display:block;
	position:relative;
	
	margin:0 auto;
	margin-bottom:5%;
	width:100%;
	text-align:left; 
	
	transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
		
/*	background:orange;	*/
	}

.fb_iframe_widget iframe {
    position: relative !important;
}


.badBrowserMessage {
	display:block;
	}


.faceBook_extraExtraLargeScreen,
.faceBook_extraLargeScreen,
.faceBook_largeScreen,
.faceBook_mediumScreen,
.faceBook_smallScreen,
.faceBook_tinyScreen 
	{	
	display:none;
	}


@media only screen and (min-width:1500px)
{
	.faceBook_extraExtraLargeScreen {	
	display:block;
	}
	.badBrowserMessage {	
	display:none;
	}	
}

@media only screen and (min-width:1200px) and (max-width:1499px)
{
	.faceBook_extraLargeScreen {	
	display:block;
	}	
	.badBrowserMessage {	
	display:none;
	}
}

@media only screen and (min-width:950px) and (max-width:1199px)
{
	.faceBook_largeScreen {	
	display:block;
	}
	.badBrowserMessage {	
	display:none;
	}
}

@media only screen and (min-width:730px) and (max-width:949px)
{
	.faceBook_mediumScreen {	
	display:block;
	}
	.badBrowserMessage {	
	display:none;
	}
}

@media only screen and (min-width:500px) and (max-width:729px)
{
	.faceBook_smallScreen {	
	display:block;
	}
	.badBrowserMessage {	
	display:none;
	}
}

@media only screen and (min-width:0px) and (max-width:499px)
{
	.faceBook_tinyScreen {	
	display:block;
	}	
	.badBrowserMessage {	
	display:none;
	}
}









/* Google Map Insert - Direct Embed Version
-------------------------------------------------------------- */

#GoogleMap_Insert {	
	width:100%;
	height:500px;
	padding:0;
	margin:0; 
/*	background:red;	*/
	}
	
@media only screen and (min-height:1000px)
{
	#GoogleMap_Insert {	
	height:800px; 
	}
}

@media only screen and (min-height:900px) and (max-height:999px)
{
	#GoogleMap_Insert {	
	height:700px; 
	}
}

@media only screen and (min-height:800px) and (max-height:899px)
{
	#GoogleMap_Insert {	
	height:600px; 
	}
}

@media only screen and (min-height:700px) and (max-height:799px)
{
	#GoogleMap_Insert {	
	height:550px; 
	}
}

@media only screen and (min-height:600px) and (max-height:699px)
{
	#GoogleMap_Insert {	
	height:450px; 
	}
}

@media only screen and (min-height:500px) and (max-height:599px)
{
	#GoogleMap_Insert {	
	height:350px; 
	}
}

@media only screen and (min-height:400px) and (max-height:499px)
{
	#GoogleMap_Insert {	
	height:250px; 
	}
}

@media only screen and (min-height:0px) and (max-height:399px)
{
	#GoogleMap_Insert {	
	height:150px; 
	}
}








/* footer elements	
-------------------------------------------------------------- */

#footer_fixed {
	display:block;
	position:fixed;
	left:0;
	bottom:0px;
	height:60px;
	width:100%;
	background:#080a17;
/*	background:red;	*/
	}

#footer_floated {
	display:block;
	position:relative;
	float:left;
	clear:both;
	height:60px;
	width:100%;
	}

.siteDesign,
.copyright,
.social 
	{
	display: block;
	position:absolute;	
	margin: 0;
	padding: 0;
	border: 0;
	height: 30px;
	color: #fff;
	}
.siteDesign
	{
	text-align: right;
	right: 50px;
	bottom: 34px;
	z-index: 3;
	}	
.copyright
	{
	text-align: right;
	width: auto;
	right:5%;
	left: auto;
	z-index: 2;
	}
.copyright p {
	max-width:25em;
	}

.social 
	{
	text-align: left;
	left: 5%;
	width:300px;
	bottom: 5px;
	height: 60px;
	overflow: hidden; 
	outline: none;
	z-index: 9;
	}