/* ////////////////////////////////////////////////////////////////////
 	                     Glenn Diffey Builders 
 *                        http://klau.co.nz/  
 *                           By Kinson Lau 
 /////////////////////////////////////////////////////////////////// */

 /* Global reset */

 *, html, nav ul, nav ol, form, fieldset, legend {
 	margin:0;
 	padding:0;
 }

 article, aside, figure, footer, header, hgroup, nav, section, div { display:block; }

 img {
 	border: 0;
 }

 /* Links */

 a {
 	text-decoration: none;
 	color: rgba(255, 255, 255, 1);
 	/* No background, just iOS:*/
 	-webkit-tap-highlight-color: transparent;

 	/* No background iOS + Android:  */
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

 	/* CSS3 Transition */
 	-webkit-transition: ease 0.2s all;
 	-moz-transition: ease 0.2s all;
 	transition: ease 0.2s all;
 }

 a:links {

 }

 a:hover{
 	color: rgba(255,255,255,0.75);
 	*color: #cdcdcd; /* for browsers that don't recognise rgba */

 	/* CSS3 Transition */
 	-webkit-transition: ease 0.2s all;
 	-moz-transition: ease 0.2s all;
 	transition: ease 0.2s all;
 }

 nav a.current {
 	color: #ffffff; /* for modern browsers */
 	filter:Alpha(opacity=75);
 	opacity: 0.75;
 	-ms-opacity: 0.75;
 	*color: #cdcdcd; /* for browsers that don't recognise rgba */
 }

 a:visited {

 }

 a:active {

 }

 b {
 	font-family: 'NeutraText-bold';
 }

 /* Typography & Font Embed */

 @font-face {
 	font-family: 'NeutraText-Book';
 	src: url('../font/book/neutratext-book.eot');
 	src: url('../font/book/neutratext-book.eot?#iefix') format('embedded-opentype'),
 	url('../font/book/neutratext-book.woff') format('woff'),
 	url('../font/book/neutratext-book.ttf') format('truetype'),
 	url('../font/book/neutratext-book.svg#neutratext-book') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }

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

 @font-face {
 	font-family: 'NeutraText-light';
 	src: url('../font/light/neutratext-light.eot');
 	src: url('../font/light/neutratext-light.eot?#iefix') format('embedded-opentype'),
 	url('../font/light/neutratext-light.woff') format('woff'),
 	url('../font/light/neutratext-light.ttf') format('truetype'),
 	url('../font/light/neutratext-light.svg#neutratext-light') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }

 h1, h2, h3, h4, h5, p {
 	margin:0;
 }

 h1, h2, h3, h4, h5 {
 	text-transform: uppercase;
 }

 h1 {

 }

 h2 {
 	font-size: 28px;
 	font-family: 'NeutraText-light';
 	color: black;
 	margin-bottom: 12px;
 }

 h3, #blackBtn {
 	font-size: 13px;
 	font-family: 'NeutraText-bold';
 	color: #ffffff;
 }

 h4 {

 }

 h5 {

 }

 p {
 	font-size: 16px;
 	line-height: 20px;
 	font-family:'NeutraText-Book';
 	color : #333333;
 }

 span {

 }

 /* Non-Semantic Helper Classes */

 .clearfix:before, .clearfix:after {
 	content: ""; display: table; 
 }

 .clearfix:after { 
 	clear: both; 
 }

 .clearfix { 
 	*zoom: 1; 
 }

 .left { 
 	float:left;
 }

 .right {
 	float:right;
 }

 /* Basic */

 html, body {
 	width: 100%;
 	height: 100%;
 }

 body {
 	/*background-color: #000;*/
 	font-family:'NeutraText-Book';
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
 	-o-font-smoothing: antialiased;
 }

 .container {
 	/*display: none;*/
 	position: relative;
 }

