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

/*Google Font - Raleway*/
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,700');


/*----- START - CSS Animation ------*/
@keyframes spookytext {
	0% {
		transform: translateY(-400%);
		opacity: 0;
	}
	25% {
		transform: translateY(20%);
		opacity: 0.25;
	}
	50% {
		transform: translateY(0);
		opacity: 0.75;
	}
	75% {
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}


/*----- END - CSS Animation ------*/

* {box-sizing: border-box; margin: 0; padding: 0;}
body #warning{
  width: 100%;
  margin: 0;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255)!important;
  text-align: center;
  font-size: 1.3rem;
}
body #warning a{
  color: rgb(255, 255, 255)!important;
  cursor: pointer;
}
body {
	background-color: #EAE1DE;
	font-family: Raleway, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	line-height: 1.6;
	font-size: 1.3rem;
}

header, main, footer {
	width: 60%;
	max-width: 1800px;
	margin: 0 auto;
}

#home-wrapper {
	height: 80vh;
}

#header-container {
	margin-bottom: 1.5rem;
}

#body-container {
	min-height: 100%;
}

#footer-container {
	height: 65px;

	font-size: 1.3rem;
	text-align: center;
	color: #2a221f;
	margin-top: 1.5rem;
}

#footer-container span {
	color: #509337;
	font-weight: bold;
}


/*====== Index Page =====*/


/*----- Cover Photo -----*/
#cover-photo {
	background-image: url(img/Cover-Photo.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100vh;
	width: 100vw;
	text-align: center;
}

/*P Tag Text*/
#cover-photo h1 {
	font-size: 8vh;
	color: #fff;
	font-weight: bold;
	padding: 40vh 0 0 0;
}

/*P - Span Tag for Animation "SpookText"*/
#cover-photo h1 span {display: inline-block;}

/*Span Text = Welcome*/
#cover-photo h1 span:nth-of-type(1) {animation: spookytext 2.4s ease-in-out ;}

/*Span Text = to*/
#cover-photo h1 span:nth-of-type(2) {animation: spookytext 2.6s ease-in-out ;}

/*Span Text = Fish*/
#cover-photo h1 span:nth-of-type(3) {animation: spookytext 2.8s ease-in-out ;}

/*Span Text = Creek*/
#cover-photo h1 span:nth-of-type(4) {animation: spookytext 3s ease-in-out ;}

/*Span Text = Park*/
#cover-photo h1 span:nth-of-type(5) {animation: spookytext 3.2s ease-in-out ;}

/*Form Tag*/
#cover-photo form {margin-top: 5rem;}

/*Form Tag - Div*/
#cover-photo form div {display: inline-block;}

/*Form Tag - Div -  Label*/
#cover-photo form div label{
	color: #FFF;
	font-size: 2.5rem;
	font-weight: 600;
}

/*Form Tag - Div -  Input*/
#cover-photo form div input[type=text] {
	font-family: Raleway, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	display: inline-block;
	line-height: 1.6;
	font-size: 2rem;
	border: 0;
	outline: 0;
	padding: 5px 15px;
	border-radius: 5px;
}

/*Form Tag - Div -  Input:Hover*/
#cover-photo form div input[type=text]:focus {
	border: 2px solid #14C9EF;
	padding: 3px 13px;
}

/*Form = Input - Submit tag*/
#cover-photo form input[type=submit]{
	text-decoration: none;
	display: inline-block;
	margin-top: 3rem;
	font-size: 2rem;
	letter-spacing: 0.1rem;
	padding:  0.8rem 1.5rem;
	color: #fff;
	font-weight: 600;
	border: 0;
	background-color: #509337;
}

#cover-photo form div:last-of-type {
	display: block;
	margin-top: 1rem;
}


/*====== Home Page - Content =====*/


/*----- Header -----*/
#header-container {
	color: #FFF;
	background-color: #2E231E;
	border-bottom: 0.3rem solid #509337;
}

#header-container header {display: flex;}

#header-container h1 {
	font-size: 2.2rem;
	font-weight: 600;
	text-align: left;
	margin: auto 0;
	display: inline-block;
	flex: 1;
	color: #fff;
}

#header-container header nav {
	text-align: right;
	flex: 1;
	font-size: 0;
}

#header-container nav a {
	text-decoration: none;
	display: inline-block;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 600;
	padding: 0.6rem 3rem;
}

