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

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, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline
}

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

ol, ul {
  list-style: none
}

a {
  text-decoration: none
}

html {
  background-color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 62.5%;
  font-weight: 400;
  scroll-behavior: smooth
}

body {
  color: #505050;
  font-size: 1.6rem;
  line-height: 2.6rem
}

footer, main, section {
  display: block;
  position: relative;
  width: 100%
}

@media screen and (max-width: 768px) {
  footer, main, section {
    overflow: hidden
  }
}

.content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;
  max-width: 108rem;
  padding: 4rem 1.5rem;
  width: 100%
}

@media screen and (max-width: 768px) {
  .content {
    padding: 3rem
  }
}

.btn {
  align-items: center;
  border: none;
  border-radius: .5rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 1.6rem;
  font-weight: 700;
  height: 6rem;
  justify-content: flex-start;
  line-height: 1.8rem;
  padding: 0 1.8rem;
  max-width: 39.8rem;
  width: 100%
}

@media screen and (max-width: 768px) {
  .btn {
    height: 5rem
  }
}

.btn img {
  display: block;
  margin-right: 2rem
}

.btn.btn-pink {
  background-color: #e701dd
}

.btn.btn-purple {
  background-color: #440493
}

.btn.btn-green {
  background-color: #25d366
}

h1, h2 {
  display: block;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3rem;
  position: relative
}

h1 strong, h2 strong {
  font-weight: 700
}

h1:before, h2:before {
  background-color: #e701dd;
  content: "";
  display: block;
  height: .9rem;
  margin-bottom: 1rem;
  width: 2.4rem
}

h1 {
  font-size: 3rem;
  line-height: 3.6rem
}

h1:before {
  display: none
}

h4 {
  color: #e701dd;
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin: 2rem 0;
  position: relative
}

h4:after {
  background-color: #440493;
  display: block;
  content: "";
  height: .3rem;
  margin-top: 2rem;
  width: 1.6rem
}

p {
  font-size: 1.6rem;
  line-height: 2.6rem
}

p strong {
  font-weight: 700
}

small {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem
}

.box {
  align-items: center;
  background-color: #fff;
  border: .1rem solid #f0f0f0;
  border-radius: 1rem;
  color: #505050;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
  width: 100%
}

header {
  align-items: center;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  display: flex;
  min-height: 12rem;
  justify-content: center;
  width: 100%
}

@media screen and (max-width: 768px) {
  header {
    box-shadow: none
  }
}

header img {
  width: 172px
}

#top .content {
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap
}

#top .left {
  max-width: 48rem
}

#top .left p {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 2.2rem;
  margin-bottom: 2rem
}

@media screen and (max-width: 768px) {
  #top .left p {
    font-size: 1.4rem;
    line-height: 1.8rem
  }
}

#top .left h2 {
  color: #e701dd;
  font-size: 4.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 5rem;
  margin-bottom: 4rem
}

@media screen and (max-width: 768px) {
  #top .left h2 {
    font-size: 2.8rem;
    line-height: 3rem
  }
}

#top .left h2 span {
  color: #440493
}

#top .left h2:before {
  display: none
}

#top .left a {
  font-size: 2.5rem;
  font-weight: 300;
  justify-content: center;
  margin-bottom: 2rem;
  max-width: 36rem
}

@media screen and (max-width: 768px) {
  #top .left a {
    font-size: 1.6rem;
    margin: 0 auto 2rem
  }
}

#top .left small {
  display: block;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.8rem;
  max-width: 27.5rem
}

@media screen and (max-width: 768px) {
  #top .left small {
    text-align: center;
    margin: 0 auto
  }
}

@media screen and (max-width: 768px) {
  #top .right {
    display: none
  }
}

#top .right img {
  display: block;
  width: 100%
}

#simulation {
  background: linear-gradient(95.9deg, #440493 0%, #e701dd 108.86%)
}

@media screen and (max-width: 768px) {
  #simulation:before {
    border-left: 3.5rem solid rgba(0, 0, 0, 0);
    border-right: 3.5rem solid rgba(0, 0, 0, 0);
    border-top: 3.5rem solid #fff;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 0
  }
}

#simulation .content {
  align-items: center
}

@media screen and (max-width: 768px) {
  #simulation .content {
    padding-top: 6rem
  }
}

#simulation h2 {
  color: #fff;
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 5.5rem;
  letter-spacing: -0.02em
}

@media screen and (max-width: 768px) {
  #simulation h2 {
    font-size: 2.8rem;
    line-height: 3.4rem
  }
}

#simulation h2:before {
  display: none
}

#simulation p {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.2rem;
  letter-spacing: -0.02em;
  margin: 24px auto 0;
  max-width: 700px;
  text-align: center
}

@media screen and (max-width: 768px) {
  #simulation p {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem
  }
}

#simulation form {
  display: block;
  margin-top: 35px;
  max-width: 360px;
  width: 100%
}

#simulation form div {
  display: block;
  margin-bottom: 15px;
  width: 100%
}