/*/////////////////////////////////////////
         Page Layout #main  
         //////////////////////////////////////// */

         .loader {
         	/*background-color: #000;*/
         	text-align: center;
         	position: fixed;
         	top: 50%;
         	left: 50%;
         	margin-top: -16px;
         	margin-left: -16px;
         }

         .loader img {
         	opacity: 0.5;
         }

         .loader h2 {
         	font-size: 18px;
         	margin-top: 20px;
         	font-family: 'NeutraText-bold';
         	color: #999;
         }

         .wrapper {
         	width: 480px;

         	/* ie */
         	background: transparent;
         	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
         	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF);   /* IE6 & 7 */
         	zoom: 1;
         	background-color: rgba(255,255,255,0.9);
         }

         .home-wrapper {
         	width: 600px;
         }

         #logo {
         	width: 331px;
         	height: 169px;
         	display: block;
         	background: url(../i/logo.jpg) no-repeat;
         	position: fixed;
         	top: 45px;
         	/*top: 19px;*/
         }

         .wrapper {
         	padding-bottom: 20px;
         }

         .wrapper .shell {
         	margin: 10px 10px 0;
         	padding: 46px 39px 37px;
         	border-top: 1px solid #c5c5c5;
         	border-right: 1px solid #c5c5c5;
         	border-left: 1px solid #c5c5c5;
         }
        

         .wrapper .col-right {
         	width: 30%;float:right;
         }
         .wrapper .col-left {
         	width: 70%;float:left;
         }

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

         	.col-right img {
         		width: 96px;
         		height: 96px;
         	}
         }

         #main {
         	position:relative;
         	float:right;
         	z-index:2;
         	padding-bottom: 30px;
         	background: url(../i/blackBtn-shadow.png) no-repeat bottom center;
         }

         .box, section {
         	margin-bottom: 50px;
         }

         section#control-bar {
         	margin-bottom: 0;
         }

         article p {
         	margin-top: 16px;
         }

         article ul {
         	margin-top: 20px;
         }

         article ul li {
         	list-style: none;
         	float: left;
         	margin: 20px 16px 0 0;
         	color: #333;
         	font-size: 13px;
         	line-height: 28px;
         }

         .text ul {
         	padding-left: 20px;
         }

         .text ul li {
         	margin-top: 5px;
         	font-size: 16px;
         	list-style: outside;
         }

/*article ul li:first-child {
	margin-left: 0;
	}*/

	/* icons */

	.icon.mail {
		background: url(../i/mail-ico.gif) no-repeat center center;
	}

	.icon.showcase {
		background: url(../i/showcase-ico.png) no-repeat center center;	
	}

	.icon.services {
		background: url(../i/services-ico.png) no-repeat center center;	
	}

	/* Black Button */

	#blackBtn .icon {
		width: 20px;
		height: 10px;
		display:inline-block;
		margin: 2px 8px 0 0;

		filter:Alpha(opacity=30);
		opacity: 0.3;
	}

	#blackBtn, .content-left {
		background-color: #000000;
		display: block;
		padding: 0 10px 10px;
		text-transform: uppercase;
		text-align: right;
		vertical-align: top;
	}

	#blackBtn .border {
		padding: 26px 38px 20px;
		border-bottom: 1px solid #262626;
		border-right: 1px solid #262626;
		border-left: 1px solid #262626;
		display: block;
		vertical-align: top;
		color: rgba(255,255,255,0.5);
		line-height: 20px;
	}

	#blackBtn .border,
	#blackBtn .icon {
		/* CSS3 Transition */
		-webkit-transition: ease 0.2s all;
		-moz-transition: ease 0.2s all;
		transition: ease 0.2s all;
	}

	#blackBtn:hover .icon,
	#blackBtn:hover .border {
		filter:Alpha(opacity=100);
		color:#ffffff;
		opacity: 1;

		/* CSS3 Transition */
		-webkit-transition: ease 0.2s all;
		-moz-transition: ease 0.2s all;
		transition: ease 0.2s all;
	}

	/* Background image */

	#frame {
		position:absolute;
		z-index: -2;
	}

	#frame li img {
		display: none;
	}

	#frame ul span.top,
	#frame ul span.bottom {
		position: fixed;
		z-index: -1;
		height: 321px;
		width: 100%;
		background: url(../i/bg-top-shadow.png) repeat-x;
		display: none;
	}

	#frame ul span.bottom {
		background: url(../i/bg-bot-shadow.png) repeat-x;
		bottom: 0;
		height: 310px;
	}

	#frame ul span.top {
		top: 0;
		margin-bottom: -1px;
	}

