@charset "UTF-8";
/* CSS Document */

#head_image {height: 300px; margin: 0 0 -5px 0;}

.logo {width:200px; margin: 0 0 -5px 0;}
.text_header {width: 65%; margin: 60px 10% 40px 0;}

h3 {font-size:140%;}

.item_container {padding: 20px 4% 30px;}

.image_container {padding: 0 0 20px;}

.highlight {float:left; margin: 5px 1% 15px 3%;}

.photo_r500, .photo_r550, .photo_l550, .photo_l500 {width:450px; margin-top: 20px;}
.photo_r {width:300px; float:right; margin: 10px 0 0 30px;}
.image_center {width: 80%; margin: 40px 10% 30px;}

	.one_col {margin:20px 0 0;}
	.six_col {width:14.5%; margin: 0 1%; float:left;}

.divider3 {width:60%; margin: 25px 20% 0;}

.googlecal {
        position: relative;
        padding-bottom: 75%; /* 4:3 ratio*/
        height: 0;
        overflow: hidden;}

.googlecal iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;}

.newsletter {width: 80%; margin: 0 10% 0 0;}

#content {width: 100%; margin: 10px 20px 50px;}

#footer_content {margin: 30px 30px 40px;}

  nav {text-align: left; font-size:100%; margin: 0 0;}
  nav ul { padding:0 0 0 5px;}
  nav:hover ul {margin-top:0;}
  nav ul li {display:none; margin: 0; top:0;}  
  nav:hover li {display:block; list-style: outside none none;}
  nav ul ul {margin-left:225px;}
  nav ul ul li { }
  nav a, nav a:link, nav a:visited {color:#fff; padding:10px 15px; margin:0 auto 0 0;} 
  nav a:hover {background-color: #022271;}

.submenu {font-size:90%;}
.submenu a, .submenu a:link, .submenu a:visited {background-color: #022271; padding:12px 20px;}
.submenu a:hover {color:#fff; background-color: #0241dd;}	

.about {margin: 0 0 0 119px; width: auto; top: 77px;}

.menu {display:inline-block;}	


@media (max-width: 850px) {
.text_header {width: 65%; margin: 70px 10% 40px 0;}
header h1 {font-size:275%;}
header h2 {font-size:200%;}
	
.two_col {width:60%; margin: 0 15% 30px; padding: 20px; float:none;}

	.three_col {width:90%; margin: 0;}
}


@media (max-width: 800px) {
.text_header {width: 66%; margin: 70px 7% 40px 0;}
}


@media (max-width: 750px) {
#head_image {height: 251px; margin: 0 0 -2px 0;}
.logo {width: 168px; margin: 0 0 -5px 0;}
.text_header {width: 65%; margin: 55px 9% 40px 0;}
header h1 {font-size:260%;}
header h2 {font-size:190%;}	

.three_col_index {width:50%; margin: 0 25% 40px; height: auto;}
	
.photo_r500, .photo_r550, .photo_l550, .photo_l500 {float:none; width:70%; margin: 20px 15% 0;}
.photo_l, .photo_r {float:none; width:60%; margin: 30px 20% -10px;}
.image_center {width: 90%; margin: 40px 5% 30px;}
	
#footer .two_col {width:100%; margin: 0 0 30px; padding: 20px 0 0 0; float:none;}
.social_foot {float: right; margin: 10px 30px 0 0;}
.copyright {text-align: left;}
	
	.s_hidden {visibility: hidden; position: absolute;}
}


@media (max-width: 710px) {
.logo {width: 160px; margin: 11px 0 -5px 0;}
.text_header {width: 70%; margin: 55px 6% 40px 0;}
	
.video_container {margin:0; border-bottom:none; padding: 0}
.video {width: 100%; margin: 20px 0 0;}
}


@media (max-width: 667px) {
	.c3 {width: 97%;} /*nav*/
	nav {text-align: left; padding: 0 0 0 3%;}

#head_image {height: 220px;}
	
.logo {width: 140px; margin: 10px 0 -5px -20px;}
.text_header {width: 72%; margin: 42px 7% 40px 0;}
header h1 {font-size:250%;}
header h2 {font-size:180%;}	

.three_col_index {width:60%; margin: 0 20% 40px; height: auto;}
	
.photo_r500, .photo_r550, .photo_l550, .photo_l500 {float:none; width:100%; margin: 20px 0 0;}
.photo_l, .photo_r {float:none; width:70%; margin: 30px 15% -10px;}
.photo_r300, .photo_l300 {float:none; width:60%; margin: 0 20% 10px;}
.image_center {width: 100%; margin: 40px 0 30px;}

.two_col {width:70%; margin: 0 10% 30px; padding: 20px; float:none;}

.three_col {width:100%; margin: 0 0 40px; float:left;}
	
.newsletter {width: 90%; margin: 0;}
}


@media (max-width: 615px) {
.text_header {width: 65%; margin: 25px 10% 40px 0;}
}


@media (max-width: 570px) { 
.social_head {right: 5%; top: 244px;}
.social_head img {width: 28px;}
	
.item_container {padding: 20px 30px 30px;}
	
.two_col {width:80%; margin: 0 5% 30px; padding: 20px; float:none;}
		
.photo_l, .photo_r {float:none; width:80%; margin: 30px 10% -10px;}
.photo_r300, .photo_l300 {float:none; width:70%; margin: 0 15% 10px;}
.photo_r250, .photo_l250 {float:none; width:60%; margin: 30px 20% -10px;}
	
.newsletter {width: 100%; margin: 0;}
}


@media (max-width: 540px) {	
.photo_r550, .photo_l550, .photo_l500 {float:none; width:90%; margin: 20px 5% 0;}
}


@media (max-width: 525px) {
nav {text-align: left; padding: 0 0 0 3%;}

.three_col_index {width:70%; margin: 0 15% 40px;}
}


@media (max-width: 505px) {
.social_head {right: 5%; top: 224px;}
	
#head_image {height: 200px;}

.logo {width: 130px; margin: 5px 0 -5px -40px;}
.text_header {width: 65%; margin: 10px 10% 0 0;}
header h1 {font-size:250%;}
header h2 {font-size:160%;}	
}


@media (max-width: 460px) {
.social_head {right: 5%; top: 198px;}
.social_head img {width: 28px;}
	
#head_image {height: 175px;}
	
.logo {width: 117px; margin: 0 0 -5px -40px;}
.text_header {width: 68%; margin: 10px 10% 0 0;}
header h1 {font-size:210%;}
header h2 {font-size:150%;}
	
.photo_r500, .photo_r550, .photo_l550, .photo_l500 {float:none; width:100%; margin: 20px 0 0;}
.photo_l, .photo_r {float:none; width:90%; margin: 30px 5% -10px;}
.photo_r300, .photo_l300 {float:none; width:80%; margin: 0 10% 10px;}
.photo_r250, .photo_l250 {float:none; width:80%; margin: 30px 10% -10px;}	
	
.three_col_index {width:80%; margin: 0 10% 40px;}
	
.social_foot {float: right; margin: 10px 0 0 0;}
}


@media (max-width: 430px) {
.three_col_index {width:90%; margin: 0 5% 40px;}

.photo_sm {float:none; 	width:125px; margin:30px 30% -10px;}
}


@media (max-width: 400px) {	
.text_header {width: 75%; margin: 10px 5% 0 0;}

 nav {font-size:95%; margin: 0 0;}
.about {margin: 0 0 0 113px; width: auto; top:30px;}
	
.photo_l, .photo_r {float:none; width:100%; margin: 30px 0 -10px;}
.photo_r300, .photo_l300 {float:none; width:100%; margin: 0 0 10px;}
.photo_r250, .photo_l250 {float:none; width:100%; margin: 30px 0 -10px;}		
}

@media (max-width: 384px) {	
.logo {width: 117px; margin: 0 0 -5px -45px;}
.text_header {width: 75%; margin: 10px 5% 0 0;}
}

@media (max-width: 364px) {	
.logo {width: 113px; margin: 7px 0 -5px -47px;}
.text_header {width: 73%; margin: 10px 7% 0 0;}
}

@media (max-width: 330px) {	
.logo {width: 110px; margin: 10px 0 -5px -47px;}
.text_header {width: 75%; margin: 10px 5% 0 0;}
}