@charset "UTF-8";
* {
  -webkit-touch-callout: none;
  /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;
  /* prevent webkit from resizing text to fit */
  -webkit-tap-highlight-color: rgba(113, 19, 113, 0.05);
  /* make transparent link selection, adjust opacity 0 to 1.0 */
  -webkit-user-select: none;
  /* prevent copy paste, to allow, change 'none' to 'text' */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: ml-regular, sans-sans-serif;
  position: fixed;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: #1d1d1d;
  color: #53565a;
}

/* 
h1, h2{
	padding: 0;
	margin: 0;
}

h1, .large{
	color: #14AF28;
	font-family: ml-bold, sans-serif;
	font-weight: normal;
	font-size: 128px;
	line-height: 114px;
	letter-spacing: -0.02em;
}

h2{
	 font-family: ml-bold, sans-serif;
	font-weight: normal;
	font-size: 33px;
	line-height: 36px;
}

.s1{
	font-family: ml-light, sans-serif;
	font-size: 65px;
	line-height: 80px;
	letter-spacing: -0.02em;
	padding-bottom: 28px;
}
.s2{
	font-family: ml-light, sans-serif;
	font-size: 34px;
	line-height: 50px;
	letter-spacing: -0.02em;
	padding-bottom: 28px;
}
.s3{
	font-family: ml-light, sans-serif;
	font-size: 36px;
	line-height: 46px;
	padding-bottom: 30px;
}
.title{
	position: absolute;
	font-family: ml-bold, sans-serif;
	color: #14AF28;
	font-size: 26px;
	line-height: 25px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	left: 30px;
	top: 33px;
	z-index: 5;
}
.footnote{
	position: absolute;
	bottom: 160px;
	left: 60px;
}
.footnote p{
	font-size: 12.5px;
	line-height: 16px;
	letter-spacing: -0.02em;
}

strong{
	font-family: ml-bold, sans-serif;
	font-weight: normal;
}

.blockquote{
	position: absolute;
}
.blockquote .quote{
	font-family: ml-light, sans-serif;
	font-size: 35px;
	line-height: 42px;
	padding: 10px 60px;
}
.blockquote .quote:before{
	position: absolute;
	content: '‘‘';
	font-family: helvetica neue, helvetica, sans-serif;
	font-weight: normal;
	top: 0;
	left: 0;
	color: #14AF28;
	font-size: 125px;
	line-height: 100px;
}
.blockquote .quote:after{
	position: absolute;
	content: '‘‘';
	font-family: helvetica neue, helvetica, sans-serif;
	font-weight: normal;
	bottom: 0;
	right: 0;
	color: #14AF28;
	font-size: 125px;
	line-height: 270px;
	transform: rotate(180deg);
}
.blockquote .quotee{
	font-size: 24px;
	line-height: 28px;
	padding: 30px 60px 0 60px;
}

.hear{
	color: #3A474A;
	background: url("../img/icon-hear.svg") left center no-repeat;
	background-size: 32px auto;
	padding: 0 0 0 50px;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.02em;
	font-family: ml-bold, sans-serif;
	text-decoration: none;
	display: inline-block;
	margin: 20px 0 0 0;
}

.other-concerns{
	color: #3A474A;
	background: url("../img/icon-other-concerns.svg") left center no-repeat;
	background-size: 44px auto;
	padding: 0 0 0 55px;
	font-size: 24px;
	line-height: 43px;
	letter-spacing: -0.02em;
	font-family: ml-bold, sans-serif;
	text-decoration: none;
	display: inline-block;
	margin: 20px 0 0 0;
}

.read-more{
	color: #3A474A;
	background: url("../img/icon-read-more.svg") left center no-repeat;
	background-size: 40px auto;
	padding: 0 0 0 49px;
	font-size: 24px;
	line-height: 43px;
	letter-spacing: -0.02em;
	font-family: ml-bold, sans-serif;
	text-decoration: none;
	display: inline-block;
	margin: 20px 0 0 0;
}

.skip{
	color: #3A474A;
	background: url("../img/icon-skip.svg") left center no-repeat;
	background-size: 19px auto;
	padding: 0 0 0 30px;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.02em;
	font-family: ml-bold, sans-serif;
	text-decoration: none;
	display: inline-block;
	margin: 20px 0 0 0;
}

.click{
	color: #3A474A;
	background: url("../img/icon-click.svg") center center no-repeat;
	background-size: 100% auto;
	width: 97px;
	height: 97px;
}
.overlay-close{
	display: block;
	position: absolute;
	top: 32px;
	right: 100px;
	background: url("../img/icon-overlay-close.svg") center center no-repeat;
	background-size: 100% auto;
	width: 25px;
	height: 25px;
}
.overlay-close.white{
	background: url("../img/icon-overlay-close-white.svg") center center no-repeat;
	background-size: 100% auto;
} */
.img-scale {
  width: 100%;
  height: auto;
}

