body {
	margin: 0;
	background-color: rgba(34, 64, 18, 1);
}

.videos {
	display: flex;
	position: relative;
	width: 100%;
	min-width: 1100px;
	margin: 0;
}

.videos video {
	width: 100%;
	height: auto;
}

.header {
	border-top: 2px solid rgba(34, 64, 18, 0.5);
}

.hide {
	display: none;
}

.initial {
	width: 100%;
	display: block;
}




/**** PAGE TITLE ****/
/**** PAGE TITLE ****/
/**** PAGE TITLE ****/
/**** PAGE TITLE ****/
.page-title {
	display: block;
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 98;
}

.page-title p {
	font-family: foco, sans-serif;
	font-size: 18px;
	font-weight: 600;
/* 	color: #ffffff; */
/* 	background-color: rgba(86, 149, 52, 1.0); */
	border-radius: 10px;
	padding: 12px 45px 12px 30px;
	margin: 0;
}




/* ITH TITLE ACCORDION */
/* ITH TITLE ACCORDION */
/* ITH TITLE ACCORDION */
/* ITH TITLE ACCORDION */
/* Style the buttons that are used to open and close the accordion panel */
.ith-title-accordion {
/*   background-color: #eee; */
  color: rgba(86, 149, 52, 1.0);
  cursor: pointer;
  background-color: rgba(255, 255, 255, 1.0);
  border-radius: 10px;
/*
  padding: 18px;
  width: 100%;
*/
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  min-width: 380px;
  box-shadow: 0 0 24px rgba(0,0,0,0.4);
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.ith-title-accordion.active, .ith-title-accordion:hover {
	color: #ffffff;
	background-color: rgba(86, 149, 52, 1.0);
}

.ith-title-accordion:after {
  content: '\002B'; /* Unicode character for "plus" sign (+) */
  font-size: 26px;
  color: rgba(86, 149, 52, 1.0);
  float: right;
  margin-left: 5px;
  margin-top: -40px;
  padding-right: 15px;
}

.ith-title-accordion:hover:after {
  color: #ffffff;
}

.ith-title-accordion.active:after {
  content: "\2212"; /* Unicode character for "minus" sign (-) */
  color: #ffffff;
}

/* Style the accordion panel. Note: hidden by default */
.ith-title-panel {
  padding: 0 20px;
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  position: absolute;
  top: 70px;
	left: 15px;
	border-radius: 10px;
	width: 340px;
	z-index: 100;
	box-shadow: 0 0 24px rgba(0,0,0,0.4);
	cursor: pointer;
}

.ith-title-panel p {
	font-family: foco, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	text-align: left;
	color: #444444;
}

.ith-side-panel {
	padding: 0 35px 0 20px;
	background-color: #ffffff;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.8s ease-out;
	position: absolute;
	top: 15px;
	right: 15px;
	border-radius: 10px;
	width: 415px;
	z-index: 100;
	box-shadow: 0 0 24px rgba(0,0,0,0.4);
	cursor: pointer;
}

.ith-side-panel .inner-panel {
	padding-bottom: 15px;
}

.ith-side-panel h1 {
	font-family: foco, sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
	color: rgb(86, 149, 52);
	margin-block-start: 1em;
	margin-block-end: 0.8em;
	border-bottom: 1px solid rgba(86, 149, 52, 0.2);
	padding-bottom: 15px;
}

.ith-side-panel h2 {
	font-family: foco, sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	color: rgb(86, 149, 52);
	margin: 5px 0 5px 0;
}

.ith-side-panel p {
	font-family: foco, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	text-align: left;
	color: #444444;
	margin-block-start: 0em;
	margin-block-end: 0.6em;
}

.ith-side-panel ul {
	padding-inline-start: 22px;
	margin-block-start: 0em;
	margin-block-end: 0.6em;
}

.ith-side-panel li {
	font-family: foco, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	text-align: left;
	color: #444444;
	margin: 0 0 5px 0;
}

.ith-side-panel strong {
	font-weight: 700;
}




/**** FACILITY MENU BUTTONS ****/
/**** FACILITY MENU BUTTONS ****/
/**** FACILITY MENU BUTTONS ****/
/**** FACILITY MENU BUTTONS ****/
.facility-menu-btns {
	display: none;
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 98;
}

.facility-menu-btns ul {
	list-style-type: none;
	padding-inline-start: 0px;
	margin-block-start: 0;
	margin-block-end: 1em;
	width: 185px;
}

.facility-menu-btns li {
	margin-bottom: 12px;
	border-radius: 10px;
}

.facility-menu-btns li a {
	display: block;
	font-family: foco, sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	color: #ffffff;
	background-color: rgba(86, 149, 52, 0.6);
	border-radius: 10px;
	padding: 12px 20px;
	transition: 0.3s;
}

.facility-menu-btns li a:hover {
	background-color: rgba(86, 149, 52, 1.0);
}




/**** INITIAL PLAY BUTTON SCREEN ****/
/**** INITIAL PLAY BUTTON SCREEN ****/
/**** INITIAL PLAY BUTTON SCREEN ****/
/**** INITIAL PLAY BUTTON SCREEN ****/
.play {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	top: 0;
	background-color: rgba(106, 166, 63, 0.5);
}

.play svg .fil1 {
	fill: #fff;
}

.play svg:hover .fil1 {
	fill: #1f5919;
}

.play svg:hover {
	cursor: pointer;
}




/**** SCREEN ROTATION WARNING ****/
/**** SCREEN ROTATION WARNING ****/
/**** SCREEN ROTATION WARNING ****/
/**** SCREEN ROTATION WARNING ****/
@media only screen and (max-width: 450px) {
	.show-below-450 {
		display: block !important;
		color: red;
		padding-left: 0;
		padding-right: 0;
	}
}




/**** 1300 PX SCREEN ****/
/**** 1300 PX SCREEN ****/
/**** 1300 PX SCREEN ****/
/**** 1300 PX SCREEN ****/
@media only screen and (min-width: 1300px) {

}




/**** 1500 PX SCREEN ****/
/**** 1500 PX SCREEN ****/
/**** 1500 PX SCREEN ****/
/**** 1500 PX SCREEN ****/
@media only screen and (min-width: 1500px) {

}




/**** 1600 PX SCREEN ****/
/**** 1600 PX SCREEN ****/
/**** 1600 PX SCREEN ****/
/**** 1600 PX SCREEN ****/
@media only screen and (min-width: 1600px) {

}




/**** HOTSPOT ZONE ****/
/**** HOTSPOT ZONE ****/
/**** HOTSPOT ZONE ****/
/**** HOTSPOT ZONE ****/
.hotspotzone1, .hotspotzone2 {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	transition: opacity 300ms ease-in;
	opacity: 0;
	visibility: hidden;
/* 	z-index: 200; */
}




/**** HOTSPOT POPUP WINDOW ****/
/**** HOTSPOT POPUP WINDOW ****/
/**** HOTSPOT POPUP WINDOW ****/
/**** HOTSPOT POPUP WINDOW ****/
.map-popup {
	position: absolute;
	top: 60%;
	left: 75px;
	width: 340px;
	transform: translateY(-58%);
	z-index: 99;
	padding: 1.5rem;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 24px rgba(0,0,0,0.4);
	transition: all 300ms ease-in;
	opacity: 0;
	visibility: hidden;
}

.map-popup > *:first-child { margin-top: 0; }
.map-popup > *:last-child { margin-bottom: 0; }

.map-popup.open {
	opacity: 1;
	visibility: visible;
}

.map-popup:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -16px;
	margin-top: -16px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 16px 16px 0;
	border-color: transparent #fff transparent transparent;
}

