@font-face {
  font-family: 'heebo';
  font-weight: 300;
  src: url("../assets/fonts/Heebo-Light.ttf");
}

@font-face {
  font-family: 'heebo';
  font-weight: 400;
  src: url("../assets/fonts/Heebo-Regular.ttf");
}

@font-face {
  font-family: 'heebo';
  font-weight: 700;
  src: url("../assets/fonts/Heebo-Bold.ttf");
}

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 1vw;
}

body {
  position: relative;
}

body.on {
  overflow-y: hidden;
}

html, body {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  direction: rtl;
}

html, body, input, button, select, select option {
  font-family: 'heebo', "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  height: auto;
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: inherit;
  color: #fff;
}

#start {
  width: 100%;
  min-height: 100%;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #0D47A1;
  padding: 8rem 0 13.33333rem;
  position: relative;
}

@media (min-width: 1024px) {
  #start {
    padding: 2.23594rem 0 5.52083rem;
  }
}

#start.on {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#start #start-logo {
  width: 20rem;
  margin-bottom: 8rem;
}

@media (min-width: 1024px) {
  #start #start-logo {
    width: 6.61927rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.82292rem;
  }
}

#start #start-title {
  width: 60.30533rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  #start #start-title {
    width: 15.72917rem;
    margin-bottom: 2.8125rem;
  }
}

#start .decoration {
  position: absolute;
}

#start #start-decoration1 {
  width: 33.6rem;
  top: 0;
  left: 0;
}

@media (min-width: 1024px) {
  #start #start-decoration1 {
    width: 17.8125rem;
  }
}

#start #start-decoration2 {
  width: 40rem;
  right: 0;
  bottom: 0;
}

@media (min-width: 1024px) {
  #start #start-decoration2 {
    width: 15.625rem;
  }
}

#start h2, #start h3, #start h5 {
  font-weight: 300;
  text-align: center;
  position: relative;
  z-index: 2;
}

#start h2, #start h3 {
  font-size: 5.33333rem;
}

@media (min-width: 1024px) {
  #start h2, #start h3 {
    font-size: 1.5625rem;
  }
}

#start h2 {
  width: 80rem;
  margin-bottom: 4rem;
}

@media (min-width: 1024px) {
  #start h2 {
    margin-bottom: 0.78125rem;
  }
}

#start h3 {
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  #start h3 {
    margin-top: auto;
    margin-bottom: 0.78125rem;
  }
}

#start h5 {
  width: 66.66667rem;
  font-size: 4rem;
  margin-bottom: 4rem;
}

@media (min-width: 1024px) {
  #start h5 {
    width: 25rem;
    font-size: 1rem;
    margin-bottom: 2.60417rem;
  }
}

#start #start-btn {
  width: 13rem;
  height: 13rem;
  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;
  background-color: #B02D89;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (min-width: 1024px) {
  #start #start-btn {
    width: 3.5rem;
    height: 3.5rem;
    cursor: pointer;
  }
}

#start #start-btn svg {
  width: 5.27733rem;
  height: 2.77733rem;
  -webkit-transform: rotateZ(-90deg);
          transform: rotateZ(-90deg);
}

@media (min-width: 1024px) {
  #start #start-btn svg {
    width: 1.03073rem;
    height: 0.54271rem;
  }
}

#questionnaire-container {
  width: 100%;
  min-height: 100%;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #0D47A1;
  padding: 8.84667rem 8rem 13.33333rem;
}

@media (min-width: 1024px) {
  #questionnaire-container {
    padding: 2.23594rem 0 5.52083rem;
  }
}

#questionnaire-container.on {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#questionnaire-container #back {
  width: 4.824rem;
  height: 4.824rem;
  margin-bottom: 9.91067rem;
  margin-left: auto;
}

@media (min-width: 1024px) {
  #questionnaire-container #back {
    width: 1.88438rem;
    height: 1.88438rem;
    margin: 0 39.5rem 2rem auto;
    cursor: pointer;
  }
}

#questionnaire-container #back.off {
  opacity: 0;
  pointer-events: none;
}

#questionnaire-container #logo {
  display: none;
}

@media (min-width: 1024px) {
  #questionnaire-container #logo {
    display: initial;
    width: 6.61927rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.82292rem;
  }
}

#questionnaire-container #title {
  width: 50rem;
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  #questionnaire-container #title {
    width: 12rem;
  }
}

#questionnaire-container #progress-bar-container {
  width: 84rem;
  height: 0.8rem;
  background-color: #2964B3;
  margin-bottom: 6rem;
}

@media (min-width: 1024px) {
  #questionnaire-container #progress-bar-container {
    width: 20.83333rem;
    height: 0.3125rem;
    margin-bottom: 3.64583rem;
  }
}