.tp-container {
  /* height: 1024px;
  width: 1366px; */
  /** ROB ADDED */
  width: 1112px;
  height: 834px;
  /*width: 1024px;
     height: 768px;
  width: 100%;
     height: 100%;
  min-height: 768px;
  max-height: 1024px;
  min-width: 1024px;
  max-width: 1366px;*/
  position: relative;
  overflow: hidden;
  background: #fff;
}

.abs {
  position: absolute;
}

.temp-bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.copy-wrap {
  width: 100%;
  height: 100%;
}

sub,
sup {
  font-size: 60%;
}

#loading-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #53565a;
}

#loading-screen .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
}

#loading-screen .loading svg {
  margin-bottom: 30px;
}

#loading-screen .logo {
  width: 129px;
  bottom: 38px;
  left: 30px;
}

main {
  position: relative;
  margin: auto;
}

.screen,
.sub-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.screen .image img {
  width: 100%;
  height: auto;
}

#screens .screen,
#screens .sub-screen {
  display: none;
}

#screens .screen.active,
#screens .sub-screen.active {
  display: block;
}

.content-wrap {
  position: relative;
}

@media (orientation: portrait) {
  body {
    transform: rotate(-90deg);
  }
}
.tp-container {
  width: 1112px;
  height: 834px;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.screen svg {
  width: 100%;
  height: auto;
}

svg #Background,
svg #Komet_snow_ {
  pointer-events: none;
}
svg #Read_more_buttons,
svg #Return_to_home_button {
  cursor: pointer;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.overlay.active #question_button {
  cursor: pointer;
}

#Patient_1,
#Patient_2,
#Patient_3 {
  cursor: pointer;
}

g#Return_to_home_button {
  z-index: 500 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
}

.patient-file {
  background: rgba(230, 230, 230, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 800;
  opacity: 0;
  pointer-events: none;
}
.patient-file.active {
  opacity: 1;
  pointer-events: auto;
  transition: 350ms linear all;
}
.patient-file svg {
  height: 100%;
  width: 100%;
}

.patient-file-info {
  position: absolute;
  top: 133px;
  left: 200px;
  overflow: scroll;
  height: 526px;
  width: 717px;
  background: transparent;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
}
.patient-file-info.active {
  opacity: 1;
  pointer-events: auto;
  transition: 350ms linear all;
}
.patient-file-info.patient-file-1-info svg {
  width: 698px;
  height: 100%;
}
.patient-file-info svg {
  width: 700px;
  height: 1379px;
}
.patient-file-info svg g[id^=Patient_file] {
  display: none;
}
.patient-file-info.patient-file-2-info svg {
  height: 816px;
  margin-top: 50px;
}
.patient-file-info.patient-file-3-info svg {
  height: 360px;
  margin-top: 30px;
}

body.file-1-1 .patient-file-1-info g#Patient_file_1 {
  display: block;
}
body.file-1-2 .patient-file-1-info g#Patient_file_2 {
  display: block;
}
body.file-1-3 .patient-file-1-info g#Patient_file_3 {
  display: block;
}
body.file-1-4 .patient-file-1-info g#Patient_file_4 {
  display: block;
}
body.file-1-5 .patient-file-1-info g#Patient_file_5 {
  display: block;
}
body.file-1-6 .patient-file-1-info g#Patient_file_6 {
  display: block;
}
body.file-1-7 .patient-file-1-info g#Patient_file_7 {
  display: block;
}
body.file-1-8 .patient-file-1-info g#Patient_file_8 {
  display: block;
}
body.file-2-1 .patient-file-2-info g#Patient_file_1 {
  display: block;
}
body.file-2-1.file-2-2 #P2Q2 #Patient_file_reminder {
  display: none;
}
body.file-2-2 .patient-file-2-info g#Patient_file_2 {
  display: block;
}
body.file-2-3 .patient-file-2-info g#Patient_file_3 {
  display: block;
}
body.file-2-4 .patient-file-2-info g#Patient_file_4 {
  display: block;
}
body.file-2-5 .patient-file-2-info g#Patient_file_5 {
  display: block;
}
body.file-2-6 .patient-file-2-info g#Patient_file_6 {
  display: block;
}

