/* CSS Document */

@charset "utf-8";
:root {
 --lightColor:#FAFAFA; /* bg */
 --darkColor:#2E2E2E; /* charcoal */
 --mainColor:#78C2AD; /*  med-green */
 /* --compColor:#331155; /*   dDark-purple */
 /* --triColor:#551111; /*  dark red */
 --altColor:#F5EEDC; /*  245,238,220 tan-beige */
 --alt2Color:#5D9CEC; /*   light-blue */
 --lightSBG:#F4F6F4;
}

body {background-color:#FFF; margin:0; padding:0;
  font-size:16px; font-size:1.5vw; font-size:calc(10px + 0.7vw); }
/* font-family: Verdana, sans-serif; word-spacing:0.4vw; letter-spacing:0.1vw; */
/* div {float:unset; clear:none;} */
p {clear:left;}
hr {background-color:var(--mainColor);color:var(--mainColor);height:1px;border:0; width:50%; margin:2em auto;}
#container {display:block; min-width:300px; width:100%; }
header { display:flex; flex-flow:column; }

#topper {display:flex; row-gap:2em; flex-flow:row; background-color:var(--darkColor); padding:8px; justify-content:center; }
.topwht {font-size:0.8em; margin:0 auto; color:#FFF; font-weight:normal; text-indent:-2em; margin-left:2em;}
.topwht::before {display:inline-block; content:""; width:1.1em; height:1.1em; background-size:contain; background-repeat:no-repeat; padding:0.18em; background-position:0 0; margin:0 0.5em -0.5em 0;}
.lib_map::before {background-image:url(images/icon-map.svg);}
.lib_time::before {background-image:url(images/icon-time.svg);}
.lib_phone::before {background-image:url(images/icon-phone.svg);}

#Logo { background:var(--lightColor); padding:1%; display:flex; }
#Logo>img {float:left; width:20%; margin-left:3%; min-width:200px;}

#banner { background-image:url('images/Capitola.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;
  box-shadow:inset 0 -250px 80px -90px rgba(0, 0, 0, 0.7); text-align:center; padding-bottom:2em; }
#banner h1 {text-transform:uppercase; color:#FFF; margin:7em 2em 0.5em 2em; }

#intro {display:flex; flex-direction:row; flex-wrap:wrap; font-size:small; }
#intro div {width:25%; padding:2em; background-color:var(--altColor); position:relative; box-sizing:border-box; }
#intro div:nth-child(1) { background-color:var(--mainColor); flex:1 1 100%; }
#intro h1 { color:#fff; }
#intro h2 {margin:0 0 0.3em 0;}
#intro div::before {content:""; position:absolute; top:5em; left:0; width:1px; height:70%; background-color:#999; z-index:1; display:inline;}
#intro div.nobe::before{ display:none; }
#intro #introN1 {flex:1 1 100%; text-align:center; padding:1em 0;}
#intro .introR {flex:1 1 33%;}
#intro p {margin:0;}

