/*

	DMC COURSE, LITE (ACCESSIBLE AND FAST) VERSION
	VERSION 1.0 [MAIN]
	
	-----------------------------------------
	
	developer: 	Michel Joanisse
	email: 		michel.joanisse@digitalmuseums.ca
	
*/
/**
* !! DO NOT EDIT CSS FILE DIRECTLY.
* MODIFY ONLY SCSS FILES.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

i {
  font-style: normal; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ************************************************************************ */
/* Colour scheme, to integrate later: Colours.Cafe > 867 */
/*
background:#261436; // DARK PURPLE MEETS BLUE.
background:#6C3ED4; // PURPLE.
background:#BE92E8; // LAVENDER.
background:#F1E6EA; // SOFT PINK / PURPLE.
background:#EBC20C; // YELLOW RAIN JACKET.
*/
html {
  font-family: Arial; }

:focus {
  outline: 4px solid #FC1B27; }

.sidebar {
  width: 16em;
  background: #000;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  padding: 2em;
  box-sizing: border-box; }

.sidebar-bd {
  display: flex;
  align-items: center;
  flex-direction: column; }

.w-love {
  font-size: 0.75em;
  margin-bottom: 3em; }

.heart-icon {
  background: url("../images/Heart.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 0.6875em;
  height: 0.625em;
  display: inline-flex;
  margin: 0 0.25em; }
  .heart-icon .text {
    display: block;
    position: absolute;
    left: -999em;
    top: 0; }

.logo {
  flex-shrink: 0;
  display: table;
  margin-bottom: 2.5em;
  opacity: 0.7; }
  .logo:last-child {
    margin: 0; }
  .logo:hover, .logo:focus {
    opacity: 1;
    transform: scale(1.05); }
  .logo:focus {
    outline: 4px solid yellow; }
  .logo:active {
    transform: scale(1); }

.logo--dmc {
  width: 8.75em;
  height: 3.3125em; }

.logo--dmc-fr {
  width: 9.6875em; }

.logo--au {
  width: 8.3125em;
  height: 2.5em; }

.logo img {
  width: 100%;
  height: 100%;
  display: block; }

body {
  line-height: 1.5; }

.main-master {
  padding: 3em;
  max-width: 40em;
  padding-bottom: 50vh;
  margin-left: 16em; }

h1, h2, h3, h4, h5, h6, p, ul, ol, table,
.toc, .callout, .box, .box-set,
.answer, .spotlight,
.knowledge-check {
  margin: 0 0 1.5em; }

table {
  font-size: inherit; }

h1 {
  font-size: 2.5em; }

h2 {
  margin-bottom: 1em;
  font-size: 2em; }

.module-heading {
  text-transform: uppercase; }

sup {
  position: relative;
  top: -0.5em;
  font-size: 72%; }

dt {
  font-weight: bold; }

dt, dd {
  margin-bottom: 0.5em; }

h1, h2, h3, h4 {
  line-height: 1.125; }

h3 {
  line-height: 1.25; }

ul ul {
  margin-bottom: 0; }

ol, ul {
  margin-left: 2em; }

ol {
  list-style-type: decimal; }

ul {
  list-style-type: disc; }

li {
  margin-bottom: 0.75em; }

.margin-size-lg li {
  margin-bottom: 1em; }

.margin-size-sm li {
  margin-bottom: 0.25em; }

.toc {
  background: rgba(0, 0, 0, 0.1);
  padding: 1.5em; }

.toc li li {
  margin-bottom: 0.25em; }

ul ul {
  margin-top: 0.75em; }

.toc ul, .toc ol {
  margin: 0;
  list-style-type: none;
  list-style-position: inside; }

.toc ol {
  margin-top: 0.5em;
  margin-left: 1.5em; }

.number .decimal {
  /* for screen reader interpretation only, hide from sighted experiences. */
  position: absolute;
  display: block;
  left: -999em;
  top: 0; }

.callout {
  background: #F0EAFA;
  padding: 1.5em; }

.callout :last-child {
  margin-bottom: 0; }

.box, .knowledge-check {
  border: 1px solid #bbb;
  padding: 1.5em; }

.box :last-child,
.knowledge-check :last-child {
  margin-bottom: 0; }

.knowledge-check .question {
  margin-bottom: 1em; }

.box-set .box {
  margin-bottom: 0;
  margin-top: -1px; }

.list-lower-alpha {
  list-style-type: lower-alpha; }

.list-styleless {
  list-style-type: none;
  margin-left: 1.5em; }

.list-indent-none {
  margin-left: 0; }

.answer {
  font-size: 0.75em;
  padding: 1.3333333333em 2em;
  background: #E6F8ED; }

.answer > :last-child {
  margin-bottom: 0; }

.module, .learning-note, .prelude {
  margin-bottom: 4.5em; }

.spotlight {
  background: #F3F6FD;
  padding: 1.5em; }

.spotlight-icon {
  text-align: center; }

.spotlight > :last-child {
  margin-bottom: 0; }

.q {
  margin-top: 3em; }

.not:active {
  background: red;
  color: #fff; }

.not .text-icon,
.answer-toggle .text-icon {
  display: none; }

.not:active .text-icon,
.answer-toggle:active .text-icon {
  display: inline-block; }

.is:active {
  background: green;
  color: #fff; }

.answer-toggle:active {
  background: purple;
  color: #fff; }

td {
  border: 1px dotted #bbb;
  padding: 0.5em;
  width: 50%; }

.certificate-form {
  position: relative;
  border: 1px solid #bbb;
  background: rgba(0, 0, 0, 0.1);
  padding: 1.5em; }

.certificate-form fieldset {
  margin-bottom: 1.5em; }

.certificate-form fieldset:last-child {
  margin: 0; }

.a11y-only {
  position: absolute;
  display: block;
  left: -999em;
  top: 0; }

input {
  font-size: 1em;
  padding: 0.5em;
  border: 1px solid #bbb; }

.certificate-form p {
  margin: 0; }

.certificate-form label, .certificate-form .label-replacement {
  display: block;
  margin-bottom: 0.25em; }

input#name {
  width: 16em; }

input[type="date"] {
  font-family: inherit; }

.certificate-form-icon {
  position: absolute;
  top: 1em;
  right: 1em; }

body {
  font-size: 20px; }

@media (min-width: 1920px) {
  body {
    font-size: 28px; } }

@media (max-width: 1024px) {
  .sidebar {
    font-size: 12px; }
  .main-master {
    margin-left: 192px; } }

@media (max-width: 900px) {
  body {
    font-size: 16px; } }

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    display: block;
    position: static;
    align-items: center;
    display: flex; }
  .sidebar-bd {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    grid-gap: 16px 24px; }
  .logo {
    font-size: 10px; }
  .w-love {
    grid-column: span 2;
    margin: 0; }
  .logo--dmc {
    margin: 0; }
  .logo--au {
    justify-self: flex-end; }
  .main-master {
    margin-left: 0; } }

@media (max-width: 640px) {
  h1 {
    font-size: 2em; }
  h2 {
    font-size: 1.25em; }
  .main-master {
    padding: 1.75em;
    max-width: none; } }