/* Mobile   Narrow single stack (max-width: 320px) -------------------------------------------------------------------------------*/
@media (max-width: 320px) {
	header {
		width: auto;
	}	

	nav {
		width: auto;
	}	

	nav  ul  {
		margin:0px;
		padding:0px 0px 12px 0px;
		height: auto;
		width: 100%;
		text-align: center;
	}	
	
	nav ul li {
		margin-top: 25px;
		margin-left: 0px;
		width: 100%;
	}

	.content {
		width: 100%;
		background-color: white;
		margin:0px;
		padding-top: 0px;
	}	

	.column-text {
		padding-left: 10px;
		padding-right: 10px;
	}

	.vertImageColumn {
		width: 97%;
	}

	/* may not be needed  TEST THIS */
	container_generic  {
		height: auto;
		padding: 0;
		margin-bottom: 15px;
	}

	 container_generic .shadedDarkColumn {
		width: 98%;
		margin-bottom: 10px;
	}
	
	container_2Col {
			height: auto;
			padding: 0px;
		}	

	container_2Col .shadedDarkColumn {
			width:100%;
			height: auto;
			padding: 0px;
			margin: 35px 0px 25px 0px;
		}

	container_2Col .column-text {
		padding-left: 20px;
		padding-right: 20px;
	}

	container_3Col {
			height: auto;
			padding: 0px;
			margin: 0px;
	}

	container_3Col .shadedDarkColumn {
			width:100%;
			height: auto;
			padding: 0px;
			margin: 35px 0px 25px 0px;
	}

	container_3Col .column-text {
		padding-left: 20px;
		padding-right: 20px;
	}

	 .imageBlock {
		height: auto;
		max-width: 320px;
	}	
	
	resume intro_keywords {
	  width: 100%;
	}
	
	.shadedDarkColumn_resume {
	  width: 100%;
	}
	
.shadedDarkColumn_left_resume {
	width: 100%;
	margin-top: 10px;
	margin-right: 1%;
	margin-left: 1%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 0px;
}
		
}

/* Small Tablets  stacks tiles vertically but with a healthy width ----------------------------------------------------------------------*/
@media (min-width: 321px)and (max-width: 767px) {

	.vertImageColumn {
		width: 98%;
	}

	container_generic .shadedDarkColumn {
			width: 96%;
			margin-left: 2%;
			margin-right: 2%;	
		}

	nav ul li {
		float: none;
		margin-top: 28px;
		margin-left: 0px;
		width: 100%;
	}

	nav ul {
		margin:0px;
		padding:0px 0px 12px 0px;
		height: auto;
		width: 100%;
		text-align: center;
	}	
	
	container_2Col .shadedDarkColumn {
			width: 96%;
			margin-left: 2%;
			margin-right: 2%;
		}

	article {
		padding-left: 5px;
		padding-right: 5px;
	}

	container_3Col {
			width: 96%;
			margin-left: 2%;
			margin-right: 2%;
	}

	container_3Col .shadedDarkColumn {
			width:100%;
			height: auto;
			padding: 0px;
			margin: 35px 0px 25px 0px;
	}

	container_3Col .column-text {
		padding-left: 20px;
		padding-right: 20px;
	}

	 .shadedDarkColumn {
		width: 98%;
	}

	 .imageBlock {
		height: auto;
		max-width: 320px;
	}	
	
	resume intro_keywords {
	  width: 50%;
	}
	
	.shadedDarkColumn_resume {
	  width: 98%;
	}
	
	.shadedDarkColumn_left_resume {
	width: 98%;
	margin-top: 10px;
	margin-right: 1%;
	margin-left: 1%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 0px;
}

}

/* Small Desktops  - occurs at the point where the grid is splint into a 2x2 grid -------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1096px) {

	.vertImageColumn {
		width: 48%;
	}
	
	.imageBlock {
		height: auto;
		max-width: 300px;
		margin-left:0px;
		padding-right:1%;
	}		

}