﻿/*Responsive CSS Overrides*/

@media screen and (max-width: 980px) {
	
	.container{
		width:94%;
	}
	
	#navTopContainer{
		width:65%;
	}
	
	#footer{
		width:94%;
		padding:10px 0;
	}
	
	#footer a{
	display:inline-block;
}
	
}

@media screen and (max-width: 850px){
	#contentBody .front{
		width:70%;
	}
}

@media screen and (max-width: 730px) {
	#header .nav{
		min-height:132px;
	}

	#footer .left,
	#footer .right{
		float:none;
		margin:auto;
		width:98%;
		text-align:center;
	}
	
}

@media screen and (max-width: 700px) {
	#header .logo{
		width:100%;
	}
	
	#header .logo img{
		display:block;
		margin:auto;
		max-height:190px;
		width:auto;
	}
	
	#header .snaps{
		display:none;
	}
	
	#header .nav{
		background:none;
		min-height:auto;
		padding:10px 0;
	}
	
	#header .nav .phone{
		display:block;
		background-color:#8E7956;
		padding:10px;
		border-radius:5px;
		width:220px;
		margin:10px auto;
		text-align:center;	
	}

	#header .nav .search{
		display:none;
	}
		
	#navTopContainer{
		display:none;
	}
	
	#contentBody .front{
		width:100%;	
	}
	
	.sidebar{
		float:none;
		width:190px;
		margin:auto;
	}


}

@media screen and (max-width: 500px) {
	
	.columns .half ,
	.columns .third,
	.columns .two-thirds,
	.columns .quarter,
	.columns .three-quarters,
	.padded-columns .half ,
	.padded-columns .third,
	.padded-columns .two-thirds,
	.padded-columns .quarter,
	.padded-columns .three-quarters{
	    margin: auto;
	    width: 98%;
	    float:none;
	}

	div.aligncenter,
	.alignnone,
	.aligncenter,
	.alignright,
	.alignleft,
	.aligncenter,
	a img.alignright,
	a img.alignnone,
	a img.alignleft,
	a img.aligncenter,
	.wp-caption.alignnone,
	.wp-caption.alignleft,
	.wp-caption.alignright {
	    display: block;
	    margin: 5px auto;
	    float:none;
	}

}