body.patient-1-finished .first-patient #Patient_1 {
  display: none;
}
body.patient-1-finished #CASE_3_BUTTON {
  display: none;
}
body.patient-2-finished .first-patient #Patient_2 {
  display: none;
}
body.patient-2-finished #CASE_1_BUTTON {
  display: none;
}
body.patient-3-finished .first-patient #Patient_3 {
  display: none;
}
body.patient-3-finished #CASE_2_BUTTON {
  display: none;
}
body.patient-3-finished .patient-file-button-3, body.patient-3-finished .main-home-button-3 {
  display: none;
}

.select-patient {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.main-patient-file-button {
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.main-patient-file-button svg {
  width: 178px;
  height: auto;
}
.main-patient-file-button.active {
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
}
.main-patient-file-button #MasterPatientFile3 #P3Q1 {
  transition: 150ms all linear;
}
.main-patient-file-button #MasterPatientFile3:hover #P3Q1 {
  transform: translateX(-35px);
  transition: 150ms all linear;
}
.main-patient-file-button #MasterPatientFile1 #PatientFile1 {
  transition: 150ms all linear;
}
.main-patient-file-button #MasterPatientFile1:hover #PatientFile1 {
  transform: translateX(-35px);
  transition: 150ms all linear;
}
.main-patient-file-button #MasterPatientFile2 #Patient_file_buttons-2 {
  transition: 150ms all linear;
}
.main-patient-file-button #MasterPatientFile2:hover #Patient_file_buttons-2 {
  transform: translateX(-35px);
  transition: 150ms all linear;
}

.main-home-button {
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.main-home-button svg {
  width: 178px;
  height: auto;
}
.main-home-button.active {
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
}
.main-home-button #MainHomeButton3 .home-btn-3 {
  transition: 150ms all linear;
}
.main-home-button #MainHomeButton3:hover .home-btn-3 {
  transform: translateX(35px);
  transition: 150ms all linear;
}
.main-home-button #MainHomeButton1 #Return_to_home_button {
  transition: 150ms all linear;
}
.main-home-button #MainHomeButton1:hover #Return_to_home_button {
  transform: translateX(35px);
  transition: 150ms all linear;
}
.main-home-button.main-home-button-2.active #MainHomeButton2 .home-btn-2 {
  transition: 150ms all linear;
}
.main-home-button.main-home-button-2.active #MainHomeButton2:hover .home-btn-2 {
  transform: translateX(35px);
  transition: 150ms all linear;
}

