/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .seventeen.columns,
        .container .eighteen.columns,
        .container .nineteen.columns,
        .container .twenty.columns,
        .container .twenty-one.columns,
        .container .twenty-two.columns,
        .container .twenty-three.columns,
        .container .twenty-four.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen,
        .container .offset-by-sixteen,
        .container .offset-by-seventeen,
        .container .offset-by-eighteen,
        .container .offset-by-nineteen,
        .container .offset-by-twenty,
        .container .offset-by-twenty-one,
        .container .offset-by-twenty-two,
        .container .offset-by-twenty-three { padding-left: 0; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .seventeen.columns,
        .container .eighteen.columns,
        .container .nineteen.columns,
        .container .twenty.columns,
        .container .twenty-one.columns,
        .container .twenty-two.columns,
        .container .twenty-three.columns,
        .container .twenty-four.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
    }


/* #Tablet, small desktop
================================================== */


    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 5px; margin-right: 5px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 5px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 5px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 22px;  }
        .container .two.columns                     { width: 54px;  }
        .container .three.columns                   { width: 86px;  }
        .container .four.columns                    { width: 118px; }
        .container .five.columns                    { width: 150px; }
        .container .six.columns                     { width: 182px; }
        .container .seven.columns                   { width: 214px; }
        .container .eight.columns                   { width: 246px; }
        .container .nine.columns                    { width: 278px; }
        .container .ten.columns                     { width: 310px; }
        .container .eleven.columns                  { width: 342px; }
        .container .twelve.columns                  { width: 374px; }
        .container .thirteen.columns                { width: 406px; }
        .container .fourteen.columns                { width: 438px; }
        .container .fifteen.columns                 { width: 470px; }
        .container .sixteen.columns                 { width: 502px; }
        .container .seventeen.columns               { width: 535px; }
        .container .eighteen.columns                { width: 566px; }
        .container .nineteen.columns                { width: 598px; }
        .container .twenty.columns                  { width: 630px; }
        .container .twenty-one.columns              { width: 662px; }
        .container .twenty-two.columns              { width: 694px; }
        .container .twenty-three.columns            { width: 726px; }
        .container .twenty-four.columns             { width: 758px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 32px; }
        .container .offset-by-two                   { padding-left: 64px; }
        .container .offset-by-three                 { padding-left: 96px; }
        .container .offset-by-four                  { padding-left: 128px; }
        .container .offset-by-five                  { padding-left: 160px; }
        .container .offset-by-six                   { padding-left: 192px; }
        .container .offset-by-seven                 { padding-left: 224px; }
        .container .offset-by-eight                 { padding-left: 256px; }
        .container .offset-by-nine                  { padding-left: 288px; }
        .container .offset-by-ten                   { padding-left: 320px; }
        .container .offset-by-eleven                { padding-left: 352px; }
        .container .offset-by-twelve                { padding-left: 384px; }
        .container .offset-by-thirteen              { padding-left: 416px; }
        .container .offset-by-fourteen              { padding-left: 448px; }
        .container .offset-by-fifteen               { padding-left: 480px; }
        .container .offset-by-sixteen               { padding-left: 512px; }
        .container .offset-by-seventeen             { padding-left: 544px; }
        .container .offset-by-eighteen              { padding-left: 576px; }
        .container .offset-by-nineteen              { padding-left: 608px; }
        .container .offset-by-twenty      	        { padding-left: 640px; }
        .container .offset-by-twenty-one            { padding-left: 672px; }
        .container .offset-by-twenty-two            { padding-left: 704px; }
        .container .offset-by-twenty-three          { padding-left: 736px; }
        
        
        
    }