/*======================
 *       Forms       
 *======================*/

 form article {
 	margin-bottom: 38px;
 }

 fieldset {
 	border: none;
 	margin-top: -1px;
 	position: relative;
 	border: 1px solid #e0e0e0;
 	padding-left: 85px;

 	/* ie */
 	background: transparent;
 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF)"; /* IE8 */
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF);   /* IE6 & 7 */
 	zoom: 1;
 	background: rgba(255,255,255,0.2);
 }

 label {
 	position: absolute;
 	left: 0;
 	line-height: 19px;
 	margin: 6px 0 0 10px;
 }

 input[type=text] {
 	height: 15px;
 	padding: 10px 0;
 }

 input[type=text], textarea {
 	width: 100%;
 }

 input[type=text], textarea, label {
 	font-family:'NeutraText-Book';
 	font-size: 16px;
 	border: none;

 	/* ie */
 	background: transparent;
 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF)"; /* IE8 */
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF);   /* IE6 & 7 */
 	zoom: 1;
 	background: rgba(255,255,255,0.2);
 }

 textarea {
 	max-width: 380px;
 	height: 125px;
 	padding: 10px 0;
 }

 input:focus, textarea:focus {
 	outline: 0;
 	background: #ffffff;

 	/* transition */
 	-moz-transition: ease 0.2s all;
 	-webkit-transition: ease 0.2s all;
 	transition: ease 0.2s all;
 }

 button {
 	border: none;
 	cursor:pointer;
 	width: 100%;
 	float: right;
 }

 span.error {
 	position: absolute;
 	left: 85px;
 	top: 9px;
 	color: #ee2424;
 }

 span.message {
 	margin-bottom: 10px;
 	color: #4fbc1a;
 	display: block;
 }

/*======================
 *       Header       
 *======================*/

 header {
 	height: 240px;
 }

/*======================
 *       Navigation       
 *======================*/

 nav {
 	position: fixed;
 	z-index:1;
 	right: 0;
 	top: 49px;
 	right: 76px;
 }

 nav ul {

 }

 nav ul li {
 	float: left;
 	list-style: none;
 	margin-left: 24px;
 }

 nav ul li a {
 	color: #ffffff;
 	font-family: 'NeutraText-bold','Arial';
 	font-size: 13px;
 	text-transform: uppercase;
 	display: block;
 }

