@import url("semanticgs/stylesheets/less/grid.less");

@columns: 12;
@column-width: 74;
@gutter-width: 24;

@bodyFontsize:18px;
@bodyLead:24px;



@titletext:"source-code-pro",sans-serif;

@bodytext:"tenso",sans-serif;

@titletext::"source-code-pro",sans-serif;

@lightgreyColor:#E6E6E6;

@midGreyColor:#AAAAAA;

@darkgreyColor:#333333;

@orangeColor:#FF3F19;

@lightBlueColor:#0019FF;

@darkBlueColor:#000159;

@lightGreenColor:#14FF64;

@darkGreenColor:#192133;

@lightPurpleColor:#AF18FF;

@darkPurpleColor:#370133;

@YellowColor:#FCFA0F;

/***** Reset & Basics *****/

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:@bodyFontsize; 
	font:inherit; 
	vertical-align:baseline; }

article, aside, details, figcaption, 
figure, footer, header, hgroup, menu, 
nav, section 							
{
	display:block; }

html, body{
	height:100%;}

html {overflow-y: scroll;}

#container{
	min-height: 100%;
	height: auto !important;
	margin: 0 auto -85px auto !important;
	float:none !important;
	clear:both !important;
	display:block !important;
	overflow:hidden;
	}

body 									
{
	line-height:1.25em; 
	}

ol, ul 									
{
	list-style:none; }



/***** Basic Styles *****/

html 									
{
	overflow-y:scroll;
	overflow:-moz-scrollbars-vertical; }

body									
{
	margin:0; 
	padding:0; 
	background-color:#fff; 
	font:16px;
	color:#333; 
	-webkit-font-smoothing:antialiased; 
	-webkit-text-size-adjust:none;
}

::-moz-selection { 
background-color:@orangeColor;  
color: #ffffff;
}

::selection {
background-color:@orangeColor; 
color: #ffffff;
}

a:link {
	color:@darkgreyColor;
	text-decoration:none;
	}

a:visited {
	color:@darkgreyColor;
	text-decoration:none;
	}

	
a:hover{
	color:@orangeColor;
	text-decoration:none;
	}

a:active{
	color:@orangeColor;
	text-decoration:none;
	}

h1, h2, h3, h4, h5, h6 					
{
	margin:0; 
	padding:0; 
	font-family:@titletext;
	font-weight:700;
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1", "onum";
	-ms-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	-o-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	-webkit-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	font-feature-settings:"calt", "liga", "clig", "kern", "onum"; } 

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-weight:inherit; }

h3 {
	color:@lightgreyColor;
	}

h4, h5, h6 {
	font-style: italic;
	}

p {
	font-family:@bodytext;
	color:@darkgreyColor;
	line-height:@bodyLead;
	margin-bottom:@bodyFontsize; 
	
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1", "onum";
	-ms-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	-o-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	-webkit-font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	font-feature-settings:"calt", "liga", "clig", "kern", "onum";
	}

p a:link {
	font-family:@bodytext;
	font-weight:700;
	color:@darkgreyColor;
	}
	
p a:hover {
	font-family:@bodytext;
	font-weight:700;
	color:@orangeColor;
	}	
	
li p a:link {
	font-family:@bodytext;
	font-weight:200;
	color:@lightgreyColor;
	}

p.italic {
	font-style:italic;
	}

p#noMargin {
	margin-bottom:0 !important;
	}

/***** HEADER/NAV STYLES *****/

header{
	border-top:7px solid;
	border-top-color:@orangeColor;
	display:block;
	}

#logoText a:link {
	color:@orangeColor;
	}

#logoText a:visited {
	color:@orangeColor;
	}

#logoText a:hover {
	color:@lightgreyColor;
	}
	
#logoText a:active {
	color:@lightgreyColor;
	}	

#logoText, #navArea{
	display:block;
	position: relative;
	font-weight:700;}

#logoText{
	float:left;
	font-family:@titletext;
	color:@lightgreyColor;
	text-transform:uppercase;
	line-height:1em;
	top:-.35em;}

#navArea{
	float:right;
	}

