/* ---------- Base HTML & Body ---------- */
html {
  font-size: clamp(14px, 1vw + 1em, 18px);
}


body {
    background-color: white;
    text-align: justify;
    font-family: optima, Arial, sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 1.1em;
    height: auto;
    max-width: 100%;
    overflow-x: hidden;
}

html, body {
  overflow-x: hidden;
}

img, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

* {
  box-sizing: border-box;
}


/* Desktop menu layout */
.dskMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  text-align: center;
  overflow: hidden; /* prevent horizontal scroll */
}

.dskMenu a {
  margin: 0 10px;
  text-decoration: none;
  color: #000;          /* make links black */
  font-size: 18px;       /* increase font size slightly */
  font-weight: 500;      /* a bit bolder */
  position: relative;
}
/* Add "|" separators except around the logo or last link */
.dskMenu a:not(:last-child)::after {
  content: '|';
  color: #888;           /* gray separator */
  margin-left: 20px;
  margin-right: 10px;
  position: relative;
  top: -1px;             /* vertically align with text */
}
/* Keep 'Contact' in red */
.dskMenu a.contact-link {
  color: #DC143C;
}

/* Center logo spacing */
.dskMenu .logo_center {
  display: inline-block;
  margin: 0 25px;  /* spacing between links and logo */
}

/* Mobile menu hidden by default */
.mobile_menu { display: none; 
flex-direction: column; 
 max-width: 100%;
  box-sizing: border-box;
}

/* Hamburger */
.humberger_right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* Hide checkbox visually but keep it accessible */
#menuToggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Make the LABEL the big tap target */
.mblMenu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

/* Icon stays visually the same */
.mblMenu img {
  width: 24px;
  height: 24px;
}

/* Checkbox hack for mobile dropdown — SINGLE RULE */
#menuToggle:checked ~ .mobile_dropdown {
  display: flex;
  flex-direction: column;
}

.mobile_dropdown {
  display: none;
  width: 100%;
  background: #f8f8f8;
  border-top: 1px solid #e7e7e7;
}

.mobile_dropdown a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #A9A9A9;
  font-size: 16px;
}

/* Responsive breakpoint */
@media (max-width: 768px) {
  .dskMenu { display: none; }       /* hide desktop */
  .mobile_menu { display: flex; }   /* show mobile */
  .logo_left img { width: 150px; height: auto; }
}

@media (max-width: 768px) {
  .dskMenu { display: none; }
  .mobile_menu { display: flex; flex-direction: column; }
}

@media (min-width: 769px) {
  .dskMenu { display: flex; }
  .mobile_menu { display: none; }
}

/* ---------- Images ---------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

h4 img {
    float: left;
    margin: 0 5px 0 0;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6{
    font-family: optima, Arial, sans-serif;
    font-weight: normal;
    font-variant: small-caps;
    line-height: normal;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
}

h1 {
font-size: 1.3em;
color: #000000;
visibility: inherit;
text-align: center;
margin: 0 auto;
}

h2 {
font-size: 1.2em;
color: #000000;
visibility: inherit;
text-align: center;
padding: 5px 0;
}

h3 {
    font-size: 1.3em;
    text-align: left;
    line-height: 1.3em;
    margin-bottom: 1px;
    color: #000;
}

h4 {
    font-size: 1.4em;
    color: #DC143C;
}

h5 {
    font-size: 1.7em;
    color: #555;
}

h6{
    font-size: 1.3em;
    text-align: left;
    color: #044fc7;
}


/* ---------- FAQ Section ---------- */

.faq-kicker {
    font-family: optima, Arial, sans-serif;
    font-size: 1.7em;
    font-variant: small-caps;
    color: #555;
    text-align: center;
    margin: 1.5em auto 0.2em;
}

.faq-title {
    font-family: optima, Arial, sans-serif;
    font-size: 1.4em;
    font-variant: small-caps;
    color: #DC143C;
    text-align: center;
    text-decoration: underline;
    margin: 0 auto 1em;
}

