* {
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}

html,
body {
	height: 100%;
}

/*-------Header Styles------------------------*/

header {
	height: 35%;
	min-height: 146px;
	border-bottom: 1px solid black;
	padding-top: 17px;
	text-align: center;
	color: #fff;
}

.header-home {
	background: url("../images/NewmanLake_720HeightBG.jpg") no-repeat center;
	background-size: cover;
}

.header-history {
	background: url("../images/NewmanLake_720HeightBG_Hist.jpg") no-repeat center;
	background-size: cover;
	background-position: bottom;
}

.header-photos {
	background: url("../images/NewmanLake_720HeightBG_Photos.jpg") no-repeat center;
	background-size: cover;
}

header h1 {
	font-size: 2.6rem;
	font-weight: normal;
	margin: 0;
	padding: 22px 0 53px 0;
	background: rgba(0, 0, 0, 0.5);
}

header h3 {
	font-weight: normal;
	margin-top: -40px;
	margin-bottom: 0;
}


/*-------SMALL SCREEN NAV MENU-------------------------------------------------*/

/*---Nav Menu button---*/

.nav-button {
	width: 100%;
	height: 40px;
	text-align: center;
	background: #475;
	cursor: pointer;
}

.nav-button img {
	margin-right: 10px;
	padding: 5px 0;
	vertical-align: bottom;
}

.nav-button span {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 40px;
}

/*---Nav Menu---------------*/

.nav-box {
	display: none;
	width: 100%;
	background: #569;
}

.nav-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background-color: #578;
	text-align: center;
}

.nav-box li {
	line-height: 40px;
  	border-bottom: 1px solid #798;
}

.nav-box a {
	text-decoration: none;
  	color: #ddd;
	display: block;
	transition: .2s background-color;
	margin: 0;
	padding: 0;
}

.nav-box a:hover {
  background-color: #697;
}

.nav-box a.active {
  background-color: #697;
  color: #243;
}


/*----Main Content Sections-----------------------------------------*/

main img {
	box-shadow: 3px 3px 8px #444;
}

.intro-sec img,
.nl_map {
	box-shadow: none;
}

hr {
	border-color: #666;
	margin-top: 22px;
}

section {
	padding: 5%;
}

section ul {
	list-style: none;
	padding: 0;
}

section img {
	max-width: 100%;
}

.intro h1,
.top-section h1 {
	text-align: center;
}

.intro-sec {
	background: #ccc;
	border-bottom: 5px solid #475;
}

.intro-sec2 {
	text-align: center;

}

.intro-sec2>div {
	display: inline-block;
	background: #afafaf;
	max-width: 100%;
	width: 100%;

	margin: auto;
	border-bottom: 10px solid #BB9C7C; /* 743F35 */
	vertical-align: top;
	padding: 20px;
	margin-bottom: 20px;
}
.intro-sec2 div:nth-child(2) {
	border-bottom: 10px solid #743F35;

}

.intro-sec2 img {

}


.activities h3,
.fish h3,
.directions h3,
.contacts h3 {
	text-align: center;
}

.intro h1,
.directions h3,
footer h3 {
	margin-top: 0;
}

.nl-shape {
	width: 33%;
	float: right;
	margin-left: 5%;
}
footer .nl-shape {
	display: block;
	margin: 0 auto;
	float: none;
}

.intro-sec2 {
	background: #ddd;
}

.mid-section {
	background: #ccc;
}

.contacts-section {
	background: #bbb;
}

.nl_map {
	max-width: 100%;
	height: auto;
	border: 1px solid black;
	margin-bottom: 10%;
	display: block;
}

.contacts em {
	color: #239;
}

.contacts a {
	color: #475;
}

/*---Footer------------------------------------*/

footer {
	background: #475;
	padding-top: 5%;
}

footer h3 {
	text-align: center;
}

.contact-us {
	max-width: 1024px;
	padding: 0 5%;
	margin: auto;
	text-align: center;
}