/*======================
 *       Section       
 *======================*/

 /* Profile */

 article.profile ul {
 	margin-top: 0;
 }

 /* Services */

 #services li {
 	float: none;
 	margin: 0;
 	text-transform: uppercase;
 	font-family: 'NeutraText-bold';
 }

 /* Showcase */

 #showcase {
 	background: transparent;
 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E0FFFFFF,endColorstr=#E0FFFFFF)"; /* IE8 */
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E0FFFFFF,endColorstr=#E0FFFFFF);   /* IE6 & 7 */
 	zoom: 1;
 	background-color: rgba(255,255,255,0.88);
 }

 #showcase h2 {
 	margin-right: 76px;
 }

 #showcase nav ul li a {
 	color: #000000;
 }

 #showcase nav ul li a:hover{
 	color: rgba(0,0,0,0.75);
 	*color: #333333; /* for browsers that don't recognise rgba */
 }

 #showcase .box {
 	*width: 700px;
 	position: relative;
 	z-index: 999;
 }

 #showcase .projects {
 	clear: both;
 }

 #showcase .projects li a {
 	cursor: pointer;
 	height: 349.5px;
 	width: 700px;	
 	display: block;
 	position: relative;
 }

 #showcase .content-left p {
 	color: #999999;
 	text-transform: lowercase;
 	margin-top: 10px;
 }

 #showcase .wrapper {
 	width: 500px;
 	height: 100%;
 	position: relative;
 	overflow: hidden;
 	padding: 0;
 	opacity: 1;
 }

 #showcase .content-left {
 	width: 190px;
 	height: 330px;
 	padding: 10px 0 10px 10px;
 	text-align: left;
 }

 #showcase .content-left .border {
 	padding: 29px 29px;
 	display:block;
 	border: 1px solid #262626;
 	height: 270px;
 }

 #showcase .wrapper img {
 	width: 130%;
 }

 #showcase .shell {
 	position: absolute;
 	filter: Alpha(opacity=30);
 	opacity: 0.3;
 	top: 0;
 	margin: 10px 10px 10px 0;
 	border-left: 0;
 	border-bottom: 1px solid #C5C5C5;
 	width: 409px;
 	height: 245px;
 }

 #showcase span.hover-state {
 	position: absolute;
 	z-index: 9999;
 	filter:Alpha(opacity=0);
 	opacity:0;
 	height: 100%;
 	width: 500px;
 	top:0;
 	right:0;

 	/* ie */
 	background: transparent;
 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);   /* IE6 & 7 */
 	zoom: 1;
 	background-color: rgba(0,0,0,0.3);
 }

 #showcase  .fullscrn {
 	position: absolute;
 	top: 296px;
 	left: 40px;
 	filter:Alpha(opacity=0);
 	opacity:0;
 }

 #showcase .projects li {
 	list-style: none;
 	margin-bottom: 30px;
 }

 #showcase .projects li .long-shadow {
 	width: 700px;
 	height: 30px;
 	position: absolute;
 	z-index: 999;
 	bottom: -30px;
 	left: 0;
 	background: url(../i/shadow-sprite.png) 0 0 no-repeat; 
 }

 #showcase .projects li a {
 	position: relative;
 }

 #showcase .projects li a:hover span.hover-state,
 #showcase .projects li a:hover .fullscrn  {
 	filter: Alpha(opacity=1);
 	opacity: 1;

 	/* transition */
 	-webkit-transition: ease 0.2s all;
 	-moz-transition: ease 0.2s all;
 	transition: ease 0.2s all;
 }

 #showcase .projects li a:hover .long-shadow {
 	background: url(../i/shadow-sprite.png) 0 -30px no-repeat; 
 }

 /* Showhome - Details */

 #control-bar {
 	position: fixed;
 	bottom: 0;
 	z-index: 99999;
 	width: 100%;
 	height: 70px;
 	background-color: #ffffff;
 }

 a.back, a.back:hover {
 	background: url(../i/back-btn-sprite.gif) no-repeat;
 	width: 70px;
 	height: 70px;

 	-moz-transition: none;
 	-webkit-transition: none;
 	transition: none;
 }

 a.back:hover {
 	background-position: 0 -70px;
 }

 .caption {
 	margin: 10px 0;
 	border-top: 1px solid #d0d1cf;
 	border-bottom: 1px solid #d0d1cf;
 	display: block;
 	padding: 17px 0;
 	height: 14px;
 }

 .caption h3 {
 	color: #000000;
 	font-family: 'NeutraText-bold';
 	font-size: 13px;
 	margin:0 10px 0 22px;
 }

 .caption span {
 	font-size: 16px;
 	color: #999999;
 }

 .caption span.right {
 	color: #000000;
 	margin-right: 39px;
 	font-family: 'NeutraText-bold';
 }

 .galleryBtn {
 	display: block;
 	width: 131px;
 	background-color: #000000;
 	height: 70px;
 }

 #prevBtn, #nextBtn {
 	width: 60px;
 	height: 70px;
 	float: left;
 	display: block;
 	background: url(../i/gallery_nav_sprite.gif) no-repeat 0px -70px;
 	cursor:pointer;
 }

 #nextBtn {
 	width: 65px;
 	background-position: -60px -70px;
 }

 #nextBtn:hover {
 	background-position: -60px 0.5px;
 }

 #prevBtn:hover {
 	background-position: 0px 0.5px;
 }

 #count, #total {
 	color: #000000;
 	font-size: 16px;
 }

 #frame li p {
 	font-size: 100px;
 	color: #fff;
 	position: fixed;
 	left: 10px;
 	bottom: 80px;
 	width:100%;
 	text-align: center;
 	display: none;
 	font-family:'NeutraText-Book', 'Arial';
 	opacity:0.8;
 	line-height: inherit;
 }

 /* Contact */

 #contact-form {
 	width: 480px;
 }

 ul.address:first-child {
 	margin-right: 45px;
 }

 ul.address li {
 	float: none;
 	margin: 0;
 	line-height: 20px;
 	font-size: 16px;
 	font-family: 'NeutraText-Book';
 	color: #333333;
 }

 ul.address li.brand, .address li span {
 	font-family: 'NeutraText-bold';
 	font-size: 13px;
 }







