/* @override 
	http://mister.mayfielddigital.co.uk/wp-content/themes/mister/_css/default_full_size.css
	http://dev.stevenbonner.com/wp-content/themes/mister/_css/default_full_size.css
	http://mister.mayfielddigital.co.uk/wp-content/themes/mister_steven_bonner_child_theme/_css/default_full_size.css
	http://dev.precoded.com/wp-content/themes/mister/_css/default_full_size.css
	http://www.precoded.com/wp-content/themes/mister/_css/default_full_size.css
	http://www.somnermacdonald.co.uk/dev/wp-content/themes/mister/_css/default_full_size.css
	http://dev.studiomister.com/wp-content/themes/mister/_css/default_full_size.css */

/* ************************************** COMMON ELEMENTS ************************************** */

html{
	overflow-y: scroll; /* forces vertical scrollbar to avoid jumps when transitioning */
}

/* ************************************** HEADER ELEMENTS ************************************** */

#banner{
	position: relative; z-index: 20000;
	overflow: hidden;
	-webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box;
	padding: 25px 0px;
	background-color:  #f2f2f2;
	background-color: rgba(242,242,242,0.95);
	/* margin-bottom: 135px; */
	text-align: left;
	
	margin-top:  0;
}

/* for safari 4 testing */
#banner{
	/* position: fixed; */

}

.banner_column{
	float: left;
	width: 31%;
	padding-right: 2.333333%;
}

.banner_half_column{
	float: left;
	width: 14.333333%;
	padding-right: 2.333333%;
}

.banner_one_and_half_column{
	float: left;
	width: 47.666666%;
	padding-right: 2.333333%;
}

/*
Using a spacer graphic would normally be poor practice, but in this case it's necessary
to preserve the flexible column widths in the banner as we position elements aligned to
the bottom of the banner panel. If you have a better solution we'd love to hear from you:
support@precoded.com
*/

.spacer{
	display: inline-block;
}

/* portfolio grid / list toggle button */

#portfolio_grid_swapper{
	position: absolute; bottom: 28px;
	
	display: block;
	margin-left: 45px;
	cursor: pointer;
}

#portfolio_grid_swapper a{
	-webkit-transition: opacity .4s; -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;
}

#portfolio_grid_swapper:hover a{
	 filter: alpha(opacity = 25); opacity: 0.25;
}

#portfolio_grid_swapper.active:hover a{
	 filter: alpha(opacity = 100); opacity: 1;
}

#portfolio_grid_swapper.active.grid #portfolio_list_button,
#portfolio_grid_swapper.active.list #portfolio_grid_button{
	 filter: alpha(opacity = 25); opacity: 0.25;
}

#portfolio_grid_swapper.active.grid #portfolio_grid_button,
#portfolio_grid_swapper.active.list #portfolio_list_button{
	 filter: alpha(opacity = 100); opacity: 1;
}

/*
#portfolio_grid_swapper.active a{
	opacity: 0.25; filter: alpha(opacity = 25);
}

#portfolio_grid_swapper a.selected{
	opacity: 1; filter: alpha(opacity = 100);
}
*/

#portfolio_grid_button{
	margin-right: 12px;
}

/* banner logo */

#banner_logo_container{
	position: absolute; bottom: 0px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
	width: 100%; /* max-width: 1590px; */
	padding-left: 45px; padding-right: 45px;
}

#banner_logo{
	position: absolute; bottom: 29px;
	max-width: 32%; width: auto; height: auto;
	
	margin-bottom: 0;
}

.no_grid_swapper #banner_logo{
	max-width: 40%;
}

/* main nav */

#banner_main_nav{
	float: left;
	margin-bottom: 0;
	line-height: 1.1;
}

#banner_main_nav li{
	display: block;
	margin: 0; margin-bottom: 3px
}

#banner_main_nav a, #banner_contact_list a{
	-webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}

#banner_main_nav a:hover, #banner_contact_list a:hover{
	 filter: alpha(opacity = 40); opacity: 0.4;
}

/* contact list text */

#banner_contact_list{
	position: absolute; bottom: 25px;
	width: 31%;
}

