.roadmap {
  width: 50vw;
  flex-direction: column;
  flex: none;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: 6px;
  margin-bottom: 6px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.track {
  width: auto;
  height: 1800vw;
  position: relative;
}

.camera {
  width: 100%;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.frame {
  z-index: 1;
  height: 100%;
  display: flex;
  position: relative;
}

.landing {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 25vw;
  display: flex;
  position: relative;
}

.intro-text {
  width: 55vw;
  color: #f7f7ed;
  text-align: center;
  margin-top: 3vw;
  margin-left: auto;
  margin-right: auto;
  font-family: Luckiestguy, sans-serif;
  font-size: 2vw;
  font-weight: 500;
  line-height: 1;
  position: absolute;
  top: auto;
  bottom: 4%;
  left: 0%;
  right: 0%;
}

.intro-text.ver2 {
  bottom: 3%;
}

.bold-italic {
  font-style: italic;
  font-weight: 700;
}

.body {
  background-color: #000;
}

.scroll-indicator {
  z-index: 1;
  width: 2vw;
  height: 2vw;
  position: fixed;
  top: auto;
  bottom: 1%;
  left: auto;
  right: 1%;
}

.sun {
  z-index: -1;
  width: 50vw;
  height: 50vw;
  opacity: 1;
  margin: -42vh auto auto;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.cloud {
  width: 31vw;
  opacity: 1;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  top: 4%;
  bottom: 0%;
  left: 71vw;
  right: 0%;
}

.introduction-title {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 50vw;
  display: flex;
  position: relative;
}

.intro-title {
  z-index: 1;
  width: 53vw;
  color: #f7f7ed;
  text-align: center;
  margin-top: 1vw;
  margin-bottom: 0;
  font-family: Luckiestguy, sans-serif;
  font-size: 3vw;
  font-weight: 400;
  line-height: 1;
  position: static;
  top: 20%;
  bottom: auto;
  left: auto;
  right: auto;
}

.intro-title.ver2 {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 18.5vw;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.text-span {
  padding-right: 1vw;
  font-family: Birds of paradise и personal use only, Georgia, sans-serif;
  font-size: 2vw;
}

.paper-overlay {
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .5;
  mix-blend-mode: normal;
  background-image: url('../images/light-paper-fibers-2_1light-paper-fibers-(2).webp');
  background-position: 50%;
  background-size: 250px;
  flex: none;
  display: block;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.dot-overlay {
  z-index: 1;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  background-image: url('../images/Texure2.png');
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2000px;
  background-attachment: scroll;
  flex: none;
  display: block;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.credits {
  width: 53vw;
  color: #f7f7ed;
  text-align: center;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: Test founders grotesk, sans-serif;
  font-size: 1.3vw;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  top: auto;
  bottom: 1.5%;
  left: auto;
  right: auto;
}

.credits.ver2 {
  text-align: right;
  top: 1%;
  bottom: auto;
  left: auto;
  right: 4.5%;
}

.credits.hide {
  display: none;
}

.full-width-title {
  z-index: 1;
  width: 95vw;
  position: absolute;
  top: -6%;
  bottom: auto;
  left: auto;
  right: auto;
}

.full-width-title.scene-title {
  top: 3vw;
}

.full-width-title.scene-title.mint-now {
  top: 3%;
}

.full-width-title.scene-title.nft-collection {
  top: 0;
}

.full-width-title.scene-title.scene6 {
  display: none;
}

.card {
  height: 90vh;
  display: none;
  position: absolute;
}

.card.benefits-bg {
  display: block;
}

.introduction-card {
  width: 50vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 50vw;
  display: flex;
  position: relative;
}

.nft-title {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  margin-right: 80vw;
  display: flex;
  position: relative;
}

.logo {
  z-index: 1;
  width: 92vw;
  max-height: 60vh;
  margin-bottom: 1vw;
  position: static;
  top: 3%;
  bottom: auto;
  left: auto;
  right: auto;
}

.logo.ver2 {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 1%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.logo.hide {
  margin-top: -20vw;
  display: none;
}

.intro-card {
  width: 64vh;
  height: 90vh;
  background-color: #f7f7ed;
  border-radius: 2vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 4rem;
  display: flex;
  position: relative;
}

.intro-card.benefits {
  z-index: 2;
  width: 85vh;
  background-color: rgba(0, 0, 0, 0);
}

.intro-card.benefits-back {
  z-index: 1;
  width: 85vh;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
}

.intro-card.stages {
  z-index: 1;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.bone {
  height: 13vh;
  position: relative;
}

.bone.leader {
  width: auto;
  height: auto;
  max-width: 22vw;
}

.bone.leader.custom-hover {
  transition: all .5s cubic-bezier(.25, .46, .45, .94);
  transform: rotate(-2deg);
}

.bone.leader.custom-hover:hover {
  transform: scale(1.05)rotate(4deg);
}

.button {
  height: 15vh;
  flex: none;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  position: relative;
  transform: rotate(-2deg);
}

.button:hover {
  transform: scale(1.05)rotate(4deg);
}

.button.minus-top {
  cursor: pointer;
  margin-top: -1.5vh;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.button.minus-top:hover {
  transform: scale(1.05)rotate(4deg);
}

.button.minus-top.hover-none {
  cursor: default;
  transition-property: none;
}

.button.minus-top.hover-none:hover {
  transform: rotate(-2deg);
}

.button.minus-top.footer {
  margin-top: -5vh;
}

.button.minus-top.leader {
  height: 10vh;
  margin-top: 0;
  position: absolute;
  top: auto;
  bottom: 2%;
  left: 0%;
  right: 0%;
}

.button.minus-top.leader._1 {
  transition-property: none;
  transform: none;
}

.button.minus-top.leader._1:hover {
  transform: none;
}

.button.space-top {
  cursor: pointer;
  margin-top: 2vh;
  margin-bottom: 1vh;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.button.space-top:hover {
  transform: scale(1.05)rotate(4deg);
}

.button.from-bottom {
  z-index: 10;
  max-width: 30rem;
  cursor: pointer;
  flex: 0 auto;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  position: absolute;
  top: auto;
  bottom: 12vh;
  left: 0%;
  right: 0%;
  transform: rotate(-2deg);
}

.button.from-bottom.hover-none {
  cursor: default;
  transition-property: none;
}

.button.from-bottom.hover-none:hover {
  transform: rotate(-2deg);
}

.button.from-bottom.footer {
  margin-top: -5vh;
}

.text-block {
  color: #f7f7ed;
  margin-top: 4px;
  font-family: Luckiestguy, sans-serif;
  font-size: 3vh;
  font-weight: 400;
  line-height: 3vh;
  position: absolute;
}

.text-block.yellow {
  color: #eea942;
  font-size: 3vh;
  line-height: 3vh;
}

.text-block.watch-video {
  font-family: Luckiestguy, sans-serif;
  font-size: 3.2vh;
  font-weight: 400;
}

.text-block.phase-one {
  font-family: Luckiestguy, sans-serif;
  font-size: 3vh;
}

.card-text {
  color: #1e1e1e;
  letter-spacing: .4vh;
  font-family: Test founders grotesk, sans-serif;
  font-size: 2.5vh;
  font-weight: 500;
  line-height: 2.5vh;
}

.card-text.benefits {
  max-width: 36vw;
  text-align: center;
  text-transform: uppercase;
  font-size: 2.3vh;
  line-height: 2.3vh;
  position: relative;
}

.card-text.benefits.back {
  max-width: 44vh;
}

.card-text.stages {
  max-width: 50vh;
  text-align: center;
  letter-spacing: .2vh;
  margin-top: 0;
  margin-bottom: 2vh;
  padding-left: 2vh;
  font-family: Luckiestguy, sans-serif;
  font-size: 1.9vh;
  font-weight: 400;
}

.card-text.stages.stage-3 {
  text-align: center;
  padding-left: 0;
}

.card-text.stages.stage-4 {
  text-align: center;
  margin-top: 2vh;
  padding-left: 0;
}

.card-text.hide {
  display: none;
}

._8888 {
  height: 20vh;
}

.small-card-text {
  letter-spacing: .2vh;
  margin-top: -2vh;
  font-family: Test founders grotesk, sans-serif;
  font-size: 2vh;
  font-weight: 500;
  line-height: 2vh;
  transform: translate(7vh);
}

.supply {
  height: 20vh;
  margin-top: -3.5vh;
  position: relative;
}

.nft-column {
  grid-row-gap: 3vh;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nft {
  width: 23vw;
  height: 27vh;
  border-radius: 1vh;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.nft-grid-container {
  z-index: 2;
  width: 95vw;
  height: 60vh;
  grid-column-gap: 3vh;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.nft-grid-container.inside-popup {
  margin-bottom: 5vh;
}

.nft-image {
  width: 100%;
  height: 100%;
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-3_1Screenshot 2022-10-05 at 14.58 3.webp');
  background-position: 50%;
  background-size: cover;
  border-radius: 10px;
  flex: 0 auto;
  position: relative;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.nft-image._02 {
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-9_1Screenshot 2022-10-05 at 14.58 9.webp');
}

.nft-image._03, .nft-image._01 {
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-3-2_1Screenshot 2022-10-05 at 14.58 3-2.webp');
}

.nft-image._04 {
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-9_1Screenshot 2022-10-05 at 14.58 9.webp');
}

.nft-image._05 {
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-8_1Screenshot 2022-10-05 at 14.58 8.webp');
}

.nft-image._06 {
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-10_1Screenshot 2022-10-05 at 14.58 10.webp');
}

.nft-image._07 {
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-8_1Screenshot 2022-10-05 at 14.58 8.webp');
}

.nft-image._08 {
  background-image: url('../images/Screenshot-2022-10-05-at-14.58-10_1Screenshot 2022-10-05 at 14.58 10.webp');
}

.sand-sea {
  z-index: 2;
  width: 1800vw;
  max-width: none;
  position: relative;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.scrolling-background {
  width: 1800vw;
  height: 100vh;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20vh;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.sky {
  z-index: -1;
  width: 1800vw;
  max-width: none;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.city {
  width: 84vw;
  max-width: none;
  margin-left: 40vw;
  position: relative;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.background-frame {
  height: 100%;
  display: block;
  position: absolute;
}

.tree-frame {
  height: 100%;
  display: flex;
  position: absolute;
}

.overlay {
  width: 1800vw;
  height: 100%;
  background-color: rgba(0, 0, 0, .1);
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.image {
  height: 30vw;
  max-width: none;
  margin-top: 0;
  margin-left: -2vw;
}

.scrolling-background-copy {
  width: 1800vw;
  height: 100vh;
  grid-column-gap: 150vw;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.city-container {
  height: 32vh;
  align-items: flex-end;
  display: flex;
  position: fixed;
}

.cloud-2 {
  width: 31vw;
  opacity: 1;
  margin-bottom: auto;
  margin-right: auto;
  position: fixed;
  top: 4%;
  bottom: 0%;
  left: -10vw;
  right: 0%;
}

.poodle-chair-umbrella_img {
  z-index: 1;
  width: 36vw;
}

.golden-chair_img {
  width: 30vw;
}

.landing-img-container {
  width: 100%;
  height: 50vh;
  margin-top: 10rem;
  position: absolute;
}

.beach-chair-umbrella_img {
  width: 31vw;
  position: absolute;
  top: -19.3vw;
  bottom: auto;
  left: 47%;
  right: auto;
}

.beach-chair-umbrella_img.hide {
  display: none;
}

.choco-lab-swimming_img {
  width: 23vw;
  position: absolute;
  top: 36vw;
  bottom: auto;
  left: auto;
  right: 14%;
}

.corgi_img {
  width: 16vw;
}

.corgi-wrap {
  width: 16vw;
  position: absolute;
  top: 5.5vw;
  bottom: auto;
  left: auto;
  right: 9%;
}

.frisbee_img {
  width: 4vw;
  position: absolute;
  top: -4vw;
  left: -7%;
}

.chihuahua_img {
  width: 9.9vw;
  position: absolute;
  top: 8vw;
  bottom: auto;
  left: 4%;
  right: auto;
}

.chihuahua_img.ver2 {
  top: 3.8vw;
}

.lab_img {
  width: 13vw;
  position: absolute;
  top: 12.4vw;
  bottom: auto;
  left: 13%;
  right: auto;
}

.lab_img.ver2 {
  left: 10%;
}

.bulldog_img {
  width: 13vw;
  position: absolute;
  top: 6vw;
  bottom: auto;
  left: 25.5%;
  right: auto;
}

.bulldog_img.ver2 {
  top: 8vw;
}

.husky_img {
  width: 20vw;
  position: absolute;
  top: 1vw;
  bottom: auto;
  left: 51%;
  right: auto;
}

.palm-tree_img {
  height: 30vw;
  max-width: none;
  margin-top: 0;
  margin-left: -2vw;
}

.palm-tree-2_img {
  height: 20vw;
  max-width: none;
  margin-top: 0;
  margin-left: 14vw;
  position: absolute;
  top: 6vw;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.intro-img-container {
  width: 100%;
  height: 50vh;
  margin-top: 10rem;
  position: relative;
}

.sand-castle-wrap {
  width: 20vw;
  position: absolute;
  top: 7vw;
  bottom: auto;
  left: 12%;
  right: auto;
}

.sand-castle_img {
  width: 20vw;
}

.orange-bucket_img {
  width: 11vw;
  position: absolute;
  top: -1vw;
  bottom: auto;
  left: -10%;
  right: auto;
}

.red-shovel_img {
  width: 11vw;
  position: absolute;
  top: 5vw;
  bottom: auto;
  left: -30%;
  right: auto;
}

.blue-shovel_img {
  width: 7vw;
  position: absolute;
  top: auto;
  bottom: 4.5vw;
  left: auto;
  right: -24%;
}

.pink-bucket_img {
  width: 13vw;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  right: -65%;
}

.bulldog2_img {
  width: 7.8vw;
  position: absolute;
  top: 4vw;
  bottom: auto;
  left: 33%;
  right: auto;
}

.beach-ball_img {
  width: 9.5vw;
  position: absolute;
  top: 11vw;
  bottom: auto;
  left: auto;
  right: 40%;
}

.dachshund-beach-chair-umbrella_img {
  z-index: 1;
  width: 35vw;
  position: absolute;
  top: -18vw;
  bottom: auto;
  left: auto;
  right: 18%;
}

.brown-lab-beach-chair_img {
  width: 31vw;
}

.great-dane_img {
  width: 9.5vw;
  position: absolute;
  top: 16vw;
  bottom: auto;
  left: auto;
  right: 16%;
}

.green-bucket_img {
  width: 12.7vw;
  position: absolute;
  top: 18vw;
  bottom: auto;
  left: auto;
  right: 23%;
}

.shark_img {
  width: 23vw;
  position: absolute;
  top: 38vw;
  bottom: auto;
  left: auto;
  right: 9%;
}

.scuba-dogs_img {
  width: 40vw;
  position: absolute;
  top: 30vw;
  bottom: auto;
  left: 26%;
  right: auto;
}

.more-than_img {
  width: 34vw;
  margin-top: -4vw;
}

.card-text-large {
  color: #1e1e1e;
  letter-spacing: .4vh;
  font-family: Luckiestguy, sans-serif;
  font-size: 9.5vh;
  font-weight: 400;
  line-height: 1.4;
}

.card-text-large.minus-vh {
  margin-top: -4vh;
}

.card-text-large.minus-vh.attributes {
  font-size: 7vh;
}

.card-text-large.stage-3 {
  font-size: 6.7vh;
}

.card-text-large.stage-3.hide {
  display: none;
}

.dog-breeds_img {
  width: 35vw;
  margin-bottom: 1vw;
}

.scene3-pre-nft {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 80vw;
  display: flex;
  position: relative;
}

.frame-img-container {
  width: 100%;
  height: 50vh;
  margin-top: 10rem;
  position: relative;
}

.beach-chair-chihuahua_img {
  width: 30vw;
}

.poodle-donkey_img {
  width: 25vw;
  position: absolute;
  top: -7vw;
  bottom: auto;
  left: auto;
  right: 5%;
}

.great-dane-swimming_img {
  width: 12.8vw;
  position: absolute;
  top: 25vw;
  bottom: auto;
  left: auto;
  right: 36%;
}

.golden-brown-retrievers_img {
  z-index: 1;
  width: 18.3vw;
  position: absolute;
  top: 7vw;
  left: 6%;
}

.art-easel-wrap {
  z-index: 1;
  width: 12vw;
  position: absolute;
  top: 2vw;
  bottom: auto;
  left: 23%;
  right: auto;
}

.art-easel_img {
  width: 12vw;
}

.piant-buckets_img {
  width: 15vw;
  position: absolute;
  top: auto;
  bottom: -10%;
  left: 9%;
  right: auto;
}

.paint-brush_img {
  width: 4.8vw;
  position: absolute;
  top: -15%;
  bottom: auto;
  left: -37%;
  right: auto;
}

.pug-wrap {
  width: 12vw;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 78%;
  right: auto;
}

.pug-paining_img {
  width: 12vw;
}

.dogs-watching_img {
  width: 19vw;
  position: absolute;
  top: 9.5vw;
  bottom: auto;
  left: 44%;
  right: auto;
}

.chair-umbrella_img {
  z-index: 1;
  width: 36vw;
}

.two-sol_img {
  z-index: 1;
  width: 11.8vw;
  position: absolute;
  top: -20%;
  bottom: auto;
  left: auto;
  right: -16%;
}

.two-sol_img.show-mobile-portait {
  display: none;
}

.popup-modal {
  z-index: 1;
  background-color: rgba(0, 0, 0, .64);
  display: none;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.popup-modal-container {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5rem;
  display: flex;
  overflow: auto;
}

.popup-component {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.popup-close {
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  filter: invert();
  cursor: pointer;
  background-image: url('../images/iconmonstr-x-mark-2.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 2%;
  bottom: auto;
  left: auto;
  right: 2%;
}

.scene4-benefits {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 50vw;
  display: flex;
  position: relative;
}

.shih-tzu-partying_img {
  width: 10.6vw;
  position: absolute;
  top: 2vw;
  bottom: auto;
  left: 5%;
  right: auto;
}

.husky-partying_img {
  width: 17.7vw;
  position: absolute;
  left: 13%;
}

.terrier-partying_img {
  width: 10.6vw;
  position: absolute;
  top: -2vw;
  bottom: auto;
  left: 29%;
  right: auto;
}

.dab-dog_img {
  width: 11.4vw;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 38.5%;
  right: auto;
}

.pug-partying_img {
  width: 8.8vw;
  position: absolute;
  top: 10vw;
  bottom: auto;
  left: 48%;
  right: auto;
}

.poodle-partying_img {
  width: 7.9vw;
  position: absolute;
  top: -3vw;
  left: 50%;
}

.sad-dog_img {
  width: 12.4vw;
  position: absolute;
  top: 1vw;
  bottom: auto;
  left: auto;
  right: 31%;
}

.shiba-wrap {
  width: 12.4vw;
  position: absolute;
  top: 15.3vw;
  bottom: auto;
  left: auto;
  right: 28%;
}

.shiba-frisbee_img {
  width: 12.4vw;
}

.frisbee-shiba_img {
  width: 3.4vw;
  position: absolute;
  top: 29%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.chihuahua-watching_img {
  z-index: 2;
  width: 8.2vw;
  position: absolute;
  top: 5.6vw;
  bottom: auto;
  left: auto;
  right: 28%;
}

.beer-keg_wrap {
  width: 17.3vw;
  position: absolute;
  top: -2vw;
  bottom: auto;
  left: auto;
  right: 9%;
}

.beer-keg_img {
  width: 16.9vw;
  position: absolute;
  top: .8vw;
  left: -2%;
}

.lab-body_img {
  width: 9.4vw;
}

.lab-body-wrap {
  z-index: 1;
  width: 9.4vw;
  position: absolute;
  top: -1.7vw;
  bottom: auto;
  left: -35%;
  right: auto;
}

.lab-arm_img {
  width: 8.1vw;
  position: absolute;
  top: -.9vw;
  bottom: auto;
  left: auto;
  right: -33%;
}

.st-bernard_wrap {
  width: 14.3vw;
  position: absolute;
  top: -3.6vw;
  bottom: auto;
  left: auto;
  right: -40%;
}

.st-bernard_img {
  width: 14.3vw;
  position: absolute;
}

.st-bernard-arm_img {
  z-index: 0;
  width: 6.8vw;
  position: absolute;
  top: -1.7vw;
  bottom: auto;
  left: -28%;
  right: auto;
}

.benefits-card {
  width: 72vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 50vw;
  display: flex;
  position: relative;
}

.benefits-card._01, .benefits-card._02 {
  margin-right: 50vw;
}

.benefits-heading_img {
  height: 27vh;
  margin-bottom: -1vw;
  position: relative;
}

.benefits-heading_img._02 {
  height: 33vh;
  margin-bottom: 0;
}

.benefits-heading_img._03 {
  height: 30vh;
  margin-bottom: -1vw;
}

.benefits-heading-back_img {
  max-width: 33vh;
  margin-bottom: 2vw;
  position: relative;
}

.dotted-line1 {
  width: 80vw;
  max-width: none;
  position: absolute;
  left: 56vw;
}

.dotted-line1.stages {
  width: 70vw;
  left: 24vw;
}

.dotted-line1.stage-one-to-two {
  width: 70vw;
  left: 32vw;
}

.dotted-line2 {
  width: 80vw;
  max-width: none;
  position: absolute;
  left: 56vw;
}

.dotted-line2.stages {
  width: 75vw;
  left: 24vw;
}

.golden-chair-wrap {
  width: 30vw;
  position: absolute;
  top: -6.9vw;
  bottom: auto;
  left: 20%;
  right: auto;
}

.golden-chair-wrap.hide {
  display: none;
}

.poodle-chair-umbrella_wrap {
  width: 36vw;
  position: absolute;
  top: -58%;
  bottom: auto;
  left: -67%;
  right: auto;
}

.brown-lab-beach-chair-wrap {
  width: 31vw;
  position: absolute;
  top: -3vw;
  bottom: auto;
  left: auto;
  right: 0%;
}

.dachshund-beach-chair-umbrella-wrap {
  width: 35vw;
  position: absolute;
  top: 13%;
  right: 36%;
}

.beach-chair-chihuahua-wrap {
  width: 30vw;
  position: absolute;
  top: .5vw;
  left: 20%;
}

.chair-umbrella-wrap {
  width: 36vw;
  position: absolute;
  top: -143%;
  bottom: auto;
  left: -66%;
  right: auto;
}

.scene5-sequencing {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 50vw;
  display: flex;
  position: relative;
}

.congo-line_img {
  width: 95vw;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 6vw;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.selfie-dogs_img {
  width: 14.9vw;
  position: absolute;
  top: -4.6vw;
  bottom: auto;
  left: 14%;
  right: auto;
}

.terrier-drinking_img {
  width: 11.8vw;
  position: absolute;
  top: 0;
  bottom: auto;
  left: 46%;
  right: auto;
}

.bulldog-drinking_img {
  width: 9.6vw;
  position: absolute;
  top: 0;
  bottom: auto;
  left: auto;
  right: 33%;
}

.dab-dog2_img {
  width: 7.5vw;
  position: absolute;
  top: -3.5vw;
  bottom: auto;
  left: auto;
  right: 25.5%;
}

.chihuahua-dancing_img {
  width: 5.5vw;
  position: absolute;
  top: -2.5vw;
  bottom: auto;
  left: auto;
  right: 20%;
}

.bull-terrier_img {
  width: 13vw;
  position: absolute;
  top: -4.5vw;
  bottom: auto;
  left: auto;
  right: 7%;
}

.stages-card {
  z-index: 1;
  width: 50vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 100vw;
  display: flex;
  position: relative;
}

.stages-card._01, .stages-card._02, .stages-card._03, .stages-card._04 {
  margin-right: 36vw;
  display: flex;
}

.stages_img {
  height: 46vh;
}

.stages_img.stage-3 {
  height: 54vh;
  margin-left: 3rem;
}

.stages_img.stage-4 {
  height: 54vh;
  max-width: 105%;
  margin-left: 3rem;
}

.scene6-mint-now {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 0;
  display: flex;
  position: relative;
}

.black-lab-playing-cards_img {
  width: 17.9vw;
  position: absolute;
  top: 3vw;
  bottom: auto;
  left: 2%;
  right: auto;
}

.dog-wood-playing-cards_img {
  width: 13.8vw;
  position: absolute;
  top: 1.5vw;
  bottom: auto;
  left: 22%;
  right: auto;
}

.dog-back-playing-cards_img {
  width: 9.1vw;
  position: absolute;
  top: 9vw;
  bottom: auto;
  left: 18%;
  right: auto;
}

.chihuahua-back-playing-cards_img {
  z-index: 1;
  width: 7.5vw;
  position: absolute;
  top: 10vw;
  bottom: auto;
  left: 26%;
  right: auto;
}

.dogs-passed-out_img {
  width: 53.6vw;
  position: absolute;
  top: 9vw;
  bottom: auto;
  left: auto;
  right: 1%;
}

.face-drawing-dog_img {
  width: 15.7vw;
  position: absolute;
  top: 1.5vw;
  bottom: auto;
  left: auto;
  right: 4.5%;
}

.dachshund-dancing_img {
  width: 10.9vw;
  position: absolute;
  top: 4.5vw;
  bottom: auto;
  left: auto;
  right: 22%;
}

.husky-dancing_img {
  width: 13.1vw;
  position: absolute;
  top: -5vw;
  bottom: auto;
  left: auto;
  right: 27%;
}

.fire-wrap {
  z-index: 1;
  width: 22.8vw;
  position: absolute;
  top: 7vw;
  bottom: auto;
  left: auto;
  right: 32%;
}

.fire-wood_img {
  z-index: 1;
  width: 22.8vw;
  position: absolute;
}

.chihuahua-dancing-2_img {
  width: 11vw;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 40.5%;
}

.pitbull-dancing_img {
  width: 16vw;
  position: absolute;
  top: -3vw;
  bottom: auto;
  left: auto;
  right: 44%;
}

.miniture-schnauzer_img {
  z-index: 1;
  width: 11.2vw;
  position: absolute;
  top: 3.5vw;
  bottom: auto;
  left: auto;
  right: 53%;
}

.fire_img {
  width: 17vw;
  filter: blur(1px);
  transform-style: preserve-3d;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.footer-container {
  z-index: 1;
  grid-row-gap: 3rem;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.legals-wrap {
  grid-column-gap: 3rem;
  justify-content: center;
  margin-bottom: 1.5vh;
  display: flex;
  position: static;
  top: auto;
  bottom: 1.5%;
  left: 0%;
  right: 0%;
}

.footer-credit_text {
  color: #f7f7ed;
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: Luckiestguy, sans-serif;
  font-size: 1.3vw;
  font-weight: 500;
  line-height: 1;
  position: static;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.footer-link {
  color: #f7f7ed;
  text-decoration: none;
  transition: opacity .2s;
}

.footer-link:hover {
  opacity: .8;
}

.tablet-track, .tablet-track-part2, .section-scene6-tablet {
  display: none;
}

.landing-bottom-text-bg {
  z-index: -1;
  width: 100vw;
  height: 15vh;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #215a5a 80%);
  display: none;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.aloha-poodle-donkey_img {
  width: 31vw;
  position: absolute;
  top: -7vw;
  bottom: auto;
  left: auto;
  right: 5%;
}

.aloha2_img {
  width: 11vw;
  position: absolute;
  top: 13.8vw;
  bottom: auto;
  left: 39%;
  right: auto;
}

.aloha4_img {
  z-index: 1;
  width: 13vw;
  position: absolute;
  top: 11vw;
  bottom: auto;
  left: 28%;
  right: auto;
}

.aloha5_img {
  width: 8vw;
  position: absolute;
  top: -3.7vw;
  bottom: auto;
  left: 34%;
  right: auto;
}

.aloha6_img {
  width: 15vw;
  position: absolute;
  top: 14.3vw;
  bottom: auto;
  left: 7%;
  right: auto;
}

.aloha1_img {
  width: 11vw;
  position: absolute;
  top: 14vw;
  bottom: auto;
  left: 43.5%;
  right: auto;
}

.card-text-middle {
  text-align: center;
  letter-spacing: .4vh;
  margin-top: -3vw;
  font-family: Luckiestguy, sans-serif;
  font-size: 3vh;
  font-weight: 700;
  line-height: 1.2;
}

.card-text-middle.minus-vh {
  margin-top: -4vh;
}

.card-text-middle.minus-vh.attributes {
  font-size: 7vh;
}

.card-text-middle.stage-3 {
  font-size: 6.7vh;
}

.bodega-open_img {
  max-width: 160%;
  margin-top: -2vw;
}

.leaders-container {
  width: 100%;
  height: 76vh;
  grid-column-gap: 2rem;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 16vh;
  display: grid;
  position: relative;
}

.leader-front {
  z-index: 1;
  min-width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: absolute;
  transform: rotate(0);
}

.leader_img {
  max-height: 76vh;
}

.leader-card {
  width: 100%;
  max-height: 76vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  transform: perspective(1000px);
}

.leader-back {
  z-index: 1;
  max-width: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  background-color: #fff;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
  transform: none;
}

.leader-back.padding-none {
  min-width: 100%;
  transform-style: preserve-3d;
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
}

.card-text-middle-leader {
  text-align: center;
  letter-spacing: .3vh;
  text-transform: uppercase;
  font-family: Test founders grotesk, sans-serif;
  font-size: 2.5vh;
  font-weight: 700;
  line-height: 1.1;
}

.card-text-middle-leader.minus-vh {
  margin-top: -4vh;
}

.card-text-middle-leader.minus-vh.attributes {
  font-size: 7vh;
}

.card-text-middle-leader.stage-3 {
  font-size: 6.7vh;
}

.card-text-middle-leader.hide {
  display: none;
}

.leader-back_img {
  max-height: 28vh;
}

.leader-back_img.hide {
  display: none;
}

.leader-bone-text {
  color: #f7f7ed;
  font-family: Futura extra, sans-serif;
  font-size: 2.5vh;
  font-weight: 700;
  line-height: 4vh;
  position: absolute;
}

.leader-bone-text.yellow {
  color: #eea942;
  font-size: 3vh;
  line-height: 3vh;
}

.leader-bone-text.watch-video {
  font-size: 3.2vh;
}

.leader-bone-text.hide {
  display: none;
}

.leader-back-bg_img {
  z-index: -1;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.mobile-track-part1 {
  display: none;
}

.img-100 {
  transition: all .3s;
  transform: rotate(-2deg);
}

.img-100:hover {
  transform: scale(1.05)rotate(4deg);
}

.logo-title-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 3%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

@media screen and (min-width: 1920px) {
  .button.from-bottom {
    max-width: 34.0625rem;
  }

  .img-100 {
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .roadmap {
    width: 100vw;
    border-bottom: 1px solid #ded4bf;
    justify-content: space-around;
    margin-top: 0;
    margin-bottom: 0;
  }

  .track {
    height: auto;
  }

  .track.hide-tablet {
    display: none;
  }

  .camera {
    height: auto;
    position: relative;
  }

  .frame {
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
  }

  .intro-text {
    width: auto;
    max-width: 44rem;
    font-size: 1.6rem;
    bottom: 7%;
  }

  .body {
    background-color: rgba(0, 0, 0, 0);
  }

  .scroll-indicator {
    z-index: 10;
    width: 3vw;
    height: 3vw;
    bottom: 2%;
    right: -1rem;
    transform: rotate(90deg);
  }

  .intro-title {
    margin: 0 auto 1vw;
  }

  .paper-overlay.tablet {
    z-index: 2;
  }

  .paper-overlay.tablet.scene2 {
    z-index: 1;
  }

  .dot-overlay.tablet {
    z-index: 2;
  }

  .credits {
    width: auto;
    font-size: 1rem;
    bottom: 3%;
  }

  .full-width-title {
    position: static;
  }

  .logo {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .intro-card {
    z-index: 2;
    overflow: hidden;
  }

  .intro-card.benefits {
    width: 100%;
    height: 90vh;
  }

  .intro-card.benefits-back {
    z-index: 2;
    width: 100%;
    height: 90vh;
  }

  .bone {
    height: auto;
  }

  .bone.leader {
    height: 5vh;
  }

  .button.minus-top:hover {
    transform: rotate(-2deg);
  }

  .button.minus-top.back-02.benefits, .button.minus-top._03.benefits, .button.minus-top.back-03.benefits {
    margin-top: 2vh;
  }

  .button.minus-top.benefits {
    width: 32vh;
    height: auto;
    margin-top: 0;
  }

  .button.minus-top.leader {
    height: 5vh;
    bottom: 4%;
  }

  .button.space-top {
    z-index: 4;
  }

  .button.space-top:hover, .button.from-bottom:hover {
    transform: rotate(-2deg);
  }

  .button.from-bottom.back-02.benefits, .button.from-bottom._03.benefits, .button.from-bottom.back-03.benefits {
    margin-top: 2vh;
  }

  .button.from-bottom.benefits {
    width: 32vh;
    height: auto;
    margin-top: 0;
  }

  .text-block {
    margin-top: 0;
    font-size: 2.6vh;
    line-height: 1;
  }

  .text-block.yellow {
    font-size: 2.5vh;
  }

  .card-text.benefits {
    max-width: 80%;
    font-size: 1.3rem;
    line-height: 1;
  }

  .card-text.benefits.back {
    max-width: 36vh;
  }

  .supply {
    width: auto;
    height: auto;
  }

  .nft-column {
    grid-row-gap: 2vh;
  }

  .nft {
    width: 21vw;
    height: 21vh;
  }

  .nft-grid-container {
    height: auto;
    grid-column-gap: 2vh;
    margin-top: 18vh;
  }

  .nft-grid-container.inside-popup {
    margin-top: 0;
    margin-bottom: 2vh;
  }

  .background-frame, .tree-frame {
    flex-direction: column;
    justify-content: flex-start;
  }

  .landing-img-container {
    margin-top: 26vh;
  }

  .beach-chair-umbrella_img {
    top: -18.3vw;
  }

  .choco-lab-swimming_img {
    top: 40vw;
  }

  .intro-img-container {
    margin-top: 32vh;
  }

  .sand-castle-wrap {
    top: 7vw;
    left: 3%;
  }

  .bulldog2_img {
    left: 24%;
  }

  .more-than_img {
    width: 90%;
  }

  .dog-breeds_img {
    width: 98%;
  }

  .frame-img-container.scene3 {
    margin-top: 31vh;
  }

  .frame-img-container.scene4, .frame-img-container.scene5, .frame-img-container.scene6 {
    margin-top: 34vh;
  }

  .great-dane-swimming_img {
    top: 27vw;
  }

  .popup-modal {
    z-index: 30;
    display: none;
  }

  .beer-keg_wrap {
    right: 10%;
  }

  .benefits-heading_img {
    width: 72%;
    height: auto;
  }

  .benefits-heading_img._02 {
    width: 56%;
  }

  .benefits-heading_img._03 {
    margin-bottom: -4vw;
  }

  .benefits-heading-back_img {
    max-width: 28vh;
    margin-bottom: 2vw;
  }

  .dotted-line1 {
    z-index: -1;
    width: 36%;
    margin-left: auto;
    margin-right: auto;
    top: auto;
    bottom: -16%;
    left: 0%;
    right: 0%;
  }

  .dotted-line1.benefits {
    width: 40%;
    bottom: -31%;
  }

  .dotted-line2 {
    width: 36%;
    margin-left: auto;
    margin-right: auto;
    top: auto;
    bottom: -16%;
    left: 0%;
    right: 0%;
  }

  .dotted-line2.benefits {
    width: 40%;
    bottom: -30%;
  }

  .golden-chair-wrap {
    top: -6vw;
  }

  .footer-container {
    z-index: 3;
  }

  .legals-wrap {
    grid-column-gap: 2rem;
  }

  .footer-credit_text {
    font-size: .875rem;
  }

  .footer-link {
    transition-property: none;
  }

  .footer-link:hover {
    opacity: 1;
  }

  .section-hero {
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .tablet-track {
    height: 800vh;
    display: block;
    position: relative;
  }

  .section-intro {
    z-index: 2;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .section-intro-card {
    z-index: 1;
    height: 100vh;
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    justify-content: center;
    align-items: center;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .wall-sand-sea_container {
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/scene1-no-sky.webp');
    background-position: 50% 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .wall-sand-sea_container.scene2 {
    z-index: 3;
    background-image: url('../images/scene2-no-sky.webp');
    background-position: 50% 70%;
  }

  .wall-sand-sea_container.intro-card-scene {
    justify-content: center;
    align-items: center;
  }

  .wall-sand-sea_container.scene3 {
    background-image: url('../images/scene3-no-sky.webp');
    background-position: 50% 70%;
  }

  .wall-sand-sea_container.nft-title-tablet {
    z-index: 3;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .wall-sand-sea_container.scene4 {
    background-image: url('../images/scene4-tablet.webp');
    background-position: 50% 70%;
  }

  .wall-sand-sea_container.benefit-cards {
    z-index: 2;
    justify-content: center;
    align-items: center;
  }

  .wall-sand-sea_container.scene5 {
    background-image: url('../images/scene5-tablet.webp');
    background-position: 50% 70%;
  }

  .wall-sand-sea_container.scene6 {
    background-image: url('../images/scene6-tablet.webp');
    background-position: 50% 70%;
  }

  .city-container-tablet {
    z-index: 1;
    width: 100%;
    height: 26vh;
    background-image: url('../images/CITY_SECTION.webp');
    background-position: -85% 100%;
    background-repeat: no-repeat;
    background-size: auto 20vh;
    position: absolute;
  }

  .city-container-tablet.scene2 {
    height: 40vh;
    background-image: url('../images/CITY_SECTION.webp');
    background-position: 240%;
    background-repeat: repeat-x;
    background-size: auto 20vh;
  }

  .city-container-tablet.scene3 {
    height: 40vh;
    background-image: url('../images/CITY_SECTION.webp');
    background-position: -87%;
    background-repeat: repeat-x;
    background-size: auto 20vh;
  }

  .city-container-tablet.nft-collection-portrait {
    height: 40vh;
    background-image: url('../images/CITY_SECTION.webp');
    background-position: 50% 30%;
    background-size: auto 20vh;
  }

  .city-container-tablet.scene4 {
    height: 40vh;
    background-image: url('../images/CITY_SECTION.webp');
    background-position: 360% 54%;
    background-repeat: repeat-x;
    background-size: auto 20vh;
  }

  .city-container-tablet.scene5 {
    height: 40vh;
    background-image: url('../images/CITY_SECTION.webp');
    background-position: 144% 54%;
    background-repeat: repeat-x;
    background-size: auto 20vh;
  }

  .city-container-tablet.scene6 {
    height: 40vh;
    background-image: url('../images/CITY_SECTION.webp');
    background-position: -82% 54%;
    background-repeat: repeat-x;
    background-size: auto 20vh;
  }

  .sky-container-tablet {
    height: 26vh;
    background-image: linear-gradient(#a5dbf5, #fff);
    position: absolute;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
  }

  .sky-container-tablet.scene2, .sky-container-tablet.scene3 {
    height: 40vh;
  }

  .dark-overlay {
    z-index: 2;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .dark-overlay.scene2 {
    z-index: 1;
    background-color: rgba(0, 0, 0, .15);
  }

  .dark-overlay.scene3 {
    background-color: rgba(0, 0, 0, .25);
  }

  .dark-overlay.scene4 {
    background-color: rgba(0, 0, 0, .35);
  }

  .dark-overlay.benefit-cards {
    background-color: rgba(0, 0, 0, .35);
    display: block;
  }

  .dark-overlay.scene5 {
    background-color: rgba(0, 0, 0, .3);
  }

  .dark-overlay.stages-cards {
    background-color: rgba(0, 0, 0, .4);
    display: block;
  }

  .dark-overlay.scene6 {
    background-color: rgba(0, 0, 0, .5);
  }

  .title-container {
    z-index: 3;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .title-container.nft-title-tablet {
    z-index: 4;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
  }

  .scene-title-wrap {
    width: 96%;
    margin-top: 4rem;
  }

  .scene-title-wrap.nft-title-and-later-tablet {
    margin-top: 4rem;
  }

  .scene-title-wrap.nft-title-and-later-tablet.hide {
    display: none;
  }

  .scene-title-wrap.site-title {
    margin-top: 3rem;
  }

  .buoy_img {
    width: 12vw;
    position: absolute;
    top: auto;
    bottom: 3%;
    left: 1%;
    right: auto;
  }

  .buoy_img.scene3 {
    left: 29%;
  }

  .buoy_img.nft-title-tablet {
    bottom: 1%;
    left: 26%;
  }

  .buoy_img.scene5 {
    top: auto;
    bottom: 1%;
    left: auto;
    right: 19%;
  }

  .dog-tube-water_img {
    width: 16vw;
    position: absolute;
    top: auto;
    bottom: 19%;
    left: 30%;
    right: auto;
  }

  .section-scene3-tablet {
    z-index: 3;
    height: 100vh;
    position: relative;
  }

  .section-scene3-tablet.hide-for-tablet {
    display: none;
  }

  .section-nft-title-tablet {
    z-index: 4;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .section-nft-title-tablet.hide {
    display: none;
  }

  .section-scene4-tablet {
    z-index: 5;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .section-scene4-tablet.hide {
    display: none;
  }

  .section-benefits-cards {
    z-index: 6;
    height: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .section-benefits-cards.hide {
    display: none;
  }

  .benefit-cards-track {
    z-index: 1;
    width: 100%;
    height: 300vh;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
    position: relative;
  }

  .benefit-cards-wrap {
    width: auto;
    height: 100vh;
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .staging-cards-bg-container {
    z-index: 0;
    display: none;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .section-scene5-tablet {
    z-index: 7;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .section-sequencing-cards {
    z-index: 8;
    height: 400vh;
    position: relative;
  }

  .stages-cards-track {
    z-index: 1;
    width: 100%;
    height: 400vh;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    position: relative;
  }

  .stages-card-tablet {
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .tablet-track-part2 {
    z-index: 6;
    height: 500vh;
    display: block;
    position: relative;
  }

  .section-scene6-tablet {
    z-index: 8;
    height: 100vh;
    display: block;
    position: relative;
    top: 0;
  }

  .new-benefits-wrap {
    z-index: 5;
    height: auto;
    position: relative;
  }

  .aloha2_img {
    top: 11vw;
    left: 31%;
  }

  .aloha5_img {
    left: 37%;
  }

  .aloha6_img {
    top: 13.4vw;
  }

  .leaders-container {
    grid-column-gap: 1rem;
    margin-top: 32vh;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .leaders-container.hiding-tablet {
    display: none;
  }

  .leader-card {
    z-index: 31;
  }

  .leader-card.is-tablet {
    justify-content: flex-start;
  }

  .leader-back.padding-none {
    transform: rotateX(0)rotateY(180deg)rotateZ(0);
  }

  .leader-bone-text {
    font-size: 1.5vh;
    line-height: 1;
  }

  .leader-bone-text.yellow {
    font-size: 2.5vh;
  }

  .italic-text {
    font-style: italic;
  }
}

@media screen and (max-width: 767px) {
  .intro-text {
    font-size: 1.3rem;
    bottom: 10%;
  }

  .intro-title {
    margin-top: 0;
  }

  .credits {
    bottom: 4%;
  }

  .card.benefits-bg {
    height: 100vh;
  }

  .logo {
    margin-left: auto;
    margin-right: auto;
  }

  .intro-card {
    width: 90vh;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .intro-card.benefits-back {
    display: flex;
  }

  .intro-card.stages {
    padding-bottom: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .bone {
    width: 88%;
  }

  .bone.benefits-portrait, .bone.nft-collection-portrait {
    width: 64%;
  }

  .bone.leader {
    height: 7vh;
  }

  .button.minus-top {
    max-width: 80%;
  }

  .button.minus-top.footer {
    max-width: 40%;
  }

  .button.minus-top.benefits {
    width: 64vh;
    margin-top: 2vh;
  }

  .button.minus-top.leader {
    height: 7vh;
    margin-left: auto;
    margin-right: auto;
  }

  .button.space-top {
    margin-top: 6vh;
    margin-bottom: 2%;
  }

  .button.from-bottom {
    max-width: 40%;
    bottom: 20%;
  }

  .button.from-bottom.footer {
    max-width: 40%;
  }

  .button.from-bottom.benefits {
    width: 64vh;
    margin-top: 2vh;
  }

  .text-block.yellow {
    font-size: 5vh;
  }

  .text-block.stages-portrait {
    font-size: 3vh;
  }

  .card-text.benefits {
    font-size: .875rem;
  }

  .card-text.benefits.back {
    max-width: 60vh;
  }

  .card-text.stages {
    max-width: 70vh;
    text-align: center;
    font-size: .7rem;
    line-height: 1;
  }

  .card-text.stages.stage-3 {
    text-align: center;
  }

  ._8888 {
    height: 15vh;
  }

  .supply {
    height: 16vh;
    margin-top: -1vh;
  }

  .nft-grid-container {
    margin-top: 24vh;
  }

  .landing-img-container {
    margin-top: 17vh;
  }

  .intro-img-container {
    margin-top: 22vh;
  }

  .more-than_img {
    width: 74%;
    margin-top: -2vw;
  }

  .card-text-large {
    font-size: 8vh;
  }

  .dog-breeds_img {
    width: 88%;
  }

  .frame-img-container.scene3 {
    margin-top: 25vh;
  }

  .frame-img-container.scene4 {
    margin-top: 30vh;
  }

  .frame-img-container.scene6 {
    margin-top: 28vh;
  }

  .popup-modal {
    display: none;
  }

  .popup-modal-container {
    padding-top: 4rem;
  }

  .popup-close {
    width: 2rem;
    height: 2rem;
    top: 4%;
    right: 2%;
  }

  .benefits-heading_img {
    width: 40%;
  }

  .benefits-heading_img._03 {
    margin-bottom: 0;
  }

  .benefits-heading-back_img {
    max-width: 30vh;
  }

  .dotted-line1 {
    width: 20%;
  }

  .dotted-line1.benefits {
    width: 30%;
    display: none;
    bottom: -60%;
  }

  .dotted-line2 {
    width: 20%;
  }

  .dotted-line2.benefits {
    width: 30%;
    display: none;
  }

  .stages_img {
    height: 36vh;
  }

  .stages_img.stage-3 {
    height: 42vh;
    margin-left: 1rem;
  }

  .stages_img.stage-4 {
    margin-left: 1rem;
  }

  .legals-wrap {
    margin-bottom: 2%;
  }

  .footer-credit_text {
    font-size: .7rem;
  }

  .wall-sand-sea_container {
    background-position: 50% 34%;
  }

  .wall-sand-sea_container.scene2 {
    z-index: 5;
    background-position: 50%;
    overflow: hidden;
  }

  .wall-sand-sea_container.scene3 {
    background-position: 50%;
    overflow: hidden;
  }

  .wall-sand-sea_container.scene4, .wall-sand-sea_container.scene5, .wall-sand-sea_container.scene6 {
    background-position: 50%;
  }

  .city-container-tablet {
    background-position: 0 100%;
    background-size: 100%;
  }

  .city-container-tablet.scene2 {
    height: 26vh;
    background-position: 50% 100%;
    background-size: 100%;
  }

  .city-container-tablet.scene3 {
    height: 26vh;
    background-position: 50%;
    background-size: 100%;
  }

  .city-container-tablet.nft-collection-portrait, .city-container-tablet.scene4, .city-container-tablet.scene5, .city-container-tablet.scene6 {
    height: 26vh;
    background-position: 50% 100%;
    background-size: 100%;
  }

  .title-container {
    z-index: 5;
  }

  .scene-title-wrap {
    margin-top: 0;
  }

  .scene-title-wrap.nft-title-and-later-tablet {
    margin-top: 1rem;
  }

  .buoy_img {
    width: 10vw;
  }

  .buoy_img.scene3 {
    bottom: -32%;
  }

  .buoy_img.scene5 {
    bottom: -25%;
  }

  .dog-tube-water_img {
    bottom: -40%;
  }

  .benefit-cards-track {
    overflow: hidden;
  }

  .aloha2_img {
    top: 12vw;
  }

  .bodega-open_img {
    max-width: 120%;
  }

  .leaders-container {
    height: 64vh;
    grid-column-gap: 1rem;
    margin-top: 20vh;
  }

  .leaders-container.hiding-tablet {
    grid-column-gap: 1rem;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .leader_img {
    max-height: 64vh;
  }

  .leader-card {
    z-index: 0;
    justify-content: center;
    display: flex;
  }

  .leader-back.padding-none {
    transform: rotateX(0)rotateY(180deg)rotateZ(0);
  }

  .leader-bone-text {
    font-size: 2.4vh;
  }

  .leader-bone-text.yellow {
    font-size: 5vh;
  }

  .leader-bone-text.stages-portrait {
    font-size: 3vh;
  }
}

@media screen and (max-width: 479px) {
  .roadmap {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ded4bf;
    border-right-width: 0;
    justify-content: center;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
  }

  .track {
    height: auto;
    margin-top: 12vw;
  }

  .camera {
    height: auto;
    position: relative;
  }

  .frame {
    flex-direction: column;
  }

  .intro-text {
    max-width: 20rem;
    font-size: 1rem;
    line-height: 1.2;
    bottom: 16%;
  }

  .scroll-indicator {
    width: 5vw;
    height: 5vw;
    right: -1.5rem;
  }

  .intro-title {
    width: 64vw;
    white-space: nowrap;
    font-size: 4.2vw;
  }

  .credits {
    max-width: 17rem;
    font-size: .875rem;
    bottom: 10%;
  }

  .full-width-title.scene-title.hide-mobile-portrait {
    display: none;
  }

  .full-width-title.scene-title.scene6 {
    width: 64vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .logo {
    margin-left: auto;
    margin-right: auto;
  }

  .intro-card {
    width: 95vw;
    height: 72vh;
    padding: 2rem 1rem 1rem;
  }

  .intro-card.benefits-back {
    display: flex;
  }

  .intro-card.stages {
    width: 74vw;
    min-width: 18rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .bone {
    width: 130%;
    max-width: none;
  }

  .bone.benefits-portrait {
    width: 80%;
  }

  .bone.nft-collection-portrait {
    width: 88%;
  }

  .bone.intro-card-portrait {
    width: 108%;
  }

  .bone.leader {
    max-width: none;
  }

  .bone.watch-video {
    width: 90%;
  }

  .bone.phases {
    width: 120%;
  }

  .bone.phases-smaller {
    width: 90%;
  }

  .button.minus-top {
    max-width: 90%;
  }

  .button.minus-top.hover-none {
    height: 13vh;
    margin-top: -4vh;
  }

  .button.minus-top.hover-none.phase-four {
    margin-top: -1vh;
  }

  .button.minus-top.footer {
    height: auto;
    max-width: 80%;
    margin-top: 0;
  }

  .button.minus-top.benefits {
    max-width: 59%;
    margin-top: 0;
  }

  .button.space-top {
    margin-top: 2vh;
    margin-bottom: 8%;
  }

  .button.from-bottom {
    max-width: 64%;
    bottom: 21%;
  }

  .button.from-bottom.footer {
    height: auto;
    max-width: 80%;
    margin-top: 0;
  }

  .button.from-bottom.benefits {
    max-width: 59%;
    margin-top: 0;
  }

  .text-block {
    font-size: 1.7vh;
  }

  .text-block.yellow {
    font-size: 2.8vh;
  }

  .text-block.stages-portrait {
    font-size: 2.3vh;
  }

  .text-block.intro-card-portrait {
    font-size: 2.7vh;
  }

  .text-block.watch-video {
    font-size: 3vh;
  }

  .text-block.phase-one {
    font-size: 1rem;
  }

  .card-text {
    font-size: 1.75vh;
    line-height: 1;
  }

  .card-text.benefits {
    font-size: .625rem;
  }

  .card-text.benefits.back {
    max-width: 28vh;
  }

  .card-text.stages {
    max-width: 116%;
    text-align: center;
    padding-left: 0;
    line-height: 1.2;
  }

  .card-text.stages.stage-3 {
    max-width: 88%;
    text-align: center;
  }

  .card-text.stages.stage-4 {
    max-width: 95%;
  }

  ._8888 {
    height: 13vh;
  }

  .small-card-text {
    margin-top: -1vh;
  }

  .supply {
    height: 13vh;
    margin-top: -1.5vh;
  }

  .nft-column {
    grid-column-gap: 2vh;
    grid-row-gap: 0vh;
    flex-direction: row;
  }

  .nft-column.hide-mobile-portrait {
    display: none;
  }

  .nft {
    width: 43vw;
    height: 20vh;
  }

  .nft-grid-container {
    grid-row-gap: 2vh;
    flex-direction: column;
    margin-top: 14vh;
  }

  .background-frame, .tree-frame {
    flex-direction: column;
  }

  .landing-img-container {
    margin-top: 32vh;
  }

  .intro-img-container {
    margin-top: 43vh;
  }

  .more-than_img {
    width: 76%;
    margin-top: -6vw;
  }

  .card-text-large {
    font-size: 6.2vh;
  }

  .card-text-large.minus-vh.attributes {
    margin-top: -2vh;
    font-size: 5vh;
  }

  .card-text-large.stage-3 {
    font-size: 5vh;
  }

  .dog-breeds_img {
    width: 96%;
    margin-bottom: 3vw;
  }

  .frame-img-container.scene3, .frame-img-container.scene4 {
    margin-top: 44vh;
  }

  .frame-img-container.scene5 {
    margin-top: 45vh;
  }

  .frame-img-container.scene6 {
    margin-top: 44vh;
  }

  .great-dane-swimming_img {
    top: 31vw;
  }

  .two-sol_img {
    width: 6rem;
    top: -29%;
  }

  .two-sol_img.show-mobile-portait {
    display: block;
  }

  .popup-modal {
    display: none;
  }

  .popup-close {
    top: 2%;
    right: 5%;
  }

  .benefits-heading_img {
    width: 64%;
  }

  .benefits-heading_img._02 {
    width: 48%;
    height: auto;
    margin-bottom: 1vw;
  }

  .benefits-heading_img._03 {
    height: auto;
  }

  .benefits-heading-back_img {
    max-width: 20vh;
    margin-bottom: 3vw;
  }

  .dotted-line1 {
    width: 50%;
    bottom: -32%;
  }

  .dotted-line1.benefits {
    width: 72%;
    display: block;
    bottom: -33%;
  }

  .dotted-line2 {
    width: 50%;
    bottom: -30%;
  }

  .dotted-line2.benefits {
    width: 72%;
    display: block;
    bottom: -33%;
  }

  .stages_img {
    width: auto;
    height: auto;
    max-width: 107%;
    margin-right: -1rem;
  }

  .stages_img.stage-3, .stages_img.stage-4 {
    height: auto;
  }

  .footer-container {
    grid-row-gap: 1rem;
  }

  .legals-wrap {
    grid-column-gap: 1rem;
    flex-direction: column;
    margin-bottom: 3%;
    line-height: 1.5;
  }

  .footer-credit_text {
    font-size: 14px;
    line-height: 1.5;
  }

  .section-intro.hide-mobile-portrait {
    display: none;
  }

  .wall-sand-sea_container {
    background-position: 50% 100%;
    background-size: cover;
    top: 9%;
  }

  .wall-sand-sea_container.scene2 {
    filter: brightness(80%);
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .wall-sand-sea_container.nft-title-tablet {
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .wall-sand-sea_container.scene6 {
    top: 0%;
  }

  .city-container-tablet {
    height: 52vh;
    background-position: -27%;
    background-size: 48rem;
  }

  .city-container-tablet.scene2 {
    height: 52vh;
    background-image: url('../images/CITY_SECTION-1-1.svg');
    background-position: 96% 100%;
    background-size: 48rem;
  }

  .city-container-tablet.scene3 {
    height: 52vh;
    background-position: 32% 100%;
    background-size: 48rem;
  }

  .city-container-tablet.nft-collection-portrait {
    z-index: 0;
    height: 27vh;
    background-image: url('../images/CITY_SECTION-1-1.svg');
    background-position: -38% 100%;
    background-size: 48rem;
  }

  .city-container-tablet.scene4 {
    height: 52vh;
    background-image: url('../images/CITY_SECTION-1-1.svg');
    background-position: -42% 100%;
    background-size: 48rem;
  }

  .city-container-tablet.benefit-cards-mobile {
    background-position: 50% 24%;
  }

  .city-container-tablet.scene5 {
    height: 52vh;
    background-image: url('../images/CITY_SECTION-1-1.svg');
    background-position: 76% 100%;
    background-size: 48rem;
  }

  .city-container-tablet.scene6 {
    height: 52vh;
    background-image: url('../images/CITY_SECTION-1-1.svg');
    background-position: 0 66%;
    background-size: 44rem;
  }

  .sky-container-tablet, .sky-container-tablet.scene2, .sky-container-tablet.scene3 {
    height: 50vh;
  }

  .scene-title-wrap {
    margin-top: 4rem;
  }

  .scene-title-wrap.nft-title-and-later-tablet {
    margin-top: 2rem;
  }

  .buoy_img {
    width: 16vw;
    bottom: 11%;
    left: 18%;
  }

  .buoy_img.scene3 {
    bottom: 6%;
  }

  .buoy_img.scene5 {
    bottom: 10%;
  }

  .dog-tube-water_img {
    width: 18vw;
    bottom: 23%;
  }

  .section-scene3-tablet {
    position: relative;
    top: auto;
  }

  .section-nft-title-tablet {
    overflow: hidden;
  }

  .section-benefits-cards {
    height: auto;
  }

  .benefit-cards-track {
    position: static;
  }

  .section-sequencing-cards {
    position: relative;
    top: 0;
  }

  .tablet-track-part2 {
    z-index: 7;
    height: 500vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .section-scene6-tablet {
    position: -webkit-sticky;
    position: sticky;
  }

  .new-benefits-wrap {
    z-index: 5;
    height: auto;
    position: relative;
  }

  .card-text-middle {
    font-size: 1.8vh;
  }

  .card-text-middle.minus-vh.attributes {
    margin-top: -2vh;
    font-size: 5vh;
  }

  .card-text-middle.stage-3 {
    font-size: 4.5vh;
  }

  .leaders-container {
    z-index: 3;
    height: 200vh;
    grid-column-gap: .5rem;
    flex-direction: column;
    margin-top: 28vh;
    display: flex;
    top: 0;
  }

  .leaders-container.hiding-tablet {
    grid-row-gap: 0px;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 0;
    padding-bottom: 1rem;
    display: flex;
  }

  .leader-front {
    width: 100%;
    min-width: auto;
    align-items: stretch;
  }

  .leader_img {
    max-width: 100%;
    margin: 0 auto;
  }

  .leader-card {
    height: 100vh;
    max-height: none;
    align-items: stretch;
  }

  .leader-back.padding-none {
    width: 100%;
    min-width: auto;
    align-items: stretch;
    transform: rotateX(0)rotateY(180deg)rotateZ(0);
  }

  .card-text-middle-leader {
    font-size: 1.8vh;
  }

  .card-text-middle-leader.minus-vh.attributes {
    margin-top: -2vh;
    font-size: 5vh;
  }

  .card-text-middle-leader.stage-3 {
    font-size: 4.5vh;
  }

  .leader-bone-text {
    font-size: 2vh;
  }

  .leader-bone-text.yellow {
    font-size: 2.8vh;
  }

  .leader-bone-text.stages-portrait {
    font-size: 2.3vh;
  }

  .leader-bone-text.intro-card-portrait {
    font-size: 2.7vh;
  }

  .leader-bone-text.watch-video {
    font-size: 3vh;
  }

  .mobile-track-part1 {
    z-index: 2;
    height: 100vh;
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .no-link {
    color: #f7f7ed;
    text-decoration: none;
  }
}

#w-node-_48bde356-56e0-fb9c-54bb-0f286c273e02-461431c7, #w-node-_48bde356-56e0-fb9c-54bb-0f286c273e03-461431c7, #w-node-e6761035-65da-7989-dd2c-9f6ff29dcd74-461431c7, #w-node-_590f8d8e-8586-cd6b-5caf-57d8483f3472-461431c7, #w-node-d3b1421a-ee50-1092-153f-ec896e0e71bb-461431c7, #w-node-d3b1421a-ee50-1092-153f-ec896e0e71bc-461431c7, #w-node-f9f48c94-ce25-f7b5-9316-b44bac95cc40-461431c7, #w-node-f9f48c94-ce25-f7b5-9316-b44bac95cc41-461431c7, #w-node-f9f48c94-ce25-f7b5-9316-b44bac95cc2a-461431c7, #w-node-f9f48c94-ce25-f7b5-9316-b44bac95cc2b-461431c7, #w-node-f9f48c94-ce25-f7b5-9316-b44bac95cc35-461431c7, #w-node-f9f48c94-ce25-f7b5-9316-b44bac95cc36-461431c7, #w-node-_01fbe135-0deb-1fb0-6a94-b2ffaf907707-461431c7, #w-node-_01fbe135-0deb-1fb0-6a94-b2ffaf907708-461431c7, #w-node-_01fbe135-0deb-1fb0-6a94-b2ffaf9076f1-461431c7, #w-node-_01fbe135-0deb-1fb0-6a94-b2ffaf9076f2-461431c7, #w-node-_01fbe135-0deb-1fb0-6a94-b2ffaf9076fc-461431c7, #w-node-_01fbe135-0deb-1fb0-6a94-b2ffaf9076fd-461431c7 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Test founders grotesk';
  src: url('../fonts/test-founders-grotesk-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Test founders grotesk';
  src: url('../fonts/test-founders-grotesk-bold-italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Test founders grotesk';
  src: url('../fonts/test-founders-grotesk-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Birds of paradise и personal use only';
  src: url('../fonts/Birds-of-Paradise-И-PERSONAL-USE-ONLY.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Luckiestguy';
  src: url('../fonts/LuckiestGuy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura extra';
  src: url('../fonts/Futura-Extra-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}