div.extramenubar
	{
		position:absolute;
		visibility:visible;
		padding-left: 10px;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 15px;
		color: white;
		text-align: left;
		top:-25%; 
		height:auto;
		line-height:150%;
		right: 0px;
		width: auto; 
		background-color: #006666; 
		z-index: 4; 
		
	}
	.portraitbackground {
			position:fixed;
			display:inline-block;
			width:100%;
			background-image: url("../Image-assets/system/FrontPage1.jpg");
			height: 100%;
		 	background-size:cover;
			background-position: center;
			z-index: 2;
	}
	.landscapebackground {
			position:fixed;
			display:inline-block;
			width:100%;
			background-image: url("../Image-assets/system/newacerglade-2020-low.jpg");
			height: 100%;
		 	background-size:cover;
			background-position: center;
			z-index: 2;
	}

	.fixedwhitebackground {
			position:absolute;
			display:block;
			top:0px;
			width:100%;
			height: 100%;
		 	background-color:white;
			z-index: 2;
			overscroll-behavior-y:	contain; 
			overscroll-behavior-x:	contain;
			font-size:  calc(0.5vmax + 1vmin); 
			color:black; 
	}

	.divnoscrollbars {
		background-color: white;
		border: 1px solid black;
		border-radius: 4px;
		overflow-y: scroll; /* Add the ability to scroll */
		visibility:hidden;
		position:absolute;
		width: 98%; 
		max-width: 400px; 
		left:1%; 
		height:98%; 

		z-index:7;
		}
			
	
		/* Hide scrollbar for Chrome, Safari and Opera */
		.divnoscrollbars::-webkit-scrollbar {
			display: none;
			background: transparent;
			width: 0px;
		}

		/* Hide scrollbar for IE, Edge and Firefox */
		.divnoscrollbars {
		  -ms-overflow-style: none;  /* IE and Edge */
		  scrollbar-width: none;  /* Firefox */
		}


	 .swiper-container 
			{
			  width: 100%;
			  height: 100%;
			}

    .swiper-slide 
			{
			  text-align: center;
			  font-size: 18px;
			  background: #fff;

			  /* Center slide text vertically */
			  display: -webkit-box;
			  display: -ms-flexbox;
			  display: -webkit-flex;
			  display: flex;
			  -webkit-box-pack: center;
			  -ms-flex-pack: center;
			  -webkit-justify-content: center;
			  justify-content: center;
			  -webkit-box-align: center;
			  -ms-flex-align: center;
			  -webkit-align-items: center;
			  align-items: center;
			}

	.POIinfoscroll 
		{
		position:relative;
		width:70%;
		top:5%;
		z-index:6; 
		height: auto;
		max-height: 250px;
		margin:auto;
		max-width:300px;  
		background-color: white;
		visibility:hidden;
		display:none;
		overflow: hidden;
		border-top: 1px solid black;
		border-left: 1px solid black;
		border-right: 2px solid #857E7E;
		border-bottom: 2px solid #857E7E;
		border-radius: 4px;
		}

	.walkimages
	{
			position:fixed;
			display:inline-block;
			width:auto;
			right:0px;
			background-color: white;
			overflow:scroll;
			height: 95%;	
	}
			/* Hide scrollbar for Chrome, Safari and Opera */
		.walkimages::-webkit-scrollbar {
			display: none;
		}

		/* Hide scrollbar for IE, Edge and Firefox */
		.walkimages {
		  -ms-overflow-style: none;  /* IE and Edge */
		  scrollbar-width: none;  /* Firefox */
		}
	.walkimagerows
	{
			position:relative;
			display:block;
			width: 100%;	
	}	

		.walkinfocardb
	{
			position:relative;
			display:none;
			width:90%;
			text-align: center;
			color: black;
			background-color: white;
			font-size: 0.8em;
			font-weight:normal;
			border: 2px solid black; 
			border-radius: 4px; 
			margin:4px;
			min-height: 120px;
			height:auto; 
			z-index:4;
	}
		.postcardb
	{
			position:relative;
			display:none;
			width:90%;
			text-align: center;
			color: black;
			background-color: white;
			font-size: 0.8em;
			font-weight:normal;
			border: 0.5px solid black; 
		 	box-shadow: rgb(0 0 0 / 20%) 0px 2px 2px 2px;
			border-radius: 4px; 
			margin:4px;
			min-height: 120px;
			height:auto; 
	}
		.mediainfocard
	{
			position:relative;
			display:none;
			width:90%;
			text-align: center;
			color: black;
			background-color: white;
			font-size: 0.8em;
			font-weight:normal;
			border: 2px solid black; 
			border-radius: 4px; 
			margin:4px;
			min-height: 120px;
			height:auto; 
			z-index:4;
	}
		.directionsinfocard
	{
			position:relative;
			display:none;
			width:90%;
			text-align: center;
			color: black;
			background-color: white;
			font-size: 0.8em;
			font-weight:normal;
			border: 2px solid black; 
			border-radius: 4px; 
			margin:4px;
			min-height: 120px;
			height:auto; 
			z-index:4;
	}
		.trailinfocard
	{
			position:relative;
			display:none;
			width:90%;
			text-align: center;
			color: black;
			background-color: white;
			font-size: 0.8em;
			font-weight:normal;
			border: 2px solid black; 
			border-radius: 4px; 
			margin:4px;
			min-height: 120px;
			height:auto; 
			z-index:4;
	}	
	.charitylogodiv
	{
		position:relative;
		margin:auto;
	}
	
	body { margin: 0; 
		height:100%;}
			
	
	div.logobackground {
		margin:auto;
		display:block;
		width: 100px;
		height:auto;
		background: rgba(255, 255, 255, 1); 
		padding:10px;
		border-radius: 5px;

	}
	img.logo
	{
		display: block;
		width:100px;
		height:auto;	
		margin-left: auto;
		margin-right: auto;		
	}

	div.startlink
	{

		height:6%;
		font-size:20px;
		color: white;
		margin:auto;

	}
	div.walkDiv
			{
			position: relative;
			display:none;
			top:1px;
			height:95%;
			width:95%;
			max-width:500px;
			margin:auto;
			min-height: 75px;
			max-height: 115px;
			min-width: 350px;
			border-radius: 5px;
			background-color: #f2f2f2;
			border: 1px solid black;
			padding: 4pt;
			visibility: hidden;
			z-index: 2;
			}
		div.codeDiv
			{
			position: relative;
			top:30%;
			height:22%;
			width:95%;
			max-width:500px;
			margin:auto;
			min-height: 75px;
			max-height: 115px;
			min-width: 350px;
			border-radius: 5px;
			background-color: #f2f2f2;
			border: 1px solid black;
			padding: 4pt;
			z-index: 2;
			}
	div.bottomDiv
		{
		position:absolute;
		display:none;
		width:100%;
		height:22%;
		max-height:120px;
		bottom: 2px;
		overflow: hidden;
		z-index:1;
		}
	
	a.link
	{
		font-size:100%;
		color: white;
		text-decoration: none;
		cursor: pointer;
	}
	a:hover 
	{
  	background-color: blue;
	}
	
	div.menubar
	{
		position:absolute;
		height:auto;
		min-height: 4%;
		padding-top: 5px;
		padding-left: 5px;
		color: white;
		left:0px;
		background-color: #006666; 
		z-index:5;
		touch-action: none;
		font-size:12pt;
	}


		div.infobar
	{
		position:relative;
		display:block;
		height:1%;
		padding-top: 5px;
		color: white;
		text-align: center;
	}

	div.message
	{

		height:5%;
		font-size:20px;
		color: white;
		text-align: center;
		margin-top: 5%;

	}			
	
	.logoutbutton {
		margin:auto;
		margin-top:15px;
	  	border: none;
		width:20%;
		max-width: 100px;
		height:30%;
		min-height: 25px;
	  	padding: 1px;
		color: white;
	  	text-align: center;
	  	text-decoration: none;
	  	display: inline-block;
	  	font-size: 12px;
		border: 2px solid #000000;
		background-color: #555555;
		text-decoration-color: white;
		border-radius: 12px;
		transition-duration: 0s;
		cursor: pointer;
		}
	.homepage 
	{
		position: relative; 
		display:block; 
		height:100%; 
		width:100%; 
		margin:auto;
		max-width:800px;
		padding:2px; 
		border-radius: 8px; 
		background: rgba(0, 0, 0, 0.5); 
		text-align:left; 
		touch-action: manipulation;
		color: white;
		overflow:hidden;
		
	}
		.homepage:hover {overflow-y: auto; }
		.homepage::-webkit-scrollbar {width: 10px; height: 8px; background: lightgreen;}
		.homepage::-webkit-scrollbar-thumb {background-color:darkgreen; border: 1px solid white;}	
		.homepage::-webkit-scrollbar-track {height:30px;}
	
	/* Hide scrollbar for Chrome, Safari and Opera */
		.homepage2::-webkit-scrollbar {
			display: none;
		}
		.homepage2 {
		  -ms-overflow-style: none;  /* IE and Edge */
		  scrollbar-width: none;  /* Firefox */
		}

	div.RAEbutton
		{
			display:none; 
			width:100px; 
			height:100px; 
			margin-left:auto;
			margin-right:auto;
		  -webkit-user-drag: none; /* For WebKit browsers (Chrome, Safari, etc.) */
		  -khtml-user-drag: none;  /* For Konqueror browser */
		  -moz-user-drag: none;    /* For Firefox */
		  -o-user-drag: none;      /* For Opera */
		  user-drag: none;         /* Standard property */
		}
	
		button.inputbutton {
			left:10px;
		  	border: none;
			width:75px;
			height:28px;
		  	padding: 2px;
			color: white;
		  	text-align: center;
		  	text-decoration: none;
		  	display: inline-block;
		  	font-size: 100%;
			border: 2px solid #000000;
			background-color: #555555;
			text-decoration-color: white;
			border-radius: 4px;
			transition-duration: 0s;
			cursor: pointer;
		}
		div.actionbutton {
			width:35%;
			max-width:120; 
			height:auto; 
			margin-top:10px;
			margin-bottom:10px;
			padding:2px;
			color: black;
		  	text-align: center;
		  	text-decoration: none;
		  	display: inline-block;
		  	font-size: 100%;
			border: 1px solid black; 
			border-radius: 4px;
			background-color: bisque; 
			display:none; 
			cursor:pointer;
			box-shadow: 4px 4px #888;	
			border-radius: 4px;
		}

	.infoscroll 
		{
		position:absolute;
		width:70%;
		max-width:300px;  	
		z-index:6; 
		height: 50px;
		background-color: white;
		visibility:hidden;
		display:none;
		overflow: hidden;
		border-top: 1px solid black;
		border-left: 1px solid black;
		border-right: 2px solid #857E7E;
		border-bottom: 2px solid #857E7E;
		border-radius: 4px;
		}

 	button.signup :hover{
    background: #5757d1;
}
	button.signup {
    background: #6665ee;
    color: #fff;
    font-weight: 500;
	font-size:110%;
	width:180px;
	height:50px;
	border-radius: 4px;
	transition: all 0.3s ease;
}

/* Hide the browser's default checkbox */
	.checkboxA input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}

	/* Create a custom checkbox */
	.checkmark {
	  position: absolute;
	  top: 0;
	  right: 0px;
	  height: 25px;
	  width: 25px;
	  background-color: #eee;
	}

	/* On mouse-over, add a grey background color */
	.checkboxA:hover input ~ .checkmark {
	  background-color: #ccc;
	}

	/* When the checkbox is checked, add a blue background */
	.checkboxA input:checked ~ .checkmark {
	  background-color: #2196F3;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the checkmark when checked */
	.checkboxA input:checked ~ .checkmark:after {
	  display: block;
	}

	/* Style the checkmark/indicator */
	.checkboxA .checkmark:after {
	  left: 9px;
	  top: 5px;
	  width: 5px;
	  height: 10px;
	  border: solid white;
	  border-width: 0 3px 3px 0;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	}
table.walkwyse {font-size:100%;}
th {font-size:100%;}
tr	{font-size:100%;}