#banner_contact_list li{
	margin: 0;
}





/* ************************************** MAIN PANEL ************************************** */

#container, #banner, #portfolio_list{
	min-width: 768px;
}

#main{
	min-width: 678px;
}

#main{
	overflow: hidden;
	max-width: 1500px;
	margin: 0px 45px 0px 45px;
	padding-top: 90px; 
}

.portfolio_floater #main{
	margin-bottom: 120px;
}

/* ************************************** COMMON ELEMENTS  ************************************** */

body.landing #main > h2, body.article #main > h2, .blank_h2{
	float: left; 
	width: 8%; max-width: 80px;
	margin-bottom: 0; margin-top: 0; margin-right: 2%;
}

h2{
	clear: both;
}

.left + h2{
	clear: none;
}

body.landing #main .left{
	width: 39%;
	margin-right: 2%;
}

body.landing #main .right{
	width: 39%;		
}

.two_col{
	float: left;
	width: 90%;
	margin-bottom: 90px;
}

.half_col{
	float: left;
	width: 90%;
	margin-bottom: 90px;
}

/* intro panel */

.intro{
	position: relative; top: -30px;
	margin-bottom: 60px;
}

.intro a{
	display: block;
	-webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}

.intro a:hover{
	filter: alpha(opacity = 40); opacity: 0.4;
}

.intro h1, .intro h3{
	/* max-width: 750px; */
	font-size: 4.2em;
}

.intro p{
	/* max-width: 750px; */
	margin-top: 30px;
	font-size: 2.8em;
}

/* articles list */

.articles_list{
	float: left;
	position: relative; top: -17px;
	margin-bottom: 90px;
}

#main_article .articles_list{
	top: 0;
}

.articles_list a{
	 filter: alpha(opacity = 100); opacity: 1;
	-webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}

.articles_list a:hover{
	 filter: alpha(opacity = 40); opacity: 0.4;
}

.articles_list h3{
	font-size: 2.8em;
}

.articles_list p{
	font-size: 1.4em;
}

/* ************************************** HOMEPAGE ELEMENTS ************************************** */

/* highlighted projects */

.highlighted_projects{
	position: relative; top: -17px;
}

.highlighted_project_meta h3, .highlighted_project_meta p{
	max-width: 810px;
}

.highlighted_project_meta h3 a{
	-webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}

.highlighted_project_meta h3{
	font-size: 2.8em;
}

.highlighted_project_meta h3 a:hover{
	filter: alpha(opacity = 40); opacity: 0.4; 
}

/* latest tweets */

#latest_tweets{
	position: relative; top: -17px;
}

#latest_tweets a{
	-webkit-transition: opacity .4s; -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;
}

#latest_tweets a:hover{
	filter: alpha(opacity = 40); opacity: 0.4; 
}

#latest_tweets li{
	margin-bottom: 30px; padding-left: 50px; padding-top: 0px;
	background: transparent url(../_img/tweet_bg_small.png) 0px 5px no-repeat;
}

#latest_tweets h3{
	
}

#latest_tweets p{
	font-size: 2.8em;
}

/* mailchimp newsletter sign up */

#mailing_list_signup{
	position: relative; top: -17px;
}

#mailing_list_signup h3, #mailing_list_signup p{
	max-width: 810px;
}

#mailing_list_signup h3{
	font-size: 2.8em;
}

#mailing_list_signup input[type=text]{
	width: 250px;
}
/* ************************************** BLOG ELEMENTS ************************************** */

#intro_pagination_arrows{
	margin-left: 20px;
}

#intro_pagination_arrows a{
	display: inline; 
	top: 15px;
}

#intro_pagination_arrows img{
	width: auto; height: auto;
}

#pagination a{
	-webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}

#pagination a:hover{
	filter: alpha(opacity = 40); opacity: 0.4;
}

/* ************************************** ARTICLE PAGE ELEMENTS ************************************** */

#article_gallery{
	float: left;
	position: relative; top: -35px;
	width: 28%;
	margin-right: 3.5%; margin-bottom: 90px;
}

#article_gallery img{
	width: 100%; height: auto;
	margin-bottom: 25px;
}