g#Read_More_Yellow path,
g#Read_More_Yellow rect,
g#Read_More_Blue path,
g#Read_More_Blue rect,
g#Purple_read_more path,
g#Purple_read_more rect,
g#Read_more_buttons path,
g#Read_more_buttons rect,
g#question_button path,
g#question_button rect,
.patient-1-complete g#Continue_button path,
.patient-1-complete g#Continue_button rect,
.patient-2-complete g#Continue_button path,
.patient-2-complete g#Continue_button rect,
.patient-3-complete g#Continue_button path,
.patient-3-complete g#Continue_button rect,
.both-complete g#Continue_button path,
.both-complete g#Continue_button rect {
  transition: 150ms linear all;
}
g#Read_More_Yellow:hover path,
g#Read_More_Yellow:hover rect,
g#Read_More_Blue:hover path,
g#Read_More_Blue:hover rect,
g#Purple_read_more:hover path,
g#Purple_read_more:hover rect,
g#Read_more_buttons:hover path,
g#Read_more_buttons:hover rect,
g#question_button:hover path,
g#question_button:hover rect,
.patient-1-complete g#Continue_button:hover path,
.patient-1-complete g#Continue_button:hover rect,
.patient-2-complete g#Continue_button:hover path,
.patient-2-complete g#Continue_button:hover rect,
.patient-3-complete g#Continue_button:hover path,
.patient-3-complete g#Continue_button:hover rect,
.both-complete g#Continue_button:hover path,
.both-complete g#Continue_button:hover rect {
  transition: 150ms linear all;
  opacity: 0.6 !important;
}

#Purple_read_more {
  cursor: pointer;
}

.patient-2-complete .patient-2-intro, .patient-2-finished .patient-2-intro {
  display: none;
}
.patient-2-complete .patient-file-button-2, .patient-2-complete .main-home-button-2, .patient-2-finished .patient-file-button-2, .patient-2-finished .main-home-button-2 {
  display: none;
}

.patient-1-complete .first-patient-intro, .patient-1-finished .first-patient-intro {
  display: none;
}
.patient-1-complete .patient-file-button-1, .patient-1-complete .main-home-button-1, .patient-1-finished .patient-file-button-1, .patient-1-finished .main-home-button-1 {
  display: none;
}

.p1q1b {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

#CoffeeMug {
  width: 68px;
  height: auto;
  position: absolute;
  bottom: 77px;
  left: 189px;
}

#FlowerPot {
  position: absolute;
  left: 16px;
  width: 123px;
  bottom: 183px;
}

#WaterCooler {
  position: absolute;
  bottom: 408px;
  right: 254px;
  width: 64px;
}

#CoffeeComplete, #CoffeeCompleteP3, #CoffeeCompleteP2 {
  position: absolute;
  top: 78px;
  right: 173px;
  width: 228px;
}

#CoffeeAllComplete {
  position: absolute;
  top: 85px;
  right: 50px;
  width: 230px;
  height: auto;
}

.screen-2 #DESK {
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.screen-2 #Patient_1_purple_lottie {
  width: 604px;
  position: absolute;
  bottom: 0;
  right: 12px;
  opacity: 0;
}
.screen-2 #Patient_file_purple_lottie {
  width: 450px;
  position: absolute;
  bottom: -3px;
  opacity: 0;
  z-index: 2;
}
.screen-2 #P1Q1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.screen-2 #Hand {
  position: absolute;
  bottom: 0;
  z-index: 1;
  right: 0;
  width: 100%;
}
.screen-2 #Questions_overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}

.screen-21 #Patient_2_yellow_lottie {
  width: 600px;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.screen-21 #DESK {
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.screen-21 #Patient_file_yellow_lottie {
  width: 450px;
  position: absolute;
  bottom: -3px;
  opacity: 0;
  z-index: 2;
}
.screen-21 #SampleHand {
  position: absolute;
  bottom: 0;
  z-index: 1;
  right: 0;
  width: 100%;
}
.screen-21 #P2Q1_overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.screen-21 #Questions_overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}

.screen-31 #Patient_3_blue_lottie {
  width: 495px;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.screen-31 #DESK {
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.screen-31 #P3Q1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.screen-31 #Patient_file_blue_lottie {
  width: 450px;
  position: absolute;
  bottom: -3px;
  opacity: 0;
  z-index: 2;
}
.screen-31 #Microscope {
  position: absolute;
  bottom: 0;
  z-index: 1;
  right: 0;
  width: 100%;
}
.screen-31 #Questions_overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}

.first-patient #Patient_Files,
.first-patient #Patient_file,
.first-patient #Patient_Files_Popup,
.first-patient #Patient_Files_Yellow,
.first-patient #Information_popups,
.first-patient #Return_to_home_button,
.first-patient #First_Patient_Popup,
.first-patient #Second_Patient_Popup,
.first-patient #Patient_Files_Popup_Blue {
  opacity: 0;
  pointer-events: none;
}

