:root {
		--ColorLogo:	#A0E5FF;
		--ColorLink:	#FFFF80;
		--ColorPage:	#12284C;
		--ColorFoot:	#071a28;
		--ColorBack:	#030C12;
		--ColorLine:	#868600;
	}

	HTML						{ background-color: var(--ColorBack); height: 100%; }
	BODY						{ background-color: var(--ColorPage); }
	HTML, BODY					{ box-sizing: border-box; margin: 0px; }
	HTML.Home, HTML.Home BODY	{ height: 100%; }
	*, *:before, *:after		{ box-sizing: inherit; }

	/**************************/
	/* Cover Slider */
	HEADER.Home,
	.slider-container	{ width: 100%; height: 100%; position: relative; overflow: hidden; }
	.slide				{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease;
						background-size: cover; background-position: center; }
	.slide.active		{ opacity: 1; }
	.nav-button			{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 2em; color: white; cursor: pointer;
						  background-color: rgba(0, 0, 0, 0.5); padding: 10px; border: none; z-index: 20; } /* Ensure buttons are above other elements */
	.prev				{ left: 10px; }
	.next				{ right: 10px; }

	/**************************/
	/* Slider Text */
	.centered-text		{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 2em;
						  padding: 20px; text-align: center; z-index: 10; /* Ensure text is above the images */
						background-color: rgba(0, 0, 0, 0.3); /* Optional background for readability */
						border-radius: 5px; width: 80%; } /* Adjust width for wrapping */

	/**************************/
	/* Floating Header Styles (Initial Transparent) */
	.floating-header	{ position: absolute; top: 0; left: 0; width: 100%; z-index: 40; /* Ensure it's on top of everything */
						  display: flex; justify-content: space-between; align-items: center;
						  padding: 10px 20px; color: white;
						  }
	@keyframes navSlideDown	{
		from { -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); visibility:visible; }
		to	 { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
	}

	/****************************/
	/* Header: Logo				*/
	H1		{ font: 300 24pt Oswald,sans-serif; }
	H1,
	A.Logo	{ color: #A0E5FF; display: block; font-style: normal; text-shadow: 3px 3px 3px #000; margin: 0px; text-decoration: none; }
	HEADER.Home H1,
	A.Logo	{ font: 400 36pt "Rye", serif; }
	HEADER.Home H1	{ font-size: 20pt; }
	H1					{ margin: 0px 20px 0px 20px; position: relative; z-index: 5; border-top: 1px solid; padding-top: 15px; }
	HEADER.WithCover H1	{ margin: 15px 20px -60px 41px; background-color: #000000A0; padding: 6px 10px; width: fit-content;
				border-radius: 5px; border-width: 0px; line-height: 25pt; }
	HEADER.Home H1		{ margin: 80px 20px 0px 20px; background-color: transparent; padding: 15px; width: auto; border-radius: 0px; }

	/****************************/
	/* Header: Menu				*/
	.MenuList		{ list-style: none; padding: 0; margin: 0; display: none; }
	.MenuList LI:first-child	{ display: none; } /* by default, updates with JS */
	.MenuList LI:first-child A	{ background: url(/images/cart.svg) no-repeat; padding-left: 60px; background-size: auto 80%; background-position: 18px center; }

/*	not very efficient :(
	{{CartStyle Empty="UL.MenuList LI:first-child { display: none; }" Full="UL.MenuList LI:first-child { display: list-item; }"}}
	{{CartStyle Empty="UL.MenuList LI:first-child { display: none; }"}}
	{{CartStyle Full="DIV.Cart { display: block;}"}}
*/
	.MenuFrame LI	{ padding: 0px; margin: 0px; }
	.MenuFrame A	{ font: 14pt Monda,sans-serif; white-space: nowrap; text-decoration: none;
					  color: #FFF;
					  display: inline-block; padding: 5px 20px; }
	.MenuFrame A:Hover	{ text-decoration: underline; color: yellow; }
	/*	S=StickOn, StickOf	: On = scrolled down; Off = scrolled all the way to the top.
		M=MenuMob, MenuReg	: Mob = menu mobile; Reg = menu regular, desktop
		O=MobOpen, MobClos	: Open = mobile menu open; Clos = mobile menu closed. Desktop doesn't matter
	*/
	.MenuFrame.M.O	{ overflow: auto; background: #000000E0; }
	.MenuFrame.M.O UL	{ display: block; }
	.MenuFrame.M.O S	{ display: block; margin: 10px 20px; }

	/****************************/
	/* New Menu					*/
	#idHeader   NAV A		{ color: #FFF; transition: color 1.5s ease; text-shadow: 1px 1px 1px #000; background-color: #00000060; margin: 0px 0px 0px 5px; border-radius: 5px; }
	#idHeader #MenuBar		{ Zposition: absolute; z-index: 30; background-color: transparent; transition: background-color 1s ease; }
	#idHeader.S NAV A		{ xcolor: #FFF; transition: color 1.5s ease; text-shadow: none; xbackground-color: transparent; margin: 0px 0px 0px 5px; border-radius: 0px; }
	#idHeader.M.S NAV A,
	#idHeader.S.M NAV A		{ color: #FFF; }

	#idHeader.S #MenuBar	{ Zposition: fixed; background-color: #12284C; transition: background-color 1s ease; }

	/****************************/
	/* Common Styles */
	#MenuBar		{ position: sticky; }
	HEADER,
	MAIN			{ max-width: 1200px; margin: 0px auto; }
	MAIN.Blue		{ color: #FFF; padding: 0px 20px 20px; min-height: 320px; }
	MAIN.Blue A		{ color: #FFFF80; }
	MAIN H2			{ font: 300 26pt Oswald,sans-serif; }
	MAIN H3			{ font: 300 20pt Oswald,sans-serif; }
	MAIN H4			{ font: 600 16pt Monda,sans-serif; }
	MAIN.Blue H2,
	MAIN.Blue H3,
	MAIN.Blue H4	{ color: var(--ColorLogo); text-shadow: 3px 3px 3px #000; }
	MAIN P, MAIN LI	{ font: 13.5pt 'PT Sans',sans-serif; }
	MAIN ADDRESS	{ font: 14pt 'Monda',sans-serif; line-height: 16pt; font-style: normal; }

	DIV.White		{ background-color: #FFF; width: 100%; margin-top: 15px; }
	MAIN.White		{ color: #000; padding: 20px; min-height: 320px; }
	MAIN.White A	{ color: #000070; }
	HR				{ border-color: var(--ColorLine); clear: both; }

	/****************************/
	/****************************/
	/* Home Page Body */


	HEADER.Home 					{ max-width: none; }
	HEADER.Home #MenuBar		{ position: absolute; }

	HTML.Home #idHeader.S #MenuBar		{ position: fixed; }
	HTML.Home MAIN	{ margin: 0px; width: 100%; max-width: none; background-color: #12284C ! important; } /* rgb(18, 40, 76) #12284C; */
	HTML.Home ARTICLE	{ width: 100%; max-width: 1400px; font: 13.5pt "PT Sans",sans-serif; padding: 40px 30px; margin: 0px auto; border-bottom: 2px solid var(--ColorLine); }
	HTML.Home ARTICLE P, ARTICLE LI, ARTICLE A	{ color: #FFF; }
	HTML.Home ARTICLE H2	{ font: 300 20pt Oswald,sans-serif; color: #A0E5FF; text-shadow: 3px 3px 3px #000; }

	HTML.Home DIV.Swag		{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
	HTML.Home DIV.Swag P	{ white-space: nowrap; justify-content: center; margin-block-start: 0px; margin-block-end: 0px; margin: 0px; display: flex; gap: 10px;}
/*
	HTML.Home DIV.Swag IMG	{ width: 50%; max-width: 630px; display: inline-block; border: 15px solid white; border-radius: 10px; }
	HTML.Home DIV.Swag IMG:hover	{ border-color: yellow; }
*/
	HTML.Home DIV.Swag A	{ width: 50%; display: inline-block; border: 15px solid white; border-radius: 10px; }
	HTML.Home DIV.Swag IMG	{ width: 100%; max-width: 630px; }
	HTML.Home DIV.Swag A:hover	{ border-color: yellow; }

	@media screen and (max-width: 520px)  {
		HTML.Home DIV.Swag P	{ flex-direction: column; align-items: center; }
		HTML.Home DIV.Swag A	{ width: 100%; }
	}

	/****************************/


	#idHeader.M	NAV.MenuFrame	{ background: #000000E0; }
	#idHeader.M	#menuList		{ display: none; }

	#idHeader.M	#menuFrame		{ position: fixed; right: 0px; top: 0px;
								  transition: right 1s cubic-bezier(0, 1.19, 0.16, 1.1); }

	#idHeader U,
	#idHeader S	{ text-decoration: none; display: none; text-align: right; margin: 10px 20px;
					  cursor: pointer; line-height: 30px; }
	#idHeader U		{ font-size: 30pt; font-weight: bold; }
	#idHeader S		{ font-size: 22pt; }
	#idHeader.M U	{ display: block; }



	/****************************/
	/* Join */
	HTML.Join H3			{ text-align: center; margin: 30px 0px 5px; }
	HTML.Join H3 SPAN		{ white-space: nowrap; }
	HTML.Join IMG.PayPal	{ border: 6px solid #00b9ff; border-radius: 10px; padding: 10px; background-color: #FFF; width: 100%; max-width: 280px; }
	#PayPalRight			{ float: right; display: block; margin: 0px 0px 10px 10px; }
	#PayPalCenter			{ display: none; }

	HTML.Join FORM			{ border: 10px solid #25529C; border-radius: 10px; display: block; margin: 0px auto; padding: 10px 20px; width: fit-content; }
	HTML.Join FORM P, HTML.Join FORM DIV, HTML.Join FORM LABEL, HTML.Join FORM SELECT, HTML.Join FORM INPUT[type=text], HTML.Join FORM SMALL
							{ font: 13.5pt 'PT Sans',sans-serif; }
	HTML.Join FORM P		{ color: #000; background-color: #9FFF9F; max-width: 520px; padding: 5px 10px; }
	HTML.Join FORM P B	{ font-weight: normal; background-color: red; color: white; display: inline-block; padding: 1px 5px; border-radius: 3px; }
	HTML.Join FORM DIV		{ margin: 5px 0px; text-align: right; }
	HTML.Join FORM LABEL	{ display: inline-block; margin-right: 10px; }
	HTML.Join FORM SELECT	{ width: 220px; }
	HTML.Join FORM SMALL	{ display: block; background-color: var(--ColorLogo); color: #000; margin: 0px 0px 5px; border-radius: 5px;
			padding: 5px 10px; max-width: 520px; text-align: justify; }
	HTML.Join FORM INPUT[type=text]		{ width: 220px; }
	HTML.Join FORM INPUT[type=submit]	{ display: block; border: 1px solid #9E9E9E; font: 14pt Monda,sans-serif;
		    border-radius: 3px; padding: 0px 7px; text-align: center; color: #333; margin: 10px auto;
		    background: #E5E5E5 linear-gradient(#F8F8F8, #D8D8D8); text-shadow: #FFF 1px 1px 0; cursor: pointer;
		    white-space: nowrap; text-decoration: none; text-shadow: #FFF 1px 1px 0; }
	@media screen and (max-width: 640px) {
		HTML.Join FORM DIV		{ text-align: left; }
		HTML.Join FORM LABEL	{ display: block; }
		HTML.Join FORM INPUT[type=text],
		HTML.Join FORM SELECT	{ width: 100%; }
	}
	@media screen and (max-width: 530px) {
		#PayPalRight			{ display: none; }
		#PayPalCenter			{ display: block; margin: 0px auto; }
	}

	/****************************/
	/* Footer */
	FOOTER			{ background-color: var(--ColorFoot); color: #AAA; font: 12pt 'PT Sans',sans-serif; padding: 40px 5px 0px; text-align: center; }
	FOOTER UL		{ max-width: 1200px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0px auto; border-bottom: 1px solid var(--ColorLine); padding: 0px 50px; width: fit-content; }
	FOOTER UL LI	{ padding: 4px 20px; border-left: 1px solid #FFFF2C; margin-bottom: 20px; white-space: nowrap; border-collapse: collapse; }
	FOOTER UL LI:first-child,					/* Set by default */
	FOOTER UL LI.first	{ border-width: 0px; }	/* Set on resize */
	FOOTER A		{ color: var(--ColorLink) ; text-decoration: none; }
	FOOTER LI A		{ color: #FFF; }
	FOOTER A:hover	{ color: var(--ColorLogo); }
	FOOTER P		{ text-align: left; margin-left: auto; margin-right: auto; padding: 0px 1em; }
	FOOTER SECTION.Notes	{ max-width: 1200px; margin: 0px auto; }
	FOOTER SECTION.Credits	{ background-color: var(--ColorBack); width: 100%; }
	FOOTER DIV.Footer	{ max-width: 880px; padding: 0px; width: 100%; margin: 30px auto 0px; padding: 30px 20px 0px;
						  display: flex; align-items: flex-start; justify-content: space-between; }
	FOOTER FIGURE		{ margin: 0px; width: fit-content; }
	FOOTER FIGCAPTION	{ }
	FOOTER IMG			{ width: 100%; display: block; }
	FOOTER FIGURE.Fabook		{ float: right; margin: 0px 1em 1em; padding: 3px 10px 10px; border: 2px solid #0866FF70; border-radius: 5px; }
	FOOTER FIGURE.Fabook B		{ font-size: 11pt; font-weight: normal; color: #AAA; display: none; }
	FOOTER FIGURE.Fabook IMG	{ max-width: 40px; margin: 0px auto; }
	FOOTER FIGURE.Secure IMG	{ max-width: 120px; }
	FOOTER FIGURE.Design IMG	{ max-width: 140px; box-sizing: content-box; padding: 2px 4px; background-color: #000; }
	FOOTER DIV.Copy		{ color: #AAA; margin: 0px; padding: 20px 0px; }
	FOOTER #Copy2		{ display: none; background-color: var(--ColorBack); padding: 20px 20px 40px; }
	FOOTER #Copy2 SPAN	{ white-space: nowrap; }

	@media screen and (max-width: 800px) {
		FOOTER P	{ padding: 0px 1em; }
	}
	@media screen and (max-width: 700px) {
		FOOTER #Copy1	{ display: none; }
		FOOTER #Copy2	{ display: block; }
	}
	@media (min-width: 10px) and (max-width: 600px) {
		FOOTER UL		{ margin: 0px auto 40px; padding: 0px; }
		FOOTER UL LI	{ padding: 4px 10px; }
		FOOTER FIGURE.Fabook	{ margin-top: 0px; }
	}
	@media screen and (max-width: 370px) {
		FOOTER FIGURE.Fabook		{ float: none; margin: 0px auto 1em; padding: 5px 10px; }
		FOOTER FIGURE.Fabook B		{ display: block; }
		FOOTER DIV.Footer	{ align-items: center; justify-content: flex-start; flex-direction: column; }
		FOOTER FIGURE.Design	{ margin-top: 30px; }
		FOOTER FIGURE.Fabook IMG	{ max-width: 84px; }
		FOOTER FIGURE.Secure IMG	{ max-width: 200px; }
		FOOTER FIGURE.Design IMG	{ max-width: 250px; }
	}

/*
	{ display: grid; grid-template-columns: 1fr 200px 1fr; align-items: start; }
	.SecuredBy		{ margin-bottom: 70px; }
	#SecuredBy		{ max-width: 120px; }
	FOOTER DIV.Footer	{ display: grid; grid-template-columns: 1fr 200px 1fr; align-items: start; padding-top: 40px; width: 100%; background-color: var(--ColorBack); color: #AAA; }
	FOOTER DIV.Gap		{ border: 1px solid red; }

	FOOTER DIV.Credit	{ border: 1px solid green; justify-self: end; display: block; }
	FOOTER .Credit		{ font-size: 12pt; color: #DDD; }

*/

/*	v.2
	FOOTER DIV.Footer	{ max-width: 860px; padding: 0px; width: 100%; margin: 30px auto;
						  display: flex; align-items: flex-start; justify-content: space-between; }
	FOOTER FIGURE		{ margin: 0px; width: fit-content; }
	FOOTER FIGCAPTION	{ }
	FOOTER IMG			{ width: 100%; display: block; }
	FOOTER FIGURE.Secure IMG	{ max-width: 120px; }
	FOOTER FIGURE.Design IMG	{ max-width: 140px; box-sizing: content-box; padding: 2px 4px; background-color: #000; }
	FOOTER DIV.Copy		{ background-color: var(--ColorBack); color: #AAA; margin: 0px; padding: 30px 0px; }
*/




	/****************************/
	/* Dimming page cover		*/
	#Cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black;
		opacity: 0; z-index: 25; transition: opacity 0.2s ease-in-out; pointer-events: none; /* Allow clicks through when hidden */
	}
	#Cover.active { opacity: 0.75; pointer-events: auto; } /* Make it clickable when active */


	/* Sticky Header Styles (Appears on Scroll) */
	.Zsticky-header { position: fixed; top: 0; left: 0; width: 100%; background-color: white; /* Full width white background */
					  color: black; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;
					  z-index: 30; } /* Higher than floating header */
	.sticky-header .Logo { }
	.sticky-header .MenuFrame { }
	.sticky-header .MenuList A { color: #000; }

	H2#slide-title		{ font: 300 72pt "Open Sans",sans-serif; text-shadow: 4px 4px #000; opacity: 0; transition: opacity 0.8s ease; margin: 0px; }
	H2#slide-title B	{ font-weight: 500; }
	@media (min-width: 480px) and (max-width: 600px) {
		H2#slide-title	{ font-size: 54pt; line-height: 64pt; }
	}
	@media (min-width: 10px) and (max-width: 479px) {
		H2#slide-title	{ font-size: 40pt; line-height: 48pt; }
	}

/****************************/
/* Pages with Photo Cover */

DIV.PixCover	{ display: none; border: 1px solid #000; min-height: 360px; background-size: cover; background-repeat: no-repeat; background-position: center; }
HTML.Abou DIV.PixCover	{ display: block; background-image: url(/images/Home2.jpg); }
HTML.Adve DIV.PixCover	{ display: block; background-image: url(/images/Home10.jpg); }
HTML.Cont DIV.PixCover	{ display: block; background-image: url(/images/Home9.jpg); }
HTML.Notf DIV.PixCover	{ display: block; background-image: url(/images/Page02.jpg); }
HTML.Dona DIV.PixCover	{ display: block; background-image: url(/images/Home7.jpg); }
HTML.Dire DIV.PixCover	{ display: block; background-image: url(/images/Page01.jpg); }
HTML.Join DIV.PixCover	{ display: block; background-image: url(/images/Home8.jpg); }
HTML.Lega DIV.PixCover	{ display: block; background-image: url(/images/Home5.jpg); }
HTML.Memb DIV.PixCover	{ display: block; background-image: url(/images/Home3.jpg); background-position: bottom; }
HTML.Life DIV.PixCover	{ display: block; background-image: url(/images/Home4.jpg); }
HTML.Band DIV.PixCover	{ display: block; background-image: url(/images/Home17.jpg); background-position: bottom; }
HTML.Priv DIV.PixCover	{ display: block; background-image: url(/images/Home18.jpg); }
HTML.Volu DIV.PixCover	{ display: block; background-image: url(/images/Home6.jpg); background-position: bottom; }
/****************************/