.map-popup.left {
	left: -405px;
	transform: translateY(-62%);
}
.map-popup.left:before {
	left: 387px;
	border-width: 16px 0px 16px 16px;
	border-color: transparent transparent transparent #fff;
}

.map-popup.top {
	left: -166px;
	transform: translateY(-140%);
}
.map-popup.top:before {
	top: 110%;
	left: 170px;
	border-width: 16px 16px 0px 16px;
	border-color: #fff transparent transparent transparent;
}

.map-popup.bottom {
	left: -167px;
	transform: translateY(6%);
}
.map-popup.bottom:before {
	top: 0%;
	left: 170px;
	border-width: 0px 16px 16px 16px;
	border-color: transparent transparent #fff transparent;
}

.map-popup.edge {
	left: auto;
	right: calc(100% + 24px);
}
.map-popup.edge:before {
	left: auto;
	right: -16px;
	border-width: 16px 0 16px 16px;
	border-color: transparent transparent transparent #fff;
}




/**** HOTSPOT POPUP CONTENT ****/
/**** HOTSPOT POPUP CONTENT ****/
/**** HOTSPOT POPUP CONTENT ****/
/**** HOTSPOT POPUP CONTENT ****/
.map-popup h1, .map-popup a {
	font-family: foco, sans-serif;
	color: rgba(85, 147, 41, 0.95); 
}
	
