/* 

  z index ref:

      #blackout:                    9999

      #loading_vid_container:       1000

      #crayon_cursor_canvas:        115           crayon cursor
      #crayon_draw_canvas:          10            drawing 2d canvas

      .faq_container:               15            faq apeintosh (in front of #crayon_draw_canvas)
      #landing_frame:               15            framed apes apeintosh (in front of #crayon_draw_canvas)
      #apeintosh_container:         15            apeintosh (in front of #crayon_draw_canvas)

      #loading_plants_container:    110           fg plants (in front of #crayon_cursor_canvas)
      #godray_particles:            6             godray video
      #landing_house_canvas_bg:     4             bg images
      #landing_house_canvas:        5             webgl canvas
      .landing_linear_footer:       120           gradients up/down
      #into_plants_transparent:     150           plants push transparent video
      #loading_blackout:            200           fade to black
      #intro_vignette                111
      #enter_house_text_follow       115
      #landing_canvas_gradient_footer1 112

      #apeintosh stuffs             20-25       

*/

/* =============================================================================== */
/* =============================================================================== */
/* general */

:root {
	--mousexbg2: 0%;
	--mousexbg: 0%;
	--mousexfg: 0%;
	--mousexfg2: 0%;
	--mousexfg3: 0%;
}
body {
	width: 100%;
	min-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0px;
	background: #1f1c1a;
	font-family: 'Montserrat', sans-serif;
	/* scroll-behavior: smooth; */
}
div,
canvas,
input,
img {
	box-sizing: border-box;
}
div,
span,
p,
h1,
h2,
h3,
img,
canvas {
	user-select: none;
}
.rel_fill {
	/* relative box inside absolute box */
	position: relative;
	width: 100%;
	height: 100%;
}
.fullh {
	/* container that is full height, set dynamically in landing.js */
	background: none;
	width: 100%;
	min-height: 100vh; /* set by js */
}
.halfh {
	/* container that is half height, set dynamically in landing.js */
	background: none;
	width: 100%;
	min-height: 50vh; /* set by js */
}
.whitespace50,
.whitespace40,
.whitespace30,
.whitespace20,
.whitespace10 {
	width: 100%;
	height: 50px; /* set by js */
	/* 
    background: #0a1e76;
    background: #000;
 */
}
.ccCrayon,
.ccDot,
.ccHoverDot,
.ccFinger {
	/* crayon or dot or finger */
	cursor: none !important;
}
.ccNone {
	cursor: none !important;
}
.ccDefault {
	cursor: auto !important;
}
#gui {
	position: fixed;
	z-index: 9999;
	top: 15px;
	left: 15px;
	width: 400px;
}
.wh100 {
	width: 100%;
	height: 100%;
}
.w100 {
	width: 100%;
	height: auto;
}
.h100 {
	height: 100%;
	width: auto;
}
#blackout {
	position: fixed;
	z-index: 9999;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #1f1c1a;
}

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

#headernav {
	z-index: 1000;
}

/* =============================================================================== */
/* intro animation */
#loading_vid_container {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: black;
	/* background: radial-gradient(#252525, #1f1c1a); */
	z-index: 1000;
	cursor: none !important;
}

/* #loading_vid { */
/* top: 0px;left: 0px; */
/* width: 100%;height: 100%; */
/* width: 100%; */
object-fit: fill;
cover is problematic on chrome
/* } */

.fadeBackground {
	animation-name: fadeOut;
	animation-timing-function: ease-in;
	animation-duration: 1s;
	animation-delay: 1s;
	/* animation-delay: 6s;  */
}
.fadeGif {
	animation-name: fadeOut, zoomOut_GIF;
	animation-timing-function: ease-in, ease-in;
	animation-duration: 1s, 1.3s;
	/* animation-delay: 5.3s, 5.3s; */
	/* animation-delay: 5.3s, 5.3s; */
}
@keyframes fadeOut {
	0% {
		opacity: 1;
		/* filter: blur(0px); */
	}
	100% {
		opacity: 0;
		/* filter: blur(10px); */
	}
}
@keyframes zoomOut_GIF {
	0% {
		transform: scale(1);
		filter: blur(0px);
	}
	100% {
		transform: scale(2);
		filter: blur(10px);
	}
}

#doorFadeOut {
	position: absolute;
	pointer-events: none !important;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	z-index: 100000;
	opacity: 0;
}

.zoomDR {
	animation-name: zoomDR;
	/* animation-timing-function: ease-out; */
	animation-duration: 1.65s;
}
@keyframes zoomDR {
	60% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#into_plants_transparent {
	pointer-events: none;
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 150;
}
.zoomDR_Plants {
	animation-name: zoomDR_Plants;
	animation-timing-function: ease-in;
	animation-duration: 2s;
	/* animation-delay: 2s; */
}
@keyframes zoomDR_Plants {
	0% {
		background-size: 400% 400%, 200% 200%, 120% 120%;
	}
	100% {
		background-size: 1200% 1200%, 600% 600%, 360% 360%;
	}
}

.zoomBG {
	animation-name: zoomBG;
	/* animation-timing-function: ease-out; */
	animation-duration: 3s;
}
@keyframes zoomBG {
	0% {
		transform: scale(0.5); /*translate(0, 40px);*/
	}
	100% {
		transform: scale(1); /*translate(0, 0);*/
	}
}

.zoomGR {
	animation-name: zoomGR;
	/* animation-timing-function: ease-out; */
	animation-duration: 2.5s;
	animation-delay: 1s;
}
@keyframes zoomGR {
	0% {
		/* transform: scale(0.65) translate(0, 40px); */
		opacity: 0;
	}
	100% {
		/* transform: scale(1) translate(0, 0); */
		opacity: 0.45;
	}
}

#intro_container {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

#intro_wrapper {
	/* pointer-events: none; */
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

#zoomGradient {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 5%, rgba(31, 28, 26, 0.8) 20% /* coral 20% */);
	/* background-color: coral; */
	z-index: 100;
}

.introGradient {
	animation-name: introGradient;
	animation-timing-function: ease-out;
	animation-duration: 7.5s;
}
@keyframes introGradient {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(7);
	}
}

#intro_vignette {
	/* display: none; */
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(0, 0, 0, 0) 60%, rgba(31, 28, 26, 1) 90%);
	/* background-color: coral; */
	z-index: 111;
}
#loading_plants_container {
	opacity: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 110;
	transform: translateZ(0);
	background-image: url(../images/plants/layer_1.png), url(../images/plants/layer_3.png),
		url(../images/plants/layer_5.png);
	background-size: 400% 400%, 200% 200%, 120% 120%;
	background-repeat: no-repeat;
	/* background-position: center; */
	background-position-x: 50%, 50%, 50%;
	background-position-y: 50%, 50%, 50%;
}
.swipeUp {
	animation-name: swipeUp;
	animation-timing-function: ease-in;
	animation-duration: 1s;
	animation-delay: 0.2s;
}
@keyframes swipeUp {
	0% {
		top: 0;
	}
	100% {
		top: -110vh;
	}
}

