@charset "utf-8";
/* Default stylesheet - developed by Bull Marketing 2026 */

/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, 
hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body { line-height:1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins {text-decoration:none;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0;}
:focus {outline: none;}
hr {display:block; height:1px; border:0; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}
html {scroll-behavior: smooth;}

/* Gimme some fonts */
@font-face {font-family: 'Vanilla Sans';font-style: normal;font-weight: 300;font-display: swap;src: url("../fonts/VanillaSans-Light.woff2") format("woff2"),url("../fonts/VanillaSans-Light.woff") format("woff");}
@font-face {font-family: 'Vanilla Sans';font-style: normal;font-weight: 400;font-display: swap;src: url("../fonts/VanillaSans-Regular.woff2") format("woff2"),url("../fonts/VanillaSans-Regular.woff") format("woff");}
@font-face {font-family: 'Vanilla Sans';font-style: normal;font-weight: 500;font-display: swap;src: url("../fonts/VanillaSans-Medium.woff2") format("woff2"),url("../fonts/VanillaSans-Medium.woff") format("woff");}
@font-face {font-family: 'Vanilla Sans';font-style: normal;font-weight: 600;font-display: swap;src: url("../fonts/VanillaSans-SemiBold.woff2") format("woff2"),url("../fonts/VanillaSans-SemiBold.woff") format("woff");}
@font-face {font-family: 'Vanilla Sans';font-style: normal;font-weight: 700;font-display: swap;src: url("../fonts/VanillaSans-Bold.woff2") format("woff2"),url("../fonts/VanillaSans-Bold.woff") format("woff");}
@font-face {font-family: 'Vanilla Sans';font-style: normal;font-weight: 800;font-display: swap;src: url("../fonts/VanillaSans-Black.woff2") format("woff2"),url("../fonts/VanillaSans-Black.woff") format("woff");}
/*@font-face {font-family: 'Vanilla Sans';font-style: italic;font-weight: 400;font-display: swap;src: url("../fonts/VanillaSans-Italic.woff2") format("woff2"),url("../fonts/VanillaSans-Italic.woff") format("woff");}*/
/*@font-face {font-family: 'Vanilla Sans';font-style: italic;font-weight: 500;font-display: swap;src: url("../fonts/VanillaSans-MediumItalic.woff2") format("woff2"),url("../fonts/VanillaSans-MediumItalic.woff") format("woff");}*/
/*@font-face {font-family: 'Vanilla Sans';font-style: italic;font-weight: 600;font-display: swap;src: url("../fonts/VanillaSans-SemiBoldItalic.woff2") format("woff2"),url("../fonts/VanillaSans-SemiBoldItalic.woff") format("woff");}*/
/*@font-face {font-family: 'Vanilla Sans';font-style: italic;font-weight: 700;font-display: swap;src: url("../fonts/VanillaSans-BoldItalic.woff2") format("woff2"),url("../fonts/VanillaSans-BoldItalic.woff") format("woff");}*/

/* Set some variables */
:root {
/* Primary Colours */ 
--coconut: #ffffff;
--liquorice: #11110d;
--matcha: #d1f470;
/* Secondary Colours */
--matcha-hover: #c7e96b;
--sesame: #f5f5f2;
--cactus: #a1d78f;
--pineapple: #feeb7e;
--shamrock: #2d4c33;
--fern: #203524;
/* Fonts */ 	
--regular-font: 'Vanilla Sans';
--awesome-font: "Font Awesome 6 Free";
/* Font weights
300;400;500;600;700;800 */
}

/* Begin styles */
a {color: var(--liquorice); text-decoration: underline; transition: all .25s ease-in-out;}
a:hover {color: var(--liquorice); text-decoration: none;}
input[type=submit] {-webkit-appearance: none; transition: all .25s ease-in-out; font-family: var(--regular-font);}
button {transition: all .25s ease-in-out;}
a.btn {display: inline-block; width: auto; padding: 10px 25px 12px 25px; background: var(--matcha); font-weight: 500; border-radius: 12px; font-size: 16px; text-decoration: none; position: relative; color: var(--liquorice); transition: all .25s ease-in-out;}
a.btn:hover {background: var(--matcha-hover);}

body {font-family: var(--regular-font), Arial, sans; position: relative; font-optical-sizing: auto; font-size: 20px; line-height: 29px; font-style: normal; color: var(--liquorice); overflow-x: hidden !important; background: var(--coconut);}
/* Sitewide header */
header {position: fixed; float: left; z-index: 200; top: 0px; left: 0px; padding: 20px 0; width: 100%; background: var(--coconut); border-bottom: 1px solid #adadad; transition: all .25s ease-in-out;}
header svg {float: left; width: 87px; height: auto; transition: all .25s ease-in-out;}
header a.btn {float: right; margin-top: 6px;}
header a.btn i {display: none;}
header a.btn.btn-logout {margin-right: 0px;}
header a.btn.btn-home {margin-right: 10px;}
header a.btn.btn-admin {margin-right: 10px;}
/* Scrolled header */
header.scroll {padding: 10px 0;}
header.scroll a.btn {float: right; margin-top: 0px;}
header.scroll svg {float: left; width: 100px; height: auto; margin-top: -38px;}
header.scroll svg path:first-child {display: none;}
/* Index page main area with forms */
section.index {float: left; width: 100%; padding-top: 170px; position: relative; background: linear-gradient(39deg,rgba(255,255,255,1) 62%, rgba(230,250,171,1) 100%); z-index: 19;}
section.index::before {content: ''; position: absolute; inset: 0; background: url("../images/aside-index.png") top 90px right no-repeat; z-index: -1; opacity: 1;}
section.index .intro {display: block; position: relative; z-index: 20; margin: 0 auto 50px auto; width: 100%; max-width: 900px; text-align: center;}
section.index .intro h1 {font-size: 65px; font-weight: 400; line-height: 70px; color: var(--liquorice);}
section.index .intro h2 {font-size: 65px; font-weight: 600; line-height: 70px; padding-bottom: 25px; color: var(--matcha);}
section.index .intro p {font-size: 25px; font-weight: 300; line-height: 34px; padding-bottom: 25px; color: var(--liquorice);}
section.index article {display: block; margin: 0 auto 50px auto; padding: 50px; position: relative; z-index: 20; border-radius: 12px; border: 1px solid #adadad; background: var(--coconut); width: calc(100% - 100px); max-width: 800px;}
section.index article h3 {font-size: 30px; font-weight: 600; line-height: 40px; padding-bottom: 15px;}
section.index article form {width: 100%; margin-top: 25px;}
section.index article form .form-flex {width: 100%; display: flex; flex-wrap: wrap; gap: 10px;}
section.index article form label {font-size: 16px; font-weight: 400; line-height: 24px;}
section.index article form input::placeholder {color: var(--liquorice);}
section.index article form input {float: left; width: calc(100% - 12px); border-radius: 10px; font-family: var(--regular-font); font-size: 16px; font-weight: 400; color: var(--liquorice); padding: 8px 0 8px 10px; border: 1px solid #c8c8c7; background: #f3f3f3;}
section.index article form input:focus {border: 1px solid var(--matcha);}
section.index article form select {float: left; width: 100%; border-radius: 10px; font-family: var(--regular-font); font-size: 16px; font-weight: 400; color: var(--liquorice); padding: 7px 0 7px 10px; border: 1px solid #c8c8c7; background: #f3f3f3;}
section.index article form select:required:invalid {color: #c8c8c7;}
section.index article form select option {color: var(--liquorice);}
section.index article form select:focus {border: 1px solid var(--matcha);}
section.index article form input[type=checkbox] {float: right; width: 30px; height: 30px; border: 1px solid #c8c8c7; padding-left: 0; border-radius: 7px;}
section.index article form input[type=checkbox]:checked {accent-color: var(--matcha);}
section.index article form .checkbox-label {float: right; width: calc(100% - 50px); padding-left: 10px; font-size: 16px; line-height: 20px; padding-top: 2px;}
section.index article form input[type=submit] {width: 100%; margin: 20px 0 0 0; padding: 10px 0px 12px 0px; border-radius: 8px; text-align: center; border: none; cursor: pointer; background: var(--matcha); font-size: 20px; text-decoration: none; font-family: var(--regular-font); font-weight: 500; color: var(--liquorice);}
section.index article form input[type=submit]:hover {background: var(--matcha-hover);}
section.index article form p {font-size: 14px; margin: 0; font-weight: 400; line-height: 20px; padding-bottom: 0;}
/* Form specifics */
section.index article form.register .form-flex .item {width: calc(50% - 5px); gap: 20px;}
section.index article form.register .form-flex .item:nth-child(11), 
section.index article form.register .form-flex .item:nth-child(12) {width: 100%;}
section.index article form.login .form-flex .item {width: 100%;}
section.index article form.forgot .form-flex .item {width: 100%;}
section.index article form.reset .form-flex .item {width: 100%;}
/* System return messaging */
.message {display: block; width: calc(100% - 30px); position: relative; z-index: 100; padding: 5px 15px; margin: 0 0 25px 0; border-radius: 5px;}
.message p {font-size: 16px; line-height: 22px; text-align: center; padding-bottom: 0px !important;}
.message p a {color: var(--cloud-white);}
.message.message-success {background: var(--matcha);}
.message.message-error {background: var(--matcha);}
/* System JS errors */
section.index article form label.error {color: var(--coconut); text-align: left; display: inline-block; float: left; position: relative; width: calc(100% - 33px); background: var(--shamrock); padding: 3px 5px 3px 28px; border-radius: 7px; margin-top: 5px; margin-bottom: 0px; font-size: 12px; font-weight: 400; line-height: 18px;}
section.index article form label.error::before {font-family: var(--awesome-font); font-weight: 900; content: "\f071"; padding-right: 5px; position: absolute; left: 10px; top: 3px;}
section.index article form .checkbox-input label.error {float: left; width: calc(100% - 33px);}
section.index article form input.error {border: 1px solid var(--shamrock);}
section.index article form .checkbox-input input[type=checkbox].error {margin-bottom: 45px;}
section.index article form select.error {border: 1px solid var(--shamrock);}
/* Homepage */
section.home {float: left; width: 100%; padding-top: 170px; position: relative; background: var(--liquorice); z-index: 19;}
section.home::before {content: ''; position: absolute; opacity: 0.25; inset: 0; background: url("../images/bg-home.png") top center / cover no-repeat; z-index: -1;}
/* Progress chart */
section.home article {float: left; width: 60%;}
section.home article h1 {font-size: 32px; font-weight: 500; line-height: 45px; padding-bottom: 25px; text-align: center; color: var(--coconut);}
section.home article h1 span {display: block; font-size: 50px; font-weight: 600; line-height: 55px; color: var(--matcha);}
section.home article .progress {float: left; width: calc(100% - 100px); position: relative; margin: 25px 0; padding: 50px;}
section.home article .progress .top-circle {position: absolute; z-index: 20; top: 0px; left: 50%; transform: translate(-50%); height: 20px; width: 20px; border-radius: 50%; background: var(--matcha);}
section.home article .progress .mid-line {position: absolute; z-index: 15; top: 0px; left: 50%; transform: translate(-50%); height: 100%; width: 2px; background: var(--coconut);}
section.home article .progress .bottom-circle {position: absolute; z-index: 20; bottom: 0px; left: 50%; transform: translate(-50%); height: 20px; width: 20px; border-radius: 50%; background: var(--matcha);}
section.home article .progress .enter {float: left; width: calc(100% - 50px); border-radius: 15px; margin-bottom: 35px; position: relative; z-index: 25; padding: 25px;}
section.home article .progress .enter .icon {float: left; width: 130px; margin-right: 25px;}
section.home article .progress .enter .icon .icon-circle {display: flex; width: 130px; height: 130px; border-radius: 50%; align-content: center; align-items: center; justify-content: center;}
section.home article .progress .enter .content {float: left; width: calc(100% - 155px);}
section.home article .progress .enter .content h3 {font-size: 14px; font-weight: 600; line-height: 22px; padding-bottom: 5px; text-transform: uppercase;}
section.home article .progress .enter .content h2 {font-size: 32px; font-weight: 600; line-height: 36px; padding-bottom: 10px;}
section.home article .progress .enter .content h2 span {display: block; font-size: 16px; font-weight: 300; line-height: 28px;}
section.home article .progress .enter .content a.btn {display: inline-block; width: auto; padding: 2px 10px; background: var(--matcha); font-weight: 500; border-radius: 6px; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; position: relative; color: var(--liquorice); transition: all .25s ease-in-out;}
section.home article .progress .enter .content a.btn:hover {background: var(--matcha-hover);}
/* Unlocked state */
section.home article .progress .enter.unlocked {background: linear-gradient(56deg,rgba(53,94,52,1) 50%, rgba(78,131,54,1) 100%);}
section.home article .progress .enter.unlocked .icon .icon-circle {background: var(--matcha);}
section.home article .progress .enter.unlocked .content h3 {color: var(--coconut);}
section.home article .progress .enter.unlocked .content h2 {color: var(--matcha);}
/* Locked state */
section.home article .progress .enter.locked {background: var(--liquorice);}
section.home article .progress .enter.locked .icon .icon-circle {width: 100px; height: 100px; background: #404040; margin-left: 15px;}
section.home article .progress .enter.locked .content h3 {color: var(--coconut);}
section.home article .progress .enter.locked .content h2 {color: var(--coconut);}
section.home article .progress .enter.locked .content p {display: inline-block; width: auto; padding: 2px 25px; background: #404040; font-weight: 500; border-radius: 6px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--coconut);}
/* Completed state */
section.home article .progress .enter.complete {background: linear-gradient(56deg,rgba(255,255,255,1) 50%, rgba(230,250,171,1) 100%);}
section.home article .progress .enter.complete .icon .icon-circle {background: var(--shamrock);}
section.home article .progress .enter.complete .content p {display: inline-block; width: auto; padding: 2px 15px; background: var(--shamrock); font-weight: 400; border-radius: 6px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--coconut);}
section.home article .progress .enter.complete .content p span {font-weight: 500; font-size: 18px; padding-left: 15px; color: var(--matcha);}
/* In Progress state */
section.home article .progress .enter.continue {background: linear-gradient(56deg,rgba(53,94,52,1) 50%, rgba(78,131,54,1) 100%);}
section.home article .progress .enter.continue .icon .icon-circle {background: var(--matcha);}
section.home article .progress .enter.continue .content h3 {color: var(--coconut);}
section.home article .progress .enter.continue .content h2 {color: var(--matcha);}
/* How to play */
section.home aside {float: right; width: calc(40% - 150px); padding: 25px; margin-bottom: 25px; background: rgba(17,17,13,0.63); border-radius: 15px;}
section.home aside h2 {font-size: 35px; line-height: 40px; font-weight: 500; padding-bottom: 25px; color: var(--coconut);}
section.home aside p {font-size: 16px; line-height: 28px; font-weight: 300; padding-bottom: 25px; color: var(--coconut);}
section.home aside p:last-child {padding-bottom: 0px;}
/* Scene Page */
body.week header {padding: 10px 0;}
body.week header svg {float: left; width: 100px; height: auto; margin-top: -38px;}
body.week header svg path:first-child {display: none;}

.title {position: fixed; z-index: 21; top: 78px; left: 0px; background: linear-gradient(56deg,rgba(255,255,255,1) 20%, rgba(230,250,171,1) 100%); width: calc(100% - 62px); padding: 12px 25px;}
.title h1 {font-size: 38px; line-height: 46px; font-weight: 500; text-align: center; color: var(--liquorice);}

section.scene {float: left; width: 100%; min-height: 100vh; overflow-y: scroll; overflow-x: scroll; position: relative; z-index: 19; background: var(--liquorice);}
section.scene .background-image {position: absolute; z-index: 15; top: 100px; left: 0; width: 1920px; overflow: hidden; height: auto;}
section.scene .background-image img.scene-background {width: 100%; height: auto; display: block; margin: 0 auto;}
section.scene .anchor {position: absolute; top: 19%; left: 50%;}
section.scene article {position: absolute; z-index: 17; top: 0; left: 0px; width: calc(100% - 600px); height: 1538px;}
section.scene article.full-width {left: 0px; width: 100%;}
section.scene article .button {width: 100px; height: 90px; position: absolute; z-index: 22;}
aside.progress {position: fixed; bottom: 35px; left: 50%; transform: translate(-50%); z-index: 22; width: 785px; height: 50px;}
aside.progress .time {float: left; width: 220px; height: 50px; padding: 0 20px; background: linear-gradient(56deg,rgba(53,94,52,1) 50%, rgba(78,131,54,1) 100%);}
aside.progress .time div {float: left; height: 52px; display: flex; align-items: center; align-content: center;}
aside.progress .time p {font-size: 14px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; line-height: 22px; color: var(--coconut);}
aside.progress .time p span {font-size: 30px; padding-left: 15px; font-weight: 700; text-transform: uppercase; line-height: 36px;}
aside.progress .questions {float: left; width: calc(100% - 330px); height: 50px; padding: 0 35px; background: rgba(0,0,0,0.7);}
aside.progress .questions div {float: left; height: 50px; display: flex; align-items: center; align-content: center;}
aside.progress .questions p {font-size: 14px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; line-height: 22px; color: var(--coconut); padding-right: 35px;}
aside.progress .questions div .circle {width: 36px; height: 36px; margin: 0 6px; border-radius: 50%; background: #6a6c71;}
aside.progress .questions div .circle.checked {background: var(--matcha);}
aside.progress .questions div .circle.checked i {font-size: 24px; text-align: center; margin: 0 auto; display: block; font-weight: 900; color: var(--shamrock);}

aside.buttons {position: absolute; top: 150px; left: 0px; z-index: 21; width: 100%; height: 100%;}
aside.buttons .graphic {position: absolute; width: 64px; height: 64px;}
aside.buttons .graphic .text {position: absolute; z-index: 18; transition: all .25s ease-in-out; display: none; left: 35px; top: 12px; width: auto; white-space: nowrap; padding: 5px 25px 5px 40px; font-size: 18px; font-weight: 400; color: var(--coconut); border-radius: 22px; border: 1px solid var(--coconut); height: 29px; background: rgba(45,76,51,0.8);}
aside.buttons .graphic:hover .text {display: block;}
aside.buttons .button {position: absolute; z-index: 19; width: 60px; height: 60px; background: var(--coconut); animation: citypulse 1.8s infinite; border: 2px solid #87b54f; border-radius: 50%; display: flex; align-content: center; align-items: center; justify-content: center;}
@keyframes citypulse {
	0% {box-shadow: 0 0 0 0 rgba(209,244,112,0.9);}
	70% {box-shadow: 0 0 0 25px rgba(209,244,112,0);}
	100% {box-shadow: 0 0 0 0 rgba(209,244,112,42,0);}
}
aside.buttons .graphic:hover .button {animation: none;}
aside.buttons .button.completed {width: 50px; height: 50px; background: #87b54f; animation: none; border: 1px solid var(--coconut);}
aside.buttons .button.completed img {filter: brightness(0) invert(1); height: 30px; width: auto;}
/* Week 1 specific placements */
section.scene.week1 aside.buttons .graphic.button1 {top: 25%; left: 50%; animation-delay: 300ms;}
section.scene.week1 aside.buttons .graphic.button2 {top: 38%; left: 10%; animation-delay: 600ms;}
section.scene.week1 aside.buttons .graphic.button3 {top: 30%; left: 75%; animation-delay: 900ms;}
section.scene.week1 aside.buttons .graphic.button4 {top: 55%; left: 41%; animation-delay: 1200ms;}
section.scene.week1 aside.buttons .graphic.button5 {top: 10%; left: 48%; animation-delay: 1500ms;}
/* Week 2 specific placements */
section.scene.week2 aside.buttons .graphic.button1 {top: 20%; left: 50%; animation-delay: 300ms;}
section.scene.week2 aside.buttons .graphic.button2 {top: 38%; left: 10%; animation-delay: 600ms;}
section.scene.week2 aside.buttons .graphic.button3 {top: 65%; left: 75%; animation-delay: 900ms;}
section.scene.week2 aside.buttons .graphic.button4 {top: 78%; left: 24%; animation-delay: 1200ms;}
section.scene.week2 aside.buttons .graphic.button5 {top: 40%; left: 32%; animation-delay: 1500ms;}
/* Week 3 specific placements */
section.scene.week3 aside.buttons .graphic.button1 {top: 40%; left: 47%; animation-delay: 300ms;}
section.scene.week3 aside.buttons .graphic.button2 {top: 32%; left: 6%; animation-delay: 600ms;}
section.scene.week3 aside.buttons .graphic.button3 {top: 30%; left: 75%; animation-delay: 900ms;}
section.scene.week3 aside.buttons .graphic.button4 {top: 60%; left: 11%; animation-delay: 1200ms;}
section.scene.week3 aside.buttons .graphic.button5 {top: 73%; left: 65.5%; animation-delay: 1500ms;}

section.scene::-webkit-scrollbar-track {background: var(--coconut);}
section.scene::-webkit-scrollbar {height: 12px; width: 12px;}
section.scene::-webkit-scrollbar-thumb {background: var(--matcha);}

/* Sitewide Footer */
footer {float: left; width: 100%; background: var(--liquorice); z-index: 199; padding-top: 50px;}
footer article {float: left; padding: 50px 0 35px 0; width: 100%; border-top: 1px solid #adadad;}
footer article ul {list-style: none;}
footer article ul li {display: inline; font-size: 14px; line-height: 20px; padding: 0 20px 0 0; white-space: nowrap;}
footer article ul li a {color: var(--coconut); text-decoration: none;}
footer article ul li a:hover {color: var(--coconut); text-decoration: none; opacity: 0.7;}
/* Popups */
.popup {width: 100%; height: 100%; display: none; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,0.72); z-index: 9999;}
.popup-outer {width: 100%; height: 100%; display: block; position: relative; top: 0px; left: 0px;}
.popup .popup-close-button {position: absolute; border-radius: 50%; top: 25px; right: 25px; z-index: 2001;}
.popup .popup-close-button i {font-size: 48px; color: var(--matcha); transition: ease 0.25s all;}
.popup .popup-close-button:hover i {color: var(--coconut);}
.popup .popup-outer {width: 100%; height: 100%; display: block; position: relative; top: 0px; left: 0px;}
.popup .popup-inner {max-width: 1150px; width: calc(97% - 50px); padding: 25px; border-radius: 15px; position: absolute; top: 50%; left: 50%; height: auto; max-height: calc(90% - 50px); overflow-y: visible; overflow-x: hidden; background: linear-gradient(180deg,rgba(255,255,255,1) 50%, rgba(245,252,224,1) 100%); transform: translate(-50%, -50%);}
.popup .popup-inner.popup-anagram {max-width: 1200px; width: 97%; padding: 0px; max-height: 90%;}
.popup .popup-inner.popup-scene {max-width: 1000px; width: 97%; padding: 0px; max-height: 90%;}
/* Question style popups */
.popup .popup-inner .question-content {float: left; width: 100%; display: flex; min-height: 430px;}
.popup .popup-inner .question-content article {float: left; width: calc(100% - 425px); margin-right: 75px; position: relative; z-index: 30;}
.popup .popup-inner .question-content article form {float: left; width: 100%;}
.popup .popup-inner .question-content article h3 {font-size: 40px; font-weight: 600; padding-bottom: 15px; line-height: 46px; color: var(--fern);}
.popup .popup-inner .question-content article p {font-size: 20px; font-weight: 300; padding-bottom: 15px; line-height: 29px;}
.popup .popup-inner .question-content article form label {float: left; position: relative; cursor: pointer; display: block; width: 100%; padding: 10px 0; transition: all .25s ease-in-out;}
.popup .popup-inner .question-content article form label .input {float: left; width: 26px; height: 26px;}
.popup .popup-inner .question-content article form label .input .circle {width: 20px; height: 20px; margin-top: 2px; border: 1px solid #a0a09e; border-radius: 50%;}
.popup .popup-inner .question-content article form label .input .circle .active {display: none;}
.popup .popup-inner .question-content article form label.checked .input .circle .active {display: block; width: 16px; height: 16px; margin-top: 2px; margin-left: 2px; border-radius: 50%; background: var(--matcha);}
.popup .popup-inner .question-content article form label .text {float: left; width: calc(100% - 46px); margin-left: 20px; height: auto; font-size: 20px; font-weight: 400; line-height: 26px;}
.popup .popup-inner .question-content article form label.checked .text {font-weight: 600;}
.popup .popup-inner .question-content article form label input[type=radio] {opacity: 0; position: absolute; top: 16px; left: 16px;}
.popup .popup-inner .question-content aside {float: right; width: 350px; border-radius: 15px;}
.popup .popup-inner .question-content aside img {display: block; width: 100%; height: auto;}
.popup .popup-inner .question-content aside .asset-text {background: #f5f5f2; width: calc(100% - 50px); padding: 25px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.popup .popup-inner .question-content aside .asset-text h4 {font-size: 14px; position: relative; padding-left: 15px; font-weight: 600; text-transform: uppercase; padding-bottom: 10px; line-height: 18px;}
.popup .popup-inner .question-content aside .asset-text h4::before {position: absolute; left: 0px; top: 0px; font-family: var(--awesome-font); font-weight: 900;}
.popup .popup-inner .question-content aside .asset-text h4.article::before {content: "\f15c";}
.popup .popup-inner .question-content aside p.hint {font-size: 16px; padding-left: 20px; position: relative; font-weight: 400; padding-bottom: 25px; line-height: 22px;}
.popup .popup-inner .question-content aside p.hint:before {content: "\f0eb"; font-weight: 900; font-family: var(--awesome-font); position: absolute; top: 0px; left: 0px; color: var(--matcha);}
.popup .popup-inner .question-content aside p.hint a {color: var(--shamrock);}
/* Anagram style popups */
.popup .popup-inner .anagram-content {float: left; width: 100%; display: flex; min-height: 430px;}
.popup .popup-inner .anagram-content article {float: left; width: calc(100% - 400px); padding: 25px; position: relative; z-index: 30;}
.popup .popup-inner .anagram-content article .anagram-jumbled {font-size: 40px; letter-spacing: 15px; margin-bottom: 25px; font-weight: 800; line-height: 46px; color: var(--shamrock);}
.popup .popup-inner .anagram-content article form {float: left; width: 100%;}
.popup .popup-inner .anagram-content article h3 {font-size: 40px; font-weight: 600; padding-bottom: 15px; line-height: 46px; color: var(--fern);}
.popup .popup-inner .anagram-content article p {font-size: 20px; font-weight: 300; padding-bottom: 15px; line-height: 29px;}
.popup .popup-inner .anagram-content article p.hint {font-size: 16px; margin-top: 25px; padding-left: 20px; position: relative; font-weight: 400; padding-bottom: 25px; line-height: 22px;}
.popup .popup-inner .anagram-content article p.hint:before {content: "\f0eb"; font-weight: 900; font-family: var(--awesome-font); position: absolute; top: 0px; left: 0px; color: var(--matcha);}
.popup .popup-inner .anagram-content article p.hint a {color: var(--shamrock);}
.popup .popup-inner .anagram-content article form label {float: left; position: relative; cursor: pointer; display: block; width: 100%; padding: 10px 0; transition: all .25s ease-in-out;}
.popup .popup-inner .anagram-content article form .anagram-input {float: left; font-size: 32px; text-transform: uppercase; text-align: center; font-weight: 600; line-height: 46px; color: var(--shamrock); width: 36px; height: 36px; border-radius: 5px; border: 1px solid #a0a09e; margin-right: 10px; margin-bottom: 10px;}
.popup .popup-inner .anagram-content aside {float: right; position: relative; width: 350px; overflow: hidden;}
.popup .popup-inner .anagram-content aside img {display: block; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: auto; min-width: 100%; height: 100%;}
/* Combination style popups */
.popup .popup-inner .combination-content {float: left; width: 100%; display: flex; min-height: 430px;}
.popup .popup-inner .combination-content article {float: left; width: 100%; position: relative; z-index: 30;}
.popup .popup-inner .combination-content article form {float: left; width: 100%;}
.popup .popup-inner .combination-content article h3 {font-size: 40px; font-weight: 600; padding-bottom: 15px; line-height: 46px; color: var(--fern);}
.popup .popup-inner .combination-content article p {font-size: 18px; font-weight: 400; padding-bottom: 15px; line-height: 24px;}
.popup .popup-inner .combination-content article p.hint {font-size: 16px; padding-left: 20px; position: relative; font-weight: 400; padding-bottom: 25px; line-height: 22px;}
.popup .popup-inner .combination-content article p.hint:before {content: "\f0eb"; font-weight: 900; font-family: var(--awesome-font); position: absolute; top: 0px; left: 0px; color: var(--matcha);}
.popup .popup-inner .combination-content aside {float: right; position: relative; width: 350px; overflow: hidden;}
.popup .popup-inner .combination-content aside img {display: block; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: auto; height: 100%;}
.popup .popup-inner .combination-content article .puzzle-box {float: left; display: block; width: 100%; margin: 25px 0 50px 0;}
.popup .popup-inner .combination-content article .previous {float: left; width: 100%;}
.popup .popup-inner .combination-content article .previous h4 {font-size: 20px; text-transform: uppercase; font-weight: 600; padding-top: 15px; line-height: 26px; color: var(--fern); text-align: center;}
.popup .popup-inner .combination-content article .previous p {font-size: 16px; font-weight: 300; line-height: 22px; text-align: center;}
.popup .popup-inner .combination-content article .previous-submissions {float: left; width: 100%; height: auto; overflow-x: visible; overflow-y: hidden; margin-bottom: 25px;}
.popup .popup-inner .combination-content article .previous-submissions .new-col {float: left; width: 57px; padding: 4px 8px; border-right: 1px dotted #e4e4e4;}
.popup .popup-inner .combination-content article .previous-submissions .new-col:last-child {border-right: none;}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box {width: 54px; height: 54px; border-radius: 10px; display: flex; margin-bottom: 6px; align-items: center; align-content: center; justify-content: center;}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box img {width: 34px; height: auto;}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box.correct {background: var(--matcha); border: 1px solid var(--matcha);}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box.nearly {background: var(--fern); border: 1px solid var(--fern);}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box.wrong {background: var(--coconut); border: 1px solid #e4e4e4;}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box.correct img {filter: brightness(0) saturate(100%) invert(15%) sepia(53%) saturate(334%) hue-rotate(80deg) brightness(95%) contrast(93%);}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box.nearly img {filter: brightness(0) invert(1);}
.popup .popup-inner .combination-content article .previous-submissions .new-col .box.wrong img {filter: brightness(0) saturate(100%) invert(15%) sepia(53%) saturate(334%) hue-rotate(80deg) brightness(95%) contrast(93%);}
.popup .popup-inner .combination-content article .key {float: left; width: 250px; margin: 0 0 25px 0;}
.popup .popup-inner .combination-content article .key-box {float: left; width: 25px; height: 25px; border-radius: 7px; margin-right: 10px;}
.popup .popup-inner .combination-content article .key-text {float: left;}
.popup .popup-inner .combination-content article .key-text p {font-size: 14px; font-weight: 300; line-height: 20px; padding-top: 4px;}
.popup .popup-inner .combination-content article .key-box.correct {background: var(--matcha); border: 1px solid var(--matcha);}
.popup .popup-inner .combination-content article .key-box.nearly {background: var(--fern); border: 1px solid var(--fern);}
.popup .popup-inner .combination-content article .key-box.wrong {background: var(--coconut); border: 1px solid #e4e4e4;}
.popup .popup-inner .combination-content article .new-submissions {float: right; width: 100%; text-align: center; margin-bottom: 50px;}
.popup .popup-inner .combination-content article .new-submissions .combo-left {float: left; width: 50%; text-align: center;}
.popup .popup-inner .combination-content article .new-submissions .combo-right {float: left; width: 50%; text-align: center;}
.popup .popup-inner .combination-content article .new-submissions form legend {font-size: 16px; font-weight: 300; line-height: 22px; text-align: center;}
.popup .popup-inner .combination-content article .new-submissions form h4 {font-size: 20px; text-transform: uppercase; font-weight: 600; padding-top: 15px; line-height: 26px; color: var(--fern); text-align: center;}
.popup .popup-inner .combination-content article .new-submissions .token-bank, 
.popup .popup-inner .combination-content article .new-submissions .combination-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0;}
.popup .popup-inner .combination-content article .new-submissions .token,
.popup .popup-inner .combination-content article .new-submissions .drop-slot {max-width: 400px; width: calc(95% - 2px); height: auto; background: var(--coconut); text-align: center;}
.popup .popup-inner .combination-content article .new-submissions .token {cursor: move;}
.popup .popup-inner .combination-content article .new-submissions .drop-slot {border: 2px dashed #787c7f; position: relative; height: 62px; padding: 0;}
.popup .popup-inner .combination-content article .new-submissions .token img {display: block; max-width: 400px; width: 100%; margin: 0 auto; border: 1px solid #e4e4e4; border-radius: 5px;}
.popup .popup-inner .combination-content article .new-submissions .drop-slot img {display: block; margin: 0 auto; width: auto; border: none;}
.popup .popup-inner .combination-content article .new-submissions .token.ui-draggable-dragging {z-index: 200; opacity: 0.8;}
.popup .popup-inner .combination-content article .previous-submissions::-webkit-scrollbar-track {border-radius: 7px; background: var(--coconut);}
.popup .popup-inner .combination-content article .previous-submissions::-webkit-scrollbar {height: 10px; width: 10px;}
.popup .popup-inner .combination-content article .previous-submissions::-webkit-scrollbar-thumb {border-radius: 7px; border: none; background: var(--matcha);}
/* Homepage start scene popups */
.popup .popup-inner .scene-content {float: left; width: 100%; display: flex; min-height: 430px;}
.popup .popup-inner .scene-content article {float: left; width: calc(100% - 420px); padding: 35px; position: relative; z-index: 30;}
.popup .popup-inner .scene-content article h3 {font-size: 35px; font-weight: 600; padding-bottom: 25px; line-height: 35px; color: var(--fern);}
.popup .popup-inner .scene-content article .timer {display: inline-block; width: auto; padding: 5px 15px; margin-bottom: 15px; background: var(--shamrock); color: var(--coconut); font-size: 20px; line-height: 22px; font-weight: 600; border: 2px solid var(--matcha);}
.popup .popup-inner .scene-content article p {font-size: 16px; font-weight: 300; padding-bottom: 15px; line-height: 24px;}
.popup .popup-inner .scene-content aside {float: right; position: relative; width: 350px; overflow: hidden;}
.popup .popup-inner .scene-content aside img {display: block; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: auto; min-width: 100%; height: 100%;}
/* Common Form elements */
.popup .popup-inner article form input[type=submit] {width: auto; display: inline-block; cursor: pointer; box-shadow: none; background: var(--matcha); color: var(--liquorice); border: none; font-size: 16px; text-decoration: none; font-weight: 500; border-radius: 10px; padding: 12px 35px; transition: all .25s ease-in-out;}
.popup .popup-inner article form input[type=submit]:hover {background: var(--matcha-hover);}
.popup .popup-inner article form input[type=submit]:disabled {opacity: 0.5; cursor: default;}
.popup .popup-inner article form input[type=submit]:disabled:hover {background: var(--matcha);}
.popup .popup-inner .combination-content article .new-submissions form input[type=reset] {width: 120px; display: inline-block; margin: 20px 0 0 0; padding: 10px 0px 12px 0px; border-radius: 8px; text-align: center; border: none; cursor: pointer; background: #e4e4e4; font-size: 20px; text-decoration: none; font-family: var(--regular-font); font-weight: 500; color: var(--liquorice);}
.popup .popup-inner .combination-content article .new-submissions form input[type=reset]:hover {background: var(--matcha-hover);}
.popup .popup-inner .combination-content article .new-submissions form input[type=submit] {width: 120px; display: inline-block; margin: 20px 0 0 0; padding: 10px 0px 12px 0px; border-radius: 8px; text-align: center; border: none; cursor: pointer; background: var(--matcha); font-size: 20px; text-decoration: none; font-family: var(--regular-font); font-weight: 500; color: var(--liquorice);}
.popup .popup-inner .combination-content article .new-submissions form input[type=submit]:hover {background: var(--matcha-hover);}
/* Scroll bars */
.popup-inner::-webkit-scrollbar-track {background: var(--coconut);}
.popup-inner::-webkit-scrollbar {height: 15px;}
.popup-inner::-webkit-scrollbar-thumb {background: var(--matcha); border-radius: 10px;}
/* Message popups */
.popup-message {width: 100%; height: 100%; display: block; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,0.4); z-index: 9999;}
.popup-outer {width: 100%; height: 100%; display: block; position: relative; top: 0px; left: 0px;}
.popup-message .popup-close-button {position: absolute; border-radius: 50%; top: 25px; right: 25px; z-index: 2001;}
.popup-message .popup-close-button i {font-size: 48px; color: var(--matcha); transition: ease 0.25s all;}
.popup-message .popup-close-button:hover i {color: var(--coconut);}
.popup-message .popup-outer {width: 100%; height: 100%; display: block; position: relative; top: 0px; left: 0px;}
.popup-message .popup-inner {max-width: 950px; width: 97%; border-radius: 15px; position: absolute; top: 50%; left: 50%; height: auto; max-height: calc(90% - 50px); overflow-y: visible; overflow-x: hidden; background: linear-gradient(180deg,rgba(255,255,255,1) 50%, rgba(245,252,224,1) 100%); transform: translate(-50%, -50%);}
.popup-message .popup-inner.popup-answer {max-width: 1150px; width: 97%; border-radius: 15px; position: absolute; top: 50%; left: 50%; height: auto; max-height: calc(90% - 50px); overflow-y: visible; overflow-x: hidden; background: linear-gradient(180deg,rgba(255,255,255,1) 50%, rgba(245,252,224,1) 100%); transform: translate(-50%, -50%);}
.popup-message .popup-inner .popup-title {display: block; width: calc(100% - 30px); padding: 7px 15px; background: var(--matcha);}
.popup-message .popup-inner .popup-title h3 {font-size: 25px; font-weight: 600; line-height: 30px; text-align: center;}
.popup-message .popup-inner .popup-description {display: block; width: calc(100% - 50px); padding: 25px; text-align: center;}
.popup-message .popup-inner .popup-description p {font-size: 16px; font-weight: 400; padding-bottom: 15px; line-height: 24px;}
.popup-message .popup-inner .popup-description p span {font-size: 20px; line-height: 40px; width: 40px; border-radius: 50%; font-weight: 600; display: block; margin: 0 auto; background: var(--matcha);}
.popup-message .popup-inner .popup-description h4 {font-size: 22px; font-weight: 600; line-height: 26px; padding-bottom: 15px;}
.popup-message .popup-inner .popup-description.answer-anagram p:nth-child(3) {font-size: 25px; font-weight: 700; letter-spacing: 2px; color: var(--shamrock); padding-bottom: 15px; line-height: 30px;}
.popup-message .popup-inner .popup-description .combination {margin-bottom: 35px;}
.popup-message .popup-inner .popup-description .combination img {display: block; max-width: 400px; width: 100%; margin: 0 auto 10px auto; border: 1px solid #e4e4e4; border-radius: 5px;}
/* Completed popups */
.popup-message {width: 100%; height: 100%; display: block; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,0.4); z-index: 9999;}
.popup-outer {width: 100%; height: 100%; display: block; position: relative; top: 0px; left: 0px;}
.popup-message .popup-close-button {position: absolute; border-radius: 50%; top: 25px; right: 25px; z-index: 2001;}
.popup-message .popup-close-button i {font-size: 48px; color: var(--matcha); transition: ease 0.25s all;}
.popup-message .popup-close-button:hover i {color: var(--coconut);}
.popup-message .popup-outer {width: 100%; height: 100%; display: block; position: relative; top: 0px; left: 0px;}
.popup-message .popup-inner {max-width: 950px; width: 97%; border-radius: 15px; position: absolute; top: 50%; left: 50%; height: auto; max-height: calc(90% - 50px); overflow-y: visible; overflow-x: hidden; background: linear-gradient(180deg,rgba(255,255,255,1) 50%, rgba(245,252,224,1) 100%); transform: translate(-50%, -50%);}
.popup-message .popup-inner.popup-answer {max-width: 1150px; width: 97%; border-radius: 15px; position: absolute; top: 50%; left: 50%; height: auto; max-height: calc(90% - 50px); overflow-y: visible; overflow-x: hidden; background: linear-gradient(180deg,rgba(255,255,255,1) 50%, rgba(245,252,224,1) 100%); transform: translate(-50%, -50%);}
.popup-message .popup-inner .popup-title {display: block; width: calc(100% - 30px); padding: 7px 15px; background: var(--matcha);}
.popup-message .popup-inner .popup-title h3 {font-size: 25px; font-weight: 600; line-height: 30px; text-align: center;}
.popup-message .popup-inner .popup-description {display: block; width: calc(100% - 50px); padding: 25px; text-align: center;}
.popup-message .popup-inner .popup-description p {font-size: 16px; font-weight: 400; padding-bottom: 15px; line-height: 24px;}
.popup-message .popup-inner .popup-description p span {font-size: 20px; line-height: 40px; width: 40px; border-radius: 50%; font-weight: 600; display: block; margin: 0 auto; background: var(--matcha);}
.popup-message .popup-inner .popup-description h4 {font-size: 22px; font-weight: 600; line-height: 26px; padding-bottom: 15px;}
.popup-message .popup-inner .popup-description.answer-anagram p:nth-child(3) {font-size: 25px; font-weight: 700; letter-spacing: 2px; color: var(--shamrock); padding-bottom: 15px; line-height: 30px;}
.popup-message .popup-inner .popup-description .combination {margin-bottom: 35px;}
.popup-message .popup-inner .popup-description .combination img {display: block; max-width: 400px; width: 100%; margin: 0 auto 10px auto; border: 1px solid #e4e4e4; border-radius: 5px;}
/* Ticker tape */
svg.confetti {width: 100% !important; height: 100vh; position: absolute; top: 0; left: 0;}
circle {opacity: 0; animation: confetti var(--duration) var(--delay) linear var(--direction) infinite forwards;}
@keyframes confetti {
	10% {opacity: 1;}
	20% {opacity: 1;}
	30% {opacity: 0;}
	50% {opacity: 0; stroke-dashoffset: 0;}
	100% {opacity: 0; stroke-dashoffset: 0;}
}
/* Popup system return messaging */
.message {display: block; width: calc(100% - 30px); position: relative; z-index: 100; padding: 5px 15px; margin: 0 0 25px 0; border-radius: 5px;}
.message p {font-size: 16px !important; font-weight: 400 !important; line-height: 22px !important; text-align: center; padding-bottom: 0px !important;}
.message.message-success {background: var(--matcha);}
.message.message-error {background: var(--matcha);}
/* General layouts */
.inner {width: 1200px; margin: 0 auto;}
.inner-full {width: 90%; margin: 0 auto; max-width: 1500px;}
.inner-50l {width: 600px; float: right;}
.inner-50r {width: 600px; float: left;}
.inner-75l {width: 900px; float: right;}
.inner-75r {width: 900px; float: left;}
.inner-66l {width: 800px; float: right;}
.inner-66r {width: 800px; float: left;}
.inner-33l {width: 400px; float: right;}
.inner-33r {width: 400px; float: left;}
.row {float: left; width: 100%; display: block; clear: both;}
.rel {position: relative;}
.flex {display: flex;}
.col1 {float: left; width: 100%;}
.col2 {float: left; width: 50%;}
.col3 {float: left; width: 33.3%;}
.col3-span2 {float: left; width: 66.6%;}
.col4 {float: left; width: 25%;}
.col4-span3 {float: left; width: 75%;}
.col5 {float: left; width: 20%;}
.col5-span2 {float: left; width: 40%;}
.col5-span3 {float: left; width: 60%;}
.col5-span4 {float: left; width: 80%;}
.col6 {float: left; width: 16.6%;}
.col7 {float: left; width: 14.25%}
.col-switch {float: right;}
.left {float: left !important;}
.right {float: right !important;}
.pad10 {padding-top: 10px !important; padding-bottom: 10px !important;}
.padtop10 {padding-top: 10px !important;}
.padbot10 {padding-bottom: 10px !important;}
.pad25 {padding-top: 25px !important; padding-bottom: 25px !important;}
.padtop25 {padding-top: 25px !important;}
.padbot25 {padding-bottom: 25px !important;}
.pad40 {padding-top: 40px !important; padding-bottom: 40px !important;}
.padtop40 {padding-top: 40px !important;}
.padbot40 {padding-bottom: 40px !important;}
.mar25 {margin-top: 25px !important; margin-bottom: 25px !important;}
.martop25 {margin-top: 25px !important;}
.marbot25 {margin-bottom: 25px !important;}
.marlef25 {margin-left: 25px !important;}
.marrig25 {margin-right: 25px !important;}
.pad50 {padding-top: 50px !important; padding-bottom: 50px !important;}
.padtop50 {padding-top: 50px !important;}
.padbot50 {padding-bottom: 50px !important;}
.mar50 {margin-top: 50px !important; margin-bottom: 50px !important;}
.martop50 {margin-top: 50px !important;}
.marbot50 {margin-bottom: 50px !important;}
.marlef50 {margin-left: 50px !important;}
.marrig50 {margin-right: 50px !important;}
.pad75 {padding-top: 75px !important; padding-bottom: 75px !important;}
.padtop75 {padding-top: 75px !important;}
.padbot75 {padding-bottom: 75px !important;}
.mar75 {margin-top: 75px !important; margin-bottom: 75px !important;}
.martop75 {margin-top: 75px !important;}
.marbot75 {margin-bottom: 75px !important;}
.pad100 {padding-top: 100px !important; padding-bottom: 100px !important;}
.padtop100 {padding-top: 100px !important;}
.padbot100 {padding-bottom: 100px !important;}
.mar100 {margin-top: 100px !important; margin-bottom: 100px !important;}
.martop100 {margin-top: 100px !important;}
.marbot100 {margin-bottom: 100px !important;}
.pad125 {padding-top: 125px !important; padding-bottom: 125px !important;}
.padtop125 {padding-top: 125px !important;}
.padbot125 {padding-bottom: 125px !important;}
.mar125 {margin-top: 125px !important; margin-bottom: 125px !important;}
.martop125 {margin-top: 125px !important;}
.marbot125 {margin-bottom: 125px !important;}
.pad150 {padding-top: 150px !important; padding-bottom: 150px !important;}
.padtop150 {padding-top: 150px !important;}
.padbot150 {padding-bottom: 150px !important;}
.mar150 {margin-top: 150px !important; margin-bottom: 150px !important;}
.martop150 {margin-top: 150px !important;}
.marbot150 {margin-bottom: 150px !important;}
.pad250 {padding-top: 250px !important; padding-bottom: 250px !important;}
.padtop250 {padding-top: 250px !important;}
.padbot250 {padding-bottom: 250px !important;}
.mar250 {margin-top: 250px !important; margin-bottom: 250px !important;}
.martop250 {margin-top: 250px !important;}
.marbot250 {margin-bottom: 250px !important;}
.tx-center {text-align: center;}
.tx-left {text-align: left;}
.tx-right {text-align: right;}