@charset "utf-8";

/*  Media Queries for Default17  */


@media screen and (min-width: 400px) {  
	.overlay {
		top:20%;
}
	.overlay p {
		font-size:.8em;
	}
	
}


@media screen and (min-width: 500px) {  

	img.right {
		float: right;
		display: inline;
		margin: 0 0 1em 2em;
		width:  25%;   /* So will stay proportional to the paragraph its inside */
		min-width: 200px;  /* So won't be too small on small screens  */
	}
	
	img.left {
		float: left;
		display: inline;
		margin: 0 2em 1em 0;
		width:  40%;   /* So will stay proportional to the paragraph its inside */
		min-width: 200px;  /* So won't be too small on small screens  */
	}
	
	.right {
		float: right;
		clear: none;
	}
	
	.left {
		float: left;
		clear: none;
	}
	
	.overlay p {
		font-size:1em;
	}
	
	#content #faq li {
		list-style-type: none;
		margin-bottom: 3em;
		font-size: 1em;
	}

}


@media screen and (min-width: 600px) {  

	
}


@media screen and (min-width: 700px) {
	
   header {
	   display: flex;
	   display: -webkit-flex;
	   display: ms-flexbox;
	   flex-wrap:nowrap;
	    -webkit-flex-wrap: nowrap; 
	    -ms-flex-wrap: nowrap;
	   justify-content:  space-between;          /*    flex-start, center, space-between, space-around, flex-end    */
		 -webkit-justify-content: space-between;
		 -ms-flex-pack: justify;                  /*    start, end, center, justify  */

	   align-items: stretch;                  /*    stretch, flex-start, flex-end, center, baseline    */
		-webkit-align-items: stretch;
		-ms-flex-align: stretch;
	   
	   padding-top: 0;
   }
   
	#hdr-left {
		flex: 1 1 10%;
		text-align: left;
		margin-right: 0;
		margin-top: 1em;
	}

	#hdr-center {
		flex: 1 1 25%;
		margin-top: 0em;
		margin-left: -3em;

	}

	#hdr-right {
		flex: 1 1 20%;
		
	}
	
	.bg-image {
		background-image: url("../images/planet-bg800.jpg");
	}
	
	.overlay {
		top:20%;
	}
	.overlay p {
		font-size:1.2em;
	}
	
	#map iframe {
		max-width: 600px;
	}
	
	.flex21 p.moveleft {
		margin-right: 2em;
		margin-left: -2em;
	}
	
	#alter {
		float: left;
		margin-right: 1.5em;
	}
	
	.contactform {
	/* background-color: #d9e6f3; BLUE */
	background-color: #f2f9f2;
	padding-top:2em;
	padding-bottom:2em;
	border: 1px solid #ccc;
	width: 100%;
	margin: 2em 0 0 4em;
}

		
/*  -----------  CONTENT FOR SIDEBAR PAGE  ------------  */
	
	  .wrapper {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
	
	
	
/*  ------------- SIDEBAR & MAIN CONTENT SECTIONS ------------------------------  */
	
	#main-content {
		order: 2;
		-webkit-order: 2;
		-ms-flex-order: 2;  
		margin-right:1em;
	}
	
	
	#sidebar {
		order: 1;
		-webkit-order: 1;
		-ms-flex-order: 1;
		
		flex: 0 0 12em;   /* sidebar won't grow or shrink & will always stay at 12ems  */
		-webkit-flex: 0 0 12em;
		-ms-flex: 0 0 12em;
	}
	
	#sidebar > div, #right-sidebar > div {
	margin: .75em 0 4.5em;
}

	#sidebar > div.last, #right-sidebar > div.last {
		margin: .75em 0 1em;
	}
	
	#right-sidebar {
		order: 3;
		-webkit-order: 3;
		-ms-flex-order: 3;
		
		flex: 0 0 12em;   /* sidebar won't grow or shrink & will always stay at 12ems  */
		-webkit-flex: 0 0 12em;
		-ms-flex: 0 0 12em;
		
	}
	
	

	
