/*
Theme Name: BuddyPress Quad
Description: Quad theme for BuddyPress.
Version: 1.0
Author: Graeme Viljoen
Author URI: http://www.symbiotic-relationships.com/
Template: bp-default
Tags: buddypress, quad, three-column, responsive
Reference: http://codex.buddypress.org/legacy/building-a-buddypress-child-theme/
*/





/***************************************************************************/

/* Main element styles, defaults and standalones */

/***************************************************************************/

body {
	background-color: #EEE4CE;
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-family: "futura-pt",sans-serif;
	/* Gets rid of Apple's habit of bumping up text size */
	-webkit-text-size-adjust: none;
}

img {
	border: 0;
}

h1, h2, h3 {
  font-family: "adobe-caslon-pro",serif;
  font-style: italic;
}

.Clear {
	clear: both;
}

/* This gets rid of green border around a href items in Android */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}

ul.Centered {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}


/***************************************************************************/





/***************************************************************************/

/* Structural items */

/***************************************************************************/

/* Top 100% black bar */
.TopBlack {
	position: absolute; 
	height: 72px; 
	background-color: #000000; 
	width: 100%; 
	z-index: 1;
}

/* Main external container, controls max width and black border */
.Container {
	max-width: 990px;
	background-color: #EEE4CE;
	margin-left: auto;
	margin-right: auto;
}

/* ContentHolder. Keeps internal width and padding */
.Container .ContentHolder {
	padding: 0 60px 60px 60px;
	text-align: center;
}
/* Social plugin box on post pages */
#social {
	background-color: #FFFFFF;
	padding: 10px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.slideshow_container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-bottom: 50px;
}
.Container .ContentHolder .Columns .MainColumn .slideshow_container img {
	float: none;
}

.Bloglist .post.type-post .post-content, #sidebar2 .widget_recent_entries, #sidebar2 .widget_recent_comments, #sidebar2 .widget_categories, #sidebar2 .widget_archive {
	padding: 12px;
	background-color: #FAF5E9;
	margin-bottom: 20px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.author-box {
	display: block;
	min-height: 60px;
}

.author-box img {
	float: left;
}






/* Header elements <header> */

/* Black bar running across the very top of the site */
.Container header .TopBar {
	background-color: #000000;
	height: 72px;
	position: relative;
	z-index: 2;
}
/* Social Media icons containing div, top left */
.Container header .TopBar .SocialMediaIcons {
	text-align: left;
	padding-top: 10px;
	padding-bottom: 6px;
}
.Container header .TopBar .SocialMediaIcons img {
	margin-right: 10px;
}
/* Community login containing div, top left */
.Container header .TopBar .CommunityLogin {
	text-align: left;
	text-transform: uppercase;
	color: #EEE4CE;
	font-size: 11px;
	letter-spacing: 1px;
	float: left;
	display: none;
}
.Container header .TopBar .CommunityLogin img, .Container header .TopBar .Search img {
	vertical-align: middle;
}
/* Div containing search box, top right of site */
.Container header .TopBar .Search {
	text-align: right;
	text-transform: uppercase;
	color: #F1B825;
	font-size: 11px;
	letter-spacing: 1px;
	float: right;
	position: relative;
	width: 266px;
}
/* Div inside the Search div, to align the text 'Search' */
.Container header .TopBar .Search div {
	display: inline;
	margin-right: 10px;
	position: absolute;
	top: 5px;
	left: 0;
}
/* Div inside the Search div, to align the form */
.Container header .TopBar .Search form {
	display: inline;
}
/* Text box inside the Search div */
.Container header .TopBar .Search input[type="text"] {
	border: 1px solid #EEE4CE;
	background-color: #000000;
	height: 16px;
	width: 160px;
	position: absolute;
	top: 0px;
	right: 48px;
	color:#EEE4CE;
	padding: 3px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px;
}

/* ContentHolder. Keeps internal width and padding. Special case for inside <header> tag. */
/* Relative position because it contains absolutely positioned divs */
.Container header .ContentHolder {
	padding-bottom: 0;
	position: relative;
}

/* Left 'ear' and right 'ear' of the header (text areas left and right of the main logo, top of the page), wide (screen) version */
.Container header .LeftEar .Wide, .Container header .RightEar .Wide {
	max-width: 32%;
	text-align: left;
	font-size: 17px;
	font-weight: normal;
}
/* Left 'ear' and right 'ear' of the header (text areas left and right of the main logo, top of the page), narrow (screen) version */
.Container header .LeftEar .Narrow, .Container header .RightEar .Narrow {
	visibility: hidden;
	position: absolute;
}
/* Left 'ear' of the header (text areas left and right of the main logo, top of the page), wide (screen) version */
.Container header .LeftEar .Wide {
	position: absolute;
	left: 60px;
	top: 50px;
	background-image: url('/images/tab_leftear.png');
	background-position: top left;
	background-repeat: no-repeat;
}

.Container header .LogoArea {
	text-align: center;
}

.Container header .LogoArea .TopLogo {
	width: 175px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: -38px;
	text-align: center;
	z-index: 2;
}

.Container header .LogoArea .TopLogo img {
	display: block;
	margin-top: 6px;
}
/* Right 'ear' of the header (text areas left and right of the main logo, top of the page), wide (screen) version */
.Container header .RightEar .Wide {
	position: absolute;
	right: 60px;
	top: 50px;
	background-image: url('/images/tab_rightear.png');
	background-position: top right;
	background-repeat: no-repeat;
}

.Container header .LeftEar .Wide nav {
	padding-left: 50px;
}

.Container header .RightEar .Wide nav {
	padding-right: 50px;
}

.Container header .LeftEar nav, .Container header .RightEar nav, #slidernav nav ul {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
}

.Container header .LeftEar .Wide nav {
	text-align: right;
}


.Container header .LeftEar .Wide nav ul, .Container header .RightEar .Wide nav ul, #slidernav nav ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.Container header .LeftEar .Wide nav ul li, .Container header .RightEar .Wide nav ul li {
	display: inline;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

.Container header .LeftEar .Wide nav ul li {
	margin-left: 5px;
	padding-left: 5px;
}

.Container header .RightEar .Wide nav ul li {
	margin-right: 5px;
	padding-right: 5px;
}

.Container header .ContentHolder .WideText {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}