.map-popup h1, .modal-content h1 {
	font-size: 20px;
	line-height: 1.1;
	margin-block-end: 0.3em;
}
	
.map-popup p, .modal-content p {
	font-family: foco, sans-serif;
	font-weight: 300;
	color: #444444;
	margin-block-start: 0.2em;
}
	
.map-popup a, .modal-content a {
	font-weight: 600;
}

.map-item {
	position: absolute;
	width: 36px;
	height: 36px;
}
.map-item .marker {
	top: auto;
	left: auto;
}




/**** HOTSPOT MARKER ****/
/**** HOTSPOT MARKER ****/
/**** HOTSPOT MARKER ****/
/**** HOTSPOT MARKER ****/
.marker {
	position: absolute;
	z-index: 1;
	display: inline-block;
	transform: translate(-50%, -50%);
	transform-origin: center center;
}




/**** HOTSPOT MARKER ****/
/**** HOTSPOT MARKER ****/
/**** HOTSPOT MARKER ****/
/**** HOTSPOT MARKER ****/
.marker ul {
	display: flex;
	position: relative;
	gap: 25px;
}

.marker ul li {
	position: relative;
	list-style: none;
	width: 50px;
	height: 50px;
	background: rgba(85, 147, 41, 0.95);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	border-radius: 60px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
}

.marker ul li::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 60px;
	background: linear-gradient(45deg, var(--i), var(--j));
	opacity: 0;
	transition: 0.5s;
}

.marker ul li::after {
	content: "";
	position: absolute;
	top: 10px;
	width: 100%;
	height: 100%;
	border-radius: 60px;
	background: linear-gradient(45deg, var(--i), var(--j));
	transition: 0.5s;
	filter: blur(15px);
	z-index: -1;
	opacity: 0;
}

.marker ul li:hover {
	width: 240px;
	z-index: 99999;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
}

.marker ul li:hover::before {
	opacity: 1;
}

.marker ul li:hover::after {
	opacity: 0.5;
}

.marker ul li .icon {
	font-family: foco, sans-serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 23px;
	transition: 0.5s;
	transition-delay: 0.25s;
}

.marker ul li:hover .icon {
	transform: scale(0);
	color: #ffffff;
	transition-delay: 0s;
}

.marker ul li span {
	position: absolute;
}

.marker ul li .title {
	font-family: foco, sans-serif;
	font-weight: 600;
	text-align: center;
	color: #ffffff;
	font-size: 1.0em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transform: scale(0);
	transition: 0.5s;
	transition-delay: 0s;
	line-height: 1.1;
}

.marker ul li:hover .title {
	transform: scale(1);
	transition-delay: 0.25s;
}




