/* Media Queries
---------------------------------------------------------------------------------------------------- */

/* Smaller computers 993 ----------- */
@media only screen 
and (max-width : 993px) {
	
	#container,
	#form,
	table,
	#header img,
	img.home-image,
	#side-menu, 
	img {
		max-width: 100%!important;
	}

	#header img,
	img.home-image,
	img {
		height: auto;
	}
	
	.google-search {
		width: 100%;
		margin: 2px 0px 2px 0px;
	}

	#side-menu {
		background: none;
		padding: 0px!important;
		padding: 0px!important;
		margin: 0px;
		text-align: center;
		width: 100%;
		border: none;
	}

	#side-menu ul {
		float: left; 
		width: 295px;
	}
		
	#container {
		background-image: none;
		background-color: #fff;
		width: 100%;
	}
	
	#content {
		width: 100%;
	}

	.responsive-menu-icon {
		background:#75797e;
		cursor: pointer;
		display: block;
		text-align: center;
		padding: 5px;
	}

	.responsive-menu-icon::before {
		content: "MENU ";
	}
	
	.responsive-menu {display: none;}

	.responsive-menu li {
		width:100%;
		float:left;
		list-style: none;
		padding: 0px!important;
	}

	.responsive-menu li:first-child {
		border-top: 1px solid #333!important;
	}

	.responsive-menu li:last-child {
		margin-bottom: 10px!important;
	}

	.responsive-menu li a {
		display: block;
		background:#75797e;
		padding:5px 10px 5px 10px;
		text-decoration: none;
		border-bottom: 1px dotted #fff;
		color: #fff;
	}

	.responsive-menu li a:hover {
		background-image: none!important;
		background:#999;
		color: #333;
	}
	
	#side-menu h2,
	#side-menu h3 {
		display: none
	}
	
	p.results {
		margin-left: 10px;
		margin-top: 10px;
	}
}

/* Smaller computers 900 ----------- */
@media only screen 
and (max-width : 900px) {

	#side-menu ul {
		float: left; 
		width: 245px;
	}

}

/* Old computers 800x600 ----------- */
@media only screen 
and (max-width : 800px) {
	
	table.category-list td {
		display: block;
	}
	
	#side-menu {
		background: none;
		padding: 0px!important;
		padding: 0px!important;
		margin: 0px;
		text-align: center;
	}
	
	#side-menu ul {
		width: 211px;
	}

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	#side-menu ul {
		width: 245px;
	}

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	#side-menu ul {
		width: 211px;
	}

}

/* Android in Landscape ----------- */
@media only screen
and (max-width: 720px)
and (orientation : landscape) {
	
	#side-menu ul {
		width: 145px;
	}
}

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

	.region-map-center {display: none;}
	
	#___gcse_0 {
		width: 99%!important;
		margin-left: 1%;
	}
	
	#vert-col-one,
	#vert-col-two,
	#vert-col-three {
		display: block;
		width: 100%;
	}
	
	.listing-text {
		margin-left: 0px; 
		clear: both; 
		width: 100%;
	}
	
	#icons {
		margin-left: 0px;
	}

	.vert-half-left,
	.vert-half-right {width: 100%!important; display: block; clear: both; margin-bottom: 10px;}

	#social {float: none!important; text-align: center;}

}

/* iPhone 2-4 (landscape) ----------- */
@media only screen 
and (max-width : 480px) { 
	
	#side-menu ul {
		width: 105px;
	}

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (max-width : 321px) {

	#container,
	#form,
	table,
	img {
		max-width: 280px!important;
	}
	
	#header img {
		width: 280px!important;
		height: 42px!important;
	}
	
	.listing h2.client-name {clear: both;}
	
	#side-menu ul {
		width: 95px;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px)
and (orientation : portrait) {
	
	#container,
	#form,
	table,
	img {
		max-width: 280px!important;
	}
	
	#header img {
		width: 280px!important;
		height: 42px!important;
	}
	
	#inner-content {
		width: 250px!important;
	}
	
	.listing h2.client-name {clear: both;}
	
	#side-menu ul {
		width: 100%; 
		float: none;
		margin-left: -10px
	}
	
	#icons {
		line-height: 20px;
	}

}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	
	#inner-content {
		width: 250px!important;
	}
	
	.listing h2.client-name {clear: both;}
	
	#side-menu ul {
		width: 100%; 
		float: none;
		margin-left: -10px
	}
	
	#icons {
		line-height: 20px;
	}
	
}

@media screen and (min-width: 993px) {
	.responsive-menu-icon {
		display: none;
	}
}