#questionnaire-container #progress-bar-container #progress-bar {
  width: 6.25%;
  height: 100%;
  background-color: #fff;
}

#questionnaire-container > div:not(:first-of-type) {
  display: none;
}

#questionnaire-container > div:not(:first-of-type).on {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on {
    width: 20.83333rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container .error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
}

#questionnaire-container > div:not(:first-of-type).on.step-container .error.on {
  opacity: 1;
}

#questionnaire-container > div:not(:first-of-type).on.step-container .error svg {
  width: 5.33333rem;
  height: 5.33333rem;
  margin-left: 2rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container .error svg {
    width: 1.04167rem;
    height: 1.04167rem;
    margin-left: 0.41667rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container .error p {
  font-size: 4rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container .error p {
    font-size: 0.9375rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container .options {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10.66667rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container .options {
    margin-top: 1.875rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container .options .option {
  width: 100%;
  height: 13.33333rem;
  margin-bottom: 8rem;
  position: relative;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container .options .option {
    height: 2.76042rem;
    margin-bottom: 1.5625rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container .options .option input {
  width: 100%;
  height: 100%;
  opacity: 0;
}

#questionnaire-container > div:not(:first-of-type).on.step-container .options .option input:checked + label {
  background-color: #2964B3;
}

#questionnaire-container > div:not(:first-of-type).on.step-container .options .option label {
  width: 100%;
  height: 100%;
  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;
  font-size: 4rem;
  color: #fff;
  text-align: center;
  border-radius: 6.66667rem;
  border: 0.3rem solid #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container .options .option label {
    font-size: 0.9375rem;
    border-radius: 2.60417rem;
    border-width: 0.05208rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc h5 {
  text-align: center;
  margin-bottom: 10.66667rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc h5 {
    margin-bottom: 2.08333rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc h6 {
  font-size: 4rem;
  margin-bottom: 4.66667rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc h6 {
    font-size: 1.14583rem;
    text-align: center;
    margin-bottom: 1.14583rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender {
  width: 44.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10.93333rem;
  position: relative;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender {
    width: 8.33333rem;
    margin-bottom: 2.65625rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container {
  width: 18.66667rem;
  height: 18.66667rem;
  position: relative;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container {
    width: 3.38542rem;
    height: 3.38542rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container input:checked + div {
  background-color: #2964B3;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container .kid-gender-img {
  width: 100%;
  height: 100%;
  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;
  border-radius: 50%;
  border: 0.3rem solid #fff;
  margin-bottom: 2.66667rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container .kid-gender-img {
    border-width: 0.05208rem;
    margin-bottom: 2.08333rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container .kid-gender-img svg {
  width: 9.33333rem;
  height: 9.33333rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender .kid-gender-img-container .kid-gender-img svg {
    width: 1.69271rem;
    height: 1.69271rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender p {
  font-size: 4rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .kid-gender p {
    font-size: 0.9375rem;
    margin-top: 0.5rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .error {
  bottom: -7rem;
  right: 1rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .error {
    bottom: -1.5rem;
    right: -0.2rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .error svg {
  width: 4rem;
  height: 4rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .error svg {
    width: 0.8rem;
    height: 0.8rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .error p {
  font-size: 4.5rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #choose-kid-gender .error p {
    font-size: 1rem;
    white-space: nowrap;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .fields-container {
  width: 100%;
  display: -ms-grid;
  display: grid;
  row-gap: 8rem;
  -webkit-column-gap: 5.33333rem;
          column-gap: 5.33333rem;
  margin-bottom: 12.8rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .fields-container {
    row-gap: 1.5625rem;
    -webkit-column-gap: 1.45833rem;
            column-gap: 1.45833rem;
    margin-bottom: 3.38542rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .fields-container .field {
  margin-top: initial;
  margin-bottom: initial;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .fields-container .field.field1 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .fields-container .field.field2 {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .fields-container .field.field3 {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .fields-container .field.field4 {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #calc-btn {
  margin-bottom: 8rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc #calc-btn {
    margin-bottom: 1.5625rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .error {
  position: absolute;
  bottom: -6rem;
  right: 4.5rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .error {
    bottom: -1.35rem;
    right: 1rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .error svg {
  width: 3.7rem;
  height: 3.7rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .error svg {
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.41667rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .error p {
  display: contents;
  font-size: 3rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container.bmi-calc .error p {
    font-size: 0.72917rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.step-container #go-to-bmi-btn {
  display: none;
  margin-bottom: 2rem;
}

#questionnaire-container > div:not(:first-of-type).on.step-container #go-to-bmi-btn.on {
  display: initial;
}

#questionnaire-container > div:not(:first-of-type).on.step-container .disclaimer {
  font-size: 4rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.step-container .disclaimer {
    font-size: 1rem;
    margin-top: 1rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.disclaimer h5 {
  text-align: center;
}

#questionnaire-container > div:not(:first-of-type).on.disclaimer .checkbox-container {
  margin: 10rem 0;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.disclaimer .checkbox-container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 3.02083rem 0 1.30208rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.disclaimer .checkbox-container .checkbox input:checked + div {
  background-image: url("../assets/img/v-white.svg");
}

#questionnaire-container > div:not(:first-of-type).on.disclaimer .checkbox-container .checkbox .box {
  border-color: #fff;
  position: relative;
  top: 0.35rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.disclaimer .checkbox-container .checkbox .box {
    top: 0.15rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on.disclaimer .checkbox-container p {
  font-size: 4rem;
  font-weight: 300;
  color: #fff;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on.disclaimer .checkbox-container p {
    font-size: 0.83333rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on#bmi-results {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#questionnaire-container > div:not(:first-of-type).on#bmi-results .bmi-result-container {
  width: 86rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5.06667rem 4rem 5.06667rem 10rem;
  border-radius: 1.33333rem;
  border: 0.5rem solid #2964B3;
  margin-bottom: 8rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on#bmi-results .bmi-result-container {
    width: 20.83333rem;
    padding: 1.2rem 1rem 1.2rem 3rem;
    border-radius: 0.52083rem;
    border-width: 0.05208rem;
    margin-bottom: 1.5625rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on#bmi-results .bmi-result-container h4 {
  color: #fff;
  font-size: 6.4rem;
  font-weight: 300;
  margin-top: 5rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on#bmi-results .bmi-result-container h4 {
    font-size: 1.2rem;
    margin-top: 1rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on#bmi-results .bmi-result-container .bmi-result .bar {
  bottom: 40%;
}

#questionnaire-container > div:not(:first-of-type).on#bmi-results #add-btn-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
  margin-bottom: 7rem;
}

#questionnaire-container > div:not(:first-of-type).on#bmi-results #add-btn-container #add-btn {
  width: 10.66667rem;
  height: 10.66667rem;
  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;
  border-radius: 50%;
  border: 0.13333rem solid #fff;
  margin-left: 3.53333rem;
  cursor: pointer;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on#bmi-results #add-btn-container #add-btn {
    width: 1.875rem;
    height: 1.875rem;
    border-width: 0.05208rem;
    margin-left: 0.54688rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on#bmi-results #add-btn-container p {
  font-size: 4rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on#bmi-results #add-btn-container p {
    font-size: 0.83333rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on h3 {
  font-size: 6.66667rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on h3 {
    font-size: 1.5625rem;
  }
}

#questionnaire-container > div:not(:first-of-type).on h5 {
  font-size: 4rem;
  font-weight: 300;
  margin-top: 2.66667rem;
}

@media (min-width: 1024px) {
  #questionnaire-container > div:not(:first-of-type).on h5 {
    font-size: 0.9375rem;
    margin-top: 0.78125rem;
  }
}

.bmi-result {
  width: 40rem;
  height: 22.4rem;
  position: relative;
}

@media (min-width: 1024px) {
  .bmi-result {
    width: 10.09688rem;
    height: 4.8901rem;
  }
}

.bmi-result .line-container {
  width: 0.53333rem;
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .bmi-result .line-container {
    width: 0.07344rem;
  }
}

.bmi-result .line-container h5 {
  font-size: 6.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  padding-left: 11rem;
  margin-top: initial;
  margin-bottom: 2.66667rem;
}

@media (min-width: 1024px) {
  .bmi-result .line-container h5 {
    font-size: 1.25rem;
    padding-left: 3rem;
    margin-bottom: 0.2rem;
  }
}

.bmi-result .line-container h5 span {
  white-space: nowrap;
  margin-left: 1rem;
}

@media (min-width: 1024px) {
  .bmi-result .line-container h5 span {
    margin-left: 0.5rem;
  }
}

.bmi-result .line-container .line {
  width: 100%;
  height: 4rem;
  background-color: #fff;
  margin-bottom: 2.53333rem;
}

@media (min-width: 1024px) {
  .bmi-result .line-container .line {
    height: 0.86406rem;
    margin-bottom: 0.39844rem;
  }
}

.bmi-result .line-container p {
  font-size: 4rem;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .bmi-result .line-container p {
    font-size: 0.9375rem;
  }
}

.bmi-result .bar {
  width: 100%;
  height: 2.13333rem;
  background: transparent -webkit-gradient(linear, left top, right top, from(#1A69E3), color-stop(34%, #24BCBE), color-stop(65%, #F7B500), to(#CF1E1E)) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(90deg, #1A69E3 0%, #24BCBE 34%, #F7B500 65%, #CF1E1E 100%) 0% 0% no-repeat padding-box;
  position: absolute;
  bottom: 85%;
  right: 0;
  left: 0;
}

@media (min-width: 1024px) {
  .bmi-result .bar {
    height: 0.56979rem;
  }
}

.recommendations {
  width: 100%;
  height: 100%;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #F2F6FA;
}

.recommendations.on {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.recommendations h3 {
  width: 65rem;
  color: #000;
  font-size: 4rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .recommendations h3 {
    width: initial;
    font-size: 1.5625rem;
  }
}

.recommendations .rec-mail-btn {
  font-size: 4rem;
  color: #0D47A1;
  text-decoration: underline;
  margin-top: auto;
  margin-bottom: 8rem;
}

@media (min-width: 1024px) {
  .recommendations .rec-mail-btn {
    font-size: 0.9375rem;
    margin-bottom: initial;
    cursor: pointer;
  }
}

#recommendations-pre {
  padding-top: 7rem;
}

@media (min-width: 1024px) {
  #recommendations-pre {
    padding-bottom: 2.2rem;
  }
}

#recommendations-pre .logo {
  display: none;
}

#recommendations-pre .title {
  width: 47rem;
  margin-top: 12rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  #recommendations-pre .title {
    width: 15rem;
    margin-top: initial;
  }
}

#recommendations-pre h3 {
  margin-bottom: 9rem;
}

@media (min-width: 1024px) {
  #recommendations-pre h3 {
    margin-bottom: 1rem;
  }
}

#recommendations-pre h6 {
  font-size: 4rem;
  color: #000;
  margin-bottom: 14rem;
}

@media (min-width: 1024px) {
  #recommendations-pre h6 {
    font-size: 0.9375rem;
    margin-bottom: 2.08333rem;
  }
}

#recommendations-pre.hide-child .bubble#adult {
  left: initial;
}

#recommendations-pre.hide-child .bubble#child {
  display: none;
}

#recommendations {
  min-height: 100vh;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 7rem 6.26667rem 11.06667rem;
  position: relative;
}

@media (min-width: 1024px) {
  #recommendations {
    padding: 2.23594rem 3.98958rem 2.29167rem;
  }
}

#recommendations #recommendations-back-container {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 3rem;
  right: 4rem;
}

#recommendations #recommendations-back-container.hide {
  display: none;
}

#recommendations #recommendations-back-container p {
  font-size: 4rem;
  color: #0D47A1;
}

@media (min-width: 1024px) {
  #recommendations #recommendations-back-container p {
    font-size: 2rem;
  }
}

#recommendations #recommendations-back-container svg {
  width: 4rem;
  height: 4rem;
  cursor: pointer;
}

@media (min-width: 1024px) {
  #recommendations #recommendations-back-container svg {
    width: 2rem;
    height: 2rem;
  }
}

#recommendations .logo {
  display: none;
}

#recommendations .title {
  width: 47rem;
  margin-top: 12rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  #recommendations .title {
    width: 15rem;
    margin-top: 4.70833rem;
    margin-bottom: 1.7849rem;
  }
}

#recommendations h6, #recommendations p {
  text-align: center;
}

@media (min-width: 1024px) {
  #recommendations p {
    font-size: 0.9rem;
    padding: 0.3rem 0;
  }
}

#recommendations .checkbox-container p {
  text-align: right;
}

#recommendations h3 {
  margin-bottom: 5.2rem;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  #recommendations h3 {
    margin-bottom: 0.78125rem;
  }
}

#recommendations h6 {
  font-size: 4rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 14rem;
}

@media (min-width: 1024px) {
  #recommendations h6 {
    font-size: 0.9375rem;
    margin-bottom: 2.08333rem;
  }
}

#recommendations #scroll-down-arrow {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: block;
  position: absolute;
  bottom: 58rem;
  left: 20rem;
  -webkit-animation: arrowAnim 1s ease-in-out infinite;
          animation: arrowAnim 1s ease-in-out infinite;
}

@media (min-width: 1024px) {
  #recommendations #scroll-down-arrow {
    display: none;
  }
}

@-webkit-keyframes arrowAnim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes arrowAnim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

#recommendations #scroll-down-arrow.hide {
  display: none;
}

#recommendations #scroll-down-arrow svg {
  width: 7rem;
  height: 7rem;
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
}

#recommendations .btn {
  margin-bottom: 8rem;
}

@media (min-width: 1024px) {
  #recommendations .btn {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-bottom: 1.04167rem;
  }
}

@media (min-width: 1024px) {
  #recommendations .rec .rec-icon {
    width: 2.5rem;
  }
}

#rec-container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 22rem;
}

