/* Responsive styles for Mills Oakley Responsive theme, v3.0 */
/* Written by Tim Malone, Chromatix, July 2014 */
/* Contact tim.malone@chromatix.com.au / +61 3 9912 6403 */

/* miscellaneous fixes for all sizes */

	/* fix the twitter link so that it still has a margin above it when the iframe doesn't load properly */
	a.twitter-timeline { margin-top: 30px; }

	/* breadcrumbs - wrap a little more nicely when they're too long */
	#main_content #breadcrumb { line-height: 17px; margin: 6px 0; }
	
	/* contact page - add more table padding, since we effectively removed it by condensing lines to one cell */
	body.page-id-12 table tr td { line-height: 20px; padding: 0; }
	body.page-id-12 table tr td h3 { margin: 0; }
	
	/* staff images - force limit the size of the images given we're now using something much bigger */
	#staff_list .staff_photo img { width: 55px; height: 65px; }
	body.single-staff .staff_details img.staff_thumb { width: 180px; height: auto; }
	
	/* simple responsive tables */
	div.responsive_table div {
		overflow: auto;
		-webkit-overflow-scrolling: touch; /* enable momentum scroll on iDevices */
		padding-bottom: 8px; /* room for scrollbar if req. */
	}
	
	div.responsive_table.overflowed:after {
		content: "<< swipe table to see more >>";
		font-style: italic;
		font-family: "proxima-nova", sans-serif;
		padding: 3px;
		display: block;
		text-align: center;
		background: #2073a5;
		color: #fff;
	}

