/* 
	CBP
	LAYOUT STYLESHEET
	PLASTIC STUDIO
	March 2015
*/

/**
 * green: #5d9732
 * grey: #666666
 **/

html {
	height: 100%;
}

body {
	min-height: 100%;
	position: relative;
	background: #f0f0f0;
}

.clearfix {
	content: "";
	display: table;
	clear: both;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

a {
	-webkit-transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
    -moz-transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
    -o-transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
    transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.HomePage .hero-image .slide{
	background-position: center center!important;
	background-repeat: no-repeat!important;
	-webkit-background-size: cover!important;
	-moz-background-size: cover!important;
	-o-background-size: cover!important;
	background-size: cover!important;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	/*z-index: -1;*/
}

.hide {
	/*display: none;*/
}

.left {
	float: left;
}

.right {
	float: right;
}

 .clear {
	height: 1px;
	clear: both;
}


.col {
	float: left;
}

.col.right {
	float: right;
}

.one-third { width: 27.3%; }

.two-thirds { width: 72.5%; }
.two-thirds.left { border-right: 1px solid #d0d0d0; }

.half { width: 45%; }

.one-fifth {
	width: 20%;
	border-left: 1px solid #d0d0d0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.four-fifths {
	width: 80%;
}

.full-width{
	width: 100%;
}

.col-2{
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;	
}

button {
	text-transform: uppercase;
	font-size: 1em;
	padding: 0.6em;
	background: #fff;
	border: none;
	color: #5d9732;
	bottom: 12px;
	position: absolute;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

button:hover {
	color: #fff;
	background: #666;
}




/* header */

.page-header {
	border-top: 5px solid #f0f0f0;
	background: #fff;
}

.page-header .inner {
	position: relative;
	width: 100%;
	padding: 0;
}

.branding {
	width: 300px;
	height: 41px;
	display: block;
	background: url('../images/cbp-logo.png') 0 0 no-repeat;
	text-indent: -30em;
	overflow: hidden;
	float: left;
	margin: 15px 0 0 28px;
}

.logo-wrapper{

}

/* main nav */

.main-nav {
	float: right;
	margin-top: -5px;
}

.main-nav ul li {
	float: left;
	position: relative;
}

.main-nav ul li a {
	padding: 29px 30px 27px 30px;
	display: inline-block;
	font-size: 1.5em;
	color: #5d9732;
	text-transform: uppercase;
	text-decoration: none;
	border-top: 5px solid #f0f0f0;
}

.main-nav ul li a:before {
	content: '';
	display: block;
	border-left: 1px solid #f0f0f0;
	width: 1px;
	height: 76px;
	position: absolute;
	top: 0;
	left: 0;
}

.main-nav ul li.current a,
.main-nav ul li.section a,
.main-nav ul li.current a:hover,
.main-nav ul li.section a:hover {
	background: #5d9732;
	color: #FFF;
	border-top: 5px solid #88b065;
}

.main-nav ul li a:hover {
	background: #f0f0f0;
	color: #666;
	border-top: 5px solid #e1e1e1;
}

.mobile-nav-button {
	display: none;
}


/* page layout */

.inner {
	width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}



/* home */

.filters a {
	font-size: 1.3em;
	color: #666;
	padding: 0 10px;
}

.filters a.first {
	padding: 0 10px 0 0;
}

.filters a:hover,
.filters a.active {
	color: #5D9732;
}

.home-intro {
	/* position: absolute;
	top: 5em;
	left: 3em;
	z-index: 98;
	background: #fff;
	padding: 1.8em 2em;
	width: 400px; */
}

.home-intro h3 {
	border-bottom: 1px solid #d0d0d0;
	padding-bottom: 7px;
	font-size: 2em;
	margin-bottom: 1.5em;
 } 

.home-intro p:last-child {
	margin-bottom: 0;
}

/* Change project title on home page only so not all at top of slides */
.HomePage #project-gallery .slide .project-title { z-index: 1; }

a.contact {
	text-transform: uppercase;
	font-size: 1.1em;
	padding: 1em 1.3em 0.9em;
	margin-left: 7px;
	background: #f0f0f0;
	border: none;
	color: #666;
	display: inline-block;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

a.contact:hover {
	color: #fff;
	background: #666;
}



/* projects gallery */

.filters {
	padding: 12px 30px 9px 30px;
}

.filters li {
	float: left;
	margin-right: 25px;
	margin-bottom: 0;
}

.filters li a {
	font-size: 1.1em;
	color: #666;
}

.filters li a:hover,
.filters li a.current {
	color: #5d9732;
}
/* Hide mobile 'filter' button */
.filter-section p {
	display: none;
}

#project-gallery-container {
	/*background: #eaeaea;*/
	overflow: hidden;
}

#project-gallery .project {
	padding: 0 1px 1px 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	background: #f0f0f0;
	float: left;
	width: 20%;
}
/* 
#project-gallery .project.small,
#project-gallery .project.thin {
	width: 12.5%;
}

#project-gallery .project.large {
	width: 25%;
}
 */

/* When projects are filtered, show larger grid */
#project-gallery.large-grid .project {
	width: 25% !important;
}

#project-gallery .project a {
	display: block;
	position: relative;
}

#project-gallery .project img {
	width: 100%;
	height: auto;
}