.swipeUpFooter {
	animation-name: swipeUpFooter;
	animation-timing-function: ease-in;
	animation-duration: 1s;
	animation-delay: 0.2s;
}
@keyframes swipeUpFooter {
	0% {
		top: 100vh;
	}
	100% {
		top: -10vh;
	}
}

.swipeDownFooter {
	animation-name: swipeDownFooter;
	animation-timing-function: ease-out;
	animation-duration: 0.5s;
	animation-delay: 0.1s;
}
@keyframes swipeDownFooter {
	0% {
		top: -10vh;
	}
	100% {
		top: 100vh;
	}
}

.swipeDown {
	animation-name: swipeDown;
	animation-timing-function: ease-out;
	animation-duration: 0.5s;
	animation-delay: 0.1s;
}
@keyframes swipeDown {
	0% {
		top: -110vh;
		/* opacity: 0; */
	}
	100% {
		top: 0;
		/* opacity: 1; */
	}
}

.swipeUpPlants {
	animation-name: swipeUpPlants;
	/* animation-timing-function: ease-in; */
	animation-duration: 1s;
}
@keyframes swipeUpPlants {
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		background-position-y: 100%, 100%, 100%;
	}
}

.swipeDownPlants {
	animation-name: swipeDownPlants;
	/* animation-timing-function: ease-in; */
	animation-duration: 0.5s;
}
@keyframes swipeDownPlants {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	100% {
		background-position-y: 50%, 50%, 50%;
		/* 50%,
        50%,
        50%; */
	}
}

.introHouse {
	animation-name: intro_House;
	animation-timing-function: ease-out;
	animation-duration: 2s;
}

@keyframes intro_House {
	0% {
		filter: blur(4px);
	}
	100% {
		filter: blur(0px);
	}
}

.introPlants {
	animation-name: zoomOut_Plants;
	-webkit-animation-name: zoomOut_Plants;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	/* animation-delay: 2s; */
}
@keyframes zoomOut_Plants {
	0% {
		opacity: 0;
		background-size: 100% 100%, 100% 100%, 100% 100%;
		/* 100% 100%,
        100% 100%,
        100% 100%; */
	}
	25% {
		opacity: 1;
	}
	100% {
		background-size: 400% 400%, /* 525% 525%, */ 200% 200%, /* 140% 140%, */ 120% 120%;
		/* 110% 110%; */
	}
}
@-webkit-keyframes zoomOut_Plants {
	0% {
		opacity: 0;
		background-size: 100% 100%, 100% 100%, 100% 100%;
		/* 100% 100%,
        100% 100%,
        100% 100%; */
	}
	25% {
		opacity: 1;
	}
	100% {
		background-size: 400% 400%, /* 525% 525%, */ 200% 200%, /* 140% 140%, */ 120% 120%;
		/* 110% 110%; */
	}
}

/* =============================================================================== */
/* =============================================================================== */
/* overlays */
#fps_house {
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 200;
	font-size: 12px;
	opacity: 0.5;
	color: #fff;
	top: 15px;
	width: 100%;
	text-align: center;
	z-index: 1000;
	display: none;
}
#fps_cc {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 200;
	font-size: 12px;
	opacity: 0.5;
	color: #fff;
	top: 30px;
	width: 100%;
	text-align: center;
	z-index: 1000;
	display: none;
}
#crayon_canvas_helper {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 200;
	font-size: 12px;
	opacity: 0.75;
	color: #d19012;
	top: -1000px;
	width: 100%;
	text-align: center;
	z-index: 1000;
}

#header .overlay.open {
	z-index: 113;
}
/* =============================================================================== */
/* landing house */
#landing_canvas {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#godray_particles {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 6; /* in front of house */
	pointer-events: none;
	opacity: 0;
	transform: translateZ(0px);
}
#godray_particles_video {
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#godray_particles video {
	object-fit: fill;
}
#landing_house_canvas {
	filter: blur(4px);
	position: absolute;
	z-index: 5;
	cursor: none !important;
}
#landing_house_canvas_bg {
	filter: blur(4px);
	/* bg images w/ parallax */
	position: absolute;
	z-index: 4;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-image: url(../images/background/BG_02.png), url(../images/background/BG_01.png);
	background-size: 110% 110%, 110% 110%;
	background-repeat: no-repeat;
	/* background-position: center; */
	background-position-x: 50%, 50%;
	background-position-y: 50%, 50%;
}
.landing_house_canvas_bg_img {
	width: 100vw;
	height: 100vh;
	opacity: 0.5;
}
#landing_gui,
#members_gui {
	position: absolute;
	z-index: 3;
	left: 10px;
	top: 10px;
	/* display: none; */
}
#loading_blackout {
	background: #000;
	position: absolute;
	z-index: 200;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.landing_linear_footer {
	width: 100%;
	height: 300px;
	background-size: 50px 300px;
	pointer-events: none;
	z-index: 120;
}
#landing_canvas_gradient_footer1 {
	/* gradient up */
	background-image: url('../images/gradient_black_bottom_03.png');
	bottom: 0px;
	left: 0px;
	position: absolute;
	z-index: 112;
}
#landing_canvas_gradient_footer2 {
	/* gradient down */
	background-image: url('../images/gradient_black_bottom_01.png');
	position: relative;
}
#enter_house_text_follow {
	font-family: azo-sans-uber, sans-serif;
	font-size: 36px;
	font-weight: 200;
	color: #e0b23d;
	text-shadow: 0px 0px 36px rgba(0, 0, 0, 0.8);
	text-align: center;
	width: 200px;
	position: absolute;
	top: -100px;
	left: -100px; /* set by js */
	z-index: 115;
	display: none;
}
#enter_house_dot_follow {
	position: absolute;
	top: 0px;
	left: 0px; /* set by js */
	z-index: 110;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: #fff;
}

/* =============================================================================== */
/* =============================================================================== */
/* drawing crayon canvas */
#crayon_cursor_canvas {
	position: fixed;
	z-index: 115;
	left: 100px;
	top: 100px;
	width: 100px;
	height: 100px; /* set by js in crayon_cursor.js */
	overflow: hidden; /*canvas will be cutoff anyways*/
	/* border:2px dashed #aaaaaa; */
	background: none;
	pointer-events: none;
	transform: translateZ(0);
}
#crayon_draw_canvas {
	position: absolute;
	z-index: 10;
	/* z-index: 99999; */
	/* border:6px solid #0f0; */
	left: 0px;
	top: 0px;
	width: 100px;
	height: 100px; /* set by js */
	background: none;
	pointer-events: none;
	transform: translateZ(0);
}

/* =============================================================================== */
/* =============================================================================== */
/* mission */

#landing_mission {
	min-height: 100vh;
	/*   margin-top: -25vh; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#landing_mission .randoblur_trigger {
	top: 99%;
	height: 1%;
}

#landing_mission_content {
	width: 100%;
	height: auto;
	text-align: center;
}

/* 
.unBlur {
  animation-name: unBlur;
  animation-duration: 2.5s;
}
@keyframes unBlur {
  0% {
    filter: blur(15px);
    transform: translateY(150px);
  }
  100% {
    filter: blur(0px);
    transform: translateY(0);
  }
}
 */
