@font-face {
    font-family: "Metro";
    src: url("fonts/Metro\ Playtype.otf") format("opentype");
    font-weight: normal;
}

@font-face {
    font-family: "Metro";
    src: url("fonts/Metro-Italic\ Playtype.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Metro";
    src: url("fonts/Metro-Medium\ Playtype.otf") format("opentype");
    font-weight: 500;
}

@font-face {
    font-family: "Metro";
    src: url("fonts/Metro-Medium\ Italic\ Playtype.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Metro";
    src: url("fonts/Metro-DemiBold\ Playtype.otf") format("opentype");
    font-weight: 600;
}

@font-face {
    font-family: "Metro";
    src: url("fonts/Metro-DemiBold\ Italic\ Playtype.otf") format("opentype");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "Metro";
    src: url("fonts/Metro-Bold\ Playtype.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: "Metro";
    src: url("fonts/Metro-BoldItalic\ Playtype.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
}

html {
    color:white;
    text-align:center;
    height:100%;
    font-family:"Metro", sans-serif;

    background-color:#1E1B16;
    /* background-image:url("../graphics/background.png");
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat; */
}

body, html {
    overflow-y:auto !important; /* allow drag refresh */
}

div.page
{
    display:none;
    position:absolute;
    z-index:2;
    width:100%;
    height:100%;
    left:0;
    top:0;
    overflow-y:visible;
}

h1 {
    font-weight:bold;
    text-transform: uppercase;
}

span.red {
    color:#EB3755;
}

img.logo {
    height:12.5vmin;
    margin:5vmin 0;
}

h1 {
    font-size:8vmin;
    line-height:1;
}

button:not(.close),
input[type=submit] {
    height:13vmin;
    border-radius:6.5vmin;
    font-size:6vmin;
    font-weight:600;
    background:#EB3755;
    color:white;
    display:block;
    margin:0 auto;
    padding:0 10vmin;
}

button.close {
    position:fixed;
    right:5vmin;
    bottom:5vmin;
    width:10vmin;
    height:10vmin;
    background:none;
}

button.close > img {
    width:100%;
    height:100%;
}

/* WELCOME */

div.page.welcome {
    background-color:black;
    background-image:url("/graphics/welcome-background.png");
    background-size:100% auto;
    background-position:center bottom;
    background-repeat:no-repeat;
    min-height:160vmin;
}

/* div.page.welcome > h1 {
    font-size:8vmin;
    line-height:1;
} */

div.page.welcome > p {
    font-size:5vmin;
    line-height:1.4;
    margin:10vmin;
    text-shadow:1vmin 1vmin 1vmin rgba(0,0,0,0.5);
}

div.page.welcome > button {
    width:50.9vmin;
    height:50.9vmin;
    border-radius:50%;
    font-size:10vmin;
    font-weight:bold;
    background:#EB3755;
    font-style:italic;
    color:white;
    display:block;
    position:absolute;
    left:calc(50vw - 50.9vmin/2);
    bottom:10vmin;
    padding:0;
}

div.page.welcome > div.block {
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.5);
    position:fixed;
    top:0;
    left:0;
}

div.page.welcome > div.block > div {
    width:100%;
    margin-top:50vh;
    transform:translateY(-50%);
    background:white;
    padding:10vmin;
}

div.page.welcome > div.block > div > h1 {
    color:#14143C;
    font-size:7.5vmin;
    font-weight:600;
    line-height:1;
}

div.page.welcome > div.block > div > h1 > span {
    display:block;
    color:#EB3755;
}

/* AR */

div.page.ar {
    display:block;
    position:relative;
    z-index:0;
    width:100vw;
    height:100vh;
    /* display:none; */
    background:black;
    opacity:0;
    overflow:hidden;
}

div.page.ar > h1 {
    position:absolute;
    left:0;
    top:10vmin;
    width:100vw;
    z-index:2;
    pointer-events: none;
    
    text-shadow:0 0 1vmin rgba(0,0,0,0.5);
}

div.page.ar > h1 > span {
    color:#EB3755;
    display:block;
}

/* QUESTION */

div.page.question > p {
    font-size:5vmin;
    line-height:1.4;
    margin-top:5vmin;
}

div.page.question > img.frame {
    height:60vh;
    margin:5vmin 0 70vmin 50vw;
    transform:translateX(-50%);
    /* width:100%;
    margin:5vmin 0 70vmin 0; */
}

/* div.page.photo > img {
    height:80vh;
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
} */

div.page.question > div.options {
    position:fixed;
    left:0;
    bottom:5vmin;
    width:100%;
}

div.page.question > div.options > button {
    /* width:60vmin; */
    height:13vmin;
    border-radius:6.5vmin;
    font-size:6vmin;
    font-weight:600;
    background:#EB3755;
    color:white;
    display:block;
    margin:0 auto 5vmin auto;
    padding:0 10vmin;
}

/* WRONG */

div.page.wrong {
    background:#EB3755;
}

div.page.wrong > h1 {
    font-size:10vmin;
    line-height:1;
    color:#14143C;
    margin-top:calc(50vh - (4 * 10vmin + 13vmin + 5vmin) / 2);
}

div.page.wrong > h1 > span {
    color:white;
    display:block;
}

div.page.wrong > button {
    height:13vmin;
    border-radius:6.5vmin;
    font-size:6vmin;
    font-weight:600;
    background:#14143C;
    color:white;
    display:block;
    margin:5vmin auto 0 auto;
    padding:0 10vmin;
}

/* RIGHT */

div.page.right {
    background:#DEF4F0;
}

div.page.right > div {
    background: #EB3755;
    height:2vmin;
    position:absolute;
    left:0;
    top:0;
}

div.page.right > h1 {
    font-size:10vmin;
    line-height:1;
    font-weight:700;
    color:#EB3755;
    margin-top:calc(50vh - (5 * 10vmin) / 2);
}

div.page.right > h1 > span {
    color:#14143C;
    display:block;
}

/* SIGNUP */

div.page.signup > h1 {
    margin-top:15vmin;
}

div.page.signup > h1 > span {
    color:#EB3755;
    display:block;
}

div.page.signup > p {
    font-size:6vmin;
    font-style:italic;
    font-weight: 500;
    line-height:1.5;
    margin:10vmin;
}

div.page.signup > form > input:not([type=submit]) {
    width:84vmin;
    height:22vmin;
    font-size:7vmin;
    font-weight:600;
    background:white;
    color:black;
    display:block;
    margin:5vmin auto 0 auto;
    border-radius:2vmin;
    letter-spacing: 1vmin;
}

div.page.signup > form > input[type=submit] {
    margin:10vmin auto 0 auto;
}

div.page.signup > p.subtext {
    font-size:5vmin;
    font-style:normal;
    margin:10vmin;
}

/* STATUS */

/* div.page.status > h1 {
    font-size:10vmin;
    margin:5vmin 0;
    line-height:1;
} */

div.page.status > hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

div.page.status > p.status {
    font-size:5vmin;
    line-height:1;
    margin:5vmin;
    text-transform: uppercase;
    color:white;
    font-weight:bold;
}

div.page.status > div.posts {
    width:100vw;
    height:27vmin;
    overflow-x:scroll;
    overflow-y:hidden;
    white-space: nowrap;
    margin-bottom:5vmin;

    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

div.page.status > div.posts::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

div.page.status > div.posts > div {
    height:30vmin;
    width:13vmin;
    margin-left:5vmin;
    display:inline-block;
}

div.page.status > div.posts > div:last-of-type {
    margin-right:5vmin;
}

div.page.status > div.posts > div > img {
    height:20vmin;
    width:calc((97 / 152) * 20vmin);
}

div.page.status > div.posts > div[data-found=true] > img {
    width:calc((94/128) * 20vmin);
    /* margin-left:-3.5vmin; */
    /* transform:translateX(50%); */
}

div.page.status > div.posts > div > p {
    font-size:5vmin;
    line-height:2;
}

div.page.status > div.posts > div.selected > p {
    font-weight:bold;
}

div.page.status > p.total {
    font-size:5vmin;
    line-height:1;
    opacity:0.5;
    margin:5vmin;
}

div.page.status > div.profile {
    width:100vw;
    height:100vw;
    position:relative;
    overflow:hidden;
    margin:10vmin 0;
}

div.page.status > div.profile > img {
    position:absolute;
    right:55vw;
    top:0;
    height:100%;
}

div.page.status > div.profile > div {
    width:50vw;
    margin-left:50vw;
    text-align:left;
}

div.page.status > div.profile > div.guide > h2 {
    font-size:6vmin;
    font-style: italic;
    color:white;
    line-height:1.5;
    margin:5vmin 0;
}

div.page.status > div.profile > div.guide > button {
    font-size:6vmin;
    color:black;
    background:white;
    height:13vmin;
    width:43vmin;
    border-radius:6.5vmin;
    text-align:center;
    font-weight:600;
    margin:0;
}

div.page.status > div.profile > div.post > h2 {
    font-size:6vmin;
    font-style: italic;
    color:#EB3755;
    line-height:1.5;
    margin:5vmin 5vmin 5vmin 0;
}

div.page.status > div.profile > div.post > p {
    font-size:5vmin;
    line-height:1.5;
    margin-right:5vmin;
}

/* div.page.status > h2 {
    font-size:7vmin;
    margin:5vmin 0;
    line-height:1;
} */

div.page.status > p.description,
div.page.status > p.description2 {
    font-size:5vmin;
    text-align:left;
    margin:5vmin 10vmin 0 10vmin;
    line-height:1.5;
}

div.page.status > img.photo {
    height:50vmin;
    margin:5vmin auto 0 auto;
}

div.page.status > button {
    width:59vmin;
    height:13vmin;
    font-size:6vmin;
    font-weight:600;
    border-radius:6.5vmin;
    background:#EB3755;
    color:white;
    display:block;
    margin:5vmin auto 0 auto;
}

div.page.status > div.spacer {
    width:100vw;
    height:37vmin;
}

div.page.status > div.menu {
    width:50vmin;
    height:16.66vmin;
    /* background-color:#EB3755; */
    background-image:url("/graphics/menu.png");
    background-size:100% 100%;
    border-radius:11vmin;
    position:fixed;
    bottom:5vmin;
    left:calc(50% - 25vmin);
    box-shadow:0 1vmin 1vmin rgba(0,0,0,0.25);
    overflow:hidden;
}

div.page.status > div.menu > img {
    width:16.66vmin;
    height:16.66vmin;
    /* position:relative;
    pointer-events: all;
    background:black;
    width:10px;
    height:10px; */
}

/* QR */

div.page.qr > img.logo {
    position:absolute;
    left:50%;
    top:0;
    transform: translateX(-50%);
}

div.page.qr > h1 {
    position:absolute;
    top:20vmin;
    left:0;
    font-size:8vmin;
    margin:5vmin 0;
    line-height:1;
    width:100vw;
}

div.page.qr > h1 > span {
    display:block;
}

div.page.qr > video {
    width:100%;
    height:100%;
    object-fit:cover;
    background-color:black;
}

div.page.qr > img.qr {
    height:min(80vmin, calc(50vmax - 46vmin)); /* h1s height is 20 + 8 + 8 vmin */

    position:absolute;
    left:50%;
    top:50%;
	animation: qr-bouncing 1.5s ease-in-out infinite;
}

@keyframes qr-bouncing {
  0%, 100% { transform: translate(-50%, -50%) scale(1.0); }
  50%      { transform: translate(-50%, -50%) scale(0.9); }
}

div.page.qr > button {
    position:absolute;
    right:5vmin;
    bottom:5vmin;
    width:10vmin;
    height:10vmin;
    background:none;
}

div.page.qr > button > img {
    width:100%;
    height:100%;
}

/* MAP */

div.page.map > img:not(.map) {
    height:32vmin;
    margin-top:15vmin;
}

div.page.map > h1 {
    margin-top:10vmin;
}

div.page.map > h1 > span {
    color:#EB3755;
    display:block;
}

div.page.map > p:not(.hint) {
    font-size:6vmin;
    font-style:italic;
    line-height:1.5;
    margin:5vmin 10vmin;
}

div.page.map > img.map {
    width:80vmin;
}

/* div.page.map > div.map {
    width:80vmin;
    height:80vmin;
    display:inline-block;
    border-radius:3vmin;
    overflow:hidden;
} */

div.page.map > p.hint {
    font-size:5vmin;
    /* font-weight:600; */
    line-height:1.4;
    margin:5vmin 10vmin;
    text-align:left;
}

div.page.map > p > span {
    font-weight:normal;
    display:block;
}

/* INFO */

div.page.info > h1 {
    margin-top:15vmin;
}

div.page.info > h1 > span {
    color:#EB3755;
    display:block;
}

div.page.info > p {
    font-size:5vmin;
    line-height:1.4;
    margin:10vmin;
    text-align:left;
}

div.page.info > p > strong {
    display:block;
}

div.page.info > img {
    width:70vmin;
    margin-top:10vmin;
}

/* PHOTO */

div.page.photo {
    height:100%;
    overflow:hidden;
}

div.page.photo > img {
    height:80vh;
    /* margin:50% 0 0 50vw; */
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
}

div.page.photo > button {
    position:absolute;
    right:5vmin;
    bottom:5vmin;
    width:10vmin;
    height:10vmin;
    background:none;
}

div.page.photo > button > img {
    width:100%;
    height:100%;
}

/* REDEEM */

div.page.redeem {
    background:#EB3755;
    color:#14143C;
}

div.page.redeem > h1 {
    /* font-size:10vmin; */
    /* line-height:1; */
    color:#14143C;
    margin-top:15vmin;
    /* margin-top:calc(50vh - (20vmin + 13vmin + 5vmin) / 2); */
}

div.page.redeem > h1 > span {
    color:white;
    display:block;
}

div.page.redeem > p {
    font-size:5vmin;
    line-height:1.5;
    margin:10vmin;
}

div.page.redeem > p > a {
    text-decoration: underline;
}

div.page.redeem > button:not(.close) {
    height:13vmin;
    border-radius:6.5vmin;
    font-size:6vmin;
    font-weight:600;
    color:#14143C;
    background:white;
    display:block;
    margin:5vmin auto 0 auto;
    padding:0 10vmin;
}

/* 8TH WALL */

div#loadingContainer {
    z-index:12;
    display:none;
    font-size:3vmin;
    line-height:1;
}

#requestingCameraPermissions {
    background: transparent !important;
}

#loadBackground {
    background:black !important;
}

.prompt-box-8w,
.prompt-button-8w,
.button-primary-8w {
    line-height:1.2;
}

/* #loadImage {
    width:20vmin !important;
    height:20vmin !important;
    margin-top:-10vmin !important;
    margin-left:-10vmin !important;
} */

/* */