:root {
	--star-appear-anim-length-1: 0.6s;
	--star-appear-anim-length-2: 0.2s;
	--badge-level-anim-length-1: 0.6s;
	--badge-level-anim-length-2: 0.95s;
}

body {
	margin: auto;
	padding: 0px;
	background-color: #323b45;
	text-align: center;
	overflow-y: hidden;
	overflow-x: hidden;
}

img {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.scrollbar {
	scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
	scrollbar-width: thin;	
}

.scrollbar::-webkit-scrollbar {
	width: 7px;
}

.scrollbar::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 2px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.25);
}

.scrollbar-hidden {
	scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
	display: none;
}

div#main_container {
	position: relative;
	max-width: 100vw;
	margin: 0 auto;
	border: 0px solid red;
	left: 0%;

	filter: blur(0px) brightness(1) contrast(1);
}

span.page_title {
	top: 5vh;

	font-size: 4.08vh;
	color: #B9FFF2;
	font-family: 'BungeeRegular', Arial, sans-serif;
}

div#holoroom {
	position: absolute;
	width: 216.67vh;
	height: 100vh;
	top: 0vh;
	background-color: #666;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
}

.room_bg {
	position: absolute;
	height: 100vh;
	width: calc(100vh * 3120 / 1440);

	left: 50%;
	transform: translateX(-50%);
}

.lobby_corridor {
	position: absolute;
	height: 100vh;
	width: calc(100vh * 3120 / 1440);
	left: 50%;
	transform: translateX(-50%);
}

.big_door_panel {
	position: absolute;
	transform: translateX(-50%);
}

.mini_door_panel {
	position: absolute;
	transform: translateX(-50%);
}

#door_panel_1 {
	top: 0vh;
	left: calc(50% + 100vh * ((968 / 2) + 593 - (3120 / 2)) / 1440);
	transform-origin: 88.53% 0%;

	width: calc(100vh * 968 / 1440);
	height: calc(100vh * 1048 / 1440);
}

#mini_door_panel_1 {
	top: calc(0vh + 38.96vh);
	left: calc(50% + 0.2545 * (100vh * ((968 / 2) + 593 - (3120 / 2)) / 1440));

	transform-origin: 88.53% 0%;

	width: calc(100vh * 0.2545 * 968 / 1440);
	height: calc(100vh * 0.2545 * 1048 / 1440);
}

#door_panel_2 {
	top: calc(100vh * 687 / 1440);
	left: calc(50% + 100vh * ((1169 / 2) + 434 - (3120 / 2)) / 1440);

	transform-origin: 16.94% 0%;

	width: calc(100vh * 1169 / 1440);
	height: calc(100vh * 753 / 1440);
}

#mini_door_panel_2 {
	top: calc(38.96vh + 0.2545 * (100vh * 687 / 1440));
	left: calc(50% + 0.2545 * (100vh * ((1169 / 2) + 434 - (3120 / 2)) / 1440));

	transform-origin: 16.94% 0%;

	width: calc(100vh * 0.2545 * 1169 / 1440);
	height: calc(100vh * 0.2545 * 753 / 1440);
}

#door_panel_3 {
	top: calc(100vh * 906 / 1440);
	left: calc(50% + 100vh * ((677 / 2) + 1512 - (3120 / 2)) / 1440);

	transform-origin: 0% 100%;

	width: calc(100vh * 677 / 1440);
	height: calc(100vh * 534 / 1440);
}

#mini_door_panel_3 {
	top: calc(38.96vh + 0.2545 * (100vh * 906 / 1440));
	left: calc(50% + 0.2545 * (100vh * ((677 / 2) + 1512 - (3120 / 2)) / 1440));

	transform-origin: 0% 100%;

	width: calc(100vh * 0.2545 * 677 / 1440);
	height: calc(100vh * 0.2545 * 534 / 1440);
}

#door_panel_4 {
	top: calc(100vh * 457 / 1440);
	left: calc(50% + 100vh * ((1155 / 2) + 1560 - (3120 / 2)) / 1440);

	transform-origin: 53.94% 100%;

	width: calc(100vh * 1155 / 1440);
	height: calc(100vh * 983 / 1440);
}

#mini_door_panel_4 {
	top: calc(38.96vh + 0.2545 * (100vh * 457 / 1440));
	left: calc(50% + 0.2545 * (100vh * ((1155 / 2) + 1560 - (3120 / 2)) / 1440));

	transform-origin: 53.94% 100%;

	width: calc(100vh * 0.2545 * 1155 / 1440);
	height: calc(100vh * 0.2545 * 983 / 1440);
}

#door_panel_5 {
	top: calc(100vh * 0 / 1440);
	left: calc(50% + 100vh * ((1170 / 2) + 1277 - (3120 / 2)) / 1440);

	transform-origin: 98.63% 59.63%;

	width: calc(100vh * 1170 / 1440);
	height: calc(100vh * 909 / 1440);
}

#mini_door_panel_5 {
	top: calc(38.96vh + 0.2545 * (100vh * 0 / 1440));
	left: calc(50% + 0.2545 * (100vh * ((1170 / 2) + 1277 - (3120 / 2)) / 1440));

	transform-origin: 98.63% 59.63%;

	width: calc(100vh * 0.2545 * 1170 / 1440);
	height: calc(100vh * 0.2545 * 909 / 1440);
}

.team_wok_stuff {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 65.06%;
	height: 23.67%;
}

img#team_wok_squares_1 {
	animation: team_wok_squares_one 0.6s infinite linear;
}

@keyframes team_wok_squares_one {
	0%,100% { opacity: 1 }
	16.7% { opacity: 0.55 }
	33.3% { opacity: 1 }
	50% { opacity: 0.44 }
	66.7% { opacity: 0.22 }
	83.3% { opacity: 0.77 }
}

img#team_wok_squares_2 {
	animation: team_wok_squares_two 0.6s infinite linear;
}

@keyframes team_wok_squares_two {
	0%,100% { opacity: 0.13 }
	16.7% { opacity: 0.22 }
	33.3% { opacity: 0.13 }
	50% { opacity: 0.55 }
	66.7% { opacity: 0.88 }
	83.3% { opacity: 0.33 }
}

img#team_wok_squares_3 {
	animation: team_wok_squares_three 0.6s infinite linear;
}

@keyframes team_wok_squares_three {
	0%,100% { opacity: 0.48 }
	16.7% { opacity: 0.55 }
	33.3% { opacity: 0.48 }
	50% { opacity: 0.33 }
	66.7% { opacity: 0.55 }
	83.3% { opacity: 0.79 }
}

img#team_wok_squares_4 {
	animation: team_wok_squares_four 0.6s infinite linear;
}

@keyframes team_wok_squares_four {
	0%,100% { opacity: 0.60 }
	16.7% { opacity: 0.60 }
	33.3% { opacity: 0.60 }
	50% { opacity: 0.66 }
	66.7% { opacity: 0.44 }
	83.3% { opacity: 0.22 }
}

#team_holobeam {
	animation: holobeam 4s infinite;
	height: 87vh;
}

.team_holobeam_stuff {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0vh;
	height: 100vh;
}

.team_holobeam_sparkles {
	opacity: 0;
}

img#team_holobeam_sparkles_1 {
	animation: team_holobeam_sparkles_one 0.6s infinite linear;
}

@keyframes team_holobeam_sparkles_one {
	0%,100% { opacity: 0.4 }
	33%,83.3% { opacity: 0 }
}

img#team_holobeam_sparkles_2 {
	animation: team_holobeam_sparkles_two 0.6s infinite linear;
}

@keyframes team_holobeam_sparkles_two {
	0%,33.3%,100% { opacity: 0 }
	16.7% { opacity: 0.4 }
}

img#team_holobeam_sparkles_3 {
	animation: team_holobeam_sparkles_three 0.6s infinite linear;
}

@keyframes team_holobeam_sparkles_three {
	0%,50%,100% { opacity: 0 }
	33.3% { opacity: 0.4 }
}

img#team_holobeam_sparkles_4 {
	animation: team_holobeam_sparkles_four 0.6s infinite linear;
}

@keyframes team_holobeam_sparkles_four {
	0%,33.3%,66.7%,100% { opacity: 0 }
	50% { opacity: 0.4 }
}

img#team_holobeam_sparkles_5 {
	animation: team_holobeam_sparkles_five 0.6s infinite linear;
}

@keyframes team_holobeam_sparkles_five {
	0%,50%,83.3%,100% { opacity: 0 }
	66.7% { opacity: 0.4 }
}

img#team_holobeam_sparkles_6 {
	animation: team_holobeam_sparkles_six 0.6s infinite linear;
}

@keyframes team_holobeam_sparkles_six {
	0%,66.7%,100% { opacity: 0 }
	83.3% { opacity: 0.4 }
}

div#lobby_div {
	position: absolute;

	height: 100vh;
	width: calc(100vh * 3120 / 1440);
	top: 0vh; 

	left: 50%;
	transform: translateX(-50%);

	background-color: black;

	overflow: hidden;

	z-index: 80;
}

div#lobby_zoom {
	position: absolute;

	height: 100vh;
	width: calc(100vh * 3120 / 1440);
	top: 0vh; 

	left: 50%;
	transform: translateX(-50%) scale(1.08);

	transform-origin: 50% 55%;
}

div#lobby_letter_container {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 81;
	display: none;
}

div#lobby_letter {
	position: absolute;
	background-color: rgb(233,213,163);
	background-image: url("images/lobby_letter_background_logo.png");
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;

	font-family: 'Merriweather', Verdana, Geneva, sans-serif;
	font-size: 2vh;
	line-height: 3.2vh;

	padding: 2vh;

	width: 70vh;
	height: auto;
	top: 10vh;

	left: 50%;
	transform: translateX(-50%);

	display: grid;
	grid-template-columns: 10% 80% 10%;
	grid-template-rows: auto auto auto auto auto;

	cursor: pointer;
}

div#lobby_letter_sticker {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

img#lobby_letter_devega_sticker {
	margin-top: 1vh;
	margin-bottom: 1vh;

	height: 16vh;
}

div#lobby_letter_x {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}

img#lobby_letter_x_image {
	height: 4.8vh;
}

div#lobby_letter_welcome {
	grid-column: 1 / 4;
	grid-row: 2 / 3;

	font-family: 'BungeeRegular', Verdana, Geneva, sans-serif;
	font-size: 3vh;
	color: rgb(4,79,119);
}

div#lobby_letter_text {
	grid-column: 1 / 4;
	grid-row: 3 / 4;

	text-align: left;

	margin-left: 4vh;
	margin-right: 4vh;
	margin-bottom: 2vh;
}

div#lobby_letter_signature_image {
	grid-column: 1 / 4;
	grid-row: 4 / 5;

	text-align: left;

	margin-left: 4vh;
	margin-right: 4vh;
}

img#lobby_letter_devega_signature {
	height: 6.8vh;
}

div#lobby_letter_signature_text {
	grid-column: 1 / 4;
	grid-row: 5 / 6;

	text-align: left;

	margin-left: 4vh;
	margin-right: 4vh;
}

span#lobby_letter_devega_name {
	font-family: 'MerriweatherBlack', Verdana, Geneva, sans-serif;
}

.p_n {
	position: absolute;
	left: 50%;
	height: 95vh;
	transform: translateX(-50%);
	pointer-events: none;
}

div#newprint_background {
	position: absolute;
	width: calc(100vh * 1539 / 775);
	top: 0vh;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	background-image: url('images/print/background.svg');
	background-size: contain;
	background-repeat: no-repeat;

	z-index: 9;
	display: none;
}

img.print_sidetab_active {
	z-index: 1;
	display: none;
}

div.print_hot {
	position: absolute;

	pointer-events: auto;
	cursor: pointer;

	border: 0px solid red;
}

div#print_preview_title {
	left: calc(50% + 27vh);
    top: 21.5vh;
    width: 35vh;
    height: 12vh;

    font-family: OpenDyslexicBold;
    font-size: 2.8vh;
    line-height: 3.8vh;
    color: #001035;

	display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;

	border: 0px solid red;
}

img.print_preview_portrait {
	left: calc(50% + 27vh);
    top: 34.5vh;
    width: 33vh;
    height: 42vh;
}

img.print_preview_landscape {
	left: calc(50% + 27.6vh);
    top: 41.0vh;
    width: 36.8vh;
    height: 28.91vh;
}

img#print_preview {
	border: 0px solid red;
}

div#print_print_button_hot {
	pointer-events: auto;
	cursor: pointer;

	left: 63.3%;
    top: 79.6%;
    width: 10.4%;
    height: 5.8%;

	border: 0px solid red;
}

div#print_print_button {
	width: 62%;

	background-image: url('images/print/print_btn_idle.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

#print_print_button_hot:hover + #print_print_button {
	background-image: url('images/print/print_btn_hover.svg');
}

#print_print_button_hot:active + #print_print_button {
	background-image: url('images/print/print_btn_click.svg');
}

div.print_list {
	position: absolute;
	
    left: 62.4vh;
    top: 19.1vh;
    width: 41.4vh;
    height: 68.4vh;

	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.7) rgba(0, 0, 0, 0);

	border: 0px solid red;
}

div.print_list::-webkit-scrollbar {
	width: 1.2vh;
	height: 2vh;
	background-color: rgba(0, 0, 0, 0);
}

div.print_list::-webkit-scrollbar-thumb {
	border-radius: 0.6vh;
	background: rgba(255, 255, 255, 0.7);
}

div#print_missionDocs_list > div:nth-of-type(odd) {
    background-image: url('images/print/missionDocs/row1.svg');
}

div#print_missionDocs_list > div:nth-of-type(even) {
    background-image: url('images/print/missionDocs/row2.svg');
}

div#print_comicBooks_list > div:nth-of-type(odd) {
    background-image: url('images/print/comicBooks/row1.svg');
}

div#print_comicBooks_list > div:nth-of-type(even) {
    background-image: url('images/print/comicBooks/row2.svg');
}

div#print_activityPages_list > div:nth-of-type(odd) {
    background-image: url('images/print/activityPages/row1.svg');
}

div#print_activityPages_list > div:nth-of-type(even) {
    background-image: url('images/print/activityPages/row2.svg');
}

div#print_coloringPages_list > div:nth-of-type(odd) {
    background-image: url('images/print/coloringPages/row1.svg');
}

div#print_coloringPages_list > div:nth-of-type(even) {
    background-image: url('images/print/coloringPages/row2.svg');
}

img#print_missionDocs_blocker {
    left: 53.5%;
    top: 7.5%;
    width: 44.6%;

	pointer-events: auto;
}

img#print_activityPages_blocker {
    left: 49.90%;
    top: 0%;
    width: 61.7%;

	pointer-events: auto;

	display: none;
}

div.print_list_item {
	position: relative;

	width: 39.4vh;
	padding-left: 2vh;
	height: calc(41.4vh * 81 / 338);

	margin-bottom: -0.4vh; /* images are too tall */

	font-family: OpenDyslexicBold;
	font-size: 2.2vh;
	word-spacing: -0.4em;
	color: #001035;

	text-align: left;

	background-size: contain;
	background-repeat: no-repeat;

	cursor: pointer;

	display: table;
}

div.print_list_item p {
	display: table-cell;
	vertical-align: middle;
}

div.print_list_item:hover {
    background-image: url('images/print/row_hover.svg') !important;
}

div.print_list_item_missionDocs_selected {
    background-image: url('images/print/missionDocs/row_selected.svg') !important;
}

div.print_list_item_comicBooks_selected {
    background-image: url('images/print/comicBooks/row_selected.svg') !important;
}

div.print_list_item_activityPages_selected {
    background-image: url('images/print/activityPages/row_selected.svg') !important;
}

div.print_list_item_coloringPages_selected {
    background-image: url('images/print/coloringPages/row_selected.svg') !important;
}

img.print_list_item_new {
	position: absolute;

	left: 0.4vh;
	top: 0.4vh;
	width: 4vh;
	height: calc(4vh * 26 / 46);
}

div#missionDocs_hot {
	left: 45.5vh;
    top: 19.2vh;
    width: 15.1vh;
    height: 15.2vh;
}

div#comicBooks_hot {
	left: 45.5vh;
    top: 35.2vh;
    width: 15.1vh;
    height: 17.4vh;
}

div#activityPages_hot {
	left: 45.5vh;
    top: 53.1vh;
    width: 15.1vh;
    height: 16.7vh;
}

div#coloringPages_hot {
	left: 45.5vh;
    top: 70.2vh;
    width: 15.1vh;
    height: 17.2vh;
}

div#missions_background {
	position: absolute;
	width: auto;
	min-width: 100vw;
	height: 100vh;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
	border: 0px red solid;
	display: none;
}

div#missions_not_logged_in {
	width: 100%;
	height: 100%;
}

.no-webp #missions_not_logged_in { background-image: url("images/mission_control_background.jpg"); }
.webp #missions_not_logged_in { background-image: url("images/mission_control_background.webp"); }

div#missions_logged_in {
	width: auto;
	min-width: 100vw;
	height: 100vh;

	display: none;
}

div#mission_panel_scroller {
	position: absolute;

	width: 112%;
	height: 80vh;
	top: 18vh;
	left: -6%;
}

div.mission_panel {
	position: relative;

	height: 80vh;
	width: 41.6vh;

	transform: scale(0.9);

	border: 0px solid yellow;
}

div.mission_panel_background {
	position: relative;
	top: 0vh;

	height: 80vh;
	width: 41.6vh;
	margin: 0 auto;

	border: 0px solid lime;
	background-color: rgb(255, 255, 0, 0);
}

.slick-slide {
    outline: none;
    margin: 0 4vh;
}

.slick-list {
	margin: 0 -4vh;
}

img.mission_panel_shell_top {
	position: absolute;
	top: 0vh;
	left: 0vh;

	height: 11.16vh;
	width: 41.6vh;
}

img.mission_panel_top_shading {
	position: absolute;
	top: 10.66vh;
	left: 2.2vh;

	height: 1.93vh;
	width: calc(41.6vh - 4.4vh);

	z-index: -1;
}

div.mission_panel_title {
	position: absolute;
	top: 1.4vh;
	left: 0vh;
	width: 41.6vh;
	height: 6.6vh;

	text-align: center;

	font-family: 'BungeeRegular', Verdana, Geneva, sans-serif;
	color: white;
	text-shadow: 0px 0.3vh rgba(0, 0, 0, 0.4);;
	font-size: 2.9vh;
	line-height: 3.2vh;
}

div.mission_panel_number {
	position: absolute;
	top: 8.1vh;
	left: 0vh;
	width: 41.6vh;
	height: 3vh;

	text-align: center;

	font-family: 'BungeeRegular', Verdana, Geneva, sans-serif;
	font-size: 2vh;
	line-height: 2.4vh;
}

div.mission_panel_activity {
	position: relative;
	left: 2.2vh;
	top: 11.16vh;

	width: calc(41.6vh - 4.4vh);
	height: 5.2vh;

	border: 0px dashed red;

	z-index: -2;
}

div.mission_panel_activity_title {
	position: absolute;
	left: 7.6vh;
	top: 50%;
	transform: translateY(-50%);

	width: 29vh;

	text-align: left;

	font-family: OpenSansSemiBold, sans-serif;
	font-size: 1.4vh;
	line-height: 2vh;
}

img.mission_shell_bottom {
	position: relative;
	left: 0vh;
	top: 11.16vh;

	width: 41.6vh;
	height: 5.61vh;
}

img.mission_panel_extras_button {
	position: relative;
	left: 8.13vh;
	top: 6.36vh;

	width: 25.34vh;
	height: 3.92vh;

	cursor: pointer;
}

img.mission_panel_box {
	position: absolute;
	top: 1.4vh;
	left: 3.5vh;

	height: 2.7vh;
}

div#missions_title {
	position: absolute;
	top: 5vh;
	left: 50%;
	transform: translateX(-50%);

	font-family: 'BungeeRegular', Verdana, Geneva, sans-serif;
	color: white;
	font-size: 4vh;
}