#Patient_Files_Popup, #Second_Patient_Popup, #First_Patient_Popup, #Information_popups, #Patient_Files_Popup_Blue {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.close-btn {
  cursor: pointer;
}

.pop-up-not-active {
  opacity: 0;
  pointer-events: none;
}

g#Doctor {
  opacity: 0;
}

.patient-2-intro, .patient-3-intro {
  opacity: 0;
  pointer-events: none;
}
.patient-2-intro #question_button, .patient-3-intro #question_button {
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}
.patient-2-intro .patient-2-file-reminder, .patient-3-intro .patient-2-file-reminder {
  opacity: 0;
}
.patient-2-intro.active #question_button, .patient-3-intro.active #question_button {
  pointer-events: auto;
}

.question-screen #Patient_2, .question-screen #Patient_3, .question-screen #Patient_1 {
  opacity: 0;
}

#CASE_3_BUTTON, #CASE_2_BUTTON, #CASE_1_BUTTON {
  transition: 200ms all linear;
}

#Layer_1:has(#Patient_1:hover) #CASE_3_BUTTON, #Layer_1:has(#Patient_2:hover) #CASE_1_BUTTON, #Layer_1:has(#Patient_3:hover) #CASE_2_BUTTON {
  transform: translateY(45px);
  transition: 200ms all linear;
}

#P2Q1, #P3Q1, #P3Q2 {
  pointer-events: none;
}
#P2Q1.active #Answer_A,
#P2Q1.active #Answer_B,
#P2Q1.active #Answer_B, #P3Q1.active #Answer_A,
#P3Q1.active #Answer_B,
#P3Q1.active #Answer_B, #P3Q2.active #Answer_A,
#P3Q2.active #Answer_B,
#P3Q2.active #Answer_B {
  cursor: pointer;
  pointer-events: auto;
}

.starter-screen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
}

#Patient_file_buttons {
  position: relative;
  pointer-events: auto !important;
  cursor: pointer;
}

.question-screen #Patient_1,
.question-screen #Patient_3,
.question-screen #Patient_Files,
.question-screen #Patient_file,
.question-screen #Overlayed_box,
.question-screen #Answer_A,
.question-screen #Answer_B,
.question-screen #Answer_C,
.question-screen #Answer_D,
.question-screen #Answer_E,
.question-screen #Question,
.question-screen #Question_Number,
.question-screen #Return_to_home_button,
.question-screen #Patient_file_buttons,
.question-screen #Continue_button, .question-screen #Try_again_button, .question-screen #Sample_hand {
  opacity: 0;
  pointer-events: none;
}
.question-screen #Continue_button.active,
.question-screen #Try_again_button.active {
  pointer-events: auto;
  cursor: pointer;
}
.question-screen.questions-active #Answer_A,
.question-screen.questions-active #Answer_B,
.question-screen.questions-active #Answer_C,
.question-screen.questions-active #Answer_D,
.question-screen.questions-active #Answer_E,
.question-screen.questions-active #Return_to_home_button,
.question-screen.questions-active #Patient_file_buttons {
  pointer-events: auto;
  cursor: pointer;
}
.question-screen [id^=MARKING],
.question-screen path[id^=OVERLAY] {
  opacity: 0;
  pointer-events: none;
}

.overlay-questions {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.p1q2-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.p1q2-overlay.active #question_button {
  pointer-events: auto;
  cursor: pointer;
}

.p1q3 #question_button,
.p1q3 #Information_popups {
  opacity: 0;
  pointer-events: none;
}
.p1q3 #question_button.active {
  pointer-events: auto;
  cursor: pointer;
}

.first-patient-intro {
  opacity: 0;
  transition: 150ms linear all;
}
.first-patient-intro.active {
  opacity: 1;
  z-index: 1;
  transition: 150ms linear all;
}
.first-patient-intro.active #question_button {
  pointer-events: auto;
}