#header-container nav a:first-of-type {margin: 0 0.5rem;}

/*Page Link:hover & Current Page*/
#header-container nav a:hover, .active-page {
	cursor: pointer;
	background-color: #3C5730;
}



/*-----Main Container - Content-----*/


#home-wrapper #home-content-wrapper {display: flex;}

#home-wrapper #home-content-wrapper #content {
	flex: 2;
	color: #2a221f;
	padding-right: 3rem;
}

#home-wrapper #home-content-wrapper #content h2{
	font-size: 1.8rem;
	margin-bottom: 1.2rem;
}

#home-wrapper #home-content-wrapper #content > p:last-of-type {
	padding-top: 1.5rem;
}
#home-wrapper #home-content-wrapper #wanted_poster {
	width: 30%;
	margin-top: 1rem;
}
#home-wrapper #home-content-wrapper #wanted_poster img{
	width: 100%;
	box-shadow: 1px 1px 20px 1px #000;
}

#home-wrapper main #content a {
	text-decoration: none;
	display: inline-block;
	margin-top: 2rem;
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
	padding:  0.5rem 1.5rem;
	color: #fff;
	font-weight: 600;
	background-color: #509337;
}

#home-wrapper main #content a:hover{
	cursor: pointer;
}


/*====== Map Page - Content =====*/


#map-wrapper main {
	width: 90%;
	max-width: 1800px;
	margin: 0 auto;
	position: relative;
}

/*"Locate Kevin McLostalot"*/
#map-wrapper main h2 {
	font-size: 3rem;
	color: #2a221f;
	text-align: center;
	margin-bottom: 0.8rem;
}

#map-wrapper #evidence {
	width: 14%;
	margin-top: 0.3rem;
	margin-left: 0.3rem;
	text-align: center;
	background-color:hsla(0,1%,28%,0.50);
	position: absolute;
	z-index: 1;
}

#map-wrapper #evidence h3 {
	color:#FFF;
	padding: 5% 5% 0 5%;
	font-size: 2vw;
}

#map-wrapper #evidence div {
	display: block;
	padding: 4%;
}

#map-wrapper #evidence div img {
	width: 70%;
	max-width: 75px;
}


/*Return Link Text*/

#map-wrapper main h2 + div{
	text-align: right;
}

#map-wrapper main h2 + div a{
	color: #2a221f;
	display: none;
	font-size: 1.7rem;
	text-decoration: none;
	transition: 0.2s ease-in-out;
}

#map-wrapper main h2 + div a:hover{
	color: #3C5730;
}

/*----- SVG Map -----*/

#map-wrapper #map {
	font-size: 0;
	border: 0.3rem solid #509337;
	text-align: center;
}


/*Hides All the Sub Map (DIV) Default*/
#map > div {
	display: none ;
	opacity: 0;
}

/*Hides The Bridge Icon*/
#map svg#Overview-Map #Location-One-Icon-Bridge{
	display: none;
	opacity: 0;
}

/*Style OF SVG OVERVIEW MAP*/


#Overview-Map .st0{fill:#825F43;}
#Overview-Map .st1{fill:#9B7A5D;}
#Overview-Map .st2{fill:#666666;}
#Overview-Map .st3{fill:#808080;}
#Overview-Map .st4{fill:#A4B467;}
#Overview-Map .st5{fill:#967C66;}
#Overview-Map .st6{fill:#327A56;}
#Overview-Map .st7{fill:#38895B;}
#Overview-Map .st8{fill:#2BB26E;}
#Overview-Map .st9{fill:#8E8E8E;}
#Overview-Map .st10{fill:none;stroke:#CCD280;stroke-width:2;stroke-miterlimit:10;}
#Overview-Map .st11{fill:#847E42;}
#Overview-Map .st12{fill:#68642B;}
#Overview-Map .st13{fill:#595425;}
#Overview-Map .st14{fill:#6D6233;}
#Overview-Map .st15{fill:#C6C466;}
#Overview-Map .st16{fill:#8FA882;}
#Overview-Map .st17{fill:#7E9E4C;}
#Overview-Map .st18{fill:#28935D;}
#Overview-Map .st19{fill:#35D3CB;}
#Overview-Map .st20{fill:#5F9670;}
#Overview-Map .st21{fill:#998675;}
#Overview-Map .st22{fill:#C7B299;}
#Overview-Map .st23{fill:none;stroke:#939393;stroke-width:10;stroke-miterlimit:10;}
#Overview-Map .st24{fill:#939393;}
#Overview-Map .st25{fill:#FFFFFF;}
#Overview-Map .st26{fill:#B0E2DE;}
#Overview-Map .st27{fill:#34C17E;}
#Overview-Map .st28{fill:#892E2E;}
#Overview-Map .st29{fill:#B53737;}
#Overview-Map .st30{fill:#725521;}
#Overview-Map .st31{fill:#34B2A9;}
#Overview-Map .st32{fill:#932E2E;}
#Overview-Map .st33{fill:#563F1B;}


