/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-1998eeaa]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*/
.speed-quiz[data-v-1998eeaa] {
  background: #e8f6fc;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
.speed-quiz[data-v-1998eeaa] {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-66c2fcef]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*/
.heading[data-v-66c2fcef] {
  text-align: center;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
.heading[data-v-66c2fcef] {
    margin-bottom: 2rem;
}
}
.heading .heading-title[data-v-66c2fcef] {
  font-style: normal;
  font-weight: 500;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
.heading .heading-title[data-v-66c2fcef] {
    padding-left: 3rem;
    padding-right: 3rem;
    font-size: 1.25rem;
}
}
@media (min-width: 992px) {
.heading .heading-title[data-v-66c2fcef] {
    padding-left: 5rem;
    padding-right: 5rem;
}
}
.heading .heading-subtitle[data-v-66c2fcef] {
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 34px;
  text-align: center;
  margin-bottom: 0.85rem;
  font-size: 1.75rem;
}
@media (min-width: 768px) {
.heading .heading-subtitle[data-v-66c2fcef] {
    font-size: 2.5rem;
    line-height: 39px;
}
}
.heading.some-modifier-class h1[data-v-66c2fcef],
.heading.some-modifier-class h2[data-v-66c2fcef] {
  color: blue;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-2e621a44]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-502768ff]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*/
.app-results__inner[data-v-502768ff] {
  max-width: 788px;
  margin: 0 auto;
}
.app-results__content[data-v-502768ff] {
  text-align: center;
}
.app-results__answer[data-v-502768ff] {
  font-size: 3rem;
  line-height: 3rem;
  margin-bottom: 0;
}
@media (min-width: 768px) {
.app-results__answer[data-v-502768ff] {
    font-size: 9rem;
    line-height: 9rem;
}
}
.app-results__answer-label[data-v-502768ff] {
  text-transform: none;
  font-weight: bold;
  font-size: 1.25rem;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-50b31a22]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*/
.app-questions__inner[data-v-50b31a22] {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.app-questions__wrapper[data-v-50b31a22] {
  margin: 1rem 0;
}
.app-questions__wrapper.display-list[data-v-50b31a22] {
  position: relative;
}
.app-questions__wrapper.display-list[data-v-50b31a22] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (min-width: 768px) {
.app-questions__wrapper.display-list[data-v-50b31a22] {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
}
.app-questions__buttons[data-v-50b31a22] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.app-questions__buttons .app-questions__button a[data-v-50b31a22] {
  text-decoration: none;
}
.app-questions__buttons .app-questions__button .btn[data-v-50b31a22] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 768px) {
.app-questions__buttons .app-questions__button .btn[data-v-50b31a22] {
    padding-left: 2rem;
    padding-right: 2rem;
}
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-2ce04908]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*/
.slide-overlay[data-v-2ce04908] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200vw;
  height: 100%;
  color: #1d1d3f;
  background: currentColor;
  z-index: 100000;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.slide-overlay.running[data-v-2ce04908] {
  -webkit-animation: slide-data-v-2ce04908 500ms ease-out,alert-data-v-2ce04908 div(500ms, 2) linear;
          animation: slide-data-v-2ce04908 500ms ease-out,alert-data-v-2ce04908 div(500ms, 2) linear;
}
@-webkit-keyframes slide-data-v-2ce04908 {
to {
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
}
}
@keyframes slide-data-v-2ce04908 {
to {
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
}
}
@-webkit-keyframes alert-data-v-2ce04908 {}
@keyframes alert-data-v-2ce04908 {}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-3d8aa21d]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-701fa674]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-2deb239d]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*/
.landing-hero__inner[data-v-2deb239d] {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.landing-hero__image[data-v-2deb239d] {
  margin-bottom: 1rem;
}
.landing-hero__content-cta[data-v-2deb239d] {
  text-decoration: none;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-50a895f4]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* 
create a fluid property value that adjusts from $min to $max, 
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px);
}
*/
.app-question-list[data-v-50a895f4] {
  margin: 0 0.5rem 0.75rem 0.5rem;
  width: 45%;
}
@media (min-width: 768px) {
.app-question-list[data-v-50a895f4] {
    margin: 0 0.75rem;
    width: 100%;
}
}
.app-question-list__media[data-v-50a895f4] {
  cursor: pointer;
  background: #fff;
  height: 100px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem;
  text-align: center;
}
.app-question-list__media.isActive[data-v-50a895f4] {
  background: #59bfe6;
}
@media (min-width: 768px) {
.app-question-list__media[data-v-50a895f4] {
    height: 150px;
}
}
.app-question-list__media-heading[data-v-50a895f4] {
  margin-bottom: 0;
}
.app-question-list__media-subHeading[data-v-50a895f4] {
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: 0;
  width: 100%;
}
.app-question-list__media-image[data-v-50a895f4] {
  max-width: 40px;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
.app-question-list__media-image[data-v-50a895f4] {
    max-width: 80px;
}
}