/* CSS Document */

body{
	margin: 0px;
	padding: 0px;
	font-family: verdana;
	-khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Mobile (ew) */
@media (min-width: 0px) and (max-width: 1200px){
	
	#mySearch {
		position: static;
		width: 100%;
		font-size: 30px;
		margin: 15px 0px 0px -15px;
		color: #000;
		padding: 20px 0px 20px 20px;
		border: 4px solid #00950A;
		z-index: 100;
	}

	.searchBar {
		width: 90%;
		margin: 0px auto 0px auto;
	}

	/* Style the navigation menu */
	#myMenu {
	  list-style-type: none;
	  padding: 0;
	  margin: 0;
	}
	
	#myMenu li a {
	  display: block;
	}

	
	.desktop{
		width: 0%;
		height: 0%;
		display: none;
	}
	
	.mobile{

	}
	
	/* Header */
	.header{
		position: fixed;
		width: 100%;
		height: 140px;
		background-color: #FFF;
		padding: 0px 0px 0px 0px;
		z-index: 5;
	}
	.headerLogo{
		position: absolute;
		height: 40%;
		float: left;
		left: 16px;
		top: 30%;
	}

	.link{
		width: 0%;
		height: 0%;
	}
	.linkHitbox{
		width: 0%;
		height: 0%;
	}
	.link2{
		width: 0%;
		height: 0%;
	}
	.link2DropDown{
		width: 0%;
		height: 0%;
	}
	.link3{
		width: 0%;
		height: 0%;
	}
	.link4{
		width: 0%;
		height: 0%;
	}

	.line{
		position: fixed;
		width: 100%;
		top: 132px;
		z-index: 5;
	}
	
	.menuMobile{
		position: absolute;
		height: 100px;
		top: 30px;
		width: 20%;
		margin: -12px 0px 0px 0px;
		left: 86%;
		z-index: 6;
		display: block;
		text-decoration: none;
	}
	
	.mobileButton {
		display: block;
		width: 100%;
		border: none;
		background-color: #AFC7B3;
		padding: 20px 0px;
		margin: 0px;
		font-size: 80px;
		cursor: pointer;
		text-align: center;
		text-decoration: none!important;
		color: #000;
	}
	
	.mobileButtonDrop {
		display: block;
		width: 100%;
		border: none;
		background-color: #D3F2DA;
		padding: 20px 0px;
		margin: 0px;
		font-size: 80px;
		cursor: pointer;
		text-align: center;
		text-decoration: none!important;
		color: #000;
	}
	
	a:link 
	{
		text-decoration: none
	}
	
	
	
	.thisIs {
		width: 0%;
		height: 0%;
		z-index: -10;
		display: none;
	}
	
	.thisIsMobile {
		position: absolute;
		z-index: 2;
		width: 98%;
		margin: 30% 0px 0px 1%;
	}

	.image1 {
		width: 0%;
		height: 0%;
		z-index: -10;
		display: none;
	}
	.image2 {
		width: 0%;
		height: 0%;
		z-index: -10;
		display: none;
	}
	.image3 {
		width: 0%;
		height: 0%;
		z-index: -10;
		display: none;
	}
	.image4 {
		width: 0%;
		height: 0%;
		z-index: -10;
		display: none;
	}
	.mobileImage {
		position: static;
		padding: 0% 0px 15px 0px;
		z-index: 0;
		margin: 0px;
		display: block;
		font-size: 0;
		width: 100%;
	}
	
	
	.featuredHikes {
		position: static;
		padding: 0% 0px 0px 0%;
		margin: 0px auto 0px auto;
		width: 90%;
		z-index: 0;
	}
	.hike1 {
		position: static;
		padding: 0% 0px 0px 0%;
		margin: 0px auto 0px auto;
		width: 98%;
		z-index: 5;
	}
	
	
	.imageListE {
		position: static;
		padding: 0% 0px 0px 0px;
		margin: 0px auto 0px auto;
		z-index: -10;
		display: block;
		font-size: 0;
	}
	
	.imageListEL {
		width: 0%;
		height: 0%;
	}
	
	.imageListEMobile {
		position: static;
		padding: 0% 0px 0px 0px;
		margin: 0px auto 0px auto;
		z-index: -10;
		display: block;
		font-size: 0;
	}
	
	
	.textBox {
		position: static;
		width: 96%;
		height: auto;
		margin: 20px auto 20px auto;
		display: block;
		user-select: text;
	}
	.textBoxLine {
		position: static;
		width: 100%;
		height: auto;
		margin: 20px auto 20px auto;
		user-select: text;
		outline: 5px solid green;
	}
	
	.textBoxText{
		font-family: verdana;
		font-size: 50px;
		padding: 0px 10px 0px 10px;
	}
	.textBoxTextTable{
		font-family: verdana;
		font-size: 30px;
		padding: 0px 10px 0px 10px;
	}
	.textBoxCenteredTextBig{
		font-family: verdana;
		font-size: 80px;
		padding: 0px auto 0px auto;
		text-align: center;
		text-decoration: none;
	}
	.textBoxCenteredTextBigTwo{
		font-family: verdana;
		font-size: 120px;
		padding: 0px auto 0px auto;
		text-align: center;
		font-weight: 900;
	}
	.textBoxCenteredText{
		font-family: verdana;
		font-size: 40px;
		padding: 0px auto 0px auto;
		text-align: center;
	}
	.textBoxCenteredTextSmall{
		font-family: verdana;
		font-size: 30px;
		padding: 0px auto 0px auto;
		text-align: center;
	}
	.textBoxCenteredReg{
		font-family: verdana;
		font-size: 50px;
		padding: 0px auto 0px auto;
		text-align: center;
	}
	
	.infoBG{
		
	}
	
	.hikeListE {
		position: static;
		padding: 16px 0px 0px 0%;
		margin: 0px auto 0px auto;
		width: 99%;
		z-index: 99;
	}
	
	
	.button {
		display: block;
		width: 100%;
		border: none;
		background-color: green;
		padding: 30px 0px;
		font-size: 40px;
		cursor: pointer;
		text-align: center;
	}
	
	
	/* Content Wrappers */
	.contentWrapper {
		position: absolute;
		width: 100%;
		background-color: #FFF;
		top: 141px;
		z-index: 0;
	}
	
	.contentWrapperMain {
		position: absolute;
		width: 100%;
		background-color: #FFF;
		top: 65px;
		z-index: 0;
	}

	.contentWrapperNW{
		position: absolute;
		width: 100%;
		top: 141px;
		z-index: 0;
	}
	
	
	/* Footer main page */
	.footert{
		font-size: 40px;
		margin: 37px auto;
		z-index: 0;
	}

	/* Footer other */
	.footer2{
		position: static;
		text-align: center;
		width: 100%;
		height: 130px;
		margin: 20px auto 0px auto;
	}

	/* Footer other other */
	.footer3{
		position: static;
		text-align: center;
		width: 100%;
		height: 130px;
		margin: 0px auto 0px auto;
	}
	
	.colors {
		padding: 1% 0px 0px 0%;
	}
	
	.imageRepository {
		position: static;
		width: 100%;
		padding: 0px;
		height: auto;
		display: block;
	}
	
	.imageRepository img {
		width: 100%;
	}
	
	
}



