@font-face {
  font-family: "Room-Black";
  font-weight: 800;
  font-style: normal;
  src: url("./assets/fonts/Room-Black.woff2") format("woff2"),
    url("./assets/fonts/Room-Black.woff") format("woff");
}

@font-face {
  font-family: "Room";
  font-weight: 400;
  font-style: normal;
  src: url("./assets/fonts/Room.woff2") format("woff2"),
    url("./assets/fonts/Room.woff") format("woff");
}

:root {
  --stone-950: #0c0a09;
  --stone-900: #1c1917;
  --stone-800: #292524;
  --stone-700: #44403c;
  --stone-600: #57534e;
  --stone-500: #78716c;
  --stone-400: #a8a29e;
  --stone-300: #d6d3d1;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;
  --stone-50: #fafaf9;
  --background-color: #c1b8b1;
  --red-highlight: #781b1e;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* cursor: url(./assets/images/cursor-tattoo-machine.png), auto !important; */
  font-family: "Room", sans-serif;
  position: relative;
  background-color: var(--background-color);
  color: var(--stone-950);
}

#canvas {
  margin: 0 auto;
  position: absolute;
  z-index: 2;
}

#HomePageWithCanvas {
  opacity: 0;
  transition: opacity 1s;
}

#HomePageWithCanvas.active {
  opacity: 1;
  transition: opacity 1s;
}

#RoadMapPageWithCanvas {
  opacity: 0;
  transition: opacity 1s;
}

#RoadMapPageWithCanvas.active {
  opacity: 1;
  transition: opacity 1s;
}

.hide,
.hideCanvas {
  display: none;
}

#videoSection {
  position: relative;
}

/* ================================== */

video {
  position: fixed;
  height: 100vh;
  object-fit: cover !important;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 2%,
    rgba(193, 185, 179, 1) 22%,
    rgba(193, 185, 179, 1) 73%,
    transparent 90%
  );
}

video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

.activeVideo {
  z-index: -1;
}

.inactiveSegment {
  z-index: -2;
  transition: opacity 1.5s ease;
  opacity: 0;
  pointer-events: none;
}

.activeSegment {
  z-index: -1;
  transition: opacity 2s ease;
  opacity: 1;
}

ul {
  display: flex;
  column-gap: 10px;
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
}

li {
  list-style: none;
  position: relative;
}

@media only screen and (min-width: 992px) {
  /* ====================================== */
  .buyNowVideo {
    position: absolute !important;
    z-index: -1 !important;
    height: 100vh !important;
    object-fit: cover !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 2%,
      rgba(193, 185, 179, 1) 22%,
      rgba(193, 185, 179, 1) 73%,
      transparent 90%
    ) !important;
  }
}

li.active::after {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  background-color: aliceblue;
  left: 0;
  bottom: -7px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  animation: appear 0.2s linear;
}

@keyframes appear {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

a {
  text-decoration: none;
  font-size: 30px;
  color: var(--stone-700);
  font-weight: 500;
}

.pageSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.homeText {
  position: absolute;
  font-family: "Room-Black", sans-serif;
  font-size: 20px;
  color: var(--stone-100);
  left: 42%;
  bottom: 25%;
  text-transform: uppercase;
  opacity: 0;
}

@media (min-width: 2540px) {
  .homeText {
    left: 50%;
    bottom: 22%;
  }
}

.wrap {
  bottom: 19%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  transform: translate(-37%, 0);
}

svg {
  opacity: 0;
  position: absolute;
}

.home {
  z-index: 2;
  position: absolute;
  top: 0;
}

.aboutpageText {
  position: absolute;
  bottom: 8%;
  left: 17%;
  width: 35%;
  font-size: 1.125rem;
}

.aboutpageText .subText {
  font-family: "Room-Black", sans-serif;
}

#aboutParagraph {
  margin-top: 1rem;
}

.redText {
  font-family: "Room-Black", sans-serif;
  font-size: 30px;
  color: var(--red-highlight);
}

.subText {
  color: var(--stone-100);
}

