/************************************************************************************
smaller than 5000
*************************************************************************************/
@media screen and (max-width: 500px) {
/**********************************
General Styling
***********************************/
html {
	height: 100%;
}
#banner {
display:none;
}
body#home {
	background: url(../images/menu_background_mobile.jpg) repeat-x #fff;
	width: 100%;
}
body#page {
	background: url(../images/menu_background_mobile.jpg) repeat-x #fff;
	width: 100%;
}
#content {
	margin: 10px 0 0 0;
}
#content H1 {
	margin: 5px 0;
	font-size: 40px;
	color: #003;
	font-family: 'Raleway', sans-serif;
	width: 95%;
}
#content H2 {
	font-size: 26px;
	color: #039;
	font-family: 'Raleway', sans-serif;
	width: 95%;
	text-align: left;
}
#content .columns {
	width: 100%;
	font-size: 1.5em;
	text-align: justify;
}
#contenttext {
	float: right;
	width: 100%;
}
#contenttext img {
	float: none;
	width: 99%;
	padding: 0 10px 0 0;
	margin-bottom: 10px;
}
#contenttext p {
	font-size: 1.5em;
	width: 99%;
	text-align: justify;
}
#categories {
	float: left;
	width: 95%;
	margin: 20px auto;
}
#categories ul {
	padding-left: 0px;
	list-style-type: none;
	text-align: center;
}
#categories ul li {
	margin: 10px auto;
	border: #999 solid 1px;
	padding: 8px 0;
	box-shadow: 1px 2px 2px #888888;
	border-radius: 10px;
	-moz-border-radius: 10px; /* Old Firefox */
	background-image: -webkit-linear-gradient(bottom, #ccc 0%, #ededed 49%, #fff 50%, #fff 100%);
	background-image: -moz-linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #555 50%, #555 100%);
	background-image: -ms-linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #555 50%, #555 100%);
	background-image: -o-linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #fff 50%, #555 100%);
	background-image: linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #fff 50%, #555 100%);
}
#categories ul li a {
	text-decoration: none;
	font-size: 1.5em;
	color: #000;
	display: block;
}
#categories ul li a:hover {
	color: #006;
	text-decoration: none;
	font-weight: bold;
	background-image: -webkit-linear-gradient(bottom, #fff 0%, #fff 49%, #fff 50%, #ededed 100%);
	background-image: -moz-linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #555 50%, #555 100%);
	background-image: -ms-linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #555 50%, #555 100%);
	background-image: -o-linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #fff 50%, #555 100%);
	background-image: linear-gradient(bottom, #e2e2e2 0%, #fff 49%, #fff 50%, #555 100%);
}
.push {
	height: 6em;
	clear: both;
}
footer {
	height: 6em;
	background: url(../images/footer.jpg);
	width: 100%;
}
#footercontent {
	margin: 0 auto;
	width: 100%;
	color: #CCC;
	padding: 20px 0;
	text-align: center;
}
#headerright {
	float: right;
	width: 50%;
	margin: 0;
	padding: 0;
}
#headerright p {
	display: none;
}
#logo {
	background-size: 100%;
	width: 150px;
	margin:0;
	padding:0;
}
.menubox1 {
	display: none;
}
.menubox2 {
	display: none;
}
.menubox3 {
	display: none;
}
.topclear{
	clear:none;
}
#wrapper {
	width: 95%;
	padding: 10px;
}
/**********************************
Contact Us page
***********************************/
#content .contactleft {
	width: 100%;
	float: left;
}
#content .contactleft p {
	font-size: 1.5em;
	text-align: justify;
}
#content .contactleft ul li {
	font-size: 26px;
	list-style-type: none;
	padding: 5px 0;
}
#content .contactleft ul li a {
	text-decoration: none;
	color: #0553a5;
}
#content .contactleft ul li a:hover {
	text-decoration: underline;
	color: #ec1a33;
}
#content .contactleft ul {
	padding-left: 0px;
}
#content .contactleft ul img {
	float: left;
	padding-right: 15px;
}
#content .contactright {
	width: 100%;
}
.red {
	color: #F00;
}
/**********************************
Services page
***********************************/
#content .services {
	width: auto;
}
#content .services p {
	font-size: 1.5em;
}
#content .services img {
	margin-right: 0px;
	float: none;
	width: 99%;
	height: auto;
	margin-bottom: 2em;
}
#content .services H2 {
	font-size: 2em;
	color: #039;
	font-family: 'Raleway', sans-serif;
	width: 99%;
	text-align: left;
	padding-bottom: .5em;
	margin-bottom: 0;
}
#content H3 {
	font-size: 2.5em;
	color: #039;
	font-family: 'Raleway', sans-serif;
	width: 95%;
	text-align: justify;
}
#productout {
	border: #CCC 1px solid;
	border-radius: 5px;
	-moz-border-radius: 5px; /* Old Firefox */
	padding: 10px;
	margin-top: 0px;
	width: 99%;
	display: inline;
}
.productintro {
	width: 95%;
	float: none;
	margin-right: 0px;
	margin-bottom: 30px;
	border-top-style: double;
	padding: 20px 0;
	border-bottom-style: double;
	text-align: justify;
	font-size: 1.3em;
}
.product {
	width: 95%;
	margin: 0 25px 0 0;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	border-bottom-style: dotted;
	border-bottom-width: thin;
	padding: 10px 0;
	margin: 5px 0;
}
.product img {
	width: 70%;
	height: auto;
}
<!--
Start of Goggle Search Bar
-->
#search {

}
#search input[type="text"] {
	margin-top: 10px;
	width: 20%;
	display:none;
}
#search input[type="text"]:focus {
	width: 25%;
}
<!--End of Goggle Search Bar--> 
/************************************************************************************
Navigation
*************************************************************************************/
	/* nav-wrap */
	#nav-wrap {
	position: relative;
	margin:0;
	padding:0;
}
/* menu icon */
#menu-icon {
	margin-top: -15px;
	color: #fff;
	width: 42px;
	height: 35px;
	background: #0353A5 url(../images/menu-icon.png) no-repeat 10px center;
	padding: 8px 10px 0 42px;
	cursor: pointer;
	border: solid 1px #666;
	display: block; /* show menu icon */
}
#menu-icon:hover {
	background-color: #000;
}
#menu-icon.active {
	background-color: ##0353A5;
}
/* main nav */
#nav {
	clear: both;
	position: absolute;
	top: 50px;
	right: 5px;
	width: auto;
	z-index: 10000;
	padding: 5px;
	background: #f8f8f8;
	border: solid 1px #999;
	display: none; /* visibility will be toggled with jquery */
}
#nav li {
	clear: both;
	float: left;
	margin: 5px 0 5px 5px;
	border: 0px;
	display:block;
}
#nav a, #nav ul a {
	font: inherit;
	background: none;
	padding: 0;
	color: #666;
	border: none;
	
}
#nav a:hover, #nav ul a:hover {
	background: #003;
	color: #fff;
	display:block;
}
/* dropdown */
#nav ul {
	width: auto;
	position: static;
	border: none;
	background: inherit;
}
#nav ul li {
	margin: 3px 0 3px 15px;
}
}
 @media screen and (min-width: 500px) {
/* ensure #nav is visible on desktop version */
#nav {
	display: block !important;
}
}