/* Image figure wrapper */
figure.oc-figure {
  margin: 1rem 0;
}

figure.oc-figure img {
  max-width: 100%;
  height: auto;
}

/* Alignment helpers */
figure.oc-figure.align-left {
  float: left;
  margin: .5em 1em .5em 0;
}

figure.oc-figure.align-right {
  float: right;
  margin: .5em 0 .5em 1em;
}

figure.oc-figure.align-center {
  text-align: center;
}

figure.oc-figure.align-center img {
  display: inline-block;
}

/* Caption */
figure.oc-figure > figcaption {
  text-align: center;
  font-size: .85em;
  margin-top: 6px;
  color: #666;
}

/* Surfaces */
.oc-bg-primary{ background-color: var(--oc-primary) !important; }
.oc-bg-primary-hi{ background-color: var(--oc-primary-hi) !important; }
.oc-bg-secondary{ background-color: var(--oc-secondary) !important; }
.oc-bg-secondary-hi{ background-color: var(--oc-secondary-hi) !important; }

/* Gradients */
.oc-bg-primary-grad{
  background: linear-gradient(to bottom, var(--oc-primary-hi) 0%, var(--oc-primary) 100%) !important;
}
.oc-bg-secondary-grad{
  background: linear-gradient(to bottom, var(--oc-secondary-hi) 0%, var(--oc-secondary) 100%) !important;
}

/* Typography accents */
.oc-text-primary{ color: var(--oc-primary) !important; }
.oc-text-secondary{ color: var(--oc-secondary) !important; }

/* Borders / callouts */
.oc-border-primary{ border-color: var(--oc-primary) !important; }
.oc-border-secondary{ border-color: var(--oc-secondary) !important; }

.oc-btn{
  display:inline-block;
  padding: 14px 18px;
  border-radius: 6px;
  text-decoration: none !important;
  font-family: <HEADERFONT>;
  letter-spacing: .5px;
  line-height: 1;
}

.oc-btn--primary{
  color:#fff !important;
  background: linear-gradient(to bottom, var(--oc-primary-hi) 0%, var(--oc-primary) 100%) !important;
}
.oc-btn--primary:hover{ background: var(--oc-primary) !important; }

.oc-btn--secondary{
  color:#fff !important;
  background: linear-gradient(to bottom, var(--oc-secondary-hi) 0%, var(--oc-secondary) 100%) !important;
}
.oc-btn--secondary:hover{ background: var(--oc-secondary) !important; }

.oc-btn--block{ display:block; width:100%; text-align:center; }
.oc-btn--lg{ font-size: 22px; padding: 18px 20px; }