#main_article{
	float: left;
	position: relative; top: -30px;
	width: 90%;
	margin-bottom: 90px;
}

#main_article.gallery{
	width: 58.5%;
}

#main_article a{
	filter: alpha(opacity = 100); opacity: 1;
	-webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}

#main_article a:hover{
	filter: alpha(opacity = 40); opacity: 0.4;
}

#main_article header h1{
	margin-bottom: 45px;
	font-size: 4.2em;
}

#main_article.gallery header h1{
	font-size: 3.2em;
}

/* article body */

#article_body h2, #article_body h1{
	margin-bottom: 22px; margin-top: 44px;
	font-size: 4.2em; font-weight: bold; line-height: 1.2;
}

#main_article.gallery #article_body h1, #main_article.gallery #article_body h2{
	font-size: 3.2em;
}

#article_body h3{
	margin-bottom: 22px; margin-top: 44px;
	font-size: 3.2em; font-weight: bold; line-height: 1.2;
}

#article_body h4{
	margin-bottom: 22px; margin-top: 44px;
	font-size: 2.4em; font-weight: bold; line-height: 1.2;
}

#article_body h5{
	margin-bottom: 22px; margin-top: 44px;
	font-size: 1.8em;
}

#article_body h6{
	margin-bottom: 22px; margin-top: 44px;
	font-size: 1.8em; 
}

#article_body p, #article_body ul, #article_body ol, #article_body pre{
	margin-bottom: 22px;
	font-size: 1.8em;
}

#article_body pre{
	font-size: 2.2em;
}

hr{
	margin: 44px 0; 
}

#article_body ul, #article_body ol{
	margin-top: 33px; margin-bottom: 33px;
}

#article_body li{
	margin-left: 26px; margin-bottom: 16px;
}

#article_body blockquote{
	margin-top: 44px; margin-bottom: 44px; padding-top: 52px;
	background: transparent url(../_img/tweet_bg_large.png) left top no-repeat;
}

#article_body blockquote p{
	font-size: 2.2em;
}

#article_meta, #article_categories, #article_tags{
	margin-bottom: 6px;
}

#article_social_share{
	margin-bottom: 45px; margin-top: 45px;
	font-size: 1.8em;
}

#article_social_share a{
	font-weight: bold;
}

/* next / previous article */

#main_article #pagination h2{
	font-size: 1.8em; 
}

/* related articles */

#main_article .articles_list{
	margin-top: 120px; margin-bottom: 0;
}

#main_article .articles_list h2{
	font-size: 1.8em; 
}

/* people list */

#people_list{
	overflow: hidden;
	margin-top: 33px; margin-bottom: 33px;
}

#people_list hr{
	float: left; clear: both;
	width: 100%;
	display: block;
	margin-top: 0; margin-bottom: 50px;
	border-color: #eeeeee;
}

.person{
	float: left;
	width: 27%; margin-right: 6%;
}

.first_person_of_three{
	clear: left;
}

.person:nth-of-type(1n), .person:nth-of-type(2n), .person:nth-of-type(3n){
	width: 27%;
	margin-right: 9.5%;
}

.person:nth-of-type(3n){
	margin-right: 0;
}

/* ************************************** PORTFOLIO LIST / GRID ************************************** */

/* portfolio peeper */

.portfolio_floater #portfolio_list{
	display:  none;
	
	/* -webkit-transform: translate3D(0,0,0); -moz-transform: translate3D(0,0,0); -o-transform: translate3D(0,0,0); transform: translate3D(0,0,0); */
}

/*
body.project.portfolio_floater #portfolio_list  ul{
	-webkit-box-shadow: 0px -1px 30px rgba(0,0,0,0.75); -moz-box-shadow: 0px -1px 30px rgba(0,0,0,0.75); o-box-shadow: 0px -1px 30px rgba(0,0,0,0.75); box-shadow: 0px -1px 30px rgba(0,0,0,0.75);
}
*/ 