/* Home page, slider/slideshow area */
.Container .ContentHolder .SliderArea {
	text-align: center;
}
.Container .ContentHolder .SliderArea .InnerSliderArea {
	height: 293px;
	background-image: url('/images/slideshow_back_wide.png');
	background-repeat: no-repeat;
	background-position: top left;
	position: relative;
}
.Container .ContentHolder .SliderAreaWork .InnerSliderArea {
	height: 430px;
	background-image: url('/images/slideshow_back_wide_tall.png');
	background-repeat: no-repeat;
	background-position: top left;
	position: relative;
}

/* Target areas (enclosed within curly braces) */
.Container .ContentHolder .Target {
	white-space:nowrap;
	margin-top: 12px;
	text-align: center;
}
.Container .ContentHolder .Target div {
	display: inline-block;
	width: 15%;
	padding: 0 8px 20px 8px;
	text-align: center;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
}
.Container .ContentHolder .Target.About div {
	margin-left: 20px;
	margin-right: 20px;
}
.Container .ContentHolder .Target.About div img {
	float: none;
}
.Container .ContentHolder .Target span, .Container .ContentHolder .TargetTitle span {
	font-size: 48px;
	font-style: normal;
	padding: 0 20px 0 20px;
	position: relative;
	top: 7px;
}

.Container .ContentHolder .TargetTitle  {
	margin-top: 32px;
	margin-bottom: 26px;
}
.Container .ContentHolder .Target div img {
	margin-bottom: 10px;
}
.Container .ContentHolder .Columns .RightColumn .ServicesList .Target, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList .Target, .Container .ContentHolder .Columns .RightColumn .PeopleList .Target {
	width: auto;
	height: auto;
	float: none;
	padding: 6px 0 1px 0;
	position: relative;
	left: -20px;
}


.Container .ContentHolder .Columns .RightColumn .ServicesList .Target span, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList .Target span, .Container .ContentHolder .Columns .RightColumn .PeopleList .Target span {
	font-family: "adobe-caslon-pro",serif;;
}

/* Columns area, comprising MainColumn and RightCol */
.Container .ContentHolder .Columns .Divider {
	background-image: url('/images/squiggle.png');
	background-position: top left;
	background-repeat: repeat-x;
	height: 7px;
	margin-bottom: 16px;
}







.Container .ContentHolder .BottomSwatch {
	width: 175px;
	margin-left: auto;
	margin-right: auto;
}


/* Main Column, which can contain Col1 and Col2 */
.Container .ContentHolder .Columns .MainColumn {
	width: 66%;
	float: left;
	text-align: left;
}


.Container .ContentHolder .Columns .MainColumn .Item {
	padding-right: 28px;
	padding-bottom: 8px;
}

.Container .ContentHolder .Columns .MainColumn img {
	float: left;
	margin: 0 20px 10px 0;
}

/* Main Column Inner (inner pages, not home page) */
.Container .ContentHolder .Columns .MainColumn.Inner {
	width: 63%;
	padding-right: 28px;
}

/* Main Column Inner (inner pages, not home page) */
.Container .ContentHolder .Columns .MainColumn.Inner.Work {
	width: 100%;
	padding-right: 0px;
	border: 0px solid blue;
	text-align: center;
}
.Container .ContentHolder .Columns .MainColumn.Inner.Work img {
	float: none;
	margin: 0;
}

.Container .ContentHolder .Columns .MainColumn.Inner.Work .WorkColumn {
	text-align: center;
	width: 832px;
	border: 0px solid green;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
}

/* Main Column Inner (inner pages, not home page) */
.Container .ContentHolder .Columns .MainColumn.Inner.Work .WorkColumn .Item {
	width: 33%;
	margin-top: 0px;
	float: left;
	padding-right: 0px;
	text-align: center;
	border: 0px solid blue;
	min-height: 250px;
}
.Container .ContentHolder .Columns .MainColumn.Inner.Work .Item img {
	width: 100%;
	max-width: 220px;
}



/* Inner pages content area */
.MainColumn.Inner .Content {
	padding-left: 90px;
	padding-right: 40px;
}
/* Special for people page layout */
.MainColumn.Inner .Content.People {
	padding-left: 0;
}
.MainColumn.Inner .Content.People img {
	float: right;
	margin: 0 0 10px 40px;
}

.MainColumn.Inner .Content li {
	padding: 3px;
	margin: 3px;
	margin-left: -8px;
}


/* Col1 and Col2 enclosed by MainColumn */
.Container .ContentHolder .Columns .Column1, .Container .ContentHolder .Columns .Column2 {
	float: left;
	width: 41%;
}
.Container .ContentHolder .Columns .Column1 img, .Container .ContentHolder .Columns .Column2 img {
	float: left;
	margin: 0 12px 12px 0;
}
.Container .ContentHolder .Columns .Column1 {
	border-right: 1px dotted #000000;
	padding-right: 14px;
}
.Container .ContentHolder .Columns .Column2 {
	padding-left: 36px;
	padding-right: 40px;
}
.Column2 .DividerDotted {
	border: 0;
	height: 0;
	margin: 0;
}

/* Inside Col1 and Col2 enclosed by MainColumn */
/* MainColumn Inner contains two divs, Column1 Inner and Column2 Inner */

.Container .ContentHolder .Columns .MainColumn.Inner .Item img {
	float: none;
	max-width: 200px;
	height: auto;
	padding-bottom: 8px;
	margin: 0;
}



.MainColumn.Inner .Item {
	margin-top: 10px;
	width: 44%;
	float: left;
	padding-right: 30px;
	min-height: 180px;
	text-align: center;
}





.Container .ContentHolder .Columns .RightColumn {
	width: 32%;
	float: left;
	border-left: 1px dotted #000000;
	padding-left: 10px;
	line-height: 22px;
	text-align: left;
}

.Container .ContentHolder .Columns .RightColumn .Divider {
	height: 0;
}

.Container .ContentHolder .Columns .RightColumn .SocialMediaIcons {
	white-space:nowrap;
}

.Container .ContentHolder .Columns .RightColumn .SocialMediaIcons img {
	margin-right: 6px;
}
.Container .ContentHolder .Columns .RightColumn .BloggerSignUp {
	text-align: center;
}



.Container .ContentHolder .Columns .RightColumn .TweetBox {
	line-height: normal;
}

.Container .ContentHolder .Columns .RightColumn .TweetBox img {
	float: right;
	margin-top: 14px;
	margin-bottom: 20px;
	margin-left: 6px;
}

