/* Copyright (c) 2023 Tactic LLC. All rights reserved. */
:root{
    --main-black: #000000e0;
    --main-color: #AD892E;
}

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

html{
  position: fixed;
}

@font-face {
    font-family: Clarendon;
    src: url("./fonts/Clarendon.otf");
  }

@font-face {
  font-family: "Inter-VariableFont";
  src: url("../fonts/Inter-VariableFont.ttf") ;
  font-weight: normal;
  font-style: normal;
}

.mainFont{
  font-family: 'Clarendon', Times, 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%;
}

.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; /* supported by Chrome and Opera */
 -webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
}

.noninteractable{
    pointer-events: none;
}

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

.cameraSwitchButton{
  position: absolute;
  top: 45%;
  left: 5%;
}

.colorFilter{
  filter: sepia(100%) saturate(1019%) brightness(73%) hue-rotate(341deg)
}

/* ============================== loading screen ============================================ */
.loading {
  position: absolute;
  z-index: 11111;
  font-size: min(10vw,10vh);
  font-weight: 800;
  text-align: center;
  color: #9a8373;
  width: -webkit-fill-available;
}
.loading span {
  display: inline-block;
  margin: 0 -0.05em;
}


/* code #1 */
.loading01 span {
  animation: loading01 1s infinite alternate;
}
.loading01 span:nth-child(1) {
  animation-delay: 0s;
}
.loading01 span:nth-child(2) {
  animation-delay: 0.1s;
}
.loading01 span:nth-child(3) {
  animation-delay: 0.2s;
}
.loading01 span:nth-child(4) {
  animation-delay: 0.3s;
}
.loading01 span:nth-child(5) {
  animation-delay: 0.4s;
}
.loading01 span:nth-child(6) {
  animation-delay: 0.5s;
}
.loading01 span:nth-child(7) {
  animation-delay: 0.6s;
}

@keyframes loading01 {
  0% {
    color: #9a8373;
  }
  100% {
    color: #ffffff09;
  }
}

#loadingContainer{
  z-index: 1111 !important;
}

.loadingContainer{
  background-color: rgb(10, 10, 10);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}

.loadingContainer .loadingStacked{
  top: 41%;
  width: 80%;
  max-width: 400px;
  position: absolute;
  z-index: inherit;
  filter: brightness(1.6) saturate(0.3) hue-rotate(359deg);
}

.stripes{
  position: absolute;
  top: 34%;
  z-index: inherit;
}

.tacticFooter{
  position: absolute;
  bottom: 3vh;
  left: 3vh;
  z-index: inherit;
}
.ethwallFooter{
  position: absolute;
  bottom: 6vh;
  right: 3vh;
  max-height: 3vh ;
  z-index: inherit;
}

.loadingScreen{
  position: absolute;
  left: 0%;
  width: 100%;
  background-image: url(./ui/Distressed-bg.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  z-index: 1111;
  height: 100%;
}

.loadingLogo{
  position: absolute;
  z-index: 1111;
  max-width: 60%;
  bottom: 60%;
  height: 30%;
  object-fit: contain;
}

.loadingFooter{
  position: absolute;
  left: 0%;
  width: 100%;
  height: 100%;
  background-image: url(./ui/loadingFooter.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  z-index: 1111;
}

.poweredby-img{
  visibility: hidden !important;
}

/* =========== 8thwall override============= */

#loadingContainer #loadBackground{
  background-color: transparent;
}

#loadImage{
  visibility: hidden;
}

#loadingContainer #requestingCameraPermissions{
  background-color: #222223;

}


/* ============================== top bar ====================== */

  #topBar{
    width : 101%;
    height : 40px;
    background-image: linear-gradient(0.38turn, #181818, rgb(27, 27, 27), #242424);
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 46;
    display: inline-grid;
    grid-template-columns: 2% 30% auto 10% 2%;
    grid-template-rows: 5% 90% 5%;
    border: 1px solid  rgb(95, 95, 95);
  }

  #topLogo{
    display: inline-block;
    background: url("./ui/TopLogo.png") no-repeat;
    cursor: pointer;
    z-index: inherit;
    background-size: contain;
    background-position: center;
    /* position: absolute; */
    left: 4%;
    top: 2%;
  }

  .topBar-item1 {
    grid-column: 2;
    grid-row: 2;
    z-index: inherit;
  }