.contact-us a {
	color: #132;
}
.contact-us a:hover {
	color: #000;
}

.copyr {
	height: 50px;
	text-align: center;
	color: #475;
	background: #243;
	margin-top: 5%;
	padding: 0;
	line-height: 50px;
}


/*------------------------------------------------*/

.hist-sec1,
.photo-sec1 {
	background: #fff;
}

.hist-sec1 h1,
.photo-sec1 h1 {
	text-align: center;
}

figure {
	text-align: center;
	margin: auto;
	width: 60%;
	padding: 3%;
}

figure img {
	max-height: 400px;
}

figcaption,
figcaption h4 {
	text-align: center;
	font-size: 0.8rem;
	margin: 0;
}

.hist-sec1 ul {
	text-align: center;
	background: #eee;
}

.hist-sec1 li {
	display: inline-block;
	padding: 10px;
}

.hist-sec2 {
	background: #ddd;
}

.hist-sec3 {
	background: #ccc;
}

.hist-sec4 {
	background: #bbb;
}

.hist-sec5 {
	background: #ddd;
}

.hist-sec6 {
	background: #fff;
}

.hist-link {
	text-align: center;
	font-size: 1rem;
	margin-top: 10px;
	padding: 20px 0;
}

.hist-link a {
	display: block;
	padding: 10px;
	border: 3px solid #475;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	color: #475;
}

.hist-link a:hover,
.hist-link a:active {
	background: rgba(100, 100, 100, 0.25);
}

.hist-link a:visited {
	border-color: #679;
	color: #679;
}

.topjump {
	text-align: right;
	margin: 10px 0;
}

.hist-sec1 li a,
.topjump {
	color: #475;
	font-weight: bold;
}

.hist-sec1 li a:visited {
	color: #679;
	font-weight: bold;
}

blockquote {
	background: #eee;
	padding: 10px;
}

.hist-sec1 blockquote li  {
	display: block;
	text-align: left;
	padding-left: 50px;
}

.galleryMany figure {
	display: inline-block;
	width: 45%;
	vertical-align: top;
}

.galleryMany figure img {
	max-height: 150px;
}

.fig-container {
	margin: auto;
	text-align: center;
}


/*--------- MEDIA QUERIES ------------------------*/

/*----- 360px min width ----------*/

@media screen and (min-width: 360px) {
	header {
		min-height: 174px;
		padding-top: 45px;
	}

	.fishlist li {
		float: left;
		width: 50%;
	}

	.fish img {
		margin-top: 5%;
	}
}

/*------------*/

@media screen and (min-width: 480px) {
	header {
		min-height: 174px;
		padding-top: 20px;
	}

	.intro h1 {
		margin-top: 0;
	}

	.intro p:last-child {
		margin-bottom: 35px;
	}

	.nl-shape {
		max-width: 140px;
	}
}

/*---------------*/

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

	.contacts img {
		display: block;
		width: 80%;
		margin: 5% auto 0 auto;
	}

	.hist-link {
		font-size: 1.2rem;
	}

	.hist-link a {
		display: inline;
	}

	.hist-fig,
	.hist-p,
	.contacts div,
	.contacts img {
		display: inline-block;
	}

	.hist-fig {
		width: 40%;
		vertical-align: top;
	}

	.hist-p {
		max-width: 59%;
	}

	.contacts div {
		width: 46%;
	}

	.contacts img {
		width: 53%;
		vertical-align: top;
		margin-top: 63px;
	}

