html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: .9em;
		font: inherit;
		vertical-align: baseline;
	}
	
	html {
	    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	}
		
	body {
		margin: 0;
		background: #f3f3f3;
		font-size: 14px;
	}
	
	.header {
		width: 100%;
		height: 100px;
		background: white;
		position: relative;
	}
	
	.content {
		width: 1024px;
/*		background: red;*/
		margin: 0 auto;
	}
	
	.header_content {
		width: 1024px;
		margin: 30px auto;

	}
	
	.header_content {
		position: absolute;
		bottom: 20px;
		left: 50%;
		margin: 0 0 0 -512px;
		text-transform: uppercase;
	}
	
	.header ul {
		float: right;
		list-style: none;
	}
	
	.header h1 {
		float: left;
		margin-top: .15em;
	}
	
	.header ul li {
		float: left;
		margin: .3em 0 0em 20px;
	}
	
	.header ul li.active {
		border-bottom: 1px solid #21a1d3;
	}
	
	.header ul a {
		color: #21a1d3;
		text-decoration: none;
		font: 500 .9em "ff-basic-gothic-web-pro-1", "ff-basic-gothic-web-pro-2", georgia;
	}
	
	.header h1 a {
		color: black;
		text-decoration: none;
	}
	
	.header ul a:hover {
		color: black;
	}
	
	.header ul li:hover {
		border-color: black;
	}
	
	.content a {
		color: #178ebb;
		text-decoration: none;
		
	}
	
	.content a:hover {
		color: #1c6888;
		text-decoration: underline;
	}
	


	
	.headerimg {
		width: 1024px;
/*		background: red;*/
		margin: 30px auto 0 auto;
		display: block;
		border: 1px solid #c5c5c5;
	}
	
	
	
	h2 {
		font: 300 2em/2.3em "chaparral-pro-1","chaparral-pro-2", arial;
		color: #333;
		text-align: center;
		border-bottom: 1px solid #333;
		text-transform: uppercase;
	}
	
	h1 {
		font:  500 1.1em "ff-basic-gothic-web-pro-1", "ff-basic-gothic-web-pro-2", georgia;
	}
	

	
	.col_l {
		margin-top: 20px;
		width: 636px;
		float: left;
	}
	
	.col_r {
		margin-top: 20px;
		width: 308px;
		margin-left: 80px;
		float: left;
	}
	
	.col_l_n {
		margin-top: 20px;
		width: 308px;
		float: left;
	}
	
	.col_r_w {
		margin-top: 20px;
		width: 696px;
		margin-left: 20px;
		float: left;
	}
	
	.c_2, .c_3, .c_4, .c_5, .c_8 {
		float: left;
		margin-left: 20px;
		margin-bottom: 10px;
	}
	
	.c_2 {
		width: 152px;
	}
	
	.c_4 {
		width: 328px;
	}
	
	.c_5 {
		width: 415px;
	}
	
	.c_3 {
		width: 241px;
	}
	
	.c_8 {
		width: 676px;
	}
	
	ul.homegrid a {
		color: black;
	}
	

	
	.content {
		font: 1em/1.3em arial;
	}
	

	p {
		margin-bottom: .4em;
		color: #444;
	}
	
	h3 {
		font:  500 1em "ff-basic-gothic-web-pro-1", "ff-basic-gothic-web-pro-2", georgia;
		text-transform: uppercase;
		padding-bottom: .1em;
		margin-bottom: .6em;
	}
	
	h3.line {
		font:  500 1em "ff-basic-gothic-web-pro-1", "ff-basic-gothic-web-pro-2", georgia;
		border-bottom: 1px solid #bebebe;
		padding-bottom: .1em;
		text-transform: uppercase;
		color: black	;
	}
	
	div.line {
		width: 100%;
		border-bottom: 1px solid #333;
		margin: 20px 0;
	}
	
	.clear {
		clear: both;
	}
	
	.content ol {
		counter-reset:li;
		list-style: none;
		font: 1em/1.3em arial;
		margin-top: .6em;
	}
	
	.content ol li {
		position:relative; /* Create a positioning context */
		margin:0 0 2px 1.5em; /* Give each list item a left margin to make room for the numbers */
		padding:1px 4px; /* Add some spacing around the content */
		list-style:none; /* Disable the normal item numbering */
	}
	
	.content ol  li:before {
		content:counter(li); /* Use the counter as content */
		counter-increment:li; /* Increment the counter by 1 */
		/* Position and style the number */
		position:absolute;
/*		top:-2px;*/
		left:-1.5em;

		width:1.3em;
		/* Some space between the number and the content in browsers that support
		   generated content but not positioning it (Camino 2 is one example) */
		margin-right:8px;
		/*padding:4px;*/
		color:#fff;
		background:#666;
/*		font-weight:bold;*/
		font: 1em/1.3em Arial;
		text-align:center;
		border-radius: 25px;
		
	}
	
	.content ul {
		list-style: none;
		margin-bottom: 1.5em;
		font: .95em/1.3em arial;
	}
	
	.content ul li {
		margin: .1em 0 .8em 0;
/*		border-left: 1px solid #333;
		padding-left: 10px;*/
	}
	
	.col_r div.line {
		display: none;
	}

	
	h4 {
		font-weight: bold;
	}
	
	div.img {
		background: green;
		width: 100%;
		height: 270px;
		overflow-y: hidden;
	}
	
	div.img IMG {
		width: 100%;
		vertical-align: middle;
	}
	