/* Menu fanciness */
#menuIcon {
  display: inline-block;
  cursor: pointer;
  z-index: 446;
  position: absolute;
  right: 2%;
  top: 5px;
}

.bar1, .bar2, .bar3 {
  width: 28px;
  height: 3px;
  background-color: #fff;
  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);
}


#menu{
  width : 75%;
  height : calc(100% - 40px);
  background-image: linear-gradient(0.38turn, #181818, rgb(27, 27, 27), #242424);
  position: absolute;
  top: 41px;
  right: -75%;
  z-index: 445;
  display: block;
  align-items: center;
  -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;
}

@media screen and (min-width: 400px) {
  #menu {
    width : 70%;
  }
}
@media screen and (min-width: 600px) {
  #menu{
    width : 45%;
  }
}

@media screen and (min-width: 800px) {
  #menu{
    width : 30%;
  }
}

#menuLogo{
  width: 100%;
  height: 22%;
  background: url(./ui/logo-title-catchphrase.png) no-repeat;
  background-size: contain;
  background-position: center;
  margin: 2em 0px 0em 0em;
}

.menu-link{
  color: white;
  font-family: 'Clarendon', Helvetica, Arial, sans-serif;
  font-size: 2vh;
  padding: 0;
  /* margin: 2vh 0 0vh 3vh; */
}
.menu-link a:link{
  color: white;
  font-family: 'Clarendon', Helvetica, Arial, sans-serif;
  font-size: 2vh;
  text-decoration: none;
}

.menu-link p{
  margin: 2vh 0 0vh 3vh;
  display: flex;
  align-items: center;
}

a:visited {
  color: #ffffff;
}

a.menu.hover{
  color: #dddddd;
  text-decoration:underline;
}

.menu-icon{
  color: #9d8264;
  font-size: 2vh;
  font-family: 'Clarendon', Helvetica, Arial, sans-serif;
  grid-column: 2;
  grid-row: 2;
  z-index: 21;
}
.menu-icon p{
  padding: 0;
  margin: 2vh 0 0vh 3vh;;
}

.menu-item1 {
  grid-column: 2;
  grid-row: 3;
  z-index: 21;
}
.menu-item2 {
  grid-column: 2;
  grid-row: 4;
  z-index: 21;
}
.menuButton{
  /* Button css */
  text-align: left;
  outline: none;
  border: none;
  background-color: rgba(0,0,0,0);
  font-family: 'Clarendon', Helvetica, Arial, sans-serif;
}

.menu-item-share {
  position: absolute;
  bottom: 4vh;
  right: 4vh;
}
#menuSocial{
  position: absolute;
  bottom: 7vh;
  left: 7vh;
  transform: translate(-50%, 50%);
  margin: 0;
  width: auto;
  height: auto;
  top: unset;
}

#menu4 p{
  background-image: url("./ui/button_share.png");
  background-repeat:no-repeat;
  background-position:right;
  padding-right:40px;
  background-size: contain;
  display:inline-block;
}

/*Cookie Dialog*/
#cookieDialog{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 51;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4);
  -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;
  transition:opacity 0.25s ease-out;
}

  /*  COOKIE CONSENT */
  .cookie-background{
      position: absolute;
      bottom:13%;
      left: 50%;
      width: 85%;
      max-width: 400px;
      padding: 20px;
      font-family: 'Inter-VariableFont', Helvetica, Arial, sans-serif;
      font-variation-settings: 'wght' 450;

      text-align: center;

      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */

      color: black;
      background-color: white;
      border-radius: 16px ;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
  }

  .cookie-background a:visited{
    color: black;
  }

  .cookie-accept{
      border-radius: 8px;
      width: 100px;
      padding: 4px;
      padding-bottom: 2px;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 8px;
      color: rgb(255, 255, 255);
      font-family: 'Clarendon';
      background-color: rgb(146, 129, 110);
      box-shadow: 0 4px  rgb(126, 111, 93);
  }
  .cookie-decline{
      width: 100px;
      padding: 4px;
      margin: auto;
  }