#navArea ul#nav li {
	display:block;
	float:left;
	font-family:@titletext;
	color:@darkgreyColor;
	text-transform:uppercase;
	
	}

#navArea ul#nav li a:link {
	color:@darkgreyColor;
	text-decoration:none;
	}

#navArea ul#nav li a:visited {
	color:@darkgreyColor;
	text-decoration:none;
	}

	
#navArea ul#nav li a:hover{
	color:@orangeColor;
	text-decoration:none;
	}

#navArea ul#nav li a:active{
	color:@orangeColor;
	text-decoration:none;
	}
	
.active{
	color:@orangeColor !important;
	}
	
.inactive{
	color:@lightgreyColor;
	}

#DesignWork {
	overflow:visible;
	}
	
ul#subNav {
	display:none !important;
	opacity:0;
	visibility:none;
	overflow:hidden;
	position:absolute;
	margin:0;
	z-index:100;
	
	transition-property:color .1s linear 0s; 
	-moz-transition:color .1s linear 0s; 
	-webkit-transition:color .1s linear 0s; 
	-o-transition:color .1s linear 0s; 
	}

ul#subNav li.line{
	border-top:1px solid;
	border-top-color:@lightgreyColor;
	position:relative !important;
	}

ul#subNav li {
	font-weight:400;
	}


/***** Maintain Parent Hover *****/
ul#nav li#DesignWork:hover > a {
	color:@orangeColor;}
	

/***** Reveal submenu *****/
ul#nav li#DesignWork:hover ul#subNav {
	opacity:1;
	display:block !important;
	visibility: visible;
	overflow:visible;
	height:auto;
	}    



/***** SECTION STYLES *****/

.section{
	border-top:1px solid;
	border-top-color:@lightgreyColor;
	display:block;
	padding-top:(@bodyFontsize * 2);
	
}

/***** INDEX PROJECT THUMBNAILS *****/

figure.thumbnail {
	display: inline-block; 
	position: relative; 
	overflow: hidden;
	margin:0;
	} 


figcaption.thumbnail-caption{
	position: absolute; 
	/* background:rgba(153, 153, 153, .70); */
	color: white;  
	opacity: 1;
	bottom: 0; 
	left: 0;
	height:100%;
	width:100%;
	top:0;
	-webkit-transition: all 0.1s linear 0s;
	-moz-transition:    all 0.1s linear 0s;
	-o-transition:      all 0.1s linear 0s;
	}

figcaption.thumbnail-caption h2{
	position:absolute;
	top:0;

	}

figcaption.thumbnail-caption p {
	color:white;
	font-family:@titletext:;
	}

figure.thumbnail:hover figcaption.thumbnail-caption{
  opacity: 0;
  left: 0;
}


/***** FOOTER STYLES *****/

#push {
	height:85px;
	clear:both;
	}

#footer{
	height:20px;}

#footer{
	max-width:1132px;
	margin:auto;
	border-top:1px solid;
	border-top-color:@darkgreyColor;
	display:block;
	padding-top:(@bodyFontsize * 2);
	padding-bottom:(@bodyFontsize * 2);}


/***** Back to Top Button *****/
.go-top{
	font-family:@titletext !important;
	position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	color: white !important;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: @bodyFontsize;
	padding: 1em;
	display: none;
	font-weight:700;
	z-index:10000;
}

.prev-button, .next-button{
	background-color: rgba(0, 0, 0, 0.3);
	font-family:@titletext !important;
	position:fixed;
	top:46%;
	color:#ffffff !important;
	z-index:10000;
	font-size:3em;
	}

.prev-button:link {
	padding:10px 16px 18px 14px;
	left:0;}

.next-button:link {
	padding:10px 14px 18px 16px;
	right:0;}

.go-to:link{}

.go-to:visited, .prev-button:visited, .next-button:visited{
	background-color: rgba(0, 0, 0, 0.3);
	}

.go-top:hover, .prev-button:hover, .next-button:hover {
	background-color:@orangeColor;
	color:#ffffff;
}

.go-top:active, .prev-button:hover, .next-button:hover {
	background-color:@orangeColor;
	color:#ffffff;
}


