@charset "UTF-8";
@import url(fonts.css);
* {
  box-sizing: border-box; }

.heading {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.heading-wrapper {
    border-bottom-color: #13b4b8;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    text-transform: uppercase;
    font-size: 4.44rem;
    position: relative;
    width: auto;
    margin-bottom: 0.5rem;
}

.heading-text {
    position: absolute;
    left: 0;
    bottom: -13px;
    z-index: 2;
}

.heading-spacer {
    visibility: hidden;
}

@media (max-width: 575px) {
    .heading-wrapper {
        font-size: calc(0.5876543207rem + 4.7851851856vw);
    }
    .heading-text {
        bottom: -5px;
    }
}

@media (max-width: 991px) {
    .heading-wrapper {
        font-size: calc(0.6246913577rem + 5.7296296301vw)
    }
    .heading-text {
        bottom: -7px;
    }
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, footer, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, footer, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1;
  padding: 0;
  margin: 0;
  font-family: "Neue Haas Grotesk Display Pro";
  background-color: #fdfbf8; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.container {
  padding-left: calc(0.5320987651rem + 3.368518519vw);
  padding-right: calc(0.5320987651rem + 3.368518519vw);
  width: 100%;
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 1200px) {
    .container {
      padding-left: 2.7777777778rem; } }
  @media (min-width: 1200px) {
    .container {
      padding-right: 2.7777777778rem; } }

header, footer, main, footer {
  max-width: 830px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  width: 100%; }

.pageWrap {
  position: relative;
  overflow: hidden;
  max-width: 830px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh; }
  .pageWrap.homeWrap:before {
    content: '';
    position: absolute;
    width: 320px;
    height: 400px;
    background: url(../images/bg-shadow.png) no-repeat 100% 0%/cover;
    top: 0;
    left: 0;
    margin-top: -13%;
    margin-left: -16%; }
  .pageWrap.homeWrap:after {
    content: '';
    position: absolute;
    width: 320px;
    height: 400px;
    background: url(../images/bg-shadow.png) no-repeat 0% 0%/cover;
    bottom: 0;
    right: 0;
    margin-right: -10%;
    margin-bottom: 4%; }
  @media (max-width: 767px) {
    .pageWrap.homeWrap:before, .pageWrap.homeWrap:after {
      width: 200px;
      height: 220px; }
    .pageWrap.homeWrap:before {
      margin-left: -23%; }
    .pageWrap.homeWrap:after {
      margin-right: -23%; } }
  .pageWrap.homeWrap main {
    margin: auto 0; }
    .pageWrap.homeWrap main .container {
      padding-left: calc(0.7481481478rem + 8.8777777782vw);
      padding-right: calc(0.7481481478rem + 8.8777777782vw); }
      @media (min-width: 1200px) {
        .pageWrap.homeWrap main .container {
          padding-left: 6.6666666667rem; } }
      @media (min-width: 1200px) {
        .pageWrap.homeWrap main .container {
          padding-right: 6.6666666667rem; } }
  .pageWrap.scoreWrap:before {
    content: '';
    position: absolute;
    width: 320px;
    height: 400px;
    background: url(../images/bg-shadow.png) no-repeat 0% 100%/cover;
    top: 0;
    right: 0;
    margin-right: -16%; }
  .pageWrap.scoreWrap:after {
    content: '';
    position: absolute;
    width: 320px;
    height: 400px;
    background: url(../images/bg-shadow.png) no-repeat 100% 0%/cover;
    bottom: 0;
    left: 0;
    margin-left: -15%;
    margin-bottom: 4%; }
  @media (max-width: 767px) {
    .pageWrap.scoreWrap:before, .pageWrap.scoreWrap:after {
      width: 200px;
      height: 220px; }
    .pageWrap.scoreWrap:before {
      margin-right: -23%; }
    .pageWrap.scoreWrap:after {
      margin-left: -23%; } }
  .pageWrap.scoreWrap main {
    margin: auto 0; }
    .pageWrap.scoreWrap main .container {
      padding-left: calc(0.7481481478rem + 8.8777777782vw);
      padding-right: calc(0.7481481478rem + 8.8777777782vw); }
      @media (min-width: 1200px) {
        .pageWrap.scoreWrap main .container {
          padding-left: 6.6666666667rem; } }
      @media (min-width: 1200px) {
        .pageWrap.scoreWrap main .container {
          padding-right: 6.6666666667rem; } }

header, footer {
  padding: calc(0.5320987651rem + 3.368518519vw) 0; }
  @media (min-width: 1200px) {
    header, footer {
      padding: 2.7777777778rem 0; } }
  header .ct-item, footer .ct-item {
    font-size: calc(0.4518518516rem + 1.3222222227vw);
    color: black;
    text-transform: uppercase; }
    @media (min-width: 1200px) {
      header .ct-item, footer .ct-item {
        font-size: 1.3333333333rem; } }
    header .ct-item.__left, footer .ct-item.__left {
      text-align: left; }
      header .ct-item.__left span, footer .ct-item.__left span {
        border-bottom: 1px solid black; }
    header .ct-item.__right, footer .ct-item.__right {
      text-align: right;
      margin-left: auto; }
    header .ct-item img, footer .ct-item img {
      display: block;
      max-width: 100px; }
      @media (max-width: 991px) {
        header .ct-item img, footer .ct-item img {
          max-width: 80px; } }
    @media (max-width: 767px) {
      header .ct-item, footer .ct-item {
        font-size: 13px; } }

footer {
  margin-top: auto;
  padding-top: calc(0.4549382713rem + 1.4009259264vw); }
  @media (min-width: 1200px) {
    footer {
      padding-top: 1.3888888889rem; } }

.d-flex {
  display: flex; }

.items-center {
  align-items: center; }

.between {
  justify-content: space-between; }

.my-7 {
  margin: calc(0.5938271602rem + 4.942592593vw) 0; }
  @media (min-width: 1200px) {
    .my-7 {
      margin: 3.8888888889rem 0; } }

.mt-7 {
  margin-top: calc(0.5938271602rem + 4.942592593vw); }
  @media (min-width: 1200px) {
    .mt-7 {
      margin-top: 3.8888888889rem; } }

.mb-7 {
  margin-bottom: calc(0.5938271602rem + 4.942592593vw); }
  @media (min-width: 1200px) {
    .mb-7 {
      margin-bottom: 3.8888888889rem; } }

.mt-5 {
  margin-top: calc(0.5320987651rem + 3.368518519vw); }
  @media (min-width: 1200px) {
    .mt-5 {
      margin-top: 2.7777777778rem; } }

main {
  position: relative; }
  main h1 {
    font-size: calc(0.6246913577rem + 5.7296296301vw);
    line-height: 1.2;
    margin-bottom: calc(0.6246913577rem + 5.7296296301vw);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: #13b4b8;
	text-underline-offset: 0.01em;
    text-decoration-thickness: 3px;
    color: black; }
    @media (min-width: 1200px) {
      main h1 {
        font-size: 4.4444444444rem; } }
    @media (min-width: 1200px) {
      main h1 {
        margin-bottom: 4.4444444444rem; } }
    @media (max-width: 991px) {
      main h1 {
        text-decoration-thickness: 2px; } }
    @media (max-width: 575px) {
      main h1 {
        font-size: calc(0.5876543207rem + 4.7851851856vw);
        margin-bottom: calc(0.5629629627rem + 4.155555556vw); } }
  @media (max-width: 575px) and (min-width: 1200px) {
    main h1 {
      font-size: 3.7777777778rem; } }
  @media (max-width: 575px) and (min-width: 1200px) {
    main h1 {
      margin-bottom: 3.3333333333rem; } }

  main h2 {
    font-size: calc(0.5938271602rem + 4.942592593vw);
    line-height: 1;
    margin-bottom: calc(0.5012345676rem + 2.5814814819vw);
    color: black; }
    @media (min-width: 1200px) {
      main h2 {
        font-size: 3.8888888889rem; } }
    @media (min-width: 1200px) {
      main h2 {
        margin-bottom: 2.2222222222rem; } }
    @media (max-width: 575px) {
      main h2 {
        font-size: calc(0.5629629627rem + 4.155555556vw); } }
  @media (max-width: 575px) and (min-width: 1200px) {
    main h2 {
      font-size: 3.3333333333rem; } }

  main h3 {
    font-size: calc(0.5629629627rem + 4.155555556vw);
    line-height: 1;
    margin-bottom: calc(0.5012345676rem + 2.5814814819vw);
    color: black; }
    @media (min-width: 1200px) {
      main h3 {
        font-size: 3.3333333333rem; } }
    @media (min-width: 1200px) {
      main h3 {
        margin-bottom: 2.2222222222rem; } }
    main h3 span {
      color: #13b4b8; }
  main p {
    font-size: calc(0.4703703701rem + 1.7944444449vw);
    line-height: 1.2;
    color: black; }
    @media (min-width: 1200px) {
      main p {
        font-size: 1.6666666667rem; } }
    main p + p {
      margin-top: 35px;
      margin-top: calc(0.4858024688rem + 2.1879629634vw); }
      @media (min-width: 1200px) {
        main p + p {
          margin-top: 1.9444444444rem; } }
  main ul {
    margin: calc(0.4858024688rem + 2.1879629634vw) 0;
    padding-left: calc(0.5320987651rem + 3.368518519vw); }
    @media (min-width: 1200px) {
      main ul {
        margin: 1.9444444444rem 0; } }
    @media (min-width: 1200px) {
      main ul {
        padding-left: 2.7777777778rem; } }
    main ul li {
      font-size: calc(0.4703703701rem + 1.7944444449vw);
      line-height: 1.2;
      color: black;
      position: relative;
      text-indent: 17px; }
      @media (min-width: 1200px) {
        main ul li {
          font-size: 1.6666666667rem; } }
      main ul li:before {
        content: '•';
        position: absolute;
        left: 0;
        top: 0;
        color: #13b4b8;
        text-indent: 0; }
      main ul li + li {
        margin-top: calc(0.4703703701rem + 1.7944444449vw); }
        @media (min-width: 1200px) {
          main ul li + li {
            margin-top: 1.6666666667rem; } }
      @media (max-width: 575px) {
        main ul li {
          text-indent: 14px; } }
  main .btn-start {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    min-height: calc(0.7481481478rem + 8.8777777782vw);
    width: 100%;
    border: 1px solid #13b4b8;
    color: #13b4b8;
    font-size: calc(0.4703703701rem + 1.7944444449vw);
    text-transform: uppercase;
    font-weight: 400;
    background-color: transparent;
    text-decoration: none;
    padding: 5px 10px;
    line-height: 1.3; 
	font-family: "Neue Haas Grotesk Display Pro"; }
    @media (min-width: 1200px) {
      main .btn-start {
        min-height: 6.6666666667rem; } }
    @media (min-width: 1200px) {
      main .btn-start {
        font-size: 1.6666666667rem; } }
  main .q-box .radio {
    position: relative;
    display: block;
	font-family: "Neue Haas Grotesk Display Pro"; }
    main .q-box .radio + .radio {
      margin-top: 15px; }
    main .q-box .radio input {
      position: absolute;
      left: 0;
      opacity: 0;
      visibility: hidden; }
      main .q-box .radio input:checked + span:before {
        background-color: rgba(19, 180, 184, 0.2); }
    main .q-box .radio span {
      font-size: calc(0.4703703701rem + 1.7944444449vw);
      line-height: 1.2;
      color: black;
      display: flex;
      align-items: center; }
      @media (min-width: 1200px) {
        main .q-box .radio span {
          font-size: 1.6666666667rem; } }
      main .q-box .radio span:before {
        content: attr(data-text);
        width: calc(1.0567901232rem + 16.7481481486vw);
        height: calc(0.7481481478rem + 8.8777777782vw);
        border: 1px solid #13b4b8;
        color: #13b4b8;
        font-size: calc(0.4703703701rem + 1.7944444449vw);
        text-transform: uppercase;
        font-weight: 400;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        flex: 0 0 auto; }
        @media (min-width: 1200px) {
          main .q-box .radio span:before {
            width: 12.2222222222rem; } }
        @media (min-width: 1200px) {
          main .q-box .radio span:before {
            height: 6.6666666667rem; } }
        @media (min-width: 1200px) {
          main .q-box .radio span:before {
            font-size: 1.6666666667rem; } }
  main .q-box .error {
    font-size: 12px;
    color: red;
    margin-top: 10px; }
  main .imgbox {
    padding-top: calc(0.6864197528rem + 7.3037037042vw); }
    @media (min-width: 1200px) {
      main .imgbox {
        padding-top: 5.5555555556rem; } }
    main .imgbox img {
      display: block;
      max-width: 85%;
      margin: 0 auto; }
    @media (max-width: 575px) {
      main .imgbox {
        padding-top: calc(0.6246913577rem + 5.7296296301vw); } }
  @media (max-width: 575px) and (min-width: 1200px) {
    main .imgbox {
      padding-top: 4.4444444444rem; } }
    @media (max-width: 575px) {
        main .imgbox img {
          max-width: 64%; } }
  main .answered {
    padding-bottom: calc(0.6246913577rem + 5.7296296301vw);
    padding-top: calc(0.7481481478rem + 8.8777777782vw); }
    @media (min-width: 1200px) {
      main .answered {
        padding-bottom: 4.4444444444rem; } }
    @media (min-width: 1200px) {
      main .answered {
        padding-top: 6.6666666667rem; } }
  main .signupform {
    padding-top: calc(0.5012345676rem + 2.5814814819vw); }
    @media (min-width: 1200px) {
      main .signupform {
        padding-top: 2.2222222222rem; } }
    main .signupform .formgroup {
      margin: calc(0.4703703701rem + 1.7944444449vw) 0 calc(0.4395061725rem + 1.0074074079vw); }
      @media (min-width: 1200px) {
        main .signupform .formgroup {
          margin: 1.6666666667rem 0 1.1111111111rem; } }
      main .signupform .formgroup .form-input {
        display: block;
        width: 100%;
        font-size: calc(0.4703703701rem + 1.7944444449vw);
        color: #13b4b8;
        height: calc(0.6308641972rem + 5.8870370375vw);
        border: 1px solid #13b4b8;
        padding: 6px 20px;
        background-color: transparent; }
        @media (min-width: 1200px) {
          main .signupform .formgroup .form-input {
            font-size: 1.6666666667rem; } }
        @media (min-width: 1200px) {
          main .signupform .formgroup .form-input {
            height: 4.5555555556rem; } }
        main .signupform .formgroup .form-input::placeholder {
          color: #13b4b8; }
        main .signupform .formgroup .form-input:focus-within {
          outline: 0; }
        @media (max-width: 575px) {
          main .signupform .formgroup .form-input {
            padding: 6px 12px;
            height: 40px; } }
      main .signupform .formgroup .btnsubmit {
        display: block;
        width: 100%;
        font-size: calc(0.4703703701rem + 1.7944444449vw);
        color: #13b4b8;
        height: calc(0.6308641972rem + 5.8870370375vw);
        border: 1px solid #13b4b8;
        background-color: rgba(19, 180, 184, 0.2);
        margin-top: 20px;
        text-transform: uppercase; }
        @media (min-width: 1200px) {
          main .signupform .formgroup .btnsubmit {
            font-size: 1.6666666667rem; } }
        @media (min-width: 1200px) {
          main .signupform .formgroup .btnsubmit {
            height: 4.5555555556rem; } }
        @media (max-width: 575px) {
          main .signupform .formgroup .btnsubmit {
            padding: 6px 12px;
            height: 40px;
            margin-top: 12px; } }

.hidden {
  display: none !important; }

img.title,
img.question,
img.score-title {
  width: 100%;
  max-width: 100%;
  margin-bottom: calc(0.6246913577rem + 5.7296296301vw);
}