/*Style OF SVG Parking Lot MAP*/

#parking {
	width: 45%;
	margin: 0 auto;
}

#Sub-Map-Parking-Lot	.st0{fill:#FFFFFF;}
#Sub-Map-Parking-Lot	.st1{fill:#2BB26E;}
#Sub-Map-Parking-Lot	.st2{fill:#CEAB82;}
#Sub-Map-Parking-Lot	.st3{fill:#BC9B7A;}
#Sub-Map-Parking-Lot	.st4{fill:#28935D;}
#Sub-Map-Parking-Lot	.st5{fill:#257F50;}
#Sub-Map-Parking-Lot	.st6{fill:#206D44;}
#Sub-Map-Parking-Lot	.st7{fill:#D35E6F;}
#Sub-Map-Parking-Lot	.st8{fill:#5B4D50;}
#Sub-Map-Parking-Lot	.st9{fill:#8CA4BA;}
#Sub-Map-Parking-Lot	.st10{fill:#A0A0A0;}
#Sub-Map-Parking-Lot	.st11{fill:#C1C1C1;}
#Sub-Map-Parking-Lot	.st12{fill:#B0E2DE;}
#Sub-Map-Parking-Lot	.st13{fill:#A8A45A;}
#Sub-Map-Parking-Lot	.st14{fill:#34C17E;}
#Sub-Map-Parking-Lot	.st15{fill:#68827F;}
#Sub-Map-Parking-Lot	.st16{fill:#89854E;}
#Sub-Map-Parking-Lot	.st17{fill:#87A093;}
#Sub-Map-Parking-Lot	.st18{fill:#708278;}
#Sub-Map-Parking-Lot	.st19{fill:#637C79;}
#Sub-Map-Parking-Lot	.st20{fill:#726E37;}
#Sub-Map-Parking-Lot	.st21{fill:#54511F;}
#Sub-Map-Parking-Lot	.st22{fill:#47441B;}
#Sub-Map-Parking-Lot	.st23{fill:#566865;}
#Sub-Map-Parking-Lot	.st24{fill:#595229;}


/*Style OF SVG Grassland MAP*/

#grassland {
	width: 60%;
	margin: 0 auto;
}


#Sub-Map-Grassland	.st0{fill:#C6C466;}
#Sub-Map-Grassland	.st1{fill:#A09B58;}
#Sub-Map-Grassland	.st2{fill:#B2AE5F;}
#Sub-Map-Grassland	.st3{fill:#89834E;}
#Sub-Map-Grassland	.st4{fill:none;stroke:#FFFFFF;stroke-width:2.5424;stroke-miterlimit:10;}
#Sub-Map-Grassland	.st5{fill:#FFFFFF;}
#Sub-Map-Grassland	.st6{fill:#B0E2DE;}
#Sub-Map-Grassland	.st7{fill:#28935D;}
#Sub-Map-Grassland	.st8{fill:#34C17E;}
#Sub-Map-Grassland	.st9{fill:#A8A45A;}


/*Style OF SVG River MAP*/


#river {
	width: 100%;
	margin: 0 auto;
}