/* tokens.css - bootstrap-agnostic design tokens */
:root{
  --oc-white: #fff;
  --oc-black: #000;

  --oc-gray-100: #f9f9f9;
  --oc-gray-150: #f7f7f7;
  --oc-gray-200: #f5f5f5;
  --oc-gray-250: #f3f3f3;
  --oc-gray-300: #eee;
  --oc-gray-350: #ddd;
  --oc-gray-400: #ccc;
  --oc-gray-600: #777;
  --oc-gray-650: #666;
  --oc-gray-800: #333;
  --oc-gray-900: #3A3A3C;

  --oc-green: #6b936a;
  --oc-green-dark: #3c763d;

  --oc-radius-sm: 3px;
  --oc-radius-md: 4px;
  --oc-radius-lg: 8px;

  --oc-shadow-img: 1px 1px 5px rgba(0,0,0,.35);
  --oc-shadow-soft: 0 1px 8px rgba(0,0,0,.5);
  --oc-shadow-inset: 0 0 40px rgba(0,0,0,.2) inset;

  --oc-fade-duration: 5s;
  --oc-ease-gallery: cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* extras.css - cleaned, bootstrap-agnostic */

/* -----------------------------
   Figure / Captions
------------------------------ */
figcaption{
  text-align: center;
  font-size: .8em;
  margin-top: 5px;
}

/* -----------------------------
   Image alignment utilities
------------------------------ */
.align-left{ float: left; margin: .5em 1em .5em 0; }
.align-right{ float: right; margin: .5em 0 .5em 1em; }
.align-center{ text-align: center; }
.align-center > figure{ display: inline-block; }

/* -----------------------------
   Polaroid
------------------------------ */
.polaroid{
  border: 0;
  border-radius: 0;
  position: relative;
  background: var(--oc-gray-150);
  box-shadow: 1px 1px 0 var(--oc-gray-300);
}

figure.polaroid{ padding: 20px 20px 40px 20px; }

img.polaroid{
  border: 20px solid var(--oc-gray-150);
  border-width: 20px 20px 40px 20px;
}

.polaroid > figcaption{
  color: var(--oc-gray-600);
  margin-top: 5px;
  font-size: .8em;
  text-align: center;
}

.polaroid figcaption:before{ content: ' '; }

/* -----------------------------
   Polarized (rotated polaroids)
------------------------------ */
.polarizedL,
.polarizedR{
  border: 0;
  border-radius: 0;
  position: relative;
  background: var(--oc-gray-150);
  box-shadow: 1px 1px 0 var(--oc-gray-300);
}

.polarizedL{
  transform: rotate(-5deg);
  transform-origin: bottom left;
}

.polarizedR{
  transform: rotate(5deg);
  transform-origin: bottom left;
}

figure.polarizedL,
figure.polarizedR{
  padding: 20px 20px 40px 20px;
}

img.polarizedL,
img.polarizedR{
  border: 20px solid var(--oc-gray-150);
}

.polarizedL > figcaption,
.polarizedR > figcaption{
  color: var(--oc-gray-600);
  margin-top: 5px;
  font-size: .8em;
  font-style: italic;
  text-align: right;
}

.polarizedL figcaption:before,
.polarizedR figcaption:before{ content: '- '; }

/* -----------------------------
   Fade-in utilities
------------------------------ */
@keyframes ocFadeIn{
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}

.fade-in{ animation: ocFadeIn var(--oc-fade-duration); }
.fade-in-text{ animation: ocFadeIn var(--oc-fade-duration); }
.fade-in-image{ animation: ocFadeIn var(--oc-fade-duration); }

/* -----------------------------
   Code blocks
------------------------------ */
pre.narrow{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

pre.fancy{ position: relative; }

pre.fancy > code{
  background: linear-gradient(to bottom, rgb(14,14,14) 0%, rgb(70,70,70) 100%);
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
  border-radius: 8px;
  text-shadow: 0 1px 0 #000;
  border: 5px solid var(--oc-gray-400);
  padding: 20px;
  display: block;
}

/* -----------------------------
   Quote cards (left/right)
------------------------------ */
#quote-containerR{
  width: 400px;
  float: right;
  padding-left: 20px;
  padding-bottom: 20px;
}

#quote-containerL{
  width: 400px;
  float: left;
  padding-right: 20px;
  padding-bottom: 20px;
}

.quote{
  background-color: var(--oc-green);
  border-top-left-radius: var(--oc-radius-lg);
  border-top-right-radius: var(--oc-radius-lg);
  color: var(--oc-white);
  margin: 0;
  padding: 20px;
  font-size: 20px;
}

.name{
  background-color: var(--oc-gray-800);
  border-bottom-left-radius: var(--oc-radius-lg);
  border-bottom-right-radius: var(--oc-radius-lg);
  color: var(--oc-white);
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.containerRblockquote,
.containerLblockquote{
  padding: 0;
  margin: 0;
}

.containerRblockquote::after,
.containerLblockquote::after{
  border-color: transparent var(--oc-green) transparent transparent;
  border-style: solid;
  border-width: 20px;
  top: 40px;
  content: "";
  display: block;
  right: 75%;
  position: relative;
}

/* -----------------------------
   Blockquotes
------------------------------ */
blockquote.centerBQ{
  text-align: center;
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: var(--oc-gray-300);
  padding: 1.5em 0 0.5em;
  margin: 1.5em 0;
  position: relative;
  background: var(--oc-white);
}

blockquote.centerBQ:before{
  content: '\201C';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--oc-white);
  width: 3rem;
  height: 2rem;
  font: 6em/1.08em 'PT Sans', sans-serif;
  color: var(--oc-gray-650);
}

blockquote.centerBQ:after{
  display: block;
  content: attr(cite);
  text-align: center;
  padding-right: 10px;
  font-size: .875em;
}

blockquote.rightBQ{
  background: var(--oc-gray-100);
  border-left: 0;
  margin: .5em 0 2em .5em;
  padding: 1em;
  line-height: 1.5;
}