#landing_mission_line1 {
	color: #9b9b9b;
	text-align: center;
	font-size: 36px;
	/*   font-size: clamp(12px, 2.5vw, 54px); */
	font-weight: 900;
	font-family: azo-sans-uber, sans-serif;
}
#landing_mission_line2 {
	color: #9b9b9b;
	text-align: center;
	font-size: 28px;
	/*   font-size: clamp(10px, 1.9vw, 42px); */
	font-weight: 300;
	line-height: 1.5;
	font-family: 'Montserrat', sans-serif;
	width: 23em;
	text-align: center;
	margin: 0.5em auto;
}

/* =============================================================================== */
/* =============================================================================== */
/* fsu text */
#fsu_container {
	position: relative;
	width: 100%;
	height: 2000px; /*set by js*/
	background: #1f1c1a;
	background: none;
	/* border:4px solid #aaa; */
	margin-top: -75vh;
}
#fsu_debug {
	position: fixed;
	z-index: 200;
	color: #ccc;
	opacity: 0.8;
	font-size: 10px;
	font-weight: 300;
	width: 1200px;
	height: auto;
	left: calc(50% - 600px);
	bottom: 50px;
	text-align: center;
	display: none;
}
#landing_fsu {
	/* border:2px solid #e27c8c; */
}
/* #fsu_images {
  width: 100%;
  height: auto;
  text-align: center;
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
} */
#fsu_canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
	background: none;
	/* border: 10px solid #fcc400; */
}

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

#container {
	overflow: hidden;
}

/* =============================================================================== */
/* mac */
#landing_mac {
	/* background-color: #222; */
	/* border-top:1px solid #00f;
    border-bottom:1px solid #00f; */
}
#apeintosh_container {
	/* width:40%;margin-left:30%; */
	width: 100vw;
	height: 120vw;
	/* border: 4px solid #aaa; */
	position: relative;
	z-index: 21;
}
#apeintosh_container img {
	width: 100%;
	height: auto;
}
#apeintosh_container .Apeintosh-BG,
#apeintosh_container .Apeintosh-MG,
#apeintosh_container .Apeintosh-FG,
#apeintosh_container .Apeintosh-screens-mask {
	-webkit-mask-size: 100% auto;
	-webkit-mask-position: center 100%;
	mask-size: 100% auto;
	mask-position: center 100%;
}

#apeintosh_container .Apeintosh-BG {
	-webkit-mask-image: url(../images/ApeintoshPainting-smallmask-BG.png);
	mask-image: url(../images/ApeintoshPainting-smallmask-BG.png);
}

#apeintosh_container .Apeintosh-MG {
	-webkit-mask-image: url(../images/ApeintoshPainting-smallmask-MG.png);
	mask-image: url(../images/ApeintoshPainting-smallmask-MG.png);
	position: relative;
	z-index: 21;
}

#apeintosh_container .Apeintosh-FG.layer-1 {
	-webkit-mask-image: url(../images/ApeintoshPainting-smallmask-FG1.png);
	mask-image: url(../images/ApeintoshPainting-smallmask-FG1.png);
}

/* 
#apeintosh_container .Apeintosh-FG.layer-2 {
  -webkit-mask-image: url(../images/ApeintoshPainting-mask-FG2.png);
  mask-image: url(../images/ApeintoshPainting-mask-FG2.png);
}

#apeintosh_container .Apeintosh-FG.layer-3 {
  -webkit-mask-image: url(../images/ApeintoshPainting-mask-FG3.png);
  mask-image: url(../images/ApeintoshPainting-mask-FG3.png);
}
 */

#apeintosh_container .Apeintosh-FG.layer-3 {
	-webkit-mask-image: url(../images/ApeintoshPainting-smallmask-FG2-3.png);
	mask-image: url(../images/ApeintoshPainting-smallmask-FG2-3.png);
}

#apeintosh_container .godrays {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	/*   mix-blend-mode: screen; */
	/* 	filter: contrast(200%); */
}

/* 
#apeintosh_container .parallax-FX .parallax-fader {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
 */

#apeintosh_enroll {
	position: absolute;
	top: 50vh;
	left: 0;
}

.Apeintosh-screens {
	position: absolute;
	top: 41.2%;
	left: 29.8%;
	width: 40%;
	height: 27%;
	z-index: 21;
	transform: rotate(-7.75deg);
	mix-blend-mode: multiply;
	/* 	opacity: 0.9; */
}

.Apeintosh-screens .Ape-screen {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 67%;
	transform: translate(-50%, -50%) scale(0.4);
	opacity: 0;
	transition: 0.5s opacity ease-in-out;
	pointer-events: none;
}

/* 
.Apeintosh-screens .Ape-screen.screen-BG {
	transform: translate(-50%, -50%) scale(.9);
}
 */

/* 
.Apeintosh-screens.fadein .Ape-screen.screen-BG {
	opacity: 1;
}
 */

.Apeintosh-screens.fadein .Ape-screen.screen-welcome {
	animation-delay: 0.5s;
	animation-name: fadeScreenInOut;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-fill-mode: forwards;
}

.Apeintosh-screens.fadein .Ape-screen.screen-enroll {
	opacity: 1;
	transition-delay: 1.5s;
	pointer-events: auto;
}

@keyframes fadeScreenInOut {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* =============================================================================== */

.animate-FX.parallax {
	position: relative;
	height: 100%;
}

.animate-FX.parallax .animate-trigger[data-triggertype='in'][data-triggergroup='apeintosh'] {
	top: 0;
	height: 200%;
}

.animate-FX .animate-trigger[data-triggertype='in'][data-triggergroup='godrays'] {
	top: 50%;
	height: 50vh;
}

.animate-FX .animate-trigger[data-triggertype='out'][data-triggergroup='godrays'] {
	top: auto;
	bottom: 0%;
	height: 40vh;
}

/* 
.animate-FX.parallax .parallax-fader {
  opacity: 0;
}
 */

.animate-FX:not(.in-view) .animate-layer[data-animtype='fade']:not(.rarity_vignette) {
	/* class set by IntersectionObserver */
	visibility: hidden;
	position: relative;
}

.animate-FX.parallax .animate-layer[data-animtype='parallax'] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	perspective: 1px;
	perspective-origin: center center;
	/*   transition: perspective-origin 1s cubic-bezier(0, 1, 0, 1); */
	z-index: 22;
	pointer-events: none; /* Otherwise they'll block clicks */
	will-change: perspective-origin;
}

.animate-FX.parallax[data-triggergroup='apeintosh'] .animate-layer[data-animtype='parallax'] {
	perspective-origin: var(--mousex-perspective) var(--parallax-apeintosh-y);
}

.animate-FX.parallax .animate-layer[data-animtype='parallax'].above {
	z-index: 24;
	pointer-events: none;
}