/*Age Gate Page*/
.ageGatePage{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 48;
  opacity: 1;
  -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;
  transition:opacity 0.25s ease-out;
}
.ageGateBG{
  position: absolute;
  background-image: url("./ui/Distressed-bg.png");
  background-color: hsl(0deg 0% 17%);
  background-position: center;
  background-size: cover ;
  width: 100%;
  height: 100%;
  z-index: inherit;
}

.ageGateGrid{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: inherit;
  display: grid;

                /* Title    Descrp      boxes     flourish    button    remember me  // we use auto to space the elements*/
  grid-template-rows: 13% 13% 0% 8% 9% 14% 0% 5% 0% 10% 2% 5% 0% auto 5%;
  grid-template-columns: 12% 76% 12%;
}

.ageGateGridDomestic{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: inherit;
  display: grid;

                /* Title    Descrp      boxes     flourish    button    remember me  // we use auto to space the elements*/
  grid-template-rows: 13% 8% 1% 15% 9% 21% 1% 5% 1% 10% 2% 10% 1% auto 5%;
  grid-template-columns: 12% 76% 12%;
}

.inputDiv{
  grid-column: 2;
  grid-row: 6;
  display: grid;
  align-content: space-evenly;
  grid-template-columns: auto auto;
  margin-left: 10vw;
  margin-right: 10vw;
  align-items: center;
  justify-items: center;
  -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;
  transition:opacity 0.25s ease-out;
}

.ageGateTitle{
  grid-column: 2;
  grid-row: 4;
  z-index: inherit;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  color: var(--main-color);
  font-family: 'Clarendon';
  font-size: 3.75vw;
  line-height: 5vh;
}

.ageGateDescInvalid{
  grid-column: 2;
  grid-row: 2;
  z-index: inherit;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--main-color);
  font-family: 'Clarendon', 'Times New Roman', Times, serif;
  font-variation-settings: 'wght' 300;
  font-size: 3.25vh;
  line-height: 3.75vh;
  visibility: hidden;
  -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;
  transition: opacity 0.25s ease-out;
}

.ageGateDescYear{
  grid-column: 2;
  grid-row: 2;
  z-index: inherit;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--main-color);
  font-family: 'Clarendon', 'Times New Roman', Times, serif;
  font-variation-settings: 'wght' 300;
  font-size: 3.25vh;
  line-height: 3.75vh;
  visibility: hidden;
  -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;
  transition: opacity 0.25s ease-out;
}
.ageGateYear{
  grid-column: 2;
  grid-row: 6;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: inherit;
  display: grid;
  /* grid-template-columns: 23% auto 23% auto 23% auto 23%; */
  visibility: hidden;
  justify-content: center;
  grid-column-gap: 0.5vw;
  justify-items: center;
}

.ai{ /* age input class */
  height: 50%;
  align-self: center;  
}

.ageGateYear1{
  grid-column: 1;
  grid-row: 1;
  z-index: inherit;
}
.ageGateYear2{
  grid-column: 3;
  grid-row: 1;
  z-index: inherit;
}
.ageGateYear3{
  grid-column: 5;
  grid-row: 1;
  z-index: inherit;
}
.ageGateYear4{
  grid-column: 7;
  grid-row: 1;
  z-index: 26inherit;
}

.ageGateDescMonth{
  grid-column: 2;
  grid-row: 2;
  z-index: inherit;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--main-color);
  font-family: 'Clarendon', 'Times New Roman', Times, serif;
  font-variation-settings: 'wght' 300;
  font-size: 3.25vh;
  line-height: 3.75vh;
  visibility: hidden;
  -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;
  transition: opacity 0.25s ease-out;
}
.ageGateMonth{
  grid-column: 2;
  grid-row: 6;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: inherit;
  display: grid;
  grid-template-columns: 23% auto 23%;
  visibility: hidden;
  align-content: center;
  justify-content: center;
  grid-gap: 1em 0em;
}

