:root { --nav-width: 55%; --nav-margin: 45%; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-Light.otf") format("truetype"); font-weight: 100; font-style: normal; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-LightItalic.otf") format("truetype"); font-weight: 100; font-style: italic; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-Roman.otf") format("truetype"); font-weight: 400; font-style: normal; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-Italic.otf") format("truetype"); font-weight: 400; font-style: italic; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-Medium.otf") format("truetype"); font-weight: 700; font-style: normal; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-MediumItalic.otf") format("truetype"); font-weight: 700; font-style: italic; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-Heavy.otf") format("truetype"); font-weight: 900; font-style: normal; }

@font-face { font-family: "Inspire"; src: url("../fonts/InspireTWDC-HeavyItalic.otf") format("truetype"); font-weight: 900; font-style: italic; }

body { background-color: black; position: relative; background-repeat: no-repeat; font-family: "Inspire", Arial, Helvetica, sans-serif; margin: 0; font-weight: normal; width: 100%; }

body.home .site-wrapper { background-image: url(../images/title.jpg); background-size: cover; background-position: top center; }

@media (max-width: 650px) { body.menu-open { overflow: hidden; position: fixed; height: 100vh; } }

.site-wrapper { background-image: url(../images/silver-background.jpg); background-size: cover; background-position: center center; position: relative; max-width: 450px; background-repeat: no-repeat; background-size: cover; margin: auto; overflow: hidden; min-height: 100vh; display: flex; flex-flow: column; justify-content: space-between; }

.site-wrapper.scan-code { background-image: url(../images/bg-scan-code.jpg); }

.site-wrapper.prize-background { background-image: url(../images/bg-prizes.jpg); }

.site-wrapper.prize-background .scan-new-code { position: relative; }

.site-wrapper.prize-background .scan-new-code::after { content: url(../images/tinker-bell-wand.png); position: absolute; transform: scale(0.2) scaleX(-1); left: -67px; top: -178px; }

.site-wrapper.playlist-background { background-image: url(../images/bg-playlist.jpg); }

.site-wrapper.playlist-background .prizes { position: relative; }

.site-wrapper.playlist-background .prizes.share { margin-top: 10vh; }

.site-wrapper.playlist-background .prizes::after { content: url(../images/tinker-bell-wand.png); position: absolute; transform: scale(0.25); right: -47px; top: -194px; }

.site-wrapper.fact-background { background-image: url(../images/bg-fact.jpg); }

.site-wrapper.fact-background .scan-new-code { position: relative; }

.site-wrapper.fact-background .scan-new-code::after { content: url(../images/tinker-bell-wand.png); position: absolute; transform: scale(0.25); right: -67px; top: -178px; }

.site-wrapper.fact-background.share .fact { position: relative; margin-top: 60px; }

.site-wrapper.fact-background.share .fact::after { content: url(../images/tinker-bell.png); position: absolute; transform: scale(0.25); right: -87px; top: -176px; }

.home-layout { display: flex; flex-flow: column; height: 100vh; justify-content: flex-end; margin-top: -70px; }

.home-layout .scan-new-code { margin-bottom: 20px; }

.question { display: flex; flex-flow: column; max-width: 650px; justify-content: center; margin: auto; margin-top: 60px; padding: 16px; box-sizing: border-box; background-image: url(../images/question-background.png); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; color: white; }

