/* CSS Document */


/************************************************************************************
	HEIGHTS
*************************************************************************************/

/************************************************************************************
smaller than 900
*************************************************************************************/
@media screen and (max-height: 900px) {

}


/************************************************************************************
smaller than 450
*************************************************************************************/
@media screen and (max-height: 450px) {

}




/************************************************************************************
	WIDTHS
*************************************************************************************/

/************************************************************************************
smaller than 1210
*************************************************************************************/
@media screen and (max-width:1210px) {
	.wrap {
		width: 100%;
	}
	
	.projectlist {
		width: 96%;
		padding: 0 2%;
	}
	
	h1, .projectcategories h2 {
		width: 96%;
		padding: 30px 2% 20px;
	}
	
	h1:after, .teamlist .person .name:after, .projectcategories h2:after {
		left: 2%;
	}
	
	
	.pagetext {
		width: 96%;
		padding: 0 2%;
	}
	
	.teamlist {
		width: 64%;
		margin-left: 2%;
	}
}	

/************************************************************************************
smaller than 960
*************************************************************************************/
@media screen and (max-width: 960px) {
	.wrap {
		width: 100%;
		overflow: hidden;
	}
	
	p, .pagefoot {
		width: 96%;
		padding: 0 2%;
	}
	
		
	.nav li a {
		font-size: 14px;
	}
	
	.footer {
		font-size: 16px;
		min-height: 50px;
		height: auto;
	}

	.form-row {
		width: 96%;
		margin: 5px 2%;
	}
	
	.pagination.paging {
		display: none;
	}
	.pagination.mobile-page {
		display: block;
		width: 90%;
		margin: 20px 5% 0;
	}
	.catsearch {
		margin-bottom: 10px;
	}
	
	.product-image {
		width: 20%;
	}
	.product-name {
		width: 60%;
		line-height: 30px;
		margin-top: 10px;
	}
	.product-price {
		width: 10%;
		float: right;
	}
	.add-product {
		display: none;
	}
	.product-link {
		width: 100%;
	}
	
	.pg-bar {
		display: block;
		background: #fff;
		color: #808080;
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 10px 0;
		font-family: "opensans";
		font-size: 24px;
		float: left;
		clear: both;
	}
	

}

/************************************************************************************
smaller than 850
*************************************************************************************/
@media screen and (max-width: 850px) {
	.nav li a {
		padding: 0 10px;
	}
	.footer .topfooter span {
		overflow: hidden;
		white-space: nowrap;
	}
}

/************************************************************************************
smaller than 750
*************************************************************************************/
@media screen and (max-width: 750px) {
	
	.nav li a {
		padding: 0 5px;
	}
	
}


/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
	
	h1 { font-size: 28px;}
	
	.mainwrap.indexwrap {
		padding-top: 250px;}
	body {
		background-position: center 200px;
	}
	
	.col4 .locationbox { margin-top: 40px; }
	
	.indexlogo {
		width: 50%;
	}
	
	.header a.logo { height: 40px; margin-top: 5px; margin-left: 2%; width: 48%; }
	.header a.logo img {
		float: left;
	}
	
	.pageheader {
		height: 200px;
	}
	
	.header {
		height: 50px;
		position: fixed;
	}
	.pagelogo {
		height:30px;
		margin: 10px 0;
	}
	
	#main { padding-bottom: 10px; }
	
	
	.searchbar { display: none; }
	
	.pagemain .menu-links, .headcart { display: none; }
	.header .menu-links, .header .mobile-menu { display: block; }
	.mobile-menu {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 30px;
		height: 30px;
		z-index: 50;
	}
	.mobile-menu .line {
		float: left;
		clear: both;
		height: 4px;
		margin: 3px 0;
		background: #999;
		width: 100%;
	}
	.menu-links {
		margin-top: 50px;
	}
	.nav { 
		display: none; 
		width: 100%;
		padding: 0;
	}
	
	.nav li {
		width: 100%;
		clear: both;
		height: auto;
		background: rgba(255,255,255,1);
		border-bottom: 1px solid #999;
		float: left;
	}
	.nav li a { 
		color: #4f4949;
	}
	.nav li.select a { color: #fff; }
	.nav li a:hover { color: #fff; }
	
	.header .nav {
		border-top: 1px solid #999;
	}
	.header .nav li ul {
		top: 0;
		position: relative;
		padding: 0;
		width: 100%;
		float: left;
		border-top: 1px solid #999;
		display: block;
	}
	.header .nav li ul li a {
		text-align: center;	
	}
	.header .nav li ul li:last-child {
		border-bottom: none;
	}

	
	.footer { 
		text-align: center; 
		height: auto;
		margin-top: 0;
	}
	
	
	.col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {
		width: 96%;
		margin: 5px 2%;
	}
	
	.mainwrap { margin-top: 0; min-height: 0; padding-top: 50px; }
	
	
	
	.form-label {
		width: 100%;
	}
	.form-input { width: 100%; }
	.form-input input, .form-input select, .form-input textarea {
		width: 96%;
		padding: 10px 2%;
	}
	.form-input img {
		max-width: 100% !important;
	}
	.form-input input[type="submit"] {
		width: 100%;
		padding: 10px 0;
		height: auto;
	}
	.form-label.securitylabel { display: none; }
	

	span.pcode {
		font-size: 16px;
	}

	.footer .topfooter span {
		white-space: normal;
		
	}
	.footer .topfooter ul.iconlist.right {
		width: 100%;
		margin-bottom: 10px;
	}
	.footer .topfooter ul.iconlist { height: auto; }
	.footer .topfooter ul.iconlist li {
		height: 50px;
		margin: 5px 10px;
	}
	
	ul.footnav {
		width: 100%;
		text-align: center;
	}
	ul.footnav li {
		float: none;
		display: inline-block;
		width: 100%;
	}
	
	.projectcategories .project .sideinfo .now-selling {
		width: 96%;
		padding: 10px 2%;
	}
	
	.projectslider #featureSlider  {
		margin-top: 0;
	}
	.projectslider { height: 200px; }
	
	.projectdetail .downloadbox a {
		padding: 0 2%;
		width: 96%;
		line-height: 40px;
	}
	
	
	
	.locationdetails {
		width: 96%;
		padding: 10px 2%;
	}
	
}


/************************************************************************************
smaller than 400
*************************************************************************************/
@media screen and (max-width: 400px) {
	.pagetext img {

		
		}

	h3 {
		padding: 0 2%;
}

}