@media (min-width: 1024px) {
  #rec-container {
    width: 50rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom: 5rem;
  }
}

.rec, .bubble {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 4.4rem;
  border-radius: 50%;
  -webkit-box-shadow: 0px 12px 30px #00000033;
          box-shadow: 0px 12px 30px #00000033;
  position: relative;
}

.rec:nth-child(6n + 1), .bubble:nth-child(6n + 1) {
  background-color: #AD2185;
}

.rec:nth-child(6n + 2), .bubble:nth-child(6n + 2) {
  background-color: #1B69DE;
}

@media (min-width: 1024px) {
  .rec, .bubble {
    padding: 1.09375rem;
    cursor: pointer;
  }
  .rec:nth-child(8n + 4), .bubble:nth-child(8n + 4) {
    background-color: #AD2185;
  }
  .rec:nth-child(8n + 6), .bubble:nth-child(8n + 6) {
    background-color: #0D47A1;
  }
  .rec:nth-child(8n + 7), .bubble:nth-child(8n + 7) {
    background-color: #672770;
  }
}

.rec p, .bubble p {
  font-size: 4rem;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .rec p, .bubble p {
    font-size: 1.1rem;
  }
}

.rec .rec-icon, .bubble .rec-icon {
  width: 7rem;
}

.rec .rec-arrow, .bubble .rec-arrow {
  width: 7rem;
  display: block;
}

