@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 {
  cursor: pointer;
}
#Patient_1 > g#Case_1_button,
#Patient_1 > g#Case_2_button,
#Patient_2 > g#Case_1_button,
#Patient_2 > g#Case_2_button {
  transition: 150ms linear all;
}

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: 714px;
  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 svg {
  width: 700px;
}
.patient-file-info svg g[id^=Patient_file] {
  display: none;
}

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-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,
body.patient-1-finished .first-patient #Patient_1_Sitting {
  display: none;
}
body.patient-2-finished .first-patient #Patient_2,
body.patient-2-finished .first-patient #Patient_2_Sitting {
  display: none;
}

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

.main-patient-file-button {
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
}
.main-patient-file-button svg {
  width: 142px;
  height: auto;
}
.main-patient-file-button.active {
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

.main-home-button {
  position: absolute;
  left: 0;
  top: 60px;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
}
.main-home-button svg {
  width: 142px;
  height: auto;
}
.main-home-button.active {
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

g#Read_More_Yellow path,
g#Read_More_Yellow 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,
.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_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,
.both-complete g#Continue_button:hover path,
.both-complete g#Continue_button:hover rect {
  transition: 150ms linear all;
  opacity: 0.6 !important;
}

#First_Patient #Patient_Files,
#First_Patient #Patient_file,
#First_Patient #Patient_Files_Popup,
#First_Patient #Patient_Files_Yellow,
#First_Patient #Read_More_Yellow,
#First_Patient #Information_popups,
#First_Patient #Read_more_buttons,
#First_Patient #Return_to_home_button {
  opacity: 0;
  pointer-events: none;
}

.p1q1b-extended #Information_popups {
  opacity: 0;
  pointer-events: none;
}
.p1q1b-extended #Question_button {
  opacity: 0;
}

.first-patient-intro.overlay {
  z-index: 6;
}
.first-patient-intro.overlay.active {
  opacity: 1;
}

.first-patient #Patient_1_intro_popup {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.p1q1a,
.p1q1b,
.p1q1b-extended {
  position: absolute;
  top: 0;
  left: 0;
}

g#Doctor {
  opacity: 0;
}

.patient-2-intro {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.patient-2-intro #question_button {
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}
.patient-2-intro #Read_more_buttons {
  opacity: 0;
  transition: 150ms linear all;
}
.patient-2-intro.active #Read_more_buttons {
  opacity: 1;
  pointer-events: auto;
}

#red_patient_intro_modal {
  opacity: 0;
}
#red_patient_intro_modal #Overlayed_box rect {
  width: 100%;
  height: 100%;
}

@keyframes fadeElemIn {
  from {
    opacity: 0;
    pointer-events: none;
  }
  to {
    opacity: 1 !important;
    pointer-events: auto;
  }
}
.patient-2-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.patient-2-info #Information_popups,
.patient-2-info #Question_button,
.patient-2-info #Patient_file_reminder {
  pointer-events: none;
}
.patient-2-info #Question_button {
  cursor: pointer;
  transition: 150ms linear all;
}
.patient-2-info #Question_button:hover {
  cursor: pointer;
  opacity: 0.6 !important;
  transition: 150ms linear all;
}
.patient-2-info.active #Information_popups,
.patient-2-info.active #Question_button,
.patient-2-info.active #Patient_file_reminder {
  pointer-events: auto;
}

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

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

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

#RedPatientPopup {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

#YellowPatientPopup {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
}

.patient-2-info.active#yellow_patient_intro {
  pointer-events: auto;
  opacity: 1;
}
#red_patient_intro_modal.hidden #Overlayed_box {
  opacity: 0 !important;
}

@keyframes delayedFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#yellow_patient_intro #Patient_file_reminder {
  transform: translateX(2px);
}
#yellow_patient_intro #Question_button {
  opacity: 0;
}

body.patient-2-finished #Patient2IntroPopup,
body.patient-2-finished #YellowPatientPopup,
body.patient-2-finished #Main_Frame_Yellow_Profile,
body.patient-2-finished #yellow_patient_intro {
  display: none;
}

body.patient-1-finished #Patient_1_intro_popup,
body.patient-1-finished #Main_Frame_Red_Profile {
  display: none;
}

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

.question-screen #Patient_1,
.question-screen #Patient_Files,
.question-screen #Red_Patient_Files_Lottie_P1Q5,
.question-screen #Red_Patient_Files_Lottie_P1Q2,
.question-screen #Red_Patient_Files_Lottie_P1Q3,
.question-screen #Red_Patient_Files_Lottie_P1Q4,
.question-screen #Red_Q4_Patient,
.question-screen #Petri_Dish_Lottie,
.question-screen #Blood_Sample_Lottie_P1Q5,
.question-screen #Red_Patient_Lottie_P1Q5, .question-screen #Red_Q5_Patient,
.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;
}

