@keyframes pulse { 0% {border:1px solid red} to {border:1px solid #7cfc00}}
@keyframes blink { 0% {opacity:1;}  50% {opacity:0.3;} 100% {opacity:1}}
@keyframes scroll {0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
/* @keyframes animate { 0% {transform: rotate Y (-360deg);} 100% {transform: rotate Y (0deg);}} */
@keyframes type { 0% { width: 0ch;}8%, 100% { width: 36ch;}}
@keyframes welcome { 0% { width: 0ch;}80%, 100% { width: 44ch;}}
@keyframes slidein { from { margin-left: 100%; width: 50%; } to { margin-left: 0%; width: 100%;}}

html {margin: 0;padding: 0}

body {height:100%;background-color:#bff;margin:0;padding:0;overflow-y:scroll;background:linear-gradient(to right,#dff,#1af 10%,#1af 90%,#dff 100%)}

.container {order:0 ;display:flex;flex-flow:row wrap;justify-content:flex-start;font-family:sans-serif;margin:.6rem auto;max-width:75rem;min-height:100vh;border-radius:1.5em;box-shadow:.125em .125em .4em .125em rgba(0,0,0,0.8);word-wrap:break-word;position:relative; font-size: clamp(.8125rem, 2.25vw, 1rem) }   
 /* max-width:1200px; min-height:35em */

header {order:1 ;height:auto;align-self:flex-start;flex:1 0 100%}

nav {order:2 ;margin:-5px 0 0;padding:2px 4px 4px;min-width:99.8%;max-height:24px;font-family:serif;background-color:rgb(53, 100, 159);z-index: 21 !important } 
  /*z-index:10;xxxbackground-image:url(../images/stonewall.jpg);xxxbackground-repeat:repeat-x  */   /*  min-width:99.4%  */
/* nav {order:2 ;margin:-5px 0 0;padding:2px 4px 4px;min-width:99.4%;max-height:24px;font-family:serif;z-index:10;background-image:url(../images/stonewall.jpg);background-repeat:repeat-x;background-color:orange} (NOTE old  nav)*/

nav ul {margin: -2px 0 0;list-style: none;right: 50%} /* margin: -3px 0 0 */
nav ul {position: relative;display: flex;justify-content: center}    /*font-size: clamp(.6rem, 3.5vw, .75rem)  */

nav ul li {margin: 2px 5px 1px;padding: 0;left: 50%}  /* margin: 3px 5px 1px */
nav ul li {position: relative;display: flex;justify-content: center} /* font-size: clamp(.6rem, 3.5vw, .75rem)  */

nav ul li a {text-decoration: none;font-size:  clamp(.75rem, 2.5vw, 1.125rem) }  /* font-size: clamp(.6rem, 3.5vw, 1.125rem)  */
nav ul li a {display: block;margin: 0;padding: 3px 6px;line-height: 1em;background-color: orange;background-color: rgba(255, 204, 120, .8);color: #000;border-radius: 5px;border:solid 1px navy}
nav ul li a:focus,nav ul li a:hover {background: #0ff;color: #000}
nav ul li :hover > ul {display: block;background: #0ff;color: #000}

/* nav ul ul {display: none;position: absolute;top: 2.6vh;left: 0;margin-left: -80%;width: 200px;padding: 6px 4px 0 2px;background: navy} /* top: 29px */
/* nav ul ul li {left: auto;width: 193px;margin: 0 8px 6px 4px}  */

nav ul ul {display: none;position: absolute;top: 2.6vh;left: 0;margin-left: -60px;width: 200px;padding: 6px 4px 0 2px;background: navy} /* top: 29px */
nav ul ul li {left: auto;width: 193px;margin: 0 8px 6px 4px}

nav ul ul li a {text-decoration: none;font-size:  clamp(.75rem, 2.5vw, 1.125rem) }
nav ul ul li a {font-weight: 400;background: #0ff;color: #000;line-height: 1em;border: 1px solid #0ff;width: 100%;font-size:  clamp(.75rem, 2.5vw, 1.125rem) }
nav ul ul li a:hover {background: #0000f0;color: #0ff;transition: .4s}

nav ul li:nth-child(3) ul {display: none;margin-left: -20px}   
nav ul li:nth-child(4) ul {display: none;margin-left: -50px}   
nav ul li:hover ul {display: block}
nav ul li:focus ul {display: none}
nav ul li:focus-within ul {display: block}
nav ul li ul a:focus {display: block;background: #0000f0;color: #0ff}

section {order:3 ;width:97%;margin:0 auto;padding:0 1%}

.content {order:4 ;display:flex;width:100%;position:relative;flex-flow:row wrap;align-items:flex-start;overflow:auto;justify-content:space-around;min-height:35em}  /* flex-flow:row nowrap */

main {order:5 ;position: relative ;flex: 1 1 58.4%;padding: 0 2%} /*  max-width: 48rem; min-width: 23rem; max-width: 70vw; min-width: 10vw padding: 0 1.5% */

aside {order:6 ;position: relative ;width: 22.5rem; padding: 0 1.4% 7rem} /* width: 23.2rem  */ /* aside {order:6 ;flex:0 1 31%; padding: 0 5px}  */

footer {order: 7;background-color:#9ef;color:#000;border-top:1px solid #777;clear:both;font-family:"Browallia New";padding:3px 18px;border-radius:0 0 1.5em 1.5em;width:100%}
.now::before {content: "1987-2026";}

.tw .container {background-color:#fff}
h1 .tw {color:#b00}
h2 .tw,h3 .tw {color:#333}
.tk .container {background-color:khaki}
h1 .tk {color:#700}
h2 .tk,h3 .tk {color:#000}
.tb .container {background-color:#000;color:#ff0}
h1 .tb {color:#59f}
h2 .tb,h3 .tb {color:#ddd}
.tb nav ul li a {color:navy}
.tb a {color:#0ff}
    
h1 {font-family:serif;font-size: clamp(0.875rem, 3.2vw, 2rem);font-style: italic;padding: 0 6px;margin: 15px auto -5px;text-align:center;text-shadow: 1px 2px 2px coral}  /* font-size: clamp(1.0625rem, 3.75vw, 2rem) font-size: clamp(1.0625em, 2.375vw, 2.375rem)  font-size: clamp(1.125rem, 3.5vw, 2rem)  */
h1:hover {color:#880;transition:all .1s ease;transform:scale(1.05);z-index:0}
h2 {font-family:sans-serif;text-align:center;font-size: clamp(1rem, 2.5vw, 1.75rem) }     /* font-size: clamp(1rem, 3vw, 1.75rem) */
h3 {font-family:sans-serif;margin: -5px 0 8px;font-size: clamp(1rem,2.25vw, 1.375rem)}   /* 1.125rem, 3.5vw, 1.5rem */
h4 {font-family:sans-serif;margin: -5px 0 8px;font-size: clamp(1rem,2.125vw, 1.25rem)}
p {font-size: clamp(.875rem, 1.5vw, 1rem)}

.flashback {animation: type 10s steps(30);animation-iteration-count:4 ;animation-delay:7s ;overflow: hidden;white-space: nowrap;font-size: 1.125rem ;text-align:left;margin: 43px 0 8px;width: 22.5rem} /* padding: 0 8px 0 0  width: 24.6rem */
.overflow {overflow: hidden}
.slidein { animation-duration: 3s; animation-name: slidein;animation-iteration-count:3; padding-bottom: 6px;} 
.welcome {animation: type 10s steps(44);animation-iteration-count: 2 ;animation-delay: 4s ;overflow:visible;white-space: nowrap }
.br-blue {border-radius:6px; border:1px solid blue;background-color: #bbb}
.br-6 {border-radius:6px}
.br-12 {border-radius:12px}
.button-group {position:absolute;top:1px;right:16px}
.button-group button:focus {outline:.01px}
button {margin:2px 8px 1px 3px;padding:0 1px;border:1px solid red;min-height:20px;min-width:20px;border-radius:13px;display:inline-block;z-index:10}
button,html input[type=button],input[type=reset],input[type=submit] {cursor:pointer}
button:hover {transition:all .1s ease;transform:scale(1.12)}
fieldset {border: 0;text-align:center;align-content: center;font-size: .8em}

.share-site {font-style:italic;font-weight:700;margin:4px auto 0;max-width:168px}
ul.social {display:block;list-style:none;margin:.2em 0 0 -.5em}
ul.social li {list-style:none;float:left}
ul.social a {background-image:url(../images/sprites.png);width:35px;height:32px;display:inline-block}
/* ul.social a {background-image:url(../../images/sprites.png);width:35px;height:32px;display:inline-block} */
ul.social .s-1-facebook a {background-position:0 0}
ul.social .s-2-tweet a {background-position:-35px 0}
ul.social .s-4-email a {background-position:-105px 0}
.blink {color:black;animation:blink 2s linear infinite}
.pulse,.pulse :focus {animation:pulse .6s ease 18 alternate 1s forwards;border:1px solid red;border-radius:35px;font-family:serif;height:auto;max-width:780px;margin:0 auto;padding:0 8px;text-align:center;box-shadow:0 0 10px rgb(155, 1, 103) }  /* rgba(212, 1, 140, 0.746)   border:3px solid red */
.spinX:hover,.spinY:hover {transition: all .75s ease-in-out}
.spinX:hover {transform: rotateX(360deg)}
.spinY:hover {transform: rotateY(360deg)}
.skewX15:hover,.spinZ:hover {transition: all .25s ease-in-out}
.spinZ:hover {transform: rotateZ(540deg)}
.skewX15:hover {transform: skewX(-15deg)}
.cal-scroll{font-weight:400;color:#fff;margin:0;line-height:14px;text-align:center;animation:scroll 2.7s linear;animation-iteration-count:2.5}
.cal-show{background-color:#3640ad;border-radius:4px;margin:15px auto;padding:2px 0;width:260px;overflow:hidden}
.contact-us {text-align:center;border:1px solid red;border-radius: .5em;max-width: 300px;margin: 1em auto;padding: 1em 0;background-color: bisque}
.call {margin:4px 3px}
.center  { display: block;  margin: auto;  } 
  
.notes {margin:4px 3px 4px 0}
.here {font-family:sans-serif;font-weight:700;font-style:italic;text-align:center;padding:0}
.meets {font-family:sans-serif;font-weight:700;font-style: italic;text-align:center;padding:0}
.meets-large{font-family: Arial,Tahoma;font-weight: bold;font-style: oblique;color: #146f17;text-align: center;text-decoration:underline ;padding: 0 6px;margin: 15px 15px -5px 15px;text-shadow: 1px 1px 1px rgba(9, 196, 38, 0.97)}
.meets-large:hover,.meets-large:focus{text-shadow: 2px 2px 3px red}
.hide {display:none}
.indent {text-indent:2%}
.search {margin:0 auto -1rem;}
.easy-read {font-family: 'Comic Sans'}
.dylexic-font {font-family: OpenDyslexicAlta}
/* .space-4rem {padding: 4rem 0} */
.ur-ok {position: absolute; bottom: 1.5rem;right: 6.25rem} 
.centext {display: block;margin: -.7em auto 0;width: 8.5em}
.grow-text {color:peru; font-family: "Caladea", serif; -webkit-text-stroke: 2px black;display: inline-block; font-size: calc(7.7vw + 1em); letter-spacing: -0.015em; transform: perspective(10cm) rotateY(-30deg)}  /* text-align: center; padding: 10px auto 10px 20%;  */
.text-center,.text-note {text-align:center;margin-bottom:-5px}
.text-note {font-family:serif;font-style:italic;margin-bottom:24px}
.star-bar {display: block; margin:-20px auto 5px auto; font-size:1.5em; color: blue; text-align: center}
.javelin-bar {border: 2px solid #0000FF;border-radius: 50%;	margin: -10px 15% 0;}
.rounded-corners-15 {border:1px solid red;border-radius:15px; box-shadow:0 0 18px 1px red inset;padding:0 12px;margin:0 auto;width: 98%}
.no-bullets {list-style-type:none}
.skip a {left:24px;top:.5em;padding:0 4px;position:absolute;text-decoration:none;z-index:-2}
.skip a:focus {background:#060;color:#fff;z-index:1}
.khaki,.white {background-color:#fff;color:#000}
.khaki {background-color:khaki}
.black {background-color:#000;color:#fff}

.img-banner {border:0;width:100%;max-width:1200px;height:auto;margin-top:26px}
.img-center {display:block;margin:0 auto;max-width:100%;height:auto}
.img-left {display:block;float: left;margin:0 8px 0 0;max-width:100%;height:auto}
.img-right {display:block;float: right;margin:0 0 0 4px;max-width:100%;height:auto}
.img-heading {display:block;margin:16px auto -12px auto;max-width:100%;height:auto}
.img-circle-left {border-radius:50%;float:left;margin:0 8px 0 0} 
.img-circle-right {border-radius:50%;float:right;margin:0 0 0 8px}
.img-circle-center {border-radius:50%; display:block;margin:6px auto} /* margin:0 auto */
.img-rectange {border: 8px double rgb(7, 154, 246);border-radius:100px;box-shadow:0 3px 10px 1px dimgrey;}
.img-squircle {
	border: 40px rgb(102, 204, 255);
	border-radius: 80px;
	corner-shape: squircle;
}
.img-square {
	border-radius: 30px;
  corner-shape: square;
}
.img-bevel {
border-radius: 50px;
  corner-shape: bevel;
}
.img-scoop {
	border-radius: 30px;
  corner-shape: scoop;
}
.img-notch {
	border-radius: 30px;
  corner-shape: notch;
}
.img-elipse {border:2px solid grey;border-radius:50%; display:block;z-index: 4;shape-outside: circle() }
.img-left-round {float: left;shape-outside: circle(47%)}  
/* .img-left-round {float: left;margin: 4px -4px 0 0;border-right: 2px transparent inset;shape-outside: circle()} */
/*
.gallery {display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:space-around;max-width:1200px}
.gallery a {flex-basis:auto;width:270px;height:auto;border:12px solid #fff;margin:5px;box-shadow:2px 2px 16px #555} 
.gallery img {display: block;height:auto;width:100%}*/

.gallery {display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:space-around;max-width:1200px}
.gallery a {flex-basis:auto;width:270px;height:auto;border:12px solid #fff;margin:5px;box-shadow:2px 2px 16px #555} 
.gallery img {display: block;height:auto;width:100%}
figure {margin: 0 auto 1rem; display:flex;flex-direction:column}
figcaption {color: black; font-style: italic;font-size:1.25rem ; padding: 2px; text-align: center}.video-fit {display:block;margin:0 auto;max-width:100%;height:auto} /* same as .img-center */
.video-notice {display:block;margin:0 auto;border: solid 6px rgb(27, 134, 0);border-radius: 24px;max-width:100%;height:auto} 
.video-live {display:block;margin:0 auto;border:14px double rgb(211, 77, 0);border-radius: 32px;max-width:100%;height:auto} 
.video-play {display:block;margin:0 auto;width:800px;height:450px;border:14px double rgb(211, 77, 0);border-radius: 32px} .caption {justify-content:center;text-align:center;font-family:serif;font-style:italic;font-weight:700;margin-top:0}
 .video-fluid { position: relative; max-width: 800px; margin: 8px auto; aspect-ratio: 16/9;border: double 12px rgb(186, 59, 0); border-radius: 12px;}
 .video-rigid { position: absolute; top: 0; left: -1px; width:100%; height: 100%}  
           Note: The video was positioned "left: -1px" to hide a thin black stripe on that side of the video, in this instance.


.item {display:flex;flex-direction:column}
.caption {justify-content:center;text-align:center;font-family:serif;font-size:1.25rem ;font-style:italic;font-weight:700;margin:6px auto}
   
.show {display:block}
.zoom:hover {transition:all .3s ease;transform:scale(1.2)}
input:focus {border-color:#000}

.easy-read,.dylexic-font,.audio-align,.caption {font-size:1.125em}
.meets-large {font-size:1em}
.button-group,.cal-scroll,.here,.meets,.screen-reader-nav,.skip a,.meets,.blink,footer{font-size:.75em}

dt {font: 700 italic 18px/18px serif;margin-top:5px}
dd a:link,nav ul li a {text-decoration:none}
table.fees {border-collapse:separate;font-family:"Arial Narrow";text-align:center;width:100%}
th.fees {font-family: "Arial Narrow";width: 33.3%}
td.fees,th.fees {text-align: center;padding: .2em 0}
table.legends {border-collapse:separate;font-family:"Arial Narrow";text-align:center;width:100%;max-width: 50%;column-count: 3;}
th.legends {font-family: "Arial";width: 20%} /* 33.3% */
td.legends,th.legends {text-align: center;padding: .2em auto;max-width: 20%;column-gap: 10px;}
.arrow-l,.arrow-r {position:fixed;cursor:pointer;bottom:10vh}
.arrow-l {margin-left:-3em}
.arrow-r {margin-left:68em}
.ambo {display: block;border: 10px double red;border-radius: 15px;padding: 10px;text-align: center;width: 90%;margin: 0 auto}
.cal-show {background-color: #3640ad; border-radius: 4px; margin: 15px auto; padding: 2px 0; width: 260px; overflow: hidden}
.cal-scroll {font-weight:400;color:#fff;margin:0;line-height:14px;text-align:center;animation:scroll 2.7s linear;animation-iteration-count: 2.5}
.calendar-container {position: relative; padding-bottom: 10% !important; height: 0;min-height: 450px; min-width: 300px; overflow: hidden}
.calendar-container iframe {position: absolute; top: 0;left: 0;width: 100%;height: 100%}

/* EXPERIMENTAL ************************ */
.caps-x2{color:#3232fc;float:left;font-family:"MS Gothic","Arial Narrow";font-size:250%;line-height:38px;background:#ccc}
.caps-x4{color:red;float:left;font-family:"MS Gothic","Arial Narrow";font-size:570%;line-height:80px}
p::selection {background-color: red;}

.table-wrapper:focus {outline: 3px solid rebeccapurple;}
.table-wrapper:focus:not(:focus-visible) {outline: none;}
.table-wrapper:focus-visible {outline: 3px solid rebeccapurple;}

.left, .right {width: 40%;height: 22ex;background-color: lightgray}
.left {shape-outside: polygon(0 0, 0 100%, 50% 100%); float: left; clip-path: polygon(0 0, 0 100%, 50% 100%)}
.right {shape-outside: polygon(100% 0, 50% 100%, 100% 100%); float: right; clip-path: polygon(100% 0, 50% 100%, 100% 100%)}

/* EXPERIMENTAL ________________________ */