:root{
  --usf-green: #00543C;
  --usf-yellow: #F4C039;
}

* {
	margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--usf-green);
}

@font-face {
  font-family: "whitney-semibold";
  src: url("./fonts/whitneysemibold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "whitney-medium";
  src: url("./fonts/whitneymedium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "whitney-light";
  src: url("./fonts/whitneylight.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}


.mainFont {
  font-family: "whitney-light", Arial, Helvetica, sans-serif, sans-serif;
}

.bFont {
  font-family: "whitney-semibold", Arial, Helvetica, sans-serif, sans-serif;
}

.h100 {
  height: 100% !important;
}

.hidden {
  visibility: hidden;
}

.centerX {
  left: 50%;
  transform: translateX(-50%);
}

.centerY {
  transform: translateX(-50%);
}

.centerXY {
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


.fullscreenContainer {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.allowFade {
  transition: opacity 0.5s ease-out;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  -ms-transition: opacity 0.5s ease-out;
}

.allowFadeFast {
  transition: opacity 0.25s ease-out;
  -webkit-transition: opacity 0.25s ease-out;
  -moz-transition: opacity 0.25s ease-out;
  -o-transition: opacity 0.25s ease-out;
  -ms-transition: opacity 0.25s ease-out;
}

.disable-select {
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


.background{
  position:absolute;
  z-index:10;
  background-color: var(--usf-green);
  top:0;
  height:100%;
  width:100%;
  opacity:1;
  pointer-events: none;

}

/* Loading Screen */

#loadingContainer {
  z-index: -900;
  display:none;
}

.loadingScreen{
  position:absolute;
  z-index:75;
  top:0;
  height:100%;
  width:100%;
  opacity:0;
  background-color: var(--usf-green);
  display:grid;
  grid-template-columns: 5% auto 5%;
  grid-template-rows: 28% 15% 8% 5% 5% 19% 12% 8%;
}

@-webkit-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
            transform: perspective(100px) rotateX(0) rotateY(0); } 
  }

@keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
            transform: perspective(100px) rotateX(0) rotateY(0); } 
  }

.logo-spin{
  grid-row:2;
  grid-column:2;
  justify-self: center;
  align-self: center;
  width: 12vh;
  height: 12vh;
  background-image: url("./textures/logoTop.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
          animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; 
}


.loadingName{
  grid-row:3;
  grid-column: 2;
  background-image: url("./textures/usfText.svg");
  background-repeat: no-repeat;
  background-size: 25vh;
  background-position: center;
}

.loadingText{
  grid-row:5;
  grid-column: 2;
  text-align: center;
  font-family: 'whitney-medium';
  font-size: 2vh;
  color: white;
  align-self: center;
}

.wallBug{
  grid-row: 7;
  grid-column: 2;
  background-image: url(./textures/8thwall_logo.svg);
  background-position: bottom right;
  background-size: 18vh;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.tacticBug{
  grid-row:7;
  grid-column:2;
  background-image: url(./textures/created_by_tactic_logo.svg);
  background-position: bottom left;
  background-size: 12vh;
  background-repeat: no-repeat;
  height:100%;
  width:100%;
  filter: invert(1);
}

/* Side Menu Icon fanciness */

.backArrow{
  position:absolute;
  z-index: 30;
  opacity:0;
  top:4.5vh;
  left:6vw;
  background-image: url(./textures/backArrow.svg);
  background-position-x: left;
  background-position-y: top;
  background-size:4vh;
  background-repeat: no-repeat;
  height:4%;
  width:10%;
  pointer-events: none;
  transition: opacity .5s ease-in-out;
}

.logo{
  position: absolute;
  z-index: 20;
  opacity: 1;
  top: 4vh;
  background-image: url(./textures/usfLogo.svg);
  background-position: top;
  background-size: 12vh;
  background-repeat: no-repeat;
  height: 12vh;
  width: 100%;
  pointer-events: none;
}

#menuIcon {
  display: inline-block;
  cursor: pointer;
  z-index: 70;
  position: absolute;
  right: 6vw;
  top: 4vh;
}



.bar1, .bar2, .bar3 {
  width: 28px;
  height: 3px;
  background-color: var(--usf-yellow);
  margin: 5px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-8px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-5px, -4px);
}



/* side menu */
.sideMenu{
  position: absolute;
  height:100%;
  width: 70%;
  display:grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 8% 20% 3% 9% 9% 9% 9% 9% 9% 9%;
  background-color: var(--usf-green);
  z-index: 60;
  top:0;
  right:-80%;

  -webkit-transition:right 0.25s ease-out;
    -moz-transition:right 0.25s ease-out;
    -o-transition:right 0.25s ease-out;
    -ms-transition:right 0.25s ease-out;
    transition:right 0.25s ease-out;
}

.sideMenuLogo{
  grid-row:2;
  grid-column:2;
  background-image: url("./textures/sideMenuLogo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.sideMenuButton{
  align-self:center;
  justify-self: center;
  font-family: 'whitney-medium';
  text-align: center;
  font-size: 5vw;
  color: white;
  border-style:none;
  background-color: transparent;
  text-decoration: none;
}

#button1{
  grid-row:5;
  grid-column:2;
}

#button2{
  grid-row:6;
  grid-column:2;
}

#button3{
  grid-row:7;
  grid-column:2;
}