/***** Screen Bigger than 1200px *****/
@media only screen and (min-width:1200px) {
	
	
	#container{
		.column(12);
		}
	
	.pushTwo{
		.push(2);
		position:relative;
		left:-16px;
		}
	
	li p {
		font-size:(@bodyFontsize * 1.125) !important;	}
	
	p {
		margin-bottom:@bodyFontsize;
		}
		
	header{
		margin-top:(@bodyFontsize * 4) !important;
		padding-top:(@bodyFontsize * 2);
		padding-bottom:(@bodyFontsize * 2);
		height:123px;
		line-height: 1em;
		position: relative;
		
		.row(12);
			#logoText{
				.column(4,12);}
			#navArea{
				.column(6,12);
				}
		}
		
	#logoText {
		font-size:(@bodyFontsize * 3);
		}	
		
	#nav{
		.row(6);
			li{.column(2,9);}
			}
			
	ul#subNav{
		.row(6)
			.line{
				.column(6,6);}
			.sublist1{
				.column(3,6);}
			.sublist2{
				.column(3,6);}
		
		}
			
	#navArea ul#nav li a{
		font-size:(@bodyFontsize * 1.25);
		line-height:1.75em;
		}
		
	#navArea ul#nav li ul#subNav {
		.row(6);
		 	.sublist1, .sublist2 {
				.column(3,6);
				}
			li.line{
				.column(6,6);
				}
			.sublist1 li, .sublist2 li {
				.column(3,6);
				}
		}
		
		
	ul#nav li#DesignWork ul#subNav li a {
		font-family:@bodytext;
		font-size:@bodyFontsize;
		text-transform:none;
		}
	
	ul#subNav {
		left:-16px;
		padding-bottom:24px;
		margin: 0px 0 0 -16px !important;
		padding-top: 6PX;
		background-color: rgba(255, 255, 255, .85);
		}
		
	ul#nav li#DesignWork ul#subNav li p {
	margin-bottom:0 !important;
		}
		
	ul#subNav li.line{
		margin-top: @bodyFontsize !important;
		padding-top:20px;
		left:@bodyFontsize;
		}
		
	#headerSmall{
		padding:16px 0 16px 0;
		height:63px;
		}
		
	.section{
		.row(12);
			.projectThumb{
				.column(3,12);
				}
		}
	
	
	/***** Index Project Thumbnails *****/
		
	.projectThumb{
		height:160px;
		margin-bottom:(@bodyFontsize * 2) !important;
		.column(3);
		margin-right:(@bodyFontsize * 2);
		margin-left:0;
		}
	
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}
	
	/***** Project Page *****/
	
	.projectPage{
		margin-bottom:@bodyFontsize !important;
		min-height: 160px;
		.row(12);
			.projectTitle{
				.column(4,12);}
			.projectSummary{
				.column(5,12);}
		}
	
	.projectPage .projectTitle, .aboutPage .aboutTitle {
		position: relative;
		margin-top: -5px;
		margin-bottom:7px;
		}
	
	.projectPage h2, .aboutPage h2 {
		font-size: 3em;
		font-weight: 700;
		line-height: 1em;
		}
	
	.projectPage h2 {
		float: left;
	}
	
	.projectPage h3, .aboutPage  h3{
		clear:both;
		font-family:@titletext:;
		font-size:1.25em;
		font-weight:600;
		font-style:italic;
		line-height: 1.25em;
		padding-bottom: 1em;
		}
	
	.projectPage h3 {
		padding-top: 1em; 
		}
	
	.projectSummary , .aboutBio{
		float:right;
		}
	
	.projectSummary p, .aboutBio p {
		line-height:1.25em;
		font-size:@bodyFontsize !important;
		}
	
	.projectImages{
		.row(12);
			.full{
				.column(12,12);}
			.half {
				.column(6,12);}
			.oneThird {
				.column(4,12);}
			.twoThirds {
				.column(8,12);}
		}
		
	.projectImages img {
		margin-bottom:32px;
	}
	
	.caption {
		
		}
		
	/***** About Page *****/
	
	.aboutPage{
		margin-bottom:32px !important;
		.row(12);
			.aboutTitle{
				.column(4,12);}
			.aboutText{
				.column(4,12);}
			.aboutPic{
				.column(12,12);}
		}
	
	.aboutPage h2 {
		margin-top:-9px;
		}
	
	.aboutText{
	/* margin-bottom:@bodyFontsize !important; */
		}
	
  }
	
