/* ------------------------------------------------------------------------------------------------------ 800 */
@media screen and (max-width:800px){	

	.desktop { display: none; }
	.mobile { display: block; }
	
	/* -------------- two column split */
	.grid-holder .two-one, 
	.grid-holder .two-two {
		float: none; 
		display: block; 
		width: 100%; 
	}
	.grid-holder .two-one { margin: 0 0 1% 0; }
	.grid-holder .two-two { margin: 0; }
	/* -------------- /two column split */
	
	/* -------------- two column sidebar split */
	.grid-holder .sb-one, 
	.grid-holder .sb-two {
		float: none; 
		display: block;  
	}
	.grid-holder .sb-one, 
	.grid-holder .sb-two {
		width: 100%;  
		margin-right: 0;
	}
	/* -------------- /two column sidebar split */
	
	/* replace topnav with responsive nav
	#cssmenu { display: none; }
	.cmnav {
		display: block; 
		width: 100%; 
		background-color: #417630; 
	}
	*/
	
	.wrap { padding: 0 20px; }
	footer > div.fin { padding: 30px 20px 60px 20px; }
	
	/* increase the padding (tap area) of the home page links */
	.site-links li { padding: 8px 0; }

	/* --------------------- product group settings on sub-pages */
	/* reset the span text so it shows on the same line */
	table.in p span { display: inline; }

	.product-group { 
		margin-bottom: 30px; 
		border-top: 1px solid #535353; 
		border-bottom: 1px solid #535353;
	}
	.product-group .video-holder { margin: 1% 0; }
	/* adjust top/bottom margins and borders on the tables */
	.product-group table.out { 
		border-top: 1px solid #535353;
		margin: 1% 0;
	}
	/* --------------------- /product group settings on sub-pages */
		
	/* --------------------- image settings where there would usually be a video */
	section.pgnovid { border-top: none; } 
	img.novid { margin-top: 0; }
	/* --------------------- /image settings where there would usually be a video */
	
	.sb-two button[type="submit"], 
	.sb-two button.release { 
		margin: 0 auto 20px 0; 
		padding: 15px 40px; 
	}

}

/* ------------------------------------------------------------------------------------------------------ 750 */
@media screen and (max-width: 750px){

	.steps-holder p { float: none; display: block; margin-bottom: 15px; }
	.steps-holder p.laststep { margin-bottom: 0px; }
	
}

/* ------------------------------------------------------------------------------------------------------ 700 */
@media screen and (max-width: 700px){
	
	/* logo/title */
	header { padding-bottom: 0; }
	header h1, header h2 { float: none; display: block; }
	header h2 { margin: 20px 0!important; }
	
	.steps-holder p { float: none; display: block; }
	
}

/* ------------------------------------------------------------------------------------------------------ 600 */
@media screen and (max-width: 600px){
	
	/* masthead image display */
	.cmasthead section.masthead { display: none; }
	.cmasthead section.masthead-m { display: block; }
	.cmasthead section.masthead-m img { width: 100%; height: auto; }

	.wrap { padding: 0 10px; }
	footer > div.fin { padding: 20px 10px 40px 10px; }
	
	.cintro h1.page-title, 
	.csub h1.page-title {
		margin-top: 0; 
		padding-top: 0;
		min-height: 48px;
		line-height: 0px;
		line-height: 1.15em;
		margin-bottom: 10px;
	}
	
	header h2 { font-size: 150%; margin: 10px 0; padding: 0; }
	
	/* remove the bottom link list */
	.cintro section.intro div.hidem { display: none; }

	.green-title h2 { 
		font-size: 125%; 
		background-position: 10px 50%; 
		padding: 10px 10px 10px 50px; 
		min-height: 28px; 
		line-height: 28px; 
	}
	.container .h3-holder h3 { padding: 15px 0 15px 20px!important; }

	/* adjust the margin under each product group because the TOP button is now showing */
	.product-group { margin-bottom: 2px!important; }

	/* reset the span text so it wraps */
	table.in p span { display: block; }

	footer .social { float: none;  padding-top:30px; }			

}

/* ------------------------------------------------------------------------------------------------------ 400 */
@media screen and (max-width: 400px){

	header h2 { margin: 20px 0; }

	.cmasthead section.masthead-m { display: none; }
	
	.green-title h2, 
	.container h3 a { font-weight: bold; }
	
	.green-title h2 { background: transparent url('/_img/icon-house.png') 10px 10px no-repeat; padding: 10px 10px 10px 48px; line-height: 1.25em; }
	.green-title h2.builder { background-image: url('/_img/icon-hardhat.png'); }
	
	.container .h3-holder { margin-bottom: 5px; }
	.container .h3-holder h3 { background-color: #a2a5a4; padding: 10px 10px 10px 20px; font-size: 100%; }
	
	.container h3 a { background: transparent url('/_img/icon-hardhat-sm.png') 0px 0px no-repeat; color: #535353; padding: 2px 0 0 31px; min-height: 26px; line-height: 26px; }
	.container h3 a:hover { background: transparent url('/_img/icon-hardhat-sm-wh.png') 0px 0px no-repeat; color: #fff; }
	
	.container h3.home a { background: transparent url('/_img/icon-house-sm.png') 0px 0px no-repeat; color: #535353; padding: 2px 0 0 31px; min-height: 26px; line-height: 26px;  }
	.container h3.home a:hover { background: transparent url('/_img/icon-house-sm-wh.png') 0px 0px no-repeat; color: #fff; }

	footer .social { float: none; padding-top:30px; }			

}