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


/* What are you looking at? Stop looking at my code, you nosy bastard! */

	*{	
		padding: 0;
		margin: 0;
		font-family:"Source Sans Pro", Arial, Helvetica, sans-serif;
		}

	@font-face {
		font-family:"Source Sans Pro";
		font-display: fallback;
		}
	
	html, body {
		height: 100%;
		}
	
	body {
		background: #c9c9c9 url(../images/bg_texture.png);
		-webkit-text-size-adjust:100%;
		letter-spacing: .3pt;
		color: #404040;
		}
	
	iframe {
		min-width: 60%;
		max-width: 100%;
		-moz-box-shadow: 0px 1px 2px #555;
		-webkit-box-shadow: 0px 1px 2px #555;
		box-shadow: 0px 1px 2px #555;
		}
	
	.mobile {
		display: none;
		}

	p {
		margin-bottom: .7em;
		line-height: 1.4em;
		}

	p.caption {
		margin-bottom: 25px;
		}

	p.caption-top {
		margin-top:-5px;
		margin-bottom: 20px;
		}

	.caption, .caption-top {
		text-align: center;
		padding-left: 10%;
		padding-right: 10%;
		}

	.caption {
		font-style: oblique;
		}
	
	.caption-top {
		font-style: regular;
		}
			
	
	a{ 
		text-decoration: none;
		color: #fff;
		font-weight:600;
		}

	a.button {
		display: inline-block;
		text-align:center;
		text-transform:uppercase;
		font-weight: 400;
		font-size: 10pt;
		background:#3a3a3a;
		color:#ffffff !important; 
		max-width: 300px;
		padding:10px 20px;
		border-radius:0px;
		margin: 1em auto;
		}
		
	a.button:hover {
		background:#444444;
		}
	
	#main p a, #previous a, #next a {
		color: #000;
		font-weight: 400;
		}

	
	#main p a:hover, #previous a:hover, #next a:hover, #return-to-work a:hover {
		opacity: .6;	
		}

	li {
		list-style-type: none;
		}

	video{
		display: block;	
	}
	
	
/*========LOADING SPINNER=========*/
	
	.no-js #loader { 
		display: block;  
		}

	.js #loader { 
		display: block; 
		position: absolute; 
		left: 100px; 
		top: 0; 
		}
	
	.se-pre-con {
		position: fixed;
		left: 0px;
		top: 0px; /* Must match with nav-container height, including 1px border */
		width: 100%;
		height: 100%;
		z-index: 8888; /* Make sure this is below the header in the stack order to allow the header to remain on screen when loading and moving between pages*/
		background: #c9c9c9 url(../images/bg_texture.png);
		}

	.loader-positioner{
		margin: 0px auto;
		display: block;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%); 
		width: 5em;
	  	height: 5em;
		}

	.loader {
  		position: relative;
  		border-top: .5em solid rgba(255, 255, 255, 0.3);
  		border-right: .5em solid rgba(255, 255, 255, 0.3);
  		border-bottom: .5em solid rgba(255, 255, 255, 0.3);
  		border-left: .5em solid #b0b0b0;
  		-webkit-transform: translateZ(0);
  		-ms-transform: translateZ(0);
  		transform: translateZ(0);
  		-webkit-animation: load8 .6s infinite linear;
  		animation: load8 .6s infinite linear;
		}

	.loader, .loader:after {
		border-radius: 50%;
		width: 4em;
		height: 4em;
		}

	@-webkit-keyframes load8 {
  		0% {
    		-webkit-transform: rotate(0deg);
    		transform: rotate(0deg);
  			}
  		100% {
    		-webkit-transform: rotate(360deg);
    		transform: rotate(360deg);
  			}
		}

	@keyframes load8 {
  		0% {
    		-webkit-transform: rotate(0deg);
    		transform: rotate(0deg);
 			}
  		100% {
    		-webkit-transform: rotate(360deg);
    		transform: rotate(360deg);
  			}
		}