@media only screen and (max-width: 1000px) { /* BREAKPOINT 1 - 1000px */
	
	/* convert everything to fluid widths */
	
		#masthead_content, #footer_content,
		#main, #main_sidebar, #main_content, #main_lower,
		#staff_search, #staff_list .staff {
			/* most of the heavy lifting is done here - we'll border-box our main containers to make padding oh-so-much easier to deal with */
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
			margin-left: 0;
			margin-right: 0;
			padding-left: 1%;
			padding-right: 1%;
		}
		
			#masthead_content { padding-left: 2%; padding-right: 2%; /* extra space here since it is seen a lot */ }
			#main_sidebar { width: 25%; }
			#main_content { width: 75%; }
		
		#staff_list .staff > div.staff_photo { width: 7%; padding-right: 2%; }
		#staff_list .staff > div.staff_name { width: 34%; padding-right: 4%; }
		#staff_list .staff > div.staff_details { width: 36%; padding-right: 4%; }
		#staff_list .staff > div.staff_location { width: 13%; }
			
		/*#main_lower #front_page_lower > li:first-child,
		#main_lower #front_page_lower > li:last-child  { width: 25%; }*/
		
		#main_sidebar .widget img,
		#main_sidebar a img,
		#main_content img.size-full,
		#staff_list .staff_photo img { max-width: 100%; height: auto; }
		
		#main_sidebar iframe { min-width: 0 !important; }
		
	/* responsive logo */
	
		#masthead { line-height: 88px; height: auto; }
			#masthead_content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
			#masthead_content > a { display: block; float: left; width: 70%; max-width: 283px; } /* cover the logo so we're well clickable */
			
			img#logo {
				width: 100%;
				height: auto;
				float: none;
				vertical-align: middle;
				margin: 0;
				position: relative; /* enable z-index */
				z-index: 15; /* put the logo above the menu, so it's still clickable on iOS */
			}
	
	/* responsive menu */
	
		#main_nav {
			background-image: url("images/menu_responsive.png");
			background-repeat: no-repeat;
			background-position: center right;
			background-size: 60%;
			float: right;
			width: 20%;
			max-width: 88px;
			height: 88px;
			outline: 0;
			-webkit-user-select: none; /* disable selection of 'text' for this element to avoid 'touch'/'click' issues */
			-webkit-touch-callout: none;
		}
			
			#main_nav > ul.menu {
				z-index: 10;
				width: 0%;
				position: absolute;
				top: 124px;
				right: 0;
				max-width: 300px;
				background-color: #fff;
				margin: 0;
				line-height: 60px;
				padding: 0;
				-webkit-transition: width .5s, padding .7s linear;
				-moz-transition: width .5s;
				transition: width .5s, padding .7s linear; /* animate the menu appearing */
				-webkit-box-shadow:	-3px 0 40px -6px rgba(48, 199, 255, 0.4);
				-moz-box-shadow:	-3px 0 40px -6px rgba(48, 199, 255, 0.4);
				box-shadow:			-3px 0 40px -6px rgba(48, 199, 255, 0.4);
				-webkit-border-radius: 2px; /* so the box-shadow still works in iOS landscape */
			}
				
				#main_nav.active > ul.menu {
					width: 65%;
					padding: 10px 20px;
					-webkit-transition: width .5s, padding .1s linear;
					-moz-transition: width .5s, padding .1s linear;
					transition: width .5s, padding .1s linear;
				}
				
				#main_nav > ul.menu:before {
					/* hover trigger area */
					content: "";
					position: absolute;
					top: -95px;
					right: 0;
					height: 100px;
					width: 320px;
				}
				
				#main_nav > ul.menu > li {
					display: block;
					padding: 0;
					overflow: hidden; /* avoid horizontal scroll when it is slightly off screen */
					white-space: nowrap; /* avoid long text hiding when it is animating */
					height: 60px;
					float: none;
					clear: left;
					max-width: 100%;
				}
					
					#main_nav > ul.menu > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
					#main_nav > ul.menu > li > a { font-size: 16px; padding: 20px 0 0 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
						#main_nav > ul.menu > li > a.active { border-bottom: 3px solid #00aeef; } /* for responsive 'click' feedback */
					
					/* sub-menus */
					
						#main_nav > ul.menu > li.menu-item-has-children { height: auto; }
							#main_nav > ul.menu > li.menu-item-has-children > a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
						
						#main_nav > ul.menu > li > ul.sub-menu {
							display: block;
							position: static;
							width: 95%;
							float: right;
							margin: -10px 0 0 0; /* will become hover trigger area */
							max-height: 0px;
							overflow: hidden;
							-webkit-transition: max-height .4s;
							-moz-transition: max-height .4s;
							transition: max-height .4s; /* animate the menu closing */
						}
						
							#main_nav > ul.menu > li > ul.sub-menu > li { position: static; width: 100%; white-space: normal; }
							
								#main_nav > ul.menu > li > ul.sub-menu > li > a {
									width: 100%;
									line-height: 20px;
									padding: 8px 15px;
									-webkit-tap-highlight-color: rgba(0,0,0,0);
									-webkit-box-sizing: border-box;
									-moz-box-sizing: border-box;
									box-sizing: border-box;
								}
								
						/* show sub-menu while maintaining its animation */
						#main_nav.active > ul.menu > li.menu-item-has-children.active { overflow: visible; }
						#main_nav.active > ul.menu > li.menu-item-has-children.active ul.sub-menu {
							position: static;
							max-height: 999px;
							margin: -25px 0 0 0; /* hover trigger area */
							border-top: 15px solid #fff; /* hover trigger area */
							-webkit-transition: max-height 1s;
							-moz-transition: max-height 1s;
							transition: max-height 1s; /* animate the menu appearing */
						}
						
	/* team list pages AND contact page - move sidebar early */
	/* NOTE: this is a direct copy of sidebar code from 800px breakpoint, adjust in both places if neccessary */
		
		.staff-template #main_sidebar, .page-id-12 #main_sidebar,
		.staff-template #main_content, .page-id-12 #main_content { float: none; width: 100%; }
			.staff-template #main_sidebar, .page-id-12 #main_sidebar { text-align: center; padding-top: 10px; }
				
				.staff-template #main_sidebar > li + li, .page-id-12 #main_sidebar > li + li,
				.staff-template #main_sidebar > a + li, .page-id-12 #main_sidebar > a + li,
				.staff-template #main_sidebar > li + a, .page-id-12 #main_sidebar > li + a,
				.staff-template #main_sidebar > a + a, .page-id-12 #main_sidebar > a + a { margin-top: 20px; }
				
				.staff-template #main_sidebar .widget_nav_menu h2.widgettitle,
				.staff-template #main_sidebar .widget_nav_menu div.menu-resources-container,
				.staff-template #main_sidebar .widget_nav_menu ul.menu,
				.staff-template #main_sidebar .widget_nav_menu ul.menu li,
				.page-id-12 #main_sidebar .widget_nav_menu h2.widgettitle,
				.page-id-12 #main_sidebar .widget_nav_menu div.menu-resources-container,
				.page-id-12 #main_sidebar .widget_nav_menu ul.menu,
				.page-id-12 #main_sidebar .widget_nav_menu ul.menu li {
					display: inline-block;
					line-height: 30px;
					width: 100%;
					border: 0;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
				}
					
					.staff-template #main_sidebar .widget_nav_menu h2.widgettitle,
					.page-id-12 #main_sidebar .widget_nav_menu h2.widgettitle { padding-right: 10px; }
						.staff-template #main_sidebar .widget_nav_menu ul.menu li,
						.page-id-12 #main_sidebar .widget_nav_menu ul.menu li { margin: 0 2%; width: auto; }
								
				.staff-template #main_sidebar iframe,
				.staff-template #main_sidebar a.twitter-timeline,
				.page-id-12 #main_sidebar iframe,
				.page-id-12 #main_sidebar a.twitter-timeline { display: none; } /* no more twitter */
		.staff-template #main_lower, .page-id-12 #main_lower { margin-top: 0; }
	
	/* team list pages - search bar */
	
		#staff_search #staff_search_location .location_text, 
		#staff_search #staff_search_team .team_text { display: none; }
		
		#staff_search #staff_search_team ul#search_team li.all {
			font-size: 16px; /* match text box font-size */
			padding: 2px 5px;
			background-position: center right;
		}
		
		/* touch assistance - switch off hover effects and only work when class is active - set by JS touch/click */
		
			#staff_search #staff_search_team ul#search_team li.all:hover {
				background: url('images/search_staff_teams_arrow.png') center right no-repeat #F0F0F0;
			}
			
			#staff_search #staff_search_team ul#search_team:hover li:not(.all) { display: none; }
			#staff_search #staff_search_team ul#search_team.active li { display: block !important; }
			#staff_search #staff_search_team ul#search_team li a { -webkit-tap-highlight-color: rgba(0,0,0,0); } /* disable click highlight */
		
		#staff_search form#search { max-width: 32%; }
		
			#staff_search form#search input,
			#staff_search form#search button {
				height: 27px;
				vertical-align: middle;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			
				#staff_search form#search input {
					max-width: 62%; /* don't push to next line */
					-webkit-appearance: none; /* remove iOS fanciness */
					border-radius: 0; /* remove iOS fanciness */
					border: 1px #A9A9A9 solid; /* look better on iOS */
					padding: 3px;
					font-size: 16px; /* avoid zoom in on iOS */
				}
				
	/* team list pages - misc */
		#staff_list .staff_name h4 a { text-decoration: underline; } /* make it obvious where to click */
		
	/* single team pages - swap photo to right so it wraps better */
		body.single-staff .staff_details { float: right; width: 33%; margin-left: 2%; }
		body.single-staff .staff_description { float: left; width: 63%; margin-right: 2%; }
						
	/* responsive tables - breakpoint 1 */
	/* designed for up to 3 columns; 1st column assumed as header column */
	
		body.page-id-12 #main_content table,	body.page-id-42 #main_content table,	body.page-id-1033 #main_content table,
		body.page-id-12 #main_content tbody,	body.page-id-42 #main_content tbody,	body.page-id-1033 #main_content tbody,
		body.page-id-12 #main_content tr,		body.page-id-42 #main_content tr,		body.page-id-1033 #main_content tr
		{ max-width: 100%; /*display: block;*/ width: 100% !important; } /* override inlines */
		
			/* clearfixes */
			/*#main_content table:after,
			#main_content tbody:after,
			#main_content tr:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }*/
			
			/* table cells - 2 or 3 columns */
			body.page-id-12 #main_content td:nth-child(1):nth-last-child(2),
			body.page-id-42 #main_content td:nth-child(1):nth-last-child(2),
			body.page-id-1033 #main_content td:nth-child(1):nth-last-child(2),
			body.page-id-12 #main_content td:nth-child(2):nth-last-child(1),
			body.page-id-42 #main_content td:nth-child(2):nth-last-child(1),
			body.page-id-1033 #main_content td:nth-child(2):nth-last-child(1),
			body.page-id-12 #main_content td:nth-child(1):nth-last-child(3),
			body.page-id-42 #main_content td:nth-child(1):nth-last-child(3),
			body.page-id-1033 #main_content td:nth-child(1):nth-last-child(3),
			body.page-id-12 #main_content td:nth-child(2):nth-last-child(2),
			body.page-id-42 #main_content td:nth-child(2):nth-last-child(2),
			body.page-id-1033 #main_content td:nth-child(2):nth-last-child(2),
			body.page-id-12 #main_content td:nth-child(3):nth-last-child(1),
			body.page-id-42 #main_content td:nth-child(3):nth-last-child(1),
			body.page-id-1033 #main_content td:nth-child(3):nth-last-child(1)
			{ display: block; float: left; white-space: normal; margin: 0 1%; min-height: 1px; }
		
				/* 2 columns */
				body.page-id-12 #main_content td:nth-child(1):nth-last-child(2),
				body.page-id-42 #main_content td:nth-child(1):nth-last-child(2),
				body.page-id-1033 #main_content td:nth-child(1):nth-last-child(2) { width: 25% !important; } /* override inlines */
				body.page-id-12 #main_content td:nth-child(2):nth-last-child(1),
				body.page-id-42 #main_content td:nth-child(2):nth-last-child(1),
				body.page-id-1033 #main_content td:nth-child(2):nth-last-child(1) { width: 71% !important; }
				
				/* 3 columns */
				body.page-id-12 #main_content td:nth-child(1):nth-last-child(3),
				body.page-id-42 #main_content td:nth-child(1):nth-last-child(3),
				body.page-id-1033 #main_content td:nth-child(1):nth-last-child(3) { width: 28% !important; } /* override inlines */
				body.page-id-12 #main_content td:nth-child(2):nth-last-child(2),
				body.page-id-42 #main_content td:nth-child(2):nth-last-child(2),
				body.page-id-1033 #main_content td:nth-child(2):nth-last-child(2) { width: 32% !important; }
				body.page-id-12 #main_content td:nth-child(3):nth-last-child(1),
				body.page-id-42 #main_content td:nth-child(3):nth-last-child(1),
				body.page-id-1033 #main_content td:nth-child(3):nth-last-child(1) { width: 35% !important; }
			
			/* margin resets on start/end of rows */
			body.page-id-12 #main_content td:nth-child(1),
			body.page-id-42 #main_content td:nth-child(1),
			body.page-id-1033 #main_content td:nth-child(1) { margin-left: 0 !important; }
			body.page-id-12 #main_content td:nth-last-child(1),
			body.page-id-42 #main_content td:nth-last-child(1),
			body.page-id-1033 #main_content td:nth-last-child(1) { margin-right: 0 !important; }
			
	/* allow the split list on services page to have its bulleted points top aligned when the text starts wrapping */
		body.page-id-6 #main_content ul li { background-position: 0 5px; }
	
	/* the footer has a fixed height and as we get smaller it is possible the text might wrap, so let's get ready for that */
		
		#footer { height: auto; }
		
		/* convert line-height to em's, and add padding to mimic what the line-height was doing before */
		#footer_content { line-height: 1.8em; padding-top: 10px; padding-bottom: 10px; }
	
		/* we need a clearfix now too, so the height is calculated properly */
		#footer_content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
}