#portfolio_list{
	/* position: fixed; top: 580px; */
	z-index: 10000;
	clear: both;
	width: 100%;
	
	/*
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	*/
	
	/* -webkit-transform: translate3D(0,0,0); -moz-transform: translate3D(0,0,0); -o-transform: translate3D(0,0,0); transform: translate3D(0,0,0); */
}

#portfolio_list ul{
	overflow: hidden;
	/*background-color:  #ffcc00;*/
	
	-webkit-box-shadow: 0px -1px 30px rgba(0,0,0,0.75); -moz-box-shadow: 0px -1px 30px rgba(0,0,0,0.75); o-box-shadow: 0px -1px 30px rgba(0,0,0,0.75); box-shadow: 0px -1px 30px rgba(0,0,0,0.75);
}

#portfolio_list.active{
	
}

#portfolio_list.floater_transition{
	-webkit-transition: -webkit-transform 0.8s; -moz-transition: -moz-transform 0.8s; -o-transition: -o-transform 0.8s; transition: transform 0.8s;
}

#show_hide_portfolio{
	display: block;
	padding: 20px 0px 20px 0px;
	text-align: center;
	/* background: rgba(242,242,242,0.95); */
	cursor: pointer;

	background: -moz-linear-gradient(top, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 50%, rgba(242,242,242,1) 94%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,0)), color-stop(50%,rgba(242,242,242,1)), color-stop(94%,rgba(242,242,242,1)));
	background: -webkit-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%,rgba(242,242,242,1) 94%);
	background: -o-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%,rgba(242,242,242,1) 94%);
	background: -ms-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%,rgba(242,242,242,1) 94%);
	background: linear-gradient(top, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%,rgba(242,242,242,1) 94%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f2f2', endColorstr='#f2f2f2',GradientType=0 );
	
}

body.project #show_hide_portfolio{
	background: none;
	filter: none;
}	

/* portfolio page */

body.projects #portfolio_list{
	display: block;
	-webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none;
}

/* portfolio */

/* portfolio in main panel */

#main .portfolio{
	position: relative; top: -17px;
}

#main .portfolio.grid li{
	width:33.3333%;
}

#main .portfolio.grid .project_list_item_meta p{
	display: none;
}

#main .portfolio.grid .project_list_item_meta .view_project_link{
	display: block;
}

/* portfolio */

.portfolio{
	margin-left: 0; margin-right: 0;
}

/*portfolio list */

.portfolio.list li a .project_list_item_meta{
	-webkit-transition: background-color .4s; -moz-transition: background-color .4s; -o-transition: background-color .4s; transition: background-color .4s;
}

.portfolio.list li a:hover .project_list_item_meta{
	background-color: #e73d13;
	background-color: rgba(231,61,19,0.9);
}

.portfolio.list li .project_list_item_meta h3, .portfolio.list li .project_list_item_meta p{
	-webkit-transition: color .4s; -moz-transition: color .4s; -o-transition: color .4s; transition: color .4s;
}

.portfolio.list li a:hover .project_list_item_meta p, .portfolio.list li a:hover .project_list_item_meta h3{
	color: #ffffff;
}

/* portfolio grid */

.portfolio.grid .project_list_item_meta{
	display: block;
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 0;
	background-color: #e73d13;
	background-color: rgba(231,61,19,0.9);
	filter: alpha(opacity = 0); opacity: 0; 
}

#portfolio_list.grid.active .project_list_item_meta, #main .portfolio.grid .project_list_item_meta{
	-webkit-transition: opacity .4s; -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;
}

#portfolio_list.grid.active li a:hover .project_list_item_meta, #main .portfolio.grid li a:hover .project_list_item_meta{
	filter: alpha(opacity = 100); opacity: 1; 
}

.portfolio.grid .project_list_item_meta h3{
	color: #ffffff;
}

.portfolio.grid .project_list_item_meta p{
	display: block;
	margin-bottom: 18px;
	line-height: 1.2; color: #ffffff; font-size: 1.2em;
}

.portfolio.grid .project_list_item_meta .view_project_link{
	position: absolute; bottom: 0px;
}

/* ************************************** PROJECT ELEMENTS ************************************** */