/**** MODAL WINDOW ****/
/**** MODAL WINDOW ****/
/**** MODAL WINDOW ****/
/**** MODAL WINDOW ****/

.modal {
	position: absolute;
	z-index: 500;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(85, 147, 41, 0.5);
	transition: all 300ms ease-in;
	opacity: 0;
	visibility: hidden;
}

.modal.open {
	opacity: 1;
	visibility: visible;
}

.modal-content {
	font-family: foco, sans-serif;
	background-color: #ffffff;
	margin: 4% auto;
	padding: 20px;
	width: 500px;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: 0 0 24px rgba(0,0,0,0.3);
}

.modal-content h1 {
	font-size: 20px;
	font-weight: 700;
	margin-block-start: 0.4em;
	margin-block-end: 0.3em;
	color: #1f5919;
}

.modal-content p {
	color: #444444;
}

.modal-content a {
	text-decoration: none;
	color: #1f5919;
	color: rgba(86, 149, 52, 1);
}

.modal-content a:hover {
	color: #1f5919;
}

.modal-content img {
	width: 500px;
}

.close {
	color: #1f5919;
	font-size: 30px;
	font-weight: bold;
	margin: -20px -36px 0 463px;
	position: absolute;
	background-color: #ffffff;
	padding: 20px;
	line-height: 10px;
	border-radius: 50%;
}

.close:hover,
.close:focus {
	color: #1f5919;
	text-decoration: none;
	cursor: pointer;
}




/**** FOOTER ****/
.footer {
	position: absolute;
	bottom: 15px;
	width: 100%;
	height: 50px;
	min-width: 1100px;
}

/* Create a top navigation bar with a black background color  */
.ithnav {
	height: 50px;
	margin-left: 8px;
	margin-right: 8px;
	overflow: hidden;
}

/* Style the links inside the navigation bar */
.ithnav a {
	float: left;
	font-family: foco, sans-serif;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border-radius: 8px;
	padding: 15px 26px;
	margin-right: 4px;
	margin-left: 4px;
	background-color: rgba(73, 134, 40, 0.8);
	transition: 0.3s;
}

/* Change the color of links on hover */
.ithnav a:hover {
	background-color: rgba(66, 124, 35, 1);
}

/* Create a right-aligned (split) link inside the navigation bar */
.ithnav a.split {
	float: right;
	background-color: rgba(73, 134, 40, 0.8);
	color: #ffffff;
}

.ithnav a.split:hover {
	background-color: rgba(66, 124, 35, 1);
}




/* MAIN MENU OVERLAY */
/* MAIN MENU OVERLAY */
/* MAIN MENU OVERLAY */
/* MAIN MENU OVERLAY */
.overlay {
	/* Height & width depends on how you want to reveal the overlay (see JS below) */   
	height: 0;
	width: 100%;
	opacity: 0;
	position: fixed; /* Stay in place */
	z-index: 100; /* Sit on top */
	left: 0;
	top: 0;
	background-color: rgba(34, 64, 18, 0.9); /* Black w/opacity */
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: opacity 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
	font-family: foco, sans-serif;
	position: relative;
	top: 15%; /* 25% from the top */
	width: 100%; /* 100% width */
	text-align: center; /* Centered text/links */
	margin-top: -20px;
}

.overlay-content h1 {
	margin-block-start: 0;
	margin-block-end: 0.4em;
}

.overlay-content h2 {
	margin-block-end: 0.2em;
}

/* The navigation links inside the overlay */
.overlay a {
	padding: 4px 8px 4px 8px;
	text-decoration: none;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.7);
	display: block; /* Display block instead of inline */
	transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
	color: #ffffff;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
	position: absolute;
	top: 20px;
	right: 45px;
	font-size: 40px;
}

.columns {
	display: flex;
}

.equal-columns > * {
	flex: 1;
}



/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
	.overlay a {font-size: 20px}
	.overlay .closebtn {
		font-size: 40px;
		top: 15px;
		right: 35px;
	}
}