/* -----------------------------------
basic layout
----------------------------------- */
.row{
	clear:left;
	overflow: hidden;
	zoom:1; /*for IE*/
	_overflow:visible; /*for IE*/
}
.w-4col, .w-3col, .w-2col, .w-1col, .m-2col, .m-1col, .t-3col, .t-2col, .t-1col, .s-2col, .s-1col{

	padding:.3em;
	/*background:#aaa;*/
	margin-bottom:1em;

/*sets it up as a 1 col structure for mobile*/
}

.container{
		max-width:1100px;
		margin:0 auto;
		background-color:#fff;
		box-shadow:1px 1px 5px rgba(0,0,0, 0.5);
}


/* -----------------------------------
wide
----------------------------------- */

@media ( min-width:60em ){
	.container{
		max-width:1100px;
	}
	.w-4col, .w-3col, .w-2col, .w-1col{
		float:left;
		margin-right:2%; /*2% of containers width, so will shift as you expand/collapse */
		
	}
	.w-4col{
		width:100%;
	}
	.w-3col{
		width:74.5%; /* 100% - 2% / 4*3 = 74.5%*/
	}
	.w-2col{
		width:47%; /* 100% - 2% / 2 = 49% */
	}
	.w-1col{
		width:22%; /* 100% - 2% / 4 = 23.5% */
	}
	.w-omega{
		margin-right:0;
	}

	         /* ------ three columns -------- */

	 .t-3col, .t-2col, .t-1col{
		float:left;
		margin-right:2.2%; /*2% of containers width, so will shift as you expand/collapse */
		
	}
	 .t-3col{
	 	width:100%;
	 }

	 .t-2col{
	 	width: 65.3%;
	 }

	 .t-1col{
	 	width: 30%;
	 }
	
}





/* -----------------------------------
medium
----------------------------------- */

@media (min-width:30em) and (max-width: 60em){

	.m-1col, .m-2col{
		float:left;
		margin-right:4%;
		
	}

	.m-2col {
		width:100%;
	}

	.m-1col{
		width:46%;
	}

	.m-omega{
		margin-right:0;
	}

	/* ------ three columns -------- */

	.t-3col, .t-2col, .t-1col{
		float:left;
		margin-right:2.2%; /*2% of containers width, so will shift as you expand/collapse */
	
	}

	.t-3col{
	 	width:100%;
	 }

	 .t-2col{
	 	width: 64%;
	 }

	 .t-1col{
	 	width: 29%;
	 }
}

/* -----------------------------------
small adjustments
----------------------------------- */

@media (min-width:40em) and (max-width: 60em){

		.w-4col, .w-3col, .w-2col, .w-1col{
		float:left;
		margin-right:2%; /*2% of containers width, so will shift as you expand/collapse */
		
	}
	.w-4col{
		width:100%;
	}
	.w-3col{
		width:74.5%; /* 100% - 2% / 4*3 = 74.5%*/
	}
	.w-2col{
		width:47%; /* 100% - 2% / 2 = 49% */
	}
	.w-1col{
		width:22%; /* 100% - 2% / 4 = 23.5% */
	}
	.w-omega{
		margin-right:0;
	}

/*	.banner{
		background-image:none;
	}*/



}






@media (min-width:30em) and (max-width: 40em){

	.center{
		width:100%;
		text-align:center;
	}


	.s-2col, .s-1col{
		float:left;
		margin-right:2%; /*2% of containers width, so will shift as you expand/collapse */
		margin-bottom:0;
	
	}

	 .s-2col{
	 	width: 90%;
	 }


	 .s-1col{
	 	width: 49%;
	 	margin:1%;
	 }


		 #social{
		 	display:none;
	}


	.banner{
		background-image:none;
		height:12em;
	}


	}
/*------------ nav ----------------*/


	@media (min-width:20em) and (max-width: 40em){

		.container{
			min-width:20em;
		}

	 nav {width:100%; padding:0px;  text-align:center;}
	 nav ul{padding-left:0;}
	nav ul li{ display:block;  padding:1em 0 1em 0; 

		background: #7d7e7d; /* Old browsers */
		background: -moz-linear-gradient(top, #7d7e7d 0%, #3a3939 37%, #3a3939 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(37%,#3a3939), color-stop(100%,#3a3939)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #7d7e7d 0%,#3a3939 37%,#3a3939 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #7d7e7d 0%,#3a3939 37%,#3a3939 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #7d7e7d 0%,#3a3939 37%,#3a3939 100%); /* IE10+ */
		background: linear-gradient(to bottom, #7d7e7d 0%,#3a3939 37%,#3a3939 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#3a3939',GradientType=0 ); /* IE6-9 */}
	
	
	nav ul li a{ font-size:20px; color:#fff;  }

	footer ul{
			padding-left:0;

	 p{
	 	margin:0;

	}

	 #social{
		 	display:none;
	}



}



/*------------ super small ----------------*/

	@media (min-width:20em) and (max-width: 30em){

		
	 	.center{
			width:90%;
			text-align:center;
		}

		 #social{
		 	display:none;
	}


	
	.banner{
		background-image:none;
		height:16em;
	}

	.picture{

		width:20em;
		margin:0 auto;
	}

	
}