.animate-FX.parallax .parallax-plane {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.animate-FX.parallax .parallax-plane.deep-background {
	transform: translateZ(-2px) scale(3.1);
}

/* 
.animate-FX.parallax .parallax-plane.background {
  transform: translateZ(-1px) scale(2.1);
}
 */

.animate-FX.parallax .parallax-plane.foreground {
	transform: translateZ(0.5px) scale(0.6);
	z-index: 22;
	pointer-events: none; /* Foreground planes must not block cursor clicks */
}

.animate-FX.parallax .parallax-plane.foreground.layer-2 {
	transform: translateZ(0.67px) scale(0.4);
	z-index: 23;
}

.animate-FX.parallax .parallax-plane.foreground.layer-3 {
	transform: translateZ(0.75px) scale(0.3);
	z-index: 24;
}

#apeintosh_container .animate-FX.parallax .parallax-plane.deep-background img {
	filter: blur(8px);
	opacity: 0.5;
}

#apeintosh_container .animate-FX.parallax .parallax-plane.background img {
	filter: blur(2px);
	opacity: 0.75;
}

#apeintosh_container .animate-FX.parallax .parallax-plane.foreground img {
	filter: blur(2px);
}

/* 
#apeintosh_container .animate-FX.parallax .parallax-plane.foreground.layer-2 {
	filter: blur(3px);
}
 */

#apeintosh_container .animate-FX.parallax .parallax-plane.foreground.layer-3 img {
	filter: blur(4px);
}

#apeintosh_container .animate-FX.parallax .parallax-plane.foreground.layer-3 {
	box-shadow: 0 20vh 20vh 10vh #1f1c1a;
}

#apeintosh_container .animate-FX.parallax .parallax-plane.foreground.layer-1:after {
	content: '';
	background-color: #1f1c1a;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20vh;
	height: 23vh;
	z-index: -1;
}

#apeintosh_container .animate-FX.parallax .parallax-plane.foreground.layer-3:after {
	content: '';
	background-color: #1f1c1a;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0vh;
	height: 64vh;
	z-index: -1;
}

#apeintosh_container .animate-FX.parallax .parallax-plane.foreground img {
	position: relative;
	top: -25vh;
}

#apeintosh_container .animate-FX.parallax .parallax-plane.foreground.layer-3 img {
	position: relative;
	top: -50vh;
}

#apeintosh_container .animate-FX[data-triggergroup='godrays'] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 23;
	mix-blend-mode: screen;
	pointer-events: none;
}

#apeintosh_container .animate-FX .animate-layer[data-animtype='fade'] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 23;
	pointer-events: none;
	/* 	background-color: #1f1c1a; */
}

/* =============================================================================== */
#landing_frame {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: -15vh;
}
#framed_ape {
	width: clamp(400px, 36vw, 72vh);
	height: clamp(400px, 36vw, 72vh);
	/*   margin-left: 32%; */
	/* border: 1px dashed #666; */
	transform: rotateZ(-5deg);
	position: relative;
	z-index: 2;
	transition: transform 0.333s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 
#framed_ape.active {
  transform: scale(1.3) rotateZ(-6deg);
}
 */

.framed_ape_container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
/* 
      var frame_h = Math.floor($("#framed_ape").height()); //!!!
      var frame_top = Math.floor((this.h - frame_h)*0.5);
      var frame_h = Math.floor((this.w)*0.36);
      $("#framed_ape").css("top",frame_top+"px").css("height",frame_h+"px");
 */

.framed_ape_container .class-plaque {
	position: relative;
	z-index: 1;
}

.framed_ape_container .class-plaque img {
	display: block;
	margin: 4% auto;
	width: 50%;
	height: auto;
	position: relative;
	left: 8%;
}

#landing_frame_vignette {
	position: absolute;
	z-index: 0;
	width: 66vw;
	height: 66vw;
	top: calc(50% - 33vw);
	left: calc(50% - 33vw);
	background-image: radial-gradient(ellipse closest-side at center, rgba(40, 40, 40, 1) 0%, rgba(40, 40, 40, 0) 100%);
	/* 
	box-shadow: 0 0 10vw 10vw rgb(0,0,0) inset;
	background: #1a1a1a;
 */
}

/* 
       var frame_bg_w = Math.floor(this.w*0.66); //!!!
       var frame_bg_h = frame_bg_w; //!!!
       var frame_container = Math.floor($(".framed_ape_container").height());
       var frame_bg_top = ((frame_container-frame_bg_h)*0.5);
       var frame_bg_left = ((this.w-frame_bg_w)*0.5);
       var box_shadow = Math.floor(this.w*0.1); 
       $("#landing_frame_vignette").css("top",frame_bg_top+"px").css("left",frame_bg_left+"px").css("height",frame_bg_h+"px").css("width",frame_bg_w+"px");
      $("#landing_frame_vignette").css('box-shadow', '0 0 '+box_shadow+'px '+box_shadow+'px #000 inset');
 */

#ape_frame {
	position: absolute;
	z-index: 2;
	width: 95%;
	height: 90%;
	top: 0px;
	left: 0px;
}

#ape_frame > img {
	width: 100%;
	height: auto;
}

#framed_apes,
#framed_apes2 {
	position: absolute;
	z-index: 1;
	margin: 8% 6% 6% 6%;
	width: 84%;
	height: 86%;
	top: 0px;
	left: 0px;
	overflow: hidden;
	box-shadow: -10px 30px 20px 20px rgba(0, 0, 0, 0.25);
	/* border:2px solid #00f; */
}

.framed_ape2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.framed_ape2_visible {
	z-index: 2;
}
.framed_ape_nonvisible {
	z-index: 1;
}

.framed_ape {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 100%;
}
.framed_ape_visible {
	left: 0%;
}
.framed_ape_nonvisible {
	left: 100%;
}
.ape_right_to_left_in {
	-webkit-animation: right_to_left_in 0.35s 1 forwards;
	animation: right_to_left_in 0.35s 1 forwards;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}
@-webkit-keyframes right_to_left_in {
	0% {
		left: 100%;
	}
	100% {
		left: 0%;
	}
}
@keyframes right_to_left_in {
	0% {
		left: 100%;
	}
	100% {
		left: 0%;
	}
}
.ape_right_to_left_out {
	-webkit-animation: right_to_left_out 0.35s 1 forwards;
	animation: right_to_left_out 0.35s 1 forwards;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}
@-webkit-keyframes right_to_left_out {
	0% {
		left: 0%;
	}
	100% {
		left: -100%;
	}
}
@keyframes right_to_left_out {
	0% {
		left: 0%;
	}
	100% {
		left: -100%;
	}
}

/* =============================================================================== */
/* =============================================================================== */
/*ROADMAP*/
#landing_roadmap_title {
	margin-top: 50vh;
	padding-bottom: 7.5vh;
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
}

#landing_roadmap_title_content {
	/* 
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
  text-align: center;
 */
}