.p1q4 #Information_popups,
.p1q4 #question_button {
  opacity: 0;
  pointer-events: none;
}
.p1q4 #Information_popups.active,
.p1q4 #question_button.active {
  cursor: pointer;
  pointer-events: auto;
}

.screen-1 #Return_to_home_button {
  opacity: 0 !important;
  pointer-events: none;
}

.p2q2 #Doctor,
.p2q2 #Information_popups,
.p2q2 #Overlayed_box,
.p2q2 #question_button,
.p2q3 #Doctor,
.p2q3 #Information_popups,
.p2q3 #Overlayed_box,
.p2q3 #question_button,
.p2q4 #Doctor,
.p2q4 #Information_popups,
.p2q4 #Overlayed_box,
.p2q4 #question_button,
.p2q5 #Doctor,
.p2q5 #Information_popups,
.p2q5 #Overlayed_box,
.p2q5 #question_button,
.p2q6 #Doctor,
.p2q6 #Information_popups,
.p2q6 #Overlayed_box,
.p2q6 #question_button,
.p2q7 #Doctor,
.p2q7 #Information_popups,
.p2q7 #Overlayed_box,
.p2q7 #question_button {
  opacity: 0;
}
.p2q2 #question_button.active,
.p2q3 #question_button.active,
.p2q4 #question_button.active,
.p2q5 #question_button.active,
.p2q6 #question_button.active,
.p2q7 #question_button.active {
  pointer-events: auto;
  cursor: pointer;
}

#Overlayed_box rect {
  stroke-width: 0 !important;
}

.p2q2 #Patient_file_reminder, .p2q3 #Patient_file_reminder {
  opacity: 0;
}

.p2q2q,
.p2q3q,
.p2q4q {
  opacity: 1;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.screen.active #Question_Number > path {
  transform-origin: center;
  transform-box: fill-box;
  animation-name: rotate;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.screen.active #Continue_button polygon {
  transition: 150ms linear all;
}
.screen.active #Continue_button:hover polygon {
  transform: translateY(25px);
  transition: 150ms linear all;
}

.patient-1-complete #Information_popups,
.patient-1-complete #Continue_button,
.patient-2-complete #Information_popups,
.patient-2-complete #Continue_button,
.patient-3-complete #Information_popups,
.patient-3-complete #Continue_button,
.both-patients-complete #Information_popups,
.both-patients-complete #Continue_button {
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

.p3q1 #Answer_C #BgHover, .p3q1 #Answer_B #BgHover, .p3q1 #Answer_A #BgHover, .p3q2 #Answer_C #BgHover, .p3q2 #Answer_B #BgHover, .p3q2 #Answer_A #BgHover, .p3q3 #Answer_C #BgHover, .p3q3 #Answer_B #BgHover, .p3q3 #Answer_A #BgHover, .p1q1 #Answer_C #BgHover, .p1q1 #Answer_B #BgHover, .p1q1 #Answer_A #BgHover, .p1q2 #Answer_C #BgHover, .p1q2 #Answer_B #BgHover, .p1q2 #Answer_A #BgHover, .p1q3 #Answer_C #BgHover, .p1q3 #Answer_B #BgHover, .p1q3 #Answer_A #BgHover, .p2q1 #Answer_C #BgHover, .p2q1 #Answer_B #BgHover, .p2q1 #Answer_A #BgHover, .p2q2q #Answer_C #BgHover, .p2q2q #Answer_B #BgHover, .p2q2q #Answer_A #BgHover, .p2q3q #Answer_C #BgHover, .p2q3q #Answer_B #BgHover, .p2q3q #Answer_A #BgHover {
  transition: 150ms all ease-in-out;
}
.p3q1 #Answer_C:hover #BgHover, .p3q1 #Answer_B:hover #BgHover, .p3q1 #Answer_A:hover #BgHover, .p3q2 #Answer_C:hover #BgHover, .p3q2 #Answer_B:hover #BgHover, .p3q2 #Answer_A:hover #BgHover, .p3q3 #Answer_C:hover #BgHover, .p3q3 #Answer_B:hover #BgHover, .p3q3 #Answer_A:hover #BgHover, .p1q1 #Answer_C:hover #BgHover, .p1q1 #Answer_B:hover #BgHover, .p1q1 #Answer_A:hover #BgHover, .p1q2 #Answer_C:hover #BgHover, .p1q2 #Answer_B:hover #BgHover, .p1q2 #Answer_A:hover #BgHover, .p1q3 #Answer_C:hover #BgHover, .p1q3 #Answer_B:hover #BgHover, .p1q3 #Answer_A:hover #BgHover, .p2q1 #Answer_C:hover #BgHover, .p2q1 #Answer_B:hover #BgHover, .p2q1 #Answer_A:hover #BgHover, .p2q2q #Answer_C:hover #BgHover, .p2q2q #Answer_B:hover #BgHover, .p2q2q #Answer_A:hover #BgHover, .p2q3q #Answer_C:hover #BgHover, .p2q3q #Answer_B:hover #BgHover, .p2q3q #Answer_A:hover #BgHover {
  fill: #fff !important;
  transition: 150ms all ease-in-out;
}