/***** Screen Smaller than 1200px *****/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	@columns: 9;
	@column-width: 65;
	@gutter-width: 32;
	
	#container{
	.column(9);
	}
	
	.pushTwo{
		.push(2);
		position:relative;
		left:-16px;
		}
	
	header{
		margin-top:(@bodyFontsize * 4) !important;
		padding-top:(@bodyFontsize * 2);
		padding-bottom:(@bodyFontsize * 2);
		height:123px;
		line-height: 1em;
		position: relative;
		
		.row(9);
			#logoText{
				.column(3,9);}
			#navArea{
				.column(6,9);}
		}
		
	#logoText {
		.column(3);
		font-size:(@bodyFontsize * 3);
		}	
			
	#nav{
		.row(6);
			li{.column(2,6);}
			}

			
	#navArea ul#nav li a{
		font-size:(@bodyFontsize * 1.25);
		line-height:1.75em;
		}
		
	#navArea ul#nav li ul#subNav {
		.row(6);
		 	.sublist1, .sublist2 {
				.column(3,6);
				}
			li.line{
				.column(6,6);
				}
			.sublist1 li, .sublist2 li {
				.column(3,6);
				}
		}
		
		
	ul#nav li#DesignWork ul#subNav li a {
		font-family:@bodytext;
		font-size:@bodyFontsize;
		text-transform:none;
		}
	
	ul#subNav {
		left:-16px;
		padding-bottom:24px;
		margin: 0 0 0 -16px !important;
		padding-top: 3PX;
		background-color: rgba(255, 255, 255, .85);
		}
		
	ul#nav li#DesignWork ul#subNav li p {
	margin-bottom:0 !important;
		}
		
	ul#subNav li.line{
		margin-top: @bodyFontsize !important;
		padding-top:20px;
		left:@bodyFontsize;
		}
		
	#headerSmall{
		padding:16px 0 16px 0;
		height:63px;
		}
		
	.section{
		.row(9);
			.projectThumb{
				.column(3,9);
				}
		}
	
	
	/***** Index Project Thumbnails *****/	
	.projectThumb{
		height:160px;
		margin-bottom:(@bodyFontsize * 2) !important;
		}
	
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Index Project Thumbnails *****/
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Project Page *****/
	
	.projectPage{
		margin-bottom:@bodyFontsize !important;
		min-height: 160px;
		.row(9);
			.projectTitle{
				.column(5,9);}
			.projectSummary{
				.column(4,9);}
		}
	
	.projectPage .projectTitle, .aboutPage .aboutTitle {
		position: relative;
		margin-top: -5px;
		margin-bottom:7px;
		}
	
	.projectPage h2, .aboutPage h2 {
		font-size: 3em;
		font-weight: 700;
		line-height: 1em;
		}

	.projectPage h2 {
		float: left;
	}
	
	.projectPage h3, .aboutPage  h3{
		clear:both;
		font-family:@titletext:;
		font-size:1.25em;
		font-weight:600;
		font-style:italic;
		line-height: 1.25em;
		padding-bottom: 1em;
		}
		
		.projectPage h3 {
		padding-top: 1em;
		}
	
	.projectSummary , .aboutBio{
		float:right;
		}
	
	.projectSummary p, .aboutBio p {
		}
	
	.projectImages{
		.row(9);
			.full{
				.column(9,9);}
			.half {
				.column(4.5,9);}
			.oneThird {
				.column(3,9);}
			.twoThirds {
				.column(6,9);}
		}
		
	.projectImages img {
		margin-bottom:32px;
	}
	
	.caption {
		
		}

	
	/***** About Page *****/
	
	.aboutPage{
		margin-bottom:32px !important;
		.row(9);
			.aboutTitle{
				.column(5,9);}
			.aboutText{
				.column(4,9);}
			.aboutPic{
				.column(9,9);}
		}
	
	.aboutPage h2 {
		margin-top:-9px;
		}
	
	.aboutText{
	margin-bottom:@bodyFontsize !important;
		}
	
	/***** FOOTER *****/
	
	#footer, #copyright{
	max-width:841px;
		}
	
	}
	