.ageGateGoBack{
  display: inline-block;
  background: url("./ui/LeftChevron.png") no-repeat;
  cursor: pointer;
  height: 80%;
  width: 100%;
  margin: auto;
  background-position: right;
 }

.ageGateMonthGoBack{
  grid-column: 1;
  grid-row: 1;
  z-index: inherit;
}

.ageGateMonth1{
  grid-column: 3;
  grid-row: 1;
  z-index: inherit;
}
.ageGateMonth2{
  grid-column: 5;
  grid-row: 1;
  z-index: inherit;
}
.ageGateDescDay{
  grid-column: 2;
  grid-row: 2;
  z-index: inherit;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--main-color);
  font-family: 'Clarendon', 'Times New Roman', Times, serif;
  font-variation-settings: 'wght' 300;
  font-size: 3.25vh;
  line-height: 3.75vh;
  visibility: hidden;
  -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;
  transition: opacity 0.25s ease-out;
}
.ageGateDay{
  grid-column: 2;
  grid-row: 6;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: inherit;
  display: grid;
  visibility: hidden;
  grid-template-columns: 23% auto 23%;
  align-content: center;
  justify-content: center;
  grid-gap: 1em 0em;
}
.ageGateDayGoBack{
  grid-column: 1;
  grid-row: 2;
  z-index: inherit;
  background-color: transparent;
  border: none;
  padding: 0;
 }
.ageGateDay1{
  grid-column: 3;
  grid-row: 1;
  z-index: inherit;
}
.ageGateDay2{
  grid-column: 5;
  grid-row: 1;
  z-index: inherit;
}
.ageGateDigit{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 80%;

  color: rgb(146, 129, 110);
  font-family: 'Clarendon';
  font-variation-settings: 'wght' 500;
  font-size: calc(24px + (80 - 24) * ((100vw - 300px) / (1920 - 300)));

  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f8f8f8;
  resize: none;
  outline: none;
  text-align: center;
}

.ageGateFlourish{
  grid-column: 2;
  grid-row: 8;
  height: 100%;
  width: 65%;
  margin: auto;
  background: url("./ui/19-crimes-logo.png") no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: auto;
  margin-bottom: auto;
}


.ageGateFlourish:after{
  content: "";
  display: block;
  position: relative;
  background: #fff;
  height: 1px;
  margin-left: 80%;
  top: 50%;
}

.ageGateFlourish:before{
  content: "";
    display: block;
    position: relative;
    background: #fff;
    height: 1px;
    top: 50%;
    width: 20%;
}

#ageButton{
  grid-column: 2;
  grid-row: 10;
  /* z-index: inherit; */
  justify-content: center;
  align-items: center;
  pointer-events: none;

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

#ageButton:active {
  transform: translateY(0.5ch) !important;
  -webkit-transform: translateY(0.5ch) !important;
}

.buttonActiveColor{
  background-color: rgb(146, 129, 110) !important;
}

.buttonFailColor{
  background-color: rgb(124, 121, 117) !important;
}

.brown-button{
  background-color: rgb(146, 129, 110);
  border: none;
  color: white;
  margin: auto;
  border-radius: 0.5vh;
  padding: 1vh 4vh;
  text-align: center;
  text-decoration: none;
  font-family: 'Clarendon';
  font-size: 2.5vh;

  box-shadow: 0 4px  rgb(126, 111, 93);
  border: none;
  outline: none;
}

.brown-button:active {
  box-shadow: 0 0px  rgb(95, 85, 72);

  background-color:  rgb(126, 111, 93);
  transform:translateY(4px);
  -webkit-transform: translateY(4px);
}

.ageGateRememberMe {
  grid-column: 2;
  grid-row: 12;
  z-index: inherit;
  display: flex;
  height: 50%;
  width: 100%;
  z-index: auto;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  text-decoration: none;
  font-family: 'Clarendon';
  font-size: 2.5vh;
  white-space: nowrap;
  overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: translateX(-1ch);
  -ms-transform: translateX(-1ch);
  transform: translateX(-1ch);
}