@media (min-width: 1024px) {
  .rec .rec-arrow, .bubble .rec-arrow {
    width: 2.5rem;
  }
}

.rec {
  width: 37rem;
  height: 37rem;
  margin-bottom: 6rem;
}

@media (min-width: 1024px) {
  .rec {
    width: 9rem;
    height: 9rem;
    margin: 0 1rem 2rem;
  }
}

.rec:nth-child(4n + 3) {
  right: 6rem;
}

@media (min-width: 1024px) {
  .rec:nth-child(4n + 3) {
    right: initial;
  }
}

.rec:nth-child(2n) {
  margin-right: 13rem;
  top: 13rem;
}

@media (min-width: 1024px) {
  .rec:nth-child(2n) {
    margin-right: 1rem;
    top: 1.2rem;
  }
}

.rec:nth-child(4n) {
  top: 15rem;
}

@media (min-width: 1024px) {
  .rec:nth-child(4n) {
    top: 2rem;
  }
}

.rec:nth-child(4n + 2) {
  left: 6rem;
}

@media (min-width: 1024px) {
  .rec:nth-child(4n + 2) {
    left: initial;
  }
}

.rec:nth-child(6n + 3) {
  background-color: #3AAAC7;
}

.rec:nth-child(6n + 4) {
  background-color: #672770;
}

