:root {
  --red: #a71c2b;
  --navy: #252670;
  --gray: #a2a2a2;
  --line: #ddd;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 300 20px/1.6 Lato, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; transition: color .2s ease-in-out; }
a:hover { color: var(--navy); }
img, video, iframe { max-width: 100%; height: auto; display: block; }
::selection { background: #444; color: #fff; }

p { margin: 0 0 30px; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
b, strong { font-weight: 700; }
h1, h2, h3, h4 { font-weight: 200; margin: 0 0 20px; line-height: 1.25; }

.wrap { max-width: var(--wrap); margin: 0 auto; }

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 5px solid var(--gray);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }

.title-area { width: 360px; padding: 6px 0; }
.site-title { display: block; line-height: 1; color: var(--navy); }
.site-title:hover { color: var(--navy); }
.site-title img { max-height: 76px; width: auto; }
.site-name {
  display: block;
  font: 700 38px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.5px;
  border-bottom: 3px solid var(--navy);
  padding-bottom: 4px;
}
.site-tagline {
  display: block;
  text-align: right;
  font: 700 17px/1.3 Georgia, serif;
  color: var(--navy);
}

.menu { display: flex; align-items: center; }
.menu > li { position: relative; }
.menu a {
  display: block;
  padding: 25px 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.menu > li > a:hover { color: var(--navy); border-color: var(--navy); }
.menu > .nav-cta > a { margin-left: 6px; padding: 6px 14px; color: #fff; background: var(--navy); border: 0; }
.menu > .nav-cta > a:hover { color: #fff; background: var(--red); }

.sub-menu {
  position: absolute;
  left: 0; top: 100%;
  width: 200px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out;
}
.sub-menu a { padding: 16px 20px; color: #fff; background: #111; border: 0; text-transform: none; line-height: 1.4; }
.sub-menu a:hover { color: #fff; background: #222; }
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu { opacity: 1; visibility: visible; }

.nav-social { display: flex; gap: 4px; margin-left: 10px; }
.nav-social a { padding: 0; border: 0; }
.nav-social svg { width: 25px; height: 25px; fill: var(--red); transition: opacity .2s; }
.nav-social a:hover svg { opacity: .7; }

.menu-toggle, .sub-toggle { display: none; }

/* Content */
.site-inner { margin-top: 170px; }
.content { max-width: var(--wrap); margin: 0 auto; padding: 0 200px 50px; }
.entry { margin-bottom: 60px; }

.entry-content h1 { font-size: 40px; color: var(--navy); }
.entry-content h2 { font-size: 32px; font-style: italic; margin-top: 50px; }
.entry-content h3 { font-size: 22px; font-weight: 400; margin-bottom: 10px; }

.entry-content ul, .entry-content ol { margin: 0 0 30px 40px; }
.entry-content ul > li { list-style: disc; }
.entry-content ol > li { list-style: decimal; }
.entry-content li { margin-bottom: 10px; }

.entry-content figure { margin: 0 0 30px; }
.entry-content figure img, .entry-content figure video { width: 100%; }
.entry-content figure img[height="1024"] { width: auto; max-height: 720px; margin: 0 auto; }
figcaption { margin-top: 8px; font-size: 16px; line-height: 1.4; text-align: center; color: #555; }

blockquote {
  margin: 0 0 30px;
  padding: 20px 30px;
  border-left: 5px solid var(--navy);
  background: #f5f6fa;
}
blockquote p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 0 0 30px; }
table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.45; }
caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 10px; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border: 1px solid var(--line); }
th { font-weight: 700; color: #fff; background: var(--navy); }
tbody tr:nth-child(even) { background: #f5f5f5; }

.faq [itemprop="mainEntity"] { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq [itemprop="text"] p { margin-bottom: 0; }
.references li { font-size: 16px; line-height: 1.5; }

/* Footer */
.site-footer { padding: 20px; text-align: center; background: #fff; border-top: 5px solid var(--gray); }
.site-footer p { margin: 0; font-size: 14px; color: var(--red); }

/* Responsive */
@media (max-width: 1200px) {
  :root { --wrap: 960px; }
  .site-header .wrap { flex-direction: column; }
  .title-area { width: auto; padding-top: 10px; }
  .content { padding: 0 110px 50px; }
  .site-inner { margin-top: 210px; }
}

@media (max-width: 1023px) {
  :root { --wrap: 768px; }
  .site-header { position: static; }
  .site-inner { margin-top: 60px; }
  .content { padding: 0 0 50px; }
}

@media (max-width: 800px) {
  .site-header .wrap, .content { padding-left: 5%; padding-right: 5%; }
  .menu-toggle {
    display: block;
    width: 44px; height: 40px;
    margin: 6px auto 10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    display: block;
    width: 26px; height: 3px;
    margin: 0 auto;
    background: var(--navy);
    position: relative;
    transition: transform .2s;
  }
  .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
  .menu-toggle span::before { top: -8px; }
  .menu-toggle span::after { top: 8px; }
  .menu-open .menu-toggle span { background: transparent; }
  .menu-open .menu-toggle span::before { transform: translateY(8px) rotate(45deg); }
  .menu-open .menu-toggle span::after { transform: translateY(-8px) rotate(-45deg); }

  .nav-primary { display: none; width: 100%; padding-bottom: 20px; }
  .menu-open .nav-primary { display: block; }
  .menu { flex-direction: column; align-items: stretch; }
  .menu a { padding: 10px 0; color: var(--navy); text-transform: none; border: 0; }
  .menu > .nav-cta > a { margin: 10px 0 0; padding: 10px 0; text-align: center; }
  .has-sub > a { margin-right: 50px; }
  .sub-toggle {
    display: block;
    position: absolute;
    right: 0; top: 4px;
    width: 44px; height: 36px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .sub-toggle::before {
    content: "";
    display: block;
    width: 10px; height: 10px;
    margin: 0 auto;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: rotate(45deg);
    transition: transform .2s;
  }
  .sub-open > .sub-toggle::before { transform: rotate(-135deg); }
  .sub-menu { position: static; width: 100%; opacity: 1; visibility: visible; display: none; padding-left: 20px; }
  .sub-open > .sub-menu { display: block; }
  .sub-menu a, .sub-menu a:hover { color: var(--navy); background: none; padding: 8px 0; }
  .nav-social { justify-content: center; margin: 15px 0 0; }

  .entry-content h1 { font-size: 32px; }
  .entry-content h2 { font-size: 28px; }
  .entry-content ul, .entry-content ol { margin-left: 24px; }
  .site-name { font-size: 30px; }
}

@media (max-width: 480px) {
  body { font-size: 18px; }
  .entry-content h1 { font-size: 28px; }
  .entry-content h2 { font-size: 24px; }
  blockquote { padding: 15px 18px; }
}