/*=============SPINNER END==================*/
	
	


/*===== OUTER-WRAPPER ====*/

	#outer-wrapper { /*THE THINGS I DO FOR A STICKY FOOTER*/
		min-height: 100%;
	}
	
	
/*===== HEADER =====*/
	
	#header {
		position: relative; /* Makes z-index work so the header always displays above the loading spinner  */
		background: #2a2a2a /*url(../images/header_bg.png) bottom repeat-x*/;
		border-bottom: 1px solid #bbb; /* Removed on mobile homepage with no-border-mobile, since the carousel is flush with the header bar */
		z-index: 9999; /* Makes it so the header always displays above the loading spinner */
		}
	
	#nav-container {
		display: block;
		max-width: 100%;
		max-width: 1100px;
		min-height: 44px;
		margin: 0px auto;
		padding: 25px 0px 0px;
		}
		
	#logo {
		display: block;
		float: left;
		margin-left: 35px;
		}
		
	#logo, #logo img {
		height: 22px;
		}

	.navigation {
  		max-width: none;
		padding: 0px 0px 0px 0px;
		float: right;
		margin-right: 35px;
		letter-spacing: 2.5px;
		}

	.navigation li {
		float: left;
		position: relative;
		}

	.navigation li a {
		display: block;
		margin: 0px 0px 0px 25px;
		padding-bottom: 7px; /* Starting space between Nav link and underline — for animation */
		/* padding-left: 1px; orginally used to balance out the longer text underline that was caused by letterspacing — but the underline has been masked out with the psuedo-element ::after */
		text-align:center;
		font-size: 9pt;
		font-weight:300;
		color: #aaa;
		text-transform:uppercase;
		}
		
	.navigation li a.current{
		color: #ddd;
		border-bottom: 2px #666 solid;
		padding-bottom: 5px;
		}

	.navigation li:hover a{
		color: #fff;
		border-bottom: 2px #999 solid;
		padding-bottom: 3px; /* Moves the underline up on hover */
		}

	.navigation li a::after {/* Masks the overhang of the text underline due to the letterspacing */
 		content: "";
  		position: absolute;
  		right: 0;
  		height: 100%;
  		width: 2.5px; /* Match letterspacing */
  		background-color: #2a2a2a; /* Must match #header background */
		}

	.navheader { 
		display: block;
		width: 20px;
		float: left;
		}

	.slide-trigger {
		display: none; /* need this */
		cursor: pointer;
		background:url(../images/navigation_trigger.svg) no-repeat top center;
		margin-left: 15px;
		margin-right: 25px;
		}
		
	.slide-trigger:hover {
		opacity: .6;
		}
		
	.inactive { /* sets slide-trigger state when menu is collapsed */
		background: url(../images/navigation_trigger_close.svg) no-repeat top center;
		/*border-radius: 3px;
		border-top: 1px solid #000;
		border-bottom: 1px solid #333; */
		height: 34px;
		}


/*===== CONTENT =====*/

	#main {
		background: url(../images/header_shadow.png) top repeat-x;
		padding-bottom: 95px; /* Must be the same as sticky-wrapper height. */
		}

	#content-wrapper {
		margin: 0px auto;
		width: 100%;
		max-width: 1100px;
		clear: both;
		padding-top: 20px;
		overflow: hidden;
		}
		
	#content {
		font-size: 12pt;
		font-weight:300;
		}

	#content, .project-description {
		padding: 0px 35px;
		}

	#content.work { /* Smaller margin on the Work page allows for more consistent spacing in the grid */
		padding: 0px 30px;
		}
		
	.extra-padding{
		padding-left: 30px !important;
		padding-right: 30px !important;
		}
		

