/*Styles for screen 820px and lower*/
@media screen and (max-width: 820px) {

	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #660000;
		border-right: 1px solid #660000;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
	}

	#left-col {
		width: 98%;
	}
	#nav {
	width: 100%;
	}
	.left-col {
	width: 98%;
	float: none;
	clear: left;
	}
	.left { 
		text-align: center;
	}

}

/*Styles for screen 820px and lower*/
@media only screen and (max-width : 820px) {
	nav {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #660000;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #99ccff;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
	color: #E81919;
		content:"";
		background: url('') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}
/*Smartphone*/
@media only screen and (max-width : 360px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #660000;
	}
}
@media screen and (max-width:320px) {

}
	@media 
	only screen and (max-width: 940px),
	(min-device-width: 940px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block;
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #660000; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #660000; 
			position: relative;
			padding-top: 10px; 
			padding-left: 10px; 
			padding-right: 10px; 
			padding-bottom: 10px; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
			.head {
	font-size: 46px;
	height: 170px;
	}
	h1 { font-size: 40px; padding: 5px; }
	h2 { font-size: 30px; padding: 2px; }
		.img-lflt {
	max-width: 100%;
	width: 140px;
	}
	}

@media screen and (max-width: 820px) 	{
	
	.head {
	font-size: 44px;
	height: 170px;
	}
	h1 { font-size: 40px; padding: 5px; }
	h2 { font-size: 30px; padding: 2px; }
		.img-lflt {
	max-width: 100%;
	width: 140px;
	}
}
@media screen and (max-width: 780px) 	{
	.head {
	font-size: 42px;
	height: 150px;
	}
	h1 { font-size: 36px; padding: 5px; }
	h2 { font-size: 30px; padding: 2px; }
		.img-lflt {
	max-width: 100%;
	width: 140px;
	}
}
@media screen and (max-width: 780px) 	{
	.head {
	font-size: 38px;
	height: 140px;
	}
	h1 { font-size: 36px; padding: 5px; }
	h2 { font-size: 30px; padding: 2px; }
		.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 120px;
	}
}
@media screen and (max-width: 670px) 	{
	.head {
	font-size: 36px;
	height: 130px;
	}
	h1 { font-size: 30px; padding: 4px; }
	h2 { font-size: 30px; padding: 2px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 110px;
	}
}
@media screen and (max-width: 630px) {
	.head {
	font-size: 34px;
	height: 130px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 30px; padding: 2px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 100px;
	}
}
@media screen and (max-width: 590px) {
	.head {
	font-size: 30px;
	height: 120px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 30px; padding: 2px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 90px;
	}
}
@media screen and (max-width: 530px) {
	.head {
	font-size: 28px;
	height: 110px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 30px; padding: 2px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 80px;
	}
}
@media screen and (max-width: 500px) {
	.head {
	font-size: 26px;
	height: 100px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 30px; padding: 2px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 70px;
	}
	nav{
	font-size: 18px;
	}
}
@media screen and (max-width: 440px) {
	.head {
	font-size: 22px;
	height: 90px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 30px; padding: 2px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 60px;
	}
}
@media screen and (max-width: 390px) {
	.head {
	font-size: 18px;
	height: 80px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 30px; padding: 2px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 50px;
	}
		nav{
	font-size: 16px;
	}
}
@media screen and (max-width:340px) {
	.head {
	font-size: 16px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 45px;
	}	
}
@media screen and (max-width:310px) {
	.head {
	font-size: 14px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 40px;
	}
	nav{
	font-size: 14px;
	}	
}
@media screen and (max-width:280px) {
	.head {
	font-size: 13px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 40px;
	}	
}
@media screen and (max-width:263px) {
	.head {
	font-size: 12px;
	height: 60px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 35px;
	}	
}
@media screen and (max-width:250px) {
	.head {
	font-size: 10px;
	height: 50px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 30px;
	}	
}
@media screen and (max-width:220px) {
	.head {
	font-size: 8px;
	height: 45px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 20px;
	}	
}
@media screen and (max-width:193px) {
	.head {
	font-size: 7px;
	height: 40px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	.img-lflt {
	margin-left: 0px;
	max-width: 100%;
	width: 20px;
	}	
}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}