/* Desktop */
@media (min-width: 1200px) and (max-width: 9999px){
	
	#mySearch {
		position: static;
		width: 100%;
		font-size: 25px;
		margin: 15px 0px 0px -15px;
		color: #000;
		padding: 20px 0px 20px 20px;
		border: 4px solid #00950A;
		z-index: 100;
	}

	.searchBar {
		width: 50%;
		margin: 0px auto 0px auto;
	}

	/* Style the navigation menu */
	#myMenu {
	  list-style-type: none;
	  padding: 0;
	  margin: 0;
	}

	/* Style the navigation links */
	#myMenu li a {
	  display: block;
	}

	#myMenu li a:hover {
	 
	}
	
	
	.desktop{
		
	}
	
	.mobile{
		width: 0%;
		height: 0%;
		display: none;
	}
	
	/* Header */
	.header{
		position: fixed;
		width: 100%;
		height: 65px;
		background-color: #FFF;
		padding: 0px 0px 0px 0px;
		z-index: 5;
	}
	.headerLogo{
		position: absolute;
		float: left;
		height: 40px;
		left: 16px;
		top: 12px;
	}

	.link{
		position: fixed;
		left: 450px;
		top: 10px;
		z-index: 5;
		height: 50px;
	}
	.linkHitbox{
		position: fixed;
		left: 450px;
		top: 8px;
		z-index: 5;
		height: 50px;
	}
	.link2{
		position: absolute;
		left: 533px;
		top: 11px;
		z-index: 4;
		cursor: pointer;
		height: 50px;
	}
	.link3{
		position: absolute;
		left: 672px;
		top: 9px;
		z-index: 3;
		height: 50px;
	}
	.link4{
		position: absolute;
		left: 705px;
		top: 9px;
		z-index: 3;
		height: 50px;
	}

	.line{
		position: fixed;
		width: 100%;
		top: 57px;
		z-index: 5;
	}
	
	.menuMobile{
		width: 0%;
		height: 0%;
	}
	
	
	
	.thisIs {
		position: absolute;
		z-index: 2;
		margin: 12% 0px 0px 10%;
		width: 80%;
	}
	
	.thisIsMobile {
		width: 0%;
		height: 0%;
		margin: 0% 0px 0px 0%;
		display: none;
	}

	.image1 {
		position: absolute;
		padding: 0% 0px 0px 0px;
		width: 50%;
		z-index: -10;
	}
	.image2 {
		position: absolute;
		padding: 0% 0px 0px 50%;
		float: right;
		width: 50%;
		z-index: 0;
	}
	.image3 {
		position: absolute;
		padding: 28.1% 0px 0px 0px;
		float: left;
		width: 50%;
		z-index: 0;
	}
	.image4 {
		position: absolute;
		padding: 28.1% 0px 0px 50%;
		float: right;
		width: 50%;
		z-index: 0;
	}
	.mobileImage {
		width: 0%;
		height: 0%;
	}
	
	.featuredHikes {
		position: static;
		padding: 57% 0px 0px 0%;
		margin: 0px auto 0px auto;
		width: 30%;
		z-index: 0;
	}
	.hike1 {
		position: static;
		padding: 0% 0px 0px 0%;
		width: 50%;
		margin: 0px auto 0px auto;
		z-index: 5;
	}
	
	.imageListEL {
		position: static;
		padding: 0% 0px 0px 0px;
		margin: 0px auto 0px auto;
		z-index: -10;
		display: block;
		font-size: 0;
	}
	
	.imageListEMobile {
		width: 0%;
		height: 0%;
	}

	
	
	.textBox {
		position: static;
		width: 1000px;
		height: auto;
		margin: 20px auto 20px auto;
		display: block;
		user-select: text;
	}
	.textBoxLine {
		position: static;
		width: 1000px;
		height: auto;
		margin: 20px auto 20px auto;
		display: block;
		user-select: text;
		outline: 5px solid green;
	}

	.textBoxText{
		font-family: verdana;
		font-size: 20px;
		padding: 0px 10px 0px 10px;
	}
	.textBoxCenteredTextBig{
		font-family: verdana;
		font-size: 40px;
		padding: 0px auto 0px auto;
		text-align: center;
	}
	.textBoxCenteredTextBigTwo{
		font-family: verdana;
		font-size: 55px;
		padding: 0px auto 0px auto;
		text-align: center;
		font-weight: 900;
	}
	.textBoxCenteredText{
		font-family: verdana;
		font-size: 18px;
		padding: 0px auto 0px auto;
		text-align: center;
	}
	.textBoxCenteredTextSmall{
		font-family: verdana;
		font-size: 14px;
		padding: 0px auto 0px auto;
		text-align: center;
	}
	.textBoxCenteredReg{
		font-family: verdana;
		font-size: 20px;
		padding: 0px auto 0px auto;
		text-align: center;
	}
	
	
	.infoBG{
		background-image: url("images/infobg.png");
		height: 700px;
		width: 100%;
		position: absolute;
		z-index: -10;
	}
	
	.hikeListE {
		position: static;
		padding: 16px 0px 0px 0%;
		margin: 0px auto 0px auto;
		width: 80%;
		z-index: 99;
	}
	
	
	
	.button {
		display: block;
		width: 100%;
		border: none;
		background-color: green;
		padding: 14px 0px;
		font-size: 16px;
		cursor: pointer;
		text-align: center;
	}
	
	
	/* Content Wrappers */
	.contentWrapper {
		position: absolute;
		width: 100%;
		background-color: #FFF;
		top: 66px;
		z-index: 0;
	}
	

	.contentWrapperNW{
		position: absolute;
		width: 100%;
		top: 66px;
		z-index: 0;
	}
	
	/* Footer main page */
	.footert{
		width: 328px;
		font-size: 17px;
		margin: 19px auto;
		z-index: 0;
	}

	/* Footer other */
	.footer2{
		position: static;
		width: 100%;
		height: 68px;
		margin: 20px auto 0px auto;
	}

	/* Footer other other */
	.footer3{
		position: static;
		width: 100%;
		height: 68px;
		margin: 0px auto 0px auto;
	}
	
	.colors {
		padding: 1.2% 0px 0px 6.5%;
	}
	
	.imageRepository {
		position: static;
		width: 98%;
		padding: 0px;
		height: auto;
		display: block;
	}
	
	.imageRepository img {
		width: 50%;
	}
	
}