.ageGateRememberMe input {
  position: relative;
  opacity: 0;
  cursor: pointer;
  left: 25px;
  height: 30px;
  width: 30px;
}

.checkmark {
  position: relative;
  pointer-events: none;
  top: 0;
  right: 5px;
  height: 23px;
  width: 23px;
  background-color: #eee;
  pointer-events: none;
}

.checkmark:after {
  content: "";
  /* position: absolute; */
  display: none;
}

.ageGateRememberMe input:checked ~ .checkmark:after {
  display: block;
}

.ageGateRememberMe .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg) translate(8px, -3px);
  -ms-transform: rotate(45deg) translate(8px, -3px);
  transform: rotate(45deg) translate(8px, -3px);
}

.ageGateRememberMe input:checked ~ .checkmark {
  background-color: rgb(146, 129, 110);
}

.ageGateCheckbox {
  color: white;
}

#policy-link{
  text-align: center;
  bottom: 5%;
  left: 50%;
  width: 85%;
  position: absolute;
  color: rgb(255, 255, 255);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

#policy-link a:-webkit-any-link{
  color: rgb(255 255 255 / 70%);
}

/* Selection Box */
.dropdownTitle{
  color:var(--main-color);
  text-align: center;
  font-family: 'Clarendon';
  font-size: 7vw;
  margin: 1vh 0vh;
}

.dropdownTitlePos{
  grid-column: 1/4;
  grid-row: 1;
}

.custom-select {
  position: relative;
  font-family: Arial;
  /* margin: 1em 0 0 0; */
}

.custom-select::after {
  position: absolute;
  top: 24%;
  right: 1.5vw;
  content: " ";
  background-image: url(../ui/arrow.png);
  height: 50%;
  font-size: 5vw;
  display: flex;
  pointer-events: none;
  font-family: serif !important;
  width: 23%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.selectParent{
font-family: Arial;
border:none;
border-radius: 1px;
color: #ffffff;
text-align: center;
background: #a1a1a1cc;
outline: #d4720061;
outline-style: solid;
outline-width: 1px;
padding: 6px;
padding-left: 6vw;
padding-right: 9vw;
font-family: 'Clarendon';
font-size: 7vw;
-webkit-appearance: none;
}

.selectParent:focus-visible{
  outline:none;
}

.selectParent.scrollStyle::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.selectParent.scrollStyle::-webkit-scrollbar-track {
  border: rgb(180, 180, 180);
  background-color: #ff653600;
}

.selectParent.scrollStyle::-webkit-scrollbar-thumb {
  background-color: #b0895e;
  border-radius: 27px;
}


.selection{
color: #ffffff;
text-align: center;
/* background: #a1a1a1; */
outline: #d4720061;
outline-style: solid;
outline-width: 1px;
padding: 21px;

}

.monthSelect{
  grid-column: 2;
  grid-row: 2;
}

.daySelect{
  grid-column: 2;
  grid-row: 2;
}

#dayDropdown{
  padding-left: 12vw;
  padding-right: 13vw;
}

/* end selection box */


/* =============================== selector page ============================== */

.selectorPage{
  background: linear-gradient(#262630, #101010);
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: auto;
  grid-template-rows: 32vh 1.5em auto;
  overflow: hidden;
}

#logo19c{
  grid-column: 1;
  object-fit: contain;
  width: 60%;
  align-self: baseline;
  padding-top: 10vh;
}

.selectorTitle{
  font-family: Clarendon;
  color: white;
}

.selectorBack{
  height: 2em;
  display: block;
  position: absolute;
  top: 50px;
  left: 10px;
  background-color: transparent;
  border: none;
}

#selectorBack img{
  height: 100%;
}

#selectorTitle{
  grid-column: 1;
  justify-self: start;
  padding-left: 3em;
}

.selectorPageSwiper{
  grid-row: 3;
  grid-column: 1;
}

.selectorVarSwiper19c{
  height: 90% !important;
  align-self: baseline;
}

.selectorSwiper19c{
  height: 90% !important;
  align-self: baseline;
}