/* Styles for the lists in the right column */
.Container .ContentHolder .Columns .RightColumn .ServicesList nav ul, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList nav ul, .Container .ContentHolder .Columns .RightColumn .PeopleList nav ul {
	list-style: none;
}

.Container .ContentHolder .Columns .RightColumn .ServicesList nav ul li, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList nav ul li, .Container .ContentHolder .Columns .RightColumn .PeopleList nav ul li {
	padding: 0px;
	margin: 0px;
	padding-left: 50px;
	padding-top: 8px;
	background-repeat: no-repeat;
	background-position: top left;
	margin-bottom: 3px;
	margin-left: -40px;
	min-height: 35px;
}

.Container .ContentHolder .Columns .RightColumn .ServicesList nav ul li {
	background-image: url('/images/list_item_roundel.png');
}

.Container .ContentHolder .Columns .RightColumn .CaseStudiesList nav ul li {
	background-image: url('/images/list_item_roundel_case_studies.png');
}
.Container .ContentHolder .Columns .RightColumn .PeopleList nav ul li {
	background-image: url('/images/list_item_roundel_people.png');
}





/* Right hand column items */

/* Appears in right hand column */
.LongBlackArrow {
	background-image: url('/images/long_black_arrow.png');
	background-position: top left;
	background-repeat: no-repeat;
	width: 256px;
	height: 21px;
	text-align: center;
	font-size: 11px;
	color: #EEE4CE;
	margin-bottom: 22px;
}
/* Subscribe box, right hand column */
.NewsletterSignUp {
	background-image: url('/images/newsletter_sign_up_scrap.png');
	background-position: top left;
	background-repeat: no-repeat;
	width: 261px;
	height: 145px;
	margin: 14px 0 14px 0;
	text-align: center;
}

/* Dividers */

/* Solid line, double-lined divider */
.DividerSolid {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	height: 3px;
	margin: 8px 0 8px 0;
}
/* Dotted line, double-lined divider */
.DividerDotted {
	border-top: 1px dotted #000000;
	border-bottom: 1px dotted #000000;
	height: 3px;
	margin: 8px 0 8px 0;
}
/* Solid line, double-lined divider. Thick at top, thin at bottom. Appears at bottom of pages */
.DividerSolidThickThin {
	border-top: 2px solid #000000;
	border-bottom: 1px solid #000000;
	height: 5px;
	margin: 60px 0 0 0;
}
/* Squiggly line divider */
.DividerSquiggleThin {
	background-image: url('/images/squiggle_thin.png');
	background-position: top left;
	background-repeat: repeat-x;
	height: 6px;
	margin-bottom: 14px;
}

/* Pull down nav menu */

/* Styles for the pull down nav menu, which appears on smaller screen widths */
#slidernav {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
#slidernav nav ul {
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}
#slidernav nav ul li {
	margin-top: 7px;
}


/* Mouseover menu (About) */

#menu li {
  	position: relative;
  	display: inline-block;
}
#submenuitems {
  	position: absolute;
  	top: 18px;;
  	right: 0;
  	z-index: 200;
  	background-color: #B5AFA0;
  	padding-bottom: 12px;
  	padding-top: 4px;
}
#submenuitems li {
  	display: block;
  	border-bottom: 1px dotted #000000;
  	padding: 4px;
  	text-align: left;
}



/* Slider (stepcarousel) */

/* Hide main square carousel slider */    	
.Container .ContentHolder .SliderAreaSquare {
			display: none;
		}

/* This class (.SliderNavs) has been manually added to the /scripts/stepcarousel.js addnavbuttons function, line 58 */
		/* It is necessary in order to hide the nav buttons, otherwise they still show even when the slider is not visible */
		.SliderSq-SliderNavs  {
			display: none;
		}