.map {
	position: static;
	width: 100%;
	height: 500px;
	margin: 0px auto 3px auto;
	display: block;
}
.map2 {
	position: static;
	width: 100%;
	height: 300px;
	margin: 0px auto 0px auto;
	display: block;
}


/* Page */
.containerList {
	width: 100%;
	z-index: 2;
}

.pageContent {
	position: static;
	padding: 0% 0px 0px 0%;
	z-index: 99;
}

.pageContentVom {
	position: static;
	padding: 0% 0px 0px 2%;
	z-index: 99;
}


.backgroundList {
	position: absolute;
	width: 100%;
	z-index: -1;
	padding: 0px 0px 0px 0%;
	margin: 0px;
	display: block;
	font-size: 0;
}


.imageCrop {
	position: static;
	z-index: -10;
	display: block;
	font-size: 0;
	object-fit: none;
	width: 100%;
	height: 100px;
}

/* Individual Hike Page */
.vom {
	position: absolute;
	width: 20%;
	height:0px;
	padding: 49.3% 0px 0px 0%;
	z-index: 7;
	display: block;
}
.vspom {
	position: absolute;
	width: 20%;
	padding: 49.3% 0px 0px 23%;
	z-index: 6;
	display: block;
}



.textBoxBreak{
	padding: 0px 0px 10px 0px;
}



#toggler {
	  opacity: 0;
	  pointer-events: none;
	  touch-action: none;
}

.dropdown {
    display: none;
    position: fixed;
    top: 66px;
	height: 103px;
	background-color: #FFF;
    flex-direction: column;
    border: 3px solid green;
    gap: 0px;
	left: 524px;
	z-index: 109;
}
.dropdownMobile {
    display: none;
	width: 100%;
	gap: 0px;
}

.dropdownMobileBreak {
    width: 100%;
	height: 20px;
}

#toggler:checked ~ .dropdown {
    display: flex;
}

#toggler:checked ~ .dropdownMobile {
    display: block;
}

.listli {
	font-size: 0px;
}

a:link {
  text-decoration: none;
	color: black;
}

a:visited {
  text-decoration: none;
	color: black;
}

a:hover {
  text-decoration: none;
	color: blue;
}

a:active {
  text-decoration: none;
	color: blue;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}