.redTitle {
  font-family: "Room-Black", sans-serif;
  font-size: 30px;
  color: var(--red-highlight);
  margin: 5px 0px;
}

.roadMapLines {
  position: absolute;
  top: -35px;
  left: 621px;
}

.monetization {
  display: flex;
  flex-direction: row-reverse;
  width: 40%;
  font-weight: 700;
  font-size: 16px;
  position: absolute;
  top: -3%;
  left: 14%;
  text-align: right;
}

.moitizationline {
  margin-top: 16px;
  transform: rotate(12deg);
}

.lineImg {
  transform: rotate(44deg);
}

.missionValueLine {
  padding-top: 40px;
}

.partnership {
  font-family: "Room-Black", sans-serif;
  display: flex;
  width: 55%;
  font-size: 16px;
  position: absolute;
  top: 56%;
  right: 3%;
}

.partnershipLine {
  padding-top: 45px;
}

.teamAndCommunity {
  font-family: "Room-Black", sans-serif;
  display: flex;
  width: 45%;
  font-size: 16px;
  position: absolute;
  right: 6%;
  bottom: 6%;
}

.teamAndCommunityLine {
  padding-top: 50px;
}

.imageLayers {
  position: absolute;
  z-index: 2;
  display: flex;
  transform: translate(-50%, -50%);
}

.socialIcons {
  right: 2%;
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: right;
  row-gap: 20px;
  margin-top: 25px;
  z-index: 2;
  top: 72px;
}

.aboutHoverEffect {
  position: absolute;
  right: 21%;
  width: 24%;
  height: 44%;
  z-index: 1;
  top: 32%;
  transform: rotate(-8deg);
}

/* ==================================Road Map New ====================================== */
.headLine {
  position: fixed;
  left: 45%;
  transform: translate(-50%, 0);
  width: 8%;
  top: 5%;
  opacity: 0;
  z-index: 33;
}

.textMonitization {
  position: fixed;
  left: 26.2%;
  transform: translate(-50%, 0);
  width: 30%;
  top: 12%;
  z-index: 33;
}

.textMonitization .redTitle {
  text-align: end;
}

#hoverHead {
  height: 9vh;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 15vh;
  top: 3%;
  z-index: 1;
}

.handLine {
  opacity: 0;
  position: absolute;
  left: 37%;
  transform: translate(-50%, 0);
  width: 7%;
  top: 37%;
  z-index: 33;
}

#hoverHand {
  position: absolute;
  width: 8vh;
  top: 33%;
  height: 48vh;
  transform: translate(-347%, 0);
  z-index: 1;
}

.needleDropText {
  position: absolute;
  font-family: "Room-Black", sans-serif;
  font-size: 17px;
  left: 26.2%;
  transform: translate(-75%, 0);
  width: 30%;
  top: 43%;
  text-align: end;
  z-index: 33;
}

.chestLine {
  position: absolute;
  transform: translate(10%, 0);
  width: 10%;
  top: 33%;
  opacity: 0;
  z-index: 33;
}

.missionValueText {
  position: absolute;
  font-family: "Room-Black", sans-serif;
  font-size: 17px;
  right: -5.8%;
  transform: translate(-50%, 0);
  width: 30%;
  top: 31%;
  z-index: 33;
}

#hoverChest {
  height: 24vh;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 30vh;
  top: 30%;
  z-index: 1;
}

.stomachLine {
  position: absolute;
  transform: translate(50%, 0);
  width: 7%;
  top: 62%;
  opacity: 0;
  z-index: 33;
}

.partnershipText {
  width: 33%;
  position: absolute;
  transform: translate(31%, 0);
  top: 59%;
  z-index: 33;
}

#hoverStomach {
  height: 14vh;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 24vh;
  top: 58%;
  z-index: 1;
}

.legLine {
  position: absolute;
  transform: translate(50%, 0);
  width: 7%;
  top: 82%;
  opacity: 0;
  z-index: 33;
}

.teamAndCommunityText {
  width: 32%;
  position: absolute;
  transform: translate(31%, 0);
  bottom: 8px;
  z-index: 33;
}