.stepcarousel {
	position: relative; /* leave this value alone */
	border: 0px solid red;
	overflow: scroll; /* leave this value alone */
	width: 864px; /* width of Carousel Viewer itself */
	height: 293px; /* Height should enough to fit largest content's height */
}
.stepcarousel .belt {
	position: absolute; /* leave this value alone */
	left: 0;
	top: 0;
	text-align: left;
	vertical-align: middle;
}
.stepcarousel .panel {
	float: left; /* leave this value alone */
	overflow: hidden;  /* clip content that go outside dimensions of holding panel DIV */
	margin-left: 83px; /* margin around each panel */
	margin-top: 20px;
	margin-bottom: 30px;
	margin-right: 85px;
	width: 697px; /* width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 219px;
	border: 0px dashed black;
}
#Slider-paginate {
	width: 100%; 
	text-align: center;
	position: absolute;
	bottom: 28px;
	left: 0;
	z-index: 200;
}




.stepcarousel_work {
	position: relative; /* leave this value alone */
	border: 0px solid red;
	overflow: scroll; /* leave this value alone */
	width: 864px; /* width of Carousel Viewer itself */
	height: 430px; /* Height should enough to fit largest content's height */
}
.stepcarousel_work .belt {
	position: absolute; /* leave this value alone */
	left: 0;
	top: 0;
	text-align: left;
	vertical-align: middle;
}
.stepcarousel_work .panel {
	float: left; /* leave this value alone */
	overflow: hidden;  /* clip content that go outside dimensions of holding panel DIV */
	margin-left: 83px; /* margin around each panel */
	margin-top: 50px;
	margin-bottom: 50px;
	margin-right: 85px;
	width: 697px; /* width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 329px;
	border: 0px dashed black;
}

.SliderAreaWork .InnerSliderArea #SliderWork-paginate {
	position: absolute;
	bottom: 40px;
	border: 0px solid blue;
	width: 100%;
	text-align: center;
}

.panel h2 {
	position: absolute;
	top: -19px;
	left: 170px;
}




/* Footer */

footer {
	background-color: #000000;
	padding: 50px 10px 20px 10px;
}
footer nav.Sub {
	padding-top: 30px;
	padding-bottom: 70px;
}

/* Comments form on blog posts */
.comment-content.standard-form label, .comment-content.standard-form input {
	display: block;
	clear: left;
}

.MainColumn.Inner .post-content .entry img {
	margin-bottom: 30px;
}

.author-box .avatar {
	padding-bottom: 12px;
}

/***************************************************************************/




/***************************************************************************/

/* Heading styles, sizes */

/***************************************************************************/

h1 {
	font-size: 30px;
	line-height: 24px;
	margin-bottom: 4px;
}

h2 {
	line-height: 24px;
}



h3 {
	line-height: 17px;
}

.Container .ContentHolder .Columns .RightColumn .ServicesList .Target h2, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList .Target h2, .Container .ContentHolder .Columns .RightColumn .PeopleList .Target h2 {
	font-family: "futura-pt",sans-serif;
	text-transform: uppercase;
	font-style: normal;
	font-size: 17px;
	letter-spacing: 3px;
}



.MainColumn.Inner h1 {
	margin: 0;
	padding: 0;
	font-family: "futura-pt",sans-serif;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 24px;
	color: #FFFFFF;
}
.MainColumn.Inner h2 {
	font-size: 27px;
}
/* Style for the final destination Services page heading e.g. Services > Article */
.MainColumn.Inner .HeadingService h1 {
	color: #000000;
}
.MainColumn.Inner .Heading, .MainColumn.Inner .HeadingPeople {
	height: 59px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 40px;
	text-align: center;
}
.MainColumn.Inner .HeadingPeople {
	height: 58px;
}

/* Special attribute for subsequent headers */
.MainColumn.Inner .Heading.Multiple {
	margin-top: 50px;
}
.MainColumn.Inner .Heading .Left, .MainColumn.Inner .Right {
	width: 52px;
	height: 52px;
	background-repeat: no-repeat;
	display: inline-block;
}
.MainColumn.Inner .Heading .Left {
	background-image: url('/images/ribbon_orange_left.png');
}
.MainColumn.Inner .Heading .Right {
	background-image: url('/images/ribbon_orange_right.png');
}
.MainColumn.Inner .Heading .Middle {
	padding-top: 14px;
	padding-bottom: 14px;
	background-color: #F25333;
	display: inline-block;
	position: relative;
	top: -18px;
}
/* Style for people destination page */
.MainColumn.Inner .HeadingPeople .Left, .MainColumn.Inner .HeadingPeople .Right {
	width: 81px;
	height: 58px;
	background-repeat: no-repeat;
	display: inline-block;
}
.MainColumn.Inner .HeadingPeople .Left {
	background-image: url('/images/ribbon_black_left.png');
}
.MainColumn.Inner .HeadingPeople .Right {
	background-image: url('/images/ribbon_black_right.png');
}
.MainColumn.Inner .HeadingPeople .Middle {
	background-image: url('/images/ribbon_black_back.png');
	padding-top: 11px;
	padding-bottom: 15px;
	background-repeat: repeat-x;
	background-position: top left;
	display: inline-block;
	position: relative;
	top: -27px;
	color: #FFFFFF;
}
.MainColumn.Inner .HeadingPeople .Middle h1 {
	letter-spacing: 2px;
	font-size: 23px;
}




/* Style for the destination Work page heading e.g. Work > Case Study */
.MainColumn.Inner.CaseStudy .Heading {
	height: 59px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	padding-bottom: 20px;
}

.MainColumn.Inner.CaseStudy .Heading .Middle {
	background-image: url('/images/squiggle.png');
	padding-top: 15px;
	padding-bottom: 15px;
	background-repeat: repeat-x;
	background-position: top left;
	position: relative;
	top: 0px;
	background-color: transparent;
}

.MainColumn.Inner.CaseStudy .Heading .Middle h1 { 
	padding: 0 20px 0 20px;
	color: #000000;
}

.MainColumn.Inner.CaseStudy .Heading .Bottom {
	background-image: url('/images/squiggle.png');
	height: 30px;
	margin-top: 8px;
	background-repeat: repeat-x;
	background-position: top left;
	position: relative;
}

/* Style for the final destination Services page heading e.g. Services > Article */
.MainColumn.Inner .HeadingService {
	height: 71px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
.MainColumn.Inner .HeadingService .Left, .MainColumn.Inner .HeadingService .Middle {
	float: left;
}
.MainColumn.Inner .HeadingService .Left {
	width: 90px;
}
.MainColumn.Inner .HeadingService .Middle {
	padding-top: 25px;
	width: 410px;
	padding-bottom: 25px;
}
.MainColumn.Inner .Subheading {
	text-align: center;
	margin: 50px 0 0 0;
}

.MainColumn.Inner .Subheading.First {
	margin-top: 0;
}

.MainColumn.Inner .Subheading h2 { 
	padding-bottom: 0;
	margin-bottom: 0;
}
.Columns .MainColumn.Inner .Subheading img {
	margin-left: auto;
	margin-right: auto;
	width: 150px;
	height: auto;
	float: none;
}
.Columns .MainColumn.Inner.People .Subheading img {
	width: 69px;
}



.MainColumn.Inner .Content h2 {
	font-size: 22px;
	font-weight: normal;
}
.MainColumn.Inner .Content h3 {
	font-size: 23px;
	line-height: 30px;
	margin-top: 40px;
	margin-bottom: 40px;
}
.MainColumn.Inner .Content.People h2 {
	font-size: 29px;
	font-weight: bold;
	text-align: center;
}

.MainColumn.Inner .Column1.Inner h2, .MainColumn.Inner .Column2.Inner h2 {
	margin-top: 4px;
	margin-bottom: 4px;
}


/* Right Column */

.RightColumn h3 {
	font-family: "futura-pt",sans-serif;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 12px;
}

.Container .ContentHolder .Columns .RightColumn h3 {
	text-transform: uppercase;
}


/***************************************************************************/






/***************************************************************************/

/* Typography */

/***************************************************************************/

/* Breadcrumb trail colour */
.Breadcrumbs {
	color: #019875;
}

.Container .ContentHolder .Columns .Author {
	color: #80A49A;
	font-weight: bold;
	font-size: 11px;
}

.Container .ContentHolder .Columns .RightColumn .ServicesList, .Container .ContentHolder .Columns .RightColumn 

.CaseStudiesList, .Container .ContentHolder .Columns .RightColumn .PeopleList {
	font-size: 16px;
	font-weight:600;
}

footer {
	text-align: center;
	color: #FFFFFF;
	font-size: 11px;
	letter-spacing: 1px;
}
footer nav {
	text-transform: uppercase;
}

footer nav.Sub {
	text-transform: uppercase;
	color: #F1B825;
}


/***************************************************************************/









/***************************************************************************/

/* A href link styles */

/***************************************************************************/

/* Default */

a {
	text-decoration: none;
	color: #000000;
	border-bottom: 1px dotted #000000;
}

a:hover {
	border-bottom: 1px solid #000000;
}

.Target div a, .SocialMediaIcons a,  .Item .PostThumbnail, .Subheading a, .BottomSwatch a, .BloggerSignUp a {
	border-bottom: 0;
	text-decoration: none;
}

/* Add in a .Tel a, because iOS automatically adds an a tag to telephone numbers */
.Tel, .Tel a {
	text-transform: uppercase;
	white-space: nowrap;
	color: #72B8A5;
	letter-spacing: 1px;
	font-weight: bold;
	text-decoration: none;
}

.LongBlackArrow a {
	text-transform: uppercase;
	text-decoration: none;
	font-size: 10px;
	letter-spacing: 1px;
	color: #E1CA82;
}
/* Margin spacing for main nav at top */
.Container header .LeftEar nav ul li a, .Container header .RightEar nav ul li a {
	margin-bottom: 6px;
}
/* Mouseover for main nav at top */
.Container header .LeftEar nav ul li a:link, .Container header .RightEar nav ul li a:link, .Container .ContentHolder .Columns .RightColumn .ServicesList nav ul li a:link, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList nav ul li a:link, .Container .ContentHolder .Columns .RightColumn .PeopleList nav ul li a:link {
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 2px solid #EEE4CE;
}
/* Active state for main nav at top */
.Container header .LeftEar nav ul li a:active, .Container header .RightEar nav ul li a:active, .Container .ContentHolder .Columns .RightColumn .ServicesList nav ul li a:active, .Columns .RightColumn .CaseStudiesList nav ul li a:active, .Container .ContentHolder .Columns .RightColumn .PeopleList nav ul li a:active { 
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 2px solid #EEE4CE;
}
/* Visited state for main nav at top */
.Container header .LeftEar nav ul li a:visited, .Container header .RightEar nav ul li a:visited, .Container .ContentHolder .Columns .RightColumn .ServicesList nav ul li a:visited, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList nav ul li a:visited, .Container .ContentHolder .Columns .RightColumn .PeopleList nav ul li a:visited {
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 2px solid #EEE4CE;
}
/* Hover state for main nav at top */
.Container header .LeftEar nav ul li a:hover, .Container header .RightEar nav ul li a:hover, .Container .ContentHolder .Columns .RightColumn .ServicesList nav ul li a:hover, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList nav ul li a:hover, .Container .ContentHolder .Columns .RightColumn .PeopleList nav ul li a:hover {
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 1px solid #35927B;
}
/* On state (when you're reading that page) for main nav at top */
.Container header .LeftEar nav ul li a.On, .Container header .RightEar nav ul li a.On, .Container .ContentHolder .Columns .RightColumn .ServicesList nav ul li a.On, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList nav ul li a.On, .RightColumn .PeopleList nav ul li a.On {
	border-bottom: 2px solid #35927B;
}


#sidebar2 ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#submenuitems li a {
  	text-decoration: none;
	border: 0;
	padding: 0;
	margin: 0;
}
#submenuitems li a:hover {
  	color: White;
}

