/*
Theme Name: S3 Architects
Author: Synchromedia Group
Author URI: http://www.smg.com.au/
Text Domain: twentytwelve


/* =Reset
-------------------------------------------------------------- */
* {
  outline: 0 !important; }

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; 


   }
   

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

html, body {
  height: 100%; -webkit-text-size-adjust: 100%;  overflow-x: hidden; overflow-y: auto; }

body{ font: 11px/16px Arial; color: #000; margin: 0px; padding: 0px; background: #000 !important; height: 100%;  }
.archive{ 
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch; }
a{ color: #000; font-weight: bold;}
a:hover{ color: #999; text-decoration: none; }
h1,h2,h3,h4,h5,p,form{ margin: 0px; padding: 0px; margin-bottom: 15px;}
h1{ font-size: 15px; font-weight: bold;}
.projectTitleArea{
position: fixed;
bottom: 92px;
left: 100px;
}
strong{ font-weight: 700; }
h1.projectTitle{  font-size: 11px; color: #FFF; text-transform:uppercase;}
h1 a{ text-decoration: none; }
h2{ font-size: 14px; font-weight: bold; color: #555;}

.blog h1 { clear: both; }

.home .rightContent{ width: 50%; left: 0px; }
.home .rightContent h1{ font-size: 30px; line-height: 30px; margin:0px; padding:0px; font-weight: bold;}

.alignright{ float: right; margin-bottom: 23px; margin-left:23px !important }
.alignleft{ float: left; margin-right: 0px; margin-bottom: 23px; }
.home .alignright {max-height:75%; width:auto;}
.home .alignleft {max-height:75%; width:auto;}
#logo{ float: right; margin-top: 46px; margin-right: 100px; width: 160px; height: auto;   }
#logo img{ width: 160px; height: auto;   }

#logo a:hover img{ opacity: 0.8; }
#contentArea{ clear: both; }
.whiteBox{ background: url(images/content-back.png); }
.rightContent{ position: absolute; overflow-x: hidden; vertical-align: middle; right: 0px;  margin-right: -5000px; float: right; width: 50%;  top: 61%;  height: 21%; overflow: auto; z-index:9999999;}

.blog .rightContent{  width: 66%;  left: 0px; top: 16%; margin-right: 100px; height: 66%; }
.page .rightContent{  width: 50%;  left: 0px; top: 25%; margin-right: 0px; height: 50%; }
.theContent{ padding: 15px; padding-right: 23px; text-align:left; }
.page .theContent, .blog .theContent{ padding: 15px; padding-left: 100px; }
.home .rightContent, .page-id-42 .rightContent, .page-id-55 .rightContent{  top: 60%; height: 20% }
.home .rightContent {width:50%}
.page-id-36 .rightContent{  top: 35%; height: 315px;width: 33%; overflow: auto}
.page-id-162 .rightContent{  top: 61%; height: 20% }
.page-id-85 .rightContent{  top: 61%; height: 20%; width: 33% }
.page-id-55 .rightContent{  width: 33%; height:30%;top: 50%  }
.page-id-39 .rightContent{ padding-top: 30px; opacity: 1}
#bottomPageDoNotDelete{position:fixed; bottom:0;left:0;}


#backButton{ position: fixed; top: 46px; left: 100px; z-index: 99999999;}
#backButton a{ width: 20px; height: 20px; display:block;}
#backButton a:hover{ opacity: 0.7;}
#menuButton{ position: fixed; bottom: 46px; left: 100px; z-index: 99999999; }
#menuButton a{ color: #FFF; font-weight: bold; text-decoration: none; font-size: 15px; width: 20px; height: 20px; display:block; }
#menuButton a:hover{ opacity: 0.7;}
#menuButton.visible{  display: block !important;}
.home #infoButton, .page #infoButton, .blog #infoButton, .archive #infoButton{ display: none;}
#infoButton{ position: fixed; bottom: 46px; right: 100px; z-index: 99999999;}
#infoButton a{ text-decoration: none; line-height: 20px; width: 20px; height: 20px; display:block;}
#infoButton a:hover{ opacity: 0.7;}
#infoButton.background--light a{ color: #000; }
#infoButton.background--dark a{ color: #000; }
#menu { background: #FFF; height: 200px; position: fixed; z-index: 999999999999; bottom: 0px; left: 0px; width: 100%; display: none; font-size: 11px;}
#menu ul{ list-style:none; margin: 0px; padding: 0px;}
#menu ul li{ list-style:none; margin: 0px; padding:0px; line-height: 26px;}
#menu ul li a{ text-decoration: none; color: #000; font-size: 11px;line-height: 20px; font-weight: normal; text-transform: uppercase; }

#menu ul.sub-menu li a{ color: #000; font-size: 9px;}

#menu ul li a:hover{ color:#999; }
#header{  position: fixed; right: 0px; z-index: 9999;}
#prevslide, #nextslide {  top: 50% !important; height: 50px !important; width: 31px !important;  position: fixed;}
#prevslide{ background: url(images/left-arrow.png) no-repeat !important; left: 100px !important;} 
#nextslide{ background: url(images/right-arrow.png) no-repeat !important; right: 100px !important;} 
a#prevslide, a#nextslide{ opacity: 1 !important; }
a:hover#prevslide, a:hover#nextslide{ opacity: 0.6 !important; }

body.archive{ background: #000;}

#projects{   -webkit-overflow-scrolling: touch; } 

.archive .project { width: 25%; height: auto;  float: left;  position: relative; }
.archive .project a{ height: 0px; }
.archive .project img{ display: block; width: 100%; height: auto;}
.archive .project h2{ padding: 15px;  margin-top: -50px; font-size: 12px; color: #FFF; text-transform: uppercase; position: absolute;}
.archive .project a h2{ display:none; text-align: right; width: 89%;}
.archive .project a:hover h2{ display: block;}
.archive .project a:hover img{ opacity: 0.8; }


.archive .project a{ color: #FFF; font-weight: normal;}
.archive #prevslide, .archive #nextslide{ display: none !important;} 
.clear{clear:both;}
.single-project{ background: #000;}
.menuCol{ width: 16.66%; float: left; padding-top: 23px; padding-bottom: 23px;}
#clientLogin{ float: right; padding-top: 23px;}
#clientLogin a{ text-decoration: none; color: #000; font-weight: normal;}
.menuWrap{ padding-left: 100px; padding-right: 100px;}


.page-id-55{ background: none;}
#map-canvas {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 0;
}
.home .rightContent{ width: 35%; left: 0px; }
.home .rightContent h1{ font-size: 25px; line-height: 30px; margin:0px; padding:0px; font-weight: bold; text-align:auto !important;}

a:hover .nextproject, a:hover .prevproject { opacity: 1;}
a.close{ font-size: 15px; text-decoration: none; font-weight: normal;}



#supersized-loader{ background: url(images/loading.gif) !important; }



.home .mCustomScrollBox, .page-id-55 .mCustomScrollBox, .page-id-36 .mCustomScrollBox, .single-project .mCustomScrollBox, .page-id-42 .mCustomScrollBox, .page-id-85 .mCustomScrollBox { 



/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-align:center;

/* Firefox */


/* W3C */
display:box;
box-align:center;

}
#supersized li{ background: #000 !important; }


@media only screen and (max-width: 1200px) {

.archive .project{ width: 33.33333%;  }

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1200px) {
	#logo{ margin-right: 46px;}
	.rightContent{ width: 50%;}
	#menuButton{ left: 46px; }
#backButton{ left: 46px; }
	.projectTitleArea { left: 46px;}
#infoButton { right: 46px;}
.theContent, .page .theContent, .blog .theContent{ padding: 15px; padding-left: 46px; }
	#prevslide{ left: 46px !important;} 
	#nextslide{ right: 46px !important;} 
.menuWrap { padding-left: 46px; padding-right: 46px;}
.menuCol{ width: 120px; ; padding-top: 23px; padding-bottom: 0px;}
.home .rightContent{ width: 50%;}

.archive .project a img{ opacity: 1; }
.archive .project a h2{ display: block; }
.archive .project a:hover img{ opacity: 0.8; }

}



/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 700px) {
 html, body {
    height: 100%;
}
#logo{ margin-right: 23px; margin-top: 23px; width: 100px; height: auto; }
#logo img{ width: 100px; height: auto;   }

.home .rightContent h1{ font-size: 20px; line-height: 24px; }
#prevslide{ left: 23px !important;} 
	#nextslide{ right: 23px !important;} 
	#menuButton{ left: 23px; }
	#backButton{ left: 23px; top: 23px; }
.projectTitleArea { left: 23px; bottom: 46px;}
.menuWrap { padding-left: 10px; padding-right: 10px;}
#clientLogin{ float: left; }
.rightContent{ width: 50%; }
.rightContent, .home .rightContent, .page .rightContent, .blog .rightContent{ top: auto;  bottom: 71px; height: 50%; width: 100%; }
.home .rightContent { height: 27%; }
.theContent, .page .theContent, .blog .theContent{ padding: 15px; padding-left: 23px; }


.archive .project{ width: 50%; }

#menuButton{ bottom: 23px; }
#infoButton{ bottom: 23px; right: 23px; }
#menu { height: 150px; }
.menuCol{ width: 25%; padding-top: 23px; padding-bottom: 0px; }
#menu ul li a{ display: block; text-align:left;text-indent: 13px;}
.single-project .rightContent{ bottom: 60px; height: 30%;  }
.home #prevslide, .single-project #prevslide{ top: 40% !important; } 
.home #nextslide, .single-project #nextslide{ top: 40% !important; } 


.archive .project a img{ opacity: 1; }
.archive .project a h2{ display: block; }
.archive .project a:hover img{ opacity: 0.8; }

#menuButton img, #menuButton a{ width: 20px; height: 20px; }
#infoButton img, #infoButton a{ width: 20px; height: 20px; }
#backButton img, #backButton a{ width: 20px; height: 20px; }
#prevslide{ background-size: 20px 32px !important; width:20px !important; height:32px !important;} 
#nextslide{ background-size: 20px 32px !important; width:20px !important; height:32px !important;} 
img.alignright {max-width:50%; height:auto }
img.alignleft {max-width:50%; height:auto }
#menuButton a:hover{ opacity: .9;}
}



@media only screen and (max-width: 479px) {


	#logo{ margin-right: 23px; margin-top: 23px;}
	#logo img{ width: 100px; height: auto;   }
	a#prevslide{ left: 23px !important;} 
	a#nextslide{ right: 23px !important;} 
	#menuButton{ left: 23px; }
	#backButton{ left: 23px; top: 23px; }
#infoButton { right: 23px;}
.projectTitleArea { left: 23px; bottom: 46px;}
.rightContent, .home .rightContent, .page .rightContent, .blog .rightContent{ top: auto;  bottom: 71px; height: 50%; width: 100%; }
.single-project .rightContent{ bottom: 90px; height: 30%;  }

.theContent{ padding: 23px !important; }
.home .rightContent{ height: 23%; }
.home .rightContent h1{ font-size: 20px; line-height: 24px; }


.home #prevslide, .single-project #prevslide{ top:40% !important; } 
.home #nextslide, .single-project #nextslide{ top:40% !important; } 

#menu{ height: 200px; }
.menuCol{ width: 50%; padding-top: 10px; padding-bottom: 0px; }
#menu ul li a{ display: inline-block; text-align:left; }
#clientLogin{ clear:both; padding: 0px; float: left; }

.archive .project{ width: 100%; }
.archive .project a img{ opacity: 1; }
.archive .project a h2{ display: block; }
.archive .project a:hover img{ opacity: 0.8; }
.blog .alignright {max-width:100%; height:auto }
.blog .alignleft {max-width:100%; height:auto }
#menuButton{ bottom: 23px; }
#infoButton{ bottom: 23px; }
#menuButton a:hover{ opacity: .9;}

}

@media only screen and (max-height:360px)  {

	
	
 	.single-project .rightContent{ height: 70px; width: 80%; left: 10%; top: 50%; }
	.home .rightContent{ height: 70px; width: 80%; left: 10%; top: 50%; }
	.home #prevslide, .single-project #prevslide{ top:30% !important; } 
.home #nextslide, .single-project #nextslide{ top:30% !important; } 
.home a#prevslide, .single-project a#prevslide{ top:30% !important; } 
.home a#nextslide, .single-project a#nextslide{ top:30% !important; } 

.projectTitleArea{ display: none; }