@media only screen and (max-width: 800px) { /* BREAKPOINT 2 - 800px */
	
	/* front page banner to a smaller, not cycling version */
		#masthead { margin-top: 18px; } /* the extra pixel fits better with the image! */
		#homepage_slider { height: 300px; background-image: url("images/millsbanner.jpg"); background-size: 800px; }
			#homepage_slider div  { display: none !important; } /* override slider */
		body.home #main { margin-top: 152px; }
	
	/* move sidebar to under the content, and adjust it accordingly */
	/* NOTE: this is directly copied to sidebar code for team pages on 1000px breakpoint, adjust in both places if neccessary */
		#main_sidebar,
		#main_content { float: none; width: 100%; }
			#main_sidebar { text-align: center; padding-top: 10px; }
				#main_sidebar > li + li, #main_sidebar > a + li, #main_sidebar > li + a, #main_sidebar > a + a { margin-top: 20px; }
				
				#main_sidebar .widget_nav_menu h2.widgettitle,
				#main_sidebar .widget_nav_menu div.menu-resources-container,
				#main_sidebar .widget_nav_menu ul.menu,
				#main_sidebar .widget_nav_menu ul.menu li {
					display: inline-block;
					line-height: 30px;
					width: 100%;
					border: 0;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
				}
				
					#main_sidebar .widget_nav_menu h2.widgettitle { padding-right: 10px; }
					#main_sidebar .widget_nav_menu ul.menu li { margin: 0 2%; width: auto; }
				#main_sidebar iframe, #main_sidebar a.twitter-timeline { display: none; } /* no more twitter */
		#main_lower { margin-top: 0; }
	
	/* move quick links to a line on their own, and spread the offices out */
		#main_lower #front_page_lower > li,
		#main_lower #front_page_lower > li:last-child { /*width: 33%;*/ width: 23%; text-align: center; }
		#main_lower #front_page_lower > li:first-child { float: none; width: 100%; }
			#main_lower #front_page_lower > li:first-child h2.widgettitle,
			#main_lower #front_page_lower > li:first-child div.menu-quick-links-container,
			#main_lower #front_page_lower > li:first-child ul.menu,
			#main_lower #front_page_lower > li:first-child ul.menu li { display: inline-block; }
				#main_lower #front_page_lower > li:first-child ul.menu li:before { content: ""; } /* remove hyphen */
			
	/* get our footer ready to get smaller */
		#footer_content { font-size: 11px; }
	
}