#button4{
  grid-row:8;
  grid-column:2;
}

#button5{
  grid-row:4;
  grid-column:2;
}

#button6{
  grid-row:9;
  grid-column:2;
}
#button7{
  grid-row:10;
  grid-column:2;
}

.link{
  text-decoration: none;
  color:inherit;
}

/* landing page */
.landingPage{
  position:absolute;
  display:grid;
  top:0;
  opacity:0;
  background-color: var(--usf-green);
  height:100%;
  width:100%;
  z-index:10;
  grid-template-columns: 25% 60% 15%;
  grid-template-rows: 20% 8% 6% 10% 4% 10% 4% 12% 4% 12% 4%;
  transition: opacity .75s ease-in-out;
  align-items: end;
}

.landingText{
  grid-row:2;
  grid-column: 1/span 3;
  text-align: center;
  font-family: 'whitney-semibold';
  font-size: 2.5vh;
  line-height: 4vh;
  color: white;
  align-self: center;
}

.landingBox{
  position:relative;
  display: flex;
  align-items: center;
  height:90%;
  width:100%;
  background-color: var(--usf-yellow);
  border-radius: 0px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#ignatiusBox{
  grid-row:4;
  grid-column: 2;
}

#lobosBox{
  grid-row:6;
  grid-column: 2;
}

#cartwrightBox{
  grid-row:8;
  grid-column: 2;
}

#nanoBox{
  grid-row:10;
  grid-column: 2;
}

.landingTitle{
  text-align: center;
  margin:auto;
  font-family: 'whitney-semibold';
  font-size: 2.8vh;
  color: black;
  align-self: center;
  padding-left:9vw;
}

#cartwrightTitle{
  padding-left:16vw;
}

.landingIcon{
  position:absolute;
  margin:auto;
  margin-left:-12vw;
  width:14vh;
  bottom:0;
  max-height: 12vh;
  object-fit: contain;
}

/*tutorial pages*/
.tutorialPage{
  position:absolute;
  display:grid;
  opacity:1;
  background-color: var(--usf-green);
  top: 5%;
  height: 95%;
  width:100%;
  z-index:15;
  /* grid-template-columns: 12% 76% 12%; */
  grid-template-rows: auto auto auto auto auto;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
  align-content: center;
  color: white;
  font-weight: bold;
}

#cartwrightTutorial{
  opacity:0;
}

#lobosTutorial{
  /* grid-template-rows: 1% 4% 11% 40% 5% 6% 11%; */
  opacity:0;
}