.rec:nth-child(6n + 5) {
  background-color: #4397E6;
}

.rec:nth-child(6n + 6) {
  background-color: #3AAAC7;
}

@media (min-width: 1024px) {
  .rec .rec-arrow {
    width: 2rem;
  }
}

.bubble {
  width: 38rem;
  height: 38rem;
}

@media (min-width: 1024px) {
  .bubble {
    width: 11rem;
    height: 11rem;
  }
}

.bubble#adult, .bubble#child {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.bubble#adult p, .bubble#child p {
  width: 22rem;
}

.bubble#adult svg, .bubble#child svg {
  width: auto;
  height: 13rem;
}

@media (min-width: 1024px) {
  .bubble#adult svg, .bubble#child svg {
    height: 4rem;
  }
}

.bubble#adult {
  background-color: #1B69DE;
  left: 18rem;
}

@media (min-width: 1024px) {
  .bubble#adult {
    left: 8rem;
  }
}

.bubble#child {
  background-color: #AD2185;
  bottom: 4rem;
  right: 14rem;
  margin-top: initial;
  margin-right: initial;
}

@media (min-width: 1024px) {
  .bubble#child {
    right: 4rem;
    top: initial;
  }
}

.bubble#child.hide {
  display: none;
}

.rec-popup {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.rec-popup.personal {
  min-height: 100vh;
}

.rec-popup .close {
  width: 4.53333rem;
  height: 4.53333rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: fixed;
  top: 4rem;
  right: 3rem;
}

@media (min-width: 1024px) {
  .rec-popup .close {
    width: 1.04167rem;
    height: 1.04167rem;
    right: 2.5rem;
    cursor: pointer;
  }
}

@media (min-width: 1024px) {
  .rec-popup > p {
    margin-left: auto;
  }
}

#recommendations-mail {
  height: 100%;
  padding: 8.84667rem 7.776rem 13.33333rem 8rem;
}

@media (min-width: 1024px) {
  #recommendations-mail {
    padding: 2.23594rem 3.98958rem 4.16667rem;
  }
}