/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	@columns: 6;
	@column-width: 65;
	@gutter-width: 32;
	
	#container{
	.column(6);
	}
	
	header{
		margin-top:(@bodyFontsize * 4) !important;
		padding-top:(@bodyFontsize * 2);
		padding-bottom:92px;
		margin-bottom:(@bodyFontsize * 2) !important;
		height:189px;
		line-height: 1em;
		position: relative;
		
		.row(6);
			#logoText{
				.column(6,6);}
			#navArea{
				.column(6,6);}
		}
		
	#logoText {
		.column(3);
		font-size:(@bodyFontsize * 3);
		margin-bottom:(@bodyFontsize * 2) !important;
		line-height: .7em;
		display: block !important;
		float: none !important;
		}
	
	#navArea{
		padding-top:@bodyFontsize;
		padding-bottom:@bodyFontsize;
		border-top:1px solid @lightgreyColor;
		border-bottom:1px solid @lightgreyColor;
		display: block !important;
		float: none !important;
		position:relative;
		top:-17px !important;
		}
	
	#nav{
		.row(6);
			li{.column(2,3);}
			}

			
	#navArea ul#nav li a{
		font-size:(@bodyFontsize * 1.25);
		line-height:1.75em;
		}
		
	#navArea ul#nav li ul#subNav {
		.row(6);
		 	.sublist1, .sublist2 {
				.column(3,6);
				}
			li.line{
				.column(6,6);
				}
			.sublist1 li, .sublist2 li {
				.column(3,6);
				}
		}
		
		
	ul#nav li#DesignWork ul#subNav li a {
		font-family:@bodytext;
		font-size:@bodyFontsize;
		text-transform:none;
		}
	
	ul#subNav {
		left:-16px;
		padding-bottom:24px;
		margin: 0 0 0 -16px !important;
		background-color: rgba(255, 255, 255, .85);
		}
		
	ul#nav li#DesignWork ul#subNav li p {
	margin-bottom:0 !important;
		}
		
	ul#subNav li.line{
		margin-top: @bodyFontsize !important;
		padding-top:20px;
		left:@bodyFontsize;
		}
		
	#headerSmall{
		padding:16px 0 16px 0;
		height:63px;
		}
		
	.section{
		.row(9);
			.projectThumb{
				.column(3,9);
				}
		}
	
	
	/***** Index Project Thumbnails *****/	
	.projectThumb{
		height:160px;
		margin-bottom:(@bodyFontsize * 2) !important;
		}
	
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding: @bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Index Project Thumbnails *****/
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Project Page *****/
	
	.projectPage{
		margin-bottom:@bodyFontsize !important;
		min-height: 160px;
		.row(6);
			.projectTitle{
				.column(3,6);}
			.projectSummary{
				.column(3,6);}
		}
	
	.projectPage .projectTitle, .aboutPage .aboutTitle {
		position: relative;
		margin-top: -5px;
		margin-bottom:7px;
		}
	
	.projectPage h2, .aboutPage h2 {
		font-size: 2em;
		font-weight: 700;
		line-height: 1em;
		}

	.projectPage h2 {
		float: left;
	}
	
	.projectPage h3, .aboutPage  h3{
		clear:both;
		font-family:@titletext:;
		font-size:1.25em;
		font-weight:600;
		font-style:italic;
		line-height: 1.25em;
		padding-top:1em;
		padding-bottom: 1em;
		}
	
	.projectSummary , .aboutBio{
		float:right;
		}
	
	.projectSummary p, .aboutBio p {
		}
	
	.projectImages{
		.row(6);
			.full{
				.column(6,6);}
			.half {
				.column(3,6);}
			.oneThird {
				.column(3,6);}
			.twoThirds {
				.column(3,6);}
		}
		
	.projectImages img {
		margin-bottom:32px;
	}
	
	.caption {
		
		}

	
	/***** About Page *****/
	
	.aboutPage{
		margin-bottom:32px !important;
		.row(6);
			.aboutTitle{
				.column(3,6);}
			.aboutText{
				.column(3,6);}
			.aboutPic{
				.column(6,6);}
		}
	
	.aboutPage h2 {
		margin-top:-9px;
		line-height:1em;
		}
	
	.aboutPage h3 {
		line-height: 1em;
		padding-top:@bodyFontsize;
		}
	
	.aboutText{
	margin-bottom:@bodyFontsize !important;
		}
	
	
	/***** FOOTER *****/
	
	#footer, #copyright{
	max-width:550px;
		}

	
	}
	
