@media screen and (max-width:960px)
{
	#device-info { background: magenta; } #device-info p { color: yellow; }
	.desktop-only, .shrunk-1080, .screen-1280, .screen-1024, .tablet-only, .mobile-only, .smallest-width-reached-only { display: none; }
	.tablet-only { display: block; }
	
	/* .sidebar */
	.gksm-custom-menu-widget
	{
		display: none !important;
		width: 100%;
		/*max-width: 665px;*/
		float: left;
		clear: both;
		margin: 0 auto 20px auto;
	}
	body.tax-showcase_category .gksm-custom-menu-widget
	{
		max-width: 940px;
		float: left;
		clear: both;
		margin: 0 0 20px 0;
	}
		body.single-showcases .gksm-custom-menu-widget,
		body.tax-showcase_category .gksm-custom-menu-widget
		{
			display: block !important;
		}
		
	.gksm-custom-menu-widget ul
	{
		width: 100%;
	}
	.gksm-custom-menu-widget ul li
	{
		width: 100%;
	}
	.gksm-custom-menu-widget ul li a
	{
		width: 90% !important;
		padding: 9px 5%;
	}

	body { margin: 40px 0 0 0; } /* space for mobile nav bar */

	/* column WITH sidebar */
	body.page-parent article .content,
	body.page-child article .content,
	body.single-showcases article .content,
	body.tax-showcase_category article .content,
	body.post-type-archive-showcases.term-house-builders article .content,
	body.post-type-archive-showcases.term-pool-builders article .content,
	body.post-type-archive-showcases.term-landscapers article .content
	{
		width: 100%;
		float: none;
	}

	article
	{
		width: auto;
		min-height: inherit;
		margin: 0;
		padding: 15px 5% 15px 5%;
	}	
	
	.hide-br-on-small-screens
	{
		display: none;
	}
	
	/* which of these... */
	div#which-of-these div
	{
		width: 90%;
		padding: 10px 5%;
		margin: 0;
	}
	div#which-of-these p
	{
		font-size: 0.95em;
	}
	
	
	/* masonry gallery */
	div.gallery-heading-container
	{
		float: left;
		clear: both;
		width: auto;
		max-width: 98.5%; /* rough approx for browsers not supporting calc() */ 
		max-width: calc(96% + 20px); /* (.grid-item x 3) + (right margin 10px x 2) */
	}
	div.gallery-heading-inner
	{
		width: 60%;
		float: left;
	}
	.grid
	{
		padding: 10px 0 10px 0;
		max-width: 950px; /* to allow margin right for right-most images */
		width: auto;
	}
	.grid-item
	{
		width: 32%;
		margin: 0 10px 10px 0;
	}

	
	
	/* home page 3 easy steps section */
	.three-easy-steps-text
	{
		padding: 5px 0 10px 0;
		width: 130px;
		margin: 0 15px 20px 0;
		font-size: 0.75em;
	}
	.three-easy-steps-text strong
	{
		font-size: 6em;
	}
	ul.three-easy-steps-list { padding: 20px 0 0 0; }
	ul.three-easy-steps-list li
	{
		margin: 0 0 5px 0;
		line-height: 1.4em;
		font-size: 1em;
	}
		
	/* galleries-quick-links-home */
	ul.galleries-quick-links-home li a
	{
		padding: 0;
		font-size: 1.4em;
	}
	ul.galleries-quick-links-home li a img
	{
		display: block;
		margin: 0 30px 0 0;
		float: left;
	}
	ul.galleries-quick-links-home li a span
	{
		max-width: 280px;
		float: left;
		margin: 38px 0 0 0;
	}
		body.post-type-archive-showcases ul.galleries-quick-links-home li { min-width: inherit; width: 100%; }
		body.post-type-archive-showcases ul.galleries-quick-links-home li a { padding: 30px 30px 30px 30px; }
		body.post-type-archive-showcases ul.galleries-quick-links-home li a span { margin: 0; max-width: none; }
	
	/* expert-help */
	p.expert-help
	{
		clear: both;
		font-size: 1em;
		line-height: 1.4em;
	}
	a.expert-help-button
	{
		width: 50%;
		font-size: 1.2em;
		padding: 20px 5% !important;
	}
	p.expert-help-button-container img
	{
		display: none;
	}

	/* mobile nav */
	a#menu-toggle-small-screens 
	{
		padding: 10px 0 0 10px;
		height: 25px;
		width: 80px;
		display: block;
		float: right;
		font-size: 0.8em;
		text-transform: uppercase;
		text-decoration: none;
		color: #aaa;
		background: #444;
	}
	a#menu-toggle-small-screens:hover { background: #555; }
	.border-menu /* https://css-tricks.com/three-line-menu-navicon/ */
	{
	  position: relative;
	  padding-left: 1.25em;
	}
	.border-menu:before
	{
	  content: "";
	  position: absolute;
	  top: 10px;
	  right: 12px;
	  width: 22px;
	  height: 3px;
	  border-top: 9px double #aaa;
	  border-bottom: 3px solid #aaa;
	}

	#header
	{		
		height: 35px;
		border-bottom: #d7df23 solid 5px;
		z-index: 9000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0;
		margin: 0;
		background: #444;
		box-shadow: #777 0 0 15px;
		box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px;
		-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
	}
		/* EPP */
		body#epp #header
		{
			border-bottom-color: #62c1be;
		}
	
	a.logo 
	{
		float: left;
		display: block;
		width: 25px;
		height: 25px;
		margin: 5px 0 0 10px;
	}
	a.logo img
	{
		display: block;
		width: 25px;
		height: 25px;
	}
	
	p#site-title
	{
		font-size: 1em;
		font-weight: normal;
		color: #ccc;
		margin: 13px 0 0 10px;
		display: block !important;
		line-height: 9px !important;
	}

	/* main nav */
	#nav-main,
	body#epp #nav-main /* EPP colour tweaks (to cancel out desktop overrides) */
	{
		display: none;
		border: none;
		z-index: 8000;
		width: 100%;
		height: 100%;
		position: fixed;
		overflow: auto;
		top: 40px;
		left: 0;
		/* EPP changed these next two lines to important, otherwise the desktop nav-main background overrides these and the popout nav menu has an incorrect solid epp bg */
		background-color: #000 !important;
		background-color: rgba(0, 0, 0, 0.85) !important;
	}

	#nav-main ul.menu
	{
		background: #404041;
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		margin: 0;
		padding: 0;
		box-shadow: #777 0 0 15px;
		box-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
	}
		/* EPP */
		body#epp #nav-main ul.menu
		{
			background: #365a96;
		}
	
	#nav-main ul.menu li
	{
		width: 100%;
		margin: 0;
		padding: 0;
		float: left;
		clear: both;
	}
	#nav-main ul.menu li a
	{
		text-transform: uppercase;
		text-align: left;
		display: block;
		width: 85%;
		padding: 9px 7.5%;
		font-size: 0.75em;
		font-weight: bold;
		border-bottom: #666 solid 2px;
		background: transparent url(../images/arrow-light.png) no-repeat bottom right;
	}
	#nav-main ul.menu li a:hover,
	#nav-main ul.menu li.current_page_item a:hover,
	#nav-main ul.menu li.current-menu-item a:hover,
	#nav-main ul.menu li.current-menu-parent a:hover,
	body.tax-project_galleries #nav-main ul.menu li.menu-item-type-post_type_archive a:hover,
	body.single-showcases #nav-main ul.menu li.menu-item-type-post_type_archive a:hover
	{
		background-image: url(../images/arrow-light.png) !important; 
		background-repeat: no-repeat !important;
		background-position: bottom right !important;
		background-color: #404041 !important;
		color: #fff !important;
	}
		/* EPP */
		body#epp #nav-main ul.menu li a:hover,
		body#epp #nav-main ul.menu li.current_page_item a:hover,
		body#epp #nav-main ul.menu li.current-menu-item a:hover,
		body#epp #nav-main ul.menu li.current-menu-parent a:hover,
		body#epp body.tax-project_galleries #nav-main ul.menu li.menu-item-type-post_type_archive a:hover,
		body#epp body.single-showcases #nav-main ul.menu li.menu-item-type-post_type_archive a:hover
		{
			background-color: #365a96 !important;
		}
	

	/* drop down */
	#nav-main ul.menu ul
	{
		display: block;
		top: auto;
		height: auto;
		position: relative;
		box-shadow: none;
		margin: 0;
		padding: 0;
		width: auto;
	}
	/* show on hover */
	#nav-main ul.menu li:hover ul
	{ 
		display: block;
	}
	#nav-main ul.menu ul li
	{
		float: left;
		clear: both;
	}
	/* drop down nav button */
	#nav-main ul.menu ul li a,
	#nav-main ul.menu li ul li a:hover,
	#nav-main ul.menu li ul li.current-menu-item a:hover,
	#nav-main ul.menu li ul li.current_page_item a:hover
	{
		background: #555 url(../images/bullet-light.png) no-repeat 11% 9px !important;
		border-bottom: #222 solid 1px;
		text-align: left;
		color: #fff !important;
		padding: 8px 0 8px 15% !important;
		font-size: 0.7em;
		min-width: 0;
		width: 85%;
		border-top: 0;
	}
	/* END DROP DOWN */


	/* .boxes */
	.boxes
	{
		width: auto;
		margin: 0;
	}
	.boxes ul li
	{
		clear: both;
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.boxes ul li a
	{
		font-size: 0.8em;
		display: block;
		clear: both;
	}
	.boxes ul li a span
	{
		width: 90%;
		padding: 9px 5%;
		display: block;
		float: left;
		clear: both;
		margin: 0;
	}
	.boxes ul li a img
	{
		display: none;
	}
	/* END .boxes */
	

	/* breadcrumbs (nav xt plugin) */
	#breadcrumb-container
	{
		padding: 0 0 0 0; 
		margin: 0 auto 17px auto;
		width: auto;
		max-width: 665px;
		font-size: 0.85em;
		float: none;
		clear: both;
	}	
			
	/* embedded youtube videos */
	iframe
	{
		max-width: 665px !important;
		width: 100% !important;
		margin-bottom: 15px !important;
	}

	body.single-showcases article .content
	{
		max-width: 665px;
		width: auto; /* was 100% */
		margin: 0 auto;
	}

	/* showcase main page template */
	article img.company-logo
	{
		min-width: 280px !important;
		max-width: 665px !important;
		width: 100% !important;
		padding-top: 20px !important;
	}
	div.owner-info
	{
		padding: 5px 0 0 0;
		margin: 0 0 40px 0;
	}
	div.info-block
	{
		float: left;
		width: auto;
		min-height: 0;
		margin: 5px 0 0 15px;
	}	
	div.owner-info h3
	{
		padding: 12px 35px 12px 10px;
		text-align: left;
	}
	
	/* company-contact-form */
	div.company-contact-form
	{
		padding: 5px 0 0 0;
		margin: 0 0 40px 0;
	}
	p.contact-form-expander a
	{
		padding: 30px 5% 30px 5%;
		font-size: 1.1em;
	}
	p.contact-form-expander span
	{
		text-transform: uppercase;
		font-size: inherit;
	}

	/* showcase-gallery-previews */
	ul.showcase-gallery-previews
	{
		max-width: 960px;
		width: 100%;
	}
	
	/* START footer */
	#footer
	{
		width: auto;
		max-width: 960px;
		padding: 15px 0 10px 0;
		margin: 0 0 15px 0;
	}
	#footer-info
	{
		width: auto;
		max-width: 960px;
		margin: 0;
		text-align: center;
	}
	#footer-info p
	{
		font-size: 0.75em;
		padding: 0 0 10px 0;
		line-height: 1.7em;
	}
	#footer-inner
	{
		width: 90%;
		padding: 0 5%;
		margin: 0;
	}
	#footer h3
	{
		font-size: 1em;
		padding: 0 0 10px 0;
		margin: 0 0 10px 0;
	}
	
	/* footer nav */
	#footer-nav-main
	{
		width: auto;
	}
	#footer-nav-main ul
	{
		float: left;
		margin: 0 0 10px 0;
		width: 45%;
		padding: 0 5% 0 0;
	}
	#footer-nav-main ul li
	{

	}
	#footer-nav-main ul li a
	{
		font-size: 0.9em;
		padding: 5px 0 2px 0;
		display: block;
	}
	/* END footer */	
	
	
	/* sponsor_ads tablet */
	div.gallery-heading-container
	{
		float: left;
		clear: both;
		width: auto;
		padding: 0 0 0 0;
	}
	div.gallery-heading-inner
	{
		width: auto;
		float: left;
		clear: both;
		margin: 0 0 0 0;
	}
	.gallery-heading-container a.sponsor-ad
	{
		width: auto;
		height: 66px;
		float: left;
		clear: both;
		margin: 0 0 20px 0;
		padding: 0;
		border: 0;
	}
	.sidebar
	{
		float: left;
		clear: both;
		width: 100%;
	}
	a.sponsor-ad
	{
		display: block;
		float: left;
		clear: both;
		margin: 0 0 10px 0;
		width: 100%;
		height: auto;
	}
	a.sponsor-ad img
	{
		max-width: 227px;
		float: none;
		clear: both;
		margin: 0 auto 15px auto;
	}
	a.sponsor-ad span
	{
		text-align: center;
		width: 100%;
	}
	.gallery-heading-container a.sponsor-ad span
	{
		text-align: left;
		position: relative;
		top: 0;
		left: 0;
	}
}



@media screen and (max-width:805px)
{
	div.gallery-heading-container
	{
		max-width: 95%; /* rough approx for browsers not supporting calc() */ 
		max-width: calc(90% + 20px); /* (.grid-item x 3) + (right margin 10px x 2) */
	}
	.grid-item
	{
		width: 30%;
	}
}