/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  --lib-core--color-primary: #3d46ea;
  --lib-core--color-on-primary: #ffffff;
  --lib-core--color-primary-container: #e0e0ff;
  --lib-core--color-on-primary-container: #00006e;
  --lib-core--color-secondary: #0060a8;
  --lib-core--color-on-secondary: #ffffff;
  --lib-core--color-secondary-container: #d3e4ff;
  --lib-core--color-on-secondary-container: #001c38;
  --lib-core--color-background: #fffbff;
  --lib-core--color-on-background: #1b1b1f;
  --lib-core--color-surface: var(--migraine-core-secondary-ivory);
  --lib-core--color-surface-variant: #e4e1ec;
  --lib-core--color-on-surface: #1b1b1f;
  --lib-core--color-on-surface-variant: #46464f;
  --lib-core--color-system-surface-surface-1: #f2effc;
  --lib-core--color-system-surface-surface-2: #edeafb;
  --lib-core--color-system-surface-surface-3: #e7e4fb;
  --lib-core--color-system-surface-surface-5: #e1dffa;
  --lib-core--color-outline: #777680;
  --lib-core--color-outline-variant: #c7c5d0;
  --lib-core--color-utility-error-error: #ba1a1a;
  --lib-core--color-utility-warning-warning: #77591a;
  --lib-core--color-utility-success-success: #2e6b3d;
  --lib-core--color-system-white: #ffffff;
  --lib-core--color-system-black: #000000;
}

:root {
  --lib-core--spacing-1x: 4px;
  --lib-core--spacing-2x: 8px;
  --lib-core--spacing-3x: 12px;
  --lib-core--spacing-4x: 16px;
  --lib-core--spacing-5x: 20px;
  --lib-core--spacing-6x: 24px;
  --lib-core--spacing-7x: 28px;
  --lib-core--spacing-8x: 32px;
  --lib-core--spacing-9x: 36px;
  --lib-core--spacing-10x: 40px;
  --lib-core--spacing-11x: 44px;
  --lib-core--spacing-12x: 48px;
  --lib-core--spacing-13x: 52px;
  --lib-core--spacing-14x: 56px;
  --lib-core--spacing-15x: 60px;
  --lib-core--spacing-16x: 64px;
  --lib-core--spacing-17x: 68px;
  --lib-core--spacing-18x: 72px;
  --lib-core--spacing-19x: 76px;
  --lib-core--spacing-20x: 80px;
  --lib-core--spacing-21x: 84px;
  --lib-core--spacing-22x: 88px;
  --lib-core--spacing-23x: 92px;
  --lib-core--spacing-24x: 96px;
  --lib-core--spacing-half: 2px;
  --lib-core--spacing-smallest: 1px;
}

:root {
  --lib-core--typography-base-unit-font-size: 16px;
  --lib-core--typography-default-font-size: 16px;
  --lib-core--typography-default-line-height: calc(
    var(--lib-core--typography-default-font-size) * 1.25
  );
  --lib-core--typography-default-text-decoration: none;
  --lib-core--typography-default-text-weight: 400;
  --lib-core--typography-callout-font-size: 29.6px;
  --lib-core--typography-callout-line-height: calc(
    var(--lib-core--typography-callout-font-size) * 1
  );
  --lib-core--typography-callout-text-weight: 500;
  --lib-core--typography-heading-mid-font-size: 20px;
  --lib-core--typography-heading-mid-line-height: calc(
    var(--lib-core--typography-heading-mid-font-size) * 1.2
  );
  --lib-core--typography-heading-mid-text-weight: 500;
  --lib-core--typography-smaller-font-size: 16px;
  --lib-core--typography-smaller-line-height: calc(
    var(--lib-core--typography-smaller-font-size) * 1.25
  );
  --lib-core--typography-smallest-font-size: 14px;
  --lib-core--typography-smallest-line-height: calc(
    var(--lib-core--typography-smallest-font-size) * 1.25
  );
  --lib-core--typography-heading-1-alt-font-size: 64px;
  --lib-core--typography-heading-2-alt-font-size: 56px;
  --lib-core--typography-heading-3-alt-font-size: 48px;
  --lib-core--typography-heading-4-alt-font-size: 36px;
  --lib-core--typography-heading-5-alt-font-size: 32px;
  --lib-core--typography-heading-6-alt-font-size: 24px;
  --lib-core--typography-heading-7-alt-font-size: 20px;
  --lib-core--typography-heading-display-font-size: 64px;
  --lib-core--typography-heading-display-line-height: 120%;
  --lib-core--typography-heading-display-line-height2: 125%;
  --lib-core--typography-heading-display-text-decoration: none;
  --lib-core--typography-heading-display-font-weight: 800;
  --lib-core--typography-heading-headline-font-size: 48px;
  --lib-core--typography-heading-headline-line-height: 120%;
  --lib-core--typography-heading-headline-text-decoration: none;
  --lib-core--typography-heading-headline-font-weight: 800;
  --lib-core--typography-heading-title-font-size: 32px;
  --lib-core--typography-heading-title-line-height: 120%;
  --lib-core--typography-heading-title-text-decoration: none;
  --lib-core--typography-heading-title-font-weight: 700;
  --lib-core--typography-font-body-medium: 400 16px / 1.25
    var(--lib-core--font-family-primary);
  --lib-core--typography-font-body-large: 400 20px / 1.25
    var(--lib-core--font-family-primary);
}