#hoverLeg {
  height: 19vh;
  position: absolute;
  left: 51%;
  transform: translate(0%, 0);
  width: 14vh;
  top: 81%;
  z-index: 1;
}

.redacted-header {
  width: 6rem;
}

.redacted-header,
.animateMissionValues.redacted-body,
.animateNeedlepara.redacted-body {
  position: relative;
  color: transparent;
  background: #000;
  height: 1.5rem;
  margin-bottom: 0.25rem;
}

@media only screen and (max-width: 768px) {
  #hoverHead {
    height: 9vh;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    width: 15vh;
    top: calc(50% - 50vw);
    z-index: 1;
  }

  #hoverHand {
    position: absolute;
    width: 8vh;
    top: 37%;
    height: 36vh;
    transform: translate(-200%, 0);
    z-index: 1;
  }

  #hoverChest {
    height: 14vh;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: 16vh;
    top: 40%;
    z-index: 1;
  }

  #hoverStomach {
    height: 10vh;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: 16vh;
    top: 55%;
    z-index: 1;
  }

  #hoverLeg {
    height: 18vh;
    position: absolute;
    left: 51%;
    transform: translate(0%, 0);
    width: 10vh;
    top: 65%;
    z-index: 1;
  }
}

/* ===================================================================================== */

.aboutEffectVideo {
  display: none;
  position: absolute;
  z-index: 0;
  opacity: 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
  transition: opacity 2s ease;
  height: 100vh;
  object-fit: cover;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 5%,
    rgba(0, 0, 0, 1) 52%,
    rgba(0, 0, 0, 1) 44%,
    transparent 90%
  );
}

.showAboutEffectVideo {
  display: block;
}

.hideAboutEffectVideo {
  display: none;
}
.roadMapSegmentNone {
  display: none;
}
/* ======================================================.activeSegment Animations=================== */
.redText {
  opacity: 0;
  transition: opacity 1s;
}

.subTextHide {
  opacity: 0;
  transition: opacity 1s;
}

.subTextShow {
  transition-property: opacity;
  opacity: 1;
  transition: opacity 1s 4s;
}

.animateParaSection {
  margin: 0;
  opacity: 0;
  transition: opacity 1s;
}

.animateParaSectionShow {
  margin: 0;
  transition-property: opacity;
  opacity: 1;
  transition: opacity 1s 5s;
}

.animateParaSectionShow2 {
  transition-property: opacity;
  opacity: 1;
  transition: all 1s 2s;
}

.redTitleAnimate {
  opacity: 0;
  transition: opacity 1s;
}

.redTitleAnimateShow {
  transition-property: opacity;
  opacity: 1;
  transition: opacity 1s 3s;
}

.imageLayers {
  opacity: 0;
  transition: opacity 1s;
}

.imageLayersShow {
  opacity: 1;
  transition: opacity 1s;
}

.aboutRoadMapShow {
  opacity: 1;
  transition: opacity 1s;
}

.homeSectionText {
  opacity: 0;
  transition: opacity 1s;
}

.homeSectionContent {
  opacity: 1;
  transition: opacity 3s;
}

/* ============================== Hamburger============================ */
.menuIcon {
  width: 30px;
  height: 30px;
  display: none;
}