#landing_roadmap_title.in-view #landing_roadmap_title_content {
	position: relative;
	/* 
  top: 50vh;
  left: 0;
  transform: translateY(-50%);
 */
}

/* 
#landing_roadmap_title #roadmap_title_line1,
#landing_roadmap_title #roadmap_title_line2 {
	transition: transform 0.667s cubic-bezier(.5,0,.5,1.1);
}

#landing_roadmap_title:not(.titles-in) #roadmap_title_line1 {
  transition-delay: 0.1s;
  transform: translateX(-150vw) scaleX(1.5);
}
#landing_roadmap_title:not(.titles-in) #roadmap_title_line2 {
  transition-delay: 0s;
  transform: translateX(150vw) scaleX(1.5);
}
 */

/* 
#landing_roadmap_title #roadmap_title_line1 {
  transform: translateX(-150vw);
}
#landing_roadmap_title #roadmap_title_line2 {
  transform: translateX(150vw);
}
 */

#roadmap_title {
	font-family: azo-sans-uber, sans-serif;
	font-size: 120px;
	/*   font-size: clamp(18px, 7vw, 180px); */
	font-weight: 900;
	color: #cb9b23;
	text-align: center;
	line-height: 110px;
	letter-spacing: 0.025em;
}

#roadmap_title_line1,
#roadmap_title_line2 {
	position: relative;
}

#roadmap_view {
	margin-top: 40px;
	display: inline-block;
	font-family: azo-sans-uber, sans-serif;
	font-size: 20px;
	/*   font-size: clamp(9px, 1.4vw, 30px); */
	font-weight: lighter;
	text-align: center;
	color: #ccc;
	text-decoration: none;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid #7c7c7c;
	border-radius: 2em;
	padding: 0.5em 2em;
	transition: 0.5s opacity ease-in-out, 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

#roadmap_view:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	transform: scale(1.05);
}

#landing_roadmap_title:not(.fadein) #roadmap_view {
	opacity: 0;
}

/* =============================================================================== */
/* =============================================================================== */
/* crayon selector team section */

#landing_team_title {
	margin-top: 50vh;
	/* 	min-height: 100vh; */
	height: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#team_title {
	font-family: azo-sans-uber, sans-serif;
	font-size: 120px;
	/*   font-size: clamp(18px, 7vw, 180px); */
	font-weight: 900;
	color: #cb9b23;
	text-align: center;
	margin: 0;
}

#landing_crayons {
	margin-top: 5vh;
	margin-bottom: 25vh;
}

#landing_crayons .crayons-team {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: clamp(640px, 66.67vw, 100vh);
	margin: 0 auto;
}

#landing_crayons .crayons-team .crayonpanel {
	width: 39%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

#landing_crayons .crayonbox {
	margin: 5% 6% 0% 6%;
	transform: rotate(7.2deg);
	position: relative;
}

#landing_crayons .crayonbox:after {
	content: '';
	width: 120%;
	height: 120%;
	position: absolute;
	top: 2%;
	left: -8%;
	background-image: url('../images/crayons/crayonbox-shadow.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	opacity: 0.25;
	z-index: -1;
}

#landing_crayons .crayonbox-front {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 2;
	pointer-events: none;
}

#landing_crayons .crayonbox-front img {
	width: 100%;
	height: auto;
}

#landing_crayons .crayons-set {
	display: flex;
	flex-direction: row;
	position: relative;
	z-index: 1;
	width: 95%;
	margin: 0 auto;
	top: 6%;
}

#landing_crayons .crayons-set .crayon {
	position: relative;
	cursor: pointer;
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

#landing_crayons .crayons-set .crayon.up {
	transform: translateY(-5%);
}

#landing_crayons .crayons-set .crayon.black {
	margin-left: -2%;
}

#landing_crayons .crayons-set .crayon.purple {
	margin-left: -1.3%;
}

#landing_crayons .crayons-set .crayon.blue {
	margin-left: -1%;
}

#landing_crayons .crayons-set .crayon.green {
	margin-left: -1.2%;
}

#landing_crayons .crayons-set .crayon.yellow {
	margin-left: -0.5%;
}

#landing_crayons .crayons-set .crayon.orange {
	margin-left: -0.5%;
}

#landing_crayons .crayons-set .crayon.red {
	margin-left: -0.5%;
}

#landing_crayons .crayons-set .crayon.brown {
	margin-left: -0.5%;
}

#landing_crayons .crayons-set .crayon img {
	width: 100%;
	height: auto;
}

#landing_crayons .crayons-set .crayon:before {
	content: '';
	position: absolute;
	top: 1%;
	left: 25%;
	width: 100%;
	height: 100%;
	background-image: url('../images/crayons/crayon-shadow.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
	opacity: 0.333;
}

#landing_crayons .crayonbox-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	-webkit-mask-size: 100% auto;
	mask-size: 100% auto;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url(../images/crayons/crayonbox-mask.png);
	mask-image: url(../images/crayons/crayonbox-mask.png);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#landing_crayons .crayonbox-back img {
	width: 100%;
	height: auto;
}

#landing_crayons .crayons-team .teampanel {
	width: 57%;
	margin-left: 4%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

#landing_crayons .crayons-team .teampanel .team-portrait {
	width: 100%;
}

#landing_crayons .crayons-team .teampanel .team-portrait img {
	width: 100%;
	height: auto;
	border-radius: 2%;
	overflow: hidden;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

#landing_crayons .crayons-team .teampanel .team-handle {
	font-family: azo-sans-uber, sans-serif;
	font-size: 64px;
	/*   font-size: clamp(16px, 4.4vw, 96px); */
	font-weight: 900;
	color: #cb9b23;
	margin: 0;
	white-space: nowrap;
}

#landing_crayons .crayons-team .teampanel .team-role {
	font-family: matt-b, sans-serif;
	font-size: 28px;
	/*   font-size: clamp(16px, 1.9vw, 42px); */
	color: #fff;
	margin: 0;
	white-space: nowrap;
}

/* =============================================================================== */
/* =============================================================================== */
/* rarities */

/* 
.landing_rarity {
  margin-bottom: 50vh;
}
 */

.animate-trigger {
	position: absolute;
	height: 1%;
	left: 0;
	right: 0;
	pointer-events: none;
}

.landing_rarity {
	padding-top: 25vh;
}

.landing_rarity_container {
	position: relative;
	min-height: 100vh;
}

.animate-trigger[data-triggertype='in'] {
	top: 0;
	height: 33vh;
}

.animate-trigger[data-triggertype='out'] {
	top: 100%;
	height: 33vh;
}

.animate-trigger[data-triggertype='out'][data-triggergroup='rarity'] {
	top: 150%;
}

.animate-trigger[data-triggertype='in'][data-triggergroup='roadmap'],
.animate-trigger[data-triggertype='in'][data-triggergroup='team'] {
	top: 100%;
	height: 45vh;
}

.animate-trigger[data-triggertype='in'][data-triggergroup='vignette'] {
	top: 75vh;
	bottom: auto;
	height: 25vh;
}