#main.project_main{
	overflow: hidden;
	max-width: none;
	
	margin: 0; padding-top: 0;	
	/* background: transparent url(../_img/circle-loading.png) center no-repeat; */
}

.js #carousel_loading_image{
	position: fixed; top: 0; bottom: 0; left: 0; right: 0;
	background: transparent url(../_img/carousel-loading-message.png) no-repeat center center;
	
	filter: alpha(opacity = 100); opacity: 1;	
	-webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;
}

.js #carousel_loading_image.hidden{
	filter: alpha(opacity = 0); opacity: 0;	
}

/* project header */

#project_header{
	position: absolute; top: 45px; left: 45px; z-index: 5000;
	margin-left: 0; margin-bottom: 0;
}

.js #project_header{
	filter: alpha(opacity = 0); opacity: 0;	
	-webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;
}

.js #project_header.active{
	filter: alpha(opacity = 100); opacity: 1;	
}

#project_header h1 a{
	-webkit-transition: color .4s; -moz-transition: color .4s; -o-transition: color .4s; transition: color .4s;
}

#project_header h1 a:hover{
	color: #000000;
}

#project_header h2 a{
	-webkit-transition: color .4s; -moz-transition: color .4s; -o-transition: color .4s; transition: color .4s;
}

#project_header h2 a:hover{
	color: #999999;
}

/* project information */

#project_info{
	position: absolute; top: 120px; left: 45px; z-index: 5000;
	width: 50%;	
}

.js #project_info{
	filter: alpha(opacity = 0); opacity: 0;	
	-webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;
}

.js #project_info.active{
	filter: alpha(opacity = 100); opacity: 1;	
}

#project_info.active{
	-webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s;
}

#project_info.no_text{
	position: absolute; top: 45px; left: 45px; z-index: 5000;
}

#project_info h2{
	display: block;
	margin: 0 0 12px 0;
}

#project_info_container{
	position: relative;
	padding: 18px;
	cursor: pointer;
}

#project_info_container.active{
	-webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s;
}

#project_info_text{
	overflow: hidden;
	-webkit-transition: opacity .4s; -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;
}

#project_info.contracted #project_info_text{
	filter: alpha(opacity = 0); opacity: 0;
}

#project_info_contract_btn{
	display: block;
	position: absolute; top: 18px; right: 18px;
	width: 8px; height: 15px;
	border: none; padding: 0; margin: 0;
	background: transparent url(../_img/project-info-contract-expand-btn.png) 0px 0px no-repeat;
	line-height: 0;
}

#project_info.contracted #project_info_contract_btn{
	background-position: -8px 0px;
}

/* slides navigation buttons */

#slides_nav{
	position: absolute; top: 0px; left: 0px; /* bottom: 0px; */ right: 0px; z-index: 5000;
}

#next_image_btn{
	position: absolute; right: 25px;
	vertical-align: middle;
	cursor: pointer;
}

#previous_image_btn{ 
	position: absolute; left: 25px;
	vertical-align: middle;
	cursor: pointer;
}

/* slides */

#slides{
	overflow: hidden;
	position: relative;
	
	opacity: 0;
	
	-webkit-transition: -webkit-transform 0.4s, opacity 1s; -moz-transition: -moz-transform 0.4s, opacity 1s; -o-transition: -o-transform 0.4s, opacity 1s; transition: transform 0.4s, opacity 1s;	
	-webkit-transform: translate3D(0,0,0); -moz-transform: translate3D(0,0,0); -o-transform: translate3D(0,0,0); transform: translate3D(0,0,0);
}

#slides li{
	overflow: hidden;
	float: left;
	
	-webkit-transform: translate3D(0,0,0); -moz-transform: translate3D(0,0,0); -o-transform: translate3D(0,0,0); transform: translate3D(0,0,0);
}

#slides img{
	position: relative;
	vertical-align: middle;
}

#slides iframe, #slides object, #slides video, #slides embed{
	position: relative;
	vertical-align: middle;
}

.slide_video_link{
	display: block;
	-webkit-box-sizing: content-box; -o-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
	/* position: absolute; */ bottom: 0px; top: 0px; left: 0px; right: 0px;
	width: auto;
	padding: 0;
	/* text-align: center; */
}