/* -----------------------------
   Notepaper component
------------------------------ */
.notepaper{
  position: relative;
  margin: 30px auto;
  padding: 29px 20px 20px 45px;
  width: 300px;
  line-height: 30px;
  color: #6a5f49;
  text-shadow: 0 1px 1px var(--oc-white);
  background-color: #f2f6c1;
  border: 1px solid rgba(195, 186, 170, 0.9);
  box-sizing: border-box;
  box-shadow:
    inset 0 1px rgba(255,255,255,.5),
    inset 0 0 5px #d8e071,
    0 0 1px rgba(0,0,0,.1),
    0 2px rgba(0,0,0,.02);
}

.notepaper:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28px;
  width: 2px;
  border: solid rgba(239, 207, 173, 0.9);
  border-width: 0 1px;
}

.notepaper:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  left: 0;
  right: 0;
  background: rgba(242, 246, 193, 0.9);
  border: 1px solid rgba(170, 157, 134, 0.7);
  transform: rotate(2deg);
}

.note-quote{ font-size: 14px; }

/* Fix: your original was missing a semicolon after opacity */
.curly-quotes:before,
.curly-quotes:after{
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 48px;
  font-size: 50px;
  opacity: .2;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.curly-quotes:before{
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: '\f10d';
  margin-right: 4px;
  margin-left: -8px;
}

.curly-quotes:after{
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: '\f10e';
  margin-left: 4px;
  margin-right: -8px;
  float: right;
}

.quote-by{
  display: block;
  padding-right: 10px;
  text-align: right;
  font-size: 13px;
  font-style: italic;
  color: #84775c;
}

/* -----------------------------
   Basic helpers
------------------------------ */
#Lfloat{ float: left; padding-right: 20px; }
#Rfloat{ float: right; padding-left: 20px; }
.edge{ margin-top: -40px; margin-left: -25px; }
.no-border{ border: 0; }
.IMGborder{ border: solid 1px; }
.IMGthickBorder{ border: solid 3px; }

/* -----------------------------
   Quote / callout boxes (q01–q12)
------------------------------ */
.q01{
  float: left;
  width: 45%;
  padding: 1em;
  margin: .5em 1.5em .4em 0;
  border-top: 4px groove var(--oc-gray-800);
  border-bottom: 4px groove var(--oc-gray-800);
}

.q02{
  float: right;
  width: 45%;
  padding: 1em;
  margin: .5em 0 .4em 1.5em;
  border-top: 4px groove var(--oc-gray-800);
  border-bottom: 4px groove var(--oc-gray-800);
}

/* Fix: missing # in background color */
.q03{
  background: #fcfcfc;
  border: 1px dashed #acacac;
  color: #424242;
  font-style: italic;
  margin: 1.5em auto;
  padding: 2em;
}

.q04{
  border-top: 1px solid #636262;
  border-bottom: 1px solid #636262;
  color: #424242;
  font-style: italic;
  margin: 1.5em auto;
  padding: 2em;
  text-align: center;
}

.q05{
  background: url(/images/bg-quote1.png) no-repeat;
  font-style: italic;
  margin: 2em auto 1.5em;
  padding: 2em 2em 2em 3.5em;
}

.q06{
  margin: 2em 0 2em 4em;
  padding-left: 1em;
  border-left: 3px solid var(--oc-gray-400);
}

.q07,
.q08{
  width: 45%;
  padding: 1em;
  margin-bottom: .2em;
  background: var(--oc-white);
}

.q07{ float: left; margin-right: .9em; }
.q08{ float: right; margin-right: .9em; }

/* white float variants */
.q07a{
  float: left;
  width: 55%;
  padding: 1em;
  margin: .5em 1.5em .4em 0;
  background: var(--oc-white);
}

.q08a{
  float: right;
  width: 55%;
  padding: 1em;
  margin: .5em 0 .4em 1.5em;
  background: var(--oc-white);
}

/* silver gradient boxes */
.q09,
.q10,
.q11,
.q12{
  border: 1px solid silver;
  padding: 1em;
  background: linear-gradient(to bottom, #E9ECEF 0%, #D8DDE2 100%);
}

.q09{ float: left; width: 55%; margin: .5em 1.5em .4em 0; }
.q10{ float: right; width: 55%; margin: .5em 0 .4em 1.5em; }
.q11{ width: 95%; margin: 1.5em auto; }
.q12{ width: 80%; margin: 1.5em auto; height: auto !important; }

/* -----------------------------
   Gallery
------------------------------ */
#OCgallery{ margin-top: 50px; margin-bottom: 20px; }

#OCgallery section{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 300px;
  gap: 1.875rem;
  margin: 0 auto;
  max-width: 1000px;
}

#OCgallery figure{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 0.125rem;
  transform: translateY(0);
  transition: transform .6s var(--oc-ease-gallery), box-shadow .6s var(--oc-ease-gallery);
}

