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

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: translateY(-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%;
}

/* ============================== 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;
}

.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%;
}

.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: 44%;
  height: 85%;
  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;
  filter: brightness(20);
}

.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%;
  top: 3%;
  height: 10%;
  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: 444;
    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: url(./ui/Distressed-bg.png);
  background-position: center;
  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;
  justify-items: center;
}

@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;
  filter: sepia(100%) saturate(240%) brightness(53%) hue-rotate(320deg);

}

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

}

.menu-link p{
  padding: 0;
  margin: 0;
  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;
  transform: translate(0%, 50%);
    -ms-transform: translate( 0%, 50%);
}
.menu-icon p{
  padding: 0;
  margin: 0;
}

.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;
}

#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;
  float: right;
}

@media only screen and (orientation: landscape){
  #menu{
    grid-template-rows: 20% 7% 7% 7% 7% 7% 5% 5% 5% auto 5% auto 5% 2%;
  }

  .menu-link{
    font-size: 4vh;
  }

  .menu-link a:link{
    font-size: 4vh;
  }
}

/*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-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: 448;
  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% 0% 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% 13% 0% 8% 0% 14% 0% 5% 0% 10% 2% 5% 0% auto 5%;
  grid-template-columns: 12% 76% 12%;
}

.inputDiv{
  grid-column: 2;
  grid-row: 6;
  display: grid;
  align-content: space-evenly;
  justify-content: space-evenly;
  grid-template-columns: auto auto;
  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: #f0f0f0;
  font-family: 'Clarendon', 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: #f0f0f0;
  font-family: 'Clarendon', 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, 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% auto 23% auto 23%;;
  visibility: hidden;
  grid-column-gap: 0.5vw;
  justify-content: center;
}

.ageGateGoBack{
  display: inline-block;
  background: url("./ui/LeftChevron.png") no-repeat;
  cursor: pointer;
  height: 100%;
  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, 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% auto 23% auto 23%;;
  grid-column-gap: 0.5vw;
  justify-content: center;
  
}

.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: 100%;

  color: var(--main-color);
  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 var(--main-color);
  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;
  /* filter: sepia(100%) saturate(4000%) brightness(17%) hue-rotate(150deg); */
}


.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;
}

#ageNoButton{
  background-color: #5C5C5C;
  box-shadow: 0 4px rgba(36, 35, 33, 0.637);
}

#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 5vh;
  text-align: center;
  text-decoration: none;
  font-family: 'Clarendon';
  font-size: 2.5vh;

  filter: drop-shadow(4px 4px 4px black);
  border: none;
  outline: none;
}

.brown-button:active {
  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: white;
  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:white;
  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;
}

.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;
}

@media only screen and (orientation: landscape){
  .ageGateGrid{
    grid-template-rows: auto 1% 1% 15% 9% 21% 1% 5% 1% 10% 2% 10% 1% 2% 5%;
  }
  .ageGateYear{
    grid-gap: 0.2em 0em;
  }

  .ageGateDescYear{
    font-size: 5vh;
  }
  .ageGateDescMonth{
    font-size: 5vh;
  }
  .ageGateDescDay{
    font-size: 5vh;
  }

  .selectParent{
    font-size: 3vw;
  }

  .dropdownTitle{
    font-size: 5vh;
  }

  #policy-link{
    bottom: 0%;
  }
}


/* end selection box */


/* scan overlay */
#scanOverlay{
  z-index: 12;
}


.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: 3vh;
  right: 3vh;
  height: 4vh;
  width: 4vh;
  max-height: 100px;
  max-width: 100px;
  background-image: url(./ui/button_share.png);
  border: none;
  background-color: transparent;
  background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: inherit;
}

/* ===================== Toggle ========================== */

.toggleContainer{
  width: 80px;
    height: 80px;
    bottom: 0em;
    left: 1em;
    position: absolute;
    z-index: inherit;

}

.toggleContainer .bg{
  position: absolute;
  width: -webkit-fill-available;
}

.switch {
  position: absolute;
  display: inline-block;
  top: 43px;
  width: 78px;
  height: 18px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 3px;
  background-color: #ca9834;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #ccc;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ccc;
}