#ignatiusTutorial{
  /* grid-template-rows: 1% 4% 11% 40% 5% 6% 11%; */
  opacity:0;
}

#nanoTutorial{
  /* grid-template-rows: 1% 4% 11% 40% 5% 6% 11%; */
  opacity:0;
}

.tutorialTitle{
  text-align: center;
  grid-row:1;
  margin:auto;
  font-family: 'whitney-semibold';
  font-size: 2.4vh;
  color: white;
  align-self: center;
  margin: 10px;
}

#lobosTutSubtitle{}

#ignatiusTutSubtitle{
}

.tutorialSubtitle{
  text-align: center;
  grid-row:2;
  margin:auto;
  font-family: 'whitney-light';
  font-size: 2vh;
  line-height: 3vh;
  color: white;
  align-self: center;
  width: min(60%, 240px);
  padding: 10px;
  box-shadow: 0 -1px 0 0 var(--usf-yellow);
}

.tutorialImg{
  grid-row:3;
  border-radius: 1vh;;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 36vh;
  margin: 10px;
}

#cartwrightTutImg{
  background-image: url("./textures/cartwrightTutorial.png");
}

#lobosTutImg{
  background-image: url("./textures/lobosTutorial.png");
}

#ignatiusTutImg{
  background-image: url("./textures/ignatiusTutorial.png");
}

#nanoTutImg{
  background-image: url("./textures/nanoTutorial.png");
}

.tutorialButton{
  grid-row:4;
  border: none;
  outline: none;
  background-color: #FAB500;
  color: black;
  font-family: 'whitney-semibold';
  display: block;
  border-radius: 0px;
  box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.25);
  justify-self: center;
  width:43vw;
  margin: 10px;
  padding: 14px;
}

/* reticles */
.reticle{
  position:absolute;
  display:grid;
  opacity:1;
  height:100%;
  width:100%;
  z-index:25;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 33% 10% 15% 42%;
}

#tapReticle{
  opacity:0;
  pointer-events: none;
}

#scanReticle{
  opacity:0;
  pointer-events: none;
  background-image: url("./textures/cartwrightTop.png");
}

.cwN{
  position: absolute;
  transition: opacity 1s ease-in-out;
  width: min(80%, 240px);
  height: min(60%, 320px);
  background-color: var(--usf-green);
  
}

.reticleText{
  text-align: center;
  grid-row:2;
  grid-column: 2;
  margin:auto;
  font-family: 'whitney-semibold';
  font-size: 2.4vh;
  color: white;
  align-self: center;
}

.reticleIcon{
  grid-row:3;
  grid-column:2;
  background-image: url("./textures/logoTop.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#tapReticleIcon{
  visibility: hidden;
}

#tapReticleText{
  height: 100%;
  margin-top: 1em;
  grid-row: 4;
}

#tapReticleIcon{
  background-image: url("./textures/cartwrightTop.png");
}

/* 8th wall loading permissions */


/* about pages */
.aboutPage{
  position:absolute;
  display:grid;
  opacity:0;
  background-color: white;
  height:100%;
  width:100%;
  z-index:55;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 60% 2% 5% 5% 3% 12% 13%;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}

.zb{
  z-index: 56;
  pointer-events: inherit;
  opacity: 1;
}

#aboutIgnatius{
  opacity: 0;
}

#aboutLobos{
  opacity: 0;
}

#aboutCartwright{
  opacity:0;
}

.abtImage{
  grid-row:1;
  grid-column:1/ span 3;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#ignatiusAbtImg{
  background-image: url('./textures/aboutIgnatius.png');
}

#lobosAbtImg{
  background-image: url('./textures/aboutLobos.png');
}
#nanoAbtImg{
  background-image: url('./textures/aboutNano.png');
}
#cartwrightAbtImg{
  background-image: url('./textures/aboutCartwright.png');
  background-color: black;
  background-size: contain;
}