:root {
  /* colors */
  --link-color: #035fe6;
  --link-hover-color: #136ff6;
  --background-color: none;
  --overlay-background-color: #eee;
  --highlight-background-color: #ccc;
  --text-color: #000;

  /* fonts */
  --body-font-family: "Barlow", sans-serif;
  --heading-font-family: "Barlow Condensed", sans-serif;
  --fixed-font-family: "Barlow", sans-serif;

  /* body sizes */
  --body-font-size-m: 22px;
  --body-font-size-s: 18px;
  --body-font-size-xs: 16px;

  /* heading sizes */
  --heading-font-size-xxl: 48px;
  --heading-font-size-xl: 40px;
  --heading-font-size-l: 32px;
  --heading-font-size-m: 24px;
  --heading-font-size-s: 20px;
  --heading-font-size-xs: 18px;

  /* nav height */
  --nav-height: 105px;

  /* migraine styles */
  --migraine-core-neutrals-black: #000;
  --migraine-core-neutrals-white: #fff;
  --migraine-core-primary-peony: #c47771;
  --migraine-core-primary-sunrise: #fec45c;
  --migraine-core-primary-indigo: #18263b;
  --migraine-core-secondary-ivory: #f5f3e9;
  --migraine-core-secondary-blush: #b7948f;
  --migraine-core-secondary-ash: #767a7c;
  --migraine-core-secondary-cognac: #985854;
  --migraine-core-primary-light-indigo: #416691;
  --migraine-core-utility-cta: #cb7d77;
  --migraine-core-desktop-xl-h1-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-desktop-xl-h1-font-size: 72px;
  --migraine-core-desktop-xl-h1-font-weight: 300;
  --migraine-core-desktop-xl-h1-line-height: 70px;
  --migraine-core-desktop-xl-h2-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-desktop-xl-h2-font-size: 75px;
  --migraine-core-desktop-xl-h2-font-weight: 300;
  --migraine-core-desktop-xl-h2-line-height: 75px;
  --migraine-core-desktop-xl-h3-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-desktop-xl-h3-font-size: 55px;
  --migraine-core-desktop-xl-h3-font-weight: 400;
  --migraine-core-desktop-xl-h3-line-height: 55px;
  --migraine-core-desktop-xl-h4-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-desktop-xl-h4-font-size: 36px;
  --migraine-core-desktop-xl-h4-font-weight: 200;
  --migraine-core-desktop-xl-h4-line-height: 36px;
  --migraine-core-desktop-xl-h5-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-desktop-xl-h5-font-size: 18px;
  --migraine-core-desktop-xl-h5-font-weight: 500;
  --migraine-core-desktop-xl-h5-line-height: 28px;
  --migraine-core-desktop-xl-h6-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-desktop-xl-h6-font-size: 16px;
  --migraine-core-desktop-xl-h6-font-weight: 400;
  --migraine-core-desktop-xl-h6-line-height: 24px;
  --migraine-core-desktop-xl-p-font-family: "Montserrat", sans-serif;
  --migraine-core-desktop-xl-p-font-size: 16px;
  --migraine-core-desktop-xl-p-font-weight: 500;
  --migraine-core-desktop-xl-p-line-height: 24px;
  --migraine-core-desktop-xl-t7-font-family: "Montserrat", sans-serif;
  --migraine-core-desktop-xl-t7-font-size: 14px;
  --migraine-core-desktop-xl-t7-font-weight: 500;
  --migraine-core-desktop-xl-t7-line-height: 20px;
  --migraine-core-desktop-xl-t8-font-family: "Montserrat", sans-serif;
  --migraine-core-desktop-xl-t8-font-size: 12px;
  --migraine-core-desktop-xl-t8-font-weight: 400;
  --migraine-core-desktop-xl-t8-line-height: 16px;
  --migraine-core-mobile-xs-h1-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-mobile-xs-h1-font-size: 40px;
  --migraine-core-mobile-xs-h1-font-weight: 300;
  --migraine-core-mobile-xs-h1-line-height: 40px;
  --migraine-core-mobile-xs-h2-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-mobile-xs-h2-font-size: 36px;
  --migraine-core-mobile-xs-h2-font-weight: 400;
  --migraine-core-mobile-xs-h2-line-height: 40px;
  --migraine-core-mobile-xs-h3-font-family: "Barlow Condensed", sans-serif;
  --migraine-core-mobile-xs-h3-font-size: 24px;
  --migraine-core-mobile-xs-h3-font-weight: 300;
  --migraine-core-mobile-xs-h3-line-height: 24px;
  --migraine-core-mobile-xs-h4-font-family: "Barlow", sans-serif;
  --migraine-core-mobile-xs-h4-font-size: 20px;
  --migraine-core-mobile-xs-h4-font-weight: 500;
  --migraine-core-mobile-xs-h4-line-height: 28px;
  --migraine-core-mobile-xs-h5-font-family: "Barlow", sans-serif;
  --migraine-core-mobile-xs-h5-font-size: 18px;
  --migraine-core-mobile-xs-h5-font-weight: 500;
  --migraine-core-mobile-xs-h5-line-height: 28px;
  --migraine-core-mobile-xs-h6-font-family: "Montserrat", sans-serif;
  --migraine-core-mobile-xs-h6-font-size: 16px;
  --migraine-core-mobile-xs-h6-font-weight: 400;
  --migraine-core-mobile-xs-h6-line-height: 24px;
  --migraine-core-mobile-xs-p-font-family: "Montserrat", sans-serif;
  --migraine-core-mobile-xs-p-font-size: 16px;
  --migraine-core-mobile-xs-p-font-weight: 500;
  --migraine-core-mobile-xs-p-line-height: 24px;
  --migraine-core-mobile-xs-t7-font-family: "Montserrat", sans-serif;
  --migraine-core-mobile-xs-t7-font-size: 14px;
  --migraine-core-mobile-xs-t7-font-weight: 500;
  --migraine-core-mobile-xs-t7-line-height: 20px;
  --migraine-core-mobile-xs-t8-font-family: "Montserrat", sans-serif;
  --migraine-core-mobile-xs-t8-font-size: 12px;
  --migraine-core-mobile-xs-t8-font-weight: 400;
  --migraine-core-mobile-xs-t8-line-height: 16px;
  --line-40: 4px;
  --line-20: 2px;
  --line-10: 1px;
  --spacing-90: 112px;
  --spacing-80: 96px;
  --spacing-70: 80px;
  --spacing-60: 64px;
  --spacing-55: 56px;
  --spacing-50: 32px;
  --spacing-40: 24px;
  --spacing-30: 16px;
  --spacing-20: 8px;
  --spacing-10: 4px;
  --secondary-color: #000;
}

