@import url("https://db.onlinewebfonts.com/c/ee4621686709455f83fcba93bd3d9a04?family=Quatro+Slab+W03+UltraBlack");@import url("https://db.onlinewebfonts.com/c/2556d7a29ab01dc80b96eb824a049df6?family=Effra");:root{--assessment-primary-color:#36286d;--assessment-secondary-color:#c6f002;--assessment-accent-color:#c0e400;--assessment-success-color:#16a34a;--assessment-danger-color:#dc2626;--assessment-text-light:#fff;--assessment-text-dark:#000;--assessment-border-radius:0.75rem;--assessment-border-radius-lg:1.75rem;--assessment-transition:0.2s ease;--assessment-shadow:0 4px 10px rgba(0,0,0,.25);--assessment-font-family:"Effra","Helvetica Neue",Helvetica,Arial,sans-serif;--assessment-font-family-secondary:"Quatro Slab W03 UltraBlack","Georgia","Times New Roman",serif;--assessment-animation-duration:1.5s}body:not(.quiz-started){background-color:var(--assessment-primary-color)}body.quiz-ended{background-color:var(--assessment-secondary-color)}.module-assessment-with-design{font-family:var( --assessment-font-family);padding:30px 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;& .heading{font-family:var( --assessment-font-family-secondary);font-size:90px;hyphens:auto;line-height:90px;margin-bottom:20px}& .description{& *{font-size:18px;hyphens:auto;line-height:23px;margin-bottom:40px}}.quiz-start{align-items:center;color:var(--assessment-text-light);display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 80px);text-align:center;.welcome-text{font-size:1.25rem;line-height:1.5;max-width:866px;&>*{color:var(--assessment-text-light)}&>.description{margin:auto;max-width:418px}}& .welcome-animation{flex-shrink:0;margin-bottom:70px;&>img{height:418px;max-height:100%;max-width:100%;width:auto}}.start-button{background:var(--assessment-secondary-color);border:none;border-radius:var(--assessment-border-radius-lg);box-shadow:var(--assessment-shadow);color:var(--assessment-primary-color);cursor:pointer;font-size:30px;line-height:30px;outline-offset:2px;padding:17.5px;transition:all var(--assessment-transition);width:418px;&:focus,&:hover{background:var(--assessment-text-light);box-shadow:0 6px 16px rgba(0,0,0,.3);transform:translateY(-2px)}&:focus{outline:2px solid var(--assessment-text-light)}&:active{transform:translateY(0)}}}#questionScreen{display:none}.question-screen{display:flex;flex-direction:column;margin:0 auto;min-height:calc(100vh - 80px);position:relative;width:100%;.top-text{text-align:start;&>p{color:var(--assessment-text-dark);font-size:18px;font-weight:700;line-height:23px;margin-bottom:11px}& .progress{background:#f3f3f3;border-radius:9999px;box-shadow:inset 0 1px 2px rgba(0,0,0,.06);height:20px;margin:.75rem 0 60px;overflow:hidden;position:relative;& .progress-fill{background:#2f2f35;border-radius:inherit;box-shadow:2px 1px 4px #777777b8;height:100%;left:0;position:absolute;top:0;transition:width .3s ease;width:0}& .progress-handle{display:none}}}.question-card{display:none;flex:1 1 auto;height:100%;position:relative;touch-action:pan-y pinch-zoom;transition:transform .3s ease-out,opacity .3s ease;width:100%;will-change:transform,opacity;&.active{display:block}& .question-text,& h3{color:var(--assessment-text-dark);font-weight:700;margin-bottom:40px;text-align:center}}}.mini-instruction{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:auto;text-align:center;& .upper-text{align-items:center;color:var(--assessment-text-dark);display:flex;flex-direction:row;font-size:15px;font-weight:700;gap:5px;line-height:20px;margin-bottom:7px;& .instruction-lottie{height:86px;width:74px}}& .bottom-text{color:var(--assessment-text-dark);font-size:18px;font-weight:700;line-height:23px}}.question-images{display:flex;flex-direction:row;gap:30px;justify-content:center;margin-bottom:40px;& .question-image{border-radius:var(--assessment-border-radius);box-shadow:0 4px 8px rgba(0,0,0,.1);height:418px;object-fit:cover;object-position:center;transition:transform var(--assessment-transition),box-shadow var(--assessment-transition);-moz-user-select:none;-webkit-user-select:none;user-select:none;width:418px;-webkit-user-drag:none;user-drag:none}.choice .question-images{& img{cursor:pointer;margin:5px;&:focus,&:hover{box-shadow:0 6px 16px rgba(0,0,0,.2);outline:2px solid var(--assessment-secondary-color);outline-offset:2px;transform:scale(1.05)}}}.swipe_image .question-images{& img{pointer-events:none}}}.card-error{background:var(--assessment-danger-color);border-radius:4px;bottom:15px;box-shadow:var(--assessment-shadow);color:var(--assessment-text-light);font-size:.8rem;left:50%;padding:.5rem 1rem;position:absolute;transform:translateX(-50%);z-index:10}.result{align-items:center;border-radius:var(--assessment-border-radius);color:var(--assessment-text-dark);display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 80px);text-align:center;& .result-headline{font-family:var(--assessment-font-family-secondary);font-weight:700;margin-bottom:35px;max-width:866px}& .result-main{margin-bottom:2rem}}.progress-circle{--deg:0deg;align-items:center;background:conic-gradient(var(--assessment-text-dark) var(--deg),var(--assessment-text-light) var(--deg) 1turn);border-radius:50%;box-shadow:var(--assessment-shadow);display:flex;height:290px;justify-content:center;margin:0 auto 1.8rem;position:relative;width:290px;&:before{background:var(--assessment-text-light);border-radius:50%;bottom:8px;content:"";left:8px;position:absolute;right:8px;top:8px}& span{color:var(--assessment-text-dark);font-family:var(--assessment-font-family-secondary);font-size:78px;font-weight:700;line-height:89px;position:relative;z-index:1}}.result-list{display:flex;flex-direction:row;gap:75px;justify-content:center;list-style:none;margin:1rem auto 2rem;max-width:300px;padding:0;text-align:left;& li{align-items:center;border-radius:var(--assessment-border-radius);display:flex;gap:15px;margin-bottom:.75rem;padding:.5rem;& .job,& .ring-text{font-family:var(--assessment-font-family-secondary);font-size:25px;font-weight:400;line-height:30px}& .ring-text{position:relative;z-index:1}}& .ring{--deg:0deg;align-items:center;background:conic-gradient(var(--assessment-text-dark) var(--deg),var(--assessment-text-light) var(--deg) 1turn);border-radius:50%;box-sizing:border-box;color:var(--assessment-text-dark);display:flex;flex-shrink:0;font-size:.75rem;font-weight:600;height:80px;justify-content:center;padding:15px;position:relative;width:80px;&:before{background:var(--assessment-secondary-color);border-radius:50%;bottom:4px;content:"";left:4px;position:absolute;right:4px;top:4px}}}.cta{background-color:var(--assessment-primary-color);border:0;border-radius:35px;box-shadow:var(--assessment-shadow);color:var(--assessment-text-light);cursor:pointer;display:inline-block;font-size:30px;font-weight:700;line-height:30px;margin-bottom:1.2rem;outline-offset:2px;padding:17px 40px;text-decoration:none;transition:all var(--assessment-transition);&:focus,&:hover{background:var(--assessment-text-light);box-shadow:0 6px 16px rgba(0,0,0,.3);color:var(--assessment-primary-color);transform:translateY(-2px)}&:focus{outline:2px solid var(--assessment-text-light)}}}@media (max-width:768px){.module-assessment-with-design{padding:37px 26px;& .heading{font-size:40px;line-height:48px;margin-bottom:10px}& .description{& *{font-size:15px;line-height:17px;margin-bottom:40px}}.quiz-start{.welcome-text{font-size:1.25rem;line-height:1.5;width:100%;&>*{color:var(--assessment-text-light)}&>.description{margin:auto;width:100%}}& .welcome-animation{margin-bottom:33px;&>img{width:100%}}.start-button{font-size:20px;line-height:24px;padding:15px;width:100%}}.question-screen{.top-text{text-align:start;&>p{font-size:15px;line-height:17px;margin-bottom:8px}& .progress{height:12px;margin:0 0 102px;position:relative}}.question-card{&.active{display:block}& .question-text,& h3{margin-bottom:50px}}}.mini-instruction{& .upper-text{font-size:12px;gap:7px;line-height:15px;margin-bottom:7px;& .instruction-lottie{height:43px;width:37px}}& .bottom-text{font-size:15px;line-height:17px}}.question-images{gap:10px;margin-bottom:50px;& .question-image{height:156px;width:156px}.choice .question-images{& img{cursor:pointer;margin:5px;&:focus,&:hover{box-shadow:0 6px 16px rgba(0,0,0,.2);outline:2px solid var(--assessment-secondary-color);outline-offset:2px;transform:scale(1.05)}}}}.card-error{bottom:15px;font-size:.8rem;left:50%;padding:.5rem 1rem}.result{& .result-headline{margin-bottom:30px;max-width:866px}}.progress-circle{height:173px;width:173px;& span{font-size:50px;line-height:58px}}.result-list{flex-direction:column;gap:15px;margin:1rem auto 2rem;max-width:100%;& li{gap:7.5px;margin-bottom:0;padding:7.5px;& .job{font-size:14px;line-height:14px}& .ring-text{font-size:12px;line-height:12px}}& .ring{--deg:0deg;font-size:.75rem;height:40px;padding:15px;width:40px}}.cta{border-radius:35px;font-size:20px;line-height:24px;padding:17px 40px}}}@keyframes swipe-hint{0%,to{transform:translateX(0) rotate(0deg)}30%{transform:translateX(-40px) rotate(-3deg)}60%{transform:translateX(40px) rotate(3deg)}}.question-card.hint{animation:swipe-hint .8s ease-in-out}@keyframes quiz-shake{0%,to{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}.question-card.shake{animation:quiz-shake .25s ease-in-out}#restartQuiz,.restart{background:none;border:none;border-radius:var(--assessment-border-radius);color:var(--assessment-text-dark);cursor:pointer;font-size:1rem;font-weight:600;outline-offset:2px;padding:.5rem 1rem;text-decoration:underline;text-decoration:none;transition:color var(--assessment-transition)}#restartQuiz:focus,#restartQuiz:hover,.restart:focus,.restart:hover{background:rgba(0,0,0,.1);color:#333}#restartQuiz:focus{outline:2px solid var(--assessment-text-dark)}.hidden{display:none!important}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}@media (prefers-contrast:high){.question-card{border:2px solid var(--assessment-text-dark)}.progress-fill{background:var(--assessment-text-dark)}.choice .question-images img:focus{outline:3px solid var(--assessment-text-dark)}}@media (prefers-reduced-motion:reduce){:root{--assessment-animation-duration:0.3s}.question-card{transition:opacity .3s ease}.question-card.hint,.question-card.shake{animation:none}.answer-button:hover,.choice .question-images img:hover,.cta:hover,.start-button:hover{transform:none}}@media print{.question-screen,.quiz-start{display:none!important}.result{background:#fff!important;color:#000!important;padding:1rem!important}.cta,.restart{display:none!important}}