/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

.wrap { width: 100%; }
ul#nav li { width: 16.5%; }

.sliderview { width: 580px; }
.sliderrow .wrap { width: 690px; margin: 0 auto; }

h2, h3 {
	width: 90%;
	padding: 0 5%;
}
h3 { padding: 10px 5%; }
p {
	padding: 0 5%;
	width: 90%;
}

textarea { width: 310px; }

.portfolio-slider { width: 80%; padding: 0 10%; }
.portfolio-block {
	width: 100%;
}
.portfolio-link {
	width: 16%;
	margin: 15px 2%;
	font-size: 12px;
}

.portfolio-detail-image {
	width: 48%;
}
.portfolio-detail-description {
	width: 48%;
	margin-left: 4%;
}
.portfolio-detail-text {
	width: 90%;
	padding: 10px 5%;
}

.product-block { width: 48%; float: left; margin: 10px 1% 0 }
.product-block.odd { margin: 10px 1% 0 }
.pblockimg { width: 25%; }
.customizebtn {
	width: 70%;
}

h1 .address {
	width: 90%;
	margin: 10px 0 0 0;
	padding: 0 5%;
}

hr {
	width: 90%;
	display: inline-block;
	text-align: center;
	margin: 20px 4%;
}

/************************************************************************************
smaller than 730
*************************************************************************************/
@media screen and (max-width: 730px) {

.sliderview { width: 435px; }
.sliderrow .wrap { width: 545px; margin: 0 auto; }
textarea { width: 20%; }
}

/************************************************************************************
smaller than 700
*************************************************************************************/
@media screen and (max-width: 700px) {
	

}


/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
	.leftblock, .rightblock { float: none; }
	
	.familyowned { display: none; }
	.logo { width: 100px; position: fixed; top: 0; left: 10px; z-index:51; margin-top: 10px; }
	.logo a { width: 100%; float: left; }
	.logo img { max-width: 100%; width: auto; }
	
	.navrow { position: fixed; top: 0; height: 50px; z-index: 50 }
	
	ul#nav { position:absolute; top: 50px; background: #fff; width: 100%; display: none; }
	ul#nav li { width: 100%;float: left; clear: both; text-align: center; }
	ul#nav li a { width: 100%; color: #000; }
	
	.feature {
		margin-top: 50px;
		height: 200px;
	}
	.nextfeature, .prevfeature { display: none; }
	.sliderview { width: 100%; height: auto; margin-top: 50px; padding-top: 0; }
	.slider { clear: both; position: relative; text-align: center; }
	.sliderrow { height: 50px; position:relative; z-index:1; }
	
	.featureitem { float: none; display: inline-block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #fff; }
	
	.msep { 
		display: block;
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
		border-top: 1px solid #2a4768;
		background: rgb(65,125,194); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(65,125,194,1) 0%, rgba(51,97,153,1) 37%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,125,194,1)), color-stop(37%,rgba(51,97,153,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(65,125,194,1) 0%,rgba(51,97,153,1) 37%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(65,125,194,1) 0%,rgba(51,97,153,1) 37%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(65,125,194,1) 0%,rgba(51,97,153,1) 37%); /* IE10+ */
		background: linear-gradient(to bottom, rgba(65,125,194,1) 0%,rgba(51,97,153,1) 37%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#417dc2', endColorstr='#336199',GradientType=0 ); /* IE6-9 */
		float: left; clear: both;
		height: 30px;
		width: 100%;
		margin: 30px 0;
	}
	
	
	.hpcontent {
		margin-top: 50px;
		clear: both;
	}
	
	.footer { clear: both; }
	
	.copyright { width: 100%; text-align: center; }
	.footlinks { width: 100%; text-align: center; margin: 20px 0; }
	
	.sliderrow .wrap { width: 100%; }
	.mobilefamilyowned {
		font-size: 20px; text-align: center; display: block; line-height: 50px;
	}
	
	.toggle { display: block; position: absolute; top: 0; right: 0; width: 30px; height: 24px; padding: 13px 15px; }
	.toggle-bar { height: 4px; background: #fff; width: 100%; margin-bottom: 4px; float: left; clear: both; }
	ul#nav a { color: #000; border-bottom: 1px solid #369; }
	
	.calltoaction { padding-bottom: 10px; }
	.call { font-size: 20px; }
	
	.headernote { clear: both; float: left; }
	
	.product_categories { padding: 0 10px; }
	
	.portfolio-slider { padding: 0; height: auto; }
	.portfolio-block {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.portfolio-link {
		width: 100%;
		margin: 5px 0;
	}
	.portfolio-deets { top: 75%; }
	.portfolio-company { height: 25%; }
	
	.portfolio-detail-image {
		width: 100%;
	}
	.portfolio-detail-description {
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	
	.product-block { width: 96%; float: left; margin: 10px 2% 0 }
	.product-block.odd { margin: 10px 2% 0 }
	.pblockimg { width: 25%; }
	.customizebtn {
		width: 70%;
	}
	
	.product-image {
		width: 96%;
		margin: 20px 2%;
		text-align: center;
	}
	.prod-desc {
		width: 96%;
		margin: 0 2%;
	}
	.pricepoint { margin-bottom: 20px; }
	.pf-label { width: 40%; padding: 5px 5%; }
	.pf-input { width: 90%; padding: 0; margin: 0; }
	
	.pf-input input { width: 90%; padding: 5px 5%; }
	
	.pf-input.tainput { width: 90%; padding: 0 5%; margin: 0; }
	.pf-input.tainput textarea { width: 90%; }
	.pf-submit {
		width: 90%;
		padding: 0 5%;
		margin-top: 20px;
	}
	
	.contactname {
		width: 100%;
	}
	.contactphone, .contactinfo { width: 100%; text-align: center; margin-top: 10px; }
	.contactinfo, .call { margin: 5px 0; }
	.call {
		margin-left: 0;
		width: 100%;
		text-align: center;
		padding: 0;
	}
	
}


/************************************************************************************
smaller than 500
*************************************************************************************/
@media screen and (max-width: 500px) {
	.mobilefamilyowned {
		font-size: 14px;
	}

}

/************************************************************************************
smaller than 300
*************************************************************************************/
@media screen and (max-width: 300px) {
	.mobilefamilyowned {
		display: none;
	}

}