/*===== WORK =====*/
	
	#work {
		width: 100%;
		display: block;
		margin: 0px 0%;
		float: left;
		}

	.project-thumb, .blurb, .blurblink {
		display: block;
		float: left;
		overflow: hidden;		
		}	

	.blurb, .blurblink {
		width: 28%;
		margin: 10px 0px;
		padding: 0px 2.5%;
		border-left: 1px solid #aaa;
		}
		
	.one {
		border-left: none;
		}
		
	.first { /* Padding adjustments make the homepage intro align more closely with the flexslider  */
		width: 61%;
		padding-left: 1.25%;
		padding-right: 3.5%;
		}
		
	.first { border: none;}

	.blurb .border-bottom, .blurblink .border-bottom {
		display: none;
		}
		
	.project-thumb {
		width: 32.333%;
		background: #999;
		height: 290px;
		margin: 0px .5% 1%;
		background-size: cover !important;
		}
		
	.project-thumb a {
		display: block;
		float: left;
		width: 100%;
		}

	.overlay{
		display:block;
		width: 100%;
		background-image: -webkit-gradient( linear, center bottom, center top, from(rgba(42,42,42,1)),to(rgba(50,50,50,.75)), color-stop(.3,rgba(42,42,42,.9)), color-stop(.9,rgba(42,42,42,.75)));
		background-image: -moz-linear-gradient(bottom,  rgba(42,42,42,1), rgba(42,42,42,.9) 30%, rgba(42,42,42,.75) 90%, rgba(50,50,50,.75));
		background-image: -o-linear-gradient(bottom,  rgba(42,42,42,1), rgba(42,42,42,.9) 30%, rgba(42,42,42,.75) 90%, rgba(50,50,50,.75));
		margin: 245px auto 0px;
		padding-top: 13px;
		text-align: center;
		height:32px;
		text-transform: uppercase;
		font-weight: 300;
		font-size: 9.5pt;
		letter-spacing: 2px;
		border-top: 1px solid rgba(100, 100, 100, .5);
		}
			
	.over-sized { /* for overlay titles that spill over to a second line */
		padding-top: 4px;
		height:41px;
		line-height: 1.4em;
		}
		
	.project-thumb, .overlay, .flexslider .slides img {
		transition:all .4s ease-out;
		}

	a {
	transition:all .15s ease-out;
		}

	.flex-control-nav a {
	transition:all 0s ease-out;
		}
		
	.project-thumb:hover {
		opacity: .8;
		box-shadow: 0px 0px 6px #808080;
		transform: scale(1.03); 
		}

	.project-thumb:hover .overlay{
		opacity: 1.0;
		/*background: #eee;*/
		background-image: -webkit-gradient( linear, center bottom, center top, from(rgba(255,255,255,.9)),to(rgba(255,255,255,.8)), color-stop(.3,rgba(255,255,255,.9)), color-stop(.9,rgba(225,225,225,.9)));
		background-image: -moz-linear-gradient(bottom,  rgba(255,255,255,.9), rgba(255,255,255,.9) 30%, rgba(225,225,225,.9) 90%, rgba(255,255,255,.8));
		background-image: -o-linear-gradient(bottom,  rgba(255,255,255,.9), rgba(255,255,255,.9) 30%, rgba(225,225,225,.9) 90%, rgba(255,255,255,.8));
		color: #000;
		}
	
	.project{
		display: block;
		width: 100%;
		max-width: 100%;
		clear: both;
		margin: 10px auto 25px;
		}

	.captioned{ /* Specifically when a caption appears underneath a project image, with a caption element underneath */
		margin-bottom: 10px;

		}

	.vertical{
		width: 65%;
		max-width: 100%;
		}

	.narrow{
		width: 85%;
		max-width: 100%;
		}
	
	.no-shadow{ /* Deprecated */
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		
		}
	
	img.phone { /*Only for Fifteen project gifs*/
		display: block;
		width: 520px; 
		background-image: url(../images/larwood_fifteen-puzzle-app-iphone6-skewed-gameplay.gif), url(../images/larwood_fifteen-puzzle-app-iphone6.png);
		background-size: contain, contain;
		background-repeat: no-repeat, no-repeat;
		background-position: top center, top center;
		}
	
	.fifteen-tv-gif { /*Only for Fifteen project gifs*/
		background-image: url(../images/larwood_fifteen-puzzle-app-tv-2-arrows.gif), url(../images/larwood_fifteen-puzzle-app-tv-2-gameplay.png);
		background-size: 100%, 100%;
		background-repeat: no-repeat, no-repeat;
		background-position: top center, top center;
		max-width:100%;
		}


	@keyframes sprite {
  		from { background-position: 0% 0%; }
  		to { background-position: 100% 0%; }
		}

	.sprite-test {
		background-image: url('../images/magic_word_sprite2.png');
		background-size: cover;
		background-repeat: no-repeat;
		-webkit-backface-visibility: hidden;
    	-webkit-transform: translateZ(0) scale(1.0, 1.0);
		transform: translateZ(0) scale(1.0, 1.0);
		}

	.sprite-test:hover {
		animation: sprite .8s steps(3) infinite;
		cursor: pointer;	
		}

	.project-description-wrapper{
		 background-size: 1210px; 
		 background-position: bottom center;
		 background-repeat: no-repeat;
 		 padding: 25px 0px; 
		 margin: 0px auto; 
		 min-height: 150px; 
		 overflow: hidden;
		 font-size: 12pt;
		 font-weight: 300;
		 }

		
	.project-description {
		width: 1100px;
		max-width: 100%;
		padding: 0px 35px;
		margin: 0px auto; 
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
		
	.project-description p, h2 {
		max-width: 55%;
		}
		
	.production{
		font-style: oblique;
		color: #777;
		}
		
	#super-wrap{
		background: url(../images/project_header_shadow.png) top center no-repeat;
		background-size: 1200px !important;
		}
		
	#previous, #next {
		padding-top: 20px;
		font-size: .9em;
		}

	#previous{
		float: left;
		text-align: left;
		width: 95px;
		}
	
	#return-to-work {
		padding-top: 22px;
		text-align: center;
		text-transform: uppercase;
		font-size: .8em;
		}

	#return-to-work a{
		color: #000;
		}

	#next{
		float: right;
		text-align: right;
		width: 95px;
		}
	
	.email{
		padding-left: 28px;
		background: url(../images/icon_mail_button.svg) no-repeat left center;
		background-size: 19px 14px;
		}

	