#OCgallery figure:after{
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,.8);
  opacity: 0;
  transition: opacity .6s ease;
}

#OCgallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform .6s var(--oc-ease-gallery);
}

#OCgallery figcaption{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.5rem 2.25rem 1.5rem 1.125rem;
  width: 100%;
  color: var(--oc-white);
  font-size: 1.1rem;
  line-height: .9;
  letter-spacing: .03125rem;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s var(--oc-ease-gallery), transform .6s var(--oc-ease-gallery);
}

#OCgallery figure:hover{ box-shadow: var(--oc-shadow-card); }
#OCgallery figure:hover:after{ opacity: 1; }
#OCgallery figure:hover img{ transform: scale(1.05); }
#OCgallery figure:hover figcaption{ opacity: 1; }

/* -----------------------------
   Image drop shadow utility
------------------------------ */
.imagedropshadow{
  padding: 5px;
  border: 1px solid var(--oc-gray-400);
  box-shadow: var(--oc-shadow-img);
}

a:hover img.imagedropshadow{
  border: 1px solid var(--oc-gray-400);
  box-shadow: var(--oc-shadow-img);
}

/* -----------------------------
   Rounding utilities
------------------------------ */
.round-corners{ border-radius: 50%; }
.rounded-corners{ border-radius: 30px; }

/* -----------------------------
   Cite styling
------------------------------ */
cite{
  font-style: normal;
  font-size: 1.2em;
  font-weight: bold;
}

/* -----------------------------
   Shadow boxes
------------------------------ */
/* Fix: "shadow" was a custom element selector in your CSS, not a class.
   Kept for backward compatibility, but consider changing markup to <div class="shadow"> later.
*/
shadow{
  border: 1px solid var(--oc-black);
  position: relative;
  margin: 2em auto 0;
  padding: 1em;
  background: #E9ECEF;
  box-shadow: var(--oc-shadow-soft), var(--oc-shadow-inset);
}

.drop-shadow{
  border: 1px solid var(--oc-black);
  position: relative;
  background: #E9ECEF;
  box-shadow: 0 1px 8px rgba(233,236,239,1), 0 0 40px rgba(182,191,200,1) inset;
}

.drop-shadow:before,
.drop-shadow:after{
  content: "";
  position: absolute;
  z-index: -2;
}

/* Curled shadow effect hooks (only works if you also set .curled on same element) */
.curled:before,
.curled:after{
  left: 10px;
  width: 50%;
  height: 55%;
  max-width: 200px;
  max-height: 100px;
  box-shadow: 0 8px 12px rgba(0,0,0,.5);
  transform: skew(-8deg) rotate(-3deg);
}

.curled:after{
  right: 10px;
  left: auto;
  transform: skew(8deg) rotate(3deg);
}

.drop-shadow h1,
.drop-shadow h2,
.drop-shadow h3,
.drop-shadow h4,
.drop-shadow h5,
.drop-shadow h6{ margin-top: 5px; }

/* -----------------------------
   Icon list styles (Font Awesome)
------------------------------ */
.heart ul,
.star ul,
.check ul,
.checkbox ul,
.arrow ul,
.arrowbox ul,
.arrowcircle ul,
.apple ul,
.gavel ul{
  list-style: none;
  padding: 0;
}

.heart li,
.star li,
.check li,
.checkbox li,
.arrow li,
.arrowbox li,
.arrowcircle li,
.apple li,
.gavel li{
  list-style: none;
  padding-left: 1.3em;
}

.heart li:before,
.star li:before,
.check li:before,
.checkbox li:before,
.arrow li:before,
.arrowbox li:before,
.arrowcircle li:before,
.apple li:before,
.gavel li:before{
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  display: inline-block;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  margin-left: -1.3em;
  width: 1.3em;
}