.p1q5 #question_button,
.p1q5 #Information_popups,
.p1q5a #question_button,
.p1q5a #Information_popups,
.p1q6 #question_button,
.p1q6 #Information_popups,
.p1q6a #question_button,
.p1q6a #Information_popups,
.p1q7 #question_button,
.p1q7 #Information_popups,
.p1q7a #question_button,
.p1q7a #Information_popups,
.p1q7b #question_button,
.p1q7b #Information_popups {
  opacity: 0;
  pointer-events: none;
}
.p1q5 #question_button.active,
.p1q5a #question_button.active,
.p1q6 #question_button.active,
.p1q6a #question_button.active,
.p1q7 #question_button.active,
.p1q7a #question_button.active,
.p1q7b #question_button.active {
  pointer-events: auto;
  cursor: pointer;
}

.special-question #Patient_1,
.special-question #Sample_hand,
.special-question #Patient_Files,
.special-question #Overlayed_box,
.special-question #Question_5,
.special-question #Option_A,
.special-question #Option_B,
.special-question #Option_C,
.special-question #Box,
.special-question #Box-2,
.special-question #Box-3,
.special-question #Box-4,
.special-question #Box-5,
.special-question #_51_Correct_answer,
.special-question #_52_Correct_answer,
.special-question #_53_Correct_answer,
.special-question #_54_Correct_answer,
.special-question #_55_Correct_answer,
.special-question #Option_A-1,
.special-question #Option_A-2,
.special-question #Option_A-3,
.special-question #Option_A-4,
.special-question #Option_A-5,
.special-question #Option_B-1,
.special-question #Option_B-2,
.special-question #Option_B-3,
.special-question #Option_B-4,
.special-question #Option_B-5,
.special-question #Option_C-1,
.special-question #Option_C-2,
.special-question #Option_C-3,
.special-question #Option_C-4,
.special-question #Option_C-5,
.special-question #Losenge,
.special-question #Losenge-2,
.special-question #Losenge-3,
.special-question #Losenge-4,
.special-question #Losenge-5,
.special-question #_51_Select_Answer,
.special-question #_52_Select_Answer,
.special-question #_53_Select_Answer,
.special-question #_54_Select_Answer,
.special-question #_55_Select_Answer,
.special-question #Question,
.special-question #Question_Number,
.special-question #Return_to_home_button,
.special-question #Patient_file_buttons {
  opacity: 0;
  pointer-events: none;
}
.special-question *.active {
  cursor: pointer;
  pointer-events: auto !important;
}
.special-question #_51_Select_Answer.active,
.special-question #_52_Select_Answer.active,
.special-question #_53_Select_Answer.active,
.special-question #_54_Select_Answer.active,
.special-question #_55_Select_Answer.active {
  cursor: pointer;
  pointer-events: auto;
}

#Yellow_man_lottie, #Purple_man_lottie, #Blue_lady_lottie {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 171px;
  z-index: 1;
}

#Yellow_man_lottie {
  right: 383px;
}

#Purple_man_lottie {
  left: 235px;
}

#Yellow_man_profile, #Purple_man_profile {
  display: none;
}