/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; font-family: 'Raleway', sans-serif; }

body, button, input, select, textarea { font-family: 'Raleway', sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #e6af61; color: #fff; text-shadow: none; }
::selection { background: #e6af61; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #5f5f5f; text-decoration: none; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; }

a:visited { color: #5f5f5f; }

a:hover { color: #e6af61; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; }

a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */
   
p{ font-family: 'Raleway', sans-serif; margin:0;padding:0; font-size:1.1em; line-height:1.6em;}   

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }

/* =============================================================================
   Main
   ========================================================================== */

header				{ height:80px; width:100%; background:#fff; overflow:hidden; }
.main-name			{ text-align:center;  text-transform:uppercase; font-weight:800; font-size:1.3em; letter-spacing:0.1em; height:40px; line-height:40px; margin:auto; height:40px; }
.main-name a 		 	{ padding:20px; color:#000; }
.main-name a:hover 	 	{ color:#e6af61; }
article 			{ width:100%; position: inherit; display: block; }
article p			{ margin-bottom:25px; }
aside p				{ margin-bottom:25px; }
aside 				{ width:100%%; }   	
.container			{ margin:0 auto; padding:20px; }
header .container	 	{ max-width:1200px; }
footer .container	 	{ max-width:1200px; }

/* =============================================================================
   Main - Intro
   ========================================================================== */
	
#intro h1			{ max-width:600px; margin:0 auto; text-align:center; font-weight:400; font-size:2.1em; letter-spacing:0.1em; padding: 0 20px 0 20px; color:#fff; }
#intro .more h5			{ background:#e6af61; width:80px; height:30px; text-align:center; line-height:30px; text-transform:uppercase; margin:0 auto; color:#fff; margin-top:30px; -moz-border-radius: 2px; border-radius: 2px; font-weight:800; letter-spacing:0.15em; font-size:0.85em; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear;  }
#intro .more h5:hover	 	{ background:#434343; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; }
#intro				{ padding-top:100px; width:100%; padding-bottom:40px; float:left; background:url("img/background-large.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-clip: border-box; background-origin: padding-box; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:#c0c0c0; }

/* =============================================================================
   Main - Project List
   ========================================================================== */
		
#project-list				{ margin:0 auto; margin-top:50px;}	
#project-list .project-image	  	{ height:100px; opacity:1; display:block; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; background:#e6af61; margin:0; width:100%; } 
#project-list .project-image:hover 	{ background:#434343; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; }
#project-list h3 			{ display:block; text-align:center; line-height:25px; font-weight:400; -moz-transition:color 0.2s linear; -webkit-transition:color 0.2s linear; }
#project-list h3:hover 			{ color:#777; -moz-transition:color 0.2s linear; -webkit-transition:color 0.2s linear; }
#project-list a 			{ display: block; float: left; margin: 0; position: relative; vertical-align: top; width:100%; color:#fff; font-size:1.3em;}
.energy-efficient img 			{ display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:32px; }
.samaritan-cloud img			{ display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:32px; }
.rendezvous img 			{ display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:32px; }
.scalability img 				{ display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:32px; }
.health-care img 				{ display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:40px; }	
.misc img 				{ display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:32px; }

/* =============================================================================
   Main - Profile
   ========================================================================== */

#profile 		{ font-size:1.15em; line-height:1.6em; font-weight:400; }
.brief-about 		{ font-weight:500; font-size:1.3em; border-top:1px solid #d6d6d6; padding-top:50px; padding-bottom:50px;width:100%; float:left;}
aside h5		{ font-size:1em; }
aside a			{ color:#000; }
aside b			{ font-weight:500; }

/* =============================================================================
   Main - Footer
   ========================================================================== */
   
footer a		{ text-transform:uppercase; font-weight:600; font-size:0.9em; letter-spacing:0.1em; }
footer ul 		{ padding:0; text-align:center; width:250px; margin:0 auto; }
footer li 		{ display:inline-block; margin-right:15px; }
footer li a 		{ padding:5px; }
footer li:last-child 	{ margin:0; }
#end			{ float:left; margin-top:10px; padding-bottom:25px; width:100%; }
	
/* =============================================================================
   Project Page
   ========================================================================== */
#project ol 				{ margin-right:auto; margin-left:100px; max-width:985px; text-align:left; padding: 0px 40px 0px 20px; font-size:1.5em; letter-spacing:0.03em; line-height:1.5em; color:#373737; }
#project p 				{ margin-right:auto; margin-left:auto; max-width:985px; text-align:left; padding: 0px 40px 0px 20px; font-size:1.5em; letter-spacing:0.03em; line-height:1.5em; color:#373737; }
#project p.alt-2			{ margin-top:-120px; } 
#project-intro h2 			{ float:left; margin:0; padding:0; line-height:50px; text-transform:uppercase; font-weight:500; margin-right:50px; font-size:1.9em; letter-spacing:0.07em; color:#3f3f3f; }
#project-intro h3 			{ float:left; margin:0; padding:0; line-height:50px; font-weight:500; margin-right:50px; font-size:1.7em; letter-spacing:0.1em; font-weight:500; color:#3f3f3f; }
#project .container			{ max-width:1200px; width:auto; padding:0; margin-top:50px; }
.back 					{ float:left;position:relative; left:-10px; top:-2px; background:url("img/arrow.png") no-repeat; width:45px; height:45px; background-position:10px 5px; opacity:0.2; -webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; }
.forward 				{ float:right; position:relative; right:-10px; top: -42px; background:url("img/arrow.png") no-repeat; width:45px; height:45px;background-position:-30px 5px;opacity:0.2;-webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; }
.back:hover 				{ opacity:1;-webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; }
.forward:hover 				{ opacity:1; -webkit-transition: opacity 300ms ease-in; -moz-transition: opacity 300ms ease-in; }	
footer .forward 			{ top:-90px; }	
footer .back 				{ top:-3px; }
.back h5				{ display:none; }
.forward h5				{ display:none; }
#project-intro				{ background:#e6af61; display:inline-block; width:100%; padding-bottom:50px; -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); }
#project-intro .container 		{ max-width:1200px; width:auto; padding:0; padding-top:50px; }
#project-intro h2 			{ float:left;margin:0;padding:0;line-height:50px;text-transform:uppercase;font-weight:500;margin-right:20px;font-size:1.9em; letter-spacing:0.07em; color:#000;padding-left:20px;}
#project-intro h3 			{ float:left;margin:0;padding: 20px;line-height:50px;font-weight:500;font-size:1.7em; letter-spacing:0.1em;font-weight:500;color:#000;}
#project-intro span 			{ display:none;float:left;padding:0;margin:0; margin-bottom:25px;margin-left:20px;border-bottom:2px solid #000;width:20px ;height:25px;margin-right:20px;}
#project img				{ background: #ccc; margin:0 auto; width: 100%; }
.home					{ display:block;  width:20px;height:17px;background-image:url('img/home.png'); margin:0 auto; margin-bottom:50px; opacity:0.3; padding:10px;background-position:10px 10px;background-repeat:no-repeat; -moz-transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear;}
.home:hover				{ opacity:1; -moz-transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear; }
#reference .container                   { max-width:1200px; width:auto; padding:0; margin-top:50px; }

/* =============================================================================
   Project Page - References
   ========================================================================== 
#project a { margin-left:-10px; -webkit-transition:font-size 0.2s linear; -moz-transition:color 0.2s linear;}
#project ref { margin-right:auto; margin-left:auto; max-width:575px; text-align:left; padding: 0px 40px 0px 20px; color:#8e35ef; font-size:1.3em; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear;}
#project b { color:#357EC7;font-size:1.5em; }
#project a:hover {font-size:1.5em;}
#project ref:hover {color:#F778A1;} */
	
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 545px) {
  /* Style adjustments for viewports 480px and over go here */
.container 				{ max-width:490px; margin:0 auto; padding:20px; }
#project-list .project-image 		{ height:150px; opacity:1; display:block; -moz-border-radius: 5px; border-radius: 5px;-webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; margin-bottom:20px; background:#e6af61; margin:0; }  	
#project-list .blank-image 		{ height:150px; width: 10px; opacity:0; display:block; -moz-border-radius: 5px; border-radius: 1px;-webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; margin-left: 0px; margin-bottom:20px; background:#e6af61; margin:20px; } 
#project-list a:nth-child(2n) 		{ margin-right: 0; }
#project-list h3 			{ line-height:30px; }
#project-list a				{ margin-right:20px; width:235px; }	
#project-list				{ margin-top:100px; }
#intro					{ padding-top:125px; height:1000px; }
.outdoor-light img			{ height:auto; padding-top:35px; }
.living-shade img			{ height:auto; padding-top:25px; }
.kitchen-system img			{ height:auto; padding-top:30px; }
.hydropod img				{ height:auto;padding-top:20px; }
.l-series img				{ height:auto;padding-top:35px; }
.assorted img				{ height:auto;padding-top:55px; }
#project a				{ padding-left:20px;padding-right:40px;}
#project p				{ padding-left:20px;padding-right:40px;}
#project p.alt 				{ -moz-column-count:1;-moz-column-gap:20px;-webkit-column-count:1;-webkit-column-gap:20px;column-count:1;column-gap:20px;}
#project-intro span			{ display:inherit; } 	
 #project-intro h3			{ padding:0 0 0 20px; }	
}


@media only screen and (min-width: 1050px) {
  /* Style adjustments for viewports 768px and over go here */
.container			{ max-width:985px;margin:0 auto;padding:20px;}
#project-list a:nth-child(2n)	{ margin-right:20px;}
#project-list a:nth-child(3n)	{ margin-right:0;}
#intro				{ height:1000px;padding-top:12%;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
#project-list a			{ display:block;float:left;position:relative;vertical-align:top;width:315px;color:#fff;font-size:1.3em;margin:0 20px 0 0;}
#project-list h3		{ display:block;text-align:center;font-family:Raleway, sans-serif;line-height:70px;font-weight:400;-moz-transition:color .2s linear;-webkit-transition:color .2s linear;}
#project-list			{ margin-top:280px;}
aside				{ float:right;width:32%;}
article				{ width:61%;float:left;border-right:1px solid #d6d6d6;padding-right:30px;}
#end				{ float:left;margin-top:30px;padding-bottom:25px;width:100%;}
header				{ position:inherit;height:90px;}
.main-name			{ line-height:50px;}
#project-intro .container	{ max-width:1200px;width:auto;padding-bottom:0;padding-top:50px;}
.back				{ top:0;}
.forward			{ top:-40px;}
}

@media only screen and (min-width: 1200px) {
.project-intro-background	{ height:150px; }
#project-intro h2		{ padding:0;}
}

@media only screen and (min-width: 800px) {
footer .back h5			{ top:-14px; }
footer .forward h5		{ top:-14px; }
.back h5			{ position:relative; top:-16px;left:55px; width:150px; font-size:1em; text-transform:uppercase;color:#000; display:block; padding:10px; }
.back h5:hover			{ color:#000; }
.forward h5			{ position:relative; top:-16px;left:-175px; width:150px; text-align:right; font-size:1em; text-transform:uppercase;color:#000; display:block; padding:10px; }
.forward h5:hover		 {color:#000; }
}


/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}