/*	div.homegrid {
		width: 50%;
		background: red;
		height: 400px;
		position: absolute;
	}

	div.test {
		width: 102.75%;
		background: green;
		height: 50px;
	}

	div.homegrid ul {
		list-style: none;
		width: 110%;
	}

	div.homegrid ul li{
		float: left;
		width: 31.5%;
		margin-right: 2.75%;
		height: 60px;
		background: gray;
		position: relative;
	}*/
	
	
	ul.homegrid a:hover div.img {
		opacity: .9;
	}
	
	ul.homegrid a:hover p, ul.homegrid a:hover{
		text-decoration: none;
		color: #1c6888;
	}
	
	
	ul.homegrid {
		list-style: none;
		width: 1044px;
	}

	ul.homegrid li {
		width: 241px;
		margin-right: 20px;
		float: left;
		border-bottom: 1px solid #333;
		margin-bottom: 2em;
	}
	


	ul.homegrid div.img {
		width: 100%;
		background: #dcdcdc;
		border: 1px solid #c6c6c6;
		opacity: 1;

	}
	
	ul.homegrid li h3 {
		font-size: 1.1em;
		margin: 1em 0 .1em 0;
	}
	
	ul.homegrid li p {
		margin-bottom: 1em;
	}
	
	p.caption {
		font: .9em / 1.3em arial;
		margin: .8em 0 .8em 0;
	}
	

	
	.c_2 IMG, .c_4 IMG, .c_3 IMG, .c_5 IMG, .c_8 IMG, .c_8 VIDEO {
		width: 100%;
		border: 1px solid #c5c5c5;
	}
	
	IMG.noBorder {
		border: 0px;
	}
	
	#overlay {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
	}	
		
	#imgbox {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-position: center; 
	    /*background-image: url("");*/
	    background-repeat: no-repeat;
	    background-size: contain;
		background-color: rgba(0,0,0,.9);
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#captionbox {
		width: 100%;
		background: rgba(255,255,255,.95);
		position: absolute;
		bottom: 0px;
		box-sizing: border-box;
		padding: 10px;
		z-index: 1000;
	}
	
	#prev, #next{
		opacity: .5;
		background: rgba(0,0,0,.2);
		color: white;
		height: 2em;
		font: 800 4em/2em "ff-basic-gothic-web-pro-1", "ff-basic-gothic-web-pro-2", georgia;
		padding: 0;
		width: 1em;
		text-align: center;
		position: absolute;
		top: 50%;
		margin-top: -.75em;
		cursor: pointer;
		z-index: 1000;
		
	}
	
	#prev {
		left: 0;
	}
	
	#next {
		right: 0;
	}

	
	#prev:hover, #next:hover {
		background: rgba(0,0,0,.4);
		opacity: 1;
	}
	
	#prev:active, #next:active {
		background: rgba(0,0,0,.6);
		opacity: 1;
	}
	
	@media only screen and (max-width: 1054px)  {
		
		
		.header_content {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
		}
		
		.content {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
		}
		
		.col_l {
			width: 66%;
		}
		
		.col_r {
			margin-left: 2%;
			width: 32%;
		}
		
		.headerimg {
			width: 100%;
			margin-top: 15px;
		}
		
		.header {
			height: 60px;
		}
		

		ul.homegrid {
			width: 100%;
		}
		
		.col_l_n {
			width: 32%;
		}
		
		.col_r_w {
			margin-left: 2%;
			width: 68%;
			margin-right: -2%;
			overflow-x: clip;
		}
		
		.c_4 IMG {
			width: 100%;
		}
		
		.c_2, .c_3, .c_4, .c_5, .c_8 {
			float: left;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 1%;
			padding-right: 3%;
			box-sizing: border-box;
			
		}
		
		.c_2 {
			width: 25%;
		}
	
		.c_4 {
			width: 50%;
		}
	
		.c_5 {
			width: 62.5%;
		}
	
		.c_3 {
			width: 37.5%;
		}
	
		.c_8 {
			width: 100%;
			margin-right: 0px;
		}
		
/*		.last {
			margin-right: 0px;
		}*/
	
		.content {
			font: 1em/1.3em arial;
		}
		
	}
	
	@media only screen and (min-width: 769px) and (max-width: 1054px)  {




		ul.homegrid li {
			width: 32%;
			margin-right: 2%;
		}
		
		ul.homegrid li:nth-child(3n+0) {
			margin-right: 0px;
		}
		


		
		
/*		.content {
			width: 100%;
		}

		.header .content {
			left: 0;
			margin: 0;
		}

		.header h1 {
			margin-left: 15px;
		}

		.header ul {
			margin-right: 15px;
		}*/
	}
	
	@media screen and (max-width: 768px) {
		
		body {
		}
		
		.col_l, .col_l_w {
			float: none;
			width: 100%;
			
		}
		
		.col_r, .col_r_w {
			float: none;
			width: 103%;
			margin-left: 0;
			margin-right: -2%;
		}
		
	
		
		.clear {
			clear: both;
		}
		
	
		
/*		.col_r, .col_r_w {
			float: none;
			width: 100%;
			margin-left: 0px;
		}*/
		
/*		.col_r, .col_r_w {
			background: blue;
			float: none;

		margin-left: 2%;
		width: 104%;
		margin-right: -2%;
		overflow-x: clip;
		}*/
		
/*		.c_8 {
			padding-right: 0px;
		}*/
	}
	
	@media screen and (min-width: 481px) and (max-width: 768px)  {




	

		
		ul.homegrid li {
			width: 49%;
			margin-right: 2%;
		}
		
		
		
		ul.homegrid li:nth-child(2n+0) {
			margin-right: 0px;
		}
		
		
		.col_r div.line, .col_r_w div.line {
			display: block;
		}

		.header_content {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
		}
		
		.content {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
		}
		
		.col_l, .col_l_n {
			float: none;
			width: 100%;
			
		}
		
		.col_r, .col_r_w {
			float: none;
		
		}
		
		.headerimg {
			width: 100%;
		}
		

		
/*		.content {
			width: 100%;
		}

		.header .content {
			left: 0;
			margin: 0;
		}

		.header h1 {
			margin-left: 15px;
		}

		.header ul {
			margin-right: 15px;
		}*/
	}
	
	@media screen and (max-width: 480px)  {
	
		.col_l, .col_l_n {
			float: none;
			width: 100%;
			
		}
		
		.col_r, .col_r_w {
			float: none;
			width: 100%;
			margin-left: 0px;
		}

		
		ul.homegrid li {
			width: 100%;
			
		}
		
		.header h1 {
			float: none;
		}
	
		.header ul {
			float: none;
		}
		
		.header ul li {
			margin: .5em 20px 0 0;
		}
		
		.header_content {
			position: absolute;
			bottom: .5em;
		
		
	}