img.mission_panel_trophy_visible {
	position: absolute;
	top: 12vh;

	width: 24vh;
	height: calc(24vh * 422 / 490);

	left: calc((41.6vh - 24vh) / 2);  /* container width - image width / 2 */
}

img.mission_panel_trophy_icon_visible {
	position: absolute;
	top: 13.1vh;

	width: 11.82vh;
	height: calc(11.82vh * 397 / 398);

	left: calc((41.6vh - 11.82vh) / 2);
}

div.missions_page_button {
	position: absolute;
	width: 52vh;
	height: 2vh;

	left: 50%;
	transform: translateX(-50%);

	background-color: rgb(254,236,84);
	color: black;

	border-radius: 1.6vh;
	padding: 2.35vh;

	box-shadow: 0vh 1.1vh rgba(0,0,0,0.33);

	font-family: 'RobotoBold', Verdana, Geneva, sans-serif;
	font-size: 2vh;

	text-align: left;
}

div.missions_page_button:hover {
	background-color: #66ffcc;
}

div.missions_page_button_gray {
	background-color: white;
	color: rgb(204,204,205);
}

div.missions_page_button_gray:hover {
	background-color: white;
}

div.missions_page_button a {
	text-decoration: none;
}

a.missions_icon {
	position: absolute;
	height: 5vh;
	width: 5vh;

	left: calc(50% + 22vh);
	transform: translateX(-50%);

	background-image: url("images/printer_icon.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

a.missions_icon_gray {
	opacity: 0.2;
}

.restricted_access {
	position: absolute;
	height: 40vh;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
}

#missions_restricted_access:hover + #missions_balloon {
    opacity: 1; 
}

div#missions_balloon {
	position: relative;
	top: 20vh;
	left: 50%;
	width: 25vh;

	transform: translateX(-50%);
	opacity: 0;

	background-color: white;
	padding: 1.4vh;
	box-shadow: 0vh 0.5vh rgba(0,0,0,0.33);
	border-radius: 0.9vh;

	font-size: 1.2vh;
	text-align: left;
}

#missions_balloon:hover {
    opacity: 1; 
}

img#missions_balloon_tail {
	position: absolute;
	bottom: calc(0vh + 0.5px);
	height: 1.21vh;
	left: 12%;
	transform: translateY(100%);
}

div#game_room_background {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: #0f2c45;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
	display: none;
}

#game_room_console {
	position: absolute;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);
}

.game_room_screen {
	position: absolute;
	top: 74.64%;
	height: 21.01%;

	cursor: pointer;
}

img#game_room_left_screen {
	left: calc(50% - 32.62vh);
}

img#game_room_center_screen {
	left: calc(50% - 7.57vh);
}

img#game_room_right_screen {
	left: calc(50% + 18.84vh);
}

img#game_room_memory_holobeam {
	position: absolute;
	left: calc(50% - 31.72vh);
	top: 38.08%;
	height: 25.20%;

	animation: holobeam 4s infinite;
}

.game_room_memory_blocks {
	position: absolute;
	left: calc(50% - 31.72vh);
	top: 38.08%;
	height: 25.20%;

	opacity: 0;
}

img#game_room_memory_blocks_1 {
	animation: game_room_memory_blocks_1 0.6s infinite linear;
}

@keyframes game_room_memory_blocks_1 {
	0%,33% { opacity: 0 }
	16% { opacity: 1 }
}

img#game_room_memory_blocks_2 {
	animation: game_room_memory_blocks_2 0.6s infinite linear;
}

@keyframes game_room_memory_blocks_2 {
	16%,50% { opacity: 0 }
	33% { opacity: 1 }
}

img#game_room_memory_blocks_3 {
	animation: game_room_memory_blocks_3 0.6s infinite linear;
}

@keyframes game_room_memory_blocks_3 {
	33%,67% { opacity: 0 }
	50% { opacity: 1 }
}

img#game_room_memory_blocks_4 {
	animation: game_room_memory_blocks_4 0.6s infinite linear;
}

@keyframes game_room_memory_blocks_4 {
	50%,84% { opacity: 0 }
	67% { opacity: 1 }
}

img#game_room_memory_blocks_5 {
	animation: game_room_memory_blocks_5 0.6s infinite linear;
}

@keyframes game_room_memory_blocks_5 {
	67%,100% { opacity: 0 }
	84% { opacity: 1 }
}

img#game_room_memory_blocks_6 {
	animation: game_room_memory_blocks_6 0.6s infinite linear;
}

@keyframes game_room_memory_blocks_6 {
	84%,16% { opacity: 0 }
	100% { opacity: 1 }
}

picture.game_room_holo_picture {
	position: absolute;
	left: 50%;

	top: 14.09%;
	height: 41.14%;
	width: 76.01vh;
	border: 0px solid red;

	animation: games_holo_bob 3s infinite;
	animation-timing-function: ease-in-out;
}

picture#game_room_tictactoe_holo {
	left: calc(50% - 40.04vh);

	display: none;
}

picture#game_room_memory_holo {
	left: calc(50% - 37.04vh);
}

picture#game_room_gears_holo {
	left: calc(50% - 39.04vh);

	display: none;
}

img.game_room_holo_img {
	width: 100%;
	height: 100%;

	cursor: pointer;

	-webkit-mask-image: linear-gradient(to bottom,transparent, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%,transparent);
}

@keyframes games_holo_bob {
	0%, 100% {
		transform: translateY(-0.25vh) rotateZ(0.001deg); /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
	50% {
		transform: translateY(0.25vh) rotateZ(0.001deg);  /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
}

div#map_room {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0vh;
	background-color: #666;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
	display: none;
}

div#map_text {
	position: absolute;
	left: calc(50% + 33vh);
	top: 6vh;

	width: 32.2vh;

	color: white;
	z-index: 3;

	border: 0px dashed pink;
}

div#map_name {
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 3.8vmin;
	line-height: 5vmin;
	text-transform: uppercase;
	border: 0px solid red;
}

div#map_description {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.8vmin;
	line-height: 1.4em;
	text-align: left;
}


#map_room_island_container {
	position: relative;
	border: 0px solid red;
	top: 11.89vh;
	width: 84vh;

	left: 50%;
	transform: translateX(-50%);

	height: 41vh; /* this is 43.16% of the total viewport height, but the background image only takes up the bottom 95% of that, so we multiply by 0.95 */
	height: 49vh;
	height: 51.58vh;
	border: 0px solid red;
}

div#map_room_overlay {
	position: absolute; 
	top: 0%; 
	left: 0%; 
	width: 100%; 
	height: 100%; 

	z-index: 12;
}

.island_images {
	position: absolute;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.kumana_island_stuff {
	height: 75% !important;
	top: 13vh;
}

.library_island_stuff {
	display: none;
}

.devega_island_stuff {
	height: 87.5% !important;
	top: 6.5vh;
	display: none;
}

.lab_island_stuff {
	display: none;
}

.atoll_island_stuff {
	display: none;
}

.island_bob {
	animation: island_bob 3s infinite;
	animation-timing-function: ease-in-out;
}

@keyframes island_bob {
	0%, 100% {
		transform: translate(-50%, -0.25vh) rotateZ(0.001deg); /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
	50% {
		transform: translate(-50%, 0.25vh) rotateZ(0.001deg);  /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
}

.atoll_devega_bob {
	animation: atoll_devega_bob 4s infinite;
	animation-timing-function: ease-in-out;
}

@keyframes atoll_devega_bob {
	0%, 100% {
		transform: translate(-50%, -0.6vh) rotateZ(0.001deg); /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
	50% {
		transform: translate(-50%, 0.6vh) rotateZ(0.001deg);  /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
}

.atoll_lab_bob {
	animation: island_bob 3.5s infinite;
	animation-timing-function: ease-in-out;
}

.atoll_library_bob {
	animation: island_bob 2.5s infinite;
	animation-timing-function: ease-in-out;
}

.island_holobeam {
	border: 0px solid green;
	animation: holobeam 4s infinite;
}

@keyframes holobeam {
	0%,100% { opacity: 0.4 }
	50% { opacity: 1 }
}

.island_blocks {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 0px red solid;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
}

@keyframes island_blocks_5_1 {
	0%,20% { opacity: 0 }
	10% { opacity: 1 }
}

@keyframes island_blocks_5_2 {
	20%,40% { opacity: 0 }
	30% { opacity: 1 }
}

@keyframes island_blocks_5_3 {
	40%,60% { opacity: 0 }
	50% { opacity: 1 }
}

@keyframes island_blocks_5_4 {
	60%,80% { opacity: 0 }
	70% { opacity: 1 }
}

@keyframes island_blocks_5_5 {
	80%,100% { opacity: 0 }
	90% { opacity: 1 }
}

.island_blocks_5_1 {
	animation: island_blocks_5_1 0.5s infinite linear;
}

.island_blocks_5_2 {
	animation: island_blocks_5_2 0.5s infinite linear;
}

.island_blocks_5_3 {
	animation: island_blocks_5_3 0.5s infinite linear;
}

.island_blocks_5_4 {
	animation: island_blocks_5_4 0.5s infinite linear;
}

.island_blocks_5_5 {
	animation: island_blocks_5_5 0.5s infinite linear;
}

div#map_room_buttons_container {
	position: absolute;
	width: 147.25vh;
	height: 95vh;
	top: 5vh; 
	width: 155vh;
	height: 100vh;
	top: 0vh; 

	left: 50%;
	transform: translateX(-50%);

	z-index: 10;
	display: none;

	background-image: url("images/map_room_island_screens.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;

	border: 0px solid lime;
}

.map_room_screen_rollover {
	position: absolute;
	z-index: 12;
	cursor: pointer;
	border: 0px solid red;
}

div#map_room_island_screen_devega_rollover {
	width: 13.5%;
	height: 16%;
	top: 76%;
	left: 14%;
}

div#map_room_island_screen_library_rollover {
	width: 14.5%;
	height: 16%;
	top: 70%;
	left: 27.5%;
}

div#map_room_island_screen_kumana_rollover {
	width: 15%;
	height: 15%;
	top: 68%;
	left: 42%;
}

div#map_room_island_screen_lab_rollover {
	width: 13.5%;
	height: 16%;
	top: 70%;
	left: 57%;
}

div#map_room_island_screen_myth_rollover {
	width: 13.5%;
	height: 17%;
	top: 76%;
	left: 70.5%;
}

.map_room_screen_highlights {
	position: absolute;
	width: auto;
	height: 100vh;
	top: 0vh; 

	left: 50%;
	transform: translateX(-50%);

	border: 0px solid yellow;

	z-index: 11;
	opacity: 0;
}

#map_room_island_screen_devega_rollover:hover + #map_room_island_screen_devega_highlight {
    opacity: 1;
}

#map_room_island_screen_kumana_rollover:hover + #map_room_island_screen_kumana_highlight {
    opacity: 1;
}

#map_room_island_screen_library_rollover:hover + #map_room_island_screen_library_highlight {
    opacity: 1;
}

#map_room_island_screen_lab_rollover:hover + #map_room_island_screen_lab_highlight {
    opacity: 1;
}

#map_room_island_screen_myth_rollover:hover + #map_room_island_screen_myth_highlight {
    opacity: 1;
}

div#maps_return_to_lobby {
	position: absolute; 
	top: 38%; 
	left: 84.5%; 
	height: 45.75%; 
	width: 36.25%;

	cursor: pointer;
	z-index: 13;

	border: 0px red solid;
}

picture#holoroom_background_webp {
	max-width: 100vw;
	max-height: 100vh;
	opacity: 1;
}

img#holoroom_background {
	max-width: 100vw;
	max-height: 100vh;
	opacity: 1;
}

img#door_light {
	position: absolute;
	top: 25.88%;
	left: 30.15%;
	height: 9.0%;
	opacity: 0;
	animation: doorlight 6s infinite;
}

@keyframes doorlight {
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}

div#character_container {
	position: absolute;
	display: inline-block;
	left: 50%;
	height: 95vh;
	transform: translateX(-50%);
	top: 9%;

	border: 0px solid green;
}

img#character {
	left: 0%;
	top: 0%;
	height: 95vh;

	animation: character_bob 3s infinite;
	animation-timing-function: ease-in-out;
	animation-play-state: paused;
}

@keyframes character_bob {
	0%, 100% {
		transform: translateY(-0.25vh) rotateZ(0.001deg); /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
	50% {
		transform: translateY(0.25vh) rotateZ(0.001deg);  /* rotateZ smoothes snap-to-pixel in the Y-translation */
	}
}

@font-face {
	font-family: 'BungeeRegular';
	src: url('fonts/Bungee-Regular.eot');
	src: url("fonts/Bungee-Regular.woff") format("woff"),
	url("fonts/Bungee-Regular.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "futura-lt";
	src: url('fonts/FuturaLT-Condensed.eot');
	src: url('fonts/FuturaLT-Condensed.eot?#iefix') format('embedded-opentype'),
	url('fonts/FuturaLT-Condensed.svg#Futura LT') format('svg'),
	url('fonts/FuturaLT-Condensed.woff') format('woff'),
	url('fonts/FuturaLT-Condensed.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'RobotoBold';
	src: url("fonts/Roboto-Bold.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather';
	src: url("fonts/Merriweather-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: 'MerriweatherBlack';
	src: url("fonts/Merriweather-Black.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: 'OpenSansSemiBold';
	src: url("fonts/OpenSans-SemiBold.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: 'BubblegumSans';
	src: url("fonts/BubblegumSans-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: 'OpenDyslexic';
	src: url("fonts/OpenDyslexic-Regular.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: 'OpenDyslexicBold';
	src: url("fonts/OpenDyslexic3-Bold.ttf") format("truetype");
	font-display: swap;
}

div#character_text {
	position: absolute;
	left: 69%;
	transform: translateX(-50%);
	top: 20%;

	width: 16%;

	color: white;
	z-index: 3;
}

div#character_name {
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 3.8vmin;
	line-height: 5vmin;
	text-transform: uppercase;
	border: 0px solid red;
}

div#character_description {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.8vmin;
	line-height: 1.4em;
	text-align: left;

	white-space: normal;
}

div#overlay {
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 100%; 
	height: 100%; 
	max-width: 100%; 
	max-height: 100%;
}

div#team_return_to_lobby {
	position: absolute; 
	top: 30%; 
	left: 8%; 
	height: 36%; 
	width: 28%;

	cursor: pointer;

	border: 0px red solid;
}

div#left_screen {
	position: absolute;
	top: 63%;
	left: 27%;
	width: 12.4%;
	height: 23%;
	border: 0px dashed white;
	cursor: pointer;
}

div#right_screen {
	position: absolute;
	top: 63%;
	left: 60.3%;
	width: 12.4%;
	height: 23%;
	border: 0px dashed white;
	cursor: pointer;
}

img#left_character {
	position: absolute;
	display: block;
	top: 65.2%;
	left: 28.3%;
	height: 18.36%;
	cursor: pointer;
	filter: saturate(0.3);
}

img#right_character {
	position: absolute;
	top: 65.2%;
	left: 61.9%;
	height: 18.36%;
	cursor: pointer;
	transform: rotate(26deg);
	filter: saturate(0.3);
}

img#static_left {
	position: absolute;
	top: 65.8%;
	left: 28.7%;
	height: 17.3%;
	cursor: pointer;
	opacity: 0.5;
	border: 0px solid red;
}

img#static_right {
	position: absolute;
	top: 65.8%;
	left: 62.3%;
	height: 17.2%;
	cursor: pointer;
	opacity: 0.5;
	border: 0px solid red;
}

img#team_screen_left_highlight {
	position: absolute;
	top: 62.80%;
	left: calc(50% - 48.87vh);
	height: 22.87vh;

	z-index: -1;

	opacity: 0;
}

div#left_screen:hover ~ img#team_screen_left_highlight {
    opacity: 1;
}

img#team_screen_right_highlight {
	position: absolute;
	top: 62.24%;
	left: calc(50% + 22.54vh);
	height: 23.83vh;

	z-index: -1;

	opacity: 0;
}

div#right_screen:hover ~ img#team_screen_right_highlight {
    opacity: 1;
}

img#team_faq_button {
	position: absolute;
	top: 92.5vh;

	left: calc(50% - 56vh);
	transform: translateX(-50%);

	height: 15vh;
	width: calc(15vh * 205 / 165);

	cursor: pointer;

	z-index: 121;
}

div.nav_back_reading {
	top: 86vh;
	height: 12.45vh;
	width: calc(12.45vh * 2014 / 813);

	left: calc(50% - 48.5vh);
	left: calc(2vh + 0.5 * (12.45vh * 2014 / 813));

	cursor: pointer;
	pointer-events: auto;
	z-index: 152;

	background-repeat: no-repeat;

	background-image: url("images/reading/nav_back_idle.svg");
}

div.nav_back_reading:hover {
	background-image: url("images/reading/nav_back_hover.svg");
}

div.nav_back_reading:active {
	background-image: url("images/reading/nav_back_active.svg");
}

img#tap_to_explore {
	position: absolute;
	top: 14vh;
	height: 10vh;

	left: 22vh;

	z-index: 152;

	transform-origin: 50% 50%;

	display: none;
	opacity: 0;
}

img#nav_moxie_icon {
	position: absolute;
	top: 2vh;
	width: 7vh;

	left: calc(50% + 48.5vh);

	cursor: pointer;
	z-index: 172;
}

img#toggle_sound {
	position: absolute;
	top: 2vh;
/*	left: calc(50% + 39.5vh); */
	right: 12vh;

	width: 7vh;

	cursor: pointer;

	z-index: 170;
}

div.nav_fullscreen {
	position: absolute;
	top: 3vh;
	width: 5vh;
	height: 5vh;

/*	left: calc(50% + 58.5vh); */
	right: 3vh;

	cursor: pointer;
	z-index: 172;

	background-repeat: no-repeat;
	background-size: contain;
}

div#nav_fullscreen_off {
	background-image: url('images/nav/fullscreen_expand_idle.svg');
}

div#nav_fullscreen_off:hover {
	background-image: url('images/nav/fullscreen_expand_hover.svg');
}

div#nav_fullscreen_off:active {
	background-image: url('images/nav/fullscreen_expand_active.svg');
}

div#nav_fullscreen_on {
	display: none;

	background-image: url('images/nav/fullscreen_minimize_idle.svg');
}

div#nav_fullscreen_on:hover {
	background-image: url('images/nav/fullscreen_minimize_hover.svg');
}

div#nav_fullscreen_on:active {
	background-image: url('images/nav/fullscreen_minimize_active.svg');
}

div#nav_underlayer {
	position: absolute;

	width: 100vw;
	height: 100vh;

	z-index: 149;

	display: none;
}

div.nav_container {
	position: absolute;
	top: 0vh;
	height: 100vh;
	width: calc(100vh * 659 / 1440);

	left: -23.7vh;

	border: 0px solid red;
	z-index: 150;

	pointer-events: none;
}

img#nav_gear {
	position: absolute;
	top: calc(100vh * 112 / 2000);
	left: calc(100vh * 542 / 2000);
	height: calc(100vh * 218 / 2000);
	width: calc(100vh * 218 / 2000);

	cursor: pointer;
}

div#nav_hamburger {
	position: absolute;
	top: calc(100vh * 129 / 1440);
	left: calc(100vh * 571 / 1440);
	height: calc(100vh * 30 / 1440);
	width: calc(100vh * 33 / 1440);

	cursor: pointer;

	background-image: url('images/nav/hamburger_idle.png');
	background-repeat: no-repeat;
	background-size: contain;

	border: 0px solid red;
}

div#nav_tappable {
	position: absolute;
	top: 0vh;
	left: 23.5vh;
	height: 24vh;
	width: 22vh;

	cursor: pointer;
	pointer-events: auto;

	z-index: 1;

	border: 0px solid red;
}

img#nav_panel {
	top: 0vh;
	left: 0vh;
	height: 100vh;
	width: calc(100vh * 659 / 1440);
}