/* Slider links */
#slidernav nav ul li a:link {
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 2px solid #FAF5E9;
}
#slidernav nav ul li a:active { 
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 2px solid #FAF5E9;
}
#slidernav nav ul li a:visited {
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 2px solid #FAF5E9;
}
#slidernav nav ul li a:hover {
	text-decoration: none;
	color: #000000;
	display: inline-block;
	border-bottom: 2px solid #35927B;
}
#slidernav nav ul li a.On {
	border-bottom: 2px solid #35927B;
}

/* Default style for any link on an inner content page */
.MainColumn.Inner .Content a:link {
	text-decoration: none;
	color: #000000;
	border-bottom: 1px dotted #000000;
}
.MainColumn.Inner .Content a:active { 
	text-decoration: none;
	color: #000000;
	border-bottom: 1px dotted #000000;
}
.MainColumn.Inner .Content a:visited {
	text-decoration: none;
	color: Purple;
	border-bottom: 1px dotted Purple;
}
.MainColumn.Inner .Content a:hover {
	text-decoration: none;
	color: #000000;
	border-bottom: 1px solid #000000;
}


/* Breadcrumb links */
.Breadcrumbs a {
	text-decoration: none;
	color: #019875;
	border: 0;
}
.Breadcrumbs a:hover {
	text-decoration: underline;
	color: #FF9F02;
	border: 0;
}


/* Styles for home page and inner page subheadings */

.MainColumn.Inner .Subheading h2 a, .MainColumn h2 a, .Item h2 a {
	text-decoration: none;
	color: #000000;
	border: 0;
}



.MainColumn.Inner .Subheading h2 a:hover, .MainColumn h2 a:hover, .Item h2 a:hover {
	text-decoration: underline;
}


/* Footer links main */
footer nav a:link {
	text-decoration: none;
	color: #FFFFFF;
}
footer nav a:active { 
	text-decoration: none;
	color: #F1B825;
}
footer nav a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
footer nav a:hover {
	text-decoration: none;
	color: #F1B825;
}

/* Footer links sub */
footer nav.Sub a:link {
	text-decoration: none;
	color: #F1B825;
}
footer nav.Sub a:active { 
	text-decoration: none;
	color: #FFFFFF;
}
footer nav.Sub a:visited {
	text-decoration: none;
	color: #F1B825;
}
footer nav.Sub a:hover {
	text-decoration: none;
	color: #FFFFFF;
}

/* Footer WP credits */
footer #site-generator a {
	text-decoration: none;
	color: #F1B825;
}
footer #site-generator a:hover {
	text-decoration: underline;
	color: #F1B825;
}

/* Footer address links */
footer p a {
	text-decoration: none;
	color: #FFFFFF;
}
footer p a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}


/***************************************************************************/






















































/***************************************************************************/
/***************************************************************************/
/* Responsive changes */
/***************************************************************************/
/***************************************************************************/





/***************************************************************************/

/* If the viewport width <= 1100 pixels ... */