.animate-trigger[data-triggertype='out'][data-triggergroup='vignette'] {
	top: auto;
	bottom: 0;
	height: 50vh;
}

.animate-trigger[data-triggertype='in'][data-triggergroup='faq'] {
	top: 20%;
	height: 40vh;
}

.landing_rarity_textbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.rarity_traits_msg {
	font-family: azo-sans-uber, sans-serif;
	font-size: 120px;
	/*   font-size: clamp(18px, 7vw, 180px); */
	font-weight: 900;
	color: #cb9b23;
	text-align: center;
	line-height: 1;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	text-align: center;
	letter-spacing: 0.075em;
}

.landing_rarity_container.in-view .landing_rarity_textbox {
	position: relative;
	/* 
  position: fixed;
  top: 0;
  height: 100%;
  left: 0;
  right: 0;
 */
}

.landing_rarity_container.in-view .rarity_traits_info {
	margin-top: 1em;
}

.rarity_img {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 10px;
}

.bounce-top {
	-webkit-animation: bounce-top 1s both;
	animation: bounce-top 1s both;
}
@-webkit-keyframes bounce-top {
	0% {
		-webkit-transform: translateY(-45px);
		transform: translateY(-45px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 1;
	}
	24% {
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-24px);
		transform: translateY(-24px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	65% {
		-webkit-transform: translateY(-12px);
		transform: translateY(-12px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	82% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	93% {
		-webkit-transform: translateY(-4px);
		transform: translateY(-4px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
}
@keyframes bounce-top {
	0% {
		-webkit-transform: translateY(-45px);
		transform: translateY(-45px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 1;
	}
	24% {
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-24px);
		transform: translateY(-24px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	65% {
		-webkit-transform: translateY(-12px);
		transform: translateY(-12px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	82% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	93% {
		-webkit-transform: translateY(-4px);
		transform: translateY(-4px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
}

/*New Div always has a position: relative*/
div {
	position: relative;
	overflow: visible;
}

.framed_ape_whitespace,
.rarities_whitespace {
	height: 50vh;
}

/*Rarity Traits Section*/
/* .rarity_traits_container{ border: red solid 2px; } */
.rarity_traits_text {
	font-family: azo-sans-uber, sans-serif;
	/*   letter-spacing: 0.15em; */
	transition: transform 0.1s cubic-bezier(0.5, 0, 0.5, 1.1);
}

/* 
.landing_rarity:not(.in-view) .rarity_traits_rarity_text,
.landing_rarity:not(.in-view) .rarity_traits_traits_text {
  visibility: hidden;
}
 */

/* 
.rarity_traits_rarity_text {
  margin: 0;
  position: relative;
  left: -1em;
}
.rarity_traits_traits_text {
  margin: 0;
  position: relative;
  left: 1em;
  transition-delay: 0.125s;
}

.rarity_traits_container:not(.titles-in) .rarity_traits_rarity_text {
  transition-delay: 0.125s;
  transform: translateX(-150vw) scaleX(1.5);
}
.rarity_traits_container:not(.titles-in) .rarity_traits_traits_text {
  transition-delay: 0s;
  transform: translateX(200vw) scaleX(1.5);
}
 */

.rarity_traits_rarity_text,
.rarity_traits_traits_text {
	margin: 0;
	position: relative;
}

.rarity_traits_container .rarity_traits_rarity_text {
	transform: translateX(-150vw);
}
.rarity_traits_container .rarity_traits_traits_text {
	transform: translateX(150vw);
}

.rarity_traits_info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rarity_traits_info_blurb {
	font-family: 'Montserrat', sans-serif;
	color: #ccc;
	font-size: 22px;
	/*   font-size: clamp(9px, 1.5vw, 33px); */
	line-height: 30px;
	font-weight: lighter;
	text-align: center;
	width: 26em;
}

.randoblur_trigger {
	position: absolute;
	top: 0;
	height: 1%;
	left: 0;
	right: 0;
}

.landing_rarity_container .randoblur_trigger {
	top: 85%;
}

.randoblur_trigger:not(.unblur) ~ * .randoblur > span {
	opacity: 0;
	filter: blur(25px);
	transition: 5s opacity cubic-bezier(0.5, 0, 1, 0.5), 0.5s filter cubic-bezier(0.5, 0, 1, 0.5);
}

.randoblur_trigger.unblur ~ * .randoblur > span {
	opacity: 1;
	filter: blur(0px);
	transition: 0.5s opacity cubic-bezier(0, 0.5, 0.5, 1), 0.5s filter cubic-bezier(0, 0.5, 0.5, 1);
}

.randoblur_trigger:not(.unblur) ~ * .rarity_traits_info_explore {
	opacity: 0;
}

.randoblur_trigger.unblur .randoblur ~ * .rarity_traits_info_explore {
	opacity: 1;
}

.rarity_traits_info_explore {
	display: inline-block;
	font-family: azo-sans-uber, sans-serif;
	font-size: 20px;
	/*   font-size: clamp(9px, 1.4vw, 30px); */
	font-weight: lighter;
	text-align: center;
	color: #ccc;
	text-decoration: none;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid #7c7c7c;
	border-radius: 2em;
	padding: 0.5em 2em;
	transition: 0.5s opacity ease-in-out, 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rarity_traits_info_explore:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	transform: scale(1.05);
}

.all_rarities_container {
	position: relative;
	width: 100%;
	height: 600vh; /* 5 screens of 100vh, with 25vh margins in-between each */
}

.all_rarities_container .rarities-box.all-rarities-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 1;
}

.all_rarities_container .rarities-box .text-fx {
	width: 100%;
	height: 100vh;
	position: relative;
}

.all_rarities_container .rarities-box .text-fx .animate-trigger[data-triggertype='in'] {
}

.all_rarities_container .rarities-box .text-fx .animate-trigger[data-triggertype='out'] {
}

.all_rarities_container .rarities-box .text-fx .rarity_headlines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.all_rarities_container .rarities-box .text-fx.in-view .rarity_headlines {
	position: fixed;
}

.all_rarities_container .rarities-box.all-rarities-traits,
.all_rarities_container .rarities-box.all-rarities-traits .rarities-fx,
.all_rarities_container .rarities-box.all-rarities-traits .rarities-fx .animate-layer,
.all_rarities_container .rarities-box.all-rarities-traits .rarities-fx .animate-layer .parallax-blocks {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.all_rarities_container .rarities-box.all-rarities-traits .rarities-fx .animate-layer .parallax-blocks,
.all_rarities_container .rarities-box.all-rarities-traits .rarities-fx .animate-layer .parallax-blocks .parallax-block {
	transform-style: preserve-3d;
}

.all_rarities_container
	.rarities-box
	.rarities-fx
	.animate-trigger[data-triggertype='in'][data-triggergroup='rarities-traits'] {
	position: absolute;
	top: 50vh;
	left: 0;
	right: 0;
	height: 600vh;
}

/* 
.all_rarities_container .rarities-box .rarities-fx .animate-layer .parallax-blocks {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
 */

.all_rarities_container .rarities-box .rarities-fx .animate-layer .parallax-blocks .parallax-block {
	width: 100%;
	height: 100vh;
	position: relative;
}

.all_rarities_container .rarities-box .rarities-fx .animate-layer .parallax-blocks .parallax-block + .parallax-block {
	margin-top: 25vh;
}

.all_rarities_container .rarities-box .rarities-fx .animate-layer .parallax-blocks .parallax-block img {
	position: absolute;
}

.all_rarities_container
	.rarities-box.all-rarities-traits
	.rarities-fx[data-triggergroup='rarities-traits']
	.animate-layer[data-animtype='parallax'] {
	perspective: 1px;
	perspective-origin: var(--mousex-perspective) var(--parallax-rarities-traits-y);
}

.all_rarities_container
	.rarities-box.all-rarities-traits
	.rarities-fx[data-triggergroup='rarities-traits']
	.animate-layer.foregrounds[data-animtype='parallax'] {
	z-index: 2;
}

.animate-FX[data-triggergroup='rarities-traits'] .parallax-blocks.rarities-deep-bg .parallax-block {
	transform: translateZ(-0.75px) scale(1.875);
	filter: blur(4px) brightness(50%);
}

.animate-FX[data-triggergroup='rarities-traits'] .parallax-blocks.rarities-bg .parallax-block {
	transform: translateZ(-0.125px) scale(1.125);
	filter: blur(2px) brightness(75%);
}

.animate-FX[data-triggergroup='rarities-traits'] .parallax-blocks.rarities-mg .parallax-block {
	transform: translateZ(0.125px) scale(0.875);
}

.animate-FX[data-triggergroup='rarities-traits'] .parallax-blocks.rarities-fg .parallax-block {
	transform: translateZ(0.75px) scale(0.25);
	filter: blur(1.5px);
	z-index: 2;
}

/* 
.all_rarities_container:not(.active) {
  padding-top: 25vh;
  margin-top: -25vh;
  padding-bottom: 33vh;
  margin-bottom: -33vh;
  overflow: hidden;
}
 */

/* 
.all_rarities_container .animate-FX {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.rarity_container.animate-FX.parallax .animate-trigger[data-triggertype='in'] {
  top: -50vh;
  height: 200vh;
}

.landing_rarity > .animate-FX .animate-trigger[data-triggertype='in'][data-triggergroup="rarity"] {
  top: 25%;
  height: 50vh;
}
 */

.rarity_common_container {
	/* border: blue solid 2px; */
}
.rarity_mythic_container {
	/* border: blue solid 2px; */
	/* height: 150vh; */
	/* z-index: 999; */
}
.rarity_msg_mythic {
	/* border: red solid 2px; */
	/* top: 30%; */
}
.view_all_rarities {
	margin-top: 2em;
	font-family: azo-sans-uber, sans-serif;
	font-size: 20px;
	/*   font-size: clamp(9px, 1.4vw, 30px); */
	font-weight: lighter;
	text-align: center;
	color: #ccc;
	text-decoration: none;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid #7c7c7c;
	border-radius: 2em;
	padding: 0.5em 2em;
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

.view_all_rarities:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	transform: scale(1.05);
}

#rarity_vignette {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: radial-gradient(ellipse at center, rgba(60, 60, 60, 1) 0%, rgba(60, 60, 60, 0) 100%);
	opacity: 0;
	user-select: none;
	z-index: -1;
	/* 
	box-shadow: 0 0 11.55vw 11.55vw #000 inset;
	background-color: #1a1a1a;
 */
}

.rarity_msg {
	font-family: azo-sans-uber, sans-serif;
	font-size: 120px;
	/*   font-size: clamp(18px, 7vw, 180px); */
	font-weight: 900;
	color: #cb9b23;
	text-align: center;
	line-height: 1;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	text-align: center;
	letter-spacing: 0.075em;
}

.rarity_msg_common {
	color: #c8af97;
}
.rarity_msg_uncommon {
	color: #85bae7;
}
.rarity_msg_rare {
	color: #e4c571;
}
.rarity_msg_super_rare {
	color: #e27c8c;
}
.rarity_msg_mythic {
	color: #7be0bc;
}

/* 
.rarity_container .rarity_msg,
.rarity_container .view_all_rarities {
  opacity: 0;
}
 */

.rarity_headlines {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.common_rarities,
.uncommon_rarities,
.rare_rarities,
.super_rare_rarities,
.mythic_rarities {
	position: absolute;
	z-index: 2;
}

/* .rarity_hover{
    animation: hoverAnimation 3s alternate-reverse ease infinite;
}

@keyframes hoverAnimation{
    from{ transform: translateY(0); }
    to{ transform: translateY(10px); }
} */

.common_rarities_burger {
	top: 49%;
	left: 26%;
	width: 11vw;
	transform: rotate(-20deg);
}
.common_rarities_bucket_hat {
	top: 5%;
	left: 71%;
	width: 15vw;
	transform: rotate(-15deg);
}

.common_rarities_football_helmet {
	top: 76%;
	left: 10%;
	width: 18vw;
	transform: rotate(-15deg);
}

.common_rarities_graduation_cap {
	top: 81%;
	left: 62%;
	width: 23vw;
	transform: rotate(20deg);
}

.common_rarities_round_glasses {
	top: 6%;
	left: 32%;
	width: 22vw;
	transform: rotate(-25deg);
}

.common_rarities_pizza {
	top: 18%;
	left: 4%;
	width: 12vw;
	transform: rotate(-15deg);
}

.common_rarities_shutter_shades {
	top: 65%;
	left: 83%;
	width: 17vw;
	transform: rotate(10deg);
}

.uncommon_rarities_wizards_hat {
	top: 1%;
	left: 64%;
	width: 14vw;
	transform: rotate(25deg);
}

.uncommon_rarities_fire_fighters_helmet {
	left: -3%;
	top: 17%;
	width: 21vw;
	transform: rotate(-20deg);
}

.uncommon_rarities_laurel_wreath {
	left: 51%;
	top: 16%;
	width: 13vw;
	transform: rotate(-15deg);
}

.uncommon_rarities_umbrella_hat {
	top: 60%;
	left: 75%;
	width: 32vw;
	transform: rotate(20deg);
}

.uncommon_rarities_donut {
	top: 24%;
	left: 88%;
	width: 14vw;
	transform: rotate(-15deg);
}

.uncommon_rarities_sushi {
	top: 78%;
	left: 69%;
	width: 8vw;
	transform: rotate(15deg);
}

.uncommon_rarities_ape_vipers {
	top: 81%;
	left: 14%;
	width: 16vw;
	transform: rotate(20deg);
}
.rare_rarities_beer_hat {
	top: 85%;
	left: 70%;
	width: 24vw;
	transform: rotate(20deg);
}

.rare_rarities_smooth_brain {
	top: 52%;
	left: 4%;
	width: 10vw;
	transform: rotate(0deg);
}

.rare_rarities_sultans_turban {
	top: -3%;
	left: 18%;
	width: 22vw;
	transform: rotate(-15deg);
}

.rare_rarities_ape_force_ones {
	top: 12%;
	left: 55%;
	width: 13vw;
	transform: rotate(0deg);
}

.rare_rarities_heart_glasses {
	top: 80%;
	left: 25%;
	width: 21vw;
	transform: rotate(-20deg);
}

.rare_rarities_degen_service_hat {
	top: 39%;
	left: 87%;
	width: 15vw;
	transform: rotate(-20deg);
}
.super_rare_rarities_crown {
	top: -6%;
	left: 35%;
	width: 16vw;
	transform: rotate(-15deg);
}

.super_rare_rarities_crayons {
	top: 72%;
	left: 41%;
	width: 12vw;
	transform: rotate(20deg);
}

.super_rare_rarities_the_artist {
	top: 19%;
	left: 12%;
	width: 14vw;
	transform: rotate(20deg);
}

.super_rare_rarities_rainbow_vomit {
	top: 20%;
	left: 91%;
	width: 14vw;
	transform: rotate(-50deg);
}

.super_rare_rarities_tiara {
	top: 23%;
	left: 54%;
	width: 18vw;
	transform: rotate(-10deg);
}

.super_rare_rarities_vr_headset {
	top: 70%;
	left: 0%;
	width: 20vw;
	transform: rotate(-15deg);
}

.super_rare_rarities_pharaos_neme {
	top: 73%;
	left: 79%;
	width: 19vw;
	transform: rotate(-10deg);
}

.mythic_rarities_golden_tendie {
	top: 27%;
	left: 20%;
	width: 16vw;
	transform: rotate(-15deg);
}

.mythic_rarities_harambes_halo {
	top: 20%;
	left: 65%;
	width: 19vw;
	transform: rotate(20deg);
}

.mythic_rarities_space_helmet {
	top: 68%;
	left: 55%;
	width: 18vw;
	transform: rotate(-25deg);
}

/* ==================================================================== */
/*FAQ*/

.faq_container {
	/*this follows the #faq_container_dummy so that the marker line can be in front */
	width: 100%;
	height: auto;
	position: relative;
	z-index: 15;
	left: 0px;
	top: 0px;
	/* set by js */
	/* border: 4px solid #aaa; */
}

.faq_container:before {
	content: '';
	background-color: rgba(31, 28, 26, 0.9);
	position: absolute;
	top: 5%;
	left: 20%;
	bottom: 5%;
	right: 20%;
	box-shadow: 0 0 33px 50px rgba(31, 28, 26, 0.9);
}

.faq {
	color: white;
	font-family: 'Montserrat', sans-serif;
}

.faq a {
	color: #8482ff;
}

.faq_title {
	color: #cb9b23;
	font-family: azo-sans-uber, sans-serif;
	font-size: 120px;
	/*   font-size: clamp(18px, 7vw, 180px); */
	letter-spacing: 0.025em;
	text-align: center;
	margin-bottom: 0.5em;
	position: relative;
	z-index: 1;
}

.faq_title:after {
	content: 's';
	color: #cb9b23;
	font-family: azo-sans-uber, sans-serif;
	font-size: 59px;
	/*   font-size: clamp(11px, 4.5vw, 88px); */
}

.faq_subtitle {
	font-size: 20px;
	/*   font-size: clamp(9px, 1.4vw, 30px); */
	font-weight: lighter;
	width: 100%;
	position: relative;
}

.faq_subtitle:before,
.faq_subtitle:after {
	content: '';
	width: 1em;
	height: 1em;
	position: absolute;
	top: 0.1em;
	right: 0;
	background-repeat: no-repeat;
	background-size: 0.5em;
	background-position: center center;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq_subtitle:before {
	/* + */
	background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="7" viewBox="0 0 7 7" width="7" xmlns="http://www.w3.org/2000/svg"><g stroke="white"><path d="m3.5 7.00098v-7.000003"/><path d="m0 3.50098h7"/></g></svg>');
}

.faq_subtitle:after {
	/* - */
	background-image: url('data:image/svg+xml;utf8,<svg height="7" viewBox="0 0 7 7" width="7" xmlns="http://www.w3.org/2000/svg"><path d="m3.5 7.001v-7"/><path d="m3.5 7.001v-7" fill="none" stroke="white"/></svg>');
}

.faq.active .faq_subtitle:before {
	transform: rotate(-90deg) scale(0);
}

.faq.active .faq_subtitle:after {
	transform: rotate(-90deg);
}

.faq_question {
	font-family: azo-sans-uber, sans-serif;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: white solid 1px;
	padding-top: 2%;
	cursor: pointer;
}

.faq_answer {
	height: 0;
	overflow: hidden;
	transition: height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	font-size: 18px;
	/*   font-size: clamp(9px, 1.2vw, 27px); */
	line-height: 1.4;
}

.faq.active .faq_answer {
	height: 9em;
}

/* 
#landing_roadmap_chalkboard_book {
  width: 500px;
  height: 300px;
  background: #222;
  left: 75%;
  bottom: 35%;
  z-index: 2;
}
 */

@media only screen and (min-width: 180px) {
	/*mobile-regular 180-450 */
}
@media only screen and (min-width: 450px) {
	/*mobile-large 450-950 */
	.faq_container {
		padding: 5%;
	}
}
@media only screen and (min-width: 950px) {
	/*desktop-small 950-1600*/
	.faq_container {
		padding: 5% 20%;
	}
}
@media only screen and (min-width: 1600px) {
	/*desktop 1600+ */
	.faq_container {
		padding: 5% 25%;
	}
}

/* 
#landing_roadmap_chalkboard_book {
  width: 500px;
  height: 300px;
  background: #222;
  left: 75%;
  bottom: 35%;
  z-index: 2;
}
 */

@media only screen and (min-width: 180px) {
	/*mobile-regular 180-450 */
}
@media only screen and (min-width: 450px) {
	/*mobile-large 450-950 */
	.faq_container {
		padding: 5%;
	}
}
@media only screen and (min-width: 950px) {
	/*desktop-small 950-1600*/
	.faq_container {
		padding: 5% 20%;
	}
}
@media only screen and (min-width: 1600px) {
	/*desktop 1600+ */
	.faq_container {
		padding: 5% 25%;
	}
}

#landing_footer {
	background-color: transparent;
	text-align: center;
	display: flex;
	flex-direction: column;
	padding-top: 90px;
}

#landing_footer .footer-logo {
	margin: 0;
}

#landing_footer .footer-logo a {
	display: inline-block;
}

#landing_footer .footer-logo a img {
	width: clamp(200px, 14vw, 300px);
	height: auto;
}

#landing_footer .social {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	margin: 50px 0 50px 0;
	padding: 0;
	justify-content: center;
}

#landing_footer .social > li {
	width: 38px;
	height: 30px;
	padding: 0 20px;
}

#landing_footer .credits {
	width: 100%;
	display: block;
	background-color: #1f1c1a;
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
	padding: 1em;
	box-sizing: border-box;
}