/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		/********************************************************
		
		Home slider
		
		********************************************************/
			.sliderImage		{ height: auto; padding-bottom: 10px; }
			.slides li img 		{ width: 100%; height: auto; }
			.flex-control-nav 	{ width: 502px !important; }


		/********************************************************
		
		Photo Column
		
		********************************************************/
			.tab-about .nine.columns.offset-by-three.photo-column {
				padding-left: 29px; /* (768 - 710 (content width)) = 58) 58/2 = 29 */
			}
						
			.photo-column img 	{ height: auto;	}

		/********************************************************
		
		Text Columns
		
		********************************************************/

			.tab-portfolio #information-column,
			.tab-portfolio .text-column,
			.tab-portfolio .jspContainer,
			.tab-before-after #information-column,
			.tab-before-after .text-column,
			.tab-before-after .jspContainer {
				height: auto !important;
				display: block !important;
				float: none !important;
				clear: both !important;
				width: 100% !important;
			}
			
			.tab-portfolio .jspPane, 
			.tab-before-after .jspPane {
				width: 540px !important;
				position: relative;
				margin: 0 auto;
				text-align: justify;
			}
		
		/********************************************************
		
		Portfolio
		
		********************************************************/
		
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(5n+5),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(5n+5),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(5n+5) {  
				margin-right:10px;
			}
	
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(4n+4),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(4n+4),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(4n+4) {  
				margin-right:0;
			}

			#mainImageContainer {	height: auto; }
		
		/********************************************************
		
		Footer
		
		********************************************************/
	
			.socialLinks.alpha {
				left: 0;
			}
			.socialLinks.omega {
				right:0;
			}
		
			.home-search-text {
				border: none;
			}
		
		/********************************************************
		
		Awards
		
		********************************************************/
		
			.awardContent {
				position: relative;
				top:0;
			}

		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		/********************************************************
		
		Grids
		
		********************************************************/
		
			.tab-portfolio.page-by-room #thumbnail-grid .thumb {
				width:75px;
				margin-right: 10px;
				margin-bottom: 10px;
				height: auto;
			}

		/********************************************************
		
		Portfolio
		
		********************************************************/

		#beforeWrapper .b-and-a-thumb {
			left:20px;
		}


		.tab-before-after .b-and-a-thumb.horizontal {
			top: 122px; /* 332px (height of container) minus average height of horzontal images 114px, then divided by 2 */
		}
	
		.tab-before-after .b-and-a-thumb.vertical {
			top: 86px; /* 334px (height of container) minus average height of vertical images 90px, then divided by 2 */
		}

		/********************************************************
		
		Text Columns
		
		********************************************************/
			.tab-about .photo-column         	{ width: 214px; }
			.tab-about .text-column-container 	{ width: 224px; }

			.tab-about .jspPane {
				/* override width of jspPane for about pages so the scrollbar doesn't appear over the top of the content. This overrides an inline style */
				width:214px !important;
			}


			
			.tab-about .text-column,
			.tab-about .text-column-container,
			.tab-log-in .text-column,
			.tab-log-in .text-column-container {
				height: 253px !important;			
			}

			.tab-contact .text-column,
			.tab-contact .text-column-container {
				height: 334px !important;			
			}
			
			#information-column-wrapper {
				clear:both;
				float: none;
			}
			
			.tab-log-in .text-column h1 {
				margin-top:0;
			}
			
			.page-log-in .text-column label[for="username"], .page-log-in .text-column label[for="password"] {
				margin-top:1em;
			}
			
			.customCheckbox {
				top:1.75em;
			}
			
			.rememberMe {
				top:2em;
			}
			
			.submit {
				top:2.5em;
			}
		
		/********************************************************
		
		Contact
		
		********************************************************/
		
			.page-contact .by-appointment { top:75px; }
			.page-contact .phone { top:115px; }
			.page-contact .phone a:link, .page-contact .phone a:active, .page-contact .phone a:visited  { color: #}
			.page-contact .address { top:170px; }
			.page-contact .address .square {
				height: 0;
				clear: both;
				display: block;
			}
			.page-contact .email { top: 15px; }
			
	}
	
	/* Anyting 768 pixels or larger */
	@media only screen and (min-width:768px) {
		/* ensure #nav is visible on desktop version */
		#nav 		{ display: block !important; }	
		#menu-icon	{ display: none; }	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		/********************************************************
		
		Navigation Menu
		
		********************************************************/
		
			#nav-wrap 			{ position: relative; margin-bottom: 0; width: 100%; }
			/* menu icon */
			nav #menu-icon span { display: block; }
	
			#menu-icon 			{ width: 42px; height: 30px; background: transparent url(../assets/menu-icon-active.png) no-repeat 10px center; padding: 0; margin: 0; cursor: pointer; margin: 1em auto 0 auto; display: block; /* show menu icon */ }
			#menu-icon.active 	{ background-image: url(../assets/menu-icon.png); }
			/* main nav */
			#nav 				{ clear: both; position: absolute; padding:5%; top: 30px; width: 90%; z-index: 10000; display: none; /* visibility will be toggled with jquery */ }
			/* dropdown */
			#nav ul 			{ width: auto; position: static; display: block; border: none; }
			
			#nav .sub-menu ul 	{ width: auto !important; }
			
			/********************************************************
			
			nav color scheme
			
			********************************************************/
				
				#menu-icon 			{ background-color: #fff; border: solid 1px #efefef; }
				
				#menu-icon:hover,
				#menu-icon.active,
				#nav 				{ background-color:#f2f2f2;	}
				
				#nav 				{ border: solid 1px #efefef; }
				
			/********************************************************
			
			// nav color scheme
			
			********************************************************/
			
			
			#nav li {
				display: block;
				width: 100%;
				text-align: left;
			}
			
			#nav li a {
				margin-top:1.5em;
			}
			
			#nav .sub-menu {
				display: block !important;
				padding-left: 10px;
			}
						
			#nav .sub-menu a {
				margin-top:0;
			}
			
			.sf-menu div.sub-menu {
				position: relative !important;
				display:block !important;
				visibility: visible !important;
				border: none !important;
			}
			
			.sf-menu div.sub-menu3,
			.sf-menu div.sub-menu4,
			.sf-menu div.sub-menu4 {
				height: 0px;
			}
		
		/********************************************************
		
		Home slider
		
		********************************************************/
			.flex-control-nav 	{ width: 100% !important; }

		/********************************************************
		
		Text Columns
		
		********************************************************/
		
			.text-column,
			.tab-about .text-column,
			.text-column-container {
				height: auto !important;
				background: transparent !important;
				color:#4a3c31;
				text-shadow: none;
				
			}
			
			.tab-portfolio .jspPane, 
			.tab-before-after .jspPane,
			.tab-about .jspPane {
				width: 100% !important;
			}
			
			.tab-about .text-column-container {
				width: 100%;
				margin: 0;
			}
			
			.tab-log-in .text-column-container {
				padding:0 !important;
			}

			.tab-log-in .jspContainer {
				height: 400px !important;
			}

		/********************************************************
		
		Form
		
		********************************************************/
		
		.page-log-in input[type="text"],
		.page-log-in input[type="password"] {
			background-color:#f2f2f2;
			color: #4a3c31;
		}
		
		.customCheckbox label {
			border:1px solid #ccc;
			background: transparent;
		}
		

		.submit {
			color: #5c4f45;
			border:1px solid #ccc;
			padding: 20px;
		}
		
		/********************************************************
		
		Grids
		
		********************************************************/
		
			.tab-portfolio.page-by-room #thumbnail-grid .thumb {
				width:62px;
				height: auto;
				margin-right: 9px;
				margin-bottom: 9px;
				height: auto;
			}


			.tab-portfolio.page-by-project #thumbnail-grid .thumb,
			.tab-portfolio.page-by-detail #thumbnail-grid .thumb,
			.tab-before-after.page-before-after #thumbnail-grid .thumb {
				margin-right:33px;
				margin-bottom: 33px;
			}
	
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(5n+5),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(5n+5),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(5n+5) {  
				margin-right:33px;
			}
	
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(4n+4),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(4n+4),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(4n+4) {  
				margin-right:33px;
			}
	
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(3n+3),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(3n+3),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(3n+3) {  
				margin-right:0;
			}

			.thumb {
				background: #bebebe;
				-webkit-filter: grayscale(0%); 
				-moz-filter: grayscale(0%);
				filter: grayscale(0%);
				filter: url(desaturate.svg#greyscale);
				filter: gray;
				filter: alpha(opacity=100);
				opacity: 1;
				transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-webkit-transition: all .25s ease-in-out;
				zoom: 1;
			}
		
		/********************************************************
		
		Images
		
		********************************************************/
		
		.tab-log-in  .nine.columns.offset-by-three.photo-column {
			display: none;
		}

		.tab-about .photo-column {
			width: 90%;
			float: none;
			margin: 0 auto;
		}

		.mobile-before-image {
			display: block;
			margin:0 auto 20px auto;
		}
		
		.photo-label {
			display: block;
			text-transform: uppercase;
			font-family: "freight-sans-pro",sans-serif;
			font-weight: 300;
			font-size: .875em;
			letter-spacing: .2em;
		}
		
		#mainImageContainer {
			height: auto;
			max-height:none;
			overflow: visible;
			background: url('/images/pre-loader.gif') center 100px no-repeat;
		}
		
		#beforeWrapper {
			display: none;
		}
	
		/********************************************************
		
		Contact
		
		********************************************************/
		
			.page-contact h1.by-appointment { color: #000; }
			.page-contact .by-appointment 	{ top:0; padding:2em 0 1em 0; }
			.page-contact .phone 			{ top:0; padding:1em 0; }
			.page-contact .address 			{ top:15px; padding:1em 0; }
			.page-contact .email 			{ top:-125px; padding:1em 0; }

		/********************************************************
		
		Misc
		
		********************************************************/
		
		.text-column-container a:link, .text-column-container a:active, .text-column-container a:visited,
		.phone a:link, .phone a:active, .phone a:visited { color:#4a3c31; text-decoration: none; }
		.text-column-container a:link, .phone a:hover { color:#4a3c31; }
		
		
		/********************************************************
		
		Footer
		
		********************************************************/
		
		footer .break {
			clear: both;
			display: block;
		}
		
		.socialLinks a.basecamp {
			padding-bottom: 2em;
			display: block;
		}
		
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		ul.services,
		ul.publications {
			margin-left:2em;
		}

		/********************************************************
		
		Logo
		
		********************************************************/
		
			.logo h1 		{ font-size: .9em; position: relative;}
			.logo 			{ padding:15px 0 5px 0; left:0; margin-right: -.5em; }
			.logo .sub-logo { font-size:.7em; letter-spacing: .6em; margin-top:.35em; left:-3px; /* to fix centering issue */ }
	
		
		/********************************************************
		
		Navigation
		
		********************************************************/

			#nav li a {
				font-size:1.25em; 
			}

		/********************************************************
		
		Text columns
		
		********************************************************/


		/********************************************************
		
		Grids
		
		********************************************************/
		
			.tab-portfolio.page-by-project #thumbnail-grid .thumb,
			.tab-portfolio.page-by-detail #thumbnail-grid .thumb,
			.tab-before-after.page-before-after #thumbnail-grid .thumb {
				margin-right:9px;
				margin-bottom: 9px;
				width: 94px;
				height: 94px;
			}
	
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(5n+5),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(5n+5),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(5n+5) {  
				margin-right:9px;
			}
	
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(4n+4),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(4n+4),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(4n+4) {  
				margin-right:9px;
			}
	
			.tab-portfolio.page-by-project #thumbnail-grid a:nth-child(3n+3),
			.tab-portfolio.page-by-detail #thumbnail-grid a:nth-child(3n+3),
			.tab-before-after.page-before-after #thumbnail-grid a:nth-child(3n+3) {  
				margin-right:0px;
			}
		
			.tab-portfolio.page-by-room #thumbnail-grid {
				width: 204px;
				margin-left: 48px; /* total content is 300px, minus grid = 96px, divide by 2 */
			}
			
			.tab-portfolio.page-by-room #thumbnail-grid a img {
				display: inline-block;
			}
			
			.tab-portfolio.page-by-room #thumbnail-grid a:nth-child(6n+6),
			.tab-portfolio.page-by-room #thumbnail-grid a img.last-in-row {  
				margin-right:9px !important;
			}
			
			.tab-portfolio.page-by-room #thumbnail-grid a:nth-child(3n),
			.tab-portfolio.page-by-room #thumbnail-grid a:nth-child(3n) img {
				margin-right: 0 !important;
			}
			.tab-portfolio.page-by-room #thumbnail-grid a:nth-child(4n+4) {
				clear: both !important;
				display: block;
			}

		/********************************************************
		
		Project Navigation
		
		********************************************************/
		
			#project-navigation li a {
				padding: 0 12px 0 5px;
			}
		/*	
			a.grid-icon-link {
				background-position-x: 8px;
			}
		*/	
		/********************************************************
		
		Footer
		
		********************************************************/
			
			.copyright {
				padding:1.4em 0;
				display: block;
			}
		
			.copyright .break {
				clear: both;
				display: block;
			}
		
	}