.nav_icon {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100vh;
	width: calc(100vh * 659 / 1440);

	pointer-events: none;

	background-repeat: no-repeat;
}

.nav_icon_sparkles {
	opacity: 0;
}

.nav_icon_sparkles_new {
	opacity: 0;

	left: calc(100vh * (var(--nav-icon-left) + (var(--nav-icon-width) / 2) - (var(--nav-icon-width) * var(--nav-icon-sparkle-size-multiplier) * 1.25 / 2)) / 2000); /* center of master image */
	top: calc(100vh * ((var(--nav-icon-top) + var(--nav-icon-height)) - ((var(--nav-icon-width) * var(--nav-icon-sparkle-size-multiplier) * 1.25) / (var(--nav-icon-sparkle-width) / var(--nav-icon-sparkle-height)))) / 2000); /* ((top of master + height of original master) - (width of enlarged master) / (width / height)) */

	width: calc(100vh * (var(--nav-icon-width) * var(--nav-icon-sparkle-size-multiplier) * 1.25) / 2000); /* width of enlarged master (we're scaling this to match the master image) */
	height: calc(100vh * (var(--nav-icon-width) * var(--nav-icon-sparkle-size-multiplier) * 1.25) / (var(--nav-icon-sparkle-width) / var(--nav-icon-sparkle-height)) / 2000); /* width of enlarged master / (width / height) */

	border: 0px green dashed;
}

.nav_icon_sparkles_wide_new {
	opacity: 0;

	left: calc(100vh * (var(--nav-icon-left) + (var(--nav-icon-width) / 2) - ((var(--nav-icon-height) * var(--nav-icon-sparkle-size-multiplier) * 1.25) / (var(--nav-icon-sparkle-height) / var(--nav-icon-sparkle-width)) / 2)) / 2000); /* center of master image */
	top: calc(100vh * ((var(--nav-icon-top) + var(--nav-icon-height)) - (var(--nav-icon-height) * var(--nav-icon-sparkle-size-multiplier) * 1.25)) / 2000); 

	height: calc(100vh * (var(--nav-icon-height) * var(--nav-icon-sparkle-size-multiplier) * 1.25) / 2000); 
	width: calc(100vh * (var(--nav-icon-height) * var(--nav-icon-sparkle-size-multiplier) * 1.25) / (var(--nav-icon-sparkle-height) / var(--nav-icon-sparkle-width)) / 2000);

	border: 0px green dashed;
}

div.nav_icon_div {
	background-image: var(--nav-icon-idle);

	left: calc(100vh * var(--nav-icon-left) / 2000);
	top: calc(100vh * var(--nav-icon-top) / 2000);

	width: calc(100vh * var(--nav-icon-width) / 2000);
	height: calc(100vh * var(--nav-icon-height) / 2000);

	pointer-events: auto;
	cursor: pointer;

	transform-origin: 50% 100%;
}

img.nav_icon_over {
	position: absolute;

	pointer-events: auto;
	cursor: pointer;
}

div#mcp_background {
	position: absolute;
	height: 100vh;
	width: calc(100vh * 3120 / 1440);
	background-size: contain;

	left: 50%;
	transform: translateX(-50%);

	backdrop-filter: blur(2px) brightness(0.5) contrast(0.5);
	-webkit-backdrop-filter: blur(2px) brightness(0.5) contrast(0.5);

	display: none;
}

div#mcp_container {
	position: absolute;
	top: 4.4vh;

	--mcp-container-height: 84vh;
	--mcp-container-width: calc(var(--mcp-container-height) * 1183 / 905);

	height: var(--mcp-container-height);
	width: var(--mcp-container-width);

	left: calc(var(--mcp-container-width) * -1080 / 1183);
	
	border: 0px solid red;
	z-index: 105;

	display: none;
}

.mcp {
	position: absolute;

	top: 0vh;
	left: 0vh;
	height: 100%;
	width: 100%;
}

.mcp_tappable {
	cursor: pointer;
	pointer-events: auto;

	z-index: 3;
}

div#mcp_mentor_dash {
	display: none;
}

img#mcp_battery_level {
	position: absolute;
	top: 20.4%;
	left: 60.4%;
	width: 12%;
	height: calc(12% * 124 / 300);

	clip-path: polygon(0% 0%, 82% 0%, 89% 100%, 0% 100%);
}

div#mcp_battery_level_text {
	position: absolute;
	top: 21.3%;
	left: 52.4%;
	height: 4%;
	width: 9%;

	border: 0px solid purple;

	color: #71E289;
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 2.8vh;
	line-height: 2.8vh;
	-webkit-text-stroke: 0.1vh #2D2D2D;
}

div#mcp_robot_version {
	position: absolute;
	top: 51.4%;
	left: 6%;
	height: 2.4%;
	width: 20.5%;

	border: 0px solid purple;

	color: #325866;
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 1.6vh;
	line-height: 1.6vh;
}

div#mcp_circuitry {
	left: -0.7%;
	top: 0.5%;
}

div.mcp_circuit_div {
	position: absolute;
	width: 6%;
	height: 6%;

	background-repeat: no-repeat;
	background-size: contain;
}

div.mcp_circuit_heart_div {
	top: 63.8%;

	background-image: url('images/mcp/moxieDash_circuit_heart_empty.svg');
}

div.mcp_circuit_heart_div_shadow {
	top: 63.8%;

	transform: translate(0.15vh, 0.2vh);

	background-image: url('images/mcp/moxieDash_circuit_heart_shadow.svg');
}

div.mcp_circuit_mind_div {
	top: 74%;

	background-image: url('images/mcp/moxieDash_circuit_mind_empty.svg');
}

div.mcp_circuit_mind_div_shadow {
	top: 74%;

	transform: translate(0.15vh, 0.2vh);

	background-image: url('images/mcp/moxieDash_circuit_mind_shadow.svg');
}

div.mcp_circuit_body_div {
	top: 83.9%;

	background-image: url('images/mcp/moxieDash_circuit_bod_empty.svg');
}

div.mcp_circuit_body_div_shadow {
	top: 83.9%;

	transform: translate(0.15vh, 0.2vh);

	background-image: url('images/mcp/moxieDash_circuit_bod_shadow.svg');
}

div.mcp_circuit_div_col_1 {
	left: 22.2%;
}

div.mcp_circuit_div_col_2 {
	left: 28.8%;
}

div.mcp_circuit_div_col_3 {
	left: 35.4%;
}

div.mcp_circuit_div_col_4 {
	left: 42.1%;
}

div.mcp_circuit_div_col_5 {
	left: 48.7%;
}

div.mcp_circuit_div_bod_col_1 {
	left: 22.6%;
}

div.mcp_circuit_div_bod_col_2 {
	left: 29.2%;
}

div.mcp_circuit_div_bod_col_3 {
	left: 35.8%;
}

div.mcp_circuit_div_bod_col_4 {
	left: 42.4%;
}

div.mcp_circuit_div_bod_col_5 {
	left: 49.2%;
}

div.mcp_circuit {
	position: absolute;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-size: contain;

	transform-origin: 45% 50%;
}

div.mcp_circuit_heart {
	background-image: url('images/mcp/moxieDash_circuit_heart.svg');
}

div.mcp_circuit_mind {
	background-image: url('images/mcp/moxieDash_circuit_mind.svg');
}

div.mcp_circuit_body {
	background-image: url('images/mcp/moxieDash_circuit_bod.svg');

	transform-origin: 39% 50%;
}

div#mcp_toggle {
	position: absolute;
	top: 15%;
	left: 90%;
	height: 15%;
	width: 8%;

	padding: 3% 1%;

	border: 0px solid purple;

	background-image: url('images/mcp/moxieDash_icon_idle.svg');
	background-repeat: no-repeat;
	background-size: 64%;
	background-origin: content-box;
	background-position: center bottom;
}

div#mcp_toggle:hover {
	background-image: url('images/mcp/moxieDash_icon_hover.svg');
}

div#mcp_toggle:active {
	background-image: url('images/mcp/moxieDash_icon_click.svg');
}

div#mcp_hide {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 90%;

	pointer-events: auto;

	z-index: 1;

	border: 0px solid purple;
}

div#mcp_panel_main {
	pointer-events: none;
}

div.mcp_panel_subsection {
	display: none;
	pointer-events: none;
}

div#mcp_disconnect_yes_tappable {
	left: 29%;
	top: 75%;
	width: 9.5%;
	height: 12.3%;

	border: 0px dashed pink;
}

div#mcp_disconnect_yes {
	background-image: url('images/mcp/moxieLink_disconnectYES_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_disconnect_yes_tappable:hover + #mcp_disconnect_yes {
	background-image: url('images/mcp/moxieLink_disconnectYES_hover.svg');
}

#mcp_disconnect_yes_tappable:active + #mcp_disconnect_yes {
	background-image: url('images/mcp/moxieLink_disconnectYES_click.svg');
}

div#mcp_disconnect_no_tappable {
	left: 44%;
	top: 75%;
	width: 9.4%;
	height: 12.3%;

	border: 0px dashed pink;
}

div#mcp_disconnect_no {
	background-image: url('images/mcp/moxieLink_disconnectNO_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_disconnect_no_tappable:hover + #mcp_disconnect_no {
	background-image: url('images/mcp/moxieLink_disconnectNO_hover.svg');
}

#mcp_disconnect_no_tappable:active + #mcp_disconnect_no {
	background-image: url('images/mcp/moxieLink_disconnectNO_click.svg');
}

div.mcp_close_tappable {
	left: 68%;
	top: 19%;
	width: 6%;
	height: 8%;

	z-index: 12;

	border: 0px dashed pink;
}

div.mcp_close {
	background-image: url('images/mcp/moxieDash_closePanel_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_full_panel_close_tappable:hover + #mcp_full_panel_close {
	background-image: url('images/mcp/moxieDash_closePanel_hover.svg');
}

#mcp_full_panel_close_tappable:active + #mcp_full_panel_close {
	background-image: url('images/mcp/moxieDash_closePanel_click.svg');
}

#mcp_moods_close_tappable:hover + #mcp_moods_close {
	background-image: url('images/mcp/moxieDash_closePanel_hover.svg');
}

#mcp_moods_close_tappable:active + #mcp_moods_close {
	background-image: url('images/mcp/moxieDash_closePanel_click.svg');
}

#mcp_mentor_certificates_close_tappable:hover + #mcp_mentor_certificates_close {
	background-image: url('images/mcp/moxieDash_closePanel_hover.svg');
}

#mcp_mentor_certificates_close_tappable:active + #mcp_mentor_certificates_close {
	background-image: url('images/mcp/moxieDash_closePanel_click.svg');
}

#mcp_mentor_trophies_close_tappable:hover + #mcp_mentor_trophies_close {
	background-image: url('images/mcp/moxieDash_closePanel_hover.svg');
}

#mcp_mentor_trophies_close_tappable:active + #mcp_mentor_trophies_close {
	background-image: url('images/mcp/moxieDash_closePanel_click.svg');
}

#mcp_badges_close_tappable:hover + #mcp_badges_close {
	background-image: url('images/mcp/moxieDash_closePanel_hover.svg');
}

#mcp_badges_close_tappable:active + #mcp_badges_close {
	background-image: url('images/mcp/moxieDash_closePanel_click.svg');
}

div#mcp_disconnect_tappable {
	left: 58%;
	top: 83%;
	width: 14.6%;
	height: 8.6%;

	border: 0px dashed pink;
}

div#mcp_disconnect {
	background-image: url('images/mcp/moxieLink_disconnect_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_disconnect_tappable:hover + #mcp_disconnect {
	background-image: url('images/mcp/moxieLink_disconnect_hover.svg');
}

#mcp_disconnect_tappable:active + #mcp_disconnect {
	background-image: url('images/mcp/moxieLink_disconnect_click.svg');
}

div#mcp_tips_main_tappable {
	left: 17%;
	top: 39%;
	width: 18.2%;
	height: 23.8%;

	border: 0px dashed pink;
}

div#mcp_tips_main {
	background-image: url('images/mcp/tips_main_general_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_tips_main_tappable:hover + #mcp_tips_main {
	background-image: url('images/mcp/tips_main_general_hover.svg');
}

#mcp_tips_main_tappable:active + #mcp_tips_main {
	background-image: url('images/mcp/tips_main_general_click.svg');
}

div#mcp_tips_lightbar_tappable {
	left: 46.7%;
	top: 39%;
	width: 18.2%;
	height: 23.8%;

	border: 0px dashed pink;
}

div#mcp_tips_lightbar {
	background-image: url('images/mcp/tips_main_lightbar_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_tips_lightbar_tappable:hover + #mcp_tips_lightbar {
	background-image: url('images/mcp/tips_main_lightbar_hover.svg');
}

#mcp_tips_lightbar_tappable:active + #mcp_tips_lightbar {
	background-image: url('images/mcp/tips_main_lightbar_click.svg');
}

div#mcp_moxie_link {
	position: absolute;
	left: 78.82%;
	top: 21.6%;
	width: 9%;
	height: calc(9% * 96 / 66);

	z-index: 2;

	border: 0px solid purple;

	background-image: url('images/mcp/moxieLink_icon_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

div#mcp_moxie_link:hover {
	background-image: url('images/mcp/moxieLink_icon_hover.svg');
}

div#mcp_moxie_link:active {
	background-image: url('images/mcp/moxieLink_icon_click.svg');
}

div#mcp_moxie_tips {
	position: absolute;
	left: 78.56%;
	top: 38%;
	width: 8%;
	height: calc(8% * 88 / 78);

	z-index: 2;

	border: 0px solid purple;

	background-image: url('images/mcp/tips_icon_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

div#mcp_moxie_tips:hover {
	background-image: url('images/mcp/tips_icon_hover.svg');
}

div#mcp_moxie_tips:active {
	background-image: url('images/mcp/tips_icon_click.svg');
}

div#mcp_tips_general_scroller {
	position: absolute;
	left: 11vh;
	top: 25vh;
	width: 69.8vh;
	height: 50vh;

	overflow-y: scroll;

	pointer-events: auto;

	z-index: 2;

 	scrollbar-width: thin;
	scrollbar-color: rgba(178, 234, 232, 0.4) rgba(0, 0, 0, 0);

	border: 0px solid pink;
}

div#mcp_tips_general_scroller::-webkit-scrollbar {
	width: 1.2vh;
	height: 2vh;
	background-color: rgba(0, 0, 0, 0); /* or add it to the track */
}

div#mcp_tips_general_scroller::-webkit-scrollbar-thumb {
	border-radius: 0.6vh;
	background: rgba(178, 234, 232, 0.4);
}

img#mcp_tips_general_content {
	position: absolute;
	left: 50%;
	top: 0%;
	height: 100vh;

	transform: translateX(-50%);
}

div#mcp_tips_side_general_current_page_tappable {
	left: 6.6%;
	top: 44.5%;
	width: 8.8%;
	height: 11.6%;

	border: 0px dashed pink;
}

div#mcp_tips_side_general_current_page {
	background-image: url('images/mcp/tips_side_general_idle_currentPage.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_tips_side_general_current_page_tappable:hover + #mcp_tips_side_general_current_page {
	background-image: url('images/mcp/tips_side_general_hover.svg');
}

#mcp_tips_side_general_current_page_tappable:active + #mcp_tips_side_general_current_page {
	background-image: url('images/mcp/tips_side_general_click.svg');
}

div#mcp_tips_side_general_tappable {
	left: 6.6%;
	top: 45.5%;
	width: 7.3%;
	height: 9.8%;

	border: 0px dashed pink;
}

div#mcp_tips_side_general {
	background-image: url('images/mcp/tips_side_general_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_tips_side_general_tappable:hover + #mcp_tips_side_general {
	background-image: url('images/mcp/tips_side_general_hover.svg');
}

#mcp_tips_side_general_tappable:active + #mcp_tips_side_general {
	background-image: url('images/mcp/tips_side_general_click.svg');
}

div#mcp_tips_side_lightbar_current_page_tappable {
	left: 6.6%;
	top: 57.2%;
	width: 8.8%;
	height: 11.6%;

	border: 0px dashed pink;
}

div#mcp_tips_side_lightbar_current_page {
	background-image: url('images/mcp/tips_side_lightbar_idle_currentPage.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_tips_side_lightbar_current_page_tappable:hover + #mcp_tips_side_lightbar_current_page {
	background-image: url('images/mcp/tips_side_lightbar_hover.svg');
}

#mcp_tips_side_lightbar_current_page_tappable:active + #mcp_tips_side_lightbar_current_page {
	background-image: url('images/mcp/tips_side_lightbar_click.svg');
}

div#mcp_tips_side_lightbar_tappable {
	left: 6.8%;
	top: 57.5%;
	width: 8.5%;
	height: 10.8%;

	border: 0px dashed pink;
}

div#mcp_tips_side_lightbar {
	background-image: url('images/mcp/tips_side_lightbar_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_tips_side_lightbar_tappable:hover + #mcp_tips_side_lightbar {
	background-image: url('images/mcp/tips_side_lightbar_hover.svg');
}

#mcp_tips_side_lightbar_tappable:active + #mcp_tips_side_lightbar {
	background-image: url('images/mcp/tips_side_lightbar_click.svg');
}

img.mcp_mentor_dash_none {
    position: absolute;

	transform: translateX(-50%);
    height: 100%;

	z-index: 12;
}

div#mcp_mentor_dash_id_card_name_test {
	position: absolute;
	height: 3vh;
	width: auto;

	-webkit-text-stroke: 0.16vh black;
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 2.8vh;
	line-height: 2.8vh;

	opacity: 0;

	border: 0px solid purple;
}

div#mcp_mentor_dash_id_card_name {
	position: absolute;
	top: 42.1%;
	left: 8.7%;
	height: 3vh;
	width: 16.2%;

	color: white;
	-webkit-text-stroke: 0.16vh black;
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 2.4vh;
	line-height: 2.4vh;

	border: 0px solid purple;
}

img#mcp_mood_face {
	top: 19vh;
    left: 59vh;
    width: 21vh;
    height: 21vh;
}

div#mcp_mentor_view_badges_tappable {
	position: absolute;
	left: 10.1%;
    top: 85.6%;
	width: 11.8%;
	height: 5.1%;

	z-index: 2;

	border: 0px solid purple;
}

div#mcp_mentor_view_badges {
	background-image: url('images/mcp/badge_view_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_mentor_view_badges_tappable:hover + #mcp_mentor_view_badges {
		background-image: url('images/mcp/badge_view_hover.svg');
}

#mcp_mentor_view_badges_tappable:active + #mcp_mentor_view_badges {
	background-image: url('images/mcp/badge_view_click.svg');
}

div#mcp_mentor_view_certificates_tappable {
	position: absolute;
	left: 34.2%;
    top: 85.6%;
	width: 11.8%;
	height: 5.1%;

	z-index: 2;

	border: 0px solid purple;
}

div#mcp_mentor_view_certificates {
	background-image: url('images/mcp/cert_view_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_mentor_view_certificates_tappable:hover + #mcp_mentor_view_certificates {
	background-image: url('images/mcp/cert_view_hover.svg');
}

#mcp_mentor_view_certificates_tappable:active + #mcp_mentor_view_certificates {
	background-image: url('images/mcp/cert_view_click.svg');
}

div#mcp_mentor_view_trophies_tappable {
	position: absolute;
	left: 57.8%;
    top: 85.6%;
	width: 11.8%;
	height: 5.1%;

	z-index: 2;

	border: 0px solid purple;
}

div#mcp_mentor_view_trophies {
	background-image: url('images/mcp/trophy_view_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_mentor_view_trophies_tappable:hover + #mcp_mentor_view_trophies {
	background-image: url('images/mcp/trophy_view_hover.svg');
}

#mcp_mentor_view_trophies_tappable:active + #mcp_mentor_view_trophies {
	background-image: url('images/mcp/trophy_view_click.svg');
}

div#mcp_mentor_dash_moods {
	display: none;
}

img#mcp_mood_face_big {
	top: 35vh;
    left: 7.4vh;
    width: 30vh;
    height: 30vh;
}

