@font-face{
  font-family:"Brother Deluxe";
  src:local("Courier New");
}
:root{color-scheme:dark;--stage-ratio:1672/941;--ink:#17130f;--paper:#f1eadc}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#050505;overflow:hidden;font-family:"Courier New",monospace}
body{display:grid;place-items:center;user-select:none}
#app{position:fixed;inset:0;display:grid;place-items:center;background:#050505}
.screen{position:fixed;inset:0;display:grid;place-items:center;background:#050505}
.stage,.card{position:relative;width:min(100vw,calc(100dvh * 1672 / 941));height:min(100dvh,calc(100vw * 941 / 1672));aspect-ratio:var(--stage-ratio);overflow:hidden;background:#111;box-shadow:0 0 36px #000}
.bg,.asset-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.start-hotspot{position:absolute;left:48.15%;top:68.35%;width:24.7%;height:15.5%;border:0;background:transparent;cursor:pointer}
.start-hotspot:focus,.start-hotspot:focus-visible{outline:none;box-shadow:none}
.btn{border:1px solid #675837;background:linear-gradient(#2a2926,#080808);color:#f3ead6;padding:14px 24px;font:700 18px "Courier New",monospace;letter-spacing:1px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.btn:hover{filter:brightness(1.18)}

/* Check-in overlays directly on notebook artwork */
.checkin-overlay{position:absolute;inset:0}
.checkin-fields{position:static}
.notebook-input{
  position:absolute;height:7.95%;background:rgba(255,255,255,.12);border:1.5px solid rgba(75,69,61,.8);border-radius:5px;
  padding:0 1.6%;outline:none;user-select:text;font:400 clamp(15px,1.5vw,27px) "Courier New",monospace;color:#17130f;
  backdrop-filter:blur(.4px);
}
.notebook-input:focus{border-color:#7f2b22;box-shadow:0 0 0 2px rgba(142,41,31,.14)}
#name{left:38.6%;top:37.6%;width:34.1%}
#email{left:38.6%;top:48.25%;width:34.1%}
#period{left:38.6%;top:58.85%;width:24.5%;padding-right:2%;background:rgba(255,255,255,.12)}
.checkin-btn{position:absolute;left:37.55%;top:71.55%;width:27%;height:12.2%;font-size:clamp(18px,2.2vw,34px)}

/* ============================================================
   QUESTION + ANSWER OVERLAYS
   ------------------------------------------------------------
   Artwork stays visual-only. All wording comes from questions.js.

   EASY MANUAL TWEAKING:
   - Move BOTH prompt + answers: change left/top on .qa-panel
   - Move only prompt: use .slide-qXX .question-text { transform: ... }
   - Move only answers: use .slide-qXX .answers-block { transform: ... }

   translate(+Xpx, +Ypx) = right / down
   translate(-Xpx, -Ypx) = left / up
   ============================================================ */
.qa-panel{
  position:absolute;
  left:53.2%;
  top:23.7%;
  width:37.2%;
  color:var(--ink);
  font-family:"Courier New",monospace;
}
.question-text{
  position:relative;
  margin:0 0 3.2vh 0;
  font:900 clamp(20px,2.15vw,38px)/1.14 "Courier New",monospace;
  letter-spacing:-.025em;
  text-align:left;
}
.answers-block{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.45vh,18px);
}
.answer{
  position:relative;
  width:100%;
  min-height:clamp(48px,7.4vh,76px);
  padding:.35em .45em;
  display:flex;
  align-items:center;
  text-align:left;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
  color:var(--ink);
  font:700 clamp(14px,1.48vw,27px)/1.12 "Courier New",monospace;
  letter-spacing:-.02em;
}
.answer:hover,.answer:focus-visible{
  background:rgba(223,211,184,.25);
  outline:3px solid rgba(74,58,37,.55);
  outline-offset:-3px;
}
.answer .letter{display:inline-block;min-width:2.25em;font-weight:900;flex:0 0 auto}
.two-choice .answers-block{gap:clamp(12px,2vh,24px)}
.two-choice .answer{min-height:clamp(54px,8vh,82px)}
.question-counter{position:absolute;right:3.2%;top:2.2%;font:700 clamp(12px,1.2vw,20px) "Courier New",monospace;color:#17130f;background:rgba(245,238,219,.52);padding:.15em .35em}

/* ============================================================
   INITIAL SLIDE-BY-SLIDE VISUAL FIT
   ------------------------------------------------------------
   These are the first-pass adjustments after reviewing q1-q46.
   You can edit any line below without touching JavaScript.
   ============================================================ */

/* Equipment / sign slides with slightly wider Polaroids */
.slide-q2  .qa-panel{left:53.8%;width:36.2%}
.slide-q5  .qa-panel{left:54.0%;width:36.0%}
.slide-q11 .qa-panel{left:54.8%;width:35.2%;top:22.8%}
.slide-q12 .qa-panel{left:54.3%;width:35.7%}
.slide-q16 .qa-panel{left:53.8%;width:36.2%}
.slide-q17 .qa-panel{left:53.8%;width:36.2%}
.slide-q18 .qa-panel{left:53.9%;width:36.1%}
.slide-q19 .qa-panel{left:53.6%;width:36.4%}
.slide-q21 .qa-panel{left:53.9%;width:36.1%}
.slide-q27 .qa-panel{left:53.8%;width:36.2%}
.slide-q30 .qa-panel{left:53.8%;width:36.2%}
.slide-q33 .qa-panel{left:53.8%;width:36.2%}
.slide-q39 .qa-panel{left:54.0%;width:36.0%}
.slide-q45 .qa-panel{left:53.8%;width:36.2%}

/* Safety scenario questions: more room for full prompt text */
.slide-q34 .qa-panel{left:52.7%;top:22.2%;width:38.1%}
.slide-q35 .qa-panel{left:52.7%;top:22.2%;width:38.1%}
.slide-q36 .qa-panel{left:52.7%;top:21.8%;width:38.1%}
.slide-q37 .qa-panel{left:52.5%;top:20.6%;width:38.4%}
.slide-q38 .qa-panel{left:52.6%;top:21.7%;width:38.2%}
.slide-q39 .qa-panel{top:21.2%}

/* True / False slides: prompt first, then two large choices */
.slide-q40 .qa-panel{left:52.0%;top:23.0%;width:39.0%}
.slide-q41 .qa-panel{left:52.0%;top:18.7%;width:39.0%}
.slide-q42 .qa-panel{left:52.0%;top:21.8%;width:39.0%}
.slide-q43 .qa-panel{left:52.0%;top:19.8%;width:39.0%}
.slide-q44 .qa-panel{left:52.0%;top:20.8%;width:39.0%}
.slide-q45 .qa-panel{top:18.7%;width:37.0%}
.slide-q46 .qa-panel{left:52.0%;top:22.5%;width:39.0%}

/* Long True / False prompts need slightly smaller type */
.slide-q41 .question-text,
.slide-q43 .question-text,
.slide-q44 .question-text,
.slide-q45 .question-text{
  font-size:clamp(17px,1.72vw,31px);
  line-height:1.13;
  margin-bottom:2.3vh;
}

/* Example manual nudges. Uncomment / change as needed.
.slide-q12 .question-text{transform:translate(10px,-6px)}
.slide-q12 .answers-block{transform:translate(14px,4px)}
*/


/* ============================================================
   QUESTION NAVIGATION
   Distressed case-file arrows. Answer buttons still auto-advance,
   while these controls allow review and manual forward movement.
   ============================================================ */
.nav-arrow{
  position:absolute;
  z-index:15;
  width:clamp(54px,5.3vw,88px);
  height:clamp(54px,5.3vw,88px);
  display:grid;
  place-items:center;
  border:2px solid rgba(38,34,28,.78);
  color:#eee6d5;
  background:
    linear-gradient(145deg,rgba(59,56,50,.97),rgba(17,17,16,.98));
  box-shadow:
    0 7px 14px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(230,220,193,.08),
    inset 0 0 18px rgba(0,0,0,.45);
  cursor:pointer;
  transform:rotate(-1.5deg);
  clip-path:polygon(3% 7%,94% 2%,99% 15%,96% 92%,82% 98%,6% 94%,1% 78%);
  opacity:.86;
}
.nav-arrow::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px dashed rgba(225,215,187,.22);
  pointer-events:none;
}
.nav-arrow span{
  position:relative;
  z-index:2;
  font:900 clamp(34px,3.7vw,62px)/1 Georgia,serif;
  text-shadow:1px 2px 0 rgba(0,0,0,.55);
  transform:translateY(-2px);
}
.nav-arrow:hover,.nav-arrow:focus-visible{
  opacity:1;
  filter:brightness(1.18);
  outline:3px solid rgba(143,44,35,.55);
  outline-offset:3px;
}
.nav-back{left:1.2%;top:46%;}
.nav-forward{right:1.15%;top:46%;transform:rotate(1.5deg)}

.answer.selected{
  background:rgba(116,42,35,.14);
  outline:3px solid rgba(99,40,33,.56);
  outline-offset:-3px;
}
.answer-warning{
  position:absolute;
  z-index:25;
  left:50%;
  bottom:5.4%;
  transform:translate(-50%,10px) rotate(-1deg);
  padding:.65em 1.1em;
  color:#6d231e;
  background:rgba(226,218,198,.97);
  border:2px solid rgba(105,47,39,.55);
  box-shadow:4px 6px 13px rgba(0,0,0,.28);
  font:900 clamp(12px,1.25vw,20px)/1.1 "Courier New",monospace;
  letter-spacing:.04em;
  opacity:0;
  transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
}
.answer-warning.show{opacity:1;transform:translate(-50%,0) rotate(-1deg)}
.map-result{position:relative}
.map-back{
  left:10px;
  top:50%;
  transform:translateY(-50%) rotate(-1.5deg);
}

/* Q1 is deliberately listed even though it currently uses the default fit.
   This gives you an obvious place to make your own Q1 tweaks. */
.slide-q1 .qa-panel{
  left:52.9%;
  top:23.0%;
  width:37.1%;
}
/* Examples:
.slide-q1 .question-text{transform:translate(8px,-4px)}
.slide-q1 .answers-block{transform:translate(12px,6px)}
*/

/* Lab map */
.result{width:min(1500px,96vw);max-height:94vh;overflow:auto;background:#e7dcc2;padding:18px;border:1px solid #4f493f;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.map-screen{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:start}
.map-screen img{width:100%;max-height:86vh;object-fit:contain;background:#000}
.map-panel{background:#efe5cd;padding:20px;border:1px solid #5e5648;max-height:86vh;overflow:auto;color:#17130f}
.map-panel h2{margin-top:0}
.map-row{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;margin:8px 0}
.map-letter{font-size:26px;font-weight:bold;text-align:center}
.map-row select{width:100%;padding:10px;font:inherit;background:#faf4e7;color:#17130f}
.submit-wrap{text-align:center;margin-top:16px}

/* Certificate asset plus live overlays */
.certificate-stage{position:relative;width:min(1400px,96vw);background:#111;box-shadow:0 22px 70px rgba(0,0,0,.6)}
.certificate-asset{display:block;width:100%;height:auto}
.cert-name-overlay{position:absolute;left:19%;right:19%;top:39.4%;text-align:center;font-family:Georgia,serif;font-style:italic;font-size:clamp(30px,4.1vw,66px);color:#34434e;text-shadow:0 1px 0 #fff8}
.cert-date-overlay{position:absolute;left:12.3%;width:23%;bottom:12.4%;text-align:center;font:700 clamp(15px,1.65vw,24px) "Courier New",monospace;color:#43515b}
.cert-score-overlay{position:absolute;left:38%;right:38%;bottom:12.2%;text-align:center;font:700 clamp(13px,1.3vw,19px) "Courier New",monospace;color:#43515b}
.certificate-actions{display:flex;gap:12px;justify-content:center;margin-top:18px}

/* Distressed fail notice */

@media(max-width:900px){
  .map-screen{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .answer{font-size:clamp(12px,2.4vw,22px)}
}


/* ============================================================
   SUBMISSION LOCK / FEEDBACK
   Prevents impatient double-clicks from generating duplicates.
   ============================================================ */
#submitExam:disabled{
  opacity:.72;
  cursor:wait;
  filter:saturate(.7);
}
.submit-status{
  min-height:30px;
  margin-top:14px;
  opacity:0;
  transition:opacity .15s ease;
  color:#39352f;
  font:700 14px/1.35 "Courier New",monospace;
}
.submit-status.show{opacity:1}
.submit-spinner{
  display:inline-block;
  width:15px;height:15px;
  margin-right:8px;
  vertical-align:-2px;
  border:2px solid rgba(50,45,39,.22);
  border-top-color:#4d463d;
  border-radius:50%;
  animation:ccsi-spin .7s linear infinite;
}
@keyframes ccsi-spin{to{transform:rotate(360deg)}}

/* ============================================================
   CERTIFICATION WITHHELD NOTICE
   Cool neutral paper, distressed case-file aesthetic.
   ============================================================ */
.fail-screen{
  background:
    radial-gradient(circle at 22% 15%,rgba(255,255,255,.035),transparent 28%),
    #090909;
}
.fail-file{
  width:min(1120px,93vw);
  position:relative;
  overflow:hidden;
  padding:54px 64px 46px;
  color:#1d1d1b;
  border:1px solid #5b5a55;
  box-shadow:0 22px 70px rgba(0,0,0,.68), inset 0 0 70px rgba(46,42,35,.10);
  background-color:#d5d2ca;
  background-image:
    linear-gradient(90deg,transparent 0 8.8%,rgba(126,39,34,.28) 8.9% 9.05%,transparent 9.15%),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(65,83,91,.09) 32px,transparent 33px),
    radial-gradient(circle at 12% 18%,rgba(74,63,49,.15) 0 1.2%,transparent 5.5%),
    radial-gradient(circle at 88% 76%,rgba(76,65,51,.12) 0 1.5%,transparent 7%),
    radial-gradient(circle at 72% 8%,rgba(255,255,255,.30),transparent 25%),
    linear-gradient(115deg,rgba(255,255,255,.24),transparent 31%,rgba(45,43,38,.06) 62%,transparent 78%);
  clip-path:polygon(.5% 1.4%,6% .6%,13% 1.1%,22% .4%,31% 1%,42% .55%,55% 1.05%,67% .4%,80% .9%,91% .45%,99.3% 1.5%,99.7% 18%,99.2% 35%,99.8% 56%,99.1% 75%,99.5% 98.5%,88% 99.3%,75% 98.8%,64% 99.5%,51% 98.9%,39% 99.4%,27% 98.7%,15% 99.5%,.7% 98.6%,1.1% 80%,.5% 62%,1% 43%,.4% 24%);
}
.fail-file::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(36,40,41,.20);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.06);
  pointer-events:none;
}
.fail-file::after{
  content:"";
  position:absolute;
  width:142px;height:142px;
  right:7%;bottom:8%;
  border:10px double rgba(40,48,51,.10);
  border-radius:50%;
  transform:rotate(-13deg);
  pointer-events:none;
}
.fail-paperclip{
  position:absolute;
  right:7.3%;top:-25px;
  width:30px;height:105px;
  border:5px solid #777873;
  border-radius:19px;
  transform:rotate(8deg);
  opacity:.75;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);
}
.fail-meta{
  font:700 12px/1.2 "Courier New",monospace;
  letter-spacing:1.4px;
  color:#555b5d;
  padding-bottom:12px;
}
.fail-rule{height:2px;background:#77716a;opacity:.46;margin:3px 0 20px}
.fail-kicker{
  text-align:center;
  font:800 14px/1 "Courier New",monospace;
  letter-spacing:4px;
  color:#4d5354;
}
.fail-file h1{
  margin:8px auto 4px;
  text-align:center;
  font:900 clamp(38px,5.4vw,76px)/1.02 Georgia,serif;
  letter-spacing:-1px;
  color:#25292a;
  text-transform:none;
  text-shadow:0 1px rgba(255,255,255,.4);
}
.fail-subhead{
  text-align:center;
  font:700 clamp(14px,1.5vw,21px)/1.2 "Courier New",monospace;
  letter-spacing:1.8px;
  color:#555b5d;
  text-transform:uppercase;
  margin-bottom:25px;
}
.fail-stamp{
  position:absolute;
  right:4.5%;top:8.5%;
  transform:rotate(6deg);
  border:4px double rgba(112,42,38,.72);
  color:rgba(112,42,38,.78);
  padding:7px 13px 5px;
  font:900 clamp(13px,1.35vw,20px)/1.0 "Courier New",monospace;
  letter-spacing:2px;
  text-align:center;
  text-transform:uppercase;
  mix-blend-mode:multiply;
}
.fail-body{
  max-width:900px;
  margin:0 auto;
  padding:13px 24px 7px;
  border-left:4px solid rgba(112,42,38,.34);
  background:rgba(238,237,231,.30);
}
.fail-body p{
  margin:8px 0 15px;
  font:500 clamp(17px,1.65vw,25px)/1.45 Georgia,serif;
}
.fail-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:850px;
  margin:24px auto;
}
.fail-stat{
  background:rgba(236,234,227,.52);
  border:1px solid rgba(52,57,57,.28);
  border-top:4px solid rgba(61,70,73,.48);
  padding:14px 12px 11px;
  text-align:center;
}
.fail-stat span{
  display:block;
  font:900 clamp(27px,3vw,44px)/1 "Courier New",monospace;
  color:#303536;
}
.fail-stat small{
  display:block;
  margin-top:6px;
  font:700 11px/1.2 "Courier New",monospace;
  letter-spacing:1px;
  color:#5b6061;
}
.fail-note{
  max-width:900px;
  margin:15px auto 0;
  padding:14px 16px;
  background:rgba(204,200,188,.55);
  border-top:1px dashed rgba(51,53,51,.35);
  border-bottom:1px dashed rgba(51,53,51,.35);
  font:700 15px/1.45 "Courier New",monospace;
  color:#3e4241;
}
.fail-note-label{color:#742e2a;letter-spacing:1px}
.fail-footer{
  max-width:900px;
  margin:20px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.fail-code{
  font:700 11px/1.3 "Courier New",monospace;
  letter-spacing:1px;
  color:#666762;
}
.fail-footer .btn{margin:0;white-space:nowrap}

@media(max-width:760px){
  .fail-file{padding:45px 28px 35px}
  .fail-stamp{position:relative;right:auto;top:auto;display:table;margin:0 auto 15px;transform:rotate(3deg)}
  .fail-stats{grid-template-columns:1fr}
  .fail-footer{flex-direction:column}
}


/* Layout-preview badge. Only appears when URL contains ?preview=q## */
.preview-badge{
  position:absolute; left:1.2%; top:1.6%; z-index:50;
  padding:.42em .7em; background:rgba(20,20,18,.82); color:#efe7d1;
  border:1px solid rgba(239,231,209,.45); border-radius:3px;
  font:700 clamp(10px,.8vw,14px)/1 "Courier New",monospace;
  letter-spacing:.08em; pointer-events:none;
}

/* ============================================================
   QUICK TWEAK INDEX — QUESTION ID + PROMPT HINT
   Use Ctrl+F for Q1, Q2, etc. Add overrides below as needed.
   ============================================================ */
/* Q1 — Identify this piece of equipment. */
  .slide-q1 .qa-panel { left: 53.9%; top: 27%; width: 37.1%; } 
/* .slide-q1 .question-text { transform: translate(0px, 0px); } */
 .slide-q1 .answers-block { transform: translate(50px,  -05px); } 

/* Q2 — Identify this piece of equipment. */
  .slide-q2 .qa-panel { left: 51.9%; top: 27%; width: 37.1%; }  
/* .slide-q2 .question-text { transform: translate(0px, 0px); } */
/* .slide-q2 .answers-block { transform: translate(0px, 0px); } */

/* Q3 — Identify this piece of equipment. */
  .slide-q3 .qa-panel { left: 53.9%; top: 27%; width: 37.1%; }  
/* .slide-q3 .question-text { transform: translate(0px, 0px); } */
/* .slide-q3 .answers-block { transform: translate(0px, 0px); } */

/* Q4 — Identify this sign. */
  .slide-q4 .qa-panel { left: 55.9%; top: 29%; width: 37.1%; }  
/* .slide-q4 .question-text { transform: translate(0px, 0px); } */
/* .slide-q4 .answers-block { transform: translate(0px, 0px); } */

/* Q5 — Identify this piece of equipment. */
 .slide-q5 .qa-panel { left: 55.9%; top: 28%; width: 37.1%; } 
/* .slide-q5 .question-text { transform: translate(0px, 0px); } */
/* .slide-q5 .answers-block { transform: translate(0px, 0px); } */

/* Q6 — Identify this piece of equipment. */
 .slide-q6 .qa-panel { left: 52.9%; top: 28%; width: 37.1%; } 
/* .slide-q6 .question-text { transform: translate(0px, 0px); } */
/* .slide-q6 .answers-block { transform: translate(0px, 0px); } */

/* Q7 — Identify this equipment. */
 .slide-q7 .qa-panel { left: 52.9%; top: 30%; width: 37.1%; } 
/* .slide-q7 .question-text { transform: translate(0px, 0px); } */
/* .slide-q7 .answers-block { transform: translate(0px, 0px); } */

/* Q8 — Identify this piece of equipment. */
.slide-q8 .qa-panel { left: 53.9%; top: 28%; width: 37.1%; } 
/* .slide-q8 .question-text { transform: translate(0px, 0px); } */
/* .slide-q8 .answers-block { transform: translate(0px, 0px); } */

/* Q9 — Identify this piece of equipment. */
 .slide-q9 .qa-panel { left: 51.9%; top: 28%; width: 37.1%; }
/* .slide-q9 .question-text { transform: translate(0px, 0px); } */
/* .slide-q9 .answers-block { transform: translate(0px, 0px); } */

/* Q10 — Identify this piece of equipment. */
 .slide-q10 .qa-panel { left: 54.9%; top: 28%; width: 37.1%; }  
/* .slide-q10 .question-text { transform: translate(0px, 0px); } */
/* .slide-q10 .answers-block { transform: translate(0px, 0px); } */

/* Q11 — Identify this piece of equipment. */
  .slide-q11 .qa-panel { left: 53.9%; top: 29%; width: 37.1%; }  
/* .slide-q11 .question-text { transform: translate(0px, 0px); } */
/* .slide-q11 .answers-block { transform: translate(0px, 0px); } */

/* Q12 — Identify this piece of equipment. */
  .slide-q12 .qa-panel { left: 54.9%; top: 29%; width: 37.1%; }  
/* .slide-q12 .question-text { transform: translate(0px, 0px); } */
/* .slide-q12 .answers-block { transform: translate(0px, 0px); } */

/* Q13 — Identify this piece of equipment. */
 .slide-q13 .qa-panel { left: 54.9%; top: 29%; width: 37.1%; } 
/* .slide-q13 .question-text { transform: translate(0px, 0px); } */
/* .slide-q13 .answers-block { transform: translate(0px, 0px); } */

/* Q14 — Identify this piece of equipment. */
  .slide-q14 .qa-panel { left: 54.2%; top: 29%; width: 37.1%; }  
/* .slide-q14 .question-text { transform: translate(0px, 0px); } */
/* .slide-q14 .answers-block { transform: translate(0px, 0px); } */

/* Q15 — Identify this piece of equipment. */
 .slide-q15 .qa-panel { left: 55.6%; top: 29%; width: 37.1%; }  
/* .slide-q15 .question-text { transform: translate(0px, 0px); } */
/* .slide-q15 .answers-block { transform: translate(0px, 0px); } */

/* Q16 — Identify this piece of equipment. */
  .slide-q16 .qa-panel { left: 53.9%; top: 29%; width: 37.1%; } 
/* .slide-q16 .question-text { transform: translate(0px, 0px); } */
/* .slide-q16 .answers-block { transform: translate(0px, 0px); } */

/* Q17 — Identify this piece of equipment. */
 .slide-q17 .qa-panel { left: 56.4%; top: 29%; width: 37.1%; }  
/* .slide-q17 .question-text { transform: translate(0px, 0px); } */
/* .slide-q17 .answers-block { transform: translate(0px, 0px); } */

/* Q18 — Identify this piece of equipment. */
 .slide-q18 .qa-panel { left: 55.9%; top: 29%; width: 37.1%; } 
/* .slide-q18 .question-text { transform: translate(0px, 0px); } */
/* .slide-q18 .answers-block { transform: translate(0px, 0px); } */

/* Q19 — Identify this piece of equipment. */
 .slide-q19 .qa-panel { left: 54.9%; top: 29%; width: 37.1%; } 
/* .slide-q19 .question-text { transform: translate(0px, 0px); } */
/* .slide-q19 .answers-block { transform: translate(0px, 0px); } */

/* Q20 — Identify this piece of equipment. */
 .slide-q20 .qa-panel { left: 52.9%; top: 29%; width: 37.1%; }  
/* .slide-q20 .question-text { transform: translate(0px, 0px); } */
/* .slide-q20 .answers-block { transform: translate(0px, 0px); } */

/* Q21 — Identify this sign. */
  .slide-q21 .qa-panel { left: 57.9%; top: 29%; width: 37.1%; } 
/* .slide-q21 .question-text { transform: translate(0px, 0px); } */
/* .slide-q21 .answers-block { transform: translate(0px, 0px); } */

/* Q22 — Identify this sign. */
 .slide-q22 .qa-panel { left: 57.9%; top: 29%; width: 37.1%; } 
/* .slide-q22 .question-text { transform: translate(0px, 0px); } */
/* .slide-q22 .answers-block { transform: translate(0px, 0px); } */

/* Q23 — Identify this sign. */
  .slide-q23 .qa-panel { left: 57.9%; top: 29%; width: 37.1%; }  
/* .slide-q23 .question-text { transform: translate(0px, 0px); } */
/* .slide-q23 .answers-block { transform: translate(0px, 0px); } */

/* Q24 — Identify this sign. */
  .slide-q24 .qa-panel { left: 57.9%; top: 29%; width: 37.1%; } 
/* .slide-q24 .question-text { transform: translate(0px, 0px); } */
/* .slide-q24 .answers-block { transform: translate(0px, 0px); } */

/* Q25 — Identify this safety device. */
 .slide-q25 .qa-panel { left: 57.9%; top: 29%; width: 37.1%; }  
/* .slide-q25 .question-text { transform: translate(0px, 0px); } */
/* .slide-q25 .answers-block { transform: translate(0px, 0px); } */

/* Q26 — Identify this piece of emergency equipment. */
  .slide-q26 .qa-panel { left: 55.9%; top: 29%; width: 37.1%; } 
/* .slide-q26 .question-text { transform: translate(0px, 0px); } */
/* .slide-q26 .answers-block { transform: translate(0px, 0px); } */

/* Q27 — Identify this piece of emergency equipment. */
  .slide-q27 .qa-panel { left: 51.9%; top: 29%; width: 37.1%; }  
/* .slide-q27 .question-text { transform: translate(0px, 0px); } */
/* .slide-q27 .answers-block { transform: translate(0px, 0px); } */

/* Q28 — Identify this piece of emergency equipment. */
  .slide-q28 .qa-panel { left: 55.9%; top: 28%; width: 37.1%; } 
/* .slide-q28 .question-text { transform: translate(0px, 0px); } */
/* .slide-q28 .answers-block { transform: translate(0px, 0px); } */

/* Q29 — Identify this piece of emergency equipment. */
  .slide-q29 .qa-panel { left: 55.9%; top: 29%; width: 37.1%; } 
/* .slide-q29 .question-text { transform: translate(0px, 0px); } */
/* .slide-q29 .answers-block { transform: translate(0px, 0px); } */

/* Q30 — Identify this piece of emergency equipment. */
  .slide-q30 .qa-panel { left: 56.2%; top: 28%; width: 37.1%; } 
/* .slide-q30 .question-text { transform: translate(0px, 0px); } */
/* .slide-q30 .answers-block { transform: translate(0px, 0px); } */

/* Q31 — Identify this piece of equipment. */
  .slide-q31 .qa-panel { left: 53.9%; top: 28%; width: 37.1%; }  
/* .slide-q31 .question-text { transform: translate(0px, 0px); } */
/* .slide-q31 .answers-block { transform: translate(0px, 0px); } */

/* Q32 — Identify this piece of equipment. */
  .slide-q32 .qa-panel { left: 50.9%; top: 28%; width: 37.1%; }  
/* .slide-q32 .question-text { transform: translate(0px, 0px); } */
/* .slide-q32 .answers-block { transform: translate(0px, 0px); } */

/* Q33 — Identify this piece of equipment. */
 .slide-q33 .qa-panel { left: 54.9%; top: 27%; width: 37.1%; } 
/* .slide-q33 .question-text { transform: translate(0px, 0px); } */
/* .slide-q33 .answers-block { transform: translate(0px, 0px); } */

/* Q34 — To put out a fire in a person's hair or clothes, use: */
 .slide-q34 .qa-panel { left: 55.5%; top: 28%; width: 37.1%; }  
/* .slide-q34 .question-text { transform: translate(0px, 0px); } */
/* .slide-q34 .answers-block { transform: translate(0px, 0px); } */

/* Q35 — When you work in the laboratory long hair must be: */
  .slide-q35 .qa-panel { left: 54.9%; top: 28%; width: 37.1%; }  
/* .slide-q35 .question-text { transform: translate(0px, 0px); } */
/* .slide-q35 .answers-block { transform: translate(0px, 0px); } */

/* Q36 — Helping to clean up the laboratory or classroom is the job of: */
  .slide-q36 .qa-panel { left: 54.2%; top: 28%; width: 37.1%; }  
/* .slide-q36 .question-text { transform: translate(0px, 0px); } */
/* .slide-q36 .answers-block { transform: translate(0px, 0px); } */

/* Q37 — If you see a piece of equipment on fire, or a burning liquid, it is b... */
 .slide-q37 .qa-panel { left: 54.9%; top: 25.5%; width: 37.1%; }  
/* .slide-q37 .question-text { transform: translate(0px, 0px); } */
/* .slide-q37 .answers-block { transform: translate(0px, 0px); } */

/* Q38 — If you are hurt (cut, burned, etc.) tell the: */
 .slide-q38 .qa-panel { left: 54.9%; top: 27%; width: 37.1%; }  
/* .slide-q38 .question-text { transform: translate(0px, 0px); } */
/* .slide-q38 .answers-block { transform: translate(0px, 0px); } */

/* Q39 — Before you touch an electric plug, switch, or outlet: */
  .slide-q39 .qa-panel { left: 55.2%; top: 27.4%; width: 37.1%; } 
/* .slide-q39 .question-text { transform: translate(0px, 0px); } */
/* .slide-q39 .answers-block { transform: translate(0px, 0px); } */

/* Q40 — Although food is not allowed in the lab, covered drinks are. */
 .slide-q40 .qa-panel { left: 51.9%; top: 31%; width: 37.1%; }  
/* .slide-q40 .question-text { transform: translate(0px, 0px); } */
  .slide-q40 .answers-block { transform: translate(100px, -15px); }  

/* Q41 — If a chemical gets into your eyes, you should immediately go to the e... */
  .slide-q41 .qa-panel { left: 52.9%; top: 29%; width: 37.1%; }  
/* .slide-q41 .question-text { transform: translate(0px, 0px); } */
  .slide-q41 .answers-block { transform: translate(100px, -5px); } 

/* Q42 — As long as you are careful, you can frolick and tickle fight in the lab. */
  .slide-q42 .qa-panel { left: 52.9%; top: 30%; width: 37.1%; }  
/* .slide-q42 .question-text { transform: translate(0px, 0px); } */
  .slide-q42 .answers-block { transform: translate(100px, -10px); } 

/* Q43 — Since appearance is important, you should always wear your best outfi... */
  .slide-q43 .qa-panel { left: 49.9%; top: 29%; width: 37.1%; } 
/* .slide-q43 .question-text { transform: translate(0px, 0px); } */
  .slide-q43 .answers-block { transform: translate(100px, 0px); }  

/* Q44 — Smoking is allowed in the laboratory but only if you open a window an... */
 .slide-q44 .qa-panel { left: 50%; top: 33%; width: 37.1%; } 
/* .slide-q44 .question-text { transform: translate(0px, 0px); } */
  .slide-q44 .answers-block { transform: translate(100px, 0px); }  

/* Q45 — Eye protection is not needed while you are reading or writing in the ... */
  .slide-q45 .qa-panel { left: 53.4%; top: 29.5%; width: 37.1%; } 
/* .slide-q45 .question-text { transform: translate(0px, 0px); } */
  .slide-q45 .answers-block { transform: translate(100px, 0px); } 

/* Q46 — If you are on fire you should Stop, Drop & Roll. */
 .slide-q46 .qa-panel { left: 54.9%; top: 34%; width: 37.1%; }  
/* .slide-q46 .question-text { transform: translate(0px, 0px); } */
  .slide-q46 .answers-block { transform: translate(100px, 15px); }