:root {
	--question-marker:          #7ad6c8;
	--question-marker-lighter:  #FFFFFF;

	--yellow-color:             #ffcc4b;
	--yellow-color-hover:       #ffdd66;
	--yellow-shadow:            #D19D00;

	--green-color:              #22baa3;
	--green-color-hover:        #7ad6c8;

	--dark-green-color:         #319391;
	--dark-green-transparent:   #31939168;

	--blue-color:               #0081a9;
	--blue-color-hover:         #4da7c3;
	--blue-transparent:         #0081a968;

	--blue-shadow:              #005975;
	--dark-blue-color:          #19677f;
	--dark-blue-transparent:    #19677F68;

	--purple-color:             #763fa1;
	--purple-color-hover:       #9C73BB;
	--purple-shadow:            #523865;

	--pink-color:               #fb3a68;
	--pink-color-hover:         #FF7596;

	--violet-color:             #402f4c;
	--violet-color-hover:       #836996;
	--violet-transparent:       #402f4c68;
	--violet-transparent-50:    #402f4c80;

	--button-enable-color:      #d19d00;
	--button-active-color:      #76d5c6;
	--button-active-fill-color: #24bba3;
}

body {
	width: 100%;
	height: 100%;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: normal;
	margin: 0;
	padding: 0;
	background-size: cover;
	background-attachment: fixed;
	background-image: url("../../assets/images/backgrounds/1.jpg");
	transition: background 0.7s linear;
	touch-action: none;
	overflow: hidden;
}

::-webkit-scrollbar{
	-webkit-appearance: none;
	width: 8px;
	height: 8px;
	background-color: var(--button-active-color);
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: var(--button-active-fill-color);
}

/* Fix for iPad */
textarea, input[type="range"], input, input:matches([type="password"], [type="search"]) { padding: 2px; }

input:matches([type="button"], [type="submit"], [type="reset"]), input[type="file"]::-webkit-file-upload-button, button { padding: 1px 7px 2px; }


input, textarea {
	background-color: transparent;
	border: none;
	outline: none;
	color: #FFFFFF;
}

/* Used only on Explain This page, maybe... */
input, textarea {
	width: 100%;
	line-height: 1.4em;
	background-attachment: local;
	background-image: repeating-linear-gradient(transparent,transparent 42px,#FFFFFF80 43px,#FFFFFF80 46px,transparent 46px);
	background-position-y: -7px;
	overflow: hidden;
}

textarea {
	resize: none;
	overflow-y: auto;
 }

.fixed-container{ max-width: 1280px; width: 1280px; height: 960px; margin: 0; overflow: visible; }

ul.buttons {
	position: absolute;
	top: 0;
	left: 0;
	width: 96px;
	background: var(--yellow-color);
	border-radius: 0 0 48px 48px;

	-webkit-box-shadow: 5px 5px 2px 2px #00000028;
	box-shadow: 5px 5px 2px 2px #00000028;
}

.buttons>li {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	margin: 11px -29px;
	list-style: none;
}

.buttons>li img {
	width: 55px;
	margin: 10px 9px;
}

/* ---- Lined input ---- */
.line-input-holder {
	display: inline-block;
}

/* ---- Common ---- */
.answer-marker { border-radius: 50%; }
.note-area, .sound-options, .image-shadow, .answer-marker {
	-webkit-box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.2);
	box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.2);
}

.vocab-view, .black-out, .video-background, .ending-box, .message-box, .storybook-background {
	position: absolute;
	top: 0;
	left: calc(100vw * -1);
	right: calc(100vw * -1);
	height: 200%;
	background-color: #402F4CC0;
	overflow: visible;
}

.ending-box, .message-box, .storybook-background { display: none; }

/* ---- Sound Settings ---- */
.sound-options {
	width: 385px;
	display: none;
	background: var(--yellow-color);
	padding: 0.5em;
	border-radius: 0.5em;
	position: absolute;
	top: 28%;
	left: 10%;
	z-index: 2;
}

.sound-options .selector-holder {
	margin: 0.5em 0.3em;
	font-size: 1.3em;
}

.sound-options .arrow-left {
	margin-left: -38px;
	border-right: 32px solid var(--yellow-color);
	margin-top: -4px;
}

.sound-options button {
	outline: none;
	font-family: "Poppins", sans-serif;
	color: #FFFFFF;
	border-radius: 3px;
	text-transform: uppercase;
	border: none;
	margin: 3px 8px;
	min-width: 85px;
}

#snd-mute, #snd-caption { width: 165px; }
#show-read { width: 357px; }