div#mcp_mentor_dash_tappable {
	position: absolute;
	top: 0.5%;
	left: 34.5%;
	height: 11%;
	width: 29%;

	border: 0px solid purple;
}

div#mcp_moxie_dash_tappable {
	position: absolute;
	top: 0.5%;
	left: 2%;
	height: 11%;
	width: 32%;

	border: 0px solid purple;
}

img#mcp_daily_mission_image {
	left: 32.8vh;
    top: 19vh;
    width: 22vh;
    height: 16.5vh;
}

img.mcp_daily_mission_status {
	display: none;
}

div#mcp_daily_mission_title {
	left: 41.9vh;
    top: 39.5vh;
    width: 13.3vh;
    height: 5.9vh;

	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 1.6vh;
	line-height: 1.8vh;
	color: #003933;
	text-align: left;

	border: 0px solid purple;
}

div#mcp_moxie_mood_update_tappable {
	position: absolute;
	left: 57.5%;
	top: 47.6%;
	width: 11.8%;
	height: 5.1%;

	z-index: 2;

	border: 0px solid purple;
}

div#mcp_moxie_mood_update {
	background-image: url('images/mcp/mood_update_btn_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_moxie_mood_update_tappable:hover + #mcp_moxie_mood_update {
	background-image: url('images/mcp/mood_update_btn_hover.svg');
}

#mcp_moxie_mood_update_tappable:active + #mcp_moxie_mood_update {
	background-image: url('images/mcp/mood_update_btn_click.svg');
}

div#mcp_moxie_mood_big_update_tappable {
	position: absolute;
	left: 10.4%;
    top: 76.8%;
    width: 19.8%;
    height: 7.1%;

	z-index: 2;

	border: 0px solid purple;
}

div#mcp_moxie_mood_big_update {
	background-image: url('images/mcp/moodSelection_update_idle.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

#mcp_moxie_mood_big_update_tappable:hover + #mcp_moxie_mood_big_update {
	background-image: url('images/mcp/moodSelection_update_hover.svg');
}

#mcp_moxie_mood_big_update_tappable:active + #mcp_moxie_mood_big_update {
	background-image: url('images/mcp/moodSelection_update_click.svg');
}

div#mcp_mood_thumb_div {
    left: 35.1%;
    top: 35.8%;
    width: 37.8%;
    height: 54.1%;

	z-index: 3;

	border: 0px solid purple;
}

.mcp_mood_thumb {
	width: 23%;
	height: 20%;

	cursor: pointer;
	pointer-events: auto;

	border: 0px solid purple;
}

.mcp_mood_thumb:hover {
	transform: scale(1.2);
}

div#mcp_mentor_dash_certificates {
	display: none;
}

div#mcp_mentor_certificates_scroller {
	position: absolute;
	left: 11vh;
	top: 25vh;
	width: 69.8vh;
	height: 50vh;

	overflow-y: scroll;

	pointer-events: auto;

	z-index: 2;

 	scrollbar-width: thin;
	scrollbar-color: rgba(178, 234, 232, 0.4) rgba(0, 0, 0, 0);

	border: 0px solid pink;
}

div#mcp_mentor_certificates_scroller::-webkit-scrollbar {
	width: 1.2vh;
	height: 2vh;
	background-color: rgba(0, 0, 0, 0); /* or add it to the track */
}

div#mcp_mentor_certificates_scroller::-webkit-scrollbar-thumb {
	border-radius: 0.6vh;
	background: rgba(178, 234, 232, 0.4);
}

div#mcp_mentor_dash_enlarged_certificate {
	position: relative;

	left: 0vh;
	top: 0vh;
	width: 67vh;

	height: auto;

	float: left;

	border: 0px solid purple;
}

div#mcp_mentor_dash_certificate_thumbs {
	position: relative;

	left: 0vh;
    top: 0vh;
    width: 67vh;

	float: left;
}

div.mcp_mentor_dash_cert_thumbnail {
	position: relative;

	width: 22vh;
	height: calc((20vh * 562 / 745) + 5vh);

	margin-right: 0vh;
	margin-bottom: 2vh;

	float: left;
}

img.mcp_mentor_dash_cert_thumbnail_image {
	position: absolute;

	left: 0vh;
	width: 20vh;
	height: calc(20vh * 562 / 745);

	pointer-events: auto;
	cursor: pointer;
}

div.mcp_cert_print_btn {
	position: absolute;

	left: calc((20vh - (3vh * 134 / 41)) / 2);
	top: calc((20vh * 562 / 745) + 1vh);
	width: calc(3vh * 134 / 41);
	height: 3vh;

	pointer-events: auto;
	cursor: pointer;

	background-image: url('images/mcp/print_btn_idle.svg');
}

div.mcp_cert_print_btn:hover {
	background-image: url('images/mcp/print_btn_hover.svg');
}

div.mcp_cert_print_btn:active {
	background-image: url('images/mcp/print_btn_click.svg');
}

div#mcp_mentor_dash_trophies {
	display: none;
}

div#mcp_mentor_trophies_scroller {
	position: absolute;
	left: 11vh;
	top: 25vh;
	width: 69.8vh;
	height: 50vh;

	overflow-y: scroll;

	pointer-events: auto;

	z-index: 2;

 	scrollbar-width: thin;
	scrollbar-color: rgba(178, 234, 232, 0.4) rgba(0, 0, 0, 0);

	border: 0px solid pink;
}

div#mcp_mentor_trophies_scroller::-webkit-scrollbar {
	width: 1.2vh;
	height: 2vh;
	background-color: rgba(0, 0, 0, 0); /* or add it to the track */
}

div#mcp_mentor_trophies_scroller::-webkit-scrollbar-thumb {
	border-radius: 0.6vh;
	background: rgba(178, 234, 232, 0.4);
}

div#mcp_mentor_dash_trophy_thumbs {
	position: relative;

	left: 0vh;
    top: 0vh;
    width: 67vh;

	float: left;
}

div.mcp_mentor_dash_trophy_thumbnail {
	position: relative;

	width: calc(29vh + 2vh);
	height: calc((29vh * 399 / 457) + 2vh + 10vh);

	margin-left: 1vh;
	margin-right: 1vh;
	margin-bottom: 2vh;

	float: left;
	text-align: left;
}

img.mcp_mentor_dash_trophy_thumbnail_image {
	position: absolute;

	width: calc(29vh + 2vh);
	height: calc((29vh * 399 / 457) + 2vh);
}

img.mcp_mentor_dash_trophy_thumbnail_icon {
	position: absolute;
    width: 40%;
    left: 30%;
    top: 8%;
}

div.mcp_mentor_dash_trophy_title {
	position: absolute;

    top: 74%;
    width: 100%;
    height: 26%;

    color: white;
    font-family: 'BungeeRegular', Arial, sans-serif;
    font-size: 2.4vh;

    text-align: center;
    line-height: 3vh;
}

span#nav_mission_span {
	display: contents;
}

img#nav_mission_over {
	left: 7vh;
	top: 5.5vh;

	width: 11.8vh;
	height: 15.5vh;

	border: 0px red dashed;
}

img#nav_mission_sparkles {
	left: calc(100vh * (154 + (217 / 2) - ((219 * 1.25) * (315 / 290) / 2)) / 2000);
	top: calc(100vh * 53.25 / 2000);

	width: calc(100vh * 273.75 * (315 / 290) / 2000);
	height: calc(100vh * 273.75 / 2000);

/*	transform: translateX(-50%); */

	border: 0px green dashed;
}

#nav_mission {
	left: calc(100vh * 154 / 2000);
	top: calc(100vh * 123 / 2000);

	width: calc(100vh * 217 / 2000);
	height: calc(100vh * 219 / 2000);

	pointer-events: auto;
	cursor: pointer;

	transform-origin: 50% 100%;
/*	transition: 0.25s ease; */

	background-image: url("images/nav/mission_idle.svg");
}

@keyframes icon_bob { /* jerky; transform translateY gets smoother results but conflicts with the other (transition) transform */
	from {
		translate: 0px 0px;
	}
  
	to {
		translate: 0px -0.75vh;
	}
}
  
#nav_mission:hover {
/*	transform: scale(1.25); */

	background-image: url("images/nav/mission_hover.svg");

/*	animation-duration: 1.5s;
	animation-name: icon_bob;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out; */
}

#nav_mission:hover ~ #nav_mission_sparkles {
	opacity: 1;
}

#nav_mission:active {
	transform: scale(0.9);

	background-image: url("images/nav/mission_click.svg"), url("images/nav/mission_idle.svg");
}

#nav_mission:active ~ #nav_mission_sparkles {
	opacity: 0;
}

#nav_mission_over:hover + #nav_mission {
/*	transform: scale(1.25); */

background-image: url("images/nav/mission_hover.svg");

/*	animation-duration: 1.5s;
	animation-name: icon_bob;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out; */
}

#nav_mission_over:hover ~ #nav_mission_sparkles {
	opacity: 1;
}

#nav_mission_over:active + #nav_mission {
	transform: scale(0.9);

	background-image: url("images/nav/mission_click.svg"), url("images/nav/mission_idle.svg");
}

#nav_mission_over:active ~ #nav_mission_sparkles {
	opacity: 0;
}

span#nav_welcome_span {
	display: contents;

	--nav-icon-left: 97;
	--nav-icon-top: 539;
	--nav-icon-width: 144;
	--nav-icon-height: 144;
	--nav-icon-sparkle-width: 222;
	--nav-icon-sparkle-height: 222;
	--nav-icon-sparkle-size-multiplier: 1.2;

	--nav-icon-idle: url("images/nav/welcome_idle.svg");
	--nav-icon-hover: url("images/nav/welcome_hover.svg");
	--nav-icon-active: url("images/nav/welcome_click.svg");
}

img#nav_welcome_over {
	left: 4.3vh;
	top: 26.4vh;

	width: 8.1vh;
	height: 10.6vh;

	z-index: 1;
}

#nav_welcome_over:hover + #nav_welcome {
	background-image: var(--nav-icon-hover);
}

#nav_welcome_over:hover ~ #nav_welcome_sparkles {
	opacity: 1;
}

#nav_welcome_over:active + #nav_welcome {
	background-image: var(--nav-icon-active), var(--nav-icon-idle);
}

#nav_welcome_over:active ~ #nav_welcome_sparkles {
	opacity: 0;
}

span#nav_map_span {
	display: contents;

	--nav-icon-left: 297;
	--nav-icon-top: 541;
	--nav-icon-width: 149;
	--nav-icon-height: 140;
	--nav-icon-sparkle-width: 188;
	--nav-icon-sparkle-height: 218;
	--nav-icon-sparkle-size-multiplier: 1;

	--nav-icon-idle: url("images/nav/map_idle.svg");
	--nav-icon-hover: url("images/nav/map_hover.svg");
	--nav-icon-active: url("images/nav/map_click.svg");
}

img#nav_map_over {
	left: 14.4vh;
	top: 26.4vh;

	width: 8.1vh;
	height: 10.6vh;

	z-index: 1;
}

#nav_map_over:hover + #nav_map {
	background-image: var(--nav-icon-hover);
}

#nav_map_over:hover ~ #nav_map_sparkles {
	opacity: 1;
}

#nav_map_over:active + #nav_map {
	background-image: var(--nav-icon-active), var(--nav-icon-idle);
}

#nav_map_over:active ~ #nav_map_sparkles {
	opacity: 0;
}

span#nav_playzone_span {
	display: contents;

	--nav-icon-left: 96;
	--nav-icon-top: 854;
	--nav-icon-width: 137;
	--nav-icon-height: 157;
	--nav-icon-sparkle-width: 240;
	--nav-icon-sparkle-height: 211;
	--nav-icon-sparkle-size-multiplier: 1;

	--nav-icon-idle: url("images/nav/playzone_idle.svg");
	--nav-icon-hover: url("images/nav/playzone_hover.svg");
	--nav-icon-active: url("images/nav/playzone_click.svg");
}

img#nav_playzone_over {
	left: 4.3vh;
	top: 42.4vh;

	width: 8.1vh;
	height: 11vh;

	z-index: 1;
}

#nav_playzone_over:hover + #nav_playzone {
	background-image: var(--nav-icon-hover);
}

#nav_playzone_over:hover ~ #nav_playzone_sparkles {
	opacity: 1;
}

#nav_playzone_over:active + #nav_playzone {
	background-image: var(--nav-icon-active), var(--nav-icon-idle);
}

#nav_playzone_over:active ~ #nav_playzone_sparkles {
	opacity: 0;
}

span#nav_reading_span {
	display: contents;

	--nav-icon-left: 295;
	--nav-icon-top: 853;
	--nav-icon-width: 156;
	--nav-icon-height: 156;
	--nav-icon-sparkle-width: 205;
	--nav-icon-sparkle-height: 205;
	--nav-icon-sparkle-size-multiplier: 1;

	--nav-icon-idle: url("images/nav/reading_idle.svg");
	--nav-icon-hover: url("images/nav/reading_hover.svg");
	--nav-icon-active: url("images/nav/reading_click.svg");
}

img#nav_reading_over {
	left: 14.4vh;
	top: 42.4vh;

	width: 8.1vh;
	height: 11vh;

	z-index: 1;
}

#nav_reading_over:hover + #nav_reading {
	background-image: var(--nav-icon-hover);
}

#nav_reading_over:hover ~ #nav_reading_sparkles {
	opacity: 1;
}

#nav_reading_over:active + #nav_reading {
	background-image: var(--nav-icon-active), var(--nav-icon-idle);
}

#nav_reading_over:active ~ #nav_reading_sparkles {
	opacity: 0;
}

span#nav_paper_span {
	display: contents;

	--nav-icon-left: 90;
	--nav-icon-top: 1186;
	--nav-icon-width: 148;
	--nav-icon-height: 148;
	--nav-icon-sparkle-width: 324;
	--nav-icon-sparkle-height: 285;
	--nav-icon-sparkle-size-multiplier: 1;

	--nav-icon-idle: url("images/nav/paper_idle.svg");
	--nav-icon-hover: url("images/nav/paper_hover.svg");
	--nav-icon-active: url("images/nav/paper_click.svg");
}

img#nav_paper_over {
	left: 4.1vh;
	top: 58.8vh;

	width: 8.1vh;
	height: 11vh;

	z-index: 1;
}

#nav_paper_over:hover + #nav_paper {
	background-image: var(--nav-icon-hover);
}

#nav_paper_over:hover ~ #nav_paper_sparkles {
	opacity: 1;
}

#nav_paper_over:active + #nav_paper {
	background-image: var(--nav-icon-active), var(--nav-icon-idle);
}

#nav_paper_over:active ~ #nav_paper_sparkles {
	opacity: 0;
}

span#nav_calendar_span {
	display: contents;

	--nav-icon-left: 291;
	--nav-icon-top: 1190;
	--nav-icon-width: 157;
	--nav-icon-height: 137;
	--nav-icon-sparkle-width: 195;
	--nav-icon-sparkle-height: 195;
	--nav-icon-sparkle-size-multiplier: 1.2;

	--nav-icon-idle: url("images/nav/calendar_idle.svg");
	--nav-icon-hover: url("images/nav/calendar_hover.svg");
	--nav-icon-active: url("images/nav/calendar_click.svg");
}

img#nav_calendar_over {
	left: 14.3vh;
	top: 58.8vh;

	width: 8.1vh;
	height: 11vh;

	z-index: 1;
}

#nav_calendar_over:hover + #nav_calendar {
	background-image: var(--nav-icon-hover);
}

#nav_calendar_over:hover ~ #nav_calendar_sparkles {
	opacity: 1;
}

#nav_calendar_over:active + #nav_calendar {
	background-image: var(--nav-icon-active), var(--nav-icon-idle);
}

#nav_calendar_over:active ~ #nav_calendar_sparkles {
	opacity: 0;
}

div#connect_moxie_bar {
	position: absolute;
	z-index: 100;
	height: 14.9vh;
	top: 82.1vh;
	right: 2.8vh;
	right: max(2.8vh, calc(50vw - 109.13vh)); /* this is the right way, but above is what Microsoft Edge understands */
	width: 113.4vh;

	display: none;

	border: 0px solid rgb(166,239,246);
}

div#connect_moxie_background_square_under {
	position: absolute;
	z-index: 100;
	top: 83vh;
	right: 4.6vh;
	right: max(4.6vh, calc(50vw - 107.33vh));
	height: 14vh;
	width: 15vh;

/*	background-color: rgb(253,226,166);
	background-color: rgb(126,203,199);
	border-radius: 0.5vh; */

	background-image: url('images/connect_moxie_background_square.png');
	background-repeat: no-repeat;
	background-size: contain;

	display: none;
}

div#connect_moxie_background_square {
	position: absolute;
	z-index: 100;
	top: 83vh;
	right: 4.6vh;
	right: max(4.6vh, calc(50vw - 107.33vh));
	height: 14vh;
	width: 15vh;

	cursor: pointer;

	display: none;
}

.lower_right_moxie {
	position: absolute;
	z-index: 100;
	top: 77vh;
	right: 3.6vh;
	right: max(3.6vh, calc(50vw - 108.33vh));
	height: 18vh;

	cursor: pointer;

	display: none;
}

div#connect_moxie_enter_code {
	position: absolute;
	top: 0.9vh;
	height: 7vh;
	left: 0vh;
	width: 94.3%;
	padding: 2vh;
	padding-top: 5vh;

	text-align: left;

/*	background-color: rgb(253,226,166);
	background-color: rgb(126,203,199);
	border-radius: 0.5vh; */

	background-image: url('images/connect_moxie_bar.png');
	background-repeat: no-repeat;
	background-size: contain;

	color: black;

	font-family: sans-serif;
	font-size: 2.2vh;
	font-weight: bold;

	border: 0px dashed blue;

}

span#connect_moxie_read_more {
	font-size: 1.4vh;
	font-weight: normal;
	color: rgb(96,184,255);

	cursor: pointer;
}

div#connect_moxie_read_more_expanded {
	position: absolute;
	z-index: 100;
	top: 60vh;
	right: 4.6vh;
	right: max(4.6vh, calc(50vw - 107.33vh));
	height: 29vh;
	width: 60vh;

	padding: 2vh;
	padding-top: 3vh;
	padding-bottom: 5vh;
	padding-right: 18vh;

	text-align: left;

	background-color: rgb(253,226,166);
	background-color: rgb(126,203,199);
	border-radius: 0.5vh;

	color: black;
	font-size: 1.6vh;

	border: 0px dashed blue;
	display: none;
}

div#connect_moxie_read_more_expanded a {
	color: rgb(96,184,255);
	cursor: pointer;
	font-weight: bold;
}

span.connect_moxie_read_more_expanded_header {
	font-size: 2vh;
	font-weight: bold;
}

.connect_moxie_box {
	margin-left: 2vh;
	top: 0vh;
	width: 6vh;
	height: 6vh;
	font-size: 4vh;
	font-weight: bold;
	border-radius: 0.5vh;
	text-align: center;
	text-transform: uppercase;

	border: 1px solid black;
}

input#connect_moxie_box_1 {
	margin-left: 6vh;
}

img#moxie_connected_green_checkmark {
	margin-left: 1vh;
	top: 2vh;
	height: 4vh;

	display: none;
}

div#connect_moxie_invalid_or_expired_code {
	position: absolute;
	top: 12.7vh;
	left: 40vh;

	color: red;
	font-size: 1.2vh;

	display: none;
}

div#connect_moxie_x_div {
	position: absolute;
	left: -5vh;
	top: -5.1vh;
	height: 2.4vh;
	width: 2.4vh;
	padding: 1vh;

	text-align: center;

	background-color: rgba(0,0,0,0.3);
	border-radius: 2.2vh;

	cursor: pointer;
}

img#connect_moxie_x {
	position: absolute;
	width: 2.4vh;
	top: 1.1vh;
	left: 1vh;
}

#playspace_in_out {
    position: absolute;
	display: none;

    background-color: black;

    left: calc(50%);
    top: 0vh;
    height: 100%;
    width: 100%;

	transform: translateX(-50%);
}

