#content {
  margin-top: 15px; }

.survey-description {
  text-align: justify; }
  @media (min-width: 561px) {
    .survey-description {
      margin: 80px auto 20px;
      width: 60%; } }

.chooseText {
  font-size: calc(10px + 1.8vw); }

.startBtn {
  text-align: center;
  margin: 70px auto 0;
  padding-bottom: 100px; }
  .startBtn a:hover {
    cursor: pointer; }
    .startBtn a:hover img {
      cursor: pointer;
      -moz-transform: translate(0px, -10px);
      -ms-transform: translate(0px, -10px);
      -o-transform: translate(0px, -10px);
      -webkit-transform: translate(0px, -10px);
      transform: translate(0px, -10px); }
  .startBtn a img {
    max-width: 50vw; }

.nextButton {
  text-align: center;
  margin: 20px auto 50px;
  max-width: 60%; }
  .nextButton .nextQuestion {
    background: none;
    border: none; }
    .nextButton .nextQuestion img {
      width: 100%;
      height: auto; }
    .nextButton .nextQuestion:hover {
      -moz-transform: translate(0px, -10px);
      -ms-transform: translate(0px, -10px);
      -o-transform: translate(0px, -10px);
      -webkit-transform: translate(0px, -10px);
      transform: translate(0px, -10px); }
  @media (min-width: 561px) {
    .nextButton {
      max-width: 40%; } }

@media (min-width: 561px) {
  .childNextButton {
    max-width: 19%; } }

.childBtn, .adultBtn {
  background: none;
  border: none;
  outline: none; }
  .childBtn img, .adultBtn img {
    max-width: 384px;
    width: 100%; }
  .childBtn:hover img, .adultBtn:hover img {
    transition: 0.3s;
    transform: rotate(-5deg); }

.btnPressed {
  transition: 0.3s;
  transform: rotate(-5deg); }

