html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}
body {
  margin: 0;
}
html,
body {
  min-height: 100%;
  height: 100%;
}
h1 {
  font-size: 2em;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}
fieldset,
legend {
  margin: 0;
  padding: 0;
  border: 0;
}
.hidden {
  display: none;
}

/* Fonts */
@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/07d425/0000000000000000000118ae/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/07d425/0000000000000000000118ae/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/07d425/0000000000000000000118ae/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/802c96/00000000000000007735d6bd/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/802c96/00000000000000007735d6bd/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/802c96/00000000000000007735d6bd/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/9a7284/0000000000000000000118b2/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/9a7284/0000000000000000000118b2/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/9a7284/0000000000000000000118b2/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "obviously-condensed";
  src: url("https://use.typekit.net/af/905eb2/00000000000000007735c9dd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/905eb2/00000000000000007735c9dd/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/905eb2/00000000000000007735c9dd/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "obviously-condensed";
  src: url("https://use.typekit.net/af/5d806c/00000000000000007735c9d4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"), url("https://use.typekit.net/af/5d806c/00000000000000007735c9d4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"), url("https://use.typekit.net/af/5d806c/00000000000000007735c9d4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "obviously-wide";
  src: url("https://use.typekit.net/af/00cea5/00000000000000007735c9fe/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/00cea5/00000000000000007735c9fe/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/00cea5/00000000000000007735c9fe/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "obviously-wide";
  src: url("https://use.typekit.net/af/1756a0/00000000000000007735c9f8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"), url("https://use.typekit.net/af/1756a0/00000000000000007735c9f8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"), url("https://use.typekit.net/af/1756a0/00000000000000007735c9f8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "franklin-gothic-urw-comp";
  src: url("https://use.typekit.net/af/7bc359/0000000000000000000118bd/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/7bc359/0000000000000000000118bd/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/7bc359/0000000000000000000118bd/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "franklin-gothic-urw-comp";
  src: url("https://use.typekit.net/af/e5e7a7/0000000000000000000118be/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/e5e7a7/0000000000000000000118be/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/e5e7a7/0000000000000000000118be/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}

body {
  font-family: "franklin-gothic-urw", sans-serif;
  font-weight: 400;
}
h1,
h1 em,
h1 strong,
h1 a {
  font-family: "obviously-condensed", sans-serif;
  font-weight: 700;
}
h2,
h2 em,
h2 strong,
h2 a {
  font-family: "franklin-gothic-urw", sans-serif;
  font-weight: 700;
}
h3,
h3 em,
h3 strong,
h3 a {
  font-family: "franklin-gothic-urw-comp", sans-serif;
  font-weight: 700;
}

/* Page layout */
.page-container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header / logo */
.quiz-header {
  padding: 16px;
  text-align: center;
  background-color: #326e5a;
}
.quiz-header-inner {
  display: flex;
  justify-content: center;
}
.quiz-logo {
  display: block;
  margin: 0 auto;
}

/* Intro section */
.quiz-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  background-color: #326e5a;
}
.quiz-intro[hidden] {
  display: none;
}
.quiz-intro-inner {
  width: 100%;
}
.quiz-hero {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.quiz-hero-intro {
  max-width: 300px;
}
.quiz-hero-desktop {
  display: none;
}
.quiz-hero-mobile {
  display: block;
}
@media (min-width: 768px) {
  .quiz-hero-intro {
    max-width: 520px;
  }
  .quiz-hero-desktop {
    display: block;
  }
  .quiz-hero-mobile {
    display: none;
  }
}
.quiz-tagline {
  margin: 1rem 0;
  color: #fff;
}
.quiz-button-wrap {
  margin-top: 1rem;
}

/* Quiz buttons (intro start + options) */
.quiz-btn {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  width: 350px;
  max-width: 100%;
  margin: 16px auto;
  border: 0;
  background-color: #ecc3b2;
  color: #2e1a47;
  cursor: pointer;
  transition-duration: 0.3s;
  outline: none;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.2;
}
.quiz-intro .quiz-start-btn {
  width: 350px;
  max-width: 100%;
  margin: auto;
  font-family: "obviously-wide", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
}
.quiz-btn:focus {
  background-color: #ecc3b2;
  color: #2e1a47;
  box-shadow: 0 0 0 2px #326e5a, 0 0 0 4px #7ae1bf;
}
.quiz-intro .quiz-btn:hover {
  background-color: #7ae1bf;
  border-radius: 100px;
}
.quiz-intro .quiz-btn:active {
  background-color: #7ae1bf;
  border-radius: 100px;
  box-shadow: inset 1px 2px 8px 0 rgba(0, 0, 0, 0.25), inset 2px 1px 8px 0 rgba(0, 0, 0, 0.25);
}

/* Question sections */
.quiz-question-inner {
  padding: 1rem 0;
}
.quiz-question h2 {
  text-align: center;
  padding: 16px;
}
.quiz-question .quiz-option {
  display: block;
  width: 350px;
  max-width: 90%;
  margin: 16px auto;
  font-family: "franklin-gothic-urw", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
.quiz-question .quiz-option:hover:not(.active) {
  background-color: #326e5a;
  border-radius: 100px;
  color: #fff;
}
.quiz-question .quiz-option.active {
  background-color: #326e5a;
  border-radius: 100px;
  color: #fff;
  box-shadow: inset 1px 2px 8px 0 rgba(0, 0, 0, 0.25), inset 2px 1px 8px 0 rgba(0, 0, 0, 0.25);
}
.quiz-question .quiz-option:focus {
  background-color: #ecc3b2;
  color: #2e1a47;
  box-shadow: 0 0 0 2px #326e5a, 0 0 0 4px #7ae1bf;
}

/* Result sections */
.quiz-result-inner {
  padding: 1rem 0;
  text-align: center;
}
.quiz-result-img {
  display: block;
  margin: 0 auto 1rem;
  max-width: 100%;
}
.quiz-result-body {
  text-align: center;
  margin: 1rem 0;
  color: #2e1a47;
  max-width: 500px;
  margin: 0 auto;
}
.quiz-result-body a {
  text-decoration: underline;
}
.quiz-result .quiz-cta-btn {
  margin: 1rem auto;
  color: #fff;
  font-family: "obviously-wide", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
}
.quiz-result .quiz-cta-btn:hover {
  color: #2e1a47;
  background-color: #7ae1bf;
  border-radius: 100px;
}
.quiz-result .quiz-cta-btn:active {
  color: #2e1a47;
  background-color: #7ae1bf;
  border-radius: 100px;
  box-shadow: inset 1px 2px 8px 0 rgba(0, 0, 0, 0.25), inset 2px 1px 8px 0 rgba(0, 0, 0, 0.25);
}
.quiz-result .quiz-cta-btn:focus {
  color: #2e1a47;
  background-color: #ecc3b2;
  box-shadow: 0 0 0 2px #326e5a, 0 0 0 4px #7ae1bf;
}