div#playzone_lobby {
	position: absolute;
	display: none;
	width: 100vw;
	height: 100vh;
	background-color: black;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
}

.playzone_not_connected {
	display: none;
}

.playzone_locked {
	display: none;
}

.playzone_mentor_ready {
	display: none;
	pointer-events: none;
}

.playzone_mentor_not_ready {
	display: auto;
}

.playzone_moxie_ready {
	display: none;
	pointer-events: none;
}

.playzone_moxie_not_ready {
	display: auto;
}

div.playzone_lobby_name {
	position: absolute;
	top: 81.8vh;
    height: 3vh;
    width: 14vh;

	transform: translateX(-50%);

	font-family: 'OpenDyslexic', cursive;
    font-size: 2.6vh;
	line-height: 2.6vh;
	font-weight: bold;

	color: black;
}

div#playzone_lobby_mentor_name {
    left: calc(50% - 44.2vh);
}

div#playzone_lobby_mentor_name_test { /* invisible div used for sizing */
    left: calc(50% - 44.2vh);

	width: auto;
	display: table-cell;
	vertical-align: bottom;
	opacity: 0;
}

div#playzone_lobby_moxie_name {
    left: calc(50% + 11vh);
}

/*
div#playzone_lobby_synced {
	position: absolute;
	display: none;

	width: 100vw;
	height: 100vh;
	background-color: black;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);
}

div#playzone_lobby_unsynced {
	position: absolute;

	width: 100vw;
	height: 100vh;
	background-color: black;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);
}

div#playzone_unsynced_command {
	position: absolute;
	display: none;

	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);
}

img#playzone_coming_soon {
	position: absolute;
	display: none;

	width: calc(100vh * 300 / 138);
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);
}
*/

img.playzone_feature {
	pointer-events: none;
}

img#playzone_fade {
	pointer-events: none;
	opacity: 0;
}

div#playzone_lobby_buttons {
	opacity: 0.2;

	filter: blur(4px);
}

.playzone_lobby_button {
	pointer-events: none;
}

.playzone_game_screen {
	display: none;
	pointer-events: none;
}

.playzone_game_screen_feature {
	display: none;
	pointer-events: auto;
}

.playzone_lobby_game_screen_back_alt_state {
	display: none;
	pointer-events: none;
}

div#playzone_lobby_game_play_over {
	position: absolute;
	top: 50.3vh;
    left: calc(50% - 0vh);
    height: 12.2vh;
    width: 27vh;

	transform: translateX(-50%);

	cursor: pointer;
	pointer-events: auto;

	border: 0px red solid;
}

img#playzone_lobby_game_play_hover {
	pointer-events: none;
}

img#playzone_lobby_game_play_active {
	pointer-events: none;
}

div#playzone_lobby_game_play_over:hover ~ img#playzone_lobby_game_play_hover {
    display: inline;
}

div#playzone_lobby_game_play_over:active ~ img#playzone_lobby_game_play_active {
    display: inline;
}

div#playzone_lobby_game_screen_back_over {
	position: absolute;
	top: 14.3vh;
    left: calc(50% - 31vh);
    height: 3.4vh;
    width: 5vh;

	transform: translateX(-50%);

	cursor: pointer;
	pointer-events: auto;

	border: 0px red solid;
}

img#playzone_lobby_game_screen_back_hover {
	pointer-events: none;
}

img#playzone_lobby_game_screen_back_active {
	pointer-events: none;
}

div#playzone_lobby_game_screen_back_over:hover ~ img#playzone_lobby_game_screen_back_hover {
    display: inline;
}

div#playzone_lobby_game_screen_back_over:active ~ img#playzone_lobby_game_screen_back_active {
    display: inline;
}

div.playzone_rollover {
	position: absolute;

    width: 72vh;
    height: 17.8vh;

	left: 50%;
	transform: translateX(-50%);

	cursor: pointer;

	border: solid red 0px;
}

div#playzone_ttt_rollover {
	top: 11.9vh;
}

div#playzone_gears_rollover {
	top: 30.6vh;
}

div#playzone_checkers_rollover {
	top: 49.3vh;
}

img.playzone_over {
	display: none;
	pointer-events: none;
}

div#playzone_ttt_rollover:hover + img#playzone_ttt_hover {
    display: inline;
}

div#playzone_ttt_rollover:active ~ img#playzone_ttt_click {
    display: inline;
}

div#playzone_gears_rollover:hover + img#playzone_gears_hover {
    display: inline;
}

div#playzone_gears_rollover:active ~ img#playzone_gears_click {
    display: inline;
}

div#playzone_checkers_rollover:hover + img#playzone_checkers_hover {
    display: inline;
}

div#playzone_checkers_rollover:active ~ img#playzone_checkers_click {
    display: inline;
}

/*
div.playzone_lobby_popup_element {
	position: absolute;
	display: none;
	opacity: 0;
	width: 216.67vh;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);
}

div#playzone_lobby_popup {
	background-image: url("images/playzone_lobby/playzone_popup_bg.png?v=2");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

div#playzone_lobby_popup_unsynced {
	background-image: url("images/playzone_lobby/playzone_popup_bg_unsynced.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

div#playzone_lobby_popup_cancel_rollover {
	position: absolute;

	top: 6vh;
    width: 8vh;
    height: 8vh;

    left: calc(50% + 34vh);
	transform: translateX(-50%);

	cursor: pointer;

	border: solid red 0px;
}

img.playzone_lobby_popup_cancel {
	pointer-events: none;
}

img#playzone_lobby_popup_cancel_idle {
	display: inline;
}

img#playzone_lobby_popup_cancel_hover {
	display: none;
}

img#playzone_lobby_popup_cancel_click {
	display: none;
}

div#playzone_lobby_popup_cancel_rollover:hover ~ img#playzone_lobby_popup_cancel_idle {
    display: none;
}

div#playzone_lobby_popup_cancel_rollover:hover ~ img#playzone_lobby_popup_cancel_hover {
    display: inline;
}

div#playzone_lobby_popup_cancel_rollover:hover ~ img#playzone_lobby_popup_cancel_click {
    display: none;
}

div#playzone_lobby_popup_cancel_rollover:active ~ img#playzone_lobby_popup_cancel_idle {
    display: none;
}

div#playzone_lobby_popup_cancel_rollover:active ~ img#playzone_lobby_popup_cancel_hover {
    display: none;
}

div#playzone_lobby_popup_cancel_rollover:active ~ img#playzone_lobby_popup_cancel_click {
    display: inline;
}
*/

div.policy_background {
	position: absolute;
	display: none;
	width: 100vw;
	height: 100vh;
	background-color: white;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
}

iframe.iframe_policy {
	position: absolute;
	background-color: white;
	color: black;
	top: 10vh;
	height: 80vh;
	width: 70%;

	left: 50%;
	transform: translateX(-50%);
}

div#faq_background {
	position: absolute;
	display: none;
	width: 100vw;
	height: 100vh;
	background-color: #0f2c45;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
}

div#faq {
	position: absolute;
	top: 8%;
	left: 25%;
	z-index: 25;

	width: 50%;
	height: 92%;
	opacity: 0.85;
	color: white;
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 3.8vmin;
}

div#faq_close {
	position: absolute;
	top: 0%;
	right: 1%;

	font-family: Arial, sans-serif;
	font-weight: bold;
	cursor: pointer;
}

div#faq_contents {
	height: 89%;
	width: 90%;
	margin: auto;
	overflow-y: auto;
	border: 0px solid red;
}

.faq_question {
	position: relative;

	color: #0f4d81;
	background-color: #89d6f0;
	font-size: 2vmin;

	line-height: 1.8em;
	border-radius: 0.9em;

	text-align: left;
	padding-left: 1em;
	margin-top: 0.4em;

	cursor: pointer;
}

.faq_answer {
	display: none;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 1.8vmin;
	font-weight: bold;
	text-align: left;
	padding: 0.4em 1em 0.8em 1em;
}

div#mcp_mentor_dash_badges {
	display: none;
}

div#mcp_mentor_dash_badge_info {
	position: absolute;
	top: 25%;
	left: calc(50% - 10.8vh);
	transform: translateX(-50%) scale(0.8);

	z-index: 11;

	height: 30vh;
	width: 75vh;
	margin-left: auto;
	margin-right: auto;
	opacity: 1;
	color: black;
	border: 0px solid red;
	border-radius: 25px;
	padding: 28px;
	padding-top: 0px;
	text-align: center;
}

div#badge_relative {
	position: relative;
	height: 30vh;
	width: 20.83vh;

	float: left;
	margin-left: 2vh;
	margin-right: 2vh;
	margin-bottom: 3vh;

	border: 0px solid yellow;
}

img.badge_content {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
}

img.badge_gear_top {
	position: absolute;
	top: 6.13%;
	left: 13.31%;
	height: 50.94%;

	animation: badge_gear_top_anim 12s infinite linear normal;
}

div.badge_gear_bottom_div {
	position: absolute;
	top: 51.45%;
	left: 13.31%;
	height: 50.94%;

/*	-webkit-mask-image: url(images/badge_bottom_gear_mask.png); 
	mask-image: url(images/badge_bottom_gear_mask.png); 
	-webkit-mask-size: contain;
	mask-size: contain; */

	clip-path: polygon(0% 0px, 100% 0.44%, 97.96% 36.05%, 3% 37%);
}

img.badge_gear_bottom {
	height: 100%;

	animation: badge_gear_bottom_anim 1.5s infinite linear normal;
}

div.badge_level {
	position: absolute;
	top: 64.5%;
	left: 50%;
	width: 100%;
	height: 12.1%;

	text-align: center;
	color: white; 
	font-family: 'BungeeRegular';
	font-size: 4vh;
	line-height: 4vh;	

	transform: translateX(-50%);

	border: 0px solid red;
}

@keyframes badge_gear_top_anim {
	0% { transform: rotate(0deg) }
	100% { transform: rotate(360deg) }
}

@keyframes badge_gear_bottom_anim {
	0% { transform: rotate(22.5deg); }
	50% { transform: rotate(0deg); }
	100% { transform: rotate(-22.5deg); }
}

img.badge_star {
	position: absolute;
	height: 15.09%;
	content:url(images/gold_star.png);

	display: none;
}

img.badge_star_1 {
	top: 84.45%; 
	left: 13.1%;
	transform: translateX(-50%) translateY(-50%) rotate(21.7deg);
}

img.badge_star_1_visible {
	display: block;
}

img.badge_star_1_appear {
	display: block;
	animation: badge_star_1_appear_anim_1 var(--star-appear-anim-length-1) 1 ease-out forwards, badge_star_1_appear_anim_2 var(--star-appear-anim-length-2) var(--star-appear-anim-length-1) 1 ease-out forwards;
}

@keyframes badge_star_1_appear_anim_1 {
	0% { height: 0%; transform: translateX(-50%) translateY(-50%) rotate(21.7deg) }
	100% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(381.7deg) }
}

@keyframes badge_star_1_appear_anim_2 {
	0% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(381.7deg) }
	100% { height: 15.09%; transform: translateX(-50%) translateY(-50%) rotate(381.7deg) }
}

img.badge_star_1_levelup {
	display: block;
	animation: badge_star_1_levelup_anim_1 var(--badge-level-anim-length-1) 1 ease-out forwards;
	z-index: 2;
}

@keyframes badge_star_1_levelup_anim_1 {
	0% { height: 15.09%; transform: translateX(-50%) translateY(-50%) rotate(21.7deg) }
	100% { height: 55%; transform: translateX(-8%) translateY(-78%) rotate(-130deg) }
}

img.badge_star_2 {
	top: calc(82.8% + 7.545% + 0.05%);
	left: calc(26.5% + 7.545% + 3.5%);
	transform: translateX(-50%) translateY(-50%) rotate(0deg);
}

img.badge_star_2_visible {
	display: block;
}

img.badge_star_2_appear {
	display: block;
	animation: badge_star_2_appear_anim_1 var(--star-appear-anim-length-1) 1 ease-out forwards, badge_star_2_appear_anim_2 var(--star-appear-anim-length-2) var(--star-appear-anim-length-1) 1 ease-out forwards;
}

@keyframes badge_star_2_appear_anim_1 {
	0% { height: 0%; transform: translateX(-50%) translateY(-50%) rotate(0deg) }
	100% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(360deg) }
}

@keyframes badge_star_2_appear_anim_2 {
	0% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(360deg) }
	100% { height: 15.09%; transform: translateX(-50%) translateY(-50%) rotate(360deg) }
}

img.badge_star_2_levelup {
	display: block;
	animation: badge_star_2_levelup_anim_1 var(--badge-level-anim-length-1) 1 ease-out forwards;
	z-index: 2;
}

@keyframes badge_star_2_levelup_anim_1 {
	0% { height: 15.09%; transform: translateX(-50%) translateY(-50%) rotate(0deg) }
	100% { height: 55%; transform: translateX(-39%) translateY(-89%) rotate(-130deg) }
}

img.badge_star_3 {
	top: calc(82.8% + 7.545% + 0.05%);
	left: calc(52.8% + 7.545% + 3.3%);
	transform: translateX(-50%) translateY(-50%) rotate(-16.1deg);
}

img.badge_star_3_visible {
	display: block;
}

img.badge_star_3_appear {
	display: block;
	animation: badge_star_3_appear_anim_1 var(--star-appear-anim-length-1) 1 ease-out forwards, badge_star_3_appear_anim_2 var(--star-appear-anim-length-2) var(--star-appear-anim-length-1) 1 ease-out forwards;
}

@keyframes badge_star_3_appear_anim_1 {
	0% { height: 0%; transform: translateX(-50%) translateY(-50%) rotate(-16.1deg) }
	100% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(343.9deg) }
}

@keyframes badge_star_3_appear_anim_2 {
	0% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(343.9deg) }
	100% { height: 15.09%; transform: translateX(-50%) translateY(-50%) rotate(343.9deg) }
}

img.badge_star_3_levelup {
	display: block;
	animation: badge_star_3_levelup_anim_1 var(--badge-level-anim-length-1) 1 ease-out forwards;
	z-index: 2;
}

@keyframes badge_star_3_levelup_anim_1 {
	0% { height: 15.09%; transform: translateX(-50%) translateY(-50%) rotate(-16.1deg) }
	100% { height: 55%; transform: translateX(-70%) translateY(-89%) rotate(-130deg) }
}

img.badge_star_4 {
	top: calc(76.7% + 7.545% - 0.05%);
	left: calc(77.05% + 7.545% + 3.4%);
	transform: translateX(-50%) translateY(-50%) rotate(-37.7deg);
}

img.badge_star_4_visible {
	display: block;
}

img.badge_star_4_appear {
	display: block;
	animation: badge_star_4_appear_anim_1 var(--star-appear-anim-length-1) 1 ease-out forwards, badge_star_4_appear_anim_2 var(--star-appear-anim-length-2) var(--star-appear-anim-length-1) 1 ease-out forwards;
}

@keyframes badge_star_4_appear_anim_1 {
	0% { height: 0%; transform: translateX(-50%) translateY(-50%) rotate(-37.7deg) }
	100% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(322.3deg) }
}

@keyframes badge_star_4_appear_anim_2 {
	0% { height: 30%; transform: translateX(-50%) translateY(-50%) rotate(322.3deg) }
	100% { height: 15.09%; transform: translateX(-50%) translateY(-50%) rotate(322.3deg) }
}

img.badge_star_4_levelup {
	display: block;
	animation: badge_star_4_levelup_anim_1 var(--badge-level-anim-length-1) 1 ease-out forwards, badge_star_4_levelup_anim_2 var(--badge-level-anim-length-2) var(--badge-level-anim-length-1) 1 linear forwards;
	z-index: 2;
}

@keyframes badge_star_4_levelup_anim_1 {
	0% { height: 15.09%; top: 84.195%; left: 87.995%; transform: translateX(-50%) translateY(-50%) rotate(-37.7deg) }
	100% { height: 55%; top: 71%; left: 49.4%; transform: translateX(-50%) translateY(-50%) rotate(-130deg) }
}

@keyframes badge_star_4_levelup_anim_2 {
	0% { height: 55%; transform: translateX(-50%) translateY(-50%) rotate(-130deg) }
	25% { height: 23%; transform: translateX(-50%) translateY(-50%) rotate(-152deg) }
	50% { height: 1%; opacity: 1; transform: translateX(-50%) translateY(-50%) rotate(-152deg) }
	67% { opacity: 0.8; transform: translateX(-50%) translateY(-50%) rotate(-152deg) }
	100% { height: 400%; opacity: 0; transform: translateX(-50%) translateY(-50%) }
}

div.badge_level_levelup {
	display: block;
	animation: badge_level_levelup_anim var(--badge-level-anim-length-2) var(--badge-level-anim-length-1) 1 linear forwards;
}

@keyframes badge_level_levelup_anim {
	0%,66% { 
		opacity: 0;
		top: 64.5%;
		width: 100%;
		height: 12.1%;
	
		color: white; 
		font-size: 4vh;
		line-height: 4vh;	
	
	 }
	67% { 
		opacity: 1;
		top: 58.4%;
		width: 200%;
		height: 24.2%;
	
		color: #f8ec07; 
		font-size: 8vh;
		line-height: 8vh;	

	 }
	 72% { 
		top: 52.3%;
		width: 300%;
		height: 36.3%;
	
		color: #fac505; 
		font-size: 12vh;
		line-height: 12vh;	

	 }
	 100% { 
		opacity: 1;
		top: 64.5%;
		width: 100%;
		height: 12.1%;
	
		color: white; 
		font-size: 4vh;
		line-height: 4vh;	
	
	 }
}

div#calendar_background {
	position: absolute;
	height: 100vh;
	width: calc(100vh * 3120 / 1440);
	background-size: contain;

	left: 50%;
	transform: translateX(-50%);

	z-index: 9;
	display: none;
}	

.no-webp #calendar_background { background-image: url("images/calendar/background.png"); }
.webp #calendar_background { background-image: url("images/calendar/background.webp"); }

div#calendar_container {
	position: absolute;
	top: 12vh;
	height: 81vh;
	width: 108vh;

	left: 50%;
	transform: translateX(-50%);

	font-family: 'BungeeRegular', Arial, sans-serif;
	color: white;

	display: grid;
	grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% auto;
	grid-template-rows: auto auto auto auto auto auto auto auto auto;

	border: 0px dashed white;
}

div#calendar_year {
	grid-column: 1 / 8;
	grid-row: 1 / 2;

	font-size: 2.4vmin;
}

div#calendar_month_previous {
	grid-column: 1 / 3;
	grid-row: 2 / 3;

	font-size: 2.2vh;
	line-height: 2.8vh;

	opacity: 0.6;
}

div#calendar_month_current {
	grid-column: 3 / 6;
	grid-row: 2 / 3;

	font-size: 2.8vh;
	line-height: 2.8vh;
}

div#calendar_month_next {
	grid-column: 6 / 8;
	grid-row: 2 / 3;

	font-size: 2.2vh;
	line-height: 2.8vh;

	opacity: 0.6;
}

div#calendar_days_of_week {
	grid-column: 1 / 8;
	grid-row: 3 / 4;

	margin-top: 3vh;
}

.day_of_week_header {
	text-align: center;
	float: left;
	width: 15.42vh;
	margin: 0px;
	padding: 0px;

	font-size: 1.6vmin;
}

.calendar_day {
	position: relative;
	text-align: right;
	float: left;
	width: 13.82vh;
	height: 9vh;
	margin: 0.1vh 0.3vh 0.1vh 0.3vh;
	padding: 0.5vh;

	border-radius: 0.5vh;
	box-shadow: -0.2vh 0.3vh rgba(0, 0, 0, 0.7);

	font-family: Arial, sans-serif;
	font-size: 1.5vh;
	font-weight: bold;
	color: black;

	background-color: white;
	z-index: 9;
	cursor: pointer;
}