/*  ----------- FLEX  ------------------------------------------  */
  

    .flex-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .flex50 {
        -webkit-flex: 0 0 calc(50% - 1em);
            -ms-flex: 0 0 calc(50% - 1em);
                flex: 0 0 calc(50% - 1em);
        margin-bottom: 1em;
    }
	
	
	.flex33 {
        -webkit-flex: 0 0 calc(33% - 1em);
            -ms-flex: 0 0 calc(33% - 1em);
                flex: 0 0 calc(33% - 1em);
        margin-bottom: 1em;
    }
	
	 .flex65 {
        -webkit-flex: 0 0 calc(65% - 1em);
            -ms-flex: 0 0 calc(65% - 1em);
                flex: 0 0 calc(65% - 1em);
        margin-bottom: 1em;
		 margin-right: 1em;
    }
	
	 .flex75 {
        -webkit-flex: 0 0 calc(75% - 1em);
            -ms-flex: 0 0 calc(75% - 1em);
                flex: 0 0 calc(75% - 1em);
        margin-bottom: 1em;
		 margin-right: 3em;
    }
	
	 .flex30 {
        -webkit-flex: 1 0 calc(30% - 1em);
            -ms-flex: 1 0 calc(30% - 1em);
                flex: 1 0 calc(30% - 1em);
        margin-bottom: 1em;
    }
	
	 .flex21 {
        -webkit-flex: 1 0 calc(21% - 1em);
            -ms-flex: 1 0 calc(21% - 1em);
                flex: 1 0 calc(21% - 1em);
        margin-bottom: 1em;
		margin-top: -2em;
    }
	
	.flex-contact {
		-webkit-flex: 1 0 calc(20% - 1em);
            -ms-flex: 1 0 calc(20% - 1em);
                flex: 1 0 calc(20% - 1em);
        margin-bottom: 1em;
		margin-top: 0;
		margin-right: 2em;
		
		
	}
   
   #monument-sidebar {
      margin-top: .2em;
   }
	
	#intersection {
		margin-top: 1.5em;
		margin-bottom: 1em;
	}
	
	#suggestion {
		margin-top:0;
	}
	
	#suggestion h4 {
		font-size: 1.3em;
	}
	
	#map {
		width: 100%;
		margin-left: 3em;
		margin-top: 3em;
		text-align: left;
	}
	
	.topmar {
		margin-top: 2em;
	}
	
	#director {
		max-width: 400px;
	}
	
	.directors h3 {
		margin-top: .75em;
	}
	
	#ducks {
		float: left;
		margin:  0 1.5em 1em 0;
		max-width: 250px;
		display: inline;
	}
	
	#content #faq, #content #newsletter, #content .links {
		margin-left: 4em;
		margin-top: 2em;
	}
   
   #newsletter {
      max-width: 50%;
      float: left;
   }
   
   #img015 {
       float:right; 
       clear:none;         
       margin-right: 0;
       max-width: 32%;
   }
	
	
	.pdf {
		float: left;
		margin: -.5em .5em 0 1em;
	}
	
	table {
		margin-left: 1.5em;
	}
	
	.indent h3 {
		margin-left: .75em;
		margin-top: .5em;
	}
	

	
}


@media screen and (min-width: 60em) {   /* 960px  */
  
	#hdr-left {
	   flex: 1 1 20%;
	    -webkit-flex: 0 1 calc(20% - 1em);
        -ms-flex: 0 1 calc(20% - 1em);
	   min-width: 175px;  /*  Actual width of logo */
		margin-right: 1em;
   }
	
	#hdr-center {
		flex: 1 1 40%;
		margin-top: 1em;
		margin-left: -2em;

	}
	
	#hdr-right {
		flex: 1 1 15%;
		margin-left: 5em;
		
	}
	
	.tagline {
		font-size: 3.5em;
	}

   header .contact p {
	   font-size: 1.5em;
   }
	
	header #contact-btns {
		width: 80%;
	} 
	
	.hero {
		height: 311px;
		margin-bottom: 1.5em;
	}
	
	
	h1.title {
		font-size: 1.75em;
		margin-top: .5em;
		text-align: left;
		margin-bottom: .5em;
	}

	.overlay {
		top:35%;
	}
	.overlay p {
		font-size:1.4em;
	}
	
	#monument {
		margin-top: -25px;
	}
	
	#ducks {
		float:left;
		max-width: 250px; 
		margin-right: 1.5em;
		margin-bottom: 1em;
		margin-top: 0;
		display: inline;
	}

	
	li.navlast {
		float: right;
		background-color: #242222;
	}
	
	.contactform #aligned {
		float: left;
		width: 265px;
		margin-right: 4em;
	}
	
	.contactform #aside {
		float: left;
		width: 265px;
	}
	
	.flex21 p.moveleft {
		margin-right: 2em;
		margin-left: 0;
	}
	
	#alter { float: left; margin-right: 1.5em; }
	
	#content #faq {
		margin-top: 3em;
	}
	
	.permission {
		margin: 2em 0 1.25em 0;
	}
	
	#minutes {
		margin: 0 auto 0 5em;
	}
	
	#financials {
		margin: 0 auto 0 3em;
		width: 80%;
	}
	
	#documents {
		margin-left: 4em;
		margin-top: 2em;
	}
	
	#residents {
		width: 90%;
	}
	
	#logdoc {
		margin-top: 2em;
		margin-left: 1.5em;
	}
	
	 #trees {
		 display: block;
		 text-align: center;
		 margin-top: 1.5em;
	}
	
	.contactform {
		width: 90%;
		margin-left: 0;
		margin-top: 1em;
	}
   
     #img015 {
        max-width: 50%;
   }
	
	#residents td {
     font-size: 1em !important;
     line-height: 1.5em !important;
   }
	
    
}


@media screen and (min-width: 64em) {   /* 1024px  */

     
}