#simulation form div label {
  color: #fff;
  display: block;
  font-size: 1.8rem;
  line-height: 2.2rem
}

@media screen and (max-width: 768px) {
  #simulation form div label {
    font-size: 1.2rem
  }
}

#simulation form div input, #simulation form div select {
  background-color: #fff;
  border: .1rem solid #e5e5e5;
  border-radius: .5rem;
  font-size: 1.8rem;
  height: 6rem;
  outline: none;
  padding: 0 1.2rem;
  width: 100%
}

@media screen and (max-width: 768px) {
  #simulation form div input {
    height: 5rem
  }
}

#simulation form div button {
  font-size: 1.8rem;
  font-weight: 400;
  justify-content: center;
  margin-top: 2.5rem
}

#members .content {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between
}

#members .left, #members .right {
  display: block;
  max-width: 50rem;
  width: 100%
}

#members .left h2 {
  margin-bottom: 3rem;
  width: 26.5rem
}

#members .left h2 strong {
  color: #e701dd
}

#members .left img {
  width: 100%
}

#members .right p {
  margin-bottom: 3.5rem
}

#members .right span {
  display: block;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 3rem
}

#members .right small {
  display: block;
  color: #e701dd;
  font-size: 1.4rem;
  line-height: 2.2rem;
  text-transform: uppercase
}

#members .right .slide .slick-dots {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start
}

#members .right .slide .slick-dots li {
  align-items: center;
  display: flex;
  height: 1.2rem;
  justify-content: center;
  margin-right: 1.5rem;
  width: 1.2rem
}

#members .right .slide .slick-dots li button {
  background-color: #e701dd;
  border-radius: 50%;
  height: .85rem;
  padding: 0;
  transition: all linear .25s;
  width: .85rem
}

#members .right .slide .slick-dots li button:before {
  display: none
}

#members .right .slide .slick-dots li.slick-active button {
  background-color: #440493;
  height: 1.2rem;
  width: 1.2rem
}

#faq {
  background-color: #fdf9ff
}

#faq .content {
  align-items: center
}

#faq .content > a {
  width: 30rem
}

#faq h2 strong {
  color: #440493
}

#faq h2:before {
  margin: 0 auto 1rem
}

#faq .faq {
  display: block;
  margin: 5rem auto;
  max-width: 95.4rem;
  width: 100%
}

#faq .faq .item {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 1rem;
  margin-bottom: 2rem;
  padding: 1.2rem 3.5rem;
  width: 100%
}

#faq .faq .item input {
  display: none
}

#faq .faq .item label {
  align-items: center;
  display: flex;
  font-size: 1.8rem;
  justify-content: space-between;
  line-height: 3.5rem
}

#faq .faq .item label:after {
  background: url(../images/icon-arrow.png);
  content: "";
  display: block;
  height: 2.4rem;
  width: 2.4rem
}

#faq .faq .item .item-content {
  color: #440493;
  font-style: italic;
  line-height: 2rem;
  overflow: hidden;
  max-height: 0;
  transition: all .35s
}

#faq .faq .item input:checked + label::after {
  transform: rotate(180deg)
}

#faq .faq .item input:checked ~ .item-content {
  max-height: 100vh;
  padding: 1.6rem 0 0
}

#questions {
  align-items: center;
  background: linear-gradient(95.9deg, #440493 0%, #e701dd 108.86%);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: flex-start;
  left: 0;
  min-height: 100vh;
  min-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  z-index: 3
}

@media screen and (max-width: 768px) {
  #questions header {
    display: none
  }
}

#questions .content-progess {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%
}

@media screen and (max-width: 768px) {
  #questions .content-progess {
    background-color: #fff
  }
}

#questions .content-progess .progress {
  background-color: #e5e5e5;
  border: .1rem solid #e5e5e5;
  border-radius: .6rem;
  display: block;
  height: 1.2rem;
  overflow: hidden;
  width: 100%
}

#questions .content-progess .progress span {
  background-color: #e701dd;
  display: block;
  height: 100%;
  transition: all linear .25s;
  width: 25%
}

#questions #answers {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  width: 100vw
}

#questions #answers .step {
  min-width: 100vw;
  transition: all linear .3s
}

#questions #answers .step h2 {
  color: #fff;
  display: block;
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 5.5rem;
  margin-bottom: 5rem;
  text-align: center;
  width: 100%
}

@media screen and (max-width: 768px) {
  #questions #answers .step h2 {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 3rem
  }
}

#questions #answers .step h2:before {
  display: none
}

#questions #answers .step p {
  color: #fff;
  display: block;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 3rem;
  margin-bottom: 7rem;
  text-align: center;
  width: 100%
}

#questions #answers .step .loading {
  -webkit-animation-name: spin;
  animation-name: spin;
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  display: block;
  height: 24.5rem;
  margin: 0 auto;
  width: 24.5rem
}

#questions #answers .custom-radio {
  display: block;
  width: 100%
}

#questions #answers .custom-radio input {
  display: none
}