/***************************************************************************/
/* Just changes the main carousel slider to the more square format */
/***************************************************************************/

    @media screen and (max-width: 1100px) {
    	
    	/* Hide main wide carousel slider */    	
    	.Container .ContentHolder .SliderArea {
			display: none;
		}
		.Container .ContentHolder .SliderAreaWork {
			display: none;
		}
		/* This class (.SliderNavs) has been manually added to the /scripts/stepcarousel.js addnavbuttons function, line 58 */
		/* It is necessary in order to hide the nav buttons, otherwise they still show even when the slider is not visible */
		.Slider-SliderNavs  {
			display: none;
		}
		
		/* Display main square carousel slider */
		.Container .ContentHolder .SliderAreaSquare {
			display: block;
			margin-top: 18px;
		}
    	/* This class (.SliderNavs) has been manually added to the /scripts/stepcarousel.js addnavbuttons function, line 58 */
		/* It is necessary in order to hide the nav buttons, otherwise they still show even when the slider is not visible */
		.SliderSq-SliderNavs  {
			display: block;
		}


		.Container .ContentHolder .SliderAreaSquare .InnerSliderArea {
			height: 430px;
			width: 620px;
			margin-left: auto;
			margin-right: auto;
			background-image: url('/images/slideshow_back_620.png');
			background-repeat: no-repeat;
			position: relative;
		}
    	
    	.stepcarousel {
    		width: 600px; /*Width of Carousel Viewer itself*/
    		height: 430px; /*Height should enough to fit largest content's height*/
    		
    	}
    	
    	.stepcarousel .panel {
			width: 444px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
			height: 329px;
		}
		
		#SliderSq-paginate {
			width: 100%; 
			text-align: center;
			position: absolute;
			top: 368px;
			left: 0;
			z-index: 200;
		}
		
		
			
		
		
		
		/* This class (.SliderNavs) has been manually added to the /scripts/stepcarousel.js addnavbuttons function, line 58 */
		/* It is necessary in order to hide the nav buttons, otherwise they still show even when the slider is not visible */
		#Slider .SliderNavs, .SliderWork-SliderNavs {
			display: none;
		}
		
		
		.panel h2 {
	position: absolute;
	top: 10px;
	left: 46px;
}

		
		
		
		.Container .ContentHolder .Columns .MainColumn.Inner.Work .WorkColumn {
	text-align: center;
	width: 584px;
	border: 0px solid green;
	margin-left: auto;
	margin-right: auto;
}



/* Main Column Inner (inner pages, not home page) */
.Container .ContentHolder .Columns .MainColumn.Inner.Work .WorkColumn .Item {
	width: 49%;
}






		
	} /* <= 1100 */

/***************************************************************************/









/***************************************************************************/

/* If the viewport width <= 1000 pixels ... */

/***************************************************************************/

    @media screen and (max-width: 1000px) {
    	
    	header {
			padding-bottom: 20px;
		}
    	
    	.Container header .LeftEar .Wide, .Container header .RightEar .Wide {
    		max-width: 29%;
    	}
    	/* Main Column fits right across screen */
    	.Container .ContentHolder .Columns .MainColumn, .Container .ContentHolder .Columns .MainColumn.Inner {
    		width: auto;
    		float: none;
    	}
    	
    	.Container .ContentHolder .Columns .MainColumn.Inner {
    		padding-bottom: 20px;
    		padding-right: 0;
    	}
    	/* Columns 1 and 2 now split equally across the screen */
    	.Container .ContentHolder .Columns .Column1, .Container .ContentHolder .Columns .Column2 {
    		float: left;
    		width: 46%;
    	}
    	
    	.Container .ContentHolder .Columns .Column1 {
    		border-right: 1px dotted #000000;
    		padding-right: 14px;
    	}

		.Container .ContentHolder .Columns .Column2 {
			padding-left: 36px;
			padding-right: 0px;
		}
    	/* Previously right hand column now displays across the screen */
    	.Container .ContentHolder .Columns .RightColumn {
    		width: auto;
			float: none;
			border-left: 0px;
			padding-left: 0px;
			line-height: 22px;
		}
		
		.Container .ContentHolder .Columns .RightColumn .Divider {
			height: 7px;
			margin-top: 16px;
			
		}
		/* Top div and Bottom div now split equally across the screen */
		.Container .ContentHolder .Columns .RightColumn .Top, .Container .ContentHolder .Columns .RightColumn .Bottom {
			float: left;
			width: 46%;
		}
		
		.Container .ContentHolder .Columns .RightColumn .Top {
			padding-right: 14px;
		}
		
		.Container .ContentHolder .Columns .RightColumn .Bottom {
			padding-left: 36px;
			padding-right: 0px;
		}
		
		/* Inside pages: Work (Case Studies) Main Column view  */
		/* MainColumn Inner contains two divs, Column1 Inner and Column2 Inner */
		.MainColumn.Inner {
			padding-right: 0px;
			padding-left: 0px;
		}
		/* Stretch the heading .Middle across */
		.MainColumn.Inner .HeadingService .Middle {
			width: auto;
		}
	
		
		.MainColumn.Inner .Item {
			margin-top: 20px;
			width: 44%;
			min-height: 180px;
		}

    	
    } /* <= 1000 */
   
/***************************************************************************/
   
   


/***************************************************************************/

/* If the viewport width <= 840 pixels ... */