.closeIcon {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.socialIcons-mobile {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

/* ============================== RoadMap css ========================================== */
.redTitleMonitization {
  opacity: 0;
}

.redTitleNeedleDropText {
  opacity: 0;
}

.animateNeedlepara {
  opacity: 0;
  margin: 0;
}

.animateMissionValues {
  opacity: 0;
  margin: 0;
}

.redTitleMission {
  opacity: 0;
}

.redTitlePartnership {
  opacity: 0;
}

.animateParaPartnership {
  opacity: 0;
  margin: 0;
}

.redTitleTeamComunity {
  opacity: 0;
}

.animateParateamcomunity {
  opacity: 0;
  margin: 0;
}

.roadMapTitleOne {
  opacity: 1;
  transition: all 1s;
}

.animateMonitazation {
  opacity: 0;
  margin: 0;
}

.roadMapSubTextOne {
  transition-property: opacity;
  opacity: 1;
  transition: all 1s 0.5s;
}

.roadmapImages {
  opacity: 1;
  transition: opacity 0.5s;
}

.dispNone {
  display: none;
}

.mobileTattoodetails {
  display: none;
}

.lowOpacity {
  opacity: 0;
  transition: opacity 1s 0.5s;
}

/* ====================================================================== */
@media only screen and (max-width: 1350px) {
  .partnershipText {
    width: 36%;
  }

  .headLine {
    top: 8%;
  }

  .handLine {
    width: 6%;
    top: 40%;
  }

  .redTitleNeedleDropText {
    font-size: 25px;
  }
}

@media only screen and (max-width: 1200px) {
  .aboutpageText {
    position: absolute;
    left: 7%;
    width: 50%;
    font-size: 15px;
  }

  .missionvalueText {
    font-size: 15px;
  }
  .needleDropText {
    font-size: 15px;
  }
  .textMonitization {
    font-size: 15px;
  }
  .teamAndCommunityText {
    font-size: 15px;
  }
}

@media only screen and (max-width: 991px) {
  .roadmapWidth {
    width: none;
    height: 100vh !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(193, 185, 179, 1) 10%,
      rgba(193, 185, 179, 1) 90%,
      transparent 100%
    ) !important;
    overflow: hidden;
  }

  .wrap {
    bottom: 20%;
    transform: translate(-50%, 60%);
  }

  .aboutpageText {
    position: absolute;
    left: 7%;
    width: 80%;
    font-size: 17px;
    transform: translate(0, 10%);
  }

  .aboutEffectVideoShow {
    opacity: 1 !important;
    transition: opacity 1s;
  }

  ul {
    column-gap: 0;
  }

  li {
    padding: 20px 0px;
  }

  li.active::after {
    display: none;
  }

  .homeText {
    font-size: 1rem;
    width: 90%;
    left: 50%;
    top: 62%;
    transform: translateX(-50%);
    text-align: center;
  }

  .textMonitization {
    display: none;
  }

  .headLine {
    display: none;
  }

  .mobileTattoodetails {
    display: block;
  }

  .detailsBottom {
    position: absolute;
    width: 100%;
    height: 0px;
    background-color: rgba(178, 170, 159, 0.8);
    transform: translate(-50%, 0);
    z-index: 100;
    bottom: 0%;
    transition: height 1s;
    overflow: hidden;
  }

  .detailsBottomHeight {
    height: auto;
    transition: height 1s;
    z-index: 110;
  }

  .detailsBottomHeightTwo {
    height: auto;
    transition: height 1s;
    z-index: 110;
  }
  .detailsBottomHeightThird {
    height: auto;
    transition: height 1s;
    z-index: 110;
  }

  .detailsBottomHeightFourth {
    height: auto;
    transition: height 1s;
    z-index: 110;
  }

  .detailsBottomHeightFifth {
    height: auto;
    transition: height 1s;
    z-index: 110;
  }

  .legWidth {
    height: auto;
    width: 100%;
    /*
    width: 50%;
    transform: translate(-101%, 2%);
    */
  }

  .headerMobile {
    padding: 20px 20px;
  }

  .needleDropText {
    display: none;
  }

  .handLine {
    display: none;
  }

  .handMobile {
    padding: 20px 20px;
  }

  .missionValueText {
    display: none;
  }

  .chestLine {
    display: none;
  }

  .chestMobile {
    padding: 20px 20px;
  }

  .stomachLine {
    display: none;
  }

  .partnershipText {
    display: none;
  }

  .stomachMobile {
    padding: 20px 20px;
  }

  .teamAndCommunityText {
    display: none;
  }

  .legLine {
    display: none;
  }

  .legMobile {
    padding: 20px 20px;
  }

  .activeVideo {
    width: 100%;
  }

  .aboutEffectVideo {
    width: 100%;
  }

  /* mobile video home responsive */

  video {
    width: none;
    height: 40vh;
    transform: translate(-50%, 50%);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 5%,
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 90%,
      transparent 100%
    );
  }

  .roadMapVideo {
    height: 100vw !important;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 5%,
      rgba(0, 0, 0, 1) 11%,
      rgba(0, 0, 0, 1) 95%,
      transparent 100%
    );
  }

  #rev_slider_6_2_wrapper {
    height: 100vw !important;
    top: calc(50% - 50vw);
  }

  .homepageVideo {
    height: 86vw !important;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 5%,
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 90%,
      transparent 100%
    );
  }

  .aboutEffectVideo {
    width: none;
    height: 40vh;
    transform: translate(-50%, 50%);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 5%,
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 90%,
      transparent 100%
    );
  }
}