#slides .slide_video_link img{
	max-width: none;
}

.safari4 .slide_video_link{
	display: none;
}

/* ************************************** LIGHTBOX ELEMENTS ************************************** */

#lightbox{
	position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 100000;
	background: #000000; background: rgba(0,0,0,0.9);
	padding: 45px;	
	
	filter: alpha(opacity = 0); opacity: 0;
	-webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;
}

#lightbox.active{
	filter: alpha(opacity = 100); opacity: 1;
}

#lightbox iframe, #lightbox object, #lightbox video, #lightbox embed{
	width: 100%; height: auto;
}

#lightbox .slide_video_embed{
	display: block;
}

/*
#slides img.wide{
	width: 100%;
	height: auto;
}

#slides img.tall{
	height: 100%;
	width: auto;
}

#slides img.wide.limit_scale{
	width: auto;
	max-width: 100%;
	height: auto;
}

#slides img.tall.limit_scale{
	height: auto;
	max-height: 100%;
	width: auto;
}
*/


/* ************************************** FOOTER ELEMENTS ************************************** */

.site_footer{
	overflow: hidden;
	background-color:  #f2f2f2;
	/* background-color: rgba(242,242,242,0.95); */
	padding: 25px 45px;
}

#main .site_footer{
	margin-top: 0px;
}

.site_footer p{
	float: left;
}

.site_footer .footer_text_right{
	float: right;
}

.site_footer a{
	-webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s;
}

.site_footer a:hover{
	filter: alpha(opacity = 40); opacity: 0.40;
}

/* ************************************** ADAPTIVE LAYOUT ******************************************* */

/* the flexible column widths are 300px minimum, so the natural break points are multiples of 300px */

/* 900px and up / 3 columns */
@media (min-width : 900px) and (max-width : 1199px) {
	
	.half_col{
		float: left;
		width: 60%;
		margin-bottom: 90px;
	}
	
	#portfolio_list.grid li{
		width: 33.333333%;
	}
	
	#portfolio_list.list li{
		width: 66.666666%;
	}
	
	#main .portfolio.list li{
		width: 66.6666%;
	}
	
	#project_info{
		width: 40%;
	}
	/*
	#project_info.contracted{
		width: 5%;
	}
	*/
}

/* 1200px and up / 4 columns */
@media (min-width : 1200px) {

	#main{
		padding-top: 135px;
	}
	
	/* landing page intro */
	
	.intro{
		top: -58px;
		
	}
	
	.intro h1, .intro h3{
		/* max-width: 1250px; */
		font-size: 7.2em;
	}
	
	.intro p{
		/* max-width: 1250px; */
		margin-top: 45px;
		font-size: 3.6em;
	}
	
	/*landing page articles list */
	
	.articles_list{
		top: -25px;
	}
	
	.articles_list h3{
		font-size: 3.6em;
	}
	
	.articles_list .article_meta{
		font-size: 1.2em;
	}
	
	.articles_list p{
		font-size: 1.6em;
	}
	
	/* category list (sub class of article list) */
	
	.category_list.articles_list li{
		padding-right: 10px;
	}
	
	/* highlighted projects */
	
	.highlighted_project_meta h3{
		font-size: 3.6em;
	}
	
	.highlighted_project_meta p{
		font-size: 1.8em;
	}
	
	/* latest tweets */
	
	#latest_tweets{
		top: -25px;
	}
	
	#latest_tweets li{
		margin-bottom: 45px; padding-left: 60px;
		background: transparent url(../_img/tweet_bg_large.png) 0px 7px no-repeat;
	}
	
	#latest_tweets h3{
		font-size: 1.5em;
	}
	
	#latest_tweets p{
		margin-bottom: 20px;
		font-size: 3.6em;
	}
	
	/* mailchimp newsletter sign up */
	
	#mailing_list_signup{
		top: -25px;
	}
	
	#mailing_list_signup h3{
		margin-bottom: 20px;
		font-size: 3.6em;
	}
	
	#mailing_list_signup p{
		font-size: 1.6em;
	}
	
	/* article */
	
	#main_article{
		top: -47px;
	}
	
	#main_article header h1{
		font-size: 6em;
	}
	
	#article_body h2, #article_body h1{
		font-size: 6em;
	}
	
	#article_body h3{
		font-size: 4.5em;
	}
	
	#article_body h4{
		font-size: 3em;
	}
	
	#article_body h5{
		font-size: 2.2em; 
	}
	
	#article_body h6{
		font-size: 2.2em;
	}
	
	#main_article.gallery header h1, #main_article.gallery #article_body h1, #main_article.gallery #article_body h2{
		font-size: 4.6em;
	}
	
	#article_body p, #article_body ul, #article_body ol{
		font-size: 2.2em;
	}
	
	#article_body pre{
		font-size: 2.6em;
	}
	
	#article_body li{
		margin-left: 32px;
	}
	
	/*
	#article_body blockquote{
		background: transparent url(../_img/tweet_bg_large.png) left top no-repeat;
	}
	*/
	
	#article_body blockquote p{
		font-size: 2.6em;
	}
	
	#article_meta, #article_categories, #article_tags{
		font-size: 1.4em;
	}
	
	#article_social_share{
		font-size: 2.4em;
	}
	
	/* related articles */
	
	#main_article .articles_list{
		margin-top: 150px;
	}
	
	#main_article .articles_list h2{
		font-size: 2.4em; 
	}
	
	#project_info{
		width: 30%;
	}
	
	/* blog index */
	
	#intro_pagination_arrows a{
		top: 5px;
	}
	
	#intro_pagination_arrows img{
		width: auto; height: auto;
	}

}

