/* 054: illustrative examples reuse the existing Open Sans bold face. */
.sz-process-notes {
  --sz-process-caption-size: 16px;
  --sz-process-caption-gap: 8px;
}

.sz-process-notes h2.sz-process-heading {
  margin: 0 0 22px;
  color: #99501c;
  font: 700 28px/1.05 "open sans", "Open Sans", Arial, sans-serif;
  letter-spacing: -.025em;
}
.sz-process-notes ol.sz-process-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.sz-process-steps > li.sz-process-card,
.sz-process-steps > li.sz-process-arrow {
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.sz-process-card > figure { margin: 0; padding: 0; min-width: 0; }
.sz-process-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background: #d3cbc0;
}
.sz-process-photo > img {
  display: block;
  position: absolute;
  top: 0;
  width: 400% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
}
.sz-process-photo-1 > img { left: 0; }
.sz-process-photo-2 > img { left: -100%; }
.sz-process-photo-3 > img { left: -200%; }
.sz-process-photo-4 > img { left: -300%; }
.sz-process-notes figcaption.sz-process-caption {
  min-height: 1.88em;
  margin: var(--sz-process-caption-gap) 0 0;
  padding: 0;
  color: #111;
  font: 700 var(--sz-process-caption-size)/.94 "open sans", "Open Sans", Arial, sans-serif;
  letter-spacing: -.02em;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}
.sz-process-caption > span { display: block; }
.sz-process-steps > li.sz-process-arrow {
  align-self: center;
  transform: translateY(calc(-.94 * var(--sz-process-caption-size) - var(--sz-process-caption-gap) / 2));
  color: #000;
}
.sz-process-arrow > svg { display: block; width: 24px; height: 20px; margin: 0 auto; }
.sz-process-notes p.sz-process-notice {
  margin: 18px 0 0 !important;
  color: #777;
  font: 12px/1.35 Arial, sans-serif !important;
  text-indent: 0;
}

@media (min-width: 761px) {
  .sz-home-page #PAGES_CONTAINER > .sz-process-notes {
    width: var(--sz-notes-width, 980px);
    margin: 24px auto 48px;
    margin-left: var(--sz-notes-left, auto);
  }
}
@media (max-width: 760px) {
  .sz-process-notes {
    --sz-process-caption-size: 9.5px;
    --sz-process-caption-size: clamp(9.5px, 2.4vw, 16px);
    --sz-process-caption-gap: 6px;
  }
  .sz-process-notes h2.sz-process-heading { margin-bottom: 18px; font-size: 24px; }
  .sz-process-notes ol.sz-process-steps {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
  }
  .sz-process-notes figcaption.sz-process-caption {
    margin-top: var(--sz-process-caption-gap);
  }
  .sz-process-arrow > svg { width: 10px; height: 14px; }
  .sz-process-notes p.sz-process-notice { margin-top: 14px !important; font-size: 10px !important; }
  .sz-home-page #PAGES_CONTAINER > .sz-process-notes { margin-top: 24px !important; margin-bottom: 32px !important; }
}