/*===== Résumé =====*/

	.download{
		padding-right: 16px;
		background: url(../images/icon_download.svg) no-repeat right top;
		}

	.protected{
		padding-right: 14px;
		background: url(../images/icon_protected_lock.svg) no-repeat right top;
		}

	#resume1, #resume2{
		display: block;
		float: left;
		overflow: hidden;
		margin-bottom: .75em;
		width: 46%;
		font-size: 11pt;
		color: #606060;
		}

	#resume2{
		margin-left: 40px;
		}

	#resume1 p, #resume2 p{
		margin: 1.25em 0em .5em;
		}
	
	.business{ 
		font-weight: 700;
		color: #404040;
		}

	.location {
		color: #404040;
		white-space: nowrap;	
		}
		
	.date {
		font-style:oblique;

		}
		
	.job {
		font-weight: 600;
		color: #707070;
		}
		
	.job-description {
		margin-top: 0em !important;
		margin-left: 2px !important; /* Slight indent for the vertical line itself */
		margin-bottom: .5em !important;
		padding-left: 10px; /* Space between vertical line and text block */
		border-left: 4px solid #bbbbbb;
		}


	.no-indent-border {
		padding-left: 0px;
		margin-left: 0px !important; /* This cancels the margin-left on "job-description," so it doesn't affect the Skills list items */
		border-left: none;
		}
	
	