/* 1200px and up / 4 columns */
@media (min-width : 1200px) and (max-width : 1499px) {
	
	.half_col{
		float: left;
		width: 67.5%;
		margin-bottom: 90px;
	}
	
	#portfolio_list.grid li{
		width: 25%;
	}
	
	#main .portfolio.grid li{
		width:25%;
	}
	
	#main .portfolio.list li{
		width: 50%;
	}
	
	#portfolio_list.list li{
		width: 50%;
	}
	
	.banner_column{
		width: 23%;
		padding-right: 2%;
	}
	
	.banner_half_column{
		width: 10.5%;
		padding-right: 2%;
	}
	
	.banner_one_and_half_column{
		width: 35.5%;
		padding-right: 2%;
	}

	#banner_logo{
		max-width: 23%;
	}
	
	.no_grid_swapper #banner_logo{
		max-width: 31%;
	}

	#banner_contact_list{
		width: 23%;
	}
	
	/*
	#project_info.contracted{
		width: 4%;
	}
	*/
}


/* 1500px and up / 5 columns */
@media (min-width : 1500px) {

	.half_col{
		float: left;
		width: 54%;
		margin-bottom: 90px;
	}
	
	#main .portfolio.grid li{
		width:20%;
	}
	
	#main .portfolio.list li{
		width: 40%;
	}
	
}

/* 1500px and up / 5 columns */
@media (min-width : 1500px) and (max-width : 1799px) {
	
	#portfolio_list.grid li{
		width: 20%;
	}
	
	/*
	#portfolio_list.list{
		margin-left: 20%;
	}
	*/
	#portfolio_list.list li{
		width: 40%;
	}
	
	.banner_column{
		width: 18%;
		padding-right: 2%;
	}
	
	.banner_half_column{
		width: 8%;
		padding-right: 2%;
	}
	
	.banner_one_and_half_column{
		width: 28%;
		padding-right: 2%;
	}

	#banner_logo{
		max-width: 17.5%;
	}
	
	.no_grid_swapper #banner_logo{
		max-width: 25%;
	}

	#banner_contact_list{
		width: 18%;
	}
	
	/*
	#project_info.contracted{
		width: 3%;
	}
	*/
}

/* 1680 and up / to aid perfect sizing of the banner logo */
@media (min-width : 1680px){

	#banner_logo_container .blank_h2{
		width: 80px;
		margin-right: 29px;
	}
}