@media only screen and (max-width: 568px) {
  .redTitle {
    font-size: 24px;
  }

  .imageLayers {
    display: block;
  }

  form {
    margin-right: 0;
  }

  .activeVideo {
    width: 100%;
  }

  .aboutEffectVideo {
    width: 100%;
  }

  .legWidth {
    height: auto;
    z-index: 110;
  }

  #aboutParagraph {
    font-size: 1rem;
  }
}

/* mobile video home, roadmap responsive */
.roadmapWidth {
  position: fixed;
  z-index: -1;
  transition: opacity 2s;
  width: 100vw;
  object-fit: cover !important;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 2%,
    rgba(193, 185, 179, 1) 22%,
    rgba(193, 185, 179, 1) 73%,
    transparent 90%
  );
}

.homepageMobileDisplay {
  width: none;
  height: 40vh;
  transform: translate(-50%, 50%);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 2%,
    rgba(193, 185, 179, 1) 19%,
    rgba(193, 185, 179, 1) 73%,
    transparent 100%
  );
}

.homepageVideo {
  position: fixed;
  object-fit: cover !important;
  width: 100%;
}

.roadMapVideo {
  position: fixed;
  object-fit: cover !important;
  /* width: 100%; */
}

.noneAboutEffectVideo {
  display: none !important;
}

.raodmapSegmentNoneTwo {
  display: none;
}

.raodmapSegmentNoneThird {
  display: none;
}
.raodmapSegmentNoneFourth {
  display: none;
}
.raodmapSegmentNoneFifth {
  display: none;
}

.raodmapSegmentNoneSixth {
  display: none;
}

.roadMapDesktopNone {
  display: none;
}

.socialIconsShow {
  display: flex;
}

.socialIconsHide {
  display: none;
}

/* PageLoader */
.preloader-plus {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  background-color: #fff;
  z-index: 1002;
  transform: scale(1);
  transition: opacity 1s ease, transform 1s ease, left 0s ease;
}
.preloader-plus {
  z-index: 1003;
}
.preloader-plus .preloader-content,
.preloader-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.preloader-plus {
  background-color: #c4beb9;
}