/***************************************************************************/
/* Gets rid of the usual main navigation, and activates the pull down menu */
/* Removes the main carousel slider from the home page */
/* Home page 'target' areas each go on their own line as opposed to side by side */
/* Col 1 and Col 2 each go on their own line, as opposed to side by side */
/* Top div and Bottom div (inside Right Column) each go on their own line, as opposed to side by side */
/* Community logins and icons disappear from the top bar */
/* Left and Right ear 'wide' navigation disappear and become 'narrow' instead */
/* Left and Right ear copy disappears, and becomes Wide Text instead */
/***************************************************************************/

    @media screen and (max-width: 860px) {
    	
    	/* Increase padding at bottom of header to create more space for wide text at the bottom */
    	header {
			padding-bottom: 130px;
		}
		
		/* Top 100% black bar */
		.TopBlack {
			height: 46px; 
		}
		
    	.Container header .TopBar {
    		height: 46px;
    	}
    	/* Hide social media icons */
    	.Container header .TopBar .SocialMediaIcons, .Container header .TopBar .CommunityLogin {
    		display: none;
    	}
    	/* Move search box to center */
    	.Container header .TopBar .Search {
			float: none;
			margin-left: auto;
			margin-right: auto;
		}
    	/* Hide left and right ear 'wide' navigation */
    	.Container header .ContentHolder .LeftEar .Wide, .Container header .ContentHolder .RightEar .Wide {
			display: none;
		}
		/* Reposition logo area a bit higher */
		.Container header .LogoArea .TopLogo {
			top: -15px;
			width: 145px;
		}
		
		.Container header .LogoArea .TopLogo img {
			margin-top: 6px;
			width: 145px;
			visibility: visible;
		}
		/* Hide top telephone number */
		.Container header .ContentHolder .LogoArea .Tel {
			display: none;
		}
		/* Activate/make visible, the narrow forms of the left and right ear navigations */
		.Container header .LeftEar .Narrow, .Container header .RightEar .Narrow {
			visibility: visible;
			position: absolute;
			max-width: 22%;
			top: 50px;
		}
		
		.Container header .LeftEar .Narrow .Tel {
			margin-bottom: 16px;
			white-space: normal;
		}
		
		.Container header .LeftEar .Narrow {
			left: 0;
			padding-left: 20px;
		}
		
		.Container header .RightEar .Narrow {
			right: 0;
			padding-right: 20px;
		}
		/* Make pull-down slider nav visible */
		#slidernav {
			visibility: visible;
			position: absolute;
			top: 134px;
			left: 0;
			width: 100%;
			background-image: url('/images/pull_down_menu_back.png');
			background-repeat: repeat-y;
			background-position: top left;
			z-index: 101;
		}
	
		#topbar {
			background-image: url('/images/pull_down_menu_back.png');
			background-repeat: repeat-y;
			background-position: top center;
			position: absolute;
			top: 0px;
			left: 0;
			width: auto;
		}
	
		#pulldownmenu_bottom {
			width: auto;
			height: 27px;
			margin-top: 20px;
			background-image: url('/images/pull_down_menu_bottom.png');
			background-repeat: no-repeat;
			background-position: top center;
		}
		/* Make 'wide text' visible */
		.Container header .ContentHolder .WideText {
			visibility: visible;
			margin-top: 176px;
			text-align: left;
			padding: 0 60px 10px 60px;
			font-size: 16px;
		}
		/* Hide main carousel slider */    	
    	.Container .ContentHolder .SliderArea {
			display: none;
		}    
		/* Hide main carousel slider */    	
    	.Container .ContentHolder .SliderAreaSquare {
			display: none;
		} 		
		/* This class (.SliderNavs) has been manually added to the /scripts/stepcarousel.js addnavbuttons function, link 58 */
		/* It is necessary in order to hide the nav buttons, otherwise they still show even when the slider is not visible */
		.Slider-SliderNavs, .SliderSq-SliderNavs {
			display: none;
		}
		/* Put target areas onto their own lines */
    	.Container .ContentHolder .Target {
			white-space:nowrap;
			width: auto;
			height: 110px;
			float: none;
			text-align: center;
			margin-bottom: 12px;
		}		
		
		.Container .ContentHolder .Columns .MainColumn .Item img, .Container .ContentHolder .Columns .MainColumn.Inner .post-content .entry img {
			float: none;
			margin-left: auto;
			margin-right: auto;
		}
		
		
		.Container .ContentHolder .Columns .Column1, .Container .ContentHolder .Columns .Column2 {
    		float: none;
    		width: auto;
    	}
    	
    	.Container .ContentHolder .Columns .Column1 {
    		border-right: 0;
    		padding-right: 0;
    	}

		.Container .ContentHolder .Columns .Column2 {
			padding-left: 0;
			padding-right: 0;
		}
		
		.Column2 .DividerDotted {
			border-top: 1px dotted #000000;
			border-bottom: 1px dotted #000000;
			height: 3px;
			margin: 8px 0 8px 0;
			
		}
		
		.Container .ContentHolder .Columns .RightColumn .Top, .Container .ContentHolder .Columns .RightColumn .Bottom {
			float: none;
			width: auto;
			padding: 0;
			
		}
		
		.Container .ContentHolder .Columns .RightColumn .Top {
			text-align: center;
		}
		
		.Container .ContentHolder .Columns .RightColumn .ServicesList, .Container .ContentHolder .Columns .RightColumn .CaseStudiesList, .Container .ContentHolder .Columns .RightColumn .PeopleList {
			width: 300px;
			margin-left: auto;
			margin-right: auto;
		}
		
		
		.Event, .Container .ContentHolder .Columns .RightColumn .Bottom .TweetBox, #sidebar2 {
			width: 260px;
			margin-left: auto;
			margin-right: auto;
		}
		/* Change background image of newsletter sign up box */
		.Container .ContentHolder .Columns .RightColumn .Top .NewsletterSignUp {
			background-image: url('/images/newsletter_sign_up_scrap_wide.png');
			background-position: top center;
			width: auto;
			height: 146px;
			margin-left: auto;
			margin-right: auto;
		}
		
		.MainColumn.Inner .HeadingService .Middle {
			width: 340px;
		}
		
		.MainColumn.Inner .Item {
			margin-top: 40px;
			float: none;
			width: 100%;
			min-height: 10px;
		}
		
		/* Put main images on their own line */
    	.Container .ContentHolder .Columns .MainColumn.Inner .Item img {
    		float: none;
    		margin-right: auto;
    		margin-left: auto;
    	}
		
		/* Put main images on their own line */
    	.Container .ContentHolder .Columns .MainColumn img {
    		float: none;
    		margin: 0 0 10px 0;
    		display: block;
    		max-width: 500px;
    		height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    	}
    	
    	.Columns .MainColumn.Inner .Subheading img {
    		float: none;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	
    	/* Change team member illustration */
		.Container .ContentHolder .Columns .MainColumn.Inner .Content.People img {
    		margin: 0 0 20px 0;
    		height: 340px;
    		width: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    		margin-right: auto;
    		margin-left: auto;
    	}
    	
    	
   }
    	
    	    @media screen and (max-width: 680px) {
    	
		.Container .ContentHolder .Columns .MainColumn.Inner.Work .WorkColumn {
	text-align: center;
	width: 100%;
	border: 0px solid green;
	margin-left: auto;
	margin-right: auto;
}
    	

		



	} /* <= 680 */
	
/***************************************************************************/






/***************************************************************************/

/* If the viewport width <= 640 pixels ... */

