:root {
  --amber: #d98e04;
  --slate: #2e3a40;
  --linen: #f4efe6;
  --text: #2e3a40;
  --font: 'Open Sans', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--font); color: var(--text); background: #fff; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* header */
.por-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 32px;
  padding: 12px 24px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
#hdrl { position: sticky; top: 0; z-index: 10; }
#hdrl .por-boxed { max-width: none; display: block; }
.por-logo img { height: 40px; width: auto; }
.por-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.por-nav a, .por-nav span { text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer; }
.por-nav-container { position: relative; }
.por-nav-container > ul {
  display: none; position: absolute; top: 100%; left: -12px; flex-direction: column; gap: 0;
  background: #fff; padding: 8px 0; min-width: 200px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.por-nav-container > ul a { display: block; padding: 6px 16px; font-weight: 400; white-space: nowrap; }
.por-nav-container:hover > ul, .por-nav-container:focus-within > ul { display: flex; }
/* second level: group heading with its page + anchors listed below it */
.por-nav-container .por-nav-container { position: static; }
.por-nav-container .por-nav-container > span { display: block; padding: 10px 16px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--amber); cursor: default; }
.por-nav-container .por-nav-container > ul { display: flex; position: static; box-shadow: none; padding: 0; min-width: 0; }
.por-nav-anchor a { padding-left: 28px !important; font-size: 13px; }
.por-nav a.active { color: var(--amber); }

/* layout */
.por-layout { background-size: cover; background-position: center; }
.por-boxed { max-width: 1100px; margin: 0 auto; display: grid; gap: 30px; }
.por-one_column .por-boxed { grid-template-columns: 1fr; }
.por-two_column .por-boxed { grid-template-columns: 1fr 1fr; }
.por-three_column .por-boxed { grid-template-columns: repeat(3, 1fr); }
.por-align-center { align-self: center; }
.por-layout[style*="#2e3a40"] { color: #fff; }

/* typography (class names as used by the portal text widget) */
.typ-heading-1 { font-size: 48px; font-weight: 700; line-height: 1.15; margin: 0; }
.typ-heading-2 { font-size: 30px; font-weight: 700; margin: 0 0 12px; }
.typ-overline { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 600; color: var(--amber); margin: 0 0 6px; }
.typ-body { font-size: 16px; margin: 0 0 12px; }
.typ-small { font-size: 13px; margin: 0; }

.por-swatches { list-style: none; padding: 0; }
.por-swatches li { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.por-swatches span { width: 36px; height: 36px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .1); }

.por-downloads { width: 100%; border-collapse: collapse; font-size: 15px; }
.por-downloads th, .por-downloads td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e3ddd2; }

.por-error { padding: 80px 24px; text-align: center; }

@media (max-width: 760px) {
  .por-two_column .por-boxed, .por-three_column .por-boxed { grid-template-columns: 1fr; }
  .por-layout { padding-left: 16px !important; padding-right: 16px !important; }
  .por-nav ul { gap: 12px; }
  .typ-heading-1 { font-size: 34px; }
}