.question .question-wrapper { background: linear-gradient(180deg, #535253 0%, #282828 50%, black 51%, black 100%); padding: 16px; border-radius: 20px; border: 4px solid black; }

.answer { margin-top: 16px; display: flex; cursor: pointer; }

.answer::before { background-image: url(../images/ellipse-white.png); background-size: 16px 16px; background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; content: ""; padding-right: 16px; }

.answer.guessed { color: #B982FF; }

.answer.guessed::before { background-image: url(../images/ellipse-purple.png); }

.answer.correct { color: #B982FF; }

.answer.correct::before { background-image: url(../images/ellipse-purple.png); }

.answer.wrong { color: #FF0002; }

.answer.wrong::before { background-image: url(../images/ellipse-red.png); }

h1 { font-size: 1.5em; font-weight: 900; }

.fact { display: flex; flex-flow: column; width: 90%; max-width: 650px; justify-content: center; margin: auto; padding: 16px; box-sizing: border-box; background-image: url(../images/question-background.png); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; color: white; }

.fact h1 { padding: 0px; margin: 0; margin-bottom: 10px; color: black; text-align: center; text-transform: uppercase; }

.fact .fact-wrapper { background: linear-gradient(180deg, #7D4DB8 0%, #6218BE 50%, #5B00D2 51%, #5B00D2 100%); padding: 20px; padding-top: 0px; border-radius: 20px; border: 4px solid #3B008A; font-weight: lighter; line-height: 150%; }

.scan { display: flex; flex-flow: column; width: 90%; max-width: 650px; justify-content: center; margin: auto; padding: 16px; box-sizing: border-box; background-image: url(../images/question-background.png); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; color: white; }

.scan h1 { padding: 0px; margin: 0; margin-bottom: 10px; color: black; text-align: center; text-transform: uppercase; }

.scan .scan-wrapper { background: #000000; overflow: hidden; border-radius: 20px; border: 4px solid #000000; font-weight: lighter; line-height: 150%; position: relative; box-sizing: border-box; }

.scan .scan-wrapper::after { content: ''; width: 100%; height: 100%; border-radius: 20px; padding: 8px; background: linear-gradient(180deg, #535253 0%, #282828 50%, black 51%, black 100%); position: absolute; top: 0px; left: 0px; mix-blend-mode: screen; box-sizing: border-box; }

.scan #qr_video { width: 100%; }

#answer_feedback { color: black; text-align: center; margin: 0; margin-bottom: 20px; }

.prizes { display: flex; flex-flow: column; width: 100%; max-width: 650px; justify-content: center; margin: auto; padding: 16px; box-sizing: border-box; background-image: url(../images/question-background.png); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; color: white; margin-top: 30px; }

.prizes h1 { padding: 0px; margin: 0; margin-bottom: 10px; color: black; text-align: center; text-transform: uppercase; }

.prizes h3 { text-align: center; margin-bottom: 0px; }

.prizes h2 { text-align: center; }

.prizes .prizes-wrapper { background: linear-gradient(180deg, #7D4DB8 0%, #6218BE 50%, #5B00D2 51%, #5B00D2 100%); padding: 20px; padding-top: 0px; border-radius: 20px; border: 4px solid #3B008A; font-weight: lighter; line-height: 150%; margin-bottom: -12px; margin-left: -6px; margin-right: -6px; display: flex; flex-flow: column; }

.prizes .prizes-wrapper.plist { padding-top: 20px; }

.prizes .prizes-wrapper a { color: white; }

.prizes .prizes-wrapper img { max-width: 80px; float: right; padding: 8px; }

.prizes .prizes-wrapper img.prize-display { max-width: 100%; }

.prizes .prizes-wrapper .mickey-divider { max-width: 60%; margin: auto; }

.two-column { display: flex; margin-top: 20px; justify-content: space-around; }

.progress-bar { display: flex; align-items: center; justify-content: center; padding: 8px; }

.progress-bar img { padding: 2px; max-width: 40px; }

.vault-lock { margin-top: -30px; display: flex; align-items: center; justify-content: center; }

.vault-lock img { max-height: 40px; }

.enter-button { margin-top: 20px; display: flex; display: flex; align-items: center; justify-content: center; }

.enter-button img { max-height: 40px; }

.scan-new-code { margin-top: 40px; display: flex; display: flex; align-items: center; justify-content: center; }

.scan-new-code img { width: 50%; max-width: 250px; }

.platinum-logo { margin-top: 40px; margin-bottom: 120px; display: flex; align-items: center; justify-content: center; }

.platinum-logo img { width: 60%; max-width: 350px; }

.emporium-logo { margin-top: 40px; margin-bottom: 120px; display: flex; align-items: center; justify-content: center; }

.emporium-logo img { width: 40%; max-width: 350px; }

.feedback { margin-top: 20px; align-items: center; justify-content: center; font-size: 2.5em; display: none; }

.feedback.correct { display: flex; color: #B982FF; }

.feedback.wrong { display: flex; color: #FFFFFF; }

nav { position: relative; top: 0px; left: 0px; width: 100%; height: 70px; display: flex; justify-content: flex-end; align-items: center; padding-left: 16px; padding-right: 16px; box-sizing: border-box; z-index: 100; }

nav .menu-icon { height: 60%; }

nav .social { display: flex; align-items: center; justify-content: center; height: 40px; }

nav .social .share-icon { height: 80%; margin-right: 8px; }

nav .mobile-menu { height: 40px; display: flex; align-items: center; width: 100%; justify-content: space-between; }

.blocker { display: none; position: absolute; width: 100vw; height: 100vh; top: 0px; left: 0px; z-index: 150; }

.mobile-nav { position: absolute; top: 0px; left: 0px; width: var(--nav-width); height: 100vh; max-height: -webkit-fill-available; margin-left: var(--nav-margin); background-color: rgba(0, 0, 0, 0.85); background-size: auto; background-position: center center; background-repeat: no-repeat; z-index: 200; display: none; flex-flow: column; justify-content: flex-start; animation-duration: 0.5s; animation-name: slidein; padding-top: 75px; box-sizing: border-box; }

.mobile-nav a { margin-bottom: 40px; color: white; font-size: 1.25em; font-weight: lighter; text-decoration: none; padding-left: 20px; }

.mobile-nav .logo { display: flex; justify-content: center; position: absolute; bottom: 20px; }

.mobile-nav .logo img { width: 80%; }

body.android .mobile-nav { position: fixed; }

.mobile-close-button { position: absolute; top: 20px; right: 20px; font-size: 1.5em; color: white; }

.mobile-close-button img { width: 40px; }

.header-image { width: 40%; max-width: 250px; margin: auto; margin-bottom: 10px; }

.vault-header { display: flex; flex-flow: column; }

.vault-header h1 { text-align: center; font-size: 2em; margin: 0; text-transform: uppercase; font-weight: bolder; }

.playlists { display: flex; flex-flow: column; }

.playlists a { text-decoration: none; font-size: 1.2em; }

.playlists .playlist { display: flex; align-items: center; }

@keyframes slidein { from { margin-left: 100%; }
  to { margin-left: var(--nav-margin); } }

@media (min-height: 550px) { .hide-tall { display: none; } }

:root { --rotation-animation-speed: 2s; --rotation-animation-easing: linear; --stroke-animation-speed: 1.5s; --stroke-animation-easing: ease-in-out; --stroke-width: 3px; --stroke-start-dasharray: 1, 200; --stroke-end-dasharray: 89, 200; }

.loader { margin: 0px auto; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; }

.circular-loader { animation: rotate var(--rotation-animation-speed) var(--rotation-animation-easing) infinite; }

.loader-path { fill: none; stroke-width: var(--stroke-width); animation: animate-stroke var(--stroke-animation-speed) var(--stroke-animation-easing) infinite; stroke-linecap: round; }

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

@keyframes animate-stroke { 0% { stroke-dasharray: var(--stroke-start-dasharray);
    stroke-dashoffset: 0;
    stroke: #C9D4D2; }
  50% { stroke-dasharray: var(--stroke-end-dasharray);
    stroke-dashoffset: -35;
    stroke: #A3EADC; }
  100% { stroke-dasharray: var(--stroke-end-dasharray);
    stroke-dashoffset: -124;
    stroke: #7159BA; } }

/*# sourceMappingURL=style.css.map */