#recommendations-mail.thank-you h3, #recommendations-mail.thank-you .field, #recommendations-mail.thank-you .checkbox-container, #recommendations-mail.thank-you #send-mail {
  display: none;
}

#recommendations-mail.thank-you #thank-you {
  display: initial;
  width: 72.8rem;
  color: #0D47A1;
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
}

#recommendations-mail.thank-you #thank-you span {
  font-size: 8rem;
}

@media (min-width: 1024px) {
  #recommendations-mail.thank-you #thank-you {
    width: initial;
    font-size: 1.5625rem;
  }
}

@media (min-width: 1024px) {
  #recommendations-mail .close {
    margin-left: initial;
    margin-right: auto;
    right: initial;
    left: 4rem;
    z-index: 1;
  }
}

#recommendations-mail .logo {
  display: none;
}

@media (min-width: 1024px) {
  #recommendations-mail .logo {
    display: initial;
    width: 6.6187rem;
    margin-bottom: 11.0901rem;
    margin-left: auto;
  }
}

#recommendations-mail .decoration {
  display: none;
}

@media (min-width: 1024px) {
  #recommendations-mail .decoration {
    display: initial;
    position: absolute;
  }
}

@media (min-width: 1024px) {
  #recommendations-mail #mail-decoration1 {
    width: 17.8125rem;
    top: 0;
    left: 0;
  }
}

@media (min-width: 1024px) {
  #recommendations-mail #mail-decoration2 {
    width: 15.625rem;
    bottom: 0;
    right: 0;
  }
}

#recommendations-mail h3, #recommendations-mail #thank-you {
  margin-top: 16rem;
}

@media (min-width: 1024px) {
  #recommendations-mail h3, #recommendations-mail #thank-you {
    width: 21rem;
    margin-top: initial;
    margin-bottom: 1.875rem;
  }
}

#recommendations-mail .field {
  margin-bottom: 5.46667rem;
}

@media (min-width: 1024px) {
  #recommendations-mail .field {
    width: 20.83333rem;
    margin-bottom: 1.09375rem;
  }
}

#recommendations-mail .field input {
  color: #0D47A1;
  border-color: #0D47A1;
}

#recommendations-mail .field label {
  color: #0D47A1;
  background-color: #F2F6FA;
}

#recommendations-mail #send-mail {
  margin-top: 15rem;
}

@media (min-width: 1024px) {
  #recommendations-mail #send-mail {
    margin-top: 5rem;
  }
}

#recommendations-mail #thank-you {
  display: none;
}

.checkbox-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media (min-width: 1024px) {
  .checkbox-container {
    width: 20.83333rem;
  }
}

.checkbox-container .checkbox {
  width: 4.8rem;
  height: 4.8rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 3.06667rem;
  position: relative;
}

@media (min-width: 1024px) {
  .checkbox-container .checkbox {
    width: 0.88542rem;
    height: 0.88542rem;
    margin-left: 0.67708rem;
  }
}

.checkbox-container .checkbox input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: -6rem;
}

.checkbox-container .checkbox input:checked + div {
  background-image: url("../assets/img/v.svg");
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
}

.checkbox-container .checkbox .box {
  width: 100%;
  height: 100%;
  border-radius: 0.53333rem;
  border: 0.3rem solid #0D47A1;
}

@media (min-width: 1024px) {
  .checkbox-container .checkbox .box {
    border-radius: 0.20833rem;
    border-width: 0.05208rem;
    position: relative;
    top: 0.25rem;
  }
}

.checkbox-container p {
  font-size: 3.73333rem;
  color: #0D47A1;
  text-align: right;
}

@media (min-width: 1024px) {
  .checkbox-container p {
    font-size: 0.83333rem;
  }
}

#popup-bg-desk {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

#popup-bg-desk.on {
  opacity: 1;
}

#rec-popup, #all-rec-popup {
  background-image: url("../assets/img/bg.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 8.84667rem 9.86667rem 13.33333rem;
}

@media (min-width: 1024px) {
  #rec-popup {
    width: 31.25rem;
    min-height: initial;
    top: 17rem;
    right: 50%;
    left: initial;
    -webkit-transform: translate(50%, 0);
            transform: translate(50%, 0);
    padding: 2.71333rem 2.66667rem 0;
    -webkit-box-shadow: 0px 12px 24px #0000001A;
            box-shadow: 0px 12px 24px #0000001A;
  }
}

#rec-popup.bmi p {
  width: 100%;
  margin-bottom: initial;
}

#rec-popup.bmi p br:first-of-type {
  display: none;
}

@media (min-width: 1024px) {
  #rec-popup.bmi p br:last-of-type {
    display: none;
  }
}