/*===== Footer =====*/

	#sticky-wrapper{
		margin-top: -95px; /* Same absolute value as #Main padding-bottom */
		}

	#spacer {
		display: block; 
		clear: both;
		height: 25px; 
		opacity: 0.6;
		}

	#footer-wrapper{
		clear: both;
		background: #909090;
		padding: 0px 0px 10px;
		overflow: hidden;
		}
		
	#footer{
		display: block;
		width: 100%;
		max-width: 1100px;
		margin: 0px auto;
		padding-top: 25px;
		height: 35px;
		}
		
	#footer-content{
		padding: 0px 35px;
		font-size: 13px;
		letter-spacing: 1px;
		text-transform: uppercase;
		}	
		
	select{
		display:none;
		}

	#bottom-nav {
		display:block;
		float: left;
		min-width: 250px;
		}
	
	#bottom-nav li a {
		display: block;
		float: left;
		margin-right: 20px;
		padding-bottom: 5px;
		font-size: 9pt;
		font-weight:600;
		color: #ccc;
		text-transform:uppercase;
		}
		
	#bottom-nav li a:hover {
		color: #fff;
		}
		
	#social { 
		display: block;
		width: 190px; /* Adjust when adding or subtracting social links */
		float: left;
		padding-right: 8px;
		margin-top: -8px;
		}

	#social li a { 
		display: block;
		float: left;
		height: 30px;
		width: 30px;
		margin-left: 8px;
		border-radius: 1px;
		text-align: center;
		}
		
	#social li a:hover {
		background: #808080;
		}
		
	#social li a img {
		display: block;
		float: left;
		height: 30px;
		width: 30px;
		}

	.copyright {
		float: right;
		display: block;
		width: 180px;
		text-align: center;
		font-weight: 400;
		color: #bbbbbb;
		}


/*===== Headings =====*/

	
	h2 {
		font-weight: 600;
		color: #444;
		font-size: 19pt;
		padding-bottom: .6em;
		text-transform: uppercase;
		letter-spacing: 1pt;
		}
	
	h3 {
		text-transform: uppercase;
		font-weight: 600;
		font-size: 15pt;
		margin-bottom: -0.4em;
		margin-top: 1em;
		color: #404040;
		}

	h3:nth-of-type(1){
		margin-top: 0em;
		}
		
	h4 {
		font-size: 12pt;
		font-weight: 400;
		margin-bottom:.75em;
		margin-top: 1.25em;
		text-align: center;
		}

	h5.start { /* Less margin-top for the very first header inside the #content divs */
		margin-top: .5em;
		}


	h5 {
		text-transform: uppercase;
		font-weight: 600;
		font-size: 16pt;
		margin-bottom: .75em;
		margin-top: 1.5em;
		text-align: center;
		color: #404040;
		clear: both;
		}

	h6 {
		font-size: 1.25em; 
		line-height: 1.25em;
		margin-bottom: .75em;
		font-weight: 400;
		}

	strong {
		font-weight:400;
		}

	.horizontal-break {
		display: block;
		float: left;
		clear:both;
		margin:1em 10% 2em;
		width: 80%;
		height: 1px;
		border-top: 1px solid #aaa;
		}
			
		
/*===== FADE ANIMATION =====*/

	.flexslider, .project-thumb, #content-wrapper, .project-description-wrapper {
  		position: relative;
    	-webkit-animation: mymove 1s;  /* Chrome, Safari, Opera */
    	-webkit-animation-iteration-count: 1;  /* Chrome, Safari, Opera */
    	-webkit-animation-fill-mode: backwards;  /* Chrome, Safari, Opera */
    	animation: mymove 1s;
    	animation-iteration-count: 1;
    	animation-fill-mode: backwards;
		}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes mymove {
    	from {top: 12px;}
    	to {top: 0px;}
		}

	@keyframes mymove {
    	from {top: 12px;}
    	to {top: 0px;}
		}
		
	
	#main {
		animation: fadein 1.5s;
    	-moz-animation: fadein 1.5s; /* Firefox */
    	-webkit-animation: fadein 1.5s; /* Safari and Chrome */
    	-o-animation: fadein 1.5s; /* Opera */
		}

	@keyframes fadein {
    	from {opacity:0;}
    	to {opacity:1;}
		}
	
	@-moz-keyframes fadein { /* Firefox */
    	from {opacity:0;}
    	to {opacity:1;}
		}
	
	@-webkit-keyframes fadein { /* Safari and Chrome */
    	from {opacity:0;}
    	to {opacity:1;}
		}
	
	@-o-keyframes fadein { /* Opera */
    	from {opacity:0;}
    	to {opacity: 1;}	

	}