.faq-question {
    font-family: optima, Arial, sans-serif;
    font-size: 1.3em;
    font-variant: small-caps;
    color: #044fc7;
    text-align: left;
    margin: 1.4em 0 0.3em;
}

.faq-answer {
    text-align: left;
    margin: 0 0 1.5em;
}

h3.faq-question {
    margin: 1.4em 0 0.3em; /* override global h3 margins */
    padding: 0;           /* prevent inherited padding */
    text-align: left;     /* ensure left alignment */
}

/* ---------- Text ---------- */
p {
    font-size: 1.2em;
    margin: 0;
}

.leftText, p.left, .leftText {
    font-size: 1.3em;
    color: #000;
    text-align: left;
    font-variant: small-caps;
    margin: 0 1px 5px 1px;
}

/* ---------- Links ---------- */
a {
    font-family: optima, Arial, sans-serif;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

a:visited { color: #000; background-color: #dd0000; }
a:hover { color: #000; background-color: #bed9ff; }
a:active { color: #bed9ff; }

/* ---------- Hearts ---------- */
.heart {
    color: #dd0000;
    font-size: 1rem;
}

/* ---------- Containers ---------- */
.container2 {
    width: 90%;
    max-width: 950px;
    min-width: 300px;
    background: #FFF;
    margin: auto;
    text-align: center;
}

.content, .content2 {
    height: 100%;
    width: 90%;
    padding: 0.1% 0 0.12% 0;
    font-family: optima, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.1em;
    margin: 0.3% auto 0.1% auto;
    text-align: center;
    color: #000;
}

.content ul, .content ol {
    padding: 5px 15px 5px 40px;
}

/* =========================
   Testimonial Carousel
========================= */

/* Full-width wrapper */
.testimonial-wrapper {
  width: 100%;
  max-width: 1400px; /* make wider on desktop */
  margin: 0 auto;
  padding: 0 1rem;
}

/* Section title */
.testimonials-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
}

/* Carousel container keeps min-height to prevent jumping */
.carousel {
  min-height: 520px; /* desktop min-height for tallest review */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Slide */
.testimonial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.testimonial.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* Inner flex container with background + shadow */
.testimonial-inner {
  display: flex;
  align-items: center; /* vertically center image + text */
  justify-content: center; /* horizontally center content */
  gap: 2rem;
  padding: 2rem;
  background: #C9E0FF;
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  margin: 0 auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* Flip right/left slides */
.testimonial[data-side="right"] .testimonial-inner {
  flex-direction: row-reverse;
  text-align: left;
}

/* Image */
.testimonial-img {
  flex: 0 0 400px; /* desktop width */
  height: 266px;   /* maintains 3:2 ratio */
  object-fit: cover;
  border: 3px solid #000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  border-radius: 8px;
}

/* Text */
.testimonial-text {
  flex: 1;
  text-align: center;
}

/* Headline */
.testimonial-headline {
  font-weight: bold;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Stars */
.stars span {
  font-size: 200%;
  color: #fcee5d;
  text-shadow: 2px 2px 2px #555;
  display: block;
  margin: 0 auto 0.5rem auto;
}

/* Quote */
.quote {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* Author */
.author {
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
}

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Big tap target */
.carousel-dots button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* The visible dot */
.carousel-dots button::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #bbb;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Active state */
.carousel-dots button.active::before,
.carousel-dots button[aria-current="true"]::before {
  background-color: #333;
  transform: scale(1.2);
}

/* Keyboard focus (important!) */
.carousel-dots button:focus-visible {
  outline: 2px solid #333;
  outline-offset: 4px;
}



@media (max-width: 768px) {

  /* Carousel fixed height to prevent jump */
  .carousel {
    min-height: 1080px; /* slightly taller for tallest review + buffer */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

  /* Inner container stacks vertically */
  .testimonial-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1rem;
    padding: 1rem;
    max-width: 95%;
    height: 100%; /* fills carousel */
  }

  /* Image wrapper with fixed aspect ratio 3:2 */
  .testimonial-img-wrapper {
    width: 95%;
    max-width: 300px;
    aspect-ratio: 3 / 2; /* keeps horizontal shape */
    overflow: hidden;
    margin-bottom: 1rem;
  }

   /* Image fills available width, preserves horizontal shape */
  .testimonial-img {
    width: 95%;
    max-width: 300px;
    height: auto; /* keeps original 3:2 horizontal shape */
    object-fit: cover;
    margin-bottom: 1rem;
  }

  /* Slides remain absolute for JS carousel functionality */
  .testimonial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .testimonial.active {
    opacity: 1;
    pointer-events: auto;
  }
}

.bottomText {
	max-width: 90%;
	height: auto;
	background: #fff;
	margin: 10px 30px 10px 30px;
	font-family: optima,  Arial, sans-serif;  
	font-size:14pt;font-style:normal;
	font-weight:normal;
	text-decoration:none;
	text-transform:none;
	color:#353c41;

}

/* ---------- Footer ---------- */
.footer {
    background: #999;
    font-family: optima, Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95em;
    left: 0.6%;
    right: 0.6%;
    height: 0.6%;
    max-width: 80%;
    padding: 0.1% 2%;
    margin: 0 auto;
    text-align: center;
    clear: both;
}

/* ---------- Floats ---------- */
.fltrt { float: right; margin-left: 0.08%; }
.fltlft { float: left; margin-right: 0.08%; }
.clearfloat { clear: both; height:0; line-height: 0px; font-size:0.75%; }

/* ---------- Hero Carousel ---------- */
.mc-hero-wrapper { width: 100%; text-align: center; margin: 0 auto; }

.mc-hero-carousel {
    width: 95%;
    max-width: 1920px;
    margin: 28px auto 0 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: #fff;
    position: relative;
}

/* Use padding-top for aspect ratio */
.mc-hero-carousel::before {
    content: "";
    display: block;
    padding-top: 65.52%; /* keeps 1920x1257 ratio */
}

/* Position slides absolutely inside carousel */
.mc-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* ensure slide fills container */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

.mc-hero-slide.mc-active-hero {
    opacity: 1;
    pointer-events: auto;
}

/* Images fill slides properly */
.mc-hero-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Prev/next arrows */
.mc-hero-prev,
.mc-hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 50%;
    z-index: 3;
}

.mc-hero-prev { left:12px; }
.mc-hero-next { right:12px; }
.mc-hero-prev:focus, .mc-hero-next:focus { outline: 3px solid rgba(255,255,255,0.6); }
.mc-dots { display:flex; justify-content:center; gap:10px; margin:14px auto 28px auto; z-index:2; }
.mc-dot { background:none; border:none; font-size:1.4rem; cursor:pointer; opacity:0.55; transition: transform .15s ease, opacity .15s ease; }
.mc-dot.active { opacity:1; transform:scale(1.2); }
.mc-dot:focus { outline:2px solid #f00; border-radius:6px; }

.colorbox
{
background-color: #bed9ff;
margin-top: 2%;
margin-right: 7%;
margin-bottom: 2%;
margin-left: 7%;
font-size: 1.1em;
padding-top: 1%;
padding-bottom: 1.4%;
padding-left: 16%;
padding-right: 16%;
max-width: 80%;
font-family: lucinda grande, Arial, Helvetica, sans-serif;
color: #111;
text-align: center;
border-radius: 10px;
box-shadow: 0 0 10px rgb(127,127,127);
}

/* ---------- Feature Containers ---------- */
.feature-container-centered {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    background: #fff;
    text-align: center;
    padding: 2rem 0;
    clear: both;
}
.feature-container-centered h2 { margin-bottom: 2rem; }
.feature-container-centered .feature-block {
    display: flex !important; align-items:flex-start; justify-content:center; gap:2rem; margin-bottom:3rem; clear:both;
}
.feature-container-centered .feature-block:nth-child(even) { flex-direction: row-reverse; }
.feature-container-centered .feature-image { flex:0 0 400px; }
.feature-container-centered .feature-image img { width:100%; height:auto; border:3px solid black; border-radius:8px; display:block; }
.feature-container-centered .feature-text { flex:1; text-align:left; font-size:1.05rem; line-height:1.6; color:#333; }
.feature-container-centered .feature-text p { margin-bottom:1rem; }

/* ---------- Diversity Block ---------- */
.diversity-block { border:3px solid #dd0000; box-shadow:4px 4px 10px rgba(0,0,0,0.2); padding:1.5rem; margin:2rem auto; max-width:1200px; background:#fff; }
.diversity-block.right-image .feature-container { flex-direction: row-reverse; }
.diversity-block .feature-container { display:flex; gap:2rem; align-items:stretch; justify-content:center; }
.diversity-block .feature-image { flex:0 0 350px; }
.diversity-block .feature-image img { width:100%; height:auto; display:block; }
.diversity-block .feature-text { flex:0 0 350px; display:flex; flex-direction:column; justify-content:center; text-align:center; font-size:1.05rem; line-height:1.6; color:#333; }
.diversity-block .feature-text p { margin-bottom:1rem; }
.diversity-block .bottom-heart { display:block; margin:1.5rem auto 0 auto; width:150px; height:auto; }
.diversity-block.border-blue { border-color: royalblue; }
.diversity-block.border-green { border-color: green; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .feature-container-centered .feature-block { flex-direction: column !important; text-align:center; }
    .feature-container-centered .feature-image, .feature-container-centered .feature-text { flex:none; max-width:100%; margin:0 auto 1rem auto; text-align:center; }

    .diversity-block .feature-container { flex-direction: column !important; align-items:center; }
    .diversity-block .feature-image, .diversity-block .feature-text { flex:none; width:100%; max-width:100%; margin:0 auto 1rem auto; text-align:center; }
    .diversity-block .bottom-heart { width:120px; }

    .colorbox2 { flex-direction: column !important; text-align: center; align-items:center; }
    .colorbox2 img, .colorbox2 .colorbox-text { flex:unset; width:100%; max-width:100%; }
}

/* ---------- Colorboxes ---------- */
.colorbox { background-color:#C9E0FF; margin:2% 7%; padding:1% 6% 1.4% 6%; max-width:95%; font-family:"Lucida Grande", Arial, Helvetica, sans-serif; color:#555; text-align:center; border-radius:10px; box-shadow:0 0 10px rgb(127,127,127); }
/* Base colorbox2 styling */
/* Base colorbox2 styling */
.colorbox2 {
  width: 100%;
  max-width: 95%;
  margin: 2% auto;
  padding: 1.5rem;
  background-color: #C9E0FF;
  font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  color: #555;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(127, 127, 127);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
  flex-wrap: nowrap;
}

.colorbox2 img {
  flex: 0 0 40%;
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.colorbox2 .colorbox-text {
  flex: 1 1 55%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

/* Stars */
.colorbox2 .stars {
  font-size: 2em; 
  color: #fcee5d;
  text-shadow: 2px 2px 2px #555;
  white-space: nowrap;
}

/* Headline above testimonial */
.colorbox2 .headline {
  font-size: 1.3em;  /* slightly bigger */
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px 2px #E5E4E2;
}

/* Main testimonial text */
.colorbox2 .testimonial-text {
  font-size: 1em;   /* relative to 16px default, ~16px on desktop */
  line-height: 1.5;
  color: #333;
  min-font-size: 14px; /* enforce minimum */
}

/* Couple/date/source line */
.colorbox2 .review-source {
  font-size: 1.2em;  /* slightly bigger than text */
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 0.5rem;
}

/* Left / Right variants */
.colorbox2.colorbox-left { flex-direction: row; }
.colorbox2.colorbox-right { flex-direction: row-reverse; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .colorbox2 { flex-wrap: wrap; }
  .colorbox2 img,
  .colorbox2 .colorbox-text { flex: 1 1 100%; }
  .colorbox2 .colorbox-text { margin-top: 1rem; }
}

@media (max-width: 480px) {
  .colorbox2 .stars { font-size: 1.5em; }
  .colorbox2 .headline { font-size: 1.1em; }
  .colorbox2 .review-source { font-size: 1.1em; }
  .colorbox2 .testimonial-text { font-size: 0.95em; }
}

.award-badge {
  display: block;
  margin: 0 auto;   /* centers block-level element */
  border: 0;
}

.social-icons {
  display: flex;
  justify-content: center;  /* centers icons horizontally */
  gap: 5rem;                /* spacing between icons */
  margin: 1rem 0;
}

.social-icons a img {
  width: 43px;
  height: 43px;
  transition: transform 0.2s ease;
}

.social-icons a img:hover {
  transform: scale(1.15);   /* subtle hover effect */
}

.award-badge-wrapper {
  width: 200px;          /* fixed width */
  height: 200px;         /* fixed height for uniformity */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.award-badge {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* keeps aspect ratio without cropping */
  display: block;
  margin: 0 auto;
}


hr {
  width: 50%;
  margin: 2rem auto;  /* centers it horizontally */
  border: none;
  border-top: 2px solid #555; /* adjust thickness & color */
}




/* ---------- Blurbs ---------- */
.blurb {
    height:100%;
    width:90%;
    font-family:optima, Arial, sans-serif;
    font-weight:300;
    font-size:1.1em;
    color:#111;
    margin:0 5% 0 5%;
    text-align:center;
}
.blurb a { font-family:optima, Arial, sans-serif; font-size:1.1em; font-weight:bold; color:#111; }

.content2 > .blurb {
    width: 90%;
    margin: 0 auto;
}

.content2 > .blurb picture img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* ---------- Footer ---------- */

.site-footer {
  background: #fff;
  border-top: 1px solid #ddd;
  margin-top: 4em;
  color: #000;
  font-family: optima, Arial, sans-serif;
}

/* TOP BAR */
.footer-top {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1em 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.footer-brand {
  font-size: 1.2em;
 font-variant: small-caps;
color: #555;
}

.footer-nav a {
  margin-left: 1em;
  text-decoration: none;
  color: #000;
  font-variant: small-caps;
}

.footer-nav a:hover {
  text-decoration: underline;
}

/* IMAGE STRIP */
.footer-image-strip {
  display: flex;
}

.footer-image-strip img {
  width: 25%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* MAIN FOOTER */
.footer-main {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  padding: 3em 2em;
  gap: 2em;
}

/* LEFT COLUMN */
.footer-about {
  width: 700px;
  line-height: 1.6;
  text-align: center;
}

.footer-hearts {
 text-align: center;
  font-size: 2.0em;
  letter-spacing: 0.6em;
  margin-bottom: 0.2em;
  color: #DC143C;
}

.footer-cta {
  display: inline-block;
  margin: 1.5em auto 0;
  padding: 12px 26px;
  background: #DC143C;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.footer-cta:hover {
  background: #DC143C;
  color: #fff;
}

/* RIGHT COLUMNS */
.footer-col {
  width: 300px;
  text-align: center;
}

.footer-col h4 {
   font-variant: small-caps;
  font-weight: normal;
  border-bottom: 1px solid #000;
  padding-bottom: 0.3em;
  margin-bottom: 0.8em;
  display: inline-block;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.6em;
}

.footer-col a {
  text-decoration: none;
  color: #000;
}

.footer-col a:hover {
  text-decoration: underline;
}

/* FOOTER BOTTOM (DESKTOP + MOBILE) */
.footer-bottom {
  width: 100%;
  border-top: 1px solid #ddd;
  margin-top: 1.2em;
  padding: 1.2em 0;
  text-align: center;
  font-size: 0.9em;
  color: #555;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: #DC143C;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.footer-location {
  margin-top: 0.7em;
  font-size: 0.9em;
  color: #555;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {

  .footer-top {
    flex-direction: column;
    text-align: center;
  }

  .footer-main {
    flex-direction: column;
  }

  .footer-about,
  .footer-col {
    width: 100%;
  }

  .footer-nav a {
    margin: 0 0.5em;
  }

}

/* ---------- Misc Classes ---------- */
/* (leftover internal / external float/image helpers) */
.leftoverText, .rightText, .baseImage2, .bottomText, .imageLeft, .align-left, .align-right, .image-left, .image-right, .imagecenter { /*