@media only screen and (max-width: 700px) { /* BREAKPOINT 2a - 700px */

	/* responsive tables - breakpoint 2a */
		/* 3 column tables - move onto own lines - use !important to override previous nth- declarations */		
		body.page-id-12 #main_content td:nth-child(1):nth-last-child(3),
		body.page-id-42 #main_content td:nth-child(1):nth-last-child(3),
		body.page-id-1033 #main_content td:nth-child(1):nth-last-child(3),
		body.page-id-12 #main_content td:nth-child(2):nth-last-child(2),
		body.page-id-42 #main_content td:nth-child(2):nth-last-child(2),
		body.page-id-1033 #main_content td:nth-child(2):nth-last-child(2),
		body.page-id-12 #main_content td:nth-child(3):nth-last-child(1),
		body.page-id-42 #main_content td:nth-child(3):nth-last-child(1),
		body.page-id-1033 #main_content td:nth-child(3):nth-last-child(1) {
			width: 98% !important;
			float: none !important;
			margin: 5px 1% !important;
			text-align: center;
			}
			
			body.page-id-12 #main_content td:nth-child(3):nth-last-child(1),
			body.page-id-42 #main_content td:nth-child(3):nth-last-child(1),
			body.page-id-1033 #main_content td:nth-child(3):nth-last-child(1) { margin-bottom: 7px !important; }
			
		/* targeting the 3 column table on the contact page, we're going to fix the heading spacing */
		body.page-id-12 table { margin-bottom: 0; }
		body.page-id-12 h2,
		body.page-id-12 h3,
		body.page-id-12 table tr td h3 { margin: 20px 0 5px 0; }
		
		body.page-id-12 #main_content td:nth-child(2):nth-last-child(2) strong,
		body.page-id-42 #main_content td:nth-child(2):nth-last-child(2) strong,
		body.page-id-1033 #main_content td:nth-child(2):nth-last-child(2) strong { margin-bottom: -20px; display: block; }
			
	.page-id-12 h2,
	.page-id-12 h3 { text-align: center; } /* center the headings on the contact page, now that the table above is centered */
	
	/* move footer offices & footer content on to their own lines */
		#main_lower #front_page_lower > li,
		#main_lower #front_page_lower > li:last-child,
		#copyright, #chromatix { float: none; width: 100%; text-align: center; }

	/* added by CHROMATIX DJ - 14/11/2016 */
	.chr-form-wrap{
		width: 100%;
		max-width: 100%;
		top: 50px;
		padding: 20px;
		height: 500px;

	}
	
	/* added by CHROMATIX DJ - 19/1/2017 */
	.page-template-template-table-page .table_item:nth-child(odd){
		clear: both;
	}	
}

