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

#head_image_home, #head_image_about, #head_image_retreat, #head_image_signup, #head_image_contact, #head_image_retreat {min-height: 300px;}
#head_image_contact {
	background: #FFFFFF url("images/contact-mobile.jpg") repeat-x left bottom;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;}

.photo_r400 {width:45%; float:right; margin: 5px 0 0 30px;}
.photo_l50p {width:45%; float:left; margin: 20px 30px 0 0;}
.photo_r500 {width:400px; float:right; margin: 5px 0 0 30px;}

h3 {font-size:140%;}

.item_container {padding: 20px 25px 30px;}
.image-center {padding: 0 25px 30px;}

.list_container {width: 50%; float: left; margin: -10px 0 0;}

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

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

.two_col {width:100%; margin: 0; float:none;}

.top_border {border-top: 1px solid #8dc63f; margin-top: 25px; padding-top: 15px;}

  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: #8dc63f;}
  nav a:active {background-color: #4286d7;}

.submenu {font-size:90%;}
.submenu a, .submenu a:link, .submenu a:visited {background-color: #8a4527; padding:12px 20px;}
.submenu a:hover {color:#ccc; background-color: #8a4527;}	

.menu {display:inline-block;}	


@media (max-width: 850px) {
.photo_l400 {width:350px; float:left; margin: 20px 0 0 0;}
}


@media (max-width: 750px) {
h2 {font-size:180%;}
	
.photo_l400 {width:300px; float:left; margin: 20px 0 0 0;}
.photo_r500 {width:350px; float:right; margin: 5px 0 0 30px;}
}


@media (max-width: 700px) {
#head_image_home, #head_image_about, #head_image_signup, #head_image_signup, #head_image_contact, #head_image_retreat {min-height: 250px;}
	
.photo_r400, .photo_l50p {width:60%; float:none; margin: 20px 20% 0;}
	
.list_container {width: 100%; float: none; margin: 5px 0 0;}
}

@media (max-width: 680px) {
.photo_r500 {width:70%; float:none; margin: 5px 15% 0;}
}


@media (max-width: 660px) {
.c3 {width: 97%;} /*nav*/
nav {text-align: left; padding: 0 0 0 3%;}
	
.three_col {width:100%; margin: 0 0 20px; float:left;}
}


@media (max-width: 600px) {
#head_image_home, #head_image_about, #head_image_signup, #head_image_signup, #head_image_contact, #head_image_retreat {min-height: 250px;}
	
.photo_r400, .photo_l50p {width:70%; float:none; margin: 20px 15% 0;}
}


@media (max-width: 570px) {
#head_image_home, #head_image_about, #head_image_signup, #head_image_signup, #head_image_contact, #head_image_retreat {min-height: 200px;}
	
h2 {font-size:170%;}

.photo_r300 {width:250px; float:right; margin: 10px 0 0 30px;}
.photo_r500 {width:80%; float:none; margin: 5px 10% 0;}
}


@media (max-width: 525px) {
nav {text-align: left; padding: 0 0 0 3%;}
	
.photo_r400, .photo_l50p {width:80%; float:none; margin: 20px 10% 0;}
	
.two_col {width:100%;}
}


@media (max-width: 500px) {
.photo_l250, .photo_r300 {width:60%; float:none; margin: 20px 20% 15px;}
.photo_r500 {width:90%; float:none; margin: 5px 5% 0;}
}


@media (max-width: 460px) {
.photo_l250, .photo_r300 {width:70%; float:none; margin: 20px 15% 15px;}
.photo_r400, .photo_l50p {width:80%; float:none; margin: 20px 10% 0;}
.photo_r500 {width:100%; float:none; margin: 5px 0 0;}
}


@media (max-width: 400px) {
nav {font-size:90%; margin: 0 0;}
	
.photo_l250, .photo_r300 {width:80%; float:none; margin: 20px 10% 15px;}
.photo_r400, .photo_l50p {width:90%; float:none; margin: 20px 5% 0;}
}