.calendar_day_previous_month {
	background-color: #818181;
	opacity: 0.6;
	box-shadow: none;
}

.calendar_day_next_month {
	background-color: #6f6f6f;
	opacity: 0.6;
	box-shadow: none;
}

.calendar_day_this_month_past {
	background-color: #7d7d7d;
}

.calendar_day_placeholder {
}

.calendar_day_this_month_today {
	background-color: white;
	pointer-events: none;
}

img#today_star {
	position: absolute;
	z-index: 10;
	width: 20vh;
	height: 20vh;

	pointer-events: none;
}

img#calendar_today_arrow {
	position: absolute;
	z-index: 13;
	width: 6vh;

	pointer-events: none;
}

div#calendar_today_word {
	position: absolute;
	z-index: 13;
	width: 13vh;

	font-size: 3vh;
	line-height: 3.6vh;
	-webkit-text-stroke: 0.16vh black;
	text-shadow: 0vh 0.3vh #999;

	text-align: center;

	border: 0px solid red;

	pointer-events: none;
}

div.calendar_days_row {
	position: relative;
	grid-column: 1 / 8;
}

div#calendar_days_row_1 {
	grid-row: 4 / 5;
}

div#calendar_days_row_2 {
	grid-row: 5 / 6;
}

div#calendar_days_row_3 {
	grid-row: 6 / 7;
}

div#calendar_days_row_4 {
	grid-row: 7 / 8;
}

div#calendar_days_row_5 {
	grid-row: 8 / 9;
}

div#calendar_days_row_6 {
	grid-row: 9 / 10;
}

div.calendar_flipper {
	position: absolute;
	top: 37vh;

	left: 50%;
	transform: translateX(-50%);

	height: 12vh;

	background-size: contain;
	background-repeat: no-repeat;

	cursor: pointer;
}

div#calendar_flipper_left {
	width: calc(12vh * 216 / 205);

	left: calc(50% - 63vh);

	background-image: url('images/ui/flipper_yellowpink_left_idle.svg');
}

div#calendar_flipper_left:hover {
	background-image: url('images/ui/flipper_yellowpink_left_hover.svg');
}

div#calendar_flipper_left:active {
	background-image: url("images/ui/flipper_yellowpink_left_active.svg"), url("images/ui/flipper_yellowpink_left_idle.svg");
}

div#calendar_flipper_right {
	width: calc(12vh * 243 / 231);

	left: calc(50% + 63vh);

	background-image: url('images/ui/flipper_yellowpink_right_idle.svg');
}

div#calendar_flipper_right:hover {
	background-image: url('images/ui/flipper_yellowpink_right_hover.svg');
}

div#calendar_flipper_right:active {
	background-image: url("images/ui/flipper_yellowpink_right_active.svg"), url("images/ui/flipper_yellowpink_right_idle.svg");
}

.calendar_stuff {
	position: absolute;
	width: 13.5vh;
	height: 8.6vh;
	margin-top: -0.8vh;
	border: 0px solid red;
	transform: scaleY(-1); 

	pointer-events: none;
}

.calendar_block {
	width: 3.9vh;
	height: 3.6vh;
	border-radius: 0.5vh;
	float: left;
	margin: 0.3vh;

	transform: scaleY(-1);

	background-repeat: no-repeat;
	background-size: contain;
}

.calendar_block_blue {
	background-color: #267bf7;
}

.calendar_block_holiday {
	background-image: url('images/calendar_icon_holiday.png');
}

.calendar_block_christmas_eve {
	background-image: url('images/calendar/icon_christmas_eve_small.png');
}

.calendar_block_christmas {
	background-image: url('images/calendar/icon_christmas.png');
}

.calendar_block_new_years_eve {
	background-image: url('images/calendar/icon_new_years_eve_small.png');
}

.calendar_block_new_years_day {
	background-image: url('images/calendar/icon_new_years_day_small.png');
}

.calendar_block_certificate {
	background-image: url('images/calendar_icon_certificate.png');
}

.calendar_block_circuit_heart {
	background-image: url('images/calendar_icon_circuit_heart.png');
}

.calendar_block_circuit_mind {
	background-image: url('images/calendar_icon_circuit_mind.png');
}

.calendar_block_circuit_body {
	background-image: url('images/calendar_icon_circuit_body.png');
}

.calendar_block_trophy {
	background-image: url('images/calendar_icon_trophy.png');
}

.calendar_block_badge_reading {
	background-image: url('images/calendar_icon_badge_reading.png');
}

.calendar_block_badge_stories {
	background-image: url('images/calendar_icon_badge_stories.png');
}

.calendar_block_badge_mindfulness {
	background-image: url('images/calendar_icon_badge_mindfulness.png');
}

.calendar_block_badge_wordoftheday {
	background-image: url('images/calendar_icon_badge_wordoftheday.png');
}

div#calendar_today_exploded {
	position: relative;
	top: 0vh;
	height: 100vh;
	width: 100vw;

/*	left: 50%;
	transform: translateX(-50%); */

	z-index: 70;
	display: none;
}

.calendar_day_icon img.icon_feather {
	width: 90.123%;
}

.calendar_day_icon img.icon_pencil {
	height: 74.992%;
}

.calendar_day_icon img.icon_lightning {
	height: 85.337%;
}

.calendar_day_icon img.icon_calendar {
}

.calendar_day_icon img.icon_trophy {
}

.calendar_day_icon img.icon_certificate {
}

.calendar_day_icon img.icon_circuit {
}

.calendar_day_icon img.icon_check_mark {
}

.calendar_day_icon img.icon_book {
}

.calendar_day_icon img.icon_stories {
}

.calendar_day_icon img.icon_mindfulness {
}

.calendar_day_icon img.icon_word_of_the_day {
}

span.calendar_today_headline {
	font-family: Arial Black, Arial, sans-serif;
	font-size: 2.8vh;
	line-height: 4.2vh;
	text-transform: uppercase;
}

.calendar_day_outer {
	position: absolute;
	top: 5.81vh;
	height: 88.38vh;
	width: calc(12.94vh * 5.8939);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.calendar_day_header {
	position: relative;
	height: 12.94vh;
	margin-bottom: -0.78424vh;
	background-image: url(images/calendar_day_shell_top.png);
	background-size: 100% 100%;
	z-index: 2;
}

.calendar_day_header div#calendar_day_date {
	position: absolute;
	top: 38.176%;
	width: 74.737%;
	height: 39.645%;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 4vh;
	line-height: 4.6vh;
	color: #ffdfd2;
	text-align: center;
	border: 0px red dashed;
}

.calendar_day_body {
	position: relative;
	width: 70.17vh;
	margin-left: auto;
	margin-right: auto;
	overflow-y: auto;
}

.calendar_day_body .calendar_day_line {
	position: relative;
	margin: 0 5.665vh 0 5.665vh;
	min-height: 9vh;
	padding: 1vh 7vh 1vh 7vh;
	font-family: Arial, sans-serif;
	font-size: 1.8vh;
	line-height: 2.1vh;
	font-weight: bold;
	text-align: left;
	color: #005d79;
}

.calendar_day_body .calendar_day_line_wrench {
	min-height: 0;
	text-align: center;
}

.calendar_day_body .calendar_day_line:first-child {
	padding-top: 3vh;
/*	min-height: 0;
	text-align: center; */
}

.calendar_day_body .calendar_day_line:nth-child(3n + 1) {
	background-color: #ebfaff;
}

.calendar_day_body .calendar_day_line:nth-child(3n + 2) {
	background-color: #adecfb;
}

.calendar_day_body .calendar_day_line:nth-child(3n + 3) {
	background-color: #d9f3f8;
}

.calendar_day_body .calendar_day_line .calendar_day_headline {
	font-family: Arial Black, Arial, sans-serif;
	font-size: 2.8vh;
	line-height: 4.2vh;
	text-transform: uppercase;
}

.calendar_day_body .calendar_day_line .calendar_day_icon {
	position: absolute;
	left: 0;
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	width: 11.33vh;
	height: 11.33vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar_day_body .calendar_day_line .calendar_day_icon img {
	max-width: 100%;
	max-height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
}

.calendar_day_body .calendar_day_line .calendar_day_icon.right {
	left: auto;
	right: 0;
	transform: translateX(50%) translateY(-50%);
}

.calendar_day_body .wrench {
	width: 10.06vh;
	height: 3.37vh;
	margin: 1vh;
}

.calendar_day_footer {
	position: relative;
	margin-top: -2.40209vh;
	height: 17.55vh;
	background-image: url(images/calendar_day_shell_bottom.png);
	background-size: 100% 100%;
	z-index: 2;
}

.calendar_day_footer div#calendar_day_mission_day {
	position: absolute;
	top: 50%;
	width: 13.2vh;
	height: 5.13vh;
	left: calc(50% + 24.8vh);
	transform: translateX(-50%) translateY(-50%) skewY(-5deg);
	font-family: 'BungeeRegular', Arial, sans-serif;
	font-size: 5vh;
	line-height: 5.6vh;
	text-align: center;
	color: #ffdfd2;
}

.calendar_day_arrow_back,
.calendar_day_arrow_forward {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(207vh / 20.48);
	height: calc(287vh / 20.48);
	cursor: pointer;
	z-index: 71;
	background-size: 100% 100%;
}

.calendar_day_arrow_back {
	left: calc(50% - 44vh);
	transform: translateY(-50%) translateX(-50%);
	background-image: url(images/calendar_day_arrow_back.png);
}

.calendar_day_arrow_back:hover {
	background-image: url(images/calendar_day_arrow_back_rollover.png);
}

.calendar_day_arrow_forward {
	left: calc(50% + 44vh);
	transform: translateY(-50%) translateX(-50%);
	background-image: url(images/calendar_day_arrow_forward.png);
}

.calendar_day_arrow_forward:hover {
	background-image: url(images/calendar_day_arrow_forward_rollover.png);
}


div#copyright_notice {
	position: absolute;
	margin: 0 auto;
	top: 94vh;
	width: 100%;
	font-family: sans-serif;
	font-size: 2.1vmin;
	font-weight: bold;
	color: #999;
	z-index: 120;

	pointer-events: none;

	border: 0px red solid;
}

div#copyright_notice a {
	color: #fff;
	text-decoration: underline;
	cursor: pointer;

	pointer-events: auto;
}

svg#svg {
	opacity: 0;
}

img.welcome_banner_arrow {
	top: calc(12.5vh + 56.37vh);
	height: calc(75vh * 0.154);
	width: calc(75vh * 0.167);

	left: calc(50% + 23.5vh);
	transform: translateX(-50%);

	cursor: pointer;
	pointer-events: auto;

	z-index: 120;

	opacity: 0;
}

div#welcome_banner_friends {
	position: absolute;
	width: 100vw;
	height: 100vh;

	background-color: rgba(0, 0, 0, 0.3);

	left: 50%;
	transform: translateX(-50%);

	z-index: 110;
	display: none;
}

img#welcome_banner_friends_static {
	position: absolute;
	top: 10vh;
	height: 80vh;
	width: calc(80vh * 1487 / 1041);

	left: 50%;
	transform: translateX(-50%);

	z-index: 111;
}

div.circuit_notification {
	position: relative;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: 112;
	display: none;
}

img.circuit_text {
	height: 40vh;
	width: calc(40vh * 714 / 1004);

	top: 27vh;

	opacity: 0;
}

div.circuit_main {
	width: 18vh;
	height: 18vh;

	top: 41vh;

	margin: auto;
}

img.circuit_backlight {
	height: 60vh;
	width: 60vh;

	top: 20vh;

	opacity: 0;
}

img.circuit_base {
	width: 100%;
	height: 100%;

	margin-left: 0.05vh;
}

img.circuit_light {
	width: 0.8vh;
	height: 0.8vh;

	opacity: 0;
}

img.circuit_icon_backlight {
	height: 46%;
	width: 46%;

	top: 27%;

	opacity: 0;
}

img.circuit_icon {
	height: 38%;
	width: calc(38% * 170 / 234);

	top: 31%;
}

img.circuit_icon_light {
	opacity: 0;
}

img.circuit_prize_button {
	height: 4vh;
	width: calc(4vh * 800 / 365);

	top: 15vh;
	margin-left: 13vh;

	pointer-events: auto;
	cursor: pointer;

	opacity: 0;
}

div#streak_notification {
	position: relative;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: 112;
	display: none;
}

div#blocker {
	position: relative;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: 99;
	display: none;
}

div#blocker_inside {
	position: absolute;
	top: 15%;
	
	width: 70%;
	height: 70%;

	left: 50%;
	transform: translateX(-50%);
}

div#trophy_notification {
	position: relative;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: 112;
	display: none;
}

img#trophy_notification_flare {
	position: absolute;
	top: 5vh;
	height: 76vh;
	width: calc(76vh * 924 / 880);

	left: 50%;
	transform: translateX(-50%);

	opacity: 0;

	border: 0px solid red;
}

img#trophy_notification_text {
	position: absolute;
	top: 7vh;
	height: 18vh;
	width: calc(18vh * 1000 / 280);

	left: 50%;
	transform: translateX(-50%) scale(0);
	transform-origin: 50% 100%;

	border: 0px solid red;
}

div#trophy_particles {
	position: absolute; 
	top: 45vh;
	width: 1vw;
	height: 1vh;

	left: 50%;
	transform: translateX(-50%);

	border: 0px solid red;
}

div.trophy_particle {
	position: absolute;
	width: calc(19vh / 5);
	height: calc(20vh / 5);

	background-image: url('images/trophy_particle.svg');

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0;

	border: 0px dashed red;
}

div#trophy_notification_trophy {
	position: absolute; 
	top: 28vh;
	height: 36vh;
	width: calc(36vh * 455 / 390);

	left: 50%;
	transform: translateX(-50%);

	border: 0px solid pink;
}

img.trophy_hover_ring {
	position: absolute;
	top: 41vh;

	width: 47vh;
	height: calc(47vh * 72 / 457);

	opacity: 0.2;

	margin-left: 0.9vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: -2;
}

img#trophy_notification_plinth {
	position: absolute;
	top: 23.4vh;

	width: calc(29vh * 1.107 * 1059 / 327);
	height: calc(29vh * 1.107 * (257 / 504) * 1059 / 327);

	left: 50%;
	transform: translateX(-50%);

	z-index: -1;
}

img#trophy_notification_image {
	position: absolute;
	top: 0vh;

	height: 36vh;
	width: calc(36vh * 457 / 399);

	left: 50%;
	transform: translateX(-50%);
}

div#trophy_notification_name {
	position: absolute; 
	top: 38.9vh;

	height: 8vh;
	width: 24.2vh;

	left: 50%;
	transform: translateX(-50%);

	margin-left: 0.3vh;

	color: black;
	font-family: 'BungeeRegular', Verdana, Geneva, sans-serif;
	font-size: 3vh;
	line-height: 4vh;

	text-transform: uppercase;
	pointer-events: none;

	border: 0px solid red;
}

img#trophy_notification_icon {
	position: absolute;
	top: 2.2vh;

	height: 19vh;
	width: calc(19vh * 397 / 398);

	left: 50%;
	transform: translateX(-50%);

	z-index: 2;
}

img#trophy_prize_button {
	height: 12vh;
	width: calc(12vh * 800 / 365);

	top: 78vh;
	margin-left: 24vh;

	pointer-events: auto;
	cursor: pointer;

	opacity: 0;
}

div#badge_notification {
	position: relative;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: 112;
	display: none;
}

div#flyby {
	position: absolute;
	pointer-events: none;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: 110;
	display: none;
}

div#playzone_connect_confirmation {
	position: absolute;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);

	z-index: 110;
	display: none;
}

div#playzone_sync_animation {
	position: absolute;
	width: 100vw;
	height: 100vh;

	left: 50%;
	transform: translateX(-50%);
}

div#playzone_sync_button {
	position: absolute;
	top: 70vh;

	width: 28vh;
	height: calc(28vh * 150 / 323);

	left: 50%;
	transform: translateX(-50%);

	background-image: url("/images/playzone_sync/sync_idle.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	cursor: pointer;
}

div#playzone_sync_button:hover {
	background-image: url("/images/playzone_sync/sync_hover.svg");
}

div#playzone_sync_button:active {
	background-image: url("/images/playzone_sync/sync_click.svg");
}

.b_n {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

div#badge_notification_particles {
	width: 100vw;
	height: 100vh;
}

img#badge_notification_spotlight {
	top: -10vh;

	height: 120vh;
	width: 120vh;

	opacity: 0;
}

svg#badge_notification_arch {
	top: 16vh;

	height: 61vh;
	width: calc(61vh * 8400 / 11246);
}

svg#badge_notification_arch path {
/*	stroke-dasharray: 7000; */
}

div#badge_notification_gears {
	top: 20vh;
	height: 48vh;
	width: 48vh;
}

img#badge_notification_gear_back {
	top: 0vh;

	height: 48vh;
	width: 48vh;
}

img#badge_notification_gear_top {
	top: 0vh;

	height: 48vh;
	width: 48vh;
}

img#badge_notification_gear_medium {
	top: 18vh;

	height: 26vh;
	width: 26vh;
}

img.badge_notification_gear_small {
	top: 7.6vh;

	height: 13vh;
	width: 13vh;
}

img#badge_notification_gear_small_1 {
	left: calc(50% - 7vh);
}

img#badge_notification_gear_small_2 {
	left: calc(50% + 7vh);
}

img#badge_notification_shine {
	top: 16vh;

	height: 54vh;
	width: calc(54vh * 7943 / 7693);

	opacity: 0;
}

img#badge_notification_text {
	top: 31.4vh;

	height: 24.8vh;
	width: calc(24.8vh * 800 / 546);
}

img#badge_notification_button {
	top: 72.25vh;

	height: 15vh;
	width: calc(15vh * 800 / 406);

	pointer-events: auto;
	cursor: pointer;

	transform: translateX(-50%) scale(0.4);
	opacity: 0;
}

img#badge_notification_stars {
	top: 54vh;
	left: calc(50% - 1.2vh);

	height: 22.4vh;
	width: calc(22.4vh * 1189 / 415);

	opacity: 0;
}

img.badge_notification_star_particle {
	top: 46vh;

	height: 3vh;
	width: calc(1vh * 882 / 842);

	opacity: 0;
}

.animation_layer {
	position: absolute;
	height: 100vh;
	width: 216.6667vh;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

div#reading_background {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	left: 50%;
	transform: translateX(-50%);
	z-index: 11;
	display: none;
}

.reading_bg {
	position: absolute;
	height: 100vh;
	left: 50%;
	transform: translateX(-50%);
}

div#nav_reading_storycircle {
	top: 28vh;
	left: calc(50% - 35vh);
	height: 40vh;
	width: calc(40vh * 766 / 853);
	background-image: url("images/reading/story_circle_idle.svg");
	background-repeat: no-repeat;
	cursor: pointer;
	pointer-events: auto;
}

div#nav_reading_storycircle:hover {
	background-image: url("images/reading/story_circle_hover.svg");
}

div#nav_reading_storycircle:active {
	background-image: url("images/reading/story_circle_active.svg"), url("images/reading/story_circle_idle.svg");
}

div#nav_reading_storycircle_text {
	top: 69vh;
	left: calc(50% - 35vh);
	height: 7.7vh;
	width: calc(7.7vh * 1514 / 350);
	background-image: url("images/reading/story_circle_text.svg");
	background-repeat: no-repeat;
	cursor: pointer;
	pointer-events: auto;
}

div#nav_reading_storycircle_text:hover + #nav_reading_storycircle {
	background-image: url("images/reading/story_circle_hover.svg");
}

div#nav_reading_storycircle_text:active + #nav_reading_storycircle {
	background-image: url("images/reading/story_circle_active.svg"), url("images/reading/story_circle_idle.svg");
}

div#nav_reading_bookclub {
	top: 28vh;
	left: calc(50% + 35vh);
	height: 40vh;
	width: calc(40vh * 838 / 826);
	background-image: url("images/reading/bookclub_idle.svg");
	background-repeat: no-repeat;
	cursor: pointer;
	pointer-events: auto;
}