#questions #answers .custom-radio label {
  align-items: center;
  background-color: #fff;
  border: .1rem solid #e5e5e5;
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  font-size: 1.8rem;
  height: 7rem;
  justify-content: center;
  margin: 0 auto 2.4rem;
  max-width: 70rem;
  position: relative;
  width: 100%
}

@media screen and (max-width: 768px) {
  #questions #answers .custom-radio label {
    height: 5rem;
    font-size: 1.6rem;
    line-height: 2rem
  }
}

#questions #answers .custom-radio label:before {
  border: .1rem solid #e5e5e5;
  border-radius: 50%;
  content: "";
  height: 1.6rem;
  left: 2rem;
  position: absolute;
  top: 1.6rem;
  width: 1.6rem
}

#questions #answers .custom-radio label:after {
  border-radius: 50%;
  content: "";
  height: 1.5rem;
  left: 2.1rem;
  position: absolute;
  top: 1.7rem;
  width: 1.5rem
}

#questions #answers .custom-radio input:checked ~ label {
  border-color: #25d366
}

#questions #answers .custom-radio input:checked ~ label::after {
  background-color: #25d366
}

#questions #answers .button-back {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: flex-start
}

#questions #answers .button-back img {
  display: block;
  margin-right: .5rem
}

#questions.stp1 .progress span {
  width: 25%
}

#questions.stp1 .step-1 {
  margin-left: 0
}

#questions.stp2 .content-progess .progress span {
  width: 50%
}

#questions.stp2 .step-1 {
  margin-left: -100vw
}

#questions.stp3 .content-progess .progress span {
  width: 75%
}

#questions.stp3 .step-1 {
  margin-left: -200vw
}

#questions.stp4 .content-progess .progress span {
  width: 100%
}

#questions.stp4 .step-1 {
  margin-left: -300vw
}

#questions.stp5 .content-progess {
  display: none
}

#questions.stp5 .step-1 {
  margin-left: -400vw
}

#questions #answers .step-5 .content {
  align-items: stretch;
  background-color: #fff;
  border-radius: 1.5rem;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 4rem;
  padding: 4rem
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content {
    height: 92vh;
    overflow-y: scroll;
    padding: 3rem;
    width: 92%
  }
}

#questions #answers .step-5 .content .left {
  max-width: 43rem
}

#questions #answers .step-5 .content .left h2 {
  color: #505050;
  margin-bottom: 2.5rem;
  text-align: left
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .left h2 {
    font-size: 3.2rem;
    line-height: 4rem
  }
}

#questions #answers .step-5 .content .left h2 span {
  color: #e701dd
}

#questions #answers .step-5 .content .left h3 {
  font-size: 2.2rem;
  line-height: 3rem;
  margin-bottom: 2rem
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .left h3 {
    font-weight: 600;
    text-align: center
  }
}

#questions #answers .step-5 .content .left p {
  color: #505050;
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-bottom: 3.2rem;
  text-align: left
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .left p {
    font-size: 1.6rem;
    line-height: 2rem
  }
}

#questions #answers .step-5 .content .left a.btn {
  font-size: 2.4rem;
  font-weight: 400;
  justify-content: center;
  margin-bottom: 3rem
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .left a.btn {
    font-size: 1.6rem;
    font-weight: 500
  }
}

#questions #answers .step-5 .content .left ul {
  display: block
}

#questions #answers .step-5 .content .left ul li {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .left ul li {
    font-size: 1.4rem;
    font-weight: 300
  }
}

#questions #answers .step-5 .content .left ul li img {
  display: block;
  margin: .5rem .5rem 0 0
}

#questions #answers .step-5 .content .left a.btn-pink {
  font-size: 1.6rem;
  font-weight: 400;
  justify-content: center;
  margin: 4rem 0 0;
  text-align: center
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .left a.btn-pink {
    font-size: 1.2rem
  }
}

#questions #answers .step-5 .content .right {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .right {
    margin-top: 3rem
  }

  #questions #answers .step-5 .content .right img {
    margin-bottom: 2rem;
    width: 100%
  }
}

#questions #answers .step-5 .content .right .btn-pink {
  font-size: 1.6rem;
  font-weight: 400;
  justify-content: center;
  text-align: center
}

@media screen and (max-width: 768px) {
  #questions #answers .step-5 .content .right .btn-pink {
    font-size: 1.4rem
  }
}

#questions #answers .step-5 .content .right .btn-pink.outline {
  background-color: #fff;
  border: .1rem solid #e701dd;
  color: #e701dd
}

footer {
  background-color: #440493
}

footer .content {
  align-items: center;
  justify-content: space-between;
  flex-direction: row
}

footer p {
  color: #fff;
  font-size: 1.2rem;
  line-height: 2rem
}

footer a {
  color: #fff;
  height: 2.4rem;
  margin-left: 2.4rem;
  transition: all linear .2s;
  width: 2.4rem
}

footer a:hover {
  color: #e701dd
}

footer a svg {
  height: 2.4rem;
  width: 2.4rem
}

@-webkit-keyframes spin {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}