/***************************************************************************/
/* Makes left and right hand side margins a bit thinner */
/* Spacing under header wide text is increased */
/* Main column images are centered (no float) */
/***************************************************************************/

    @media screen and (max-width: 640px) {
    	
    	body {
    		font-size: 16px;
    	}

		/* Increase space at bottom of header to accommodate wide text */
		header {
			padding-bottom: 150px;
		}

		
    	/* Put main images on their own line */
    	.Container .ContentHolder .Columns .MainColumn img {
    		max-width: 340px;
    		height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    	}
    	
    	.MainColumn.Inner .HeadingService .Middle {
			width: 210px;
		}
    	
    	.MainColumn.Inner .Subheading {
    		text-align: center;
    		position: relative;
    		margin: 26px 0 4px 0;
    		padding-top: 6px;
    	}
    	
    	.Columns .MainColumn.Inner .Subheading img {
			width: auto;
    		height: 120px;
    	}
    	
    	.Columns .MainColumn.Inner.People .Subheading img {
    		width: 69px;
    		height: auto;
    	}
    	
    
    	
    	.MainColumn.Inner h2 {
    		font-size: 24px;
    	}
    	
    	.MainColumn.Inner .Subheading h2 {
    		margin-top: 0;
    		margin-bottom: 8px;
    	}
    	/* Put subheading images on their own line, centered */
    	.MainColumn.Inner .Subheading img {
    		position: relative;
    	}
    	
    	
    	
    	
    	/* Make smaller thumbnail images float left, with text flow around them */
    	.Container .ContentHolder .Columns .Column1 img, .Container .ContentHolder .Columns .Column2 img {
    		float: left;
    		margin: 0 12px 6px 0;
    	}
    	
    	.MainColumn, .Column1, .Column2, .RightColumn {
    		padding: 0;
    	}
    	/* Inside column images on own line */
    	.MainColumn.Inner .Column1.Inner img, .MainColumn.Inner .Column2.Inner img {
    		float: none;
    		margin-bottom: 20px;
    	}
		/* Change team member illustration's height, margins */
		.Container .ContentHolder .Columns .MainColumn.Inner .Content.People img {
    		margin: 0 0 20px 30px;
    		height: 320px;
    		width: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    		float: right; /* Need float right here, because the float is cleared in .MainColumn.Inner above */
    	}    	
    	/* Style for people destination page */
    	.MainColumn.Inner .HeadingPeople {
    		height: 48px;
    	}
    	
    	.MainColumn.Inner .HeadingPeople .Left, .MainColumn.Inner .HeadingPeople .Right {
    		width: 67px;
    		height: 48px;
    		background-repeat: no-repeat;
    		display: inline-block;
    	}
    	
    	.MainColumn.Inner .HeadingPeople .Middle {
    		padding-top: 6px;
    		padding-bottom: 9px;
    	}
    	
    	.Container .ContentHolder .Columns .MainColumn.Inner .HeadingPeople .Middle h1 {
    		letter-spacing: 1px;
    		font-size: 15px;
    	}
    	/* Constrain width of main case study image */
    	.Container .ContentHolder .Columns .MainColumn.Inner.CaseStudy img {
    		max-width: 320px;
    		height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    	}
    	/* Google map on Contacts page */
    	.MainColumn.Inner iframe {
    		width: 450px;
    		height: 400px;
    	}
    	
    	.MainColumn.Inner input[type="text"], .MainColumn.Inner textarea, .MainColumn.Inner input[type="email"] {
    		width: 400px;
    	}
    	
    	.Container .ContentHolder .Columns .MainColumn.Inner.Work .WorkColumn .Item {
		width: 100%;
	border: 0px solid red;
}


	} /* <= 640 */
	
/***************************************************************************/


	
	
/***************************************************************************/
	
/* If the viewport width <= 480 pixels ... */

/***************************************************************************/
/* Clear the left and right side black borders */
/* Make inner margins/padding less */
/* Target areas smaller, less wide */
/* Constrain main image so it's not too wide */
/* Hide the footer navigation */
/***************************************************************************/

    @media screen and (max-width: 480px) {
    	
    
    	
    	
    	/* Get rid of left and right black borders */
    	.Container {
			border-left: 0;
			border-right: 0;
		}
		/* Increase padding of header to accommodate wide text */
		header {
			padding-bottom: 160px;
		}
		/* Controls inner margins */
		.Container .ContentHolder {
			padding: 0 18px 30px 18px;
		}
		/* Controls width of text immediately below the logo and pull down menu */
		.Container header .ContentHolder .WideText {
			padding: 0 24px 0 24px;
			/*font-size: 15px;*/
		}
		/* Controls the 'target areas' on the home page */
		.Container .ContentHolder .Target {
			white-space:nowrap;
			width: auto;
			height: 90px;
			float: none;
			text-align: center;
			margin-bottom: 12px;
		}
		
		.Container .ContentHolder .Target div {
			padding: 0 3px 12px 3px;
			font-size: 11px;
		}
		
		.Container .ContentHolder .Target.About div {
			padding: 0 3px 12px 3px;
			font-size: 11px;
			margin-left: 20px;
			margin-right: 20px;
		}
		
		
		.Container .ContentHolder .TargetTitle span {
			white-space:nowrap;
			font-size: 42px;
			font-style: normal;
			padding: 0 10px 0 10px;
			position: relative;
			top: 7px;
		}
		.Container .ContentHolder .Target img {
			width: 52px;
		}
		
		/* Main images that span the whole screen */
		.Container .ContentHolder .Columns .MainColumn img, .Container .ContentHolder .Columns .MainColumn.Inner.CaseStudy img {
    		max-width: 280px;
    		height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    	}
    	

    	
    	.MainColumn.Inner .HeadingService {
    		height: 60px;
    		margin-left: auto;
    		margin-right: auto;
    		margin-top: 20px;
    	}
    	
    	.MainColumn.Inner .HeadingService .Left img {
    		height: 60px;
    		width: auto;
    	}
    	
    	.MainColumn.Inner .HeadingService .Left, .MainColumn.Inner .HeadingService .Middle {
    		float: left;
    		height: 46px;
    	}
    	
    	.MainColumn.Inner .HeadingService .Left {
    		width: 76px;
    	}
    	
    	.MainColumn.Inner .HeadingService .Middle {
    		padding-top: 20px;
    		width: 200px;
    	}
    	
    	.Columns .MainColumn.Inner .Subheading img {
			width: auto;
    		height: 100px;
    	}
    	
    	.MainColumn.Inner .Content h2 {
    		font-size: 20px;
    	}
    	/* Adjust paddings for destination page content */
    	.MainColumn.Inner .Content {
    		padding-left: 76px;
    		padding-right: 20px;
    	}
    	/* Google map on Contacts page */
    	.MainColumn.Inner iframe {
    		width: 330px;
    		height: 330px;
    	}
    	
    	.MainColumn.Inner input[type="text"], .MainColumn.Inner textarea, .MainColumn.Inner input[type="email"] {
    		width: 300px;
    	}
    	
    	/* Hide footer nav */
    	footer {
    		display: none;
    	}


	} /* <= 480 */
	
/***************************************************************************/