/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) and (orientation:portrait) {
		
	@columns: 3;
	@column-width: 65;
	@gutter-width: 32;
	
	#container{
	.column(3);
	}
	
	header{
		margin-top:(@bodyFontsize * 3) !important;
		padding-top:(@bodyFontsize * 2);
		padding-bottom:23px;
		min-height:123px;
		line-height: 1em;
		position: relative;
		border-top:7px solid @orangeColor;
		
		.row(3);
			#logoText{
				.column(3,3);}
			#navArea{
				.column(3,3);}
		}
		
	#logoText {
		.column(3);
		font-size:52px;
		margin-bottom:(@bodyFontsize * 4) !important;
		line-height: .7em;
		display: block !important;
		float: none !important;
		}
	
	#navArea{
		padding-top:@bodyFontsize;
		padding-bottom:@bodyFontsize;
		border-top:1px solid @lightgreyColor;
		display: block !important;
		float: none !important;
		margin-bottom:-37px !important;
		position:relative;
		top:-17px !important;
		}
	
	#nav{
		.row(3);
			li{.column(3,3);
				clear:both;}
			}

			
	#navArea ul#nav li a{
		font-size:(@bodyFontsize * 1.25);
		line-height:2em;
		}
		
	#navArea ul#nav li ul#subNav {
		.row(3);
		 	.sublist1, .sublist2 {
				.column(3,3);
				clear:both;
				}
			li.line{
				.column(3,3);
				}
			.sublist1 li, .sublist2 li {
				.column(3,3);
				}
		}
		
		
	ul#nav li#DesignWork ul#subNav li a {
		font-family:@bodytext;
		font-size:@bodyFontsize;
		text-transform:none;
		}
	
	ul#subNav {
		left:-16px;
		padding-bottom:24px;
		margin: 0 0 0 -16px !important;
		background-color: rgba(255, 255, 255, 1);
		border-bottom: solid 1px @lightgreyColor;
		margin-bottom: @bodyFontsize !important;
		position:relative;
		}
		
	ul#nav li#DesignWork ul#subNav li p {
	margin-bottom:0 !important;
		}
		
	ul#subNav li.line{
		margin-top: @bodyFontsize !important;
		padding-top:20px;
		left:@bodyFontsize;
		}
		
	.section{
		.row(3);
			.projectThumb{
				.column(3,3);
				}
		}
	
	
	/***** Index Project Thumbnails *****/	
	.projectThumb{
		height:160px;
		margin-bottom:(@bodyFontsize * 2) !important;
		}
	
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Index Project Thumbnails *****/
	figcaption h2 {
		font-style: normal;
		font-size:1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Project Page *****/
	
	.projectPage{
		margin-bottom:@bodyFontsize !important;
		.row(3);
			.projectTitle{
				.column(3,3);}
			.projectSummary{
				.column(3,3);}
		}
	
	.projectPage .projectTitle, .aboutPage .aboutTitle {
		position: relative;
		margin-top: -5px;
		margin-bottom:7px;
		}
	
	.projectPage h2, .aboutPage h2 {
		font-size: 2em;
		font-weight: 700;
		line-height: 1em;
		}

	.projectPage h2 {
		float: left;
	}
	
	.projectPage h3, .aboutPage  h3{
		clear:both;
		font-family:@titletext:;
		font-size:1.25em;
		font-weight:600;
		font-style:italic;
		line-height: 1em;
		padding: @bodyFontsize 0;
		padding-bottom: 1em;
		}
	
	.projectSummary , .aboutBio{
		float:right;
		}
	
	.projectSummary p, .aboutBio p {
		}
	
	.projectImages{
		.row(6);
			.full{
				.column(3,3);}
			.half {
				.column(3,3);}
			.oneThird {
				.column(3,3);}
			.twoThirds {
				.column(3,3);}
		}
		
	.projectImages img {
		margin-bottom:32px;
	}
	
	.caption {
		
		}
	
	.projectImages .full, .projectImages .half, .projectImages .oneThird, .projectImages .twoThirds{
				display:block !important; 
				float:none !important;}
	
	/***** About Page *****/
	
	.aboutPage{
		margin-bottom:32px !important;
		.row(6);
			.aboutTitle{
				.column(3,3);}
			.aboutText{
				.column(3,3);}
			.aboutPic{
				.column(3,3);}
		}
	
	.aboutTitle{
		margin-bottom:@bodyFontsize !important;
		}
	
	.aboutPic{
		float:none !important;
		display: block !important;
		}
	
	.aboutPage h2 {
		margin-top:-9px;
		line-height:1em;
		}
	
	.aboutPage h3 {
		line-height: 1em;
		padding-top:@bodyFontsize;
		}
	
	.aboutTitle{
		display:block !important;
		float:none !important;
		}
	
	.aboutText{
		margin-bottom:(@bodyFontsize * 2) !important;
		display:block !important;
		float:none !important;

		}
		
	#topMargin{
		margin-top:(@bodyFontsize * 3) !important;}
	
	/***** FOOTER *****/
	
	#footer, #copyright{
	max-width:259px;
		}
	
	#copyright{
		padding-bottom:32px !important;
		margin-bottom:0 !important;
		}
	
	/***** Back to Top Button *****/
		.go-top {
			bottom: 2em;
			right: 0;
		}
	
	/***** Prev-Next Buttons *****/
	.prev-button, .next-button{
		display:none;
		opacity:0;
		}
	
	}
	