.heart li:before{ content: "\f004"; }
.star li:before{ content: "\f005"; }
.check li:before{ content: "\f00c"; }
.checkbox li:before{ content: "\f14a"; }
.arrow li:before{ content: "\f061"; }
.arrowbox li:before{ content: "\f33b"; }
.arrowcircle li:before{ content: "\f0a9"; }
.apple li:before{ content: "\f5d1"; }
.gavel li:before{ content: "\f0e3"; }

/* -----------------------------
   Timeline list
------------------------------ */
ul.timeline{
  list-style-type: none;
  position: relative;
}

ul.timeline h6{ margin-top: 50px; margin-bottom: 0; }
ul.timeline p{ margin-top: 0; margin-bottom: 0; }

ul.timeline:before{
  content: ' ';
  background: var(--oc-gray-900);
  display: inline-block;
  position: absolute;
  left: 29px;
  width: 2px;
  height: 100%;
  z-index: 400;
}

ul.timeline > li{
  list-style: none;
  margin: 20px 0;
  padding-left: 20px;
}

ul.timeline > li:before{
  content: ' ';
  background: var(--oc-white);
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 400;
}

/* -----------------------------
   Numbered / lined lists
------------------------------ */
ol.number-list{
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
  display: table;
}

ol.number-list li{
  counter-increment: step-counter;
  margin-left: 4em;
  text-indent: -2em;
  margin-bottom: 10px;
}

ol.number-list li::before{
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

ol.lined-list{
  list-style-type: none;
  margin: 0 0 0 3em;
  padding: 0;
  counter-reset: li-counter;
}

ol.lined-list > li{
  position: relative;
  margin-bottom: 20px;
  padding-left: .8em;
  min-height: 3em;
  border-left: 2px solid var(--oc-gray-400);
}

ol.lined-list > li:before{
  position: absolute;
  top: 0;
  left: -1em;
  width: .8em;
  font-size: 3em;
  line-height: 1;
  font-weight: bold;
  text-align: right;
  content: counter(li-counter);
  counter-increment: li-counter;
}

ol.ol-decimal { list-style-type: decimal; }
ol.ol-decimal-leading-zero { list-style-type: decimal-leading-zero; }
ol.ol-upper-roman { list-style-type: upper-roman; }
ol.ol-lower-roman { list-style-type: lower-roman; }
ol.ol-upper-alpha { list-style-type: upper-alpha; }
ol.ol-lower-alpha { list-style-type: lower-alpha; }


/* -----------------------------
   Full-width helpers
------------------------------ */
.full-width{
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.notoppadding4img{ margin-top: -40px; }
.notoppadding{ margin-top: -20px; }

/* -----------------------------
   SOL background utility
------------------------------ */
.SOL{
  background-image:
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.6)),
    url("https://onlinecandidate.info/OC_Library/sol-flag.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
}

/* -----------------------------
   Card box component
------------------------------ */
.card-box{
  position: relative;
  color: var(--oc-white);
  padding: 20px 10px 40px;
  margin: 20px 0;
}

.card-box:hover{
  text-decoration: none;
  color: #f1f1f1;
}

.card-box .inner{ padding: 5px 10px 0 10px; }

.card-box h3,
.card-box h4{
  font-size: 27px;
  font-weight: bold;
  margin: 0 0 8px 0;
  white-space: nowrap;
  padding: 0;
  text-align: left;
  background: none;
}

.card-box p{ font-size: 14px; }

.card-box .icon{
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 0;
  font-size: 80px;
  color: rgba(0,0,0,.15);
}

.card-box:hover .icon i{
  font-size: 120px;
  transition: 1s;
}

.card-box .card-box-footer{
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  padding: 3px 0;
  color: rgba(255,255,255,1);
  background: rgba(0,0,0,.1);
  width: 100%;
  text-decoration: none;
}

.card-box:hover .card-box-footer{ background: rgba(0,0,0,.5); }

/* -----------------------------
   Background utilities
------------------------------ */
.black-bkg{ background-color: #000 !important; }
.gray-bkg{ background-color: var(--oc-gray-250) !important; }

.DK-gray-bkg{
  color: var(--oc-white);
  background-color: #4f5b60 !important;
}

.DK-gray-bkg-gradient{
  color: var(--oc-white) !important;
  background: linear-gradient(135deg, #4f5b60 0%, #97a9b2 100%);
}