section.center {margin-top:5em;}
.secA { background-color:#FFF; padding:2em 3em; display:flex; row-gap:1.5em; column-gap:1.5em; flex-flow:column;}
.sdImg>img {width:100%; max-width:800px; height:auto; display:block; border-radius:11px;}
.secB { background-image:url('images/community1.jpg'); background-position:center 10em; background-size:cover;
  padding-bottom:10em; background-repeat:no-repeat; border-bottom:12px solid var(--mainColor); }
.midBgBox { background-color:rgba(245, 238, 220, 0.95); width:82%; margin:0 auto; border-radius:0.7em; padding:3em; padding-bottom:1em;}
.secC {background-color:var(--altColor); padding:2em; }
.secC div h2 {width:17em;}
.secC div:first-of-type {display:flex; justify-content:space-between; margin-bottom:2em;}
.secZ {padding:2em;}

h1 {font-size:24px; font-size:2.5vw; font-size:calc(13px + 0.6vw); font-size:clamp(24px, 2.5vw, 31px); margin-top:0;}
h2 {font-size:20px; font-size:1.9vw; font-size:calc(12px + 0.5vw); font-size:clamp(20px, 1.9vw, 29px); margin-top:0;}
h3 {font-size:15px; font-size:1.6vw; font-size:calc(11px + 0.4vw); font-size:clamp(15px, 1.6vw, 27px); margin-top:0;}

.aBtn { display:inline-block; padding:6px 15px; margin:4px; border-radius:6px; border:1px solid #CCC; font-size:small; text-decoration:none; height:fit-content; width:fit-content;  }
.aBtn img, .aBtn svg { vertical-align:middle;} .aBtn:hover, .aBtn:focus { box-shadow:2px 2px 2px var(--mainColor); }
.ver1 { background-color:var(--alt2Color); color:#FFF;} a.ver1:visited { color:#FFF;}
.ver2 { background-color:var(--darkColor); color:#FFF;} a.ver2:visited { color:#FFF;}
.colorM { color:var(--mainColor);}

a:has(figure) {width:min-content;}
figure { margin:5px 2px; box-sizing:border-box; width:min-content; border:1px solid #EEE; border-radius:11px; background-color:var(--lightColor) } /* figure img {width:100%;} */
figure img {border-radius:11px; width:37vw; max-width:350px;}
figure img.img2 { width:22vw; max-width:200px;}
figcaption { clear:both; margin:0.4em; } /* figcaption {height:0;text-align:center;} */
figcaption h4 {margin:0;}
figcaption p {font-size:small; color:var(--darkColor); margin:0.6em 0 0 0;}

footer { display:flex; font-size:11px; background-color:var(--darkColor); padding:5em; box-sizing:border-box; flex-wrap:wrap; column-gap:4em; row-gap:4em; }
footer section { color:#FFF; flex:1 1 20%; }
footer div { clear:both; display:block; flex:1 1 100%;}
footer menu { margin:0; padding:0; float:right; }
footer menu a { color:#FFF; display:flex; flex-direction:column; flex-wrap:wrap;}
footer hr { width:99%; background-color:#484848;color:#484848;}
footer h4 { margin:0; font-size:15px; font-size:1.5vw; font-size:calc(10px + 0.4vw); font-size:clamp(15px, 1.5vw, 22px);}
footer a, footer a:visited { text-decoration:none; color:#FFF; }
footer a:hover, footer a:focus { text-decoration:underline var(--mainColor); }

/* footer menu {float:right;clear:right;margin:0;} footer menu a {color:#FFF;} */
#copyright {text-align:center;clear:both;color:#FFF;padding-top:9px;} /* border-top:1px solid #DDD;  */
#copyright::before { content:""; position:absolute; top:0; left:5%; width:89%; height:1px; background-color:#DDD; z-index:1; }

.center {text-align:center;}
.thirds {margin:1em 15em; margin-left:calc(10px + 16vw); margin-right:calc(10px + 16vw);}
.ulNoBP li { list-style:none; margin:5px 0; text-indent:2em; text-align:left; margin-left:auto; }
.ulNoBP li svg { width:1.1em; height:1.1em; margin:0 0.3em -0.2em 0; }
.ulCLeft { display:block; width:fit-content; margin:0 auto; text-align:left;}
.ulCLeft li {text-align:left;}
.flexR {display:flex; flex-wrap:wrap; row-gap:1em; column-gap:1em; justify-content:center;} /* .flexR > * {overflow:auto;} */
.fsm {text-align:right; padding-right:2em; flex:1 3 8%; }


/* section {padding-top:15px;clear:both;display:table;} */

table {border-collapse:collapse; border-spacing:0;}
table td, table th {padding:3px; border:1px solid silver;}
main {background-color:#FFF;text-align:left;} /* display:inline-block;box-sizing:border-box; width:100%; */
main a, main a:visited {} main a:hover {}
/*
h1 {font-size:25px; text-transform:uppercase; }
h2 {font-size:20px; line-height:20px;}
h3 {font-size:15px; } */ 


nav {display:block; width:77%; }
#navTrigger { padding:5px 13px; box-shadow:1px 1px 3px 0 rgba(0,0,0,0.55),inset 1px 1px 0 rgba(255,255,255,0.3); width:45px; height:40px;
 cursor:pointer; background:linear-gradient(to bottom,rgba(85,51,17,0.45) 1%,rgba(17,85,17,0.95) 100%); right:20px; position:absolute; z-index:90; }
#navTrigger span { opacity:0.9; width:auto; height:15%; margin:5px 0; background-color:#EEE; display:block;}
nav ul {position:absolute; display:none; z-index:99; right:20px; }
nav li {width:150px; list-style:none; padding:5% 0 5% 5%; border:1px solid #999; overflow:hidden; margin-top:-1px; background-color:#ACA; background-color:rgba(170,204,170,0.95);}
nav input[type=checkbox]{display:none; -webkit-appearance:none;}
nav input[type=checkbox]:checked ~ #menu{display:block;} /*Show menu when invisible checkbox is checked*/

.flex {display:flex;align-items:start;flex-direction:column;} .flex > * {overflow:auto;}
.flex img {margin-left: 8px;} .flex img:first-child {margin:0;} .flex img.fill {width:100%;}

.col {display:block; float:left; margin:1.2% 0;}
.col img,.gridof3 {width:100%} .col hr,.fill {width:97%; float:left;}
.gridof2T {width:74%}
.col:first-child {padding-left:0;}
.group::before,.group::after {content:""; display:table;}
.group::after {clear:both;} .group {padding:0px; margin:0px; zoom:1;}

.set2BG {position:static;z-index:-1;height:10px;width:100%;overflow:visible;}
.set2BG img {width:100%;opacity:0.2;}
.set2FG {text-align:center;padding:15px;z-index:2;position:relative;}
.imgFade {box-shadow:inset 0 0 0 0 #FFF, inset 0 -25px 20px -15px #FFF;position:relative;height:20px;width:100%;display:block;top:-25px;}

.hrh1Over {text-align:center;margin:12px 0;}
.hrh1Over h1 {position:relative;z-index:5;padding:0 35px;background-color:#FFF;margin:0;display:inline;top:-0.8em;}
.hrh1Over hr {position:relative;background-color:#CCC;color:#CCC;height:2px;border:0;margin:0;}
.eventBox figure {float:left;margin:0;line-height:0;max-width:335px;width:32%;min-width:150px;transition:opacity 1s ease;}
.eventBox figure img {opacity:0.2;transition:all 1s ease;}
.eventBox figure img:hover {opacity:1;}
.bgBlu {background-color:#18B;}
.bgRed {background-color:#B11;}
.bgYel {background-color:#B81;}
.bgGra {background-color:#88B;}
.bgGre {background-color:#1B8;}

.eventDate {display:inline-table;color:#FFF;margin-top:10vw;margin-top:25%;}
.eventDate h1 {font-size:40px;font-size:4.5vw;font-weight:900;margin:13px 0 21px 0;}
.eventDate h1 span {font-weight:100;}
.eventDate h2, .eventDate h2 {margin:0;}
div.eventInfo {display:none;position:relative;z-index:5;top:5em;width:100%;color:#FFF;font-size:16px;padding:10%;box-sizing:border-box;background-color:#18B;background:rgba(17,136,187,0.7);}
figure:hover > figcaption div.eventInfo {display:inline-block;line-height:1.1em;}
figure:hover > figcaption div.eventDate {display:none;}

.faceBox figure {float:left;width:180px;text-align:center;margin:0 4%;}
.faceBox figcaption {display:inline;}
.faceBox figcaption h2{margin:2px 0;white-space:nowrap;}
.faceBox figcaption p {line-height:18px;margin:2px 0;}

#svsOps {background-color:#444;color:#FFF;text-align:center;padding:12px;margin:16px 0;}

#categorized {}
 #catBox figcaption {display:inline-table;width:100%;position:relative;background-color:#236;background:rgba(34,51,102,0.7);top:-4.1em;padding:1.1em 0;margin-left:1px;width:calc(100% - 1px);}
 .catName {color:#FFF; margin:0;}
  .block {float:left;margin:0 0.5%;max-width:315px;width:23.5%;min-width:145px;}
  .block img {box-shadow:-1px 2px 8px 2px #999;border:1px solid #FFF;transition:all 1s ease-out;}
  .block img:hover {box-shadow:0 0 9px 0px #09C; border:1px solid #6CF;}

fieldset {padding:8px 0 16px 12px; margin:0;}
legend {font-weight:bold;}
small {font-size:10px; }
input, select {margin-bottom:4px;width:230px;overflow:hidden;}
       select {width:auto;}
.border td {padding:3px; border:1px solid black; margin:0;}
.f1 label {max-width:160px;min-width:80px;width:17%;float:left;text-align:right;margin-top:2px;clear:left;}
.f1 label.no {width:auto;float:none;clear:none;}
.f1 textarea {max-width:500px;min-width:230px;width:50%;}
input.no, select.no {margin:0; width:auto;}
br.cLear {clear:left;}
.sitemap tr td {border-bottom:1px dotted #CCC;} table.sitemap {margin:15px 0;width:100%;}

@media only screen and (min-width:650px){
  nav { display:flex; }
  nav ul {display:flex; width:50%; justify-content:flex-end; }
  nav li { background-color:none; background-color:unset; margin:1em 0 0 0; padding:2px 1.2em; width:unset; border:unset; }
  nav li a,nav li a:visited {color:#000; text-decoration:none; }
  nav li a:hover { text-decoration:underline; color:#00A;}

  #intro #introN1 {flex:1 1 25%; padding:2em; align-content:center;}
  #intro .introR {flex:1 1 25%;}

  .DFD { flex-direction:unset !important; }
  div.sdContent { width:49%; }
  div.sdImg { width:49%; }
  .fsm {}
  /*
  header{display:inline-block;background:rgba(255,255,255,0.4);box-sizing:border-box;width:100%;}
  #notify {display:inline;}
  nav li {padding:1%; border:0; background:none;}
  nav ul {position:relative;display:inline-flex;float:right;clear:both;margin:0 2vw 1vw 0;top:-1.7vw;right:unset;line-height:0;}
  nav li {display:contents;}
  nav li a,nav li a:visited {color:#00A; padding:0; width:unset; display:inherit; line-height:inherit;}
  nav ul li,nav li a {text-decoration:none;font-size:13px;font-size:1.6vw;font-size:calc(10px + 0.4vw);}
  #menu li::before {content:"\00a0|\00a0";} #menu li:first-child::before {content:"";}
  .show-menu {display:none;}
  #Logo {text-align:left;padding:0;background:none;}
  #Logo img {width:15%;min-width:100px;}

  main {padding:0 2.5%;}
  #banner {position:absolute; z-index:-1; width:100%;display:block;}
  #banner img {width:100%;}
  #doSame h3 {font-size:20px; line-height:inherit;}
  .flex {flex-direction:row;}
  .col {padding:0 0 0 1.6%;}
  .gridof3 {width:32%;} .gridof3 p {font-weight:bold;}
  .gridof2T {width:35%;}
  .eventDate h1 {font-size:40px;font-size:4.5vw;font-weight:900;margin:22px 0 32px 0;margin:2.6vw 0 3.5vw 0;}

  img.right {float:right; padding:4px;}
  img.left {float:left; padding:4px;}
  p.center {text-align:center;}
  .strategy u{background-color:#900; padding:1px 9px; color:gold; font-weight:bold; border-radius:16px;}
*/
  }

  @media screen and (min-width:900px){
    figure img { width:21vw; max-width:400px;}
    .fsm {}
  }