#Sub-Map-River	.st0{fill:#BABBBE;}
#Sub-Map-River	.st1{fill:#A9A9AA;}
#Sub-Map-River	.st2{fill:#CFD0D1;}
#Sub-Map-River	.st3{fill:#B7B7B7;}
#Sub-Map-River	.st4{fill:#8D8D8D;}
#Sub-Map-River	.st5{fill:#2BB26E;}
#Sub-Map-River	.st6{fill:none;stroke:#E2EDE2;stroke-width:2;stroke-miterlimit:10;}
#Sub-Map-River	.st7{fill:#35D3CB;}
#Sub-Map-River	.st8{fill:#E2CCC1;}
#Sub-Map-River	.st9{fill:#28935D;}
#Sub-Map-River	.st10{fill:#C3C1AC;}
#Sub-Map-River	.st11{fill:#AE4E56;}
#Sub-Map-River	.st12{fill:#FFFFFF;}
#Sub-Map-River	.st13{fill:#B0E2DE;}
#Sub-Map-River	.st14{fill:#34C17E;}
#Sub-Map-River	.st15{fill:#A8A45A;}
#Sub-Map-River	.st16{fill:#2A9E95;}
#Sub-Map-River	.st17{fill:#87A093;}
#Sub-Map-River	.st18{fill:#708278;}
#Sub-Map-River	.st19{fill:#8E854F;}
#Sub-Map-River	.st20{fill:#38B272;}


/*Style OF SVG Woodlands MAP*/

#woodland {
	width: 80%;
	margin: 0 auto;
}

#Sub-Map-Woodlands	.st0{fill:#28935D;stroke:#28935D;stroke-width:2;stroke-miterlimit:10;}
#Sub-Map-Woodlands	.st1{fill:#237C4D;}
#Sub-Map-Woodlands	.st2{fill:#217248;}
#Sub-Map-Woodlands	.st3{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
#Sub-Map-Woodlands	.st4{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
#Sub-Map-Woodlands	.st5{fill:#497A6D;}
#Sub-Map-Woodlands	.st6{fill:#FFFFFF;}
#Sub-Map-Woodlands	.st7{fill:#B0E2DE;}
#Sub-Map-Woodlands	.st8{fill:#28935D;}
#Sub-Map-Woodlands	.st9{fill:#A8A45A;}
#Sub-Map-Woodlands	.st10{fill:#7F7842;}
#Sub-Map-Woodlands	.st11{fill:#34C17E;}
#Sub-Map-Woodlands	.st12{fill:#43DD8C;}
#Sub-Map-Woodlands	.st13{fill:#87A093;}
#Sub-Map-Woodlands	.st14{fill:#708278;}
#Sub-Map-Woodlands	.st15{fill:#37AF70;}
#Sub-Map-Woodlands	.st16{fill:#36A368;}
#Sub-Map-Woodlands	.st17{fill:#73877C;}
#Sub-Map-Woodlands	.st18{fill:#58605B;}


/*Icon*/


#map-wrapper dialog {
	position: fixed;
	background-color: #3A3A3A;
	width: 100%;
	padding: 0.5rem 10rem 0.5rem 10rem;
	border: none;
	z-index: 2;
	color: #FFF;
}

/*Close Button*/
#map-wrapper dialog button:first-of-type {
	font-family: Raleway, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #FFF;
	background-color: #B92C2E;
	font-weight: 600;
	font-size: 1.3rem;
	border: 0;
	outline: 0;
	border-radius: 8px;
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.5rem 0.8rem;
	transition: 0.3s ease-in-out;
}

#map-wrapper dialog button:first-of-type:hover{
	cursor: pointer;
	background-color: #CC3032;
}

/*Collect Evidence Button*/
#map-wrapper dialog button.collectEvidence{
	background-color: #509337;
	font-family: Raleway, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	border: 0;
	outline: 0;
	margin-top: 0.2rem;
	border-radius: 8px;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 600;
	padding:  0.5rem 1.5rem;
	transition: 0.2s ease-in-out;
}

#map-wrapper dialog button.collectEvidence:hover{
	cursor: pointer;
	background-color: #58A83B;
}


#map-wrapper dialog::backdrop {
	background: hsla(0,0%,0%,0.60);
}

#map-wrapper dialog h3 {
	font-size: 2rem;
}

#map-wrapper dialog h3.congrats {
	font-size: 2.5rem;
}

#map-wrapper dialog p {
	font-size: 1.3rem;
	padding: 0.5rem;
}

#map-wrapper dialog figure {
	max-width: 980px;
	margin: 1rem auto;

}

#map-wrapper dialog figure img {
	display: inline-block;
	width: 100%;
}





/*Media Queries*/
@media all and (max-width: 1300px) {
	header, main, footer {
		width: 49rem;
	}
}