.adult-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../images/survey/adultQ-plate.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top;
  margin: 0 auto;
  width: 90vw; }
  @media (min-width: 560px) {
    .adult-question {
      width: 80vw; } }
  @media (min-width: 1200px) {
    .adult-question {
      width: 55vw; } }
  .adult-question.result {
    padding-bottom: 30px;
    margin-bottom: 10px; }
  .adult-question .questionNum {
    font-size: calc(10px + 2vw);
    padding: 4px 30px;
    color: #ffffff;
    background-image: url("../images/survey/bg_question_num.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
    min-width: 140px;
    height: 60px;
    text-align: center; }
    @media (min-width: 768px) {
      .adult-question .questionNum {
        padding: 0 50px;
        height: 110px; } }
  .adult-question .questionContainer {
    margin: 0 auto;
    width: 85%; }
    @media (min-width: 768px) {
      .adult-question .questionContainer {
        width: unset; } }
    .adult-question .questionContainer .questionOption.pickedAnswer {
      transform: translate(0px, -5px) rotate(-2deg); }
      .adult-question .questionContainer .questionOption.pickedAnswer .questionOption-text {
        color: #02b660; }
    .adult-question .questionContainer .questionTitle {
      font-weight: bold;
      font-size: clamp(16px, 2vw, 32px);
      padding-bottom: 10px;
      margin-bottom: 0; }
      @media (min-width: 992px) {
        .adult-question .questionContainer .questionTitle {
          max-width: 45vw; } }
    .adult-question .questionContainer .questionOption {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 70vw; }
      @media (min-width: 768px) {
        .adult-question .questionContainer .questionOption {
          width: unset; } }
      .adult-question .questionContainer .questionOption input {
        appearance: inherit; }
      .adult-question .questionContainer .questionOption label {
        display: flex; }
      .adult-question .questionContainer .questionOption-img, .adult-question .questionContainer .questionOption-text {
        display: flex;
        justify-content: center;
        align-items: center; }
        .adult-question .questionContainer .questionOption-img > div, .adult-question .questionContainer .questionOption-text > div {
          font-size: clamp(18px, 3vw, 24px); }
      .adult-question .questionContainer .questionOption-img {
        width: 7vw;
        max-width: 50px;
        height: 5vw;
        max-height: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        align-self: center; }
        @media (min-width: 768px) {
          .adult-question .questionContainer .questionOption-img {
            width: 10vw;
            max-width: 83px; } }
      .adult-question .questionContainer .questionOption-text {
        width: 60vw;
        margin-right: 3vw;
        min-height: 7vw;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        justify-content: flex-start;
        margin-left: 0.5vw;
        padding-left: 1vw; }
        .adult-question .questionContainer .questionOption-text > div {
          padding: 0 1vw;
          max-height: 100%;
          overflow: hidden; }
        @media (min-width: 768px) {
          .adult-question .questionContainer .questionOption-text {
            width: 30vw;
            min-height: unset;
            max-width: 526px;
            max-height: 88px;
            background-size: 100% 100%; } }
    .adult-question .questionContainer .answeredOption {
      width: 7vw;
      max-width: 50px;
      height: 5vw;
      max-height: 50px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
    .adult-question .questionContainer .questionAnswerResult {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px; }
      .adult-question .questionContainer .questionAnswerResult > div {
        display: flex;
        margin-bottom: 10px; }
      .adult-question .questionContainer .questionAnswerResult-img, .adult-question .questionContainer .questionAnswerResult-text {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center; }
      .adult-question .questionContainer .questionAnswerResult-img {
        width: 10vw;
        max-width: 83px;
        height: 5vw;
        max-height: 88px; }
      .adult-question .questionContainer .questionAnswerResult-text {
        width: 30vw;
        max-width: 526px;
        height: 5vw;
        max-height: 88px;
        justify-content: flex-start;
        margin-left: 0.5vw;
        padding: 0 1vw;
        overflow: hidden; }
      .adult-question .questionContainer .questionAnswerResult .row-child {
        margin: 10px 15px; }
      .adult-question .questionContainer .questionAnswerResult .row-adult {
        margin: 10px 15px; }
      .adult-question .questionContainer .questionAnswerResult .adultResult-person {
        display: flex;
        align-items: center; }
      .adult-question .questionContainer .questionAnswerResult .adultResult-bar-container {
        margin-left: 0.5vw;
        padding-left: 10px;
        text-align: left;
        flex: 5;
        display: flex; }
        @media (min-width: 560px) {
          .adult-question .questionContainer .questionAnswerResult .adultResult-bar-container {
            flex: 6; } }
        .adult-question .questionContainer .questionAnswerResult .adultResult-bar-container .adultResult-bar {
          background-color: #FDD015;
          border: 4px solid #FEA700;
          border-radius: 31px;
          margin-top: -5px;
          margin-right: 10px;
          height: 25px; }
          @media (min-width: 560px) {
            .adult-question .questionContainer .questionAnswerResult .adultResult-bar-container .adultResult-bar {
              height: 40px; } }
          .adult-question .questionContainer .questionAnswerResult .adultResult-bar-container .adultResult-bar.adultResult {
            background-color: #03b66d;
            border: 4px solid #02a060; }

.child-question {
  position: relative; }
  .child-question input {
    appearance: inherit; }
  .child-question .questionNum {
    position: relative;
    margin-top: 50px;
    width: auto;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #ffffff;
    font-size: clamp(20px, 12vw, 45px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; }
    .child-question .questionNum div {
      width: 100%; }
    .child-question .questionNum span {
      font-size: 1.8em; }
  .child-question .questionContainer {
    position: relative;
    margin-top: -60px;
    z-index: 0; }
  .child-question .questionTitle {
    position: relative;
    width: 90vw;
    height: 55vw;
    max-width: 100%;
    max-height: 374px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; }
    .child-question .questionTitle div {
      padding-top: 1vw;
      width: 50vw;
      font-size: clamp(18px, 5vw, 40px); }
      @media (min-width: 768px) {
        .child-question .questionTitle div {
          max-width: 450px; } }
    .child-question .questionTitle img {
      position: absolute;
      right: 0;
      top: -4%;
      width: 20vw; }
      @media (min-width: 768px) {
        .child-question .questionTitle img {
          top: 13%;
          right: 5%;
          width: 15vw; } }
      @media (min-width: 1200px) {
        .child-question .questionTitle img {
          top: 15%;
          right: 10%;
          width: 15vw; } }
      @media (min-width: 1400px) {
        .child-question .questionTitle img {
          top: 13%;
          right: 15%;
          width: 15vw; } }
  .child-question .questionOption label {
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("../images/survey/child-answer.png");
    width: 60vw;
    height: calc(60vw / 45 * 28);
    position: relative; }
    .child-question .questionOption label.selected {
      background-image: url("../images/survey/child-answer-selected.png"); }
      .child-question .questionOption label.selected .optionValue {
        color: #02b660; }
    @media (min-width: 530px) {
      .child-question .questionOption label {
        width: 45vw;
        height: calc(45vw / 45 * 28); } }
    @media (min-width: 992px) {
      .child-question .questionOption label {
        max-width: 314px;
        height: 30vw;
        max-height: 185px; } }
    .child-question .questionOption label .optionLetter {
      position: absolute;
      left: 12%;
      top: 13%;
      padding: 0;
      font-size: 6vw; }
      @media (min-width: 530px) {
        .child-question .questionOption label .optionLetter {
          left: 13%;
          top: 14%;
          font-size: 4vw; } }
      @media (min-width: 992px) {
        .child-question .questionOption label .optionLetter {
          left: 14.5%;
          top: 13%;
          font-size: clamp(18px, 6vw, 30px); } }
    .child-question .questionOption label .optionValue {
      width: 78%;
      padding: 10px 0 0 0;
      text-align: justify;
      font-size: clamp(18px, 5vw, 24px);
      text-indent: 25%; }
  .child-question .child-answer-section {
    display: flex;
    justify-content: center;
    position: relative; }
    @media (min-width: 992px) {
      .child-question .child-answer-section {
        margin-left: 300px; } }
    .child-question .child-answer-section .child-options-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      position: relative; }
      @media (min-width: 992px) {
        .child-question .child-answer-section .child-options-container {
          width: 650px; } }
      .child-question .child-answer-section .child-options-container .questionOption.pickedAnswer {
        transform: translate(0px, -15px) rotate(-5deg); }
      .child-question .child-answer-section .child-options-container .questionOption {
        z-index: 3; }
        .child-question .child-answer-section .child-options-container .questionOption:hover label {
          cursor: pointer;
          -moz-transform: translate(0px, -15px) rotate(-5deg);
          -ms-transform: translate(0px, -15px) rotate(-5deg);
          -o-transform: translate(0px, -15px) rotate(-5deg);
          -webkit-transform: translate(0px, -15px) rotate(-5deg);
          transform: translate(0px, -15px) rotate(-5deg); }
        .child-question .child-answer-section .child-options-container .questionOption input[type=radio] {
          height: 0px;
          display: none; }
      .child-question .child-answer-section .child-options-container img {
        position: absolute;
        width: 20vw;
        z-index: 2;
        left: 8%;
        top: -8%; }
        @media (min-width: 992px) {
          .child-question .child-answer-section .child-options-container img {
            width: 15vw;
            left: -15vw;
            top: 0; } }

.adultResultContainer {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .adultResultContainer .msg {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px; }

.childResultContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100px; }
  .childResultContainer .msg {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px; }
  .childResultContainer .child-result {
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url("../images/survey/child-question-bg.png");
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    width: 80vw;
    max-width: 1180px;
    padding-top: 15px;
    padding-bottom: 60px;
    align-items: flex-start;
    position: relative; }
    @media (min-width: 440px) {
      .childResultContainer .child-result {
        padding-top: 35px; } }
    @media (min-width: 768px) {
      .childResultContainer .child-result {
        min-height: 500px;
        padding-top: 65px;
        margin-bottom: 60px;
        padding-bottom: 70px; } }
    .childResultContainer .child-result .questionNum {
      position: absolute;
      top: -5%;
      left: 8%;
      font-size: calc(12px + 2vw);
      color: #ffffff;
      background-image: url("../images/survey/bg_question_num.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: top;
      width: 35vw;
      height: calc(35vw * 0.32);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      @media (min-width: 768px) {
        .childResultContainer .child-result .questionNum {
          left: 15%;
          width: 23vw;
          height: calc(23vw * 0.32); } }
      @media (min-width: 1200px) {
        .childResultContainer .child-result .questionNum {
          width: 15vw;
          height: calc(15vw * 0.32); } }
  .childResultContainer article {
    color: #000000;
    width: 75%; }
    .childResultContainer article .child-result--question {
      text-align: center;
      margin-top: 10px;
      padding-bottom: 10px;
      font-size: clamp(20px, 2.5vw, 35px); }
    .childResultContainer article .child-result--answer {
      display: flex;
      flex-direction: row;
      align-items: flex-start; }
      @media (min-width: 1200px) {
        .childResultContainer article .child-result--answer {
          flex-direction: row; } }
      .childResultContainer article .child-result--answer .childAnswer-choice {
        flex: 4;
        font-size: 36px; }
        .childResultContainer article .child-result--answer .childAnswer-choice .childAnswer-choiceImg {
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 28px;
          margin-bottom: 15px; }
          .childResultContainer article .child-result--answer .childAnswer-choice .childAnswer-choiceImg .answerText {
            text-align: left;
            font-size: clamp(12px, 1.8vw, 22px);
            border-radius: 10px;
            border: 4px solid #9d1a08;
            background: #fcefdc;
            padding: 0 15px;
            color: #000000; }
        .childResultContainer article .child-result--answer .childAnswer-choice .yourAns {
          font-size: clamp(12px, 2vw, 24px); }
          @media (min-width: 768px) {
            .childResultContainer article .child-result--answer .childAnswer-choice .yourAns {
              text-align: left; } }
      .childResultContainer article .child-result--answer .childAnswer-text {
        flex: 6;
        margin-left: 12px; }
  .childResultContainer .childAnswer-text {
    flex: 6;
    background-color: #ffffff;
    border: 5px solid #8A5B2D;
    border-radius: 10px;
    padding: 0.5vw 1vw;
    font-size: clamp(16px, 2vw, 25px);
    min-height: 80px;
    overflow: auto; }
    @media (min-width: 768px) {
      .childResultContainer .childAnswer-text {
        min-height: 200px; } }

.chartText {
  display: flex;
  padding-top: 0.7vw;
  color: #8A5B2D;
  font-size: clamp(12px, 2vw, 18px); }
  @media (min-width: 768px) {
    .chartText {
      font-size: 22px; } }
  @media (min-width: 992px) {
    .chartText {
      font-size: 24px; } }
  @media (min-width: 1200px) {
    .chartText {
      font-size: 24px; } }
  .chartText--A, .chartText--B, .chartText--C, .chartText--D {
    border-radius: 27px;
    border: 4px solid #8A5B2D;
    padding: 0 15px;
    text-align: center;
    color: #000000;
    margin-top: -5px;
    margin-left: 5px; }
  .chartText--A {
    background-color: #B2DF8A; }
  .chartText--B {
    background-color: #FF9D00; }
  .chartText--C {
    background-color: #96f5db; }
  .chartText--D {
    background-color: #d9efe2; }

.chartContainer canvas {
  width: 25vw !important;
  height: 25vw !important;
  max-width: 300px;
  max-height: 300px; }

/*# sourceMappingURL=survey.css.map */