@font-face {
    font-family: 'Palo Compressed Semibold';
    src: url('fonts/subset-Palo-CompressedSemibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'NeueHaasUnicaPro Medium';
    src: url('fonts/subset-NeueHaasUnicaPro-Medium.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Palo Condensed bold';
    src: url('fonts/subset-Palo-CondensedBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size: 50%;
}
sub { 
  top: 0.4em; 
}

html, body {
  width:300px;
  height:600px;
  margin: 0;
}

#main,
#background {
  position:absolute;
  left:0px;
  top:0px;
  width:300px;
  height:600px;
  background-color: #007243;
}

#main {
  overflow:hidden;
}

#pack-container-mint {
  position:absolute;
  left:0px;
  top:40px;
  width:300px;
  height:400px;
  overflow:visible;
  /* background-color: #ff6100; */
}

#text-container-frame-1, #text-container-frame-2 {
  left:0;
  top:270px;
  width: 300px;
  height: 300px;
}


#burst {
  left:0;
  top:40px;
  width:300px;
  height:400px;
}

#pack {
  left:114px;
  top:46px;
  width:89px;
  height:256px;
}

#mint-left, #mint-left-top {
  left:58px;
  top:193px;
  width:90px;
  height:111px;
}

#mint-right {
  left:190px;
  top:129px;
  width:63px;
  height:54px;
}


#glares {
  left:188px;
  top:61px;
  width:25px;
  height:55px;
}


#timer, #timer-outer {
  left:210px;
  top:36px;
  width:82px;
  height:85px;
}

#counter {
    position:absolute;
    left:238px;
    top:62px;
    width:10px;
    height:10px;
    font-family: 'Palo Condensed bold';
    font-size: 25px;
    color:#50e2be;
    text-align: center;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}


.hidden {
  opacity: 0;
  visibility: hidden;
}

.absolute {
  position:absolute;
  top: 0px;
  left: 0px;
  height: auto;
}

.full-width {
  width: 300px;
  height: auto;
}

.copy {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  font-size: 35px;
  line-height: 33px;

  color: #ffffff;
}

.palo-compressed-semibold {
  font-family: 'Palo Compressed Semibold';
}

 .neue-haas-med {
  font-family: 'NeueHaasUnicaPro Medium';
}

.text-center {
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.copy-legal {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  top: 552px;
  left: 17px;
  font-size: 9px;
  text-align: left;
  line-height: 9px;
  color:#ffffff;
}

.underlined {
  /* border-bottom: 1px solid #ffffff;
  padding: 0 0 0 0; */
    text-decoration: underline;
    text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.tick {
  left:218px;
  top:35px;
  width:82px;
  height:85px;
  transform: translateZ(0);
  will-change: clip-path;
  backface-visibility: hidden;
}


#tickContainer {
  left:-8px;
  top:1px;
  perspective: 1000px; /* Add perspective to parent */
}

 #tick-1 {
clip-path: inset(18% 46% 73% 47%);
-webkit-clip-path: inset(18% 46% 73% 47%);
/* background-color: red; */
}

#tick-2 {
clip-path: inset(18% 38% 71% 54%);
-webkit-clip-path: inset(18% 38% 71% 54%);
/* background-color: blue; */
}

#tick-3 {
clip-path: inset(20% 29% 67% 62%);
-webkit-clip-path: inset(20% 29% 67% 62%);
/* background-color: orange; */
}

#tick-4 {
clip-path: inset(30% 22% 61% 67%);
-webkit-clip-path: inset(30% 22% 61% 67%);
/* background-color: green; */
}

#tick-5 {
clip-path: inset(37% 17% 55% 71%);
-webkit-clip-path: inset(37% 17% 55% 71%);
/* background-color: black; */
}

#tick-6 {
clip-path: inset(47% 15% 47% 72%);
-webkit-clip-path: inset(47% 15% 47% 72%);
/* background-color: purple; */
}

#tick-7 {
clip-path: inset(55% 15% 36% 72%);
-webkit-clip-path: inset(55% 15% 36% 72%);
/* background-color: red; */
}

#tick-8 {
clip-path: inset(60% 21% 29% 68%);
-webkit-clip-path: inset(60% 21% 29% 68%);
/* background-color: yellow; */
}

#tick-9 {
clip-path: inset(67% 28% 22% 64%);
-webkit-clip-path: inset(67% 28% 22% 64%);
/* background-color: blue; */
}

#tick-10 {
clip-path: inset(71% 37% 17% 55%);
-webkit-clip-path: inset(71% 37% 17% 55%);
/* background-color: green; */
}

#tick-11 {
clip-path: inset(71% 45% 17% 47%);
-webkit-clip-path: inset(71% 45% 17% 47%);
/* background-color: black; */
}

#tick-12 {
clip-path: inset(71% 55% 17% 37%);
-webkit-clip-path: inset(71% 55% 17% 37%);
/* background-color: purple; */
}

#tick-13 {
clip-path: inset(67% 60% 22% 28%);
-webkit-clip-path: inset(67% 60% 22% 28%);
/* background-color: orange; */
}

#tick-14 {
clip-path: inset(63% 68% 29% 22%);
-webkit-clip-path: inset(63% 68% 29% 22%);
/* background-color: red; */
}

#tick-15 {
clip-path: inset(55% 70% 38% 17%);
-webkit-clip-path: inset(55% 70% 38% 17%);
/* background-color: green; */
}

#tick-16 {
clip-path: inset(47% 70% 45% 17%);
-webkit-clip-path: inset(47% 70% 45% 17%);
/* background-color: yellow; */
}

#tick-17 {
clip-path: inset(38% 70% 53% 17%);
-webkit-clip-path: inset(38% 70% 53% 17%);
/* background-color: black; */
}

#tick-18 {
clip-path: inset(30% 69% 59% 22%);
-webkit-clip-path: inset(30% 69% 59% 22%);
/* background-color: orange; */
}

#tick-19 {
clip-path: inset(23% 62% 67% 28%);
-webkit-clip-path: inset(23% 62% 67% 28%);
/* background-color: purple; */
}

#tick-20 {
clip-path: inset(18% 55% 72% 36%);
-webkit-clip-path: inset(18% 55% 72% 36%);
/* background-color: red; */
}


#frame-1,
#frame-2,
#frame-3,
#solid {
  top: 0;
  left: 0;

  width: 300px;
  height: 600px;

  transform-origin: 26% 78%;
}


#text-1, #text-4 {
  top: 127px;
  left: 17px;
}

#text-2 {
  top: 127px;
  left: 17px;
}

#tab-container {
  top:0px;
}

#cta {
	position: absolute;
	left: 17px;
	bottom: 50px;
	width: 135px;
	height: 38px;
	background:#F06432;
	color:white;
	font-family:'Palo Compressed Semibold';
	font-size:28px;
	line-height:36px;
	text-align: center;
	letter-spacing:0.2px;
  border-radius: 4px;
	background-position: "left top";
  }


#bgExit {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 85;
  background-color: rgba(255,255,255,0);
  border:1px solid #000000;
  box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}