input:checked + .slider:before {
  -webkit-transform: translateX(57px);
  -ms-transform: translateX(57px);
  transform: translateX(57px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* ===================== Tip popup ========================== */

.tipPopup{
  background-color: #18181896;
  position: absolute;
  width: 80%;
  max-width: 450px;
  height: 15%;
  max-height: 200px;
  pointer-events: none;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  align-items: center;
}

.tipPopup p{
  color: white;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  font-size: 1.0em;
  margin: auto;
}

/* ===================== reticle ========================== */

#reticle{
  display: grid;
  grid-template-columns: auto 75% auto ;
  grid-template-rows: 5% auto 60% auto;

  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-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url(./ui/Target-UI.png);
  position: relative;
  grid-column: 2;
  grid-row:3;
  z-index: 24;
  display: grid;
  width: 100%;
  justify-items: center;
  align-items: center;
}

.reticle-shadeT{
  background-color: #242424;
  opacity: 0.5;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row:2;
  z-index: 24;
}
.reticle-shadeL{
  background-color: #242424;
  opacity: 0.5;
  grid-column:1;
  grid-row:3;
  z-index: 24;
}
.reticle-shadeR{
  background-color: #242424;
  opacity: 0.5;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row:3;
  z-index: 24;
}
.reticle-shadeB{
  background-color: #242424;
  opacity: 0.5;
  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;
  filter: drop-shadow(0px 0px 3px rgba(160,160,160,0.6));
}

.leftBottleRet{
  position: absolute;
/*   right: 50%;
  top: 50%; */
  height: -webkit-fill-available;
}

.rightBottleRet{
  position: absolute;
  left: 50%;
  top: 50%;
  height: -webkit-fill-available;
}

.reticle-border{
  position: absolute;
  height: calc(100% - (57px));
  width: 96%;
  bottom: 0%;
  pointer-events: none;
  border: 2vw;
  border-color: white;
  border-style: inset;
  opacity: 0;
}
 
       
.reticle-border-anim{
  animation: border-flash 0.5s linear 1 both;
}
 
       
@keyframes border-flash {
  0% {
    height: calc(100% - (57px));
    width: 96%;
    bottom: 0%;
    opacity: 0;
  }
  10%{opacity: 1;}
  90%{opacity: 0;}
  100% {
    width: 94%;
    height: calc(98% - (57px));
    bottom: 1%;
    opacity: 0;
  }
}


.walkthroughPage{
  background-color: #222223;
  background-image: url(./ui/Distressed-bg.png);
  background-color: hsl(0deg 0% 17%);
  background-position: center;
  background-size: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 15;
}

.wtPage{
  position: absolute;
  height: 100%;
  width: 100%;

}

.wtButton{
  position: absolute;
  top: 68%;
  background: var(--main-brown);
  color: white;
  border: none;
  padding: 0.4em 1.6em;
  width: 40%;
  max-width: 150px;
  font-size: 1.5em;
  border-radius: 10px;
  filter: drop-shadow(4px 4px 4px black);
}

.wtText{
  font-size: min(2.5vh, 1.1em);
  color: white;
  max-width: 400px;
  width: 85%;
  top: 22%;
  text-align: center;
  position: absolute;
}

.wtImg{
  max-width: 400px;
  height: 33%;
  max-height: 400px;
  position: absolute;
  top: 47%;
  border-radius: 10px;
  border-width: 4px;
  border-color: var(--main-color);
  border-style: solid;
  filter: drop-shadow(4px 4px 4px black);
}

#singleWTimage{
  filter: drop-shadow(0px 0px 18px rgba(200,200,200,0.3));
}

#wtSingleBottleButton{
  background: transparent;
  border: none;
  color: white;
  top: 85%;
  text-decoration-line: underline;
  position: absolute;
}

#wtSingleContinueButton{

}

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


@media only screen and (orientation: landscape){
  .wtText{
    font-size: 1em;
  }
  
  .wtButton{
    font-size: 1em;
  }
}




/* =============================== 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%;
    bottom: 15%;
    width: 600px;
    content: "To view, open your mobile devices camera and scan the code below, or open a web browser and visit experience.19crimes/caliblanc";
    color: rgb(255, 255, 255);
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
  }

  #qrcode{
    left: 25%;
    top: 47vh;
    width: 16vh !important;
    height: 16vh !important;
    position: absolute;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    background-image: url("./ui/SnoopCaliBlanc.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-brown.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 300px;
    left: 25%;
    top:10%;

    position: absolute;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    height: 15vh;
  }

  .desktop-hint::after{
    background-image: url(./ui/caliblanc-logo.svg);
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    width: 29vh;
    background-position: center;
    height: 29vh;
    content: "";
    bottom: -24vh;
    position: relative;
    transform: translate(-0%, -50%);
  }

  .poweredby-img{
      visibility: hidden;
  }


  #almostthereContainer{
    background: linear-gradient(0.38turn, #181818, rgb(27, 27, 27), #242424);
    background-image: url("./ui/desktopBG.png");
    background-size: cover;
    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;
  }