@media only screen and (max-width: 600px) { /* BREAKPOINT 3 - 600px */
	
	/* reduce white-space at top and bottom of masthead, to prepare it to get smaller - reduce all by 10px */
		#masthead, #main_nav { height: 78px; line-height: 78px; }
		#main_nav > ul.menu { top: 114px; } /* menu needs to move up too */
		#main { margin-top: 40px; }
		
	/* team list pages - down to 2 columns */
		#staff_list .staff > div.staff_photo 		{ width: 35%; float: left; padding: 0 0 0 1%; text-align: right; }
		#staff_list .staff > div.staff_name 		{ width: 35%; float: left; padding: 0 0 0 1%; text-align: right; clear: left; }
		#staff_list .staff > div.staff_details 	{ width: 58%; float: right; padding: 0 1% 0 0; margin-top: -65px; }
		#staff_list .staff > div.staff_location 	{ width: 58%; float: right; padding: 0 1% 0 0; clear: right; min-height: 0; margin-top: 10px; }
		
	/* team list search adjustments */
	
		#staff_search #staff_search_team ul#search_team { max-width: 25%; width: 150px; }
			#staff_search #staff_search_team ul#search_team li a { width: auto; } /* make it wrap if required now */
			#staff_search #staff_search_team ul#search_team li + li { font-size: 11px; padding: 5px 7px; } /* increase padding due to wrapping */
	
		#staff_search form#search { max-width: 29%; }
			#staff_search form#search input { max-width: 75%; } /* increase this, because we're decreasing the size of the search button */
		
			#staff_search form#search button {
				/* turn the search button into one small icon */
				text-indent: -9999px;
				color: transparent;
				border: 0;
				background-color: transparent;
				background-image: url("images/arrow.png");
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px;
				width: 15px;
				cursor: pointer;
			}
		
				#staff_search form#search button:hover { opacity: .8; }
		
	/* single team pages - rearrange to fit */
		body.single-staff .staff_details,
		body.single-staff .staff_description { float: none; width: 100%; margin: 15px 0; }
			body.single-staff .staff_details img.staff_thumb {
				float: right;
				margin-top: -90px; /* move up alongside contact details */
				margin-bottom: 10px; /* reduce spacing from text */
				margin-left: 10px; /* left spacing for text needed now */
			}
	
}