#rec-popup.bmi .bmi-result-container {
  margin-top: 15rem;
  margin-right: 17rem;
}

@media (min-width: 1024px) {
  #rec-popup.bmi .bmi-result-container {
    margin-top: 8rem;
    margin-right: 8rem;
  }
}

#rec-popup img {
  width: 12.69067rem;
  height: 12.85867rem;
  margin-top: 20rem;
  margin-bottom: 4.008rem;
}

@media (min-width: 1024px) {
  #rec-popup img {
    width: 2.8526rem;
    height: 2.8901rem;
    margin-top: 2rem;
    margin-bottom: 0.34167rem;
  }
}

#rec-popup h3 {
  font-size: 4rem;
  color: #B02D89;
  margin-bottom: 11.8rem;
}

@media (min-width: 1024px) {
  #rec-popup h3 {
    width: 15.10417rem;
    font-size: 2rem;
    margin-bottom: 1.77083rem;
  }
}

#rec-popup p, #rec-popup a {
  font-size: 4rem;
  text-align: right;
  margin-bottom: 5.33333rem;
}

@media (min-width: 1024px) {
  #rec-popup p, #rec-popup a {
    font-size: 0.9375rem;
    margin-bottom: 1.45833rem;
  }
}

#rec-popup p {
  color: #000;
}

#rec-popup a {
  color: #0D47A1;
  text-decoration: underline;
}

#rec-popup #rec-pop-links, #rec-popup #rec-pop-links2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: auto;
}

#rec-popup .bmi-result {
  width: 50rem;
  position: relative;
  bottom: 6rem;
}

@media (min-width: 1024px) {
  #rec-popup .bmi-result {
    width: 10.09688rem;
  }
}

#rec-popup .bmi-result .line-container .line {
  background-color: #000;
}

#rec-popup .bmi-result .line-container h5 {
  color: #000;
}

#all-rec-popup h4 {
  font-size: 5.33333rem;
  color: #B02D89;
  margin-top: 15rem;
  margin-bottom: 4rem;
}

@media (min-width: 1024px) {
  #all-rec-popup h4 {
    font-size: 2rem;
    text-align: center;
    margin-top: initial;
  }
}

#all-rec-popup .all-rec {
  width: 100%;
  margin-bottom: 15rem;
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec {
    width: 30rem;
  }
}

#all-rec-popup .all-rec.on {
  display: none;
}

#all-rec-popup .all-rec .rec-container {
  width: 100%;
  border-bottom: 0.13333rem solid #00000033;
  padding: 5rem 0;
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec .rec-container {
    border-bottom-width: 0.05208rem;
    padding: 1.2rem 0;
  }
}

#all-rec-popup .all-rec .rec-container.on .rec-content {
  max-height: 100rem;
  opacity: 1;
  pointer-events: initial;
}

#all-rec-popup .all-rec .rec-container.on .rec-title svg {
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}

#all-rec-popup .all-rec .rec-container p, #all-rec-popup .all-rec .rec-container a {
  font-size: 4rem;
  text-align: right;
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec .rec-container p, #all-rec-popup .all-rec .rec-container a {
    font-size: 0.9375rem;
  }
}

#all-rec-popup .all-rec .rec-container p {
  color: #000;
}

#all-rec-popup .all-rec .rec-container a {
  display: block;
  color: #0D47A1;
  text-decoration: underline;
  margin-bottom: 5rem;
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec .rec-container a {
    margin-bottom: 2rem;
  }
}

#all-rec-popup .all-rec .rec-container .rec-title {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec .rec-container .rec-title {
    cursor: pointer;
  }
}

#all-rec-popup .all-rec .rec-container .rec-title img {
  width: 6rem;
  height: 6rem;
  margin-left: 4rem;
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec .rec-container .rec-title img {
    width: 2.34375rem;
    height: 2.34375rem;
    margin-left: 1rem;
  }
}

#all-rec-popup .all-rec .rec-container .rec-title svg {
  width: 4rem;
  height: 2rem;
  margin-right: auto;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec .rec-container .rec-title svg {
    width: 1.6rem;
    height: 0.8rem;
  }
}

#all-rec-popup .all-rec .rec-container .rec-content {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow-y: hidden;
  -webkit-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}

#all-rec-popup .all-rec .rec-container .rec-content p {
  color: #464343;
  padding-top: 6rem;
  margin-bottom: 5rem;
}

@media (min-width: 1024px) {
  #all-rec-popup .all-rec .rec-container .rec-content p {
    padding-top: 3rem;
    margin-bottom: 1rem;
  }
}

#all-rec-popup #all-rec-error {
  display: none;
}