/*===== COMPARISON SLIDER =====*/

	.ba-slider {
		clear:both;
    	position: relative;
   		overflow: hidden;
		margin: 10px auto 18px;
	}
 
	.ba-slider img {
    	width: 100%;
    	display:block;
	}
 
	.resize {
    	position: absolute;
    	top:0;
    	left: 0;
    	height: 100%;
    	width: 50%;
    	overflow: hidden;
	}

	.handle { /* Thin line seperator */
  		position:absolute; 
  		left:50%;
  		top:0;
  		bottom:0;
  		width:1px;
  		margin-left:-1px;
  		background: #555;
  		cursor: ew-resize;
	}
 
	.handle:after {  /* Big knob  */
    	position: absolute;
    	top: 50%;
    	width: 40px;
    	height: 40px;
    	margin: -20px 0 0 -20px;
    	content:'';
    	background: rgba(40,40,40,.9) url("../images/slider_arrows.png") no-repeat center;
		background-size: cover;
    	border:1px solid #555;
    	border-radius: 50%;
    	transition:all 0.2s ease;
	}

	.draggable:after {
    	width: 30px;
    	height: 30px;
		background-color: rgba(30,30,30,1);
    	margin: -15px 0 0 -15px;
	}	
		
	.ba-slider-tag-left, .ba-slider-tag-right {
		position:absolute; 
		bottom:0; 
		color:#fff;
		width:100%;
		background-image: -webkit-gradient( linear, center bottom, center top, from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)));
		background-image: -moz-linear-gradient(bottom,  rgba(0,0,0,.4), rgba(0,0,0,0));
		background-image: -o-linear-gradient(bottom,  rgba(0,0,0,.4), rgba(0,0,0,0));
		font-size: 14pt;
		padding:40px 20px 15px; 
		white-space:nowrap;
		box-sizing: border-box;
	} 


	.ba-slider-tag-right{
		right:0;
		text-align: right;

	}


	.ba-slider-tag-left{
		left:0;

	}


/*============================================================================*/


@media only screen and (max-width: 1000px) { /*Keeps project thumbnails from getting too narrow*/
	
	.project-thumb {
		height: 210px;
		}

	
	.overlay{		
		margin: 165px auto 0px;
		}



 	.project-description-wrapper { /* Adjusts background placement/sizing for edge case nearing the tablet breakpoint*/
		background-position-x: 65%; 
		background-size: 1120px;
		}
	
	.keep-scale {
		background-size: 1210px;
		}


}



/*============================================================================*/