.abtLine{
  grid-row: 2;
  grid-column: 1/ span 3;
  background-color:var(--usf-yellow);
}

.abtTitle{
  text-align: center;
  grid-row:4;
  grid-column: 2;
  margin:auto;
  font-family: 'whitney-semibold';
  font-size: 3vh;
  color: var(--usf-green);
  text-decoration: underline;
  text-decoration-color: var(--usf-yellow);
  text-decoration-thickness: .3vh;
  align-self: center;
}

#lobosAbtTitle{
  font-size:2.5vh;
  line-height: 4vh;
}

.abtSubTitle{
  text-align: center;
  grid-row:6;
  grid-column: 2;
  margin:auto;
  font-family: 'whitney-light';
  font-size: 2.4vh;
  color: black;
  align-self: center;
  line-height: 4vh;
}

#lobosAbtSubTitle{
  font-size:1.6vh;
  margin-top: 2vh;
}

#cartwrightAbtSubTitle{
  font-size: 1.8vh;
}

.abtLogo{
  grid-row:7;
  grid-column:1/ span 3;
  background-image: url(./textures/USF_Title.png);
  background-repeat: no-repeat;
  background-size: 14vh;
  background-position: center;
}

/* 8th wall loading colors */
#requestingCameraPermissions {
  background-color: var(--usf-green) !important;
}

.prompt-box-8w {
  background-color: var(--usf-green) !important;
}

.prompt-button-8w {
  background-color: #BABAC9 !important;
}

.button-primary-8w {
  background-color: var(--usf-yellow) !important;
}


/* desktop */

.desktop{
  z-index:200;
  pointer-events: none;
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  opacity: 0;
  background-color: var(--usf-green);
  display:none;
  grid-template-columns: 19% 29% 4% 32% 16%;
  row-gap:1vh;
  grid-template-rows: 5% 13% 4% 23% 3% 35% 5% auto;
}

.deskText{
  grid-row:4;
  z-index: 2;
  grid-column: 1/span 3;
  text-align: center;
  font-family: 'whitney-semibold';
  font-size: 4vh;
  line-height: 5vh;
  color: white;
  align-self: end;
  margin:auto;
  margin-left:10vh;
  margin-right:10vh;
}

.deskLogo{
  grid-row:2;
  z-index: 2;
  grid-column: 1 / span 5;
  background-image: url("./textures/usfLogo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.deskSig{
  background-image: url("./textures/loadingIgnatius.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-row: 1 / span 8;
  z-index: 1;
  grid-column: 4/span 6;
}

.QR{
  grid-row:6;
  z-index: 2;
  grid-column: 1/span 3;
  background-image: url("./textures/usf-qr.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#almostthereContainer{
  z-index: -900;
  display: none;
}

/* end pop up */
.endPop{
  width:101%;
  height:37vh;
  z-index: 55;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%);
  left:50%;
  bottom: -110%;
  border-style: none;
  border-radius: 2vh 2vh 0 0;
  background-color: var(--usf-green);
  display:grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 7fr 17fr 12fr 15fr 4fr 15fr 8fr;
  row-gap: 1vh;
  transition: all .5s ease-in-out;
}

#endTitle{
  grid-row: 3;
  grid-column: 2;
  bottom:0;
  font-size: 2.8vh;
}

#endText{
  grid-row: 4;
  grid-column: 2;
  margin-top:0;
  font-size: 1.8vh;
}

#restartButton{
  grid-row: 6;
  grid-column: 2;
  margin:0 auto;
  margin-left:-3%;
}

#shareButton{
  grid-row: 6;
  grid-column: 2;
  color:black;
  background-color: #E1E1E1;
  margin:0 auto;
  margin-right:-3%;
}

#endPop{
  max-width: 42vh;
}

#endImage{
  background-image: url("./textures/logoTop.svg");
}