.overlay-questions.extended-frame.questions-active #Question_button {
  pointer-events: auto;
  cursor: pointer;
}
.overlay-questions.extended-frame #Overlayed_box,
.overlay-questions.extended-frame #overlayed_box,
.overlay-questions.extended-frame #Information_popups,
.overlay-questions.extended-frame #information_popups,
.overlay-questions.extended-frame #Question_button {
  opacity: 0;
}

.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 #Information_popups,
.first-patient-intro #question_button {
  opacity: 0;
}
.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;
}

.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,
.both-patients-complete #Information_popups,
.both-patients-complete #Continue_button {
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

.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;
}

path#OVERLAY {
  display: none;
}

.info-screen {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.info-screen #Information_popups,
.info-screen #question_button,
.info-screen #Question_button,
.info-screen #Overlayed_box,
.info-screen #Patient_file_reminder {
  opacity: 0;
}
.info-screen #question_button,
.info-screen #Question_button,
.info-screen #Information_popups {
  opacity: 0;
  pointer-events: none;
}
.info-screen.active #question_button,
.info-screen.active #Question_button,
.info-screen.active #Information_popups {
  pointer-events: auto;
}
.info-screen.active #question_button,
.info-screen.active #Question_button {
  cursor: pointer;
}
.info-screen.active #question_button:hover,
.info-screen.active #Question_button:hover {
  opacity: 0.6 !important;
  transition: 150ms linear all;
}

.extended-frame.questions-active #Information_popups {
  pointer-events: auto;
}
.extended-frame.questions-active #Question_button {
  pointer-events: auto;
  cursor: pointer;
}
.extended-frame.questions-active #Question_button:hover {
  opacity: 0.6 !important;
  transition: 150ms linear all;
}

.debug-container {
  position: absolute;
  bottom: 0;
  left: 0;
}

.question-screen {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.overlay-questions {
  z-index: 1;
}

#Answer_A rect,
#Answer_B rect,
#Answer_C rect,
#Answer_D rect,
#Answer_E rect {
  transition: 150ms linear fill;
}
#Answer_A:hover rect,
#Answer_B:hover rect,
#Answer_C:hover rect,
#Answer_D:hover rect,
#Answer_E:hover rect {
  fill: #f3f3f3 !important;
  transition: 150ms linear fill;
}

#MARKING rect,
#MARKING-1 rect,
#MARKING-2 rect,
#MARKING-3 rect,
#MARKING-4 rect,
#MARKING-5 rect {
  fill: #f3f3f3 !important;
}

#Patient_1:hover #Case_1_button {
  transform: translateY(-25px) !important;
}

#Patient_2:hover #Case_2_button {
  transform: translateY(-25px) !important;
}

.main-patient-file-button {
  transition: 150ms linear transform;
}
.main-patient-file-button:hover {
  transform: translateX(10px) !important;
  transition: 150ms linear transform;
}

.main-home-button {
  transition: 150ms linear transform;
}
.main-home-button:hover {
  transform: translateX(-10px) !important;
  transition: 150ms linear transform;
}

body[data-current-patient="1"] .main-patient-file-button.patient-file-button-2,
body[data-current-patient="1"] .main-home-button.main-home-button-2 {
  display: none;
}

body[data-current-patient="2"] .main-patient-file-button.patient-file-button-1,
body[data-current-patient="2"] .main-home-button.main-home-button-1 {
  display: none;
}

.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;
}

#CoffeeMug {
  width: 153px;
  height: auto;
  position: absolute;
  bottom: 28px;
  left: 45px;
}

#Red_Patient_Files_Lottie_P1Q1,
#Red_Patient_Files_Lottie_P1Q2,
#Red_Patient_Files_Lottie_P1Q3,
#Red_Patient_Files_Lottie_P1Q4,
#Red_Patient_Files_Lottie_P1Q5 {
  left: 86px;
  position: absolute;
  bottom: 0;
  width: 404px;
  opacity: 0;
}

#Red_Patient_Lottie {
  right: 355px;
  position: absolute;
  bottom: 67px;
  width: 207px;
  opacity: 0;
}

#Red_Patient_Lottie_P1Q5,
#Red_Q5_Patient {
  width: 282px;
  position: absolute;
  bottom: 124px;
  right: 216px;
}

#Plant_Lottie,
#Plant_Lottie_P1Q5,
#Plant_Lottie_P1Q2 {
  left: 340px;
  position: absolute;
  top: 255px;
  width: 207px;
}

#Red_Patient_Files_Lottie_P1Q5,
#Red_Patient_Files_Lottie_P1Q2 {
  z-index: 1;
}

#Red_Q2_Patient {
  opacity: 0;
  position: absolute;
  width: 333px;
  right: 268px;
  bottom: 125px;
}

#Red_Q2_Big_Hand {
  position: absolute;
  opacity: 0;
  bottom: -4px;
  right: 47px;
  width: 299px;
}