@media only screen and (max-width: 800px) { /* Changes for tablet, excluding the work grid */
	
	
	#nav-container {
		min-height: 44px;
		padding: 25px 0px 0px;
		}

	.blurb, .first, .blurblink { 
		width: 96%; 
		margin: 7px 0px; 
		padding: 0px 2%;
		border: none;
		}
	
	.blurblink p { 
		margin-bottom: 0em;
	}
		
	.blurb .border-bottom, .blurblink .border-bottom {
		display:block;
		padding-top: 1em;
		width: 75%;
		margin: auto;
		bottom: 0;
		border-bottom: 1px solid #aaa;
		border-collapse:inherit;
		}
	
	#blurb-container {
		margin-bottom: .5em;
	}
	
	.project-description-wrapper {
        background-image: -webkit-linear-gradient(bottom, rgba(250,250,250,1), rgba(250,250,250,0.4) 80%, rgba(250,250,250,0.1)) !important;
        background-image: -o-linear-gradient(bottom, rgba(250,250,250,1), rgba(250,250,250,0.4) 80%, rgba(250,250,250,0.1)) !important;
        background-image: linear-gradient(to top, rgba(250,250,250,1), rgba(250,250,250,0.4) 80%, rgba(250,250,250,0.1)) !important;
		background-size: cover !important;
		padding: 16px 0px 16px; 
		}
	
	
	#logo {
		margin-left: 30px;
		}
	
	.navigation {
		margin-right: 30px;
		}
	
		 
	#content, #content.work, .project-description { 
		padding: 0px 30px; 
		}	 
	
		 
	.project-description p, h2 {
		max-width: 100%;
		}
	
	
	.project {
		margin: 10px auto 20px;
	}	
	
	
	p.caption {
		margin-top:-5px;
	}
	
	.caption, .caption-top {
		text-align: center;
		padding-left: 2%;
		padding-right: 2%;
		}
		

	
/*===== Résumé =====*/

	#resume1, #resume2 {
		margin-left: 0px;
		width: 90%;
		padding: 0px 0px;
		box-sizing: border-box;
		}


/*===== Footer =====*/
	
	#footer-wrapper { 
		height:90px; 
		}

	#social { 
		float: right;
		}

	.copyright { 
		clear:both; 
		float:none !important; 
		margin:10px auto; 
		padding: 15px 0px; 
		}
	
	
	
	
/*===== Work thumbnails, 2 columns =====*/

	
	
	.project-thumb { 
		width: 48.6%; 
		margin: 0px .7% 1.4%;
		height: 210px;
		}
	
	.overlay {		
		margin: 165px auto 0px;
		}
	
	
	
/*===== Comparison slider =====*/

	
	.ba-slider-tag-left, .ba-slider-tag-right { /* helps slider tag legibility, especially on mobile*/
		padding:40px 15px 10px; 
		font-size: 12pt;

	}

}




/*============================================================================*/

@media only screen and (max-width: 760px) {  /* Previously decreases work grid to two columns */
	

		
}




/*============================================================================*/