div#nav_reading_bookclub:hover {
	background-image: url("images/reading/bookclub_hover.svg");
}

div#nav_reading_bookclub:active {
	background-image: url("images/reading/bookclub_active.svg"), url("images/reading/bookclub_idle.svg");
}

div#nav_reading_bookclub_text {
	top: 69vh;
	left: calc(50% + 35vh);
	height: 7.7vh;
	width: calc(7.7vh * 1183 / 352);
	background-image: url("images/reading/bookclub_text.svg");
	background-repeat: no-repeat;
	cursor: pointer;
	pointer-events: auto;
}

div#nav_reading_bookclub_text:hover + #nav_reading_bookclub {
	background-image: url("images/reading/bookclub_hover.svg");
}

div#nav_reading_bookclub_text:active + #nav_reading_bookclub {
	background-image: url("images/reading/bookclub_active.svg"), url("images/reading/bookclub_idle.svg");
}

div#bookclub_background {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	left: 50%;
	transform: translateX(-50%);
	z-index: 11;
	display: none;
}

.bookclub_bg {
	position: absolute;
	height: 100vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

.bookclub_holo_vid {
	position: absolute;
	top: 4.754vh;
	left: 50vw;
	height: 90.572vh;
	width: 73.973vh;
	transform: translateX(-50%);
	background-size: 100% 100%;
	font-family: 'Bungee', cursive;
	overflow: hidden;
	background-image: url(images/bookclub/bookclub_holovid.webp);
	background-size: 100% 100%;
}

.no-webp-alpha .bookclub_holo_vid {
	background-image: url(images/bookclub/bookclub_holovid.png);
}

.bookclub_holo_vid .effects,
.bookclub_holo_vid .panes {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	-webkit-mask-image: url(images/bookclub/bookClub_mask.webp);
	        mask-image: url(images/bookclub/bookClub_mask.webp);
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
}

.no-webp-alpha .bookclub_holo_vid .effects, .no-webp-alpha
.bookclub_holo_vid .panes {
	-webkit-mask-image: url(images/bookclub/bookClub_mask.png);
	        mask-image: url(images/bookclub/bookClub_mask.png);
}

.bookclub_holo_vid .effects {
	z-index: 0;
}

.bookclub_holo_vid .effects .effect {
	position: absolute;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
}

.bookclub_holo_vid .effects .effect img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.bookclub_holo_vid .effects .scanlines {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

.bookclub_holo_vid .effects .particle {
	opacity: .25;
}

.bookclub_holo_vid .effects .hololine {
	width: 100%;
	height: 0;
	padding-bottom: 0.84112%;
	opacity: .25;
}

.bookclub_holo_vid_pane {
	position: absolute;
	top: 0;
	left: 0;
	height: 80%;
	width: 95%;
	z-index: 1;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	cursor: pointer;
	display: none;
}

.bookclub_holo_vid_pane .title {
	/*
		position: absolute;
		top: 0;
		/*top: 10.667vh;* /
		left: 50%;
		width: 59.407vh;
		transform: translateX(-50%);
		*/
	width: 100%;
	height: 9.704vh;
	z-index: 1;
}

.bookclub_holo_vid_pane.active {
	display: block;
}

#bookclub_list .title {
	background-image: url(images/bookclub/readingList_title.svg);
	background-size: 100% 100%;
	font-size: 0;
	text-indent: -9999;
}

#bookclub_list .items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#bookclub_list .item {
	flex: 0 1 33.33%;
	width: 25%;
	margin: 5% 0%;
}

#bookclub_list .item img {
	width: 75%;
	transition: transform ease-in 100ms;
	box-shadow: 0 0 10px 5px rgba(149, 212, 241, 0.75);
}

#bookclub_list .item img:hover {
	transform: scale(1.1);
}

#bookclub_list .spacer {
	display: block;
	height: 10%;
	width: 100%;
}

.bookclub_holo_vid_body {
	position: absolute;
	width: 100%;
	/*mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 10%, 90%, rgba(255, 255, 255, 0));*/
	height: 98%;
	padding-top: 9%;
	overflow-y: auto;
}

#bookclub_list .bookclub_holo_vid_body {
	/*mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 20%, 70%, rgba(255, 255, 255, 0));*/
}

.bookclub_holo_vid_pane.page .bookclub_back {
	position: absolute;
	top: 9%;
	right: 6%;
	height: 5.465vh;
	width: 5.63875vh;
	font-size: 0;
	text-indent: -9999;
	cursor: pointer;
	z-index: 1;
	background-image: url(images/bookclub/bookClub_X_btn_idle.svg);
}

.bookclub_holo_vid_pane.page .bookclub_back:hover {
	background-image: url(images/bookclub/bookClub_X_btn_hover.svg);
}

.bookclub_holo_vid_pane.page .bookclub_back:active {
	background-image: url(images/bookclub/bookClub_X_btn_click.svg);
}

.bookclub_holo_vid_pane.page .title {
	background-image: url(images/bookclub/bookReviews_title.svg);
	background-size: 100% 100%;
	font-size: 0;
	text-indent: -9999;
}

.bookclub_holo_vid_pane.page .book_image {
	display: block;
	width: 40%;
	margin: 10% 30% 4% 30%;
}

.bookclub_holo_vid_pane.page .book_title {
	padding-top: 2vh;
	font-size: 3.45vh;
}

.bookclub_holo_vid_pane.page .book_title, .bookclub_holo_vid_pane.page .book_byline {
	font-family: 'OpenDyslexic', cursive;
	font-weight: bold;
	color: #0f214a;
	line-height: 1.2;
}

.bookclub_holo_vid_pane.page .book_byline {
	margin-top: 1vh;
	font-size: 2.84vh;
}

.bookclub_holo_vid_pane.page .book_author {
	font-size: 3vmin;
}

.book_reviews_locked {
	position: relative;
	margin-top: 5vh;
	margin-bottom: 5vh;
	background-image: url(images/bookclub/bookClub_locked.svg);
	background-size: 100% 100%;
	display: none;
	height: 27.027vh;
	text-align: center;
}

.locked .book_reviews_locked {
	display: block;
}

.book_reviews_locked span {
	position: absolute;
	bottom: 1vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2.5vh;
	line-height: 2.5vh;
	color: #393939;
}

.book_reviews {
	margin-top: 1vh;
	margin-bottom: 5vh;
	color: #0f214a;
}

.locked .book_reviews .book_review {
	display: none;
}

.locked .book_reviews .user_review {
	display: flex;
}

.book_reviews .book_review {
	display: flex;
	text-align: left;
	padding: 3.25% 15.775%;
}

.book_reviews .book_review:nth-child(2n + 1) {
	background-image: url(images/bookclub/bookclub_reviewBG_1.svg);
}

.book_reviews .book_review:nth-child(2n) {
	background-image: url(images/bookclub/bookClub_reviewBG_2.svg);
}

.book_reviews .book_review_form_title {
	font-size: 0;
	text-indent: -9999;
	background-image: url(images/bookclub/reviewPrompt.svg);
	width: 18.185vh;
	height: 3.802vh;
}

.book_reviews .book_review_edit, .book_reviews .book_review_submit {
	width: 17.793vh;
	text-align: center;
}

.book_reviews .book_review_edit button, .book_reviews .book_review_submit button {
	font-size: 0;
	text-indent: -9999px;
	border: none;
	background-color: transparent;
	background-size: 100% 100%;
}

.book_reviews .book_review_edit button {
	background-image: url(images/bookclub/edit_btn_idle.svg);
	width: 14.239vh;
	height: 3.531vh;
}

.book_reviews .book_review_edit button:hover {
	background-image: url(images/bookclub/edit_btn_hover.svg);
}

.book_reviews .book_review_edit button:active {
	background-image: url(images/bookclub/edit_btn_click.svg);
}

.book_reviews .book_review_submit button {
	width: 10.04vh;
	height: 5.244vh;
	background-image: url(images/bookclub/submit_btn_idle.svg);
}

.book_reviews .book_review_submit button:hover {
	background-image: url(images/bookclub/submit_btn_hover.svg);
}

.book_reviews .book_review_submit button:active {
	background-image: url(images/bookclub/submit_btn_click.svg);
}

.book_reviews .book_review_author {
	flex: 0 0 21.813%;
	text-align: center;
	margin-right: 3.8%;
	line-height: 1.2;
}

.book_reviews .book_review_author .avatar {
	width: 100%;
}

.book_reviews .book_review_rating {
	--rating: 0;
	height: 3vh;
	width: 17.793vh;
	position: relative;
	background-image: url(images/bookclub/stars_0.svg);
	background-size: 100% 100%;
	/* form elements */
}

.book_reviews .book_review_rating:before, .book_reviews .book_review_rating:after {
	content: "";
	position: absolute;
	height: 100%;
	background-repeat: repeat-x;
	background-size: auto 100%;
}

.book_reviews .book_review_rating[data-rating="0"] {
	background-image: url(images/bookclub/stars_0.svg);
}

.book_reviews .book_review_rating[data-rating="-0.5"] {
	background-image: url(images/bookclub/stars_-1andHalf.svg);
}

.book_reviews .book_review_rating[data-rating="1"] {
	background-image: url(images/bookclub/stars_1.svg);
}

.book_reviews .book_review_rating[data-rating="0.5"] {
	background-image: url(images/bookclub/stars_0andHalf.svg);
}

.book_reviews .book_review_rating[data-rating="2"] {
	background-image: url(images/bookclub/stars_2.svg);
}

.book_reviews .book_review_rating[data-rating="1.5"] {
	background-image: url(images/bookclub/stars_1andHalf.svg);
}

.book_reviews .book_review_rating[data-rating="3"] {
	background-image: url(images/bookclub/stars_3.svg);
}

.book_reviews .book_review_rating[data-rating="2.5"] {
	background-image: url(images/bookclub/stars_2andHalf.svg);
}

.book_reviews .book_review_rating[data-rating="4"] {
	background-image: url(images/bookclub/stars_4.svg);
}

.book_reviews .book_review_rating[data-rating="3.5"] {
	background-image: url(images/bookclub/stars_3andHalf.svg);
}

.book_reviews .book_review_rating[data-rating="5"] {
	background-image: url(images/bookclub/stars_5.svg);
}

.book_reviews .book_review_rating[data-rating="4.5"] {
	background-image: url(images/bookclub/stars_4andHalf.svg);
}

.book_reviews .book_review_rating span {
	width: 20%;
	height: 100%;
	float: left;
}

.book_reviews .book_review_text {
	font-family: 'OpenDyslexic', cursive;
	font-size: 2vh;
}

.bookclub_holo_vid_body .instructions {
	margin-bottom: 5vh;
	background-image: url(images/bookclub/reading_command.svg);
	background-size: 100% 100%;
	text-align: center;
	height: 28.807vh;
}

div#jukebox_background {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 13;
	display: none;
}

#jukebox {
	background-image: url(images/jukebox/jukebox_outlines.svg), url(images/jukebox/jukebox_panel_base.svg);
	background-size: 100%;
	text-align: left;
	position: absolute;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
	/* aspect-ratio: 1972 / 1454 ~= 1.35626*/
	height: 80vh;
	width: 108.501vh;
	/**
	 * Icon styles
	 */
	/**
	 * Playlists pane (#1)
	 */
	/**
	 * Playlist songs pane (#2)
	 */
}

#jukebox .scrollbar:not(:hover) {
	scrollbar-color: transparent transparent;
}

#jukebox .icon-new {
	display: inline-block;
	background-image: url(images/jukebox/jukebox_new_label.svg);
	height: 1.4vh;
	width: 4.88161vh;
}

#jukebox .icon-heart {
	display: inline-block;
	background-image: url("images/jukebox/jukebox_heart_empty.svg");
	background-repeat: no-repeat;
	width: 2.518vh;
	height: 2.225vh;
}

#jukebox .icon-heart.selected {
	background-image: url(images/jukebox/jukebox_heart_full.svg);
}

#jukebox .icon-playing {
	background-image: url(images/jukebox/jukebox_sound.svg);
	width: 3.001vh;
	height: 2.751vh;
}

#jukebox .icon-play {
	background-image: url(images/jukebox/jukebox_play_idle.svg);
	width: 6.093vh;
	height: 6.093vh;
}

#jukebox .icon-pause {
	background-image: url(images/jukebox/jukebox_pause_idle.svg);
	width: 4.296vh;
	height: 4.767vh;
}

#jukebox .icon-play,
#jukebox .icon-pause,
#jukebox .icon-playing {
	display: none;
	background-position: center;
	background-repeat: no-repeat;
}

#jukebox .notime {
	display: inline-block;
	background-image: url(images/jukebox/jukebox_emptyField.svg);
	background-repeat: no-repeat;
	width: 3.989vh;
	height: .6vh;
}

#jukebox .playing {
	display: none;
}

#jukebox .mask {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	-webkit-mask-image: url(images/jukebox/jukebox_mask_panel1.svg), url(images/jukebox/jukebox_mask_panel2.svg), url(images/jukebox/jukebox_mask_panel3.svg);
	        mask-image: url(images/jukebox/jukebox_mask_panel1.svg), url(images/jukebox/jukebox_mask_panel2.svg), url(images/jukebox/jukebox_mask_panel3.svg);
}

#jukebox .playlists-title {
	position: absolute;
	top: 10.7%;
	left: 12.9%;
	width: 22.5%;
	font-family: 'Bungee', cursive;
	font-size: 3vh;
	text-align: center;
	color: #FFFFFF;
	letter-spacing: .1vh;
}

#jukebox .playlists .icon-heart {
	display: none;
	background-image: url("images/jukebox/jukebox_heart_full.svg");
	margin-right: .3vh;
}

#jukebox .playlists .favorites .icon-heart {
	display: inline-block;
}

#jukebox .playlists .icon-new {
	display: none;
	float: right;
}

#jukebox .playlists .isnew .icon-new {
	display: inline-block;
}

#jukebox .playlists .items {
	position: absolute;
	top: 23.3%;
	left: 11.3%;
	width: 23.5%;
	height: 54.9%;
	overflow: auto;
}

#jukebox .playlists .item {
	cursor: pointer;
	height: 10.9%;
	padding-left: 11.5%;
	padding-right: 12.5%;
	font-size: 2.5vh;
	letter-spacing: .15vh;
	display: flex;
	align-items: center;
}

#jukebox .playlists .item .title {
	flex: 1 1 auto;
	display: inline-block;
	font-family: 'Nunito', sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}

#jukebox .playlists .item:first-child .title {
	color: #ffcab3;
}

#jukebox .playlists .item.selected .title {
	color: #2f0d72;
}

#jukebox .playlists .item:hover {
	background: url(images/jukebox/jukebox_hoverHighlight.svg);
}

#jukebox .playlists .item.isnew.playing .icon-new {
	display: none;
}

#jukebox .playlists .item.playing .icon-playing {
	display: inline-block;
}

#jukebox .playlist-header {
	position: absolute;
	top: 8%;
	left: 36.5%;
	width: 51.6%;
	height: 21%;
	font-family: 'Bungee', cursive;
}

#jukebox .playlist-header .title {
	margin-left: 6.9%;
	font-size: 3vh;
	color: #FFFFFF;
}

#jukebox .playlist-header .title .image {
	margin-top: .6%;
	margin-right: 3%;
	width: 10vh;
	height: 10vh;
	vertical-align: top;
}

#jukebox .playlist-header .title span {
	display: inline-block;
	width: 50%;
	margin-top: 3.3%;
	line-height: 1.3;
	letter-spacing: .1vh;
}

#jukebox .playlist-header .th {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	display: flex;
	box-sizing: border-box;
	font-size: 1.9vh;
	line-height: 2.2;
	letter-spacing: 0.14vh;
	padding-left: 2%;
	padding-right: 2%;
	color: #2f0d72;
}

#jukebox.empty .playlist-header .th {
	color: #b9b2f9;
}

#jukebox .playlist-header .th span {
	float: left;
	height: 100%;
	box-sizing: border-box;
}

#jukebox .playlist-header .th span.th-icon-play {
	width: 14%;
}

#jukebox .playlist-header .th span.th-icon-heart {
	width: 9%;
}

#jukebox .playlist-header .th span.th-title {
	width: 42%;
	padding-left: 4.8%;
}

#jukebox .playlist-header .th span.th-new {
	width: 11%;
}

#jukebox .playlist-header .th span.th-time {
	width: 24%;
	padding-left: 9%;
}

#jukebox .playlist .items {
	position: absolute;
	top: 28.9%;
	left: 36.5%;
	width: 51.6%;
	height: 48.6%;
	overflow: auto;
}

#jukebox .playlist .item {
	cursor: pointer;
	display: flex;
	align-items: center;
	height: 12.4%;
	padding-left: 2%;
	padding-right: 2%;
	font-family: 'Nunito', sans-serif;
	font-size: 2.6vh;
	font-weight: bold;
	color: #FFFFFF;
}

#jukebox .playlist .item > span {
	float: left;
	text-align: center;
	box-sizing: border-box;
}

#jukebox .playlist .item .td-icon-play {
	width: 14%;
}

#jukebox .playlist .item .td-icon-heart {
	width: 9%;
}

#jukebox .playlist .item .td-title {
	width: 42%;
	padding-left: 4.8%;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
}

#jukebox .playlist .item .td-new {
	width: 11%;
}

#jukebox .playlist .item .td-time {
	width: 24%;
	padding-left: 9%;
	font-size: 2.158vh;
	text-align: left;
	color: #b9b2f9;
}

#jukebox .playlist .item .icon-new {
	display: none;
}

#jukebox .playlist .item.isnew .icon-new {
	display: inline-block;
}

#jukebox .playlist .item.empty .icon-heart {
	display: none;
}

#jukebox .playlist .item:not(.empty):hover {
	background: url(images/jukebox/jukebox_hoverHighlight.svg);
}

#jukebox .playlist .item.selected, #jukebox .playlist .item.selected .td-time {
	color: #2f0d72;
}

#jukebox .playlist .item .icon-play,
#jukebox .playlist .item .icon-pause,
#jukebox .playlist .item .icon-playing {
	height: 2.5vh;
	width: 2.5vh;
}

#jukebox .playlist .item:not(.selected):not(.empty):hover .icon-play {
	display: inline-block;
}

#jukebox.playing .playlist .item.selected:not(:hover) .icon-playing {
	display: inline-block;
}

#jukebox.playing .playlist .item.selected:hover .icon-pause {
	display: inline-block;
}

#jukebox:not(.playing) .playlist .item.selected:hover .icon-play {
	display: inline-block;
}

#jukebox.empty .instructions {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80.14777vh;
	background-image: url(images/jukebox/juke_noFavs_text.svg);
	background-repeat: no-repeat;
}

#jukebox .controls {
	/*
		mask-image: url(images/jukebox/jukebox_mask_panel3.svg);
		*/
	position: absolute;
	top: 80%;
	left: 13%;
	width: 75%;
	height: 11%;
}

#jukebox .controls .icon-heart {
	display: none;
}

#jukebox.playing .controls .icon-heart, #jukebox.paused .controls .icon-heart {
	display: inline-block;
	position: absolute;
	top: 20%;
	left: 1.5%;
	transform: scale(1.2);
	cursor: pointer;
}

#jukebox .controls .title {
	position: absolute;
	top: 11%;
	left: 6%;
	font-family: 'Nunito', sans-serif;
	font-weight: bold;
	font-size: 2.5vh;
	color: #FFFFFF;
}

#jukebox .controls .control-playpause.play {
	background-color: #FF0000;
}

#jukebox .controls button {
	position: absolute;
	background-color: transparent;
	border: none;
	cursor: pointer;
	font-size: 0;
	text-indent: -9999;
	background-repeat: no-repeat;
	background-position: center;
}

#jukebox .controls button:focus {
	outline: 0;
}

#jukebox .controls .control-playpause {
	top: 15%;
	left: 47.2%;
	background-image: url(images/jukebox/jukebox_play_click.svg);
	width: 5.5vh;
	height: 5.5vh;
}