.sound-options .no-mute { background-color: #763fa1A8; color: #FFFFFF80; }
.sound-options .mute    { background-color: #763fa1; }

.sound-options .no-captions { background-color: #22baa3A8; color: #FFFFFF80; }
.sound-options .captions    { background-color: #22baa3; }

.sound-options .no-read { background-color: #fb3a68AB; color: #FFFFFF80; }
.sound-options .read    { background-color: #fb3a68; }

.sound-options .slider-container {
	position: relative;
	display: initial;
}

.sound-options .slider {
	z-index: 1;
	position: relative;
	overflow: visible;
	-webkit-appearance: none;
	width: 55%;
	height: 9px;
	background: var(--violet-color);
	background: linear-gradient(90deg, transparent 0, transparent 9px, #402f4c 9px, #402f4c 760px, transparent 760px);
	background: -moz-linear-gradient(90deg, transparent 0, transparent 9px, #402f4c 9px, #402f4c 760px, transparent 760px);
	outline: none;
}

.sound-options .marker { top: 0; }
.sound-options .marker.start { left: 4px; }
.sound-options .marker.middle { left: calc(50% - 11px); }
.sound-options .marker.end { right: 13px; }

/* ---- Speech ---- */
.talk-button {
	top: 0.6em;
	left: -1em;
	padding-right: 0.25em;
}
.talk-button.inherit { position: inherit; }
.talk-button.sticky { position: sticky; }
.talk-button.floater {
	float: left;
	padding-top: 0.75em;
	padding-left: 0.75em;
}
.talk-button.fa-volume-up { margin-right: -0.15em; }
.read-group {
	margin: 0.5em 0.25em;
}
.green-box .read-group .talk-button.floater {
	padding: 0.125em;
}
.read-group .talk-button.floater {
	padding: 0.125em 0 0 0;
}
/* ---- Vocab ---- */
.vocabularyPopover { text-decoration: underline; }

.no-text-vocab { position: absolute; }

.no-text-vocab > .vocabularyPopover,
.no-text-vocab > .vocabularyPopover:hover {
	color: transparent !important;
	border-bottom: none !important;
}

.vocab-view {
	background-color: #19677FC0;
	z-index: 10;
}

.vocab-folder {
	position: fixed;
	top: 18.6%;
	left: 9.1%;
	width: 90.2%;
	height: 60%;
	background-color: var(--blue-color-hover);
	padding: 20px;
	border-radius: 18px;
	overflow-y: scroll;
	font-size: 1.2em;
	z-index: 30;
}

.vocab-view .arrow-left {
	top: 20%;
	left: 9.8%;
	position: fixed;
	border-right: 32px solid var(--blue-color-hover);
}

.vocab-text ul {
	margin-bottom: 0;
	margin-top: -1em;
}

.vocab-folder, .vocab-folder a { color: #FFFFFF; }

.vocab-close {
	position: fixed;
	top: 13.3%;
	right: -2%;
	width: 5.5%;
	z-index: 31;
	border-radius: 50%;
}

/* ---- Video ---- */
.video-background {
	z-index: 1;
	display: none;
}

#video-container {
	position: fixed;
	top: 18%;
	width: 86%;
	left: 7%;
}

#video-player { width: 100%; }

.video-close {
	position: fixed;
	top: 100px;
	right: 30px;
	width: 75px;
	border-radius: 50%;
}
/* ---- Stop and Jot system ---- */
.note-area {
	width: 425px;
	display: none;
	background: #FFFFFF;
	padding: .5em;
	border-radius: .5em;
	position: absolute;
	top: 2%;
	left: 9%;
	z-index: 2;
	height: 675px;
}

.note-area .btn {
	color: #FFFFFF;
	font-weight: 500;
	text-transform: uppercase;
}
.note-area .full-page { min-height: 650px; }
.note-area .section-name,
.note-area .page-name {
	font-size: 0.8em;
	color: var(--purple-color-hover);
	text-align: center;
	font-weight: 500;
	text-transform: uppercase;
	background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
	background-position-y: 0.6em;
	background-size: 4.5px 4.5px;
	background-repeat: space no-repeat;
	height: 1em;
}
.note-area .section-name {
	font-weight: bold;
	background: none;
	height: 1.5em;
}
.page-header {
	position: sticky;
	top: -0.65em;
	height: 1.3em;

	background: rgb(255,255,255);
	background: -moz-linear-gradient(rgba(255,255,255,1) 0,rgba(255,255,255,1) 22px,rgba(255,255,255,0) 25px);
	background: -webkit-linear-gradient(rgba(255,255,255,1) 0,rgba(255,255,255,1) 22px,rgba(255,255,255,0) 25px);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0, rgba(255,255,255,1) 1.0em, rgba(255,05,255,0) 1.75em);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
.note-area .page-name span {
	background-color: #FFFFFF;
	padding: 0 0.25em;
}
.note-area .arrow-left {
	margin-left: -38px;
	border-right: 32px solid #FFFFFF;
	margin-top: 79px;
}
/*.note-area.toc */
#note-messages {
	height: 100%;
}
.jot-note,
.teacher-note {
	border-radius: 1em 1em 1em 0;
	margin-right: 50px;
	padding: .5em;
	margin: 0.5em 4em 0.5em 0.25em;
}
.jot-note { background-color: var(--purple-color); }
.student-note {
	background-color: #22baa3B0;;
	border-radius: 1em 1em 0 1em;
	margin-right: 50px;
	padding: .5em;
	margin: 0.5em 0.25em 0.5em 4em;
}
.teacher-note { background-color: #0081a9B0; }
#note-messages {
	color: #FFFFFF;
	font-size: 1.2em;
	line-height: 1.25em;
	padding: 0.5em;
	overflow-y: scroll;
/* 	height: 87.9%; */
	word-break: break-word;
	margin-bottom: 0.5em;
}
#note-messages .name {
	font-size: 0.85em;
	text-transform: uppercase;
	font-weight: 500;
}
#note-messages::-webkit-scrollbar {
	width: 20px;
	border-radius: 10px;
}
#note-messages::-webkit-scrollbar-track {
	background: #E2D9EC;
	border-radius: 10px;
}
#note-messages::-webkit-scrollbar-thumb {
	background: #C0ABD4;
	border-radius: 10px;
}
#note-messages::-webkit-scrollbar-thumb:hover {
	background: #C0ABD4A0;
	border-radius: 10px;
}
.note-textarea {
	width: 81.5%;
	background-color: var(--green-color);
	background-image: repeating-linear-gradient(transparent,transparent 19px,#FFFFFF80 20px,#FFFFFF80 21px,transparent 22px);
	overflow-y: visible;
	background-position-y: -1px;
	height: 70px;
	border-radius: 0.5em 0.5em 0 0.5em;
	font-size: 0.85em;
}
.unread-marker {
	position: relative;
	height: 0;
	width: 0;
}
.note-alert {
	position: absolute;
	width: 30px;
	height: 30px;
	top: -1em;
	left: -1em;
	border-radius: 50%;
}
.note-send-button { background-color: var(--green-color); }
.note-area.teacher .note-send-button,
.note-area.teacher .note-textarea {
	background-color: var(--blue-color);
	border-radius: 0.5em 0.5em 0.5em 0;
}
/* ---- Custom ---- */
.unread-note-marker {
	position: relative;
	top: -80px;
	left: -8px;
	border-radius: 50%;
	background-color: #FF0000;
	width: 25px;
	height: 25px;
	text-align: center;
	color: #ffffff;
}
.user-notice {
	top: 0%;
	position: absolute;
	left: 7.4%;
	background: var(--yellow-color);
	padding: 0 1em;
	margin: 0;
	height: 24px;
	border-radius: 0 0 12px 0;
}

.yellow-color                     { background-color: var(--yellow-color); }
.pink-color,
#home-button,
li#save-progress.error            { background-color: var(--pink-color); }
.purple-color,
#comment-button                   { background-color: var(--purple-color); }
.blue-color,
#vocab-button                     { background-color: var(--blue-color); }
.violet-color,
#dashboard-button                 { background-color: var(--violet-color); }
.purple-color,
#back-to-accounts                 { background-color: var(--purple-color); }
.green-color,
li#save-progress.progress-changed,
li#save-progress.progress-saving  { background-color: var(--green-color); }
li#save-progress.no-progress      { background-color: #000000; opacity: 0.2; }
#sound-button                     { background-color: #00000034; }

#comment-button { margin-top: 15px; }

.solid-light-purple-box p:first-child,
.solid-light-green-box p:first-child, .solid-green-box p:first-child, .solid-dark-green-box p:first-child,
.light-green-box p:first-child, .green-box p:first-child, .dark-green-box p:first-child { margin-top: 0.5em; }

.solid-light-purple-box p:last-child,
.solid-light-green-box p:last-child,  .solid-green-box p:last-child,  .solid-dark-green-box p:last-child,
.light-green-box p:last-child,  .green-box p:last-child,  .dark-green-box p:last-child { margin-bottom: 0.5em; }

.solid-blue-box, .solid-red-box, .solid-yellow-box,
.solid-violet-box,
.solid-light-purple-box,
.solid-light-green-box, .solid-green-box, .solid-dark-green-box,
.light-green-box, .green-box, .dark-green-box {
	position: absolute;
	text-align: center;
	letter-spacing: 0.015em;
	border-radius: 8px;
	color: #FFFFFF;
}

.solid-yellow-box { color: #000000; }

.solid-blue-box, .solid-red-box, .solid-yellow-box,
.light-green-box, .green-box, .dark-green-box {
	font-size: 2em;
	line-height: 0.75em;
}

.solid-violet-box,
.solid-light-purple-box, .solid-light-green-box, .solid-green-box, .solid-dark-green-box {
	font-size: 2.5em;
	line-height: 1.25em;
	-webkit-box-shadow: 5px 5px 2px 2px #00000028;
	box-shadow: 5px 5px 2px 2px #00000028;
	border-top: 2px outset #402F4C80;
	border-left: 1px outset #402F4C80;
	border-bottom: 1px outset #402F4C80;
}

.solid-light-green-box, .solid-green-box, .solid-dark-green-box {
	-webkit-box-shadow: 5px 5px 2px 2px #00000028;
	box-shadow: 5px 5px 2px 2px #00000028;
	border-top: 2px outset #19677f80;
	border-left: 1px outset #19677f80;
	border-bottom: 1px outset #19677f80;
}

.solid-light-purple-box p,
.solid-light-green-box p, .solid-green-box p, .solid-dark-green-box p,
.light-green-box p, .green-box p, .dark-green-box p {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.solid-violet-box { background: var(--violet-color); }
.solid-light-purple-box { background: var(--purple-color); }

.solid-light-green-box { background: var(--green-color-hover); }
.solid-green-box       { background: var(--green-color); }
.solid-dark-green-box  { background: var(--dark-green-color); }

.light-green-box { background: #7ad6c872; }
.green-box       { background: #22baa372; }
.dark-green-box  { background: #31939172; }

.solid-red-box    { background: var(--pink-color); }
.solid-blue-box   { background: var(--blue-color); }
.solid-yellow-box { background: var(--yellow-color); }

.arrow-left, .arrow-right {
	width: 0;
	height: 0;
	border-top: 32px solid transparent;
	border-bottom: 32px solid transparent;
	position: absolute;
	border-radius: 0.5em;
	margin-top: -4px;
}

.arrow-left {
	float: left;
	margin-left: -38px;
}

.arrow-right {
	float: right;
	margin-left: 99%;
}

.arrow-top, .arrow-bottom {
	width: 0;
	height: 0;
	border-left: 32px solid transparent;
	border-right: 32px solid transparent;
	position: absolute;
	border-radius: 0.5em;
	margin-left: 43%;
}

.arrow-top {
	float: left;
	margin-top: -38px;
}

.arrow-bottom {
	float: right;
}

.student-progress-stops {
	position: absolute;
	background: var(--pink-color);
	color: #FFFFFF;
	font-size: 1.5em;
	font-weight: bold;
	padding: 1em 0.5em;
	border-radius: 0.5em;
	text-align: center;
	top: 40%;
	right: 0;
	-webkit-box-shadow: 5px 5px 2px 2px #00000028;
	box-shadow: 5px 5px 2px 2px #00000028;
}
/* ---- Selector ---- */
.selection-textbox {
	display: contents;
	padding-top: 19px;
}

.selector-holder {
	position: relative;
	display: inline-block;
	background-color: var(--pink-color);
	z-index: 2;
	width: 360px;
	border-radius: 17px;
	text-align: center;
}

.selector-holder select {
	border: none;
	outline: none;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	border-radius: 0;
	margin: 0;
	display: block;
	width: 100%;
	padding: 12px 85px 12px 15px;
	color: #FFFFFF;
	-ms-background: #FF9966;
	text-overflow: ellipsis;
}

/* For Edge */
.selector-holder select::-ms-expand { display: none; }
option { background-color: #1F5C68; }
/* For Edge */
#voice-choice-holder .selector-holder {
	display: block;
	line-height: 2.1em;
}
.selector-holder::after {
	position: absolute;
	right: 0;
	top: 0;
	width: 70px;
	height: 100%;
	line-height: 38px;
	content: '\25BC';
	text-align: center;
	color: #FFFFFF;
	font-size: 24px;
	/* border-left: 1px solid #3c1c78; */
	background-color: #00000080;
	z-index: -1;
	border-radius: 0 17px 17px 0;
	line-height: 67px;
}
.no-dropdown::after { content: none !important;}

.selector-blue   { background-color: var(--blue-color-hover) !important; }
.selector-purple { background-color: var(--purple-color) !important; }
.selector-green  { background-color: var(--green-color) !important; }
.selector-yellow { background-color: var(--yellow-color) !important; }
.selector-pink   { background-color: var(--pink-color) !important; }
.selector-violet { background-color: var(--violet-color) !important; }

/* ---- Generic Table ---- */
th { font-weight: 700; }
td { font-weight: 500; }

tr:first-child > th:first-child { border-radius: 8px 0 0 0; }
tr:first-child > th:last-child  { border-radius: 0 8px 0 0; }
tr:last-child > td:first-child  { border-radius: 0 0 0 8px ; }
tr:last-child > td:last-child   { border-radius: 0 0 8px 0; }

th, td { border-right: 7px solid var(--violet-color); }
th:last-child, td:last-child { border-right: var(--violet-color); }

/* ---- Data Table ---- */
.data-table {
	position: absolute;
	text-align: center;
	color: var(--violet-color);
	font-size: 2em;
	line-height: 3.5em;
}

.data-table table { width: 100%; }

.data-table th { background-color: var(--green-color); }
.data-table td { background-color: var(--green-color-hover); }

/* ---- Scientist Table ---- */
#scientist-tags {
	position: absolute;
	top: 16%;
	left: 10.6%;
	line-height: 1.6em;
	text-align: center;
	font-size: 1.3em;
}

#scientist-tags th { padding: 0 2.5em; }

#site-table {
	text-align: center;
	line-height: 1.2;
	font-size: .7em;
	float: right;
	margin-right: 54px;
	margin-top: 39px;
}

#site-table th {
	padding: 0.2em 0.7em;
	font-size: 0.95em;
}

#site-table td { padding: 0.2em 0; }
/* ---- Color Table ---- */
.color-table th {
	background-color: #FFFFFF;
	color: var(--violet-color);
}

.color-table tr, .color-table tr:hover { color: #FFFFFF; }
.color-table tr:nth-child(4n+1)  { background-color: var(--pink-color); }
.color-table tr:nth-child(4n+2)  { background-color: var(--yellow-color); }
.color-table tr:nth-child(4n+3)  { background-color: var(--blue-color); }
.color-table tr:nth-child(4n)    { background-color: var(--purple-color); }
.color-table tr:nth-child(4n+1):not(.noHover):hover { background-color: var(--pink-color-hover); }
.color-table tr:nth-child(4n+2):not(.noHover):hover { background-color: var(--yellow-color-hover); }
.color-table tr:nth-child(4n+3):not(.noHover):hover { background-color: var(--blue-color-hover); }
.color-table tr:nth-child(4n):not(.noHover):hover { background-color: var(--purple-color-hover); }

/* ---- Buttons ---- */
.click-button {
	border-radius: .5em;
	font-weight: bold;
	color: #FFFFFF;
	text-transform: uppercase;
	padding: 20px 20px;
	width: 300px;
	text-align: center;
	margin: 20px auto;
}

.click-button.yellow { background-color: var(--yellow-color); }
.click-button.blue   { background-color: var(--blue-color); }
.click-button.green  { background-color: var(--green-color); }
.click-button.pink   { background-color: var(--pink-color); }
.click-button.purple { background-color: var(--purple-color-hover); }
.click-button.violet { background-color: var(--violet-color); }
.click-button.yellow:not(.noHover):hover { background-color: var(--yellow-color-hover); }
.click-button.blue:not(.noHover):hover   { background-color: var(--blue-color-hover); }
.click-button.green:not(.noHover):hover  { background-color: var(--green-color-hover); }
.click-button.pink:not(.noHover):hover   { background-color: var(--pink-color-hover); }
.click-button.violet:not(.noHover):hover { background-color: var(--violet-color-hover); }

.done-button, .small-ui-button, .ui-button {
	position: absolute;
	border: none;
	border-radius: 0.5em;
	background-color: var(--yellow-color);
	color: var(--violet-color);
	-webkit-box-shadow: 4px 4px 0px 0px var(--button-enable-color);
	box-shadow: 4px 4px 0px 0px var(--button-enable-color);
	font-weight: bold;
	text-transform: uppercase;
	padding: 30px;
	margin: 15px;
	line-height: 0.7em;
}

.small-ui-button.selected, .small-ui-button.disabled {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.small-ui-button.selected { background-color: var(--button-active-color); }
.small-ui-button.disabled { background-color: #bcbec0; }

.small-ui-button {
	font-size: 1em;
	position: inherit;
	padding: 10px;
	margin: 8px 4px;
	min-width: 30px;
}

/* ---- Slider ---- */
.timeline-slider-container {
	position: absolute;
	top: 32px;
	left: 56px;
	right: 62px;
/* 	left: 64px; */
/* 	width: 767px; */
	overflow: visible;
}

.timeline-slider,
.levels-slider {
	overflow: visible;
	-webkit-appearance: none;
	width: 100%;
	background: var(--violet-color);
	outline: none;
}

.timeline-slider {
	height: 11px;
	background: linear-gradient(90deg, transparent 0, transparent 8px, #402f4c 8px, #402f4c 760px, transparent 760px);
	background: -moz-linear-gradient(90deg, transparent 0, transparent 8px, #402f4c 8px, #402f4c 760px, transparent 760px);
}
.levels-slider {
	height: 6px;
	background: linear-gradient(90deg, transparent 0, transparent 18px, #402f4c 8px, #402f4c 205px, transparent 205px);
	background: -moz-linear-gradient(90deg, transparent 0, transparent 18px, #402f4c 8px, #402f4c 205px, transparent 205px);
}

.sound-options .slider::-webkit-slider-thumb,
.timeline-slider::-webkit-slider-thumb,
.levels-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 38px;
	height: 25px;
	border: 0;
	background: url("../images/shark-map/triangle.png");
	background-size: cover;
	background-position: top left;
	cursor: pointer;
}
.sound-options .slider::-webkit-slider-thumb { margin-top: 8px; }

.sound-options .slider::-moz-range-thumb,
.timeline-slider::-moz-range-thumb,
.levels-slider::-moz-range-thumb {
	width: 38px;
	height: 25px;
	border: 0;
	background: url("../images/shark-map/triangle.png");
	background-size: cover;
	background-position: top left;
	cursor: pointer;
}

#time-slider {
	position: absolute;
	top: 80%;
	left: 17%;
	width: 66.6%;
}

.timeline-label,
.levels-label,
.slider-label {
	position: absolute;
	font-weight: bold;
	color: var(--violet-color);
	text-align: center;
	line-height: 1.1em;
}

.timeline-label {
	top: 20px;
	font-size: 1.25em;
}

.slider-label {
	width: 100%;
	top: 0;
	font-size: 1.5em;
}

.levels-label {
	width: 100%;
	top: 10px;
	font-size: 1.2em;
}

.dropzone.ui-droppable-hover { background-color: #FFFFFF60; }

.sound-options .marker,
.timeline-marker,
.slider-marker {
	position: absolute;
	width: 10px;
	height: 29px;
	background-color: var(--violet-color);
}
.slider-marker {
	width: 6px;
	top: 32px;
}
.timeline-marker { top: 30px; }

#marker-start { left: 72px; }
#marker-end { left: 814px; }
#marker-start-label { left: 19px;  top: 66px; }
#marker-end-label { left: 748px; top: 66px; }

#marker-1 { left: 55px; }
#marker-2 { left: 443px; }
/*
#marker-3 { left: 449px; }
*/
#marker-4 { right: 62px; }

#marker-1-label { left: 0; }
#marker-2-label { left: 375px; top: 9px; }
/*
#marker-3-label { left: 383px; }
*/
#marker-4-label { right: 0; }

svg #Red {
	position: absolute;
	width: 75.3%;
	top: -213px;
	left: 239px;
}

/*
#Red    .cls-1 { stroke: #dc4c6a; }
#Blue   .cls-1 { stroke: #65a5c0; }
#Purple .cls-1 { stroke: #6f429c; }
#Yellow .cls-1 { stroke: #f7ce63; }
#Red    .cls-2 { fill: #dc4c6a; }
#Blue   .cls-2 { fill: #65a5c0; }
#Purple .cls-2 { fill: #6f429c; }
#Yellow .cls-2 { fill: #f7ce63; }
*/

/* ---- StoryBook pages ---- */
.storypage {
	position: fixed;
	left: 9% !important;
	top: 7% !important;
	width: 82% !important;
	height: unset !important;
}

.for-centering {
	position: relative;
	left: 0.5em;
}

.storypage .green-box p {
	display: table-cell;
	vertical-align: middle;
	height: 4.7em;
	position: relative;
	width: 1018px;
}

.page-image {
	width: 97%;
	padding-bottom: 0.5em;
}

/* ---- Pages ---- */
.page-counter {
	position: absolute;
	width: 100%;
	bottom: 0%;
	text-align: center;
}

#page-tracker { margin: 0; }

#page-tracker li {
	display: inline-block;
	background: #FFFFFF20;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	margin: 0 4.9px;
}

#page-tracker li.current, #page-tracker li.current ~ li {
	background: #FFFFFF48;
}

#page-tracker li.current { background: var(--yellow-color); }
#page-tracker li.link { background: #ffffff; }

/* ---- Arror ---- */
.previous-page-arrow, .next-page-arrow {
	top: 40%;
	position: absolute;
	background: var(--yellow-color);
	border-radius: 50%;
	height: 75px;
	width: 73px;
	padding: 5px 10px 5px 15px;
}

.previous-page-arrow{
	left: 1%;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-box-shadow: -5px -5px 2px 2px #00000028;
	box-shadow: -5px -5px 2px 2px #00000028;
}

.next-page-arrow {
	right: 1%;
	-webkit-box-shadow: 5px 5px 2px 2px #00000028;
	box-shadow: 5px 5px 2px 2px #00000028;
}

.hidden { display: none; }

.fade-in-and-scale-anim {
	animation-duration: .7s;
	animation-name: fade-in-and-scale;
}

.fade-out-and-scale-anim {
	animation-duration: .7s;
	animation-name: fade-out-and-scale;
}

@keyframes fade-in-and-scale {
	from {
		opacity: 0;
		transform: scale(.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
/*		transform-origin: */
	}
}

@keyframes fade-out-and-scale {
	from {
		opacity: 1;
		transform: scale(1, 1);
	}
	to {
		opacity: 0;
		transform: scale(.8, .8);
	}
}

.virtual-joypad {
	height: 190px;
	width: 190px;
	position: absolute;
	bottom: 0;
	z-index: 1;
}
.virtual-joypad img { width: 100%; height: 100%; }
.vpad-button { position: absolute; }
#vpad-up {
	top: 0;
	left: 32%;
	width: 36%;
	height: 33%
}
#vpad-right {
	top: 32%;
	left: 0;
	height: 36%;
	width: 32%;
}
#vpad-down {
	bottom: 0;
	left: 32%;
	width: 36%;
	height: 33%
}
#vpad-left {
	top: 32%;
	right: 0;
	height: 36%;
	width: 32%;
}

body { -webkit-touch-callout: none; }
#vpad, #vpad img {
	touch-action: manipulation;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}

.vpad-button, #vpad img { pointer-events: none; }
#vpad-up.active, #vpad-right.active,
#vpad-down.active, #vpad-left.active {
	background-color: var(--green-color);
	opacity: 0.5;
	box-shadow: 0 0 10px 5px var(--green-color);
}

/* ---- AR Button ---- */
.prev-page-button,
.xr-launch-button {
	border-radius: 0.5em;
	font-weight: bold;
	color: #FFFFFF;
	text-transform: uppercase;
	padding: 20px 20px;
	border: 0;
	border-radius: 0.5em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 30px;
	margin: 15px;
	line-height: .7em;
}

.back-or-xr .prev-page-button,
.back-or-xr .xr-launch-button {
	width: 300px;
}

.prev-page-button {
	margin-top: 0;
	background-color: var(--green-color);
	-webkit-box-shadow: 7px 8px 0 0 var(--dark-green-color);
	box-shadow: 7px 8px 0 0 var(--dark-green-color);
}

.xr-launch-button {
	margin-top: 30px;
	background-color: var(--pink-color);
	-webkit-box-shadow: 7px 8px 0 0 #901f3a;
	box-shadow: 7px 8px 0 0 #901f3a;
}

.xr-instructions-close {
	position: absolute;
	top: -5.7%;
	right: -2%;
	width: 5.5%;
	z-index: 31;
	border-radius: 50%;
}

.back-or-xr { z-index: 2; }

.back-or-xr .xr-instructions-close {
	right: -9%;
	top: -9.7%;
	width: 15.5% !important;
}

.xr-box > .solid-light-purple-box {
	top: 11%;
	left: 11%;
	position: fixed;
	width: 76%;
}

.back-or-xr > .solid-light-purple-box {
	background-color: var(--yellow-color);
	top: 39.8%;
	left: 0.8%;
	z-index: 1;
	color: #000000;
	width: 29%;
}

/* ---- iFrame ---- https://benmarshall.me/responsive-iframes/
.article-iframe {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	position: absolute;
	z-index: 1;
}

.iframe-container {
	height: 0;
	overflow: hidden;
	position: relative;
}

.article-iframe-container {
	width: 70%;
	height: 70%;
	top: 8%;
	left: 13%;
	border: 0.2em solid #FFFFFF;
	z-index: 1;
}

.iframe-container-16x9 { padding-bottom: 56.25%; }

.iframe-container-4x3 { padding-bottom: 75%; }

.iframe-container iframe {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/

@-webkit-keyframes opacity-pulse {
	0%, 20% { display: none; opacity: 1; }
	10% { display: block; opacity: 0.15; }
}
@-moz-keyframes opacity-pulse {
	0%, 20% { display: none; opacity: 1; }
	10% { display: block; opacity: 0.15; }
}
@-o-keyframes opacity-pulse {
	0%, 20% { display: none; opacity: 1; }
	10% { display: block; opacity: 0.15; }
}
@keyframes opacity-pulse {
	0%, 20% { display: none; opacity: 1; }
	10% { display: block; opacity: 0.15; }
}

.question-marker-incomplete {
	color: var(--green-color-hover);
	display: inline-block;
	animation: question-notice 20s 30s infinite;
}

.question-marker-complete{
	color: var(--yellow-color);
	display: inline-block;
	animation: question-complete linear 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	-webkit-animation: question-complete linear 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: question-complete linear 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-o-animation: question-complete linear 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-ms-animation: question-complete linear 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
}

@keyframes question-complete{
	0% { transform: rotate(0deg) scaleX(1.00) scaleY(1.00); }
	10% { transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	20% { transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	30% { transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	40% { transform: rotate(-3deg) scaleX(2.00) scaleY(2.00); }
	50% { transform: rotate(3deg) scaleX(2.50) scaleY(2.50); }
	60% { transform: rotate(-3deg) scaleX(3.00) scaleY(3.00); }
	70% { transform: rotate(3deg) scaleX(3.00) scaleY(3.00); }
	80% { transform: rotate(-3deg) scaleX(2.50) scaleY(2.50); }
	90% { transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	100% { transform: rotate(0deg) scaleX(2.00) scaleY(2.00); }
}
@-moz-keyframes question-complete{
	0% { -moz-transform: rotate(0deg) scaleX(1.00) scaleY(1.00); }
	10% { -moz-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	20% { -moz-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	30% { -moz-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	40% { -moz-transform: rotate(-3deg) scaleX(2.00) scaleY(2.00); }
	50% { -moz-transform: rotate(3deg) scaleX(2.50) scaleY(2.50); }
	60% { -moz-transform: rotate(-3deg) scaleX(3.00) scaleY(3.00); }
	70% { -moz-transform: rotate(3deg) scaleX(3.00) scaleY(3.00); }
	80% { -moz-transform: rotate(-3deg) scaleX(2.50) scaleY(2.50); }
	90% { -moz-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	100% { -moz-transform: rotate(0deg) scaleX(2.00) scaleY(2.00); }
}
@-webkit-keyframes question-complete {
	0% { -webkit-transform: rotate(0deg) scaleX(1.00) scaleY(1.00); }
	10% { -webkit-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	20% { -webkit-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	30% { -webkit-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	40% { -webkit-transform: rotate(-3deg) scaleX(2.00) scaleY(2.00); }
	50% { -webkit-transform: rotate(3deg) scaleX(2.50) scaleY(2.50); }
	60% { -webkit-transform: rotate(-3deg) scaleX(3.00) scaleY(3.00); }
	70% { -webkit-transform: rotate(3deg) scaleX(3.00) scaleY(3.00); }
	80% { -webkit-transform: rotate(-3deg) scaleX(2.50) scaleY(2.50); }
	90% { -webkit-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	100% { -webkit-transform: rotate(0deg) scaleX(2.00) scaleY(2.00); }
}
@-o-keyframes question-complete {
	0% { -o-transform: rotate(0deg) scaleX(1.00) scaleY(1.00); }
	10% { -o-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	20% { -o-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	30% { -o-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	40% { -o-transform: rotate(-3deg) scaleX(2.00) scaleY(2.00); }
	50% { -o-transform: rotate(3deg) scaleX(2.50) scaleY(2.50); }
	60% { -o-transform: rotate(-3deg) scaleX(3.00) scaleY(3.00); }
	70% { -o-transform: rotate(3deg) scaleX(3.00) scaleY(3.00); }
	80% { -o-transform: rotate(-3deg) scaleX(2.50) scaleY(2.50); }
	90% { -o-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	100% { -o-transform: rotate(0deg) scaleX(2.00) scaleY(2.00); }
}
@-ms-keyframes question-complete {
	0% { -ms-transform: rotate(0deg) scaleX(1.00) scaleY(1.00); }
	10% { -ms-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	20% { -ms-transform: rotate(-3deg) scaleX(0.50) scaleY(0.50); }
	30% { -ms-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	40% { -ms-transform: rotate(-3deg) scaleX(2.00) scaleY(2.00); }
	50% { -ms-transform: rotate(3deg) scaleX(2.50) scaleY(2.50); }
	60% { -ms-transform: rotate(-3deg) scaleX(3.00) scaleY(3.00); }
	70% { -ms-transform: rotate(3deg) scaleX(3.00) scaleY(3.00); }
	80% { -ms-transform: rotate(-3deg) scaleX(2.50) scaleY(2.50); }
	90% { -ms-transform: rotate(3deg) scaleX(2.00) scaleY(2.00); }
	100% { -ms-transform: rotate(0deg) scaleX(2.00) scaleY(2.00); }
}

@keyframes question-notice{
	0%, 8% { transform: rotate(0deg) scale(1.0); color: var(--question-marker);}
	4% { transform: rotate(360deg) scale(1.5); color: var(--question-marker-lighter); }
}
@-moz-keyframes question-notice{
	0%, 8% { -moz-transform: rotate(0deg) scale(1.0); color: var(--question-marker);}
	4% { -moz-transform: rotate(360deg) scale(1.5); color: var(--question-marker-lighter); }
}
@-webkit-keyframes question-notice {
	0%, 8% { -webkit-transform: rotate(0deg) scale(1.0); color: var(--question-marker);}
	4% { -webkit-transform: rotate(360deg) scale(1.5); color: var(--question-marker-lighter); }
}
@-o-keyframes question-notice {
	0%, 8% { -o-transform: rotate(0deg) scale(1.0); color: var(--question-marker);}
	4% { -o-transform: rotate(360deg) scale(1.5); color: var(--question-marker-lighter); }
}
@-ms-keyframes question-notice {
	0%, 8% { -ms-transform: rotate(0deg) scale(1.0); color: var(--question-marker);}
	4% { -ms-transform: rotate(360deg) scale(1.5); color: var(--question-marker-lighter); }
}

.btn-back-wrap {
	position: absolute;
    bottom: 6%;
    left: -2.5%;
    z-index: 9;
}

.btn_back, .btn_tour {
	color: #FFFFFF;
	background-color: var(--purple-color);
	box-shadow: 6px 8px var(--purple-shadow);
    border-radius: 10px;
    font-size: 25px;
    color: #ffffff;
    border: 0;
    margin: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    padding: 7px;
    outline: none;
	margin-bottom: 29px;
}

.btn_back {
	height: 64px;
	width: 150px;
}

.btn_tour {
	height: 64px;
	width: 185px;
}

.btn_back:hover {
	color: #FFFFFF !important;
	background-color: var(--purple-color-hover);
	box-shadow: 6px 8px var(--purple-shadow);
}

.btn:hover, .btn-back:hover { color: #ffffff !important; }

.btn:focus,.btn:active {
	outline: none !important;
	box-shadow: none;
 }