header {
  height: var(--nav-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
  font-weight: 500;
  margin: 0;
  scroll-margin: calc(var(--nav-height) + 1em);
  text-align: start;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 1em;
  margin-bottom: 1em;
}

a:any-link {
  color: var(--migraine-core-primary-indigo);
  text-decoration: none;
}

code,
pre,
samp {
  font-family: var(--fixed-font-family);
  font-size: var(--body-font-size-s);
}

code,
samp {
  padding: 0.125em;
}

pre {
  overflow: scroll;
}

/* main {
  max-width: 1000px;
  height: 700px;
  overflow: scroll;
} */

main .section,
footer {
  margin-left: 0;
  margin-right: 0;
  padding: 1.5rem;
}

.section.hero-container,
.section:has(.full-width-blue-inverted-container),
.section:has(.full-width-light-blue-inverted-container),
.section.full-width-columns-section,
.homepage-page .section:first-child:has(picture) {
  padding: 0;
}

.button-container a.button {
  display: inline-flex;
}

.button-container a.button.primary,
button.primary,
.nav-tools a {
  background-color: var(--migraine-core-primary-indigo);
  color: var(--migraine-core-secondary-ivory);
  font-family: var(--migraine-core-mobile-xs-h4-font-family);
  font-size: var(--migraine-core-desktop-xl-h5-font-size);
  font-weight: var(--migraine-core-desktop-xl-h5-font-weight);
  line-height: var(--migraine-core-desktop-xl-h5-line-height);
  padding: 12px 24px;
  border-radius: 32px;
  display: inline-flex;
  justify-content: center;
  border: 2px solid var(--migraine-core-primary-indigo);
}

.button-container a.button.secondary,
button.secondary {
  background-color: transparent;
  border: 2px solid var(--migraine-core-primary-indigo);
  color: var(--migraine-core-primary-indigo);
  font-family: var(--migraine-core-mobile-xs-h4-font-family);
  font-size: var(--migraine-core-desktop-xl-h5-font-size);
  font-weight: var(--migraine-core-desktop-xl-h5-font-weight);
  line-height: var(--migraine-core-desktop-xl-h5-line-height);
  padding: 12px 24px;
  border-radius: 32px;
  font-style: normal;
  display: inline-flex;
}

button:disabled,
button:disabled:hover {
  background-color: var(--overlay-background-color);
  cursor: unset;
}

h1 {
  font-family: var(--migraine-core-desktop-xl-h2-font-family);
  font-size: var(--migraine-core-mobile-xs-h1-font-size);
  font-weight: var(--migraine-core-desktop-xl-h1-font-weight);
  line-height: 3rem;
}

h2 {
  font-size: var(--migraine-core-desktop-xl-h4-font-size);
  line-height: var(--migraine-core-desktop-xl-h4-line-height);
  font-family: var(--migraine-core-desktop-xl-h2-font-family);
  font-weight: var(--migraine-core-desktop-xl-h2-font-weight);
}

@media (min-width: 567px) {
  h2 {
    font-size: var(--migraine-core-desktop-xl-h3-font-size);
    line-height: var(--migraine-core-desktop-xl-h3-line-height);
    font-family: var(--migraine-core-desktop-xl-h2-font-family);
    font-weight: var(--migraine-core-desktop-xl-h2-font-weight);
  }
}

.section h2 {
  position: relative;
  margin-bottom: 2rem;
}

.section .one-column-yellow h2 {
  font-size: var(--migraine-core-mobile-xs-h1-font-size);
  line-height: var(--migraine-core-mobile-xs-h1-line-height);
  font-family: var(--migraine-core-desktop-xl-h2-font-family);
  font-weight: var(--migraine-core-desktop-xl-h2-font-weight);
}

p {
  font-family: var(--migraine-core-desktop-xl-p-font-family);
  font-size: var(--migraine-core-desktop-xl-p-font-size);
  font-weight: var(--migraine-core-desktop-xl-p-font-weight);
  line-height: var(--migraine-core-desktop-xl-p-line-height);
}

h3 {
  font-family: var(--migraine-core-desktop-xl-h3-font-family);
  font-weight: var(--migraine-core-desktop-xl-h3-font-weight);
  font-size: var(--migraine-core-mobile-xs-h2-font-size);
  line-height: var(--migraine-core-mobile-xs-h2-line-height);
}

h4 {
  font-size: var(--migraine-core-mobile-xs-h3-font-size);
  line-height: var(--migraine-core-mobile-xs-h3-line-height);
  margin-bottom: 1rem;
  font-family: var(--migraine-core-desktop-xl-h4-font-family);
  font-weight: var(--migraine-core-desktop-xl-h4-font-weight);
}

@media (min-width: 775px) {
  h1 {
    font-family: var(--migraine-core-desktop-xl-h1-font-family);
    font-size: var(--migraine-core-desktop-xl-h1-font-size);
    font-weight: var(--migraine-core-desktop-xl-h1-font-weight);
    line-height: 5rem;
  }

  h2 {
    font-size: var(--migraine-core-desktop-xl-h2-font-size);
    line-height: var(--migraine-core-desktop-xl-h2-line-height);
  }

  .section .one-column-yellow h2 {
    font-size: 3.5rem;
    line-height: var(--migraine-core-desktop-xl-h2-line-height);
  }

  h3 {
    font-size: var(--migraine-core-desktop-xl-h3-font-size);
    line-height: var(--migraine-core-desktop-xl-h3-line-height);
  }

  h4 {
    font-size: var(--migraine-core-desktop-xl-h4-font-size);
    line-height: var(--migraine-core-desktop-xl-h4-line-height);
  }

  h5 {
    font-family: var(--migraine-core-desktop-xl-h4-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
  }
}

a.button.primary:hover,
a.button.primary:focus,
button.primary:hover,
button.primary:focus,
.nav-tools a:hover,
.nav-tools a:focus {
  background-color: transparent;
  cursor: pointer;
  color: var(--migraine-core-primary-indigo);
  border: 2px solid var(--migraine-core-primary-indigo);
}

a.button.secondary:hover,
a.button.secondary:focus,
button.secondary:hover,
button.secondary:focus {
  background-color: var(--migraine-core-primary-indigo);
  cursor: pointer;
  color: var(--migraine-core-secondary-ivory);
  border: 2px solid var(--migraine-core-primary-indigo);
}

.button-container {
  margin-top: 1rem;
}

@media (min-width: 0) and (max-width: 767px) {
  li {
    font-size: var(--migraine-core-mobile-xs-p-font-size);
  }
}

@media (min-width: 767px) {
  li {
    font-size: var(--migraine-core-desktop-xl-p-font-size);
  }
}

.full-width-columns-section li {
  font-family: var(--migraine-core-desktop-xl-p-font-family);
  font-size: var(--migraine-core-desktop-xl-p-font-size);
  font-weight: var(--migraine-core-desktop-xl-p-font-weight);
  line-height: var(--migraine-core-desktop-xl-p-line-height);
}

body {
  font-size: var(--body-font-size-m);
  margin: 0;
  font-family: var(--body-font-family);
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--migraine-core-primary-indigo);
  display: none;
}

body.appear {
  display: unset;
}

h2::after {
  content: "";
  position: absolute;
  height: 2px;
  background: black;
  top: 100%;
  left: 0;
  min-width: 300px;
  margin-top: 1.5rem;
  width: 100%;
}

.core-overlay-header h2::after {
  content: "";
  position: absolute;
  height: 2px;
  background: black;
  top: 100%;
  left: 0;
  width: 300px;
  margin-top: unset;
}

.references-wrapper p {
  margin: 0;
}

.homepage-page h1 {
  margin: 0 1rem 1rem;
}

.homepage-page h1,
.homepage-page h3,
.homepage-page .default-content-wrapper p {
  color: var(--migraine-core-primary-indigo);
}

.homepage-page h1,
.homepage-page h2,
.homepage-page h3,
.homepage-page h4,
.homepage-page h5,
.homepage-page h6,
.homepage-page p {
  text-align: center;
}

.homepage-page .section h3 {
  margin: 0 auto;
  border-bottom: 2px solid #000;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

main input {
  font-size: 1.25rem;
  width: 100%;
  max-width: 50rem;
  display: block;
  margin-bottom: 1rem;
  padding: 0.75rem 0.6rem;
  border-radius: 0.25rem;
  box-sizing: border-box;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  background-color: var(--background-color);
}

main input:hover {
  border: 1px solid var(--text-color);
}

main pre {
  background-color: var(--overlay-background-color);
  padding: 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  white-space: pre;
}

main blockquote {
  font-style: italic;
  margin: 3rem;
  text-indent: -1rem;
  hanging-punctuation: first;
}

main blockquote p::before {
  content: "“";
  line-height: 0;
}

main blockquote p::after {
  content: "”";
  line-height: 0;
}

main img {
  width: 100%;
  height: auto;
}

.bibliografia {
  display: none;
}

/* progressive section appearance */
main .section[data-section-status="loading"],
main .section[data-section-status="initialized"] {
  display: none;
}

main .section.highlight {
  background-color: var(--highlight-background-color);
}

/* .cards-wrapper {
  padding-bottom: 1rem;
} */

.managing-migraine-page .default-content-wrapper h5,
.talking-to-your-doctor-page .default-content-wrapper h5 {
  font-family: var(--migraine-core-desktop-xl-h4-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

@media (min-width: 775px) {
  :root {
    --heading-font-size-xxl: 60px;
    --heading-font-size-xl: 48px;
    --heading-font-size-l: 36px;
    --heading-font-size-m: 30px;
    --heading-font-size-s: 24px;
    --heading-font-size-xs: 22px;
  }

  .section > div {
    max-width: 1000px;
    margin: auto;
    text-align: start;
  }

  .section .vertical-blue,
  .section.cards-horizontal-container {
    padding: 0 1.5rem;
  }

  h2::after {
    width: 100%;
  }

  div .img-expand img {
    width: 70%;
    cursor: pointer;
  }

  .img-expand img.expand {
    width: 100%;
  }

  .img-expand .default-content-wrapper:has(.expand) {
    max-width: 1200px;
  }
}

/* homepage hero */
.homepage-page .section:first-child div {
  max-width: 100%;
}

.homepage-page .section:first-child img {
  min-width: 100%;
  object-fit: cover;
  height: 200px;
}

.section.hero-container .hero-wrapper {
  margin: 0;
  max-width: 100%;
}

.hero-just-image h1 {
  font-size: var(--migraine-core-mobile-xs-h3-font-size);
  line-height: var(--migraine-core-mobile-xs-h3-line-height);
  margin-bottom: 1rem;
  font-family: var(--migraine-core-desktop-xl-h4-font-family);
  font-weight: var(--migraine-core-desktop-xl-h4-font-weight);
}

@media (min-width: 775px) {
  .homepage-page .section:first-child img {
    height: 500px;
    min-width: 100%;
    object-fit: cover;
  }

  .hero-just-image h1 {
    font-size: var(--migraine-core-desktop-xl-h4-font-size);
    line-height: var(--migraine-core-desktop-xl-h4-line-height);
    margin-bottom: 1rem;
  }
}

.accordion a:any-link {
  text-decoration: underline;
  color: var(--migraine-core-secondary-ivory);
  font-family: var(--migraine-core-desktop-xl-p-font-family);
  font-size: var(--migraine-core-desktop-xl-p-font-size);
  font-weight: var(--migraine-core-desktop-xl-p-font-weight);
  line-height: var(--migraine-core-desktop-xl-p-line-height);
  text-underline-offset: 3px;
}

.accordion a:any-link:hover {
  color: var(--migraine-core-primary-sunrise);
}

.accordion .button-container {
  margin: 0;
}

.accordion .button-container a.button.primary,
.accordion button.primary,
.accordion .button-container a.button.secondary,
.accordion button.secondary {
  background-color: unset;
  color: var(--migraine-core-secondary-ivory);
  font-family: var(--migraine-core-desktop-xl-p-font-family);
  font-size: var(--migraine-core-desktop-xl-p-font-size);
  font-weight: var(--migraine-core-desktop-xl-p-font-weight);
  line-height: var(--migraine-core-desktop-xl-p-line-height);
  padding: 0;
  border-radius: none;
  display: unset;
  justify-content: center;
  margin: 0;
}

sup {
  line-height: 0px;
}

.one-column-ivory,
.one-column-yellow {
  display: flex;
  align-items: center;
}

header nav .nav-sections:has(.language-switcher) ul:first-child {
  gap: 0.5em;
}

header
  nav
  .nav-sections:has(.language-switcher)
  ul:first-child
  li:nth-child(2) {
  order: 3;
}

.language-switcher {
  position: relative;
  width: 50px;
  height: 0;
  cursor: pointer;
}

.language-switcher:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 25px;
  background-color: #18263b;
  transition: 300ms ease-in-out;
  border-radius: 25px;
  top: 8px;
}

.language-switcher:checked:before {
  background-color: #ccc;
}

.language-switcher:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 25px;
  transition: 300ms ease-in-out;
  border: 3px solid #18263b;
  box-sizing: border-box;
  top: 8px;
}

.language-switcher:checked:after {
  left: 25px;
}

@media (min-width: 1200px) {
  .language-switcher:before {
    top: 0;
  }

  .language-switcher:after {
    top: 0;
  }
}

/* Cards Original Block */

.cards > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
}

.cards p,
.cards h5 {
  text-align: center;
}

.cards-container .cards-wrapper {
  max-width: 1200px;
}

.cards .cards-card-body {
  margin: 10px;
  color: var(--migraine-core-secondary-ivory);
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
}

.cards .cards-card-image {
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards-container {
  background-color: transparent;
  padding-bottom: calc(24 * 1px);
}

.cards > ul > li {
  border-radius: 16px;
  padding: 48px 0;
  position: relative;
  background-color: var(--migraine-core-primary-indigo);
  display: flex;
  flex-direction: column;
}

.cards.vertical-blue .cards-card-body {
  justify-content: space-between;
}

.cards.horizontal li {
  display: flex;
  flex-direction: column;
  border: 1px solid #fff;
  padding: 0;
}

.cards.vertical-blue li {
  padding: 0;
}

/* Cards Horizontal Blue Block */

.vertical-blue .cards-card-image {
  height: 220px;
}

.vertical-blue .cards-card-image img {
  border-radius: 15px;
  height: 200px;
  object-fit: scale-down;
}

.vertical-blue p {
  color: #fff;
}

.cards.horizontal p {
  text-align: center;
}

.cards.horizontal .cards-card-image {
  min-width: 30%;
}

.section.cards-container.cards-horizontal-container {
  background-color: var(--migraine-core-primary-indigo);
  border-top: 15px solid #fff;
}

.cards-horizontal-container h3 {
  color: white;
  padding: 2rem 0;
}

.cards.horizontal ul {
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}

.section.cards-horizontal-container {
  padding: 0 1.5rem;
}

@media (min-width: 775px) {
  .cards.horizontal ul {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }

  .cards.horizontal li {
    flex-direction: row;
    padding: 1rem;
  }

  .vertical-blue {
    padding: none;
  }

  .cards.vertical-blue li {
    padding: 1rem;
    justify-content: space-between;
  }
}

/* Cards Vertical Blue Block */

.vertical-blue h5,
.vertical-blue a {
  color: #fff;
}

.vertical-blue h5 {
  font-family: var(--migraine-core-desktop-xl-h3-font-family);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
}

.vertical-blue .button-container a.button.primary,
.vertical-blue button.primary,
.vertical-blue .nav-tools a {
  border: 2px solid #fff;
}

.vertical-blue a.button.primary:hover {
  background-color: #fff;
  color: var(--migraine-core-primary-indigo);
}

@media (min-width: 756px) {
  .cards .cards-card-body {
    align-items: start;
  }

  .cards.horizontal p {
    text-align: start;
  }

  .cards-card-body h4 {
    text-align: start;
  }
}

@media (min-width: 756px) {
  .homepage-page .cards .cards-card-body {
    align-items: center;
  }

  .homepage-page .cards.horizontal p {
    text-align: center;
  }

  .homepage-page .cards-card-body h4 {
    text-align: center;
  }
}

@font-face {
  font-family: Mohave;
  /* src: url(./fonts/Mohave-Regular.ttf); */
  src: url(./fonts/Mohave-Light.ttf);
}

@media (min-width: 775px) {
  .surveycard .cards.horizontal ul {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}

.surveycard {
  border-top: none !important;
}

.surveycard .cards .cards-card-body {
  padding: 1rem 4rem;
  width: 60%;
}
/* .surveycard .cards-wrapper {
  padding-top: 1rem;
} */

.surveycard.first-page .cards.horizontal li {
  display: flex;
}

.surveycard .cards.horizontal li {
  padding: 0 !important;
  background-color: #faefd9;
  border: none;
  list-style-type: none;
}

.surveycard .cards.horizontal li:nth-child(3) .cards-card-image {
  background-color: #203953;
}

.surveycard li .cards-card-body h4 {
  /* START A NEW MIGRAINE CONVERSATION */
  margin-bottom: 0;
  font-family: "Mohave", sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  font-size: 4.4em;
  letter-spacing: -3px;
  color: #000000;
  /* text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
}

.surveycard .cards.horizontal .cards-card-image {
  align-items: flex-end;
  position: relative;
  background-color: #fdc45d;
  width: 40%;
}

.surveycard .cards .cards-card-body p:not(:first-child) {
  /* Potresti già aver parlato con il tuo medico in passato e aver provato così tante terapie per gestire il dolore da aver perso il conto. Forse non si tratta di un comune mal di testa. Non sottovalutare i tuoi sintomi, potrebbe trattarsi di emicrania. Sospetti di soffrire di emicrania ma non ne sei sicuro? */
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.15em;
  /* line-height: 1.5; */
  /* or 146% */
  letter-spacing: 0.5px;
  color: #000000;
}

.surveycard.result .infopage.cards .cards-card-body p:not(:first-child) {
  font-size: 1.25em;
}

.surveycard .cards .cards-card-body p:nth-child(2) {
  /* Parla con uno specialista */
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2.2em;
  margin: 1rem 0;
  /* or 125% */
  letter-spacing: -1px;
  color: #000000;
  /* text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
}

.surveycard .button-container button.primary,
.surveycard .button-container a.button.primary {
  background: #172233;
  border-radius: 8px;
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8em;
  line-height: 2;
  margin-left: 0;
  text-transform: uppercase;
  color: #ffffff;
  border: none;
}

.surveycard.questions .button-container button.primary {
  min-width: 130px;
  max-width: 165px;
  width: 100%;
}

.surveycard .cards .cards-card-body p:nth-child(6),
.surveycard .cards .cards-card-body p:last-child {
  /* Ci vogliono solo 2-3 minuti e le tue risposte sono anonime e non vengono salvate. */
  font-family: "Noto Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 1.1em;
  line-height: 1.2;
  /* or 175% */
  letter-spacing: 0.5px;
  color: #000000;
  text-shadow: none;
}

.surveycard .button-container a {
  display: none !important;
}

.surveycard .cards .cards-card-image img,
.surveycard .cards.horizontal .cards-card-image {
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
}
/* .surveycard .cards .cards-card-image picture {
    position: absolute;
    bottom: 0;
  } */

.surveycard .default-content-wrapper {
  display: none;
}

.surveycard.questions .cards.horizontal .cards-card-image {
  background-color: #253f5e;
}

.surveycard.questions .cards.horizontal h4 {
  /* Hai mal di testa frequenti o intensi? */
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: #000000;
  text-shadow: none;
  /* margin-top: 4rem; */
  margin-bottom: 0;
}

.surveycard.questions .cards.horizontal .cards-card-body ol {
  max-width: 500px;
  width: 100%;
  padding-left: 0;
  margin: 2rem 0;
}
.surveycard.questions .cards.horizontal .cards-card-body li {
  border-radius: 8px;
  margin: 1rem 0;
  height: 70px;
  background: #ffffff;
  border-radius: 8px;
}
.surveycard.questions .cards.horizontal .cards-card-body li input {
  margin: auto 0;
  max-width: 4rem;
  cursor: pointer;
}
.surveycard.questions .cards.horizontal .cards-card-body li label {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 27px;
  color: #000000;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.surveycard.questions .page-slider-section {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 2rem;
}
.surveycard.questions .page-slider-section .page-slider {
  position: relative;
  width: 90%;
  display: flex;
  align-items: center;
}
.surveycard.questions .page-slider-section .page-slider .slide-blue {
  position: absolute;
  /* width: 20%; */
  height: 22px;
  background: #172233;
  border-radius: 16px;
  z-index: 2;
}
.surveycard.questions .page-slider-section .page-slider .slide-white {
  position: absolute;
  width: 100%;
  height: 22px;
  background: #ffffff;
  border-radius: 16px;
  z-index: 1;
}
.surveycard.questions .page-slider-section .page-slider-number {
  width: 10%;
  margin: auto;
  padding-left: 10px;
  font-family: "Open Sans", sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 20px !important;
  color: #000000 !important;
}

.surveycard.questions .button-indietro {
  background: #ffbd5a !important;
  margin-right: 1rem;
}

.surveycard.questions .button-container-multi {
  width: 100%;
}

/* Customize the label (the container) */
.surveycard.questions .cards-card-body li .container {
  display: block;
  position: relative;
  padding-left: 5rem;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.surveycard.questions .cards-card-body li .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.surveycard.questions .cards-card-body li .checkmark {
  position: absolute;
  top: 19px;
  left: 0.5rem;
  height: 25px;
  width: 25px;
  background-color: #ffffff;
  border: 3px solid #000000;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.surveycard.questions .cards-card-body li .container:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.surveycard.questions
  .cards-card-body
  li
  .container
  input:checked
  ~ .checkmark {
  background-color: #000000;
  border: 3px solid #ffffff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.surveycard.questions .cards-card-body li .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.surveycard.questions .cards .cards-card-body > *:first-child {
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.surveycard.questions
  .cards-card-body
  li
  .container
  input:checked
  ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.surveycard.questions .cards-card-body li .container .checkmark:after {
  top: 6px;
  left: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffbd5a;
}

.surveycard.questions .cards-card-body li .checkedDiv {
  color: #fff !important;
  background: #172233;
  border-radius: 8px;
}

.surveycard.questions ul > li {
  display: none;
}

/* RESULT PAGE */

.surveycard.result {
  display: none;
  grid-gap: 2rem;
  grid-template-columns: 2fr 3fr;
}

.surveycard.result .cards-wrapper:first-child {
  max-width: 628px;
  margin-right: 0;
}

.surveycard.result .cards-wrapper:last-child {
  max-width: 942px;
  margin-left: 0;
}

.surveycard.result ul {
  min-height: 845px;
}

.surveycard.result .cards.horizontal li {
  background-color: #f4f1e6;
}

.surveycard.result .cards .cards-card-body {
  padding: 0 1rem;
}

.surveycard.result .resultpage.cards .cards-card-body {
  margin: 0 10px;
}

.surveycard.result .resultpage ul {
  grid-gap: 0;
}

.surveycard.result .resultpage p {
  color: #000000;
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  font-size: 0.8rem;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.surveycard.result .resultpage.cards.horizontal .cards-card-image {
  min-width: unset;
  background-color: transparent;
  align-items: flex-start;
  justify-content: flex-end;
}

.surveycard.result .resultpage ul li {
  border-radius: 0;
}

.surveycard.result .resultpage.cards .cards-card-image img {
  max-width: 179px;
  width: 100%;
}

.surveycard.result .resultpage.cards .cards-card-image img,
.surveycard.result .resultpage.cards.horizontal .cards-card-image {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 0;
}

.surveycard.result .resultpage ul > li:first-child {
  /* padding-bottom: 2rem !important; */
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
}

/* .surveycard.result .resultpage ul > li:not(:first-child) {
  padding: 1.5rem 0 !important;
} */

.surveycard:not(.result) .cards.horizontal ul {
  padding-top: 1rem;
}

.surveycard.result .resultpage ul > li:last-child {
  padding-top: 0 !important;
}

.surveycard.result .resultpage ul > li:last-child {
  padding-bottom: 1rem !important;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
}

.surveycard.result .resultpage li .cards-card-body h4 {
  font-family: "Mohave", sans-serif;
  font-size: 3rem;
  font-style: normal;
  font-weight: 300;
  line-height: 53px;
  letter-spacing: -3px;
  text-shadow: none;
  margin-top: 1.5rem;
}

.surveycard.result .resultpage .cards .cards-card-body {
  width: auto;
}

/* INFO PAGE */

.surveycard.result .infopage.cards .cards-card-body {
  width: auto;
  position: relative;
}

.surveycard.result .infopage li .cards-card-body h4 {
  font-family: "Mohave", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: -3px;
  text-shadow: none;
  line-height: 1;
  max-width: 690px;
  width: 100%;
  margin-bottom: 0;
}

.surveycard.result .infopage.cards .cards-card-body p:nth-child(1) {
  position: absolute;
  right: -10px;
  top: -10px;
  margin: 0;
  width: 100%;
  max-width: 179px;
}

.surveycard.result .infopage.cards .cards-card-body p {
  font-family: "Noto Sans", sans-serif;
  letter-spacing: 0;
}

.surveycard.result .infopage .button-container {
  margin: 0;
}

.surveycard.result .infopage .button-container a {
  display: inline-flex !important;
  color: #0077be;
  font-family: "Noto Sans", sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-decoration-line: underline;
  background: none;
  border-radius: unset;
  text-transform: none;
  margin: 0;
  padding-left: 0;
  padding: 4px;
  width: 100%;
  justify-content: flex-start;
}
.surveycard.result .infopage.cards .cards-card-body p:nth-child(6) {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.25em;
  line-height: 1.5;
  margin-bottom: 0;
}

.surveycard.result .infopage.cards .cards-card-body p:nth-child(7) {
  margin-top: 0;
}

.surveycard.result
  .infopage
  .button-container:not(.button-container-multi)
  a:last-child {
  background: #ffbd5a !important;
  font-size: 1em;
  margin-top: 1rem;
  border-radius: 8px;
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 2;
  margin-left: 0;
  text-transform: uppercase;
  color: #ffffff;
  border: none;
  text-decoration: none;
  padding: 12px 24px;
  /* padding-left: 24px; */
  justify-content: center;
}

.surveycard.result .cards.horizontal .cards-card-body ol {
  max-width: 500px;
  width: 100%;
  padding-left: 0;
  margin: 0;
}
.surveycard.result .cards.horizontal .cards-card-body li {
  width: 85%;
  border-radius: 8px;
  margin: 0.5rem 0;
  height: 32px;
  background: #ffffff;
  border-radius: 8px;
}
.surveycard.result .cards.horizontal .cards-card-body li input {
  margin: auto 0;
  max-width: 4rem;
  cursor: inherit;
}
.surveycard.result .cards.horizontal .cards-card-body li label {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  line-height: 27px;
  color: #000000;
  width: 100%;
  cursor: inherit;
  display: flex;
  align-items: center;
}

/* Customize the label (the container) */
.surveycard.result .cards-card-body li .container {
  display: block;
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.surveycard.result .cards-card-body li .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.surveycard.result .cards-card-body li .checkmark {
  position: absolute;
  top: 5px;
  left: 0.5rem;
  height: 15px;
  width: 15px;
  background-color: #ffffff;
  border: 3px solid #000000;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.surveycard.result .cards-card-body li .container:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.surveycard.result .cards-card-body li .container input:checked ~ .checkmark {
  background-color: #000000;
  border: 3px solid #ffffff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.surveycard.result .cards-card-body li .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.surveycard.result
  .cards-card-body
  li
  .container
  input:checked
  ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.surveycard.result .cards-card-body li .container .checkmark:after {
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffbd5a;
}

.surveycard.result .cards-card-body li .checkedDiv {
  color: #fff !important;
  background: #000;
  border-radius: 8px;
}

.infopage img {
  max-width: 200px;
}

.surveycard.result
  .infopage.cards
  .cards-card-body
  p:nth-child(1)
  picture:last-child {
  display: none;
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
  .surveycard.result ul {
    min-height: 790px;
  }
  .surveycard.result .infopage li .cards-card-body h4 {
    max-width: 440px;
    font-size: 48px;
    line-height: 65px;
  }
  .surveycard.result .resultpage li .cards-card-body h4 {
    line-height: 65px;
    font-size: 48px;
    max-width: 200px;
    width: 100%;
  }
  .surveycard.result .resultpage p {
    font-size: 15px;
  }
  .surveycard.result .infopage.cards .cards-card-body p:not(:first-child),
  .surveycard.result .infopage.cards .cards-card-body p:nth-child(6) {
    font-size: 1.05em;
  }
}
@media screen and (max-width: 1200px) {
  .surveycard.result .infopage.cards .cards-card-body p:not(:first-child),
  .surveycard.result .infopage.cards .cards-card-body p:nth-child(6) {
    font-size: 1em;
    margin: 0.3rem 0;
    line-height: 1.1;
  }
  .surveycard.result .resultpage ul > li:first-child {
    padding-bottom: unset;
  }
  .surveycard.result .cards-wrapper:first-child {
    margin-right: auto;
    margin: auto;
  }
  .surveycard li .cards-card-body h4 {
    font-size: 4.1em;
  }
  .surveycard.result .cards-wrapper:last-child {
    margin-left: auto;
    margin: auto;
  }
  .surveycard.result .infopage.cards.horizontal li {
    background-color: transparent;
  }
  .surveycard.result .resultpage.cards.horizontal .cards-card-image {
    width: 39%;
  }
  .surveycard.result ul {
    min-height: unset;
  }
  .surveycard.result .resultpage.cards > ul {
    display: block;
  }
  .surveycard.result .resultpage.cards.horizontal ul > li {
    background-color: #faefd9;
  }
  .surveycard.result .infopage li .cards-card-body h4 {
    color: #ffffff;
    max-width: unset;
  }
  .surveycard.result .cards-wrapper:last-child {
    max-width: 628px;
  }
  .surveycard.result .infopage.cards .cards-card-body p {
    color: #ffffff;
  }
  .surveycard.result
    .infopage.cards
    .cards-card-body
    p:nth-child(1)
    picture:first-child {
    display: none;
  }
  .surveycard.result
    .infopage.cards
    .cards-card-body
    p:nth-child(1)
    picture:last-child {
    display: block;
  }
  .surveycard.result .infopage .button-container a {
    color: #87d2ff;
  }
  .surveycard.result .infopage.cards .cards-card-body p:nth-child(1) {
    position: relative;
    right: unset;
    top: unset;
    margin: auto;
    width: unset;
    max-width: unset;
  }
  .surveycard.result
    .infopage
    .button-container:not(.button-container-multi)
    a:last-child {
    max-width: 260px;
    width: 100%;
  }
}

@media screen and (max-width: 775px) {
  .surveycard .cards .cards-card-body {
    align-items: flex-start;
    width: unset;
    padding: 0;
  }
  .surveycard.questions .cards.horizontal h4 {
    margin-top: 0;
  }
  .surveycard .cards .cards-card-body p:last-child {
    font-style: normal;
  }
  .surveycard li .cards-card-body h4 {
    font-size: 3rem;
    text-shadow: none;
    padding-bottom: 3rem;
    border-bottom: 2px solid #000;
    width: 70%;
  }
  .surveycard .cards.horizontal .cards-card-image {
    position: absolute;
    right: 0;
    min-width: unset;
    width: 20%;
    border-bottom-right-radius: 0;
  }
  .surveycard .cards .cards-card-body p:nth-child(2) {
    font-size: 1.7em;
    text-shadow: none;
  }
  .surveycard .cards .cards-card-body p:not(:first-child) {
    font-size: 1.5em;
    text-align: left;
  }
  .surveycard.questions .cards.horizontal .cards-card-body li {
    flex-direction: row;
  }
  .surveycard.result .resultpage li .cards-card-body h4 {
    border-bottom: none;
    padding-bottom: initial;
    font-size: 3rem;
    width: 60%;
    line-height: 1.4;
  }
  .surveycard.result .cards.horizontal li {
    flex-direction: row;
  }
  .surveycard.result .resultpage p {
    text-align: left;
  }
  .surveycard.result .resultpage.cards .cards-card-body {
    width: 50%;
  }
  .surveycard.result .resultpage p {
    font-size: 0.9rem;
  }
  .surveycard.result .infopage li .cards-card-body h4 {
    border-bottom: none;
  }
  .surveycard.questions .cards .cards-card-body > *:first-child {
    display: block;
    font-family: "Mohave", sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -3px;
    font-size: 3rem;
    text-shadow: none;
    padding-bottom: 3rem;
    border-bottom: 2px solid #000;
    width: 70%;
  }
  .surveycard.questions .cards .cards-card-body > *:nth-child(2) {
    font-size: 1.74em;
    line-height: 1.3;
    border-bottom: none;
    margin-top: 3rem;
    width: 100%;
    padding-bottom: 0;
    font-weight: 700;
  }
}

@media screen and (max-width: 576px) {
  .surveycard li .cards-card-body h4,
  .surveycard.questions .cards .cards-card-body > *:first-child {
    width: 80%;
    font-size: 1.8rem;
    padding-bottom: 2rem;
    letter-spacing: -1px;
  }
  .surveycard .cards .cards-card-body p:not(:first-child) {
    font-size: 0.84em;
  }
  .surveycard .cards .cards-card-body .page-slider-number,
  .surveycard.result .infopage.cards .cards-card-body p:nth-child(6),
  .surveycard.result .infopage.cards .cards-card-body p:not(:first-child) {
    font-size: 0.84em !important;
  }
  .surveycard .cards .cards-card-body p:nth-child(2) {
    font-size: 1.1em;
  }
  .surveycard .cards .cards-card-body p:nth-child(6) {
    line-height: 1.3;
  }
  .surveycard.questions .cards .cards-card-body > *:nth-child(2) {
    font-size: 0.92em;
  }
  .surveycard.questions .cards.horizontal .cards-card-body ol {
    margin: 1rem 0;
  }
  .surveycard.questions .cards.horizontal .cards-card-body li {
    height: 50px;
  }
  .surveycard.questions .cards.horizontal .cards-card-body li label {
    font-size: 1em;
    padding-left: 3rem;
  }
  .surveycard.questions .cards-card-body li .checkmark {
    top: 10px;
  }
  .surveycard.questions .button-container button.primary {
    min-width: unset;
    max-width: 120px;
    padding: 6px;
  }
  .surveycard.questions .page-slider-section .page-slider .slide-blue,
  .surveycard.questions .page-slider-section .page-slider .slide-white {
    height: 12px;
  }
  .surveycard.result .resultpage li .cards-card-body h4 {
    letter-spacing: 1px;
    width: unset;
    font-size: 1.7rem;
  }
  .surveycard.result .resultpage.cards .cards-card-body {
    margin: 0;
  }
  .surveycard.result .resultpage p {
    font-size: 0.58rem;
  }
  .surveycard.result .cards.horizontal .cards-card-body li {
    height: 25px;
  }
  .surveycard.result .cards.horizontal .cards-card-body li label {
    font-size: 0.7em;
    padding-left: 1.5rem;
  }
  .surveycard.result .cards-card-body li .checkmark {
    top: 7px;
    height: 8px;
    width: 8px;
    border: 2px solid #ffffff;
  }
  .surveycard.result .cards-card-body li .container .checkmark:after {
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
  }
  .surveycard.result .cards-card-body li .container input:checked ~ .checkmark {
    border: 2px solid #ffffff;
  }
  .surveycard.result .infopage li .cards-card-body h4 {
    letter-spacing: 0;
    font-size: 1.2rem;
    line-height: 1.4;
  }
  .surveycard.result .infopage .button-container a {
    line-height: 1.4;
  }
  .surveycard.result
    .infopage
    .button-container:not(.button-container-multi)
    a:last-child {
    width: 110px;
    padding: 6px 12px;
  }
}

@media screen and (max-width: 900px) {
  .surveycard.result {
    grid-template-columns: 1fr;
  }
}