@media only screen and (max-width: 500px) { /* BREAKPOINT 3a - 500px */

	/* responsive tables - breakpoint 3a */
		/* 2 columns - move onto own lines and assume header row - we use !important to override previous nth- declarations */
		body.page-id-12 #main_content td:nth-child(1):nth-last-child(2),
		body.page-id-42 #main_content td:nth-child(1):nth-last-child(2),
		body.page-id-1033 #main_content td:nth-child(1):nth-last-child(2),
		body.page-id-12 #main_content td:nth-child(2):nth-last-child(1),
		body.page-id-42 #main_content td:nth-child(2):nth-last-child(1),
		body.page-id-1033 #main_content td:nth-child(2):nth-last-child(1)
		{ width: 96% !important; margin: 0 4% 2px 4% !important; float: none !important; }
		
			body.page-id-12 #main_content td:nth-child(1):nth-last-child(2),
			body.page-id-42 #main_content td:nth-child(1):nth-last-child(2),
			body.page-id-1033 #main_content td:nth-child(1):nth-last-child(2)
			{ margin: 0 2% 3px 2% !important; font-weight: bold; } /* assume header row */
			
			body.page-id-12 #main_content td:nth-child(2):nth-last-child(1),
			body.page-id-42 #main_content td:nth-child(2):nth-last-child(1),
			body.page-id-1033 #main_content td:nth-child(2):nth-last-child(1) { margin-bottom: 7px !important; }
			
	/* time to put the services page list back in one column */
		body.page-id-6 #main_content ul { float: none; width: 100%; }

	/* condense team search bar further */
		#staff_search #staff_search_location { display: none; }
		#staff_search #staff_search_team ul#search_team,
		#staff_search form#search { max-width: 45%; }
		
	/* single team pages - adjust things to center, because there's no longer room for the photo to float */
		body.single-staff h1 { text-align: center; }
		body.single-staff .staff_details { text-align: center; }
			body.single-staff .staff_details img.staff_thumb { float: none; margin-top: 0; }
	
}