/* 1800px and up / 6 columns */
@media (min-width : 1800px) and (max-width : 2199px) {

	#portfolio_list.grid li{
		width: 16.666666%;
	}
	
	#portfolio_list.list li{
		width: 33.333333%;
	}
	
	.banner_column{
		width: 15%;
		padding-right: 1.666666%;
	}
	
	.banner_half_column{
		width: 6.666666%;
		padding-right: 1.666666%;
	}
	
	.banner_one_and_half_column{
		width: 23.333332%;
		padding-right: 1.666666%;
	}

	#banner_logo{
		max-width: 15%;
	}
	
	.no_grid_swapper #banner_logo{
		max-width: 21%;
	}

	#banner_contact_list{
		width: 15%;
	}
	
	/*
	#project_info.contracted{
		width: 2.5%;
	}
	*/
}

/* 2100px and up / 7 columns */
@media (min-width : 2100px) and (max-width : 2399px) {

	#portfolio_list.grid li{
		width: 14.285714%;
	}
	/*
	#portfolio_list.list{
		padding-left: 14.285714%;
	}
	*/
	#portfolio_list.list li{
		width: 28.571428%;
	}
	
	.banner_column{
		width: 13%;
		padding-right: 1.285714%;
	}
	
	.banner_half_column{
		width: 5.857143%;
		padding-right: 1.285714%;
	}
	
	.banner_one_and_half_column{
		width: 20.142857%;
		padding-right: 1.285714%;
	}

	#banner_logo{
		max-width: 13%;
	}
	
	.no_grid_swapper #banner_logo{
		max-width: 18%;
	}

	#banner_contact_list{
		width: 13%;
	}
	
	/*
	#project_info.contracted{
		width: 2%;
	}
	*/
}

/* 2400px and up / 8 columns */
@media (min-width : 2400px) and (max-width : 2699px) {

	#portfolio_list.grid li{
		width: 12.5%;
	}
	
	#portfolio_list.list li{
		width: 25%;
	}
	
	.banner_column{
		width: 11%;
		padding-right: 1.5%;
	}
	
	.banner_half_column{
		width: 4.75%;
		padding-right: 1.5%;
	}
	
	.banner_one_and_half_column{
		width: 17.25%;
		padding-right: 1.5%;
	}

	#banner_logo{
		max-width: 11.5%;
	}
	
	.no_grid_swapper #banner_logo{
		max-width: 15.8%;
	}

	#banner_contact_list{
		width: 11%;
	}
	
	/*
	#project_info.contracted{
		width: 1.9%;
	}
	*/
}

/* 2700px and up / 9 columns */
@media (min-width : 2700px) and (max-width : 2999px) {

	#portfolio_list.grid li{
		width: 11.111111%;
	}
	/*
	#portfolio_list.list{
		padding-left: 11.111111%;
	}
	*/
	#portfolio_list.list li{
		width: 22.222222%;
	}
	
	.banner_column{
		width: 10%;
		padding-right: 1.111111%;
	}
	
	.banner_half_column{
		width: 4.444444%;
		padding-right: 1.111111%;
	}
	
	.banner_one_and_half_column{
		width: 15.555555%;
		padding-right: 1.111111%;
	}

	#banner_logo{
		max-width: 10%;
	}
	
	.no_grid_swapper #banner_logo{
		max-width: 14%;
	}

	#banner_contact_list{
		width: 10%;
	}
	
	/*
	#project_info.contracted{
		width: 1.7%;
	}
	*/
}

/* 3000px and up / 10 columns */
@media (min-width : 3000px) {

	#portfolio_list.grid li{
		width: 10%;
	}
	
	#portfolio_list.list li{
		width: 20%;
	}
	
	.banner_column{
		width: 9%;
		padding-right: 1%;
	}
	
	.banner_half_column{
		width: 4%;
		padding-right: 1%;
	}
	
	.banner_one_and_half_column{
		width: 14%;
		padding-right: 1%;
	}

	#banner_logo{
		max-width: 9%;
	}
	
	.no_grid_swapper #banner_logo{
		max-width: 12.5%;
	}

	#banner_contact_list{
		width: 9%;
	}
	
	/*
	#project_info.contracted{
		width: 1.5%;
	}
	*/
}