.preloader-plus.complete {
  opacity: 0;
  transform: scale(1);
  transition-delay: 0s, 0s, 1000ms;
}
.preloader-plus.complete {
  left: 1000%;
}
.preloader-plus .preloader-content > :not(:last-child) {
  margin-bottom: 20px;
}
.preloader-plus .preloader-custom-img {
  animation: preloader-none 1500ms linear infinite;
  width: 100px;
}
.preloader-plus img {
  display: block;
  max-width: 100%;
}
.preloader-plus * {
  color: #090a09;
}
.preloader-plus * {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
/* Loading */
.preloader-2 {
  margin: 1rem auto;
}

.preloader-text {
  color: #fff;
  margin: 5px 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 2px;
}

.preloader-2 .line {
  width: 8px;
  height: 1.5rem;
  background: #fff;
  margin: 0 1px;
  display: inline-block;
  animation: opacity-2 1s infinite ease-in-out;
}
.preloader-2 .line-1 {
  animation-delay: 800ms;
}
.preloader-2 .line-2 {
  animation-delay: 600ms;
}
.preloader-2 .line-3 {
  animation-delay: 400ms;
}
.preloader-2 .line-4 {
  animation-delay: 200ms;
}
.preloader-2 .line-6 {
  animation-delay: 200ms;
}
.preloader-2 .line-7 {
  animation-delay: 400ms;
}
.preloader-2 .line-8 {
  animation-delay: 600ms;
}
.preloader-2 .line-9 {
  animation-delay: 800ms;
}

@keyframes opacity-2 {
  0% {
    opacity: 1;
    height: 1.5rem;
  }
  50% {
    opacity: 0;
    height: 1.25rem;
  }
  100% {
    opacity: 1;
    height: 1.5rem;
  }
}

.mute-icon-wrapper {
  position: fixed;
  bottom: 60px;
  left: 20px;
  z-index: 30;
}

.mute-icon-wrapper svg {
  opacity: 1;
}

@media (max-width: 768px) {
  .mute-icon-wrapper {
    bottom: auto;
    left: 20px;
    top: 20px;
  }
}

/*
@media only screen and (max-width: 440px) {
  .roadMapVideo {
    height: 90vw !important;
    top: 50%;
  }
}

@media only screen and (max-width: 430px) {
  .roadMapVideo {
    height: 85vw !important;
    top: 50%;
  }
}

@media only screen and (max-width: 415px) {
  .roadMapVideo {
    height: 100vw !important;
    top: 50%;
  }
}

@media only screen and (max-width: 415px) and (max-height: 800px) {
  .roadMapVideo {
    top: 55%;
  }
}

@media only screen and (max-width: 400px) {
  .roadMapVideo {
    top: 50%;
  }
}

@media only screen and (max-width: 394px) {
  .roadMapVideo {
    height: 80vw !important;
    top: 50%;
  }
}

@media only screen and (max-width: 394px) and (max-height: 800px) {
  .roadMapVideo {
    height: 90vw !important;
    top: 50%;
  }
}

@media only screen and (max-width: 380px) {
  .roadMapVideo {
    height: 90vw !important;
    top: 50%;
  }
}

@media only screen and (max-width: 380px) and (max-height: 800px) {
  .roadMapVideo {
    height: 85vw !important;
    top: 52%;
  }
}

@media only screen and (max-width: 370px) {
  .roadMapVideo {
    height: 100vw !important;
    top: 50%;
  }
}
*/

.revaddon-paintbrush,
.revaddonpaintbrush {
  width: 100%;
  height: 100%;
}

.dropTitle {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--red-highlight);
}

.dropText {
  position: relative;
  display: block;
  text-transform: uppercase;
  font-weight: 700;
}

.scrollYAuto {
  overflow-y: auto;
}

.coming-soon {
  color: var(--red-highlight);
  font-family: sans-serif;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  margin-top: 60px;
}

#roadMapSegment {
  text-transform: uppercase;
}

#buyNowShows {
  display: block;
  text-align: center;
  font-size: 20px;
}

.plusIcon {
  width: 30px;
  margin-left: 10px;
  transition: all 0.5s;
}

.plusIconOpen {
  transform: rotate(135deg);
}

@media only screen and (max-width: 480px) {
  .plusIcon {
    width: 24px;
  }
  #buyNowShows {
    width: 90%;
  }
}

/* Center Roadmap Revolution Slider Wrapper */
#rev_slider_6_1_wrapper,
#rev_slider_6_2_wrapper {
  max-width: 1140px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  left: 0 !important;
  right: 0 !important;
}

.alert-notice {
  display: none;
}

@media (max-width: 768px) {
  .alert-notice {
    display: block;
    position: fixed;
    right: 50px;
    top: 20px;
    z-index: 30;
  }

  .alert-notice__checkbox {
    display: none;
  }

  .alert-notice__icon-checked {
    opacity: 1;
    fill: var(--red-highlight);
  }

  .alert-notice__icon-unchecked {
    opacity: 1;
    fill: var(--stone-700);
  }

  .alert-notice__note {
    color: var(--red-highlight);
    position: fixed;
    font-weight: 700;
    display: none;
    top: 50px;
    right: 0;
    width: 12rem;
  }

  .alert-notice__checkbox:checked ~ .alert-notice__note {
    display: block;
  }
}