#jukebox .controls .control-previous {
	top: 20.6%;
	left: 37.7%;
	background-image: url(images/jukebox/jukebox_back_click.svg);
	width: 4vh;
	height: 4vh;
}

#jukebox .controls .control-next {
	top: 20.6%;
	left: 57.3%;
	background-image: url(images/jukebox/jukebox_forward_click.svg);
	width: 4vh;
	height: 4vh;
}

#jukebox .controls .control-random {
	top: 17.8%;
	left: 30.8%;
	background-image: url(images/jukebox/jukebox_shuffle_off.svg);
	width: 3.3vh;
	height: 3.3vh;
}

#jukebox .controls .control-random.selected {
	background-image: url(images/jukebox/jukebox_shuffle_on.svg);
}

#jukebox .controls .control-repeat {
	top: 18.6%;
	left: 66.5%;
	background-image: url(images/jukebox/jukebox_repeat_off.svg);
	width: 3.5vh;
	height: 3.5vh;
}

#jukebox .controls .control-repeat.state1 {
	background-image: url(images/jukebox/jukebox_repeat_playlist.svg);
}

#jukebox .controls .control-repeat.state2 {
	background-image: url(images/jukebox/jukebox_repeat_song.svg);
}

#jukebox .controls .control-volume {
	top: 13.3%;
	left: 78.1%;
	background-image: url(images/jukebox/jukebox_volume_icon.svg);
	width: 3.5vh;
	height: 3.5vh;
}

#jukebox .controls .volume-wrapper {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	position: absolute;
	top: 28.4%;
	left: 84.3%;
	height: 0.7vh;
	width: 13.1%;
}

#jukebox .controls .volume-bar {
	position: relative;
	background-color: #2f0d72;
	border-radius: 0.35vh;
	overflow: hidden;
	height: 100%;
	/* Fix Safari overflow with rounded borders bug */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

#jukebox .controls .volume-slider {
	position: absolute;
	height: 100%;
	width: 100%;
	left: -50%;
	top: 0;
	background-color: #b9b2f9;
}

#jukebox .controls .volume-knob {
	position: absolute;
	left: 50%;
	top: 0;
	height: 1.6vh;
	width: 1.6vh;
	border-radius: 50%;
	background-color: #b9b2f9;
	transform: translate(-50%, -25%);
}

#jukebox .controls .time1,
#jukebox .controls .time2 {
	position: absolute;
	bottom: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 2vh;
	font-weight: bold;
	color: #b9b2f9;
}

#jukebox .controls .time1 {
	left: 1%;
}

#jukebox .controls .time2 {
	right: 1%;
	color: #2f0d72;
}

#jukebox.paused .controls .control-playpause,
#jukebox.playing .controls .control-playpause {
	background-image: url(images/jukebox/jukebox_play_idle.svg);
}

#jukebox.paused .controls .control-previous,
#jukebox.playing .controls .control-previous {
	background-image: url(images/jukebox/jukebox_back_idle.svg);
}

#jukebox.paused .controls .control-next,
#jukebox.playing .controls .control-next {
	background-image: url(images/jukebox/jukebox_forward_idle.svg);
}

#jukebox.playing .controls .control-playpause {
	background-image: url(images/jukebox/jukebox_pause_idle.svg);
}

#jukebox .timeline {
	position: absolute;
	left: 13%;
	width: 75%;
	top: 90%;
	height: 5%;
	background-color: #2f0d72;
	cursor: pointer;
}

#jukebox .progress {
	display: block;
	width: 0;
	height: 100%;
	background-color: #b9b2f9;
}

.generic_object {
	background-position: 0 0;
	background-size: 100% 100%;
}

div#storycircle_background {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12;
	display: none;
}

.layer {
	position: absolute;
	height: 100vh;
	width: 100vw;
	background-size: cover;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	overflow: hidden;
	background-position: center center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

#storycircle_layer2 {
	bottom: 0%;
	height: 50.60vh;
}

#storycircle_wave1,
#storycircle_wave2 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 190.2498vh;
	height: 29.49234vh;
	opacity: .25;
}

.storycircle_tree {
	position: absolute;
	height: 34.41vh;
	width: 22vh;
}

.storycircle_tree_trunk {
	position: relative;
	height: 100%;
	width: 100%;
	z-index: 6;
}

#storycircle_tree1 {
	top: 37.873vh;
	left: calc(50% - 8.058vh - 22vh);
}

#storycircle_tree2 {
	top: 37.873vh;
	left: calc(50% + 57.86vh);
	transform: scaleX(-1);
}

.storycircle_leaf1,
.storycircle_leaf2,
.storycircle_leaf3,
.storycircle_leaf4,
.storycircle_leaf5 {
	position: absolute;
}

.storycircle_leaf1 {
	height: 36.58vh;
	bottom: 83%;
	left: 7%;
	z-index: 5;
}

.storycircle_leaf2 {
	height: 19.58vh;
	bottom: 83%;
	left: 50%;
	z-index: 4;
}

.storycircle_leaf3 {
	height: 16.12vh;
	bottom: 83%;
	right: 50%;
	z-index: 3;
}

.storycircle_leaf4 {
	height: 15.47vh;
	bottom: 83%;
	left: 50%;
	z-index: 2;
}

.storycircle_leaf5 {
	height: 25.06vh;
	bottom: 83%;
	right: 50%;
	z-index: 1;
}

#storycircle_fire {
	position: absolute;
	height: 27.72vh;
	width: 38.68vh;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

#storycircle_layer4 > div {
	opacity: .6;
}

#storycircle_layer5 .storycircle_title {
	position: absolute;
	top: 5.7125vh;
	left: 50%;
	transform: translateX(-50%);
	width: 19.941vh;
	height: 13.575vh;
	background-image: url(images/storycircle/storyCircle_talesTitle.svg);
}

#storycircle_layer5 .storycircle_ember {
	position: absolute;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	/* side * sqrt(3) for equilateral triangle */
	border-left: solid 1.095vh transparent;
	border-right: solid 1.095vh transparent;
	border-bottom: solid 1.8966vh #e7bb3f;
	transform: translate(-50%, -50%);
	opacity: .5;
}

#storycircle_layer5 #storycircle_list {
	position: absolute;
	height: 80vh;
	width: 68vh;
	left: 50%;
	transform: translateX(-50%);
	top: 0vh;
	/*
		width: 100%;
		height: 80%;
		*/
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-mask-image: url(images/storycircle/storyCircle_Mask.webp);
	        mask-image: url(images/storycircle/storyCircle_Mask.webp);
	-webkit-mask-size: 100% 80vh;
	        mask-size: 100% 80vh;
	-webkit-mask-position: center bottom;
	        mask-position: center bottom;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

.no-webp #storycircle_layer5 #storycircle_list {
	-webkit-mask-image: url(images/storycircle/storyCircle_Mask.png);
	        mask-image: url(images/storycircle/storyCircle_Mask.png);
}

#storycircle_layer5 .storycircle_list_inner {
	padding-top: 25vh;
	padding-bottom: 20vh;
}

#storycircle_layer5 .storycircle_list_inner .storycircle_instructions {
	width: 50%;
	height: 30vh;
	margin-left: 50%;
	transform: translateX(-50%);
	background-image: url(images/storycircle/storyCircle_suggestionCmd.svg);
	background-size: 100% 100%;
}

#storycircle_layer5 .storycircle_list_item {
	position: relative;
	height: 14.92vh;
	line-height: 14.92vh;
	text-align: left;
	font-size: 0;
	padding-left: 7.5%;
	padding-right: 7.5%;
	cursor: pointer;
}

#storycircle_layer5 .storycircle_list_item img {
	vertical-align: middle;
	width: 17.36%;
	/*
			height: 11.02vh;
			width: 11.02vh;
			*/
}

#storycircle_layer5 .storycircle_list_item.locked img {
	margin: 1.736%;
	width: 13.888%;
}

#storycircle_layer5 .storycircle_list_item > div {
	vertical-align: middle;
	display: inline-block;
	width: 82.64%;
	height: 100%;
	font-family: 'OpenDyslexic', cursive;
	font-size: calc(3.505vh * 0.8);
	color: #FFFFFF;
	white-space: nowrap;
}

#storycircle_layer5 .storycircle_list_item .list_line, #storycircle_layer5 .storycircle_list_item .select_line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/storycircle/list_line.svg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	z-index: -2;
	transition: opacity .1s;
}

#storycircle_layer5 .storycircle_list_item:hover .list_line {
	opacity: 0;
}

#storycircle_layer5 .storycircle_list_item:hover .select_line {
	opacity: .5;
}

#storycircle_layer5 .storycircle_list_item:nth-child(2n) .list_line {
	display: none;
}

#storycircle_layer5 .storycircle_list_item .select_line {
	background-image: url(images/storycircle/selected_line.svg);
	z-index: -1;
	opacity: 0;
}

#storycircle_layer6 {
	display: none;
}

#storycircle_bamboo {
	position: absolute;
	top: 6.4925vh;
	height: 87.015vh;
	width: 67.60vh;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'OpenDyslexic', cursive;
	font-size: 1.75vh;
	line-height: 4.38vh;
	background-image: url(images/storycircle/storyCircle_popup_unlockedStory.svg);
}

#storycircle_bamboo .storycircle_close {
	position: absolute;
	top: 1%;
	left: auto;
	right: 2%;
	width: 5.3575vh;
	height: 4.828vh;
	background-image: url(images/storycircle/storyCircle_X_idle.svg);
	cursor: pointer;
}

#storycircle_bamboo .storycircle_close:hover {
	background-image: url(images/storycircle/storyCircle_X_hover.svg);
}

#storycircle_bamboo .storycircle_close:active {
	background-image: url(images/storycircle/storyCircle_X_click.svg);
}

#storycircle_bamboo > div {
	position: absolute;
	left: 14.8%;
	width: 70.4%;
}

#storycircle_bamboo .storycircle_story_title {
	top: 20.5%;
	font-size: 4.2vh;
	font-weight: bold;
	color: #331906;
}

#storycircle_bamboo .storycircle_story_image {
	top: 35%;
	height: 32.22%;
}

#storycircle_bamboo .storycircle_story_image img {
	height: 100%;
}

#storycircle_bamboo .storycircle_story_text {
	top: 74%;
	left: 16.731%;
	width: 66.538%;
	font-size: 3vh;
	font-weight: bold;
	text-align: left;
	color: #331906;
}

#storycircle_bamboo .storycircle_story_date {
	display: none;
	top: 70%;
	font-size: 4.2vh;
	font-weight: bold;
	color: #331906;
}

#storycircle_bamboo.locked {
	background-image: url(images/storycircle/storyCircle_popup_lockedStory.svg);
}

#storycircle_bamboo.locked .storycircle_story_title {
	top: 15%;
}

#storycircle_bamboo.locked .storycircle_story_image,
#storycircle_bamboo.locked .storycircle_story_text {
	display: none;
}

#storycircle_bamboo.locked .storycircle_story_date {
	display: block;
	font-family: 'Bungee', cursive;
}

div#narrative_background .title {
	box-sizing: border-box;
	width: 55vh;
	height: 7.27377vh;
	padding: 1.81844vh;
	font-size: 3.63688vh;
	line-height: 3.63688vh;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'BungeeRegular', Arial, sans-serif;
	text-transform: uppercase;
	color: #143D56;
	background-image: url(images/narrative/header_bar.svg);
	background-size: 100% 100%;
	text-align: left;
}

div#narrative_background .title span {
	float: right;
}

div#narrative_background .text {
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translateX(-50%);
	width: 60vh;
	height: 12vh;
	font-size: 2.5vh;
	line-height: 1.2;
	font-family: OpenDyslexicBold;
	color: #ABE6EF;
}

div#narrative_background > div {
	position: absolute;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
	width: 80vh;
	height: 80vh;
	/*background-color: rgba(255, 0, 0, .1);*/
}

div#narrative_background div img {
	max-width: 100%;
	width: 100%;
	height: 100%;
}

div#narrative_background .btn-prev, div#narrative_background .btn-next {
	position: absolute;
	top: 80%;
	width: 5.216vh;
	height: 4.647vh;
	background-size: 100% 100%;
	border: none;
	background-color: transparent;
}

div#narrative_background .btn-prev {
	left: 0;
	background-image: url(images/narrative/L_arrow_idle.svg);
}

div#narrative_background .btn-prev:hover {
	background-image: url(images/narrative/L_arrow_hover.svg);
}

div#narrative_background .btn-prev:active {
	background-image: url(images/narrative/L_arrow_click.svg);
}

div#narrative_background .btn-prev.inactive {
	background-image: url(images/narrative/L_arrow_inactive.svg) !important;
}

div#narrative_background .btn-next {
	right: 0;
	background-image: url(images/narrative/R_arrow_idle.svg);
}

div#narrative_background .btn-next:hover {
	background-image: url(images/narrative/R_arrow_hover.svg);
}

div#narrative_background .btn-next:active {
	background-image: url(images/narrative/R_arrow_click.svg);
}

div#narrative_background .btn-next.inactive {
	background-image: url(images/narrative/R_arrow_inactive.svg) !important;
}

div#narrative_background div.slides {
	/*
		outline: solid 1px rgba(255, 255, 255, .5);
		*/
	position: absolute;
	top: 8vh;
	width: 106vh;
	left: 50%;
	height: 40vh;
	transform: translateX(-50%);
	/*overflow: hidden;*/
}

div#narrative_background div.slides .wheel {
	height: 491.66667vh;
	width: 491.66667vh;
	position: absolute;
	top: 0;
	left: -192.83333vh;
	/*
			background-color: rgba(255, 0, 255, .1);
			transition: transform 2000ms;
			*/
}

div#narrative_background div.slides .slide {
	--n: 0;
	position: absolute;
	top: 0;
	left: calc(50% - 27.5vh);
	width: 55vh;
	height: 45.83333vh;
	transform: rotate(calc(var(--i) * 15deg));
	transform-origin: center 245.83333vh;
	visibility: hidden;
	opacity: 0;
	filter: brightness(50%);
	transition: filter 250ms, opacity 100ms, visibility 0s linear 100ms;
}

div#narrative_background div.slides .slide.visible {
	visibility: visible;
	opacity: 1;
	transition: filter 250ms, opacity 100ms, visibility 0s linear 0s;
}

div#narrative_background div.slides .slide.current {
	filter: brightness(100%);
}

div#narrative_background div.slides .slide.current img {
	transform: scale(1);
}

div#narrative_background div.slides .slide img {
	transform: scale(0.8);
	transform-origin: center bottom;
	transition: transform 250ms;
}

div#narrative_background div.logs {
	position: absolute;
	top: 75vh;
	width: 100vw;
	height: 4vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background-color: rgba(58, 146, 155, 0.4);
	--box-width: 4vh;
	--box-pad: 1vh;
}

div#narrative_background div.logs .log {
	font-family: 'BungeeRegular', Arial, sans-serif;
	display: inline-block;
	position: relative;
	width: var(--box-width);
	height: 4vh;
	margin-left: var(--box-pad);
	margin-right: var(--box-pad);
	background-color: #44b1b7;
	transition: transform 100ms;
}

div#narrative_background div.logs .log.active {
	width: 4vh;
	margin-left: calc(var(--box-pad) + .4vh);
	margin-right: calc(var(--box-pad) + .4vh);
}

div#narrative_background div.logs .log:after {
	content: "";
	display: none;
	width: 100%;
	height: 100%;
	transform: scale(1.2);
}

div#narrative_background div.logs .log:hover:after {
	display: block;
	background-color: #BBFCFF !important;
}

div#narrative_background div.logs .log.active:after {
	display: block;
	background-color: #44b1b7;
	background-image: url(images/narrative/gear_bookmark.svg);
	background-size: 75% 75%;
	background-repeat: no-repeat;
	background-position: center;
}

div#narrative_background div.logs .log .preview {
	position: absolute;
	display: none;
	width: 16vh;
	height: 12vh;
	/*border-radius: 1vh;*/
	overflow: hidden;
	bottom: calc(100% + 2vh);
	left: 50%;
	transform: translateX(-50%);
	-webkit-mask: url(images/narrative/mask.png);
	        mask: url(images/narrative/mask.png);
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
}

div#narrative_background div.logs .log .preview span {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	height: 25%;
	font-size: 2vh;
	line-height: 3vh;
	color: #143D56;
	background-color: rgba(255, 255, 255, 0.5);
}

div#narrative_background div.logs .log:hover .preview {
	display: block;
}

div#poetry_background {
	position: absolute;
	width: 133.33vh;
	height: 100vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12;
	display: none;

	border: 0px solid pink;
}

div#poetry_title {
	left: 50%;
	transform: translateX(-50%);

	font-size: 4vh;
	color: #B9FFF2;
	font-family: 'BungeeRegular', Arial, sans-serif;
}

div#poetry_lines {
	left: 50%;
	transform: translateX(-50%);

	top: 10vh;
	width: 60vh;
	height: 18vh;

	background-color: #999;
}

div#poetry_words {
	top: 10vh;
	width: 133.33vh;
	height: 82vh;
}

div#poetry_jumble {
	top: 30vh;
	width: 133.33vh;
	height: 62vh;
}

div#poetry_summary {
	left: calc(50% - 40vh);
	top: 85vh;
	width: 50vh;
	height: 20vh;

	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8vh;
	line-height: 2.6vh;

	text-align: left;
}

div.poetryTile {
	display: inline-block;
	padding: 1vh;

	font-family: Arial, Helvetica, sans-serif;
	color: black;
	background-color: white;

	border: 1px solid #333;

	pointer-events: auto;
}

div.poetryTileImage {
	padding: 0.2vh;
}

img.poetry_emoji {
	height: 3.4vh;
	width: 3.4vh;
}

div#welcome_robot_mentor {
	position: absolute;
	width: 100vw;
	height: 100vh;

	background-color: black;

	left: 50%;
	transform: translateX(-50%);

	z-index: 112;
	display: none;
}

img#welcome_robot_mentor_badge {
	position: absolute;
	top: 10vh;
	height: 80vh;
	width: calc(80vh * 1.14);

	left: 50%;
	transform: translateX(-50%);

	z-index: 114;
	display: none;
}

img#welcome_robot_mentor_text {
	position: absolute;
	top: 10vh;
	height: 80vh;
	width: calc(80vh * 1.14);

	left: 50%;
	transform: translateX(-50%);

	z-index: 113;
	display: none;
}

div#grey_overlay {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: #222;

	z-index: 200;
}

div#rotate_screen {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: #222;

	left: 50%;
	transform: translateX(-50%);

	z-index: 201;
	display: none;
}

div#rotate_screen_text {
	position: absolute;
	width: 84vw;
	top: 6vh;

	left: 50%;
	transform: translateX(-50%);

	color: white;
	font-family: OpenSansSemiBold, sans-serif;
	font-size: 3.6vh;
	line-height: 4.8vh;
}

img#rotate_screen_png {
	position: absolute;
	margin: auto;
	margin-top: 20vh;
	width: 80vw;

	left: 50%;
	transform: translateX(-50%);
}

div#no_js {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-image: url("images/no_js_background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	left: 50%;
	transform: translateX(-50%);

	z-index: 102;
}

div#no_js_notice {
	position: relative;
	top: 20vh;
	width: 80vh;
	height: auto;

	margin: auto;
	padding: 3vh;
	padding-top: 7vh;
	padding-bottom: 7vh;
	border-radius: 3vh;

	background-color: #000;
	color: white;
	opacity: 0.55;

	z-index: 103;
}

img#no_js_x {
	position: absolute;
	top: 2vh;
	right: 2vh;
	width: 4vh;

	display: none;
}

@media (orientation: portrait) {
	div#rotate_screen {
	  display: inline-block;
	}
}

div#zwelcome {
	position: absolute;
	width: 100vw;
	height: 100vh;

	background-color: rgba(0, 0, 0, 0.3);

	left: 50%;
	transform: translateX(-50%);

	z-index: 104;
	display: none;
}