.selectorSwiper19c2{
  height: 90% !important;
  align-self: baseline;
}

.selectorButton{
  height: 8em;
  max-height: 12vh;
  width: 42vw;
  max-width: 12em;
  border: none;
  border-radius: 10px;
  padding: 0px;
}

.swiper {
  width: 100%;
  height: 100%;
  position: absolute !important;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  height: 14vh !important;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0px;
  margin: 0px;
  border-radius: inherit;
}

.category-slide {
  text-align: center;
  font-size: 18px;
  height: 35% !important;
  display: grid;
  grid-template-columns: auto;
  align-items: center;
  justify-items: center;
}

.category-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0px;
  margin: 0px;
  border-radius: inherit;
}

.categoryButton{
  height: 10em;
  width: 20em;
  border: none;
  border-radius: 10px;
  padding: 0px;
}

.categoryButton p {
  position: relative;
  top: -50%;
  transform: translate(0px, -1.5em);
  color: white;
  font-family: 'Clarendon';
  font-size: 2em;
  filter: drop-shadow(1px 4px 2px black);
}

/* ===================== screenshot Overlay ================== */
#screenshotPage{
    z-index: 10;
}

.screenshotOverlay{
    height: 100%;
    background-image: url("./ui/cameraFrame.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#ssBuffer{z-index: -1;}

.flash{
    z-index: 100;
}

.confirmSSGrid{
    display: grid;
    position: absolute;
    height: 21%;
    width: 80%;
    left: 10%;
    bottom: 0;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
}

#snapshotDesc{
  position: absolute;
  top: 80%;
  left: 50%;
  width: 80%;

}

.snapshotText{
  font-family: 'Clarendon', Times, serif;
  color: var(--main-black);
  grid-column: 1/3;
  align-self: center;
  text-align: center;
}

.ssButton{
    font-family: 'Clarendon', Times, serif;
    height: 7vh;
    max-height: 60px;
    margin: auto;
    width: 28vw;
    max-width: 220px;
    border: none;
    background-color: var(--main-black);/* 170A0C */
    color: white;
    font-size: 2.3vh;
}

/* scan overlay */
.switchCameraButton{
  position: absolute;
  bottom: 3vh;
  left: 3vh;
  height: 4vh;
  width: 4vh;
  max-height: 100px;
  max-width: 100px;
  background-image: url(./ui/CameraSwitch.svg);
  border: none;
  background-color: transparent;
  background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.shareButton{
  position: absolute;
  bottom: 2vh;
  right: 2vh;
  height: 4vh;
  width: 4vh;
  max-height: 100px;
  max-width: 100px;
  background-image: url(./ui/button_share.png);
  border: none;
  z-index: 25;
  background-color: transparent;
  background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#reticle{
  display: grid;
  grid-template-columns: auto 65% auto ;
  grid-template-rows: 5% auto 55% auto;
  /* background: url("./ui/Target-UI.png") no-repeat;
  background-position: center;
  background-size: cover; */
  transform: translate(-50%, -50%);
  -ms-transform: translate( -50%, -50%);
  top: 50%;
  left: 50%;
  width: 101%;
  height: 101%;
  position: absolute;
  z-index: 10;
  pointer-events: none;

  opacity: 0;
  -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;
  transition:opacity 0.25s ease-out;
}

.reticle-UI{
  /* background: url("./ui/Target-UI.png") no-repeat; */
  background:
  linear-gradient(to right, white 4px, transparent 4px) 0 0,
  linear-gradient(to right, white 4px, transparent 4px) 0 100%,
  linear-gradient(to left, white 4px, transparent 4px) 100% 0,
  linear-gradient(to left, white 4px, transparent 4px) 100% 100%,
  linear-gradient(to bottom, white 4px, transparent 4px) 0 0,
  linear-gradient(to bottom, white 4px, transparent 4px) 100% 0,
  linear-gradient(to top, white 4px, transparent 4px) 0 100%,
  linear-gradient(to top, white 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
  /* opacity: 0.3; */
  grid-column: 2;
  grid-row:3;
  z-index: 24;
}

.reticle-shadeT{
  background-color: #242424;
  opacity: .4;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row:2;
  z-index: 24;
}
.reticle-shadeL{
  background-color: #242424;
  opacity: .4;
  grid-column:1;
  grid-row:3;
  z-index: 24;
}
.reticle-shadeR{
  background-color: #242424;
  opacity: .4;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row:3;
  z-index: 24;
}
.reticle-shadeB{
  background-color: #242424;
  opacity: .4;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row:4;
  z-index: 24;
}

.reticle-text{
  position: absolute;
  text-align: center;
  font-size: 5vw;
  font-family: 'Clarendon', Arial, Helvetica, sans-serif;
  top: 81%;
  width: 103%;
  height: 100%;
  color: white;
  z-index: 25;
}


.copyright{
  position: absolute;
  bottom: 1%;
  color: white;
  text-align: center;
  font-size: 1.8vw;
  z-index: 25;
  width: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Preview Overrides */
#previewContainer{
    z-index: 1 !important;
}
#videoPreview, #imagePreview{
    max-width: 100vw !important;
    max-height: 100vh !important;
}


/* ============= swiper =============== */
.swiperContainer{
  bottom: 1%;
  /* left: 5%; */
  width: 90%;
  max-width: 30em;
  background-color: rgba(165, 42, 42, 0);
  position: fixed;
  height: 20vmin;
  max-height: 10em;
  bottom: 3vmin;
  -webkit-user-select: none;
  user-select: none;
}

.filterIcon{
  position: relative;
  height: 100%;
  transform: translate(-50%, -50%) scale(0.6) !important;
  transition: transform 0.25s ease-in-out ;
}





.snapshot-container {
  position: fixed;
  width: 20vmin;
  height: 20vmin;
  max-width: 10em;
  max-height: 10em;
  bottom: 3vmin;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  transition: 0.5s opacity;
}

#snapshot-button {
  display: block;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  position: absolute;
  background: var(--main-black);
  border-radius: 50%;
  color: transparent;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
  transform: scale(0.6);
  transition: 0.3s border-radius, 0.3s transform;
  width: 100%;
  height: 100%;
}

.progress-container {
  display: block;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.9);
  transition: 0.3s transform, 0.3s opacity;
}

