HTML { background-color: #030C12; height: 100%; }
BODY { background-color: #12284C; }
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 A { background: url(/images/cart.svg) no-repeat; padding-left: 60px; background-size: auto 80%; background-position: 18px center; }
/*
{{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; }
/****************************/
/* Pages with Photo Cover */
#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 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; }
/****************************/
/****************************/
/* 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 #868600; }
HTML.Home ARTICLE P, ARTICLE LI, ARTICLE A { color: #FFF; }
HTML.Home ARTICLE H2 { font: 400 20pt Oswald, sans-serif; color: #FFF; }
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; }
@media screen and (max-width: 520px) {
HTML.Home DIV.Swag P { flex-direction: column; align-items: center; }
HTML.Home DIV.Swag IMG { 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; }
/****************************/
/* Footer */
FOOTER { background-color: #071a28; font: 12pt "PT Sans",sans-serif; padding: 40px 5px 0px; text-align: center; }
FOOTER UL { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0px auto 60px; border-bottom: 1px solid #868600; 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 { border-width: 0px; }
FOOTER P, FOOTER LI, FOOTER A { color: #FFF; }
FOOTER A { text-decoration: none; }
FOOTER .Credit { display: none; }
FOOTER .Credit { font-size: 12pt; color: #DDD; }
FOOTER .Credit IMG { max-width: 220px; display: inline-block; background-color: #000; padding: 2px; }
.SecuredBy { margin-bottom: 70px; }
#SecuredBy { max-width: 120px; }
FOOTER SMALL { background-color: #030C12; display: block; margin: 20px -5px 0px; padding: 20px 10px; color: #AAA; }
@media (min-width: 10px) and (max-width: 600px) {
FOOTER UL { margin: 0px auto 40px; padding: 0px; }
FOOTER UL LI { padding: 4px 10px; }
}
/****************************/
/* 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; }
}
/****************************/
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.Dona DIV.PixCover { display: block; background-image: url(/images/Home7.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.Notf DIV.PixCover { display: block; background-image: url(/images/Home4.jpg); }
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; }