/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation:landscape){
	
		@columns: 3;
	@column-width: 65;
	@gutter-width: 32;
	
	#container{
	.column(3);
	}
	
	header{
		margin-top:(@bodyFontsize * 3) !important;
		padding-top:(@bodyFontsize * 2);
		padding-bottom:23px;
		min-height:123px;
		line-height: 1em;
		position: relative;
		
		.row(3);
			#logoText{
				.column(3,3);}
			#navArea{
				.column(3,3);}
		}
		
	#logoText {
		.column(3);
		font-size:(@bodyFontsize * 3);
		margin-bottom:(@bodyFontsize * 4) !important;
		line-height: .7em;
		display: block !important;
		float: none !important;
		}
	
	#navArea{
		padding-top:@bodyFontsize;
		padding-bottom:@bodyFontsize;
		border-top:1px solid @lightgreyColor;
		display: block !important;
		float: none !important;
		margin-bottom:-37px !important;
		position:relative;
		top:-17px !important;
		}
	
	#nav{
		.row(3);
			li{.column(3,3);
				clear:both;}
			}

			
	#navArea ul#nav li a{
		font-size:(@bodyFontsize * 1.25);
		line-height:2em;
		}
		
	#navArea ul#nav li ul#subNav {
		.row(3);
		 	.sublist1, .sublist2 {
				.column(3,3);
				clear:both;
				}
			li.line{
				.column(3,3);
				}
			.sublist1 li, .sublist2 li {
				.column(3,3);
				}
		}
		
		
	ul#nav li#DesignWork ul#subNav li a {
		font-family:@bodytext;
		font-size:@bodyFontsize;
		text-transform:none;
		}
	
	ul#subNav {
		left:-16px;
		padding-bottom:24px;
		margin: 0 0 0 -16px !important;
		background-color: rgba(255, 255, 255, 1);
		border-bottom: solid 1px @lightgreyColor;
		margin-bottom: @bodyFontsize !important;
		position:relative;
		}
		
	ul#nav li#DesignWork ul#subNav li p {
	margin-bottom:0 !important;
		}
		
	ul#subNav li.line{
		margin-top: @bodyFontsize !important;
		padding-top:20px;
		left:@bodyFontsize;
		}
		
	#headerSmall{
		padding:16px 0 16px 0;
		height:63px;
		}
		
	.section{
		.row(3);
			.projectThumb{
				.column(3,3);
				}
		}
	
	
	/***** Index Project Thumbnails *****/	
	.projectThumb{
		height:160px;
		margin-bottom:(@bodyFontsize * 2) !important;
		}
	
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Index Project Thumbnails *****/
	figcaption h2 {
		font-style: normal;
		font-size: 1.5em;
		margin-bottom:@bodyFontsize;
		line-height: 1.15em;
		padding:@bodyFontsize;
		}
	
	
	.thumbcontainer{
		height:160px;
		width:100%;
		}
	
	.thumbcontainer a{
		height:160px;
		width:100%;
		}
	
	figure.thumbnail {
		height:160px;
		width: 100%;
		float: left;
		}
	
	figcaption.thumbnail-caption{
		}

	
	/***** Project Page *****/
	
	.projectPage{
		margin-bottom:@bodyFontsize !important;
		.row(3);
			.projectTitle{
				.column(3,3);}
			.projectSummary{
				.column(3,3);}
		}
	
	.projectPage .projectTitle, .aboutPage .aboutTitle {
		position: relative;
		margin-top: -5px;
		margin-bottom:7px;
		}
	
	.projectPage h2, .aboutPage h2 {
		font-size: 2em;
		font-weight: 700;
		line-height: 1em;
		}

	.projectPage h2 {
		float: left;
	}
	
	.projectPage h3, .aboutPage  h3{
		clear:both;
		font-family:@titletext:;
		font-size:1.25em;
		font-weight:600;
		font-style:italic;
		line-height: 1em;
		padding: @bodyFontsize 0;
		padding-bottom: 1em;
		}
	
	.projectSummary , .aboutBio{
		float:right;
		}
	
	.projectSummary p, .aboutBio p {
		}
	
	.projectImages{
		.row(6);
			.full{
				.column(3,3);}
			.half {
				.column(3,3);}
			.oneThird {
				.column(3,3);}
			.twoThirds {
				.column(3,3);}
		}
		
	.projectImages img {
		margin-bottom:32px;
	}
	
	.caption {
		
		}
	
	.projectImages .full, .projectImages .half, .projectImages .oneThird, .projectImages .twoThirds {
				display:block !important; 
				float:none !important;}
	
	
	/***** About Page *****/
	
	.aboutPage{
		margin-bottom:32px !important;
		.row(6);
			.aboutTitle{
				.column(3,3);}
			.aboutText{
				.column(3,3);}
			.aboutPic{
				.column(3,3);}
		}
	
	.aboutTitle{
		margin-bottom:@bodyFontsize !important;
		}
	
	.aboutPic{
		float:none !important;
		display: block !important;
		}
	
	.aboutPage h2 {
		margin-top:-9px;
		line-height:1em;
		}
	
	.aboutPage h3 {
		line-height: 1em;
		padding-top:@bodyFontsize;
		}
	
	.aboutTitle{
		display:block !important;
		float:none !important;
		}
	
	.aboutText{
		margin-bottom:(@bodyFontsize * 2) !important;
		display:block !important;
		float:none !important;
		}
	
	#topMargin{
		margin-top:(@bodyFontsize * 3) !important;}
	
	
	/***** FOOTER *****/
	
	#copyright{
		padding-bottom:(@bodyFontsize * 2) !important;
		margin-bottom:0 !important;
		}
	
	
	/***** Back to Top Button *****/
		.go-top {
			bottom: 2m;
			right: 0;
		}
	
	
	/***** Prev-Next Buttons *****/
	.prev-button, .next-button{
		display:none;
		opacity:0;
		}
	
	
	}