.introImage{
  grid-row:2;
  grid-column:2;
  background-position: center;
  background-size:contain;
  background-repeat: no-repeat;
  height:100%;
  width:100%;
}

.x{
  grid-row:2;
  grid-column:2;
  background-image: url(./textures/x.svg);
  background-position: top right;
  background-size:2vh;
  background-repeat: no-repeat;
  margin:auto;
  margin-left:1vh;
  margin-top:0vh;
  height:100%;
  width:100%;
}

.defaultButton{
  border: none;
  outline: none;
  background-color: #FAB500;
  color: black;
  font-family: 'whitney-semibold';
  font-size: 2vh;
  justify-self: center;
  width:17vh;
  border-style: none;
  border-radius: 0px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#instructionsImage{
  background-image: url("./textures/instructionsImage.svg");
}

#instructionsTitle{
  grid-row: 3;
  grid-column: 2;
  bottom:0;
  font-size: 2.8vh;
}

#instructionsText{
  grid-row: 4;
  grid-column: 2;
  margin-top:0;
  font-size: 1.8vh;
}

#playButton{
  grid-column: 2;
  grid-row: 6;
}

#instructionsPop{
  /* max-width: 42vh; */
  height: 100%;
    width: 100%;
    position: absolute;
    color: white;
    border-radius: 0px;
}

/* ============================== Walkthrough Page ============================================ */


.wlTitle {
  text-transform: uppercase;
  display: grid;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-self: end;
  margin-bottom: 2vh;
  font-size: 2.5vh;
  text-align: center;
  letter-spacing: -0.1px;
}

.wlText {
  width: 80%;
  color: black;
  text-align: center;
  font-size: 2.4vh;
  /* letter-spacing: 1em; */
  line-height: 1.4em;
  /* align-self: center; */
  margin-top: 5vh;
  /* text-indent: 35px; */
}


#walkthroughPage {
  z-index: 15;
}

#walkthroughPage hr{
  width: 80%;
  left: 10%;
  color: var(--usf-yellow);
  top: 20%;
  position: absolute;
  border-style: solid;
}

.wtPage {
}

#wtNextButton {
  background: #5C5C5C;
}

.wtButton {
  position: absolute;
  top: 81%;
  background: var(--usf-yellow) !important;
  color: black;
  border: none;
  padding: 0.5em 1.6em;
  size: 2vh;
  width: 73%;
  max-width: 140px;
  font-size: 1.4em;
  filter: drop-shadow(2px 3px 0px #133737);
  text-align: center;
  text-transform: uppercase;
}

.wtTitle {
  text-transform: capitalize;
  max-width: 400px;
  width: 85%;
  bottom: 80%;
  position: absolute;
  font-size: 2.7vh;
}

.wtText {
  font-size: min(2.1dvh, 16px);
  max-width: 400px;
  width: 65%;
  top: 22.5%;
  position: absolute;
  text-align: center;
  line-height: min(2.1dvh, 16px);
}

.wtText2{
  top: 71% !important;
  left: 25%;
  width: 20%;
}

.wtText3{
  top: 71% !important;
  left: 67%;
  width: 52%;
}

.wtText4{
  top: 51% !important;
  width: 80%;
}

.wtText5{
  top: 76% !important;
  width: 40%;
  font-size: min(2.1dvh, 1em);
  visibility: hidden;
}


.wtText ol li{
  margin-bottom: 1vh;
}

.wtImg {
  max-width: 300px;
  height: 25%;
  max-height: 300px;
  position: absolute;
  top: 40%;
  /* filter: drop-shadow(4px 4px 4px black); */
}

.wtImgDrag {
  max-width: 300px;
  height: 12%;
  max-height: 300px;
  position: absolute;
  top: 62.5%;
  left: 25%;
}

.wtImgPinch{
  max-width: 400px;
  height: 12%;
  max-height: 400px;
  position: absolute;
  top: 62.5%;
  left: 65%;
}


#mask{
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 25;
}