@media only screen and (max-width: 400px) { /* BREAKPOINT 4 - 400px */
	
	/* reduce white-space at top and bottom of masthead, as it continues getting smaller - reduce all by another 15px */
		#masthead, #main_nav { height: 63px; line-height: 63px; }
		#main_nav > ul.menu { top: 99px; }
		#main { margin-top: 30px; }
		
	/* team list pages - down to 1 column */
		#staff_list .staff > div.staff_photo,
		#staff_list .staff > div.staff_name, 
		#staff_list .staff > div.staff_name .staff_team,
		#staff_list .staff > div.staff_details { width: 100%; float: none; padding: 0; margin: 2px 0; text-align: center; }
		#staff_list .staff > div.staff_location { display: none; }
	
	/* condense team search bar even further */
		#staff_search #staff_search_team ul#search_team { max-width: 40%; }
		#staff_search form#search { max-width: 50%; }
			
	/* align 3 column tables and contact page headings back to the left, because there's enough room to not be centered now */
		.page-id-12 h2, .page-id-12 h3,
		body.page-id-12 #main_content td:nth-child(1):nth-last-child(3),
		body.page-id-42 #main_content td:nth-child(1):nth-last-child(3),
		body.page-id-1033 #main_content td:nth-child(1):nth-last-child(3),
		body.page-id-12 #main_content td:nth-child(2):nth-last-child(2),
		body.page-id-42 #main_content td:nth-child(2):nth-last-child(2),
		body.page-id-1033 #main_content td:nth-child(2):nth-last-child(2),
		body.page-id-12 #main_content td:nth-child(3):nth-last-child(1),
		body.page-id-42 #main_content td:nth-child(3):nth-last-child(1),
		body.page-id-1033 #main_content td:nth-child(3):nth-last-child(1) { text-align: left; }
	
	/* it's time to separate the quick links from their title */
		#main_lower #front_page_lower > li:first-child { margin-bottom: 15px; }
			#main_lower #front_page_lower > li:first-child h2.widgettitle { display: block; margin: 0; }
	
}

@media only screen and (max-width: 360px) {
	/* added by CHROMATIX DJ - 19/1/2017 */
	.page-template-template-table-page .table_item{
		margin-bottom: 10px;
		margin-right: 10px;
	}
}