/*#project-gallery .project.small img,
#project-gallery .project.thin img {
	max-width: 227px;
}

#project-gallery .project.large img {
	max-width: 454px;
}*/

.project-details {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/squares-small-light.png') no-repeat right 20px bottom 25px rgba(93,151,50,0.9);
	width: 100%;
	height: 100%;
	padding: 5%;
	color: #fff;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

#project-gallery .project a:hover .project-details {
	opacity: 1;
}

.project-details h4 {
	font-size: 2em;
	line-height: 1em;
}

.project-details span {
	width: 20px;
	height: 1px;
	display: block;
	background: #fff;
	margin-bottom: 10px;
}

.project-details p {
	font-size: 1.2em;
	margin-bottom: 0;
}

.project-details p:before {
	font-family: FontAwesome;
	vertical-align: top;
}

.project-details p.client:before {
  	content: "";
  	font-size: 12px;
  	padding-left: 1px;
  	padding-right: 10px;
}

.project-details p.location:before {
	content: "";
  	font-size: 14px;
  	padding-left: 2px;
  	padding-right: 11px;
} 

.project-details p.architect:before {
  content: "";
  font-size: 11px;
  padding-right: 8px;
}



.project.small .project-details h4 {
	font-size: 1.7em;
	line-height: 1.1em;
}

.project.small .project-details button {
	padding: 2%;
	bottom: 6px;
	font-size: 0.9em;
}





/* projects */

#project-links .back a span {
	font-family: FontAwesome;
	font-size: 14px;
  	margin-right: 5px;
}

.hero-image {
	height: 60%;
	position: relative;
	overflow: hidden;
}

.hero-image img {
	width: auto;
	margin: 0 auto;
}

.img-wrapper img,
.slide img {
	width: 100%;
	display: block;
}

.content.scroll-to {
	/*padding: 0 0 4.4em;*/
	background: #f0f0f0;
}

.content-cols {
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	-webkit-column-gap: 6em;
    -moz-column-gap: 6em;
    column-gap: 6em;
}

.liner {
	padding: 4.5em 0 9em 0;
}

.liner.left-col {
	padding-right: 3em;
}

.liner.right-col {
	padding-left: 2em;
	padding-right: 2em;
}

.main ul {
	margin-left: 0;
}

.slide {
	opacity: 0;
	-webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
    width: 100%;
    position: absolute;
	top: 0;
	left: 0;
}

/*.slide.behind {
	z-index: -1;
}*/

.slide.current {
	z-index: 15;
	opacity: 1;
}

.slide-nav {
	position: absolute;
	bottom: 0;
	right: 3em;
	z-index: 16;
}

.slide-nav a {
	background: #FFF;
	overflow: hidden;
	display: block;
	float: left;
	margin-left: 1px;
	font-family: FontAwesome;
	color: #5d9732;
	padding: 0.47em 0.43em;
	font-size: 5.5em;
}

.slide-nav a:hover,
.project-title a:hover {
	background: #f0f0f0;
	color: #666;
}

.project-title {
	position: absolute;
	bottom: 5em;
	left: 3em;
	z-index: 99;
	max-width: 90%;
}

.project-title h1 {
	color: #5d9732;
	background: #fff;
	padding: 8px 30px 8px 10px;
	float: left;
	font-size: 20px;
}