#all-rec-popup #all-rec-error.on {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#all-rec-popup #all-rec-error.on h4 {
  margin-bottom: 5rem;
  color: #0D47A1;
}

@media (min-width: 1024px) {
  #all-rec-popup #all-rec-error.on h4 {
    margin-bottom: 1.5rem;
  }
}

#all-rec-popup #all-rec-error.on a {
  font-size: 5.33333rem;
  color: #0D47A1;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  #all-rec-popup #all-rec-error.on a {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  #all-rec-popup .close {
    top: 5rem;
    right: 28rem;
  }
}

.field {
  width: 100%;
  height: 13.33333rem;
  color: #fff;
  border-radius: 6.66667rem;
  margin-top: 10.66667rem;
  margin-bottom: 3.73333rem;
  position: relative;
}

@media (min-width: 1024px) {
  .field {
    height: 2.76042rem;
    border-radius: 2.60417rem;
    margin-top: 1.875rem;
    margin-bottom: 1.09375rem;
  }
}

.field input, .field select {
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-size: 4rem;
  color: #fff;
  padding: 4rem;
  border: none;
  border-radius: 6.66667rem;
  border: 0.3rem solid #fff;
  outline: none;
}

@media (min-width: 1024px) {
  .field input, .field select {
    font-size: 0.9375rem;
    padding: 0.67708rem 1.04167rem;
    border-width: 0.05208rem;
  }
}

.field input::-webkit-input-placeholder, .field select::-webkit-input-placeholder {
  color: inherit;
}

.field input:-ms-input-placeholder, .field select:-ms-input-placeholder {
  color: inherit;
}

.field input::-ms-input-placeholder, .field select::-ms-input-placeholder {
  color: inherit;
}

.field input::placeholder, .field select::placeholder {
  color: inherit;
}

.field select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.field select option {
  width: 100%;
  background-color: #0D47A1;
  color: #fff;
}

.field span {
  display: none;
  font-size: 4rem;
  color: red;
  position: absolute;
  top: 50%;
  left: 5rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.field span.on {
  display: initial;
}

@media (min-width: 1024px) {
  .field span {
    font-size: 0.83333rem;
  }
}

.field label {
  background-color: #0D47A1;
  color: #fff;
  font-size: 4rem;
  padding: 0 1.5rem;
  position: absolute;
  top: -3rem;
  right: 7rem;
}

@media (min-width: 1024px) {
  .field label {
    font-size: 0.83333rem;
    font-weight: 300;
    padding: 0 0.3rem;
    top: -0.6rem;
    right: 2rem;
  }
}

.field p, .field .delete {
  position: absolute;
  bottom: 50%;
  left: 4rem;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}

@media (min-width: 1024px) {
  .field p, .field .delete {
    left: 0.78125rem;
  }
}

.field p {
  font-size: 4rem;
  color: #fff;
}

@media (min-width: 1024px) {
  .field p {
    font-size: 0.9375rem;
  }
}

.field .delete {
  width: 5.33333rem;
  height: 5.33333rem;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .field .delete {
    width: 1.04167rem;
    height: 1.04167rem;
  }
}

.btn {
  width: 47.2rem;
  height: 13.33333rem;
  background-color: #B02D89;
  font-size: 4rem;
  color: #fff;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: none;
  border-radius: 6.66667rem;
  margin-top: auto;
}

@media (min-width: 1024px) {
  .btn {
    width: 11.97917rem;
    height: 2.76042rem;
    font-size: 0.9375rem;
    border-radius: 2.60417rem;
  }
}

.btn.next-btn {
  display: none;
}

.btn.next-btn.on {
  display: block;
}

.btn.blue {
  background-color: #2964B3;
}

.thanks-name {
  font-size: 6rem;
  font-weight: 700;
  color: #000;
}

@media (min-width: 1024px) {
  .thanks-name {
    font-size: 2.3rem;
  }
}

.loader-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
}

.loader-container.on {
  opacity: 0.7;
  pointer-events: initial;
}

.loader-container .loader {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  position: absolute;
  right: 50%;
  top: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  z-index: 9999;
}

@media (max-width: 1024px) {
  .loader-container .loader {
    width: 10rem;
    height: 10rem;
  }
}

.loader-container .loader div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  position: absolute;
  width: 3rem;
  height: 3rem;
  border: 0.4rem solid #fff;
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #2964B3 transparent transparent transparent;
}

@media (max-width: 1024px) {
  .loader-container .loader div {
    width: 10rem;
    height: 10rem;
    border-width: 1.5rem;
  }
}

.loader-container .loader div:nth-child(1) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

.loader-container .loader div:nth-child(2) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

.loader-container .loader div:nth-child(3) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}

@-webkit-keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*# sourceMappingURL=styles.css.map */