.progress-track, .progress-bar, .loading-circle {
  fill: transparent;
  stroke-width: 3;
}

.progress-track {
  stroke: var(--main-black) !important;
}

.progress-bar {
  opacity: 0;
  transition: 0;
  transform-origin: 50% 50%;
  stroke: var(--main-black);
  transform: rotate(-90deg);
  stroke-dasharray: 100.531 100.531;
  stroke-dashoffset: 100;
}

.recording .progress-container, .loading .progress-container {
  opacity: 1;
  transform: scale(1);
}

.recording .progress-track, .loading .progress-track {
  transition: 0.8s stroke;
  stroke: #fff5;
}

.recording .progress-bar {
  opacity: 1;
}

.active #snapshot-button {
  transform: scale(0.5);
}

.recorder-container{
  position: fixed;
  width: 20vmin !important;
  height: 20vmin !important;
  max-width: 10em;
  max-height: 10em;
  bottom: 3vmin;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  transition: 0.5s opacity;
}

#recorder-button {
  background: var(--main-black) !important;
}

.active:not(.fixed-mode) #snapshot-button {
  background: #fff5;
}

.fixed-mode #snapshot-button {
  border-radius: 15%;
  transform: scale(0.42);
}

.flash-element {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: white;
  opacity: 0;
  transition: 0.6s opacity;
  pointer-events: none;
  z-index: 40;
}

.flash-element.flashing {
  transition: 0s opacity;
  opacity: 1;
  pointer-events: auto;
  z-index: 100;
}

.loading-circle {
  stroke-dasharray: 25 25 25 25;
  stroke-dashoffset: 0;
  stroke: var(--main-black);
  opacity: 0;
  transform-origin: 50% 50%;
}