.project-title span {
	position: absolute;
	right: 10px;
	display: block;
	font-size: 25px;
	/*height: 100%;*/
	top: 48%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.project-title span.down {
	display: block;
	font-size: 25px;
	right: 5px;
}

.project-title a {
	float: left;
	display: block;
	font-family: FontAwesome;
	font-size: 20px;
	color: #5d9732;
	background: #fff;
	margin-left: 1px;
}

.project-info {
	margin-bottom: 40px;
}

.project .one-third,
.one-fifth {
	background: -moz-linear-gradient(left,  rgba(234,234,234,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}



/* practice page */

.hero-image {
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

.intro {
	position: absolute;
	bottom: 15px;
	left: 50%;
	margin-left: -342.5px;
	z-index: 99;
	text-align: center;
}

.intro h1 {
	color: #5d9732;
	background: #fff;
	padding: 0.8em 1em 0.8em 1em;
	font-size: 3.2em;
	font-weight: 300;
	line-height: 1.3em;
	margin-bottom: 0;
	letter-spacing: -0.01em;
	width: 685px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.intro a {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 5.5em;
	color: #5d9732;
	background: #fff;
	margin: 1px auto 0 auto;
	padding: 0.45em 0.27em;
}

.intro a:hover {
	background: #f0f0f0;
	color: #666;
}

.practice-links {
	border-bottom: 1px solid #d0d0d0;
	margin-bottom: 2.5em;
}

.practice-links ul li {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 2.3em;
}

.practice-links ul li a {
	color: #fff !important;
	padding: 0.8em 1.3em 0.6em 1em;
	font-size: 0.8em;
}	

.PracticePage .content-cols{
	padding-bottom: 50px;
}

.key-practice-wrapper ul{
	margin-left: 20px;
}

.key-practice-wrapper ul li{
	list-style: disc;
}

.key-practice-wrapper .col-2:last-child{
	padding-left: 30px;
}


/* people page */

.director-details .col.right.half p{
	padding: 0!important;
	margin: 0!important;
}


#staff-gallery .person {
	padding-right: 1px;
	margin-bottom: 1px;
	background: #f0f0f0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	width: 33.33%;
	float: left;
}

#staff-gallery .person a {
	display: block;
}

#staff-gallery .person img {
	width: 100%;
	height: auto;
}

.staff-details {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/squares-small-light.png') no-repeat right 20px bottom 25px rgba(93,151,50,0.9);
	width: 100%;
	height: 100%;
	padding: 20px;
	color: #fff;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

#staff-gallery .person a:hover .staff-details {
	opacity: 1;
}

.staff-details span {
	width: 20px;
	height: 1px;
	display: block;
	background: #fff;
	margin-bottom: 17px;
}

.staff-details p {
	font-size: 1.4em;
	margin-bottom: 0.4em;
}

/* Green link button */

.box-button {
	width: 100%;
	height: 100%;	
}

.box-button h4 {
	font-size: 2.5em;
	color: #fff;
	line-height: 1em;
	padding: 20px;
	margin: 0;
	position: absolute;
	bottom: 0;
}


/* director page */

#director-links .back a span {
	font-family: FontAwesome;
	font-size: 14px;
  	margin-right: 5px;
}

.director-content {
	width: 100%;
	background: #eaeaea;
}

.director-photo {
	float: left;
	width: 40%;
	overflow: hidden;
}

.director-details {
	float: left;
	width: 60%;
	padding: 2.5em 3em 0 3em;
	margin-bottom: 7em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.director-details h1 {
	color: #5d9732;
	margin-bottom: 0.5em;
}

.director-details h1 + p {
	color: #5d9732;
	margin-bottom: 2em;
}

.director-details .phone,
.director-details .mobile {
	/* display: inline-block; */
	color: #5d9732;
	margin-right: 2.5em;
}

.director-details .email {
	/* display: inline-block; */
}

.director-details .phone span,
.director-details .email span,
.director-details .mobile span {
	font-family: FontAwesome;
    color: #5d9732;
    margin-right: 8px;
}

.director-details .mobile span {
	font-size: 1.5em;
	margin-right: 12px;
}


/* contact page */

.ContactPage .hero-image {
	background-position: top right;
}

.contact-details p {
	font-size: 1.4em;
}

.contact-details p:last-child {
	margin-bottom: 0;
}

.UserDefinedForm .one-third {
	background: -moz-linear-gradient(left,  rgba(234,234,234,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(234,234,234,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.contact-details p span:first-child {
	font-family: FontAwesome;
    color: #5d9732;
    vertical-align: top;
}

.contact-details p.email span:first-child {
	margin-right: 9px;
}

.contact-details p.phone span:first-child {
	margin-right: 10px;
	font-size: 1.1em;
}

.contact-details p.fax span:first-child {
	margin-right: 8px;
}

.contact-details p.address {
	margin-bottom: 0.5em;
}

.contact-details p.address span:first-child {
	margin-left: 3px;
	margin-right: 11px;
	font-size: 1.1em;
}

.contact-details p.map-link {
	margin: 0 0 1.5em 22px;
}

.contact-details p.postal-address span:first-child {
	margin-right: 9px;
}

.contact-details p span:last-child {
	display: inline-block;
}



/* footer */

.page-footer {
	/*position: absolute;
	bottom: 0;
	left: 0;*/
	width: 100%;
	border-bottom: 5px solid #5d9732;
	background: #FFF;
	padding: 1em 3em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.page-footer p,
.page-footer li {
	font-size: 1.4em;
	margin-bottom: 0;
}

.page-footer p {
	margin-top: 4px;
}

.page-footer .contact {
	padding-right: 45px;
	height: 19px;
	color: #5d9732;
}

.page-footer .contact li {
	padding-left: 20px;
	margin-top: 3px;
}

.page-footer .contact li span {
	font-family: FontAwesome;
    color: #5d9732;
    margin-right: 8px;
}

.page-footer .contact .email {
	padding-right: 30px;
}

.page-footer .contact .phone {
	background-position: left -46px;
}

.page-footer .contact a {
	text-decoration: none;
	color: #5d9732;
}

.page-footer .contact a:hover {
	color: #666;
}

.page-footer .contact{ padding-left: 0; }

/** iPad - Landscape **/
@media all and  (max-width: 1024px) {
	
 	/* body {border: 1px solid red;}  */
	
	/** pages with 4/5th and 1/5th sidebar **/
	.col.four-fifths {width: 70%;}
	.col.one-fifth {	width: 30%;}
	
	/** Projects (Home and Projects Pg) **/
	#project-gallery .project.small,
	#project-gallery .project.thin {
		width: 16.665%;}

	#project-gallery .project.large {
		width: 33.33%;}

	/** Intro text size **/
	.intro h1 {
		font-size: 2.5em;
	}
	
	/* Change staff text to 1 col as getting too narrow */
	.director-details .col.half { width: 100%; }
	.director-details .col.right { margin-top: 30px; }
	
}


/** Header branding and nav clashing **/
@media all and  (max-width: 900px) {
	
	.branding {
		height: 58px;
		background-position: 28px 15px;
		margin: 0;
		padding: 15px 0 0 28px;
	}
	.logo-wrapper{
		width: 100%;
		border-bottom: 5px solid #f0f0f0;

	}
	.logo-wrapper:before,
	.logo-wrapper:after {
		content: " ";
		display: table;
	}

	.logo-wrapper:after {
		clear: both;
	}


	.main-nav {
		float: left;
		clear: left;
		
	}
	
}

/** iPad - Portrait **/
@media all and  (max-width: 770px) {
	
	/*  body {border: 1px solid blue;} */
	
	h1 { font-size: 2.5em; }
	h2 { font-size: 2em; }
	
	.inner {
		width: 100%;
		padding: 0 15px;}

	.two-thirds.left {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #d0d0d0;}

	.one-third {
		width: 100%;
		background: rgba(234,234,234,1) !important;
		margin-bottom: 5.5em;}

	.liner.left-col {
		padding: 4.5em 0 3em 0;}

	.liner.right-col {
		padding: 4.5em 3em 4.5em 3em;
		border-bottom: 1px solid #d0d0d0;}

	.intro {
		left: 0;
		margin-left: 0;
		padding: 0 15px;}

	.intro h1 {
		width: 100%;}

	.content.scroll-to {
		padding-bottom: 0;}
	
	.content-cols {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;}
	
	/** pages with 4/5th and 1/5th sidebar **/
 	.col.four-fifths { width: 60%; }
	.col.one-fifth {	 width: 40%; }
	
	/** Projects (home & projects pg) & People **/
	#project-gallery .project.large,
	#staff-gallery .person {
		width: 50%; }

	#project-gallery .project.small,
	#project-gallery .project.thin {
		width: 25%; }
		
	.project.large .project-details h4 {
		font-size: 2em;
		line-height: 1.2em; }
	
	.project-details span { margin-bottom: 10px; }
	
	.project-details p {
		font-size: 1.3em;
		margin-bottom: 0; }
		
	.project.small .project-details h4 { font-size: 1.2em; }
	
	.project-details { background-position: right 5px bottom 5px; }
	
	/*.project-title a { font-size: 3.35em; }*/
	
	/** Practice page - intro text layout **/
	.PracticePage .intro {
		bottom: 5px;
	}
		
	.page-footer {
		position: relative;
	}


	.key-practice-wrapper .col-2{
		padding: 0 0 50px;
	}

	footer .legal{
		float: none;
	}

	footer .contact{
		float: none;
		display: block;
		padding: 0;
	}

	footer .contact li{
		padding-top: 10px;
	}

	footer .contact li:first-child{
		padding-left: 0;
	}

}

/** iPhone - Landscape **/
@media all and  (max-width: 680px) {
	
	/* body {border: 1px solid green;}   */
	
	
	.main-nav ul li a { /* Make narrower */
		padding: 29px 20px 27px;
	}
	
	/* Right col padding */
	.liner.right-col {
		padding: 2em;
	}
	
	/** pages with 4/5th and 1/5th sidebar **/
 	.col.four-fifths { width: 55%; }
	.col.one-fifth {	width: 45%; }
	
	/** Filter menu **/
	.filter-section {
		height: 40px;
		width: 100%;
		
		border-top: 2px solid #f0f0f0;
		border-bottom: 1px solid #F0F0F0;
	}
	
	.filter-section p {
		display: block;
		font-size: 1.5em;
		line-height: 40px;
		background: #fff;
		height: 40px;
		padding-left: 5%;
		margin: 0;
		cursor: pointer;
	}
	.filter-section span.down {
		float: right;
		font-family: FontAwesome;
		font-size: 2.5em;
		color: #5D9732;
		height: 40px;
		background: #FFF none repeat scroll 0% 0%;
		margin: 1px auto 0px;
		padding: 0 0.17em;
	}
	 
	.filter-section ul.filters {
		position: absolute;
		height: 50px;
		width: 100%;
		padding: 0;
		z-index: 2;
		display: none;
	}
	.filter-section .filters li {
		float: none;
		margin: 0;
		width: 100%;
	}
	
	.filter-section .filters li a {
		display: block;
		background: #fff;
		width: 90%;
		padding: 10px 5%;
	}
	
	.filter-section .filters li a.active {
		color: #fff;
		background: #5D9732;
	}
	
	/** Projects (home & projects pg) & People **/
	#project-gallery .project.large,
	#staff-gallery .person {
		width: 100%;}
		
	#project-gallery .project.small,
	#project-gallery .project.thin {
		width: 50%;}
		
	.project-title { bottom: 6em; left: 10px;}
	/** Project page img slider buttons **/
	.slide-nav a { font-size: 3.5em; }
		
		
	/** Staff page **/
	.director-photo {
		margin: 0 20px 10px 0;
		height: auto !important;
	}
	.director-details {
		width: 100%;
		float: none;
	}
	
	/** Intro text size **/
	.intro h1 {
		font-size: 1.7em;
	}
	.intro a {
		font-size: 4em;
	}
	
	/** Footer **/
	.page-footer .contact .email {
		padding-right: 0; }

}


@media all and (max-width: 600px) {
	.key-practice-wrapper .col-2{
		width: 100%;
	}

	.key-practice-wrapper .col-2:last-child{
		padding-left: 0px;
	}
}

@media all and (max-width: 500px) {
	
	/* body {border: 1px solid orange;} */
	
	/* Change logo out for just icon */
	.branding {
		background: url('../images/cbp-logo-icon-only.png') no-repeat;
		background-position: 28px 15px;
		width: 50px;
	}
	
	/* Change menu to list style hide/show with 3 bar icon */	
	.main-nav {
		display: none;
		width: 100%;
		margin: 0;
		background: #fff;
		border-bottom: 5px solid #f0f0f0;
		position: absolute;
		top: 73px;
		z-index: 100;
	}
	.main-nav.active{
		display: block;
	}
	
	.main-nav ul {
		width: 100%;
	}
	 
	.main-nav ul li {
		float: none;
	}
	
	.main-nav ul li a {
		display: block;
		width: 90%;
		padding: 15px 5%;
	}
	
	.mobile-nav-button {
		display: block;
		position: absolute;
		right: 15px;
		top: -5px;
		background: url('../images/mobile-nav-button.png') no-repeat center;
		width: 50px;
		height: 100%;
		z-index: 10;
		cursor: pointer;
	}
	
	.PracticePage .hero-image,
	.UserDefinedForm .hero-image {
		height: 250px;
	}
	
	.col { float: none; }	
	.col.one-fifth,
	.col.four-fifths {
		width: 100%; }
	
}

/** iPhone - Portrait **/
@media all and  (max-width: 400px) {
	
	/* body {border: 1px solid orange;} */
	
		
		
	/** Intro text position **/
	.intro {
		bottom: 10px;
	}
	.intro a {
		display: none;
	}
	
	.liner.left-col {
		padding: 2em 0;
	}
		
	/** Staff page **/
	.director-photo {
		width: 100%;
		margin: 0 0 20px;
	}
	
	/* Project pg */
	.project-title h1 { font-size: 18px; }
		
	.page-footer .contact {
		float: none;
		clear: left;
		height: auto;
	}
	
	.page-footer .contact li {
		float: none;
		display: block;
		padding-top: 8px;
		padding-left: 0;
	}
	
}