#Petri_Dish_Lottie {
  left: 440px;
  position: absolute;
  bottom: 0;
  width: 345px;
}

#Red_Q4_Patient {
  left: 160px;
  position: absolute;
  bottom: 0;
  width: 952px;
}

#Blood_Sample_Lottie_P1Q5 {
  right: 327px;
  position: absolute;
  bottom: 0;
  width: 300px;
}

#Case_1_F1_Big_Hand,
#Case_2_F1_Big_Hand {
  position: absolute;
  opacity: 0;
  bottom: -4px;
  right: 47px;
  width: 299px;
}

#Case_1_F1_Patient_File {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 73px;
  width: 450px;
}

#Case_1_F1_Patient {
  position: absolute;
  opacity: 0;
  width: 225px;
  left: 518px;
  bottom: 61px;
}

#Case_1_F1_Plant,
#Case_1_F6_Plant {
  position: absolute;
  width: 216px;
  left: 336px;
  top: 239px;
}

#P2Q1bg #Sample_hand,
#P2Q1bg #Patient_Files {
  display: none;
}

#Case_1_F2_Patient_File {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 73px;
  width: 450px;
}

#Red_Q2_Big_Hand {
  position: absolute;
  opacity: 0;
  bottom: -4px;
  right: 47px;
  width: 299px;
}

#Case_1_F2_Big_Hand {
  position: absolute;
  opacity: 0;
  bottom: -4px;
  right: 47px;
  width: 299px;
}

#Case_1_F2_Plant {
  position: absolute;
  width: 216px;
  left: 336px;
  top: 239px;
}

#P2Q2bg #Patient_Files,
#P2Q2bg #Sample_hand {
  display: none;
}

#Patient_2_Sitting {
  position: fixed;
  top: 318px;
  left: 251px;
  width: 220px;
  pointer-events: none;
}

#Patient_1_Sitting {
  position: fixed;
  top: 335px;
  right: 313px;
  width: 136px;
  pointer-events: none;
}

.first-patient #Patient_2 > g:not(#Case_2_button) {
  opacity: 0;
}
.first-patient #Patient_1 > g:not(#Case_1_button) {
  opacity: 0;
}

#Case_1_F3_Patient,
#Yellow_Q3_Patient {
  opacity: 0;
  position: absolute;
  bottom: 124px;
  right: 191px;
  width: 371px;
}

#Case_1_F3_Plant {
  position: absolute;
  width: 216px;
  left: 336px;
  top: 239px;
}

#Case_1_F3_Patient_File {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 73px;
  width: 450px;
}

#Case_1_F3_Blood_Sample {
  position: absolute;
  opacity: 0;
  bottom: -5px;
  right: 329px;
  width: 292px;
}

#P2Q3_bg #Patient_1,
#P2Q3_bg #Patient_Files,
#P2Q3_bg #Sample_hand {
  display: none;
}

#Case_1_F4_Patient,
#Yellow_Q4_Patient {
  opacity: 0;
  position: absolute;
  bottom: -7px;
  right: -5px;
  width: 649px;
}

#Case_1_F4_Patient_File {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 73px;
  width: 450px;
}

#Case_1_F5_Plant {
  position: absolute;
  width: 216px;
  left: 336px;
  top: 239px;
}

#Case_1_F5_Patient_File {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 73px;
  width: 450px;
}

#Case_1_F5_Big_Hand {
  position: absolute;
  opacity: 0;
  bottom: -4px;
  right: 47px;
  width: 299px;
}

#Case_1_F5_Patient,
#Yellow_Q5_Patient {
  position: absolute;
  top: 296px;
  right: 191px;
  width: 371px;
  opacity: 0;
}

#P2Q5_bg #Patient_Files,
#P2Q5_bg #Sample_hand {
  display: none;
}

#Main_Frame_Red_Profile {
  opacity: 0;
  pointer-events: none;
  top: 181px;
  z-index: 5;
  width: 200px;
  left: 193px;
  position: absolute;
}

#Main_Frame_Yellow_Profile {
  opacity: 0;
  pointer-events: none;
  top: 155px;
  z-index: 5;
  width: 200px;
  position: absolute;
  right: 316px;
}

#Patient_1_intro_popup #Read_more_buttons {
  opacity: 0;
}

#Yellow_Q2_Patient {
  opacity: 0;
  position: absolute;
  bottom: 124px;
  right: 191px;
  width: 371px;
}

#Red_Q6_Patient {
  opacity: 0;
  position: absolute;
  bottom: 124px;
  right: 215px;
  width: 274px;
}

#Red_Q6_Patient_File {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 73px;
  width: 450px;
}

#Red_Q6_Big_Hand {
  position: absolute;
  opacity: 0;
  bottom: -4px;
  left: 500px;
  width: 299px;
}