/*-----*/
	.activities h3,
	.fish h3 {
		margin-right: 60%;
	}

	.activities ul,
	.fish ul {
		width: 40%;
		float: left;
		margin: 0;
	}

	.fishlist li {
		float: none;
		width: 100%;
	}
	.fish img {
		margin-top: 0;
	}

	.activities img,
	.fish img {
		display: block;
		max-width: 60%;
	}

	.activities img {
		margin-bottom: 58px;
	}

	.top-section {
		overflow: auto;
		padding-top: 0;
	}
	.intro-sec2 {
		height: 525px;
	}

	.intro-sec2>div {
		max-width: 100%;
		width: 45%;
		height: 100%;
		margin: auto;
		padding: 20px;
		margin-bottom: 20px;
	}

	.intro-sec2 div:nth-child(2) {
		margin-left: 5%;
		height: 100%;
	}

	.nl_map {
		display: block;
		max-width: 100%;
		margin: 5% auto;
	}

}

/*---------------*/

@media screen and (min-width: 768px) {
	header {
		min-height: 213px;
		padding-top: 25px;
	}

	.nl_map {
		height: auto;
		max-width: 100%;
		margin: 5% auto;
	}

	footer {
		padding-top: 2%;
	}

	footer div {
		padding: 0 5%;
	}

	.copyr {
		margin-top: 2%;
	}

/*-----Main Nav Appears--------*/

	header {
		padding-top: 50px;
	}

	header h1 {
		font-size: 4rem;
	}

	.nav-button {
		display: none;
	}

	.nav-box {
		display: block;
	}

	.nav-box ul {
		background: #475;
	}

	.nav-box li {
		display: inline-block;
		border-bottom: none;
		margin-left: -4px;
	}

	.nav-box a {
		padding: 5px 50px;
		font-size: 1.2rem;
	}

	.intro {
		max-width: 80%;
		margin: 0 auto;
		color: #000;
	}
	.nl-shape {
		margin-top: -30px;
	}

	.activities p,
	.fish p {
		max-width: 40%;
	}

	.intro-sec2 {
		height: 500px;
	}

	section {
		max-width: 1200px;
		margin: 0 auto;
		padding: 2% 5%;
	}

	.directions {
		text-align: center;
	}

	.directions h3 {
		margin-right: 0;
	}

/*---------------*/

	.hist-sec5 figure,
	.gallery figure {
		display: inline-block;
		width: 45%;
		vertical-align: top;
	}

	.galleryMany figure {
		width: 33%;
		vertical-align: top;
	}

	.galleryMany figure img {
		max-height: 150px;
	}
}

/*---------------*/

@media screen and (min-width: 1024px) {
	main {
		background: #eee;
	}
	.top-section {
		background: #fff;
	}
}

/*---------------------------------------------------------------------------*/
/*------ CSS for the Overlay and Lightbox. Also coded by Jeff Seymour -------*/

#lb-overlay {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
}


#lb-container {
	height: 85%;
}


#lb-image {
	display: block;
	position: relative;
	top: 50%;
	margin: auto;
	transform: translateY(-50%);
}


#lb-caption {
	position: fixed;
	width: 80%;
	height: 15%;
	padding-left: 20%;
	text-align: center;
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-family: sans-serif;
	font-size: 0.8rem;
}


#lb-close {
	position: fixed;
	right: 0;
	width: 20%;
	height: 15%;
	text-align: center;
	background: rgba(0,0,0,0.9);
	color: #777;
	font-family: sans-serif;
	font-size: 2rem;
}


/*--- Pseudo Classes ---*/

#lb-close:before,
#lb-caption:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}


#lb-close:hover,
#lb-close:active {
	background: rgba(20,20,20,0.9);
	cursor: pointer;
}

/*--- Media Queries ---*/


@media screen and (orientation: landscape) {
	#lb-image {
		max-width: 80%;
    	max-height: 100%;
	}
}

@media screen and (orientation: portrait) {
	#lb-image {
		max-width: 100%;
    	max-height: 100%;
	}
}


@media screen and (min-width: 640px) {
	#lb-caption {
		font-size: 1rem;
	}
}

@media screen and (min-width: 768px) {
	#lb-caption {
		font-size: 1.2rem;
	}
}