@keyframes record-button-spin {
  0% {
  transform: rotate(-90deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.loading .loading-circle {
  animation: record-button-spin 1.1s linear infinite both;
  opacity: 1;
}

.fade-container {
  opacity: 0;
  pointer-events: none;
} 



/* snapshot Button */
.progress-track {
    stroke: var(--main-black);
}

#snapshot-button{
    background: var(--main-black)
}

@keyframes flash {
    0% {
        background-color: white;
    }
    30% {
        background-color: white;
    }
    100% {
        background-color: transparent;
    }
  }

.walkthroughPage{
  background-image: url(./ui/Distressed-bg.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-color: #222223;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}

.wtfilter{
  z-index: inherit;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
}

.wtButton{
  position: absolute;
  top: 76%;
  background: #4B4B4B;
  color: white;
  border: none;
  padding: 0.7em 1.6em;
  font-size: 1.5em;
  border-radius: 10px;
  filter: drop-shadow(4px 4px 4px black);
}

.wtText{
  font-size: 1.2em;
  color: white;
  max-width: 400px;
  width: 65%;
  top: 22%;
  text-align: center;
}

.wtImg{
  max-width: 400px;
  height: 25%;
  max-height: 400px;
  position: absolute;
  top: 49%;
  border-radius: 10px;
  filter: drop-shadow(4px 4px 4px black);
}

.wtPurchase{
  position: absolute;
  text-align: center;
  top: 90%;
}
.wtPurchase a:link{
  color: white;
}
.wtPurchase a:hover{
  color: white;
}
.wtPurchase a:visited{
  color: white;
}
.wtPurchase a:active{
  color: white;
}


/* =============================== popup page ============================== */

.popupPage{
  position: absolute;
  top: 45%;
  max-width: 300px;
  max-height: 420px;
  width: 70%;
  height: 49%;
  background-color: white;
  border-radius: 10px;
  filter: drop-shadow(2px 4px 6px rgba(1,1,1,0.8));
}

.popupPage img{
  border-radius: 10px;
  width: -webkit-fill-available;
  margin: 1.2em;
}

.popupPage p{
  text-align: center;
  margin: 0 1em;
}

.popupPage button{
  position: relative;
  background-color: #4B4B4B;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.6em 3em;
}


/* ----------------------------- */
  /*    8thwall error override     */
  /* ----------------------------- */

  .desktop-message span{
    display: none;
  }
  .desktop-message:after{
    font-family: 'Clarendon', Helvetica, Arial, sans-serif !important;
    position: absolute;
    left: 25%;
    top: 10%;
    width: 600px;
    content: "To view, open your mobile devices camera and scan the code below, or open a web browser and visit experience.19crimes.com/snoopcaligold";
    color: rgb(172, 152, 130);
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
  }

  #qrcode{
    left: 25%;
    top: calc(10% + 160px);
    width: 20vh !important;
    height: 20vh !important;
    position: absolute;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    background-image: url("./ui/SnoopCaliGold.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  #qrcode svg{
      display: none !important;
  }

  .desktop-hint span{
    visibility: hidden;
    font-family: 'Clarendon', Helvetica, Arial, sans-serif !important;
    font-variation-settings: 'wght' 200;
    width: 500px;
    left: 25%;
    top: calc(10% + 160px + 260px);
    position: absolute;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
  }

  .desktop-hint{
    background-image: url("./ui/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 300px;
    left: 25%;
    top:  calc(10% + 160px + 25vh);
    position: absolute;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    height: 15vh;
  }

  .poweredby-img{
      visibility: hidden;
  }


  #almostthereContainer{
    background: linear-gradient(0.38turn, #181818, rgb(27, 27, 27), #242424);
    background-image: url("./ui/desktopBG.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(12, 12, 12) !important;
    z-index: 1111111 !important;
  }

  /* .desktop-home-link{
    font-family: 'Inter-VariableFont', Helvetica, Arial, sans-serif !important;
    font-variation-settings: 'wght' 300;
    background-color: none;
    background: linear-gradient(0.38turn,  rgb(168, 137, 101),  rgb(146, 129, 110), rgb(128, 114, 98)) ;
  } */


  stop{
    stop-color: #242424;
  }