/* ////////////////////////////////////////////////
		Media Query
		//////////////////////////////////////////////// */

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

			header {
				height: 350px;
			}

			#logo, nav {
				position: relative;
			}

			#logo {
				float: none;
				background-size: 200px;
				width: 200px;
				height: 220px;
			}

			#main, nav {
				float:none;
			}

			#main {
				width: auto;
				display: block;
				margin-right: 10px;
				margin-left: 10px;
			}

			nav {
				left: -10px;
			}

			nav li {
				margin-bottom: 10px;
				width:80px;
			}

			nav ul li a {
				margin-left: 0px;
				font-size: 16px;
			}

			#blackBtn, .wrapper {
				width: auto;
				display: block;
			}

			/* Contact Page */

			button {
				width: 480px;
			}

			#contact-form {
				width: auto;
				display: block;
			}

			#contact-form input[type=text], #contact-form textarea {
				float: right;
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
			}

			.wrapper .shell {
				padding: 46px 20px 37px;
			}

			/* Showcase */

			#frame li p {
				font-size: 85px;
			}

			#showcase .box, #showcase h2 {
				float: left;
			}

			#showcase h2 {
				margin: 0 0 20px 10px;
			}

			#showcase .content-left .border {
				height: 90px;
			}

			.hover-state,
			.mob-hidden  {
				display: none !important;
			}

			#showcase .wrapper {
				width: auto;
				display: block;
			}

			#showcase .wrapper img {
				width: 250%;
				min-width: 270px;
			}

			#showcase .box {
				width: 100%;
			}

			#showcase .projects li a, #showcase .projects li .long-shadow {
				width: 100%;
			}

			#showcase .projects li a {
				height: 170px;
				overflow-y: hidden;
			}

			#showcase .content-left {
				width: 200px;
				height: 150px;
				padding: 10px 0 10px 10px;
				text-align: left;
			}

			#showcase .content-left .border {
				padding: 29px 10px;
			}

			#showcase .shell {
				width: 100%;
				display: block;
				height: 65px;
			}

			/* Control Bar */

			#control-bar {
				height: 50px;
			}

			#control-bar a {
				display: none;
			}

			#nextBtn,
			#prevBtn {
				background-size: 95px;
				width: 50px;
			}

			#nextBtn {
				background-position: -51px -50px;
			}

			#prevBtn {
				background-position: 0 -50px;
			}

			#prevBtn:hover {
				background-position: 0 -50px;
			}

			#nextBtn:hover {
				background-position: -51px 1px;
			}

			.galleryBtn {
				width: 100px;
				height: 50px;
			}

			.caption {
				padding: 10px 0;
			}

			.caption h3 {
				margin-left: 5px;
			}

			}/* end media query 760 */



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

				#frame li p {
					font-size: 85px;
				}

				header {
					height: 350px;
				}

				#logo, nav {
					position: relative;
				}

				#logo {
					float: none;
					background-size: 200px;
					width: 200px;
				}

				nav {
					float: none;
				}

				#main {
					float: none;
				}

				article ul li {
					margin-left: 0;
					margin-right: 10px;
				}

				/* Contact Page */

				#contact-form button {
					width: 300px;
				}

				fieldset {
				}

				#contact-form textarea {
					max-width: 91%;
				}


				}/* end media query 380 */