@media only screen and (max-width: 640px) {
	
	body {
		letter-spacing: 0pt;
		}
	
	h5 {
		font-size: 14pt;
		}

	
	#outer-wrapper { /* For the sticky footer */
		min-height: 60%;
		}
	
	.no-padding { /*Allows homepage slider to be flush with nav — apply to "Content-wrapper" div*/ 
		padding: 0px !important;
		}
	
	#header.no-border-mobile {		
		border-bottom: 1px solid #404040; /* This color is lighter for the homepage slider carousel — This makes the separation between the header and dark images less noticeable */
		}
		
	
	#main {
		padding-bottom: 0px;
		}
	
	#nav-container {
		min-height: 40px;
		margin: 0px auto;
		padding: 8px 0px 0px;
		}
	
	#logo {
		width: 210px; 
		height: 16px;
		margin-left: 18px;
		}
		
	#logo .mobile {
		display: block;
		width: 210px; 
		height: 16px;
		margin-top: 10px;
		}
	
	.desktop {
		display: none;
		}
	

 	.slide-trigger { 
		display: block; 
		float: right;
		margin-right: 12px; 
		width: 35px; 
		height: 29px; 
		background-size: 35px;
 		}
	
	.no-js .slide-trigger { 
		display: none; 
		}
	
	.no-js .navigation { 
		display: block;
		}
	
  	.navigation { 
		margin: 0px; 
		float: none; 
		display: none; 
		clear: both; 
		padding-top:10px; /* space between slide-trigger and pop out menu*/
		}
	
	.navigation li { 
		float: none;
		padding: 0px -10px; 
		background: #000;
		background-image: -webkit-gradient( linear, center bottom, center top, from(#454545),to(#555555));
		background-image: -moz-linear-gradient(bottom, #454545, #555555);
		background-image: -o-linear-gradient(bottom, #454545, #555555);
		}
		
	.navigation li a, .navigation li a.current, .navigation li a:hover { 
		border-bottom: 1px solid #303030;
		border-top: 1px solid #666666; 
		margin: 0px; 
		padding: 15px;
		}
	
	.navigation li a {
		color: #bbb;
		}
		
	.navigation li a.current{ /*Sets color and weight of the current tab text in mobile and tablet nav*/
		color:#2a2a2a;
		font-weight: 600;
		}
		
	.navigation li a:hover {
		border-top: 1px solid #909090; 
		}
   
	.navigation li:hover {
		background-image: -webkit-gradient( linear, center bottom, center top, from(#656565),to(#757575));
		background-image: -moz-linear-gradient(bottom, #656565, #757575);
		background-image: -o-linear-gradient(bottom, #656565, #757575);
		}
	   
	.navigation li:hover a { 
  		color: #ffffff;
		}
	
	.navigation li a::after {/* Removes desktop underline mask from mobile list items */
 		display:none;
		}
		
	li.first-nav {
	    background-image: -webkit-linear-gradient(bottom, #454545, #505050);
	    background-image: -o-linear-gradient(bottom, #454545, #505050);
	    background-image: linear-gradient(to top, #454545, #505050);	
		}
	
	li.first-nav:hover{
	    background-image: -webkit-gradient( linear, center bottom, center top, from(#656565),to(#707070));
	    background-image: -moz-linear-gradient(bottom, #656565, #707070);
	    background-image: -o-linear-gradient(bottom, #656565, #707070);
		}
	
	#content-wrapper {
		padding-top: 16px;
		}
	

	#content, .project-description {
		padding: 0px 16px;
		}
	
	#content.work {
		padding: 0px 12px;
		}
	
	
	.extra-padding{
		padding-left: 18px !important;
		padding-right: 18px !important;
		}
	
	#sticky-wrapper{
		margin-top: 0px;
		}
	
	#footer-content{
		padding: 0px 20px;
		}
	
	select{	
		display: block; 
		float: left;
	 	width: 210px; 
		background: #eee;
		font-size:100%;
		font-weight: 600;
		letter-spacing: 1pt;
		color: #666;
		margin: 0px 0px 10px;	
		}
	
	select:focus {
		border-color: #666;
		}
	
		
	#bottom-nav {
		display:none;
		}

	#social {
		float: right;
		margin-top: -5px;
		}

	}




/*============================================================================*/
@media only screen and (max-width: 460px) {
	
	
	#work {
		width: 100%;
		margin: 0;
		}
		
	.project {
		width: 100%;
		max-width: 100%;
		}
	
	.project-thumb {
		width: 100%;
		margin: 0px auto 10px;
		border: none;
		padding: 0px;
		}
	
	.project-thumb {
		height: 210px;
}
	
	.overlay{		
		margin: 165px auto 0px;
		}
		
	.blurb, .blurblink { /*broken out from project-thumb, to allow for different padding behavior. See 800px breakpoint */
		width: 100%;
		border: none;
		margin: 10px auto;
		padding: 0px;
	}
				
	.project-description h2 {
		font-size: 16pt;
		letter-spacing: 0pt;
		}
	
	
	.vertical, .narrow {
		width: 100%;
	}
		
	#footer-wrapper{ 
		height:130px;
		}

	#spacer {
		height: 25px;
		}
	
	#footer {
		padding-top: 10px;
		}
	
	#footer-content {
		padding: 0px;
		}
		
	select, #social { 
		clear:both; 
		float: none; 
		margin: 10px auto 15px; 
		}

	select{
		width: 70%;
		}
		
	#social {
		width: 260px;
		padding-right:12px;
		}
		
	#social li a{ 
		height: 40px;
		width: 40px;
		margin-left:12px;
		}
	
	#social li a img {
		display: block;
		height: 40px;
		width: 40px;
		}
		
}