/*BOX SIZE INCLUDES BORDERS*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*NO HORIZONTAL SCROLL*/
html,body {
	margin: 0px;
}

/*BODY*/
body {
	margin: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
}

/*SECTION*/
section {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
/*	overflow: hidden;*/
}

/*FIX EXTRA WHITE SPACE AT BOTTOM*/
body > section {
	overflow: hidden;
}



/*COLUMNS*/
/*COLUMN - FULL WIDTH*/
.column-1-of-1 { 
 	position: relative;
}
@media screen and (max-width: 768px) {
	.column-1-of-1 {
		width: calc(100% - 48px);
		margin-left: 24px;
		margin-right: 24px;
	}
}
@media screen and (min-width: 769px) {
	.column-1-of-1 {
		width: calc(100% - 96px);
		margin-left: 48px;
		margin-right: 48px;
	}
}



/*COLUMN - HALF WIDTH*/
.column-1-of-2 { 
	position: relative;
}
@media screen and (max-width: 768px) {
	.column-1-of-2 {
		width: calc(100% - 48px);
		margin-left: 24px;
		margin-right: 24px;
	}
}
@media screen and (min-width: 769px) {
	.column-1-of-2 {
		width: calc(50% - 96px);
		margin-left: 48px;
		margin-right: 48px;
	}
}









/*NAV*/
#navbar {
	width: 100%;
	position: sticky;
	z-index: 7;
	top: 0;
	height: 96px;
	margin-top: -96px;
	background-color: rgb(255,255,255);
}

#navbar .column-1-of-1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}



/*LOADER*/
#navbar .loading {
	display: flex;
	align-items: center;
}

#navbar .loader-container {
	width: 24px;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: 8px;
/*  background-color: yellow;*/
}

#navbar .loader-ring {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
}
#navbar .loader-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  border: 6px solid currentColor;
  border-radius: 50%;
  animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
#navbar .loader-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
#navbar .loader-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
#navbar .loader-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes loader-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/*NAV BUTTONS*/
#navbar .left {
	display: flex;
	overflow: visible;
}

#navbar .left a {
	opacity: 0;
	height: 44px;
	padding: 12px 12px;
	border-radius: 22px;
	min-width: 40px;
	display: inline-block;
}

#navbar .left .nav-button-active {
  box-shadow: 0 0 0 2px #3130FE;
}



/*RESUME/PDF*/
#navbar .right a {
	display: flex;
	align-items: center;
}
/*HIDE/SHOW DIFFERENT ICONS AND WORDS ON MOBILE/WEB*/
@media screen and (max-width: 768px) {
	#navbar .right a h5 {
		display: none;
	}
	#navbar .right a img:nth-child(2) {
		display: none;
	}
}
@media screen and (min-width: 769px) {
	#navbar .right a img:nth-child(3) {
		display: none;
	}
}




















/*----------------------------------------------- TOWN ANIMATION -----------------------------------------------*/
#town {
  overflow: hidden;
}



/* MOBILE: LABEL + CONSTANT SLIDE TRANSITIONS */
@media screen and (max-width: 768px) {
  #town .carousel-slide .label,
  #town .carousel-slide.constant {
    transition: left 0.4s ease-in-out;
  }

  /* MOBILE: DISABLE BUILDING SHIFT ANIMATION */
  #town .carousel-slide .building {
    transition: none !important;
  }

  /* MOBILE: REMOVE TRANSFORM FROM ANIMATE.CSS */
  #town .fadeIn {
    transform: none !important;
    animation-delay: 0.35s !important;
  }
}




/* HIDE + DISABLE INTERACTIONS BEFORE LOAD */
#town.loading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* FADE IN + RESTORE INTERACTIONS AFTER LOAD */
#town {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.6s ease;
}





#town .column-1-of-1 {
  position: relative;
}

#town .carousel-container {
  position: relative;
}

@media screen and (max-width: 768px) {
  #town .carousel-container {
  	overflow: hidden !important;
/*    overflow-x: hidden;*/
/*    overflow-y: visible;*/
  }
}





@media screen and (max-width: 768px) {
  #town .carousel-slide img {
    min-width: 1144px;
    min-height: 551px !important;
  }

  #town .hover-preview-layer,
  #town .clickable-area-wrapper {
    position: absolute;
    width: 1144px !important;
    height: 551px !important;
    top: 0%;
    left: 0%;
  }
}




/* BUILDING IMG */
#town .building {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

/* LABEL IMG */
#town .label {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* BASE LAYER */
#town .base {
  z-index: -1;
}

/* COVER-UP IMAGE */
#town .cover {
  z-index: 2;
}

/* SIZER DIV FOR MAINTAINING IMAGE RATIO */
#town .image-sizer {
  width: 100%;
  aspect-ratio: 1144 / 551;
}

@media screen and (max-width: 768px) {
  #town .image-sizer {
    width: 1144px;
    height: 551px;
  }
}





/* WRAPPER */
#town .clickable-area-wrapper {
  width: 100%;
  height: 100%;
}

/* CLICKABLE AREAS */
#town .clickable-area {
  z-index: 4;
}

#town .clickable-area:hover {
  cursor: pointer;
}

/*TURN OFF CLICABLE-AREA ON MOBILE*/
@media (max-width: 768px) {
  .clickable-area {
    pointer-events: none !important;
  }
}


/*CLICKABLE AREAS*/
/*TOWNHALL*/
#town .clickable-area:nth-of-type(1) {
	width: 18%;
	height: 42%;
	top: 9%;
	left: 61%;
	position: absolute;
}


/*AI*/
#town .clickable-area:nth-of-type(2) {
	width: 16%;
	height: 28%;
	top: 36%;
	left: 81.5%;
	position: absolute;
}


/*DESIGN*/
#town .clickable-area:nth-of-type(3) {
	width: 18%;
	height: 27%;
	top: 51%;
	left: 61.7%;
	position: absolute;
}


/*CRAFT*/
#town .clickable-area:nth-of-type(4) {
	width: 19%;
	height: 26%;
	top: 60%;
	left: 40.8%;
	position: absolute;
}


/*IDEATION*/
#town .clickable-area:nth-of-type(5) {
	width: 15%;
	height: 13%;
	top: 47%;
	left: 42.5%;
	position: absolute;
}


/*CODE*/
#town .clickable-area:nth-of-type(6) {
	width: 15.5%;
	height: 34%;
	top: 39%;
	left: 21.85%;
	position: absolute;
}


/*PACKAGING*/
#town .clickable-area:nth-of-type(7) {
	width: 15%;
	height: 31%;
	top: 32%;
	left: 2.3%;
	position: absolute;
}


/*CODE (2ND INSTANCE)*/
#town .clickable-area:nth-of-type(8) {
	width: 18%;
	height: 22%;
	top: 18%;
	left: 21%;
	position: absolute;
}


/*ANIMATION*/
#town .clickable-area:nth-of-type(9) {
	width: 18%;
	height: 31%;
	top: 11%;
	left: 39.5%;
	position: absolute;
}






@media screen and (min-width: 1241px) {
  #town .caption {
    width: calc(100% - 48px);
    position: absolute;
    left: 24px;
    bottom: 24px;
    padding: 18px;
    border-radius: 4px;
    border: 1px solid rgba(49, 48, 254, 1);
    overflow: hidden;
    z-index: 3;
  }
}

@media screen and (max-width: 1240px) {
  #town .caption {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

#town .caption h4 {
  font-weight: 700;
}




#town .hover-preview-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#town .hover-preview-layer img {
  position: absolute;
  width: 100%;
  opacity: 0.35;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none;
}


















/* CONTROLLLER-WRAPPER */
@media screen and (min-width: 1240px) {
  #town .controller-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
	  z-index: 6;
	  pointer-events: none;
  }
}
@media screen and (min-width: 769px) and (max-width: 1239px) {
  #town .controller-wrapper {
    width: 100%;
    display: flex;
  }
}
@media screen and (max-width: 768px) {
  #town .controller-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 493px;
    z-index: 6;
  }
}




/* PAGINATION */
@media screen and (min-width: 1240px) {
  #town .wrapper-pagination {
    position: absolute;
    left: 0px;
    bottom: -48px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
	  pointer-events: auto;
  }
}
@media screen and (min-width: 769px) and (max-width: 1239px) {
  #town .wrapper-pagination {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #town .wrapper-pagination {
    display: flex;
    justify-content: center;
    background-color: white;
    border-radius: 20px;
    padding-left: 12px;
    padding-right: 12px;
    border: 1px solid rgba(49, 48, 254, 1);
  }
}

#town .wrapper-pagination .carousel-pagination {
  display: flex;
  justify-content: flex-start;
}

#town .pagination_dot {
  background-color: #3130FE;
}

#town .pagination_dot-boundary.inactive:hover .pagination_dot {
  background-color: rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 4px #3130FE;
}




/* ARROWS */
@media screen and (min-width: 1240px) {
  #town .wrapper-arrows {
    width: 100%;
    position: absolute;
    top: calc(50% - 20px);
    left: 0px;
  	pointer-events: none;
  }
}
@media screen and (min-width: 769px) and (max-width: 1239px) {
  #town .wrapper-arrows {
    display: flex;
    width: 50%;
    height: 40px;
  }
}
@media screen and (max-width: 768px) {
  #town .wrapper-arrows {
    width: 0%;
  }
}

@media screen and (min-width: 1240px) {
	#town .carousel-arrows {
	  display: flex;
	  width: 100%;
	  justify-content: space-between;
	  z-index: 7;
	  pointer-events: none;
	}
}
@media screen and (min-width: 769px) and (max-width: 1239px) {
	#town .carousel-arrows {
	  display: flex;
	  width: 100%;
	  justify-content: flex-end;
	  position: relative;
	}
}

#town .carousel-arrow-backward,
#town .carousel-arrow-forward {
	pointer-events: auto;
}

#town .carousel-arrow-backward span,
#town .carousel-arrow-forward span {
  background-color: #3130FE;
}


































/*INTRO*/
#intro {
	position: relative;
}

/*LINE*/
#intro .line {
	width: 100%;
	height: 1px;
}

/*HEADER TEXT*/
/*#intro .header-text {
	width: 100%;
}*/
#intro .header-text h1 {
	font-weight: 800;
  display: inline-block;
}


/*PRARAGRAPH TEXT*/
#intro .paragraph-text {
	width: 100%;
}
#intro .paragraph-text h3 {
	width: 100%;
	font-weight: 300;
}

#intro .paragraph-text br {
   display: block;
   margin: 20px 0;
   content: " ";
}




/*INTRO BIG QUOTE*/
.big-quote-wrapper {
	overflow: hidden;
}
@media screen and (max-width: 768px) {
	.big-quote-wrapper {
		display: none;
	}
}
#intro .big-quote {
	width: 100%;
	overflow: hidden;
	overflow-x: hidden;
}
/*@media screen and (max-width: 768px) {
	#intro .big-quote {
		width: 140%;
		margin-top: 96px;
		margin-left: -96px;
		margin-right: -96px;
		max-height: calc(50vh);
	}
}*/
@media screen and (min-width: 769px) {
	#intro .big-quote {
		margin-top: -96px;
		margin-right: -48px;
		max-height: calc(100vh);
	}
}


/*INTRO H1*/
#intro .big-quote h1 {
	width: 150%;
	font-weight: 800;
	line-height: 72px;
/*	text-transform: uppercase;*/
}



/*MOVE INTRO TEXT*/
#intro .paragraph-text {
	margin-top: -160px;
}

#intro .paragraph-text  {
  animation: introParagraphText .5s ease-in-out;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 768px) {
	#intro .paragraph-text  {
	  animation-delay: 1s;
	 }
}
@media screen and (min-width: 769px) {
	#intro .paragraph-text  {
	  animation-delay: 1s;
	 }
}
@keyframes introParagraphText {
  0% {
		margin-top: -160px;
  }
  100% {
  	margin-top: 0px;
  }
}









/*VENN-WRAP*/
/*HIDE INITIALLY*/
.venn .circle,
.venn .outer-joined,
.venn .join-cap,
.venn .overlap,
.venn .fo {
  opacity: 0;
}

/*AFTER 2 SECONDS SHOW THIN CIRCLES*/
.venn.is-shown .circle {
  opacity: 1;
  transition: opacity 250ms ease;
}

/*CONTAINER*/
.venn-wrap {
  width: 320px;
  max-width: 320px;
}

.venn {
  width: 320px;
  height: 160px; /* IMPORTANT: lock height to stop mobile relayout snapping */
  display: block;
  overflow: visible;
}

/*THIN CIRCLES*/
.venn .ring {
  fill: none;
  stroke: #3130FE;
  vector-effect: non-scaling-stroke;
}

.venn .ring-inner {
  stroke-width: 1px;
}

/*MOVING CIRCLES*/
.venn .circle {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.venn .circle-left {
  transform: translateX(-48px);
}

.venn .circle-right {
  transform: translateX(48px);
}

/* STEP 1: CIRCLES MOVE TOGETHER */
.venn.is-moving .circle-left,
.venn.is-moving .circle-right {
  transition: transform 900ms ease;
}

.venn.is-moving .circle-left  { transform: translateX(0); }
.venn.is-moving .circle-right { transform: translateX(0); }

/*THICK OUTLINES*/
.venn .outer-joined {
  fill: none;
  stroke: #3130FE;
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Allow transforms on the outline path */
  transform-box: fill-box;
  transform-origin: center;
}

/* STEP 2: THICKEN */
.venn.is-bold .outer-joined {
  opacity: 1;
  stroke-width: 6px;
  transform: scale(1.046875); /* (64 + 3) / 64 */
  transition: stroke-width 750ms ease, transform 750ms ease, opacity 0ms linear;
}

/* HIDE THIN CIRCLES ONCE BOLD*/
.venn.is-bold .circle .ring-inner {
  opacity: 0;
  transition: opacity 150ms ease;
}

/*DASHED OVERLAP*/
.venn .overlap {
  fill: none;
  stroke: #3130FE;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 4;
  opacity: 0;
}

/* STEP 3: DRAW + CALM DRIFT */
.venn.is-overlap .overlap {
  opacity: 1;
  transition: stroke-dashoffset 800ms ease, opacity 150ms ease;
  animation: dash-drift 10s linear infinite;
}

@keyframes dash-drift {
  to { stroke-dashoffset: -64; }
}

/*ERASER*/
.venn .overlap-eraser {
  fill: none;
  stroke: #fff;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  pointer-events: none;
}

.venn.is-overlap .overlap-eraser {
  opacity: 1;
  transition: opacity 150ms ease;
}

/* =========================================================
   LABELS
   - Keep foreignObject
   - Move transforms to inner HTML
   - HARD HIDE to prevent mobile first-paint flash
========================================================= */

/* Base hide (opacity + visibility) */
.venn .fo {
  overflow: visible;
  opacity: 0 !important;
  visibility: hidden !important; /* IMPORTANT: prevents mobile from painting early */
  transform: none;              /* IMPORTANT: do not transform foreignObject */
  pointer-events: none;
}

/* Also hide the HTML inside (some mobile builds paint this before SVG rules apply) */
.venn .fo .fo-inner,
.venn .fo .venn-h5 {
  opacity: 0 !important;
  visibility: hidden !important;
}

.fo-inner {
  display: flex;
  align-items: center;
  height: 40px;
  will-change: transform;
}

.fo-inner-right { justify-content: flex-end; }
.fo-inner-left  { justify-content: flex-start; }
.fo-inner-center { justify-content: center; }

.venn-h5 {
  color: #3130FE;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

/* INITIAL OFFSETS (on inner div, not foreignObject) */
.venn .fo-left  .fo-inner { transform: translateX(-10px); }
.venn .fo-right .fo-inner { transform: translateX(10px); }
.venn .fo-mid   .fo-inner { transform: translateY(6px); }

/* STEP 4A: DESIGN + CODE */
.venn.is-labels-left-right .fo-left,
.venn.is-labels-left-right .fo-right {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 450ms ease;
}

/* unhide inner HTML too */
.venn.is-labels-left-right .fo-left  .fo-inner,
.venn.is-labels-left-right .fo-right .fo-inner,
.venn.is-labels-left-right .fo-left  .venn-h5,
.venn.is-labels-left-right .fo-right .venn-h5 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* animate slide for left/right */
.venn.is-labels-left-right .fo-left  .fo-inner,
.venn.is-labels-left-right .fo-right .fo-inner {
  transform: translateX(0);
  transition: transform 450ms ease;
}

/* STEP 4B: ME */
.venn.is-labels-mid .fo-mid {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 450ms ease;
}

/* unhide inner HTML too */
.venn.is-labels-mid .fo-mid .fo-inner,
.venn.is-labels-mid .fo-mid .venn-h5 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* animate slide for mid */
.venn.is-labels-mid .fo-mid .fo-inner {
  transform: translateY(0);
  transition: transform 450ms ease;
}

/*MASKING*/
.venn .circle {
  mask: none;
}

.venn.is-overlap .circle {
  mask: url(#mask-hide-thin-in-lens);
}

@media (prefers-reduced-motion: reduce) {
  .venn .circle-left,
  .venn .circle-right {
    transform: translateX(0) !important;
    transition: none !important;
  }

  .venn .outer-joined {
    stroke-width: 6px !important;
    transform: scale(1.046875) !important;
    transition: none !important;
  }

  .venn .overlap {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
    transition: none !important;
  }

  /* ensure labels are simply visible, no motion */
  .venn .fo {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }

  .venn .fo .fo-inner,
  .venn .fo .venn-h5 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
}


















/*HISTORY*/
#history .header-text h1 {
	font-weight: 800;
}

#history .line {
	width: 100%;
	height: 1px;
}



/*ERA-LINE (DEFINES DIGITAL DESIGN & LANDSCAPE ARCHITECTURE)*/
@media screen and (min-width: 769px) {
	#history .era-line {
		/*THIS IS THE BORDER-LEFT ON THE LEFT SIDE OF THE PAGE*/
		box-shadow: inset 1px 0 0 0 #3130FE;
	}
}
@media screen and (max-width: 768px) {
	#history .era-line  {
		margin-left: 24px;
		margin-right: 24px;
	}
}
@media screen and (min-width: 769px) {
	#history .era-line  {
		margin-left: 48px;
		margin-right: 48px;
	}
}

/*ERA-LABEL*/
#history .label-and-date .era-label {
/*	margin-left: 8px;*/
	margin-left: -2px;
	margin-top: -6px;
	font-weight: 300;
	height: 32px;
	background-color: #ffffff;
}
@media screen and (max-width: 768px) {
	#history .label-and-date .era-label {
		display: none;
	}
}



/*LABEL AND DATE*/
#history .label-and-date {
	display: flex;
	justify-content: space-between;
}




/* DATES CONTAINER */
#history .dates {
	position: relative;
}
@media screen and (min-width: 769px) {
	#history .dates {
		width: 40px;
	}
}
@media screen and (max-width: 768px) {
	#history .dates {
		height: 40px;
	}
}



/* START DATE */
#history .dates .start {
	width: 40px;
	height: 40px;
	position: absolute;
	display: flex;
	flex-wrap: wrap;
}

#history .dates .start h5 {
	width: 100%;
}
@media screen and (min-width: 769px) {
	#history .dates .start {
/*		transform: rotate(90deg);*/
		top: 0;
		transition: top 1s ease-out;
		z-index: 1;
	}
	#history .dates .start h5 {
		text-align: right;
	}
}
@media screen and (max-width: 768px) {
	#history .dates .start {
		z-index: 2;
	}
	#history .dates .start h5 {
		text-align: left;
	}
}



/* END DATE */
#history .dates .end {
	width: 40px;
	height: 40px;
	position: absolute;
	display: flex;
	flex-wrap: wrap;
}
#history .dates .end h5 {
	width: 100%;
}
@media screen and (min-width: 769px) {
	#history .dates .end {
/*		transform: rotate(90deg);*/
		top: 0;
		z-index: 2;
	}
	#history .dates .end h5 {
		text-align: right;
	}
}
@media screen and (max-width: 768px) {
	#history .dates .end {
		left: 0px;
		transition: left 2s ease-out;
		z-index: 1;
	}
	#history .dates .end h5 {
		text-align: right;
	}
}



/* TIMELINE */
#history .timeline {
	position: absolute;
	width: 1px;
	background-color: #3130FE;
	transform-origin: top;
}
@media screen and (min-width: 769px) {
	#history .timeline {
		top: 0;
		right: 0;
		height: 0;
		transition: height 1s ease-out;
	}
}
@media screen and (max-width: 768px) {
	#history .timeline {
		left: 0px;
		top: 20px;
		height: 1px;
		width: 1px;
		transition: width 2s ease-out;
	}
}



/* ACTIVE STATE - TIMELINE */
@media screen and (min-width: 769px) {
	#history .dates.is-active .timeline {
		height: calc(100%);
	}
}
@media screen and (max-width: 768px) {
	#history .dates.is-active .timeline {
		width: 60px;
	}
}


/* ACTIVE STATE - DATES */
@media screen and (min-width: 769px) {
	#history .dates.is-active .start {
		top: calc(100% - 40px);
	}
}
/* END WHEN ACTIVE (MOBILE ONLY) */
@media screen and (max-width: 768px) {
	#history .dates.is-active .end {
		left: 60px !important;
	}
}











/* PLAYGROUND */
#history .playground {
	display: flex;
	flex-wrap: wrap;
	z-index: 3;
}



/*TEMPORARY UNTIL FIGMA PROTOTYPES WORK WELL ON MOBILE SCREENS*/
@media screen and (max-width: 768px) {
	#history .playground {
			display: none;
	}
	#history .temp-playground-until-mobile-prototype-works-on-figma {
		width: 100%;
		margin-top: 96px;
	}
}



/* PLAYGROUND TITLE */
#history .playground .title {
	width: 100%;
	display: none;
}
@media screen and (min-width: 1025px) {
	#history .playground .title img {
		width: 400px;
		display: block;
		margin-bottom: -19px;
	}
}
@media screen and (max-width: 1024px) {
	#history .playground .title img {
		width: 280px;
		display: block;
		margin-bottom: -14px;
	}
}



/* PLAYGROUND LABEL */
#history .playground .label {
	height: calc(100% - 96px);
	position: absolute;
	border-top: 1px solid #3130FE;
	border-bottom: 1px solid #3130FE;
}
@media screen and (min-width: 769px) {
	#history .playground .label {
		width: 48px;
		left: -48px;
	}
}
@media screen and (max-width: 768px) {
	#history .playground .label {
		width: 24px;
		left: -24px;
	}
}

#history .playground .label h4 {
	position: absolute;
	width: 110px;
	text-align: center;
	transform: rotate(90deg);
}
@media screen and (min-width: 769px) {
	#history .playground .label h4 {
		top: 64px;
		left: -32px;
	}
}
@media screen and (max-width: 768px) {
	#history .playground .label h4 {
		top: 64px;
		left: -42px;
	}
}


/* PLAYGROUND ITEM */
#history .playground-item {
	position: relative;
}
@media screen and (min-width: 1025px) {
	#history .playground-item {
		width: 50%;
	}
}
@media screen and (max-width: 1024px) {
	#history .playground-item {
		width: 100%;
	}
}



/* TOP */
#history .playground-item .top {
	position: relative;
	display: flex;
	justify-content: center;
}
@media screen and (min-width: 1025px) {
	#history .playground-item .top {
		border-top: 1px solid #3130FE;
		border-right: 1px solid #3130FE;
		border-bottom: 1px solid #3130FE;
		padding-top: 48px;
		padding-bottom: 48px;
	}
}
@media screen and (max-width: 1024px) {
	#history .playground-item .top {
		border-right: 1px solid #3130FE;
		border-left: 1px solid #3130FE;
		padding-top: 48px;
	}
	#history .playground-item:not(:last-child) .top {
		border-top: 1px solid #3130FE;
	}
}



/* BOTTOM */
#history .playground-item .bottom {
	padding: 20px;
}
@media screen and (min-width: 1025px) {
	#history .playground-item .bottom {
		display: none;
		position: absolute;
		background-color: #3130FE;
	}
	#history .playground-item:last-child .bottom {
	  box-shadow: -1px 0 0 0 #3130FE;
	}
	#history .playground-item:hover .bottom {
		display: block;
	}
	.playground-item .bottom h5 {
		color: #FFFFFF;
	}
}



/* BOTTOM – MOBILE */
@media screen and (max-width: 1024px) {
	#history .playground-item .bottom {
		display: block;
		background-color: #FFFFFF;
		border-bottom: 1px solid #3130FE;
		border-right: 1px solid #3130FE;
		border-left: 1px solid #3130FE;
	}
	#history .playground-item .bottom h5 {
		color: #3130FE;
	}
}



/* ARROW ICON */
#history .playground-item .top .icon {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 40px;
	height: 40px;
}
.playground-item .top .icon {
	transition: transform 0.3s ease-in-out;
	transform: scale(1);
}
.playground-item .top button:hover ~ .icon {
	transform: scale(1.15);
}
.playground-item .top button:active ~ .icon,
.playground-item .top button:focus ~ .icon {
	transform: scale(1.15);
}



/* BLOCKEY CHARACTER */
#history .playground-item .top .character-blockey {
	position: absolute;
	left: calc(50% - 32px);
	top: -10px;
	z-index: 2;
	transition: all 0.3s ease-in-out;
}

#history .playground-item .top button:hover .character-blockey {
	top: -14px;
}

#history .playground-item .top .character-blockey img {
	position: absolute;
	width: 64px;
	height: 64px;
	pointer-events: none;
}



/* SUN CHARACTER */
/*#history .playground-item .top .character-sun {
	position: absolute;
	left: calc(50% - 64px);
	top: -31px;
	transition: all 0.3s ease-in-out;
}

#history .playground-item .top button:hover .character-sun {
	top: -34px;
}

#history .playground-item .top .character-sun img {
	position: absolute;
	width: 128px;
	height: 128px;
	pointer-events: none;
}*/

/* SUN – ALLOW BACK IMAGE THROUGH BUTTON */
#history .playground-item .top .character-sun img:first-of-type {
	z-index: -1;
}

#history .playground-item .top .button-portfolio-small a {
	background-color: transparent;
}








/* SUNSET */
#history .playground-item .top .sunset {
	width: 100px;
	height: 100px;
	position: absolute;
	left: calc(50% - 50px);
	top: -12px;
	transition: all 0.3s ease-in-out;
	pointer-events: none;
}
#history .playground-item .top button:hover .sunset {
	top: -15px;
}

/* AREAS */
#history .playground-item .top .sunset .sky {
	width: 100px;
	height: 60px;
	overflow: hidden;
	position: relative;
}
#history .playground-item .top .sunset .water {
	width: 100px;
	height: 40px;
	overflow: hidden;
	position: relative;
	z-index: -1;
}

/* ITEMS */
#history .playground-item .top .sunset .sun,
#history .playground-item .top .sunset .reflection {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 0;
	transition: transform 4s ease-out;
}

#history .playground-item .top .sunset .sun {
	top: -44%;
}

#history .playground-item .top .sunset .reflection {
	top: -160%;
}

/* FIRST ANIMATION (WHERE SUN AND REFLECTION GO WITH INITIAL ANIMATION) */
#history .playground-item .top .sunset.sunset-active .sun {
	transform: translateY(24px);
}
#history .playground-item .top .sunset.sunset-active .reflection {
	transform: translateY(20%);
}




/* RIPPLES + PULSE (runs after the initial sunset animation) */
#history .playground-item .top .sunset.sunset-ripple .reflection {
  animation: reflectionRipple 6s ease-in-out infinite;
  will-change: transform, filter;
}

/* when ripple starts, stop transition from interfering */
#history .playground-item .top .sunset.sunset-ripple .sun,
#history .playground-item .top .sunset.sunset-ripple .reflection {
  transition: none;
}

#history .playground-item .top .sunset.sunset-ripple .sun {
  animation: sunPulse 6s ease-in-out infinite;
  will-change: transform;
}

/* Reflection: horizontal stretch + blur, stays at same Y */
@keyframes reflectionRipple {
  0% {
    transform: translateY(20%) scaleX(1);
    filter: blur(0px);
  }
  25% {
    transform: translateY(20%) scaleX(1.16);
    filter: blur(1.5px);
  }
  50% {
    transform: translateY(20%) scaleX(1.24);  /* widest when sun is biggest */
    filter: blur(3px);
  }
  75% {
    transform: translateY(20%) scaleX(1.16);
    filter: blur(1.5px);
  }
  100% {
    transform: translateY(20%) scaleX(1);
    filter: blur(0px);
  }
}

/* Sun: gentle scale pulse, same beat as reflection */
@keyframes sunPulse {
  0% {
    transform: translateY(24px) scaleX(1);
  }
  25% {
    transform: translateY(24px) scale(1.06);
  }
  50% {
    transform: translateY(24px) scale(1.12);  /* biggest when reflection is widest */
  }
  75% {
    transform: translateY(24px) scale(1.06);
  }
  100% {
    transform: translateY(24px) scale(1);
  }
}










/*JOBS ANNOUNCEMENT BANNER*/
/*@media screen and (max-width: 768px) {
	#jobs_announcement  {
		display: none;
	}
}


#history .banner {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
 	border: 1px solid rgba(49,48,254,1);
 	padding-left: 24px;
 	padding-right: 24px;
 	border-radius: 4px;
}
@media screen and (max-width: 768px) {
	.banner {
		flex-wrap: wrap;
	}
}


#history .banner .banner-new-tag {
	width: 52px;
	height: 40px;
	position: absolute;
	top: -24px;
	left: 24px;
}


@media screen and (max-width: 768px) {
	#history .banner .banner-header-wrapper {
		width: 100%;
		margin-top: 8px;
		margin-bottom: 8px;
	}
}
#history .banner .banner-header-wrapper h2 {
	font-weight: 900;
}


@media screen and (max-width: 768px) {
	#history .banner .banner-description-wrapper {
		width: 100%;
		margin-bottom: 12px;
		margin-bottom: 64px;
	}
}
@media screen and (min-width: 769px) {
	#history .banner .banner-description-wrapper {
		margin-left: 36px;
		margin-right: 36px;
	}
}


@media screen and (max-width: 768px) {
	#history .banner .banner-button-wrapper {
		width: 100%;
		margin-bottom: 8px;
	}
}
#history .banner .banner-button-wrapper h4 {
	white-space: nowrap;
}


#history .banner .banner-button-wrapper {
	position: relative;
}

#history .banner .button-image {
	position: absolute;
	left: 2px;
	top: -52px;
	z-index: 2;
  transition: all 0.3s ease-in-out;
}

#history .banner .button-image img {
	position: absolute;
	width: 60px;
	height: 60px;
	pointer-events: none;
}

#history .banner .banner-button-wrapper:hover .button-image {
	top: -55px;
}


#history .banner {
	animation-delay: .5s;
}
#history .banner .banner-header-wrapper h2,
#history .banner .banner-description-wrapper h5,
#history .banner .banner-button-wrapper button  {
	animation-delay: 1s;
}
#history .banner .banner-new-tag {
	animation-delay: 2s;
}

#history .banner .button-image {
	animation-delay: 4s;	
}


#history .banner .button-portfolio-small {
	pointer-events: none;
}

#history .banner .button-portfolio-small a {
	pointer-events: auto;
}*/









/* CAREER SWITCH */
.career-switch {
	position: relative;
}

.career-switch .firstword {
	position: absolute;
	left: -2px;
  -webkit-transform:translateZ();
  -webkit-transition:all .3s ease-in-out;
     -moz-transition:all .3s ease-in-out;
      -ms-transition:all .3s ease-in-out;
       -o-transition:all .3s ease-in-out;
          transition:all .3s ease-in-out; 
}

.career-switch .secondword {
	position: absolute;
	left: 178px;
  -webkit-transform:translateZ();
  -webkit-transition:all .3s ease-in-out;
     -moz-transition:all .3s ease-in-out;
      -ms-transition:all .3s ease-in-out;
       -o-transition:all .3s ease-in-out;
          transition:all .3s ease-in-out; 
}

.career-switch .letter-s,
.career-switch .letter-c,
.career-switch .letter-e,
.career-switch .letter-d,
.career-switch .letter-last {
  font-size: 0;
  display: inline-block;
  font-size: 32px;
}









/*PREVIEW FRAME FOR QP*/
#frame-qp {
	position: relative;
	z-index: 3;
	position: absolute;
	left: 0px;
	top: 0px;
	width: calc(100%);
	height: calc(100%);
 	overflow: hidden;
/* 	border: 4px solid green;*/
}
@media screen and (max-width: 768px) {
	#frame-qp {
		display: none;
	}
}



/*HOVER IMAGE*/
[id^='hover_image'] {
	height: 100%;
	width: 100%;
  display: flex;
 	justify-content: center;
 	border: 1px solid rgba(49,48,254,1);
 	overflow: hidden;
}










/* SPLURGE PREVIEW - PROJECT IMAGE */
#frame-qp #hover_image-qp_splurge .project-image{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #CBBBBA;
}

/* KEYWORDS LAYER (fills frame) */
#frame-qp #hover_image-qp_splurge #keywords{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* base + sizing vars */
  background-color: #CBBBBA;
  --kw-check: 16px;
  --kw-checker-h: calc(var(--kw-check) * 2);
  --kw-ring: 3px;
}

/* overlays */
#frame-qp #hover_image-qp_splurge #keywords::before,
#frame-qp #hover_image-qp_splurge #keywords::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
}

/* gradient overlay */
#frame-qp #hover_image-qp_splurge #keywords::before{
  background: #001EF5;
  opacity: 0.2;
}

/* noise overlay */
#frame-qp #hover_image-qp_splurge #keywords::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
  opacity: 1;
  mix-blend-mode: multiply;
}

/* STAGE (fills keywords) */
#frame-qp #hover_image-qp_splurge #keywords .keywords-stage{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  z-index: 1;
  background: transparent;
  border-radius: 0;
}

/* CHECKERBOARD STRIP */
#frame-qp #hover_image-qp_splurge #keywords .keywords-checker{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--kw-checker-h);
  pointer-events: none;
  z-index: 1;

  background:
    repeating-conic-gradient(
      from 0deg,
      #001EF5 0 25%,
      transparent 0 50%
    )
    0 0 / calc(var(--kw-check) * 2) calc(var(--kw-check) * 2);
}

/* PILLS */
#frame-qp #hover_image-qp_splurge #keywords .kw-pill{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #CBBBBA;
  border: 1px solid #EBE5E5;
  border-radius: 999px;
  box-shadow: none;

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  will-change: transform;
}

#frame-qp #hover_image-qp_splurge #keywords .kw-pill h3{
  margin: 0;
  padding: 12px 20px;
  font-size: 18px;
  font-weight: 400;
  color: #001EF5;
  pointer-events: none;
}

/* ring states (no layout shift) */
#frame-qp #hover_image-qp_splurge #keywords .kw-pill.is-active{
  box-shadow: inset 0 0 0 var(--kw-ring) #EBE5E5;
}

#frame-qp #hover_image-qp_splurge #keywords .kw-pill:not(.is-active):hover{
  box-shadow: inset 0 0 0 var(--kw-ring) color-mix(in srgb, #EBE5E5 50%, transparent);
}

#frame-qp #hover_image-qp_splurge #keywords .kw-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 var(--kw-ring) #EBE5E5;
}










/*LOOP PREVIEW - PROJECT IMAGE*/
#frame-qp #hover_image-qp_loop .project-image {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #FFA601;
  justify-content: center;
  position: relative;
}

/*LOOP PREVIEW - LOTTIE FILE*/
#loop-logo {
  aspect-ratio: 2/1;
  opacity: 0;
  transition: opacity 400ms ease;
}
#loop-logo.is-visible {
  opacity: 1;
}



/* 769px–1080px */
@media (min-width: 769px) and (max-width: 1080px) {
  #loop-logo { width: 180px; }
  #frame-qp #hover_image-qp_loop .project-image {
    --doodad-size: 22px;

    --pair-x: -61px;
    --pair-y: -40px;

    --d2-x: -12px;
    --d2-y: 30px;

    --d3-x: 78px;
    --d3-y: -22px;
  }
}

/* 1241px–1600px */
@media (min-width: 1081px) and (max-width: 1420px) {
  #loop-logo { width: 240px; }
  #frame-qp #hover_image-qp_loop .project-image {
    --doodad-size: 24px;

    --pair-x: -80px;
    --pair-y: -48px;

    --d2-x: -17px;
    --d2-y: 38px;

    --d3-x: 104px;
    --d3-y: -28px;
  }
}

/* 1601px+ */
@media (min-width: 1421px) {
  #loop-logo { width: 320px; }
  #frame-qp #hover_image-qp_loop .project-image {
    --doodad-size: 28px;

    --pair-x: -104px;
    --pair-y: -60px;

    --d2-x: -24px;
    --d2-y: 48px;

    --d3-x: 140px;
    --d3-y: -32px;
  }
}



/*DOODAD*/
.loop-logo-doodad-1,
.loop-logo-doodad-11,
.loop-logo-doodad-2,
.loop-logo-doodad-3 {
  width: var(--doodad-size);
  height: var(--doodad-size);
  position: absolute;
  z-index: 2;
  opacity: 0;
  animation: none;
  user-select: none;
  -webkit-user-drag: none;
}



/* DOODAD PAIR WRAPPER */
.doodad-pair {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--pair-x), var(--pair-y));
}

/* STACK THE TWO IN THE PAIR */
.doodad-pair .loop-logo-doodad-1,
.doodad-pair .loop-logo-doodad-11 {
  position: absolute;
  left: 0;
  top: 0;
}

/* DOODAD 2 + 3 CENTER ANCHOR */
.loop-logo-doodad-2,
.loop-logo-doodad-3 {
  left: 50%;
  top: 50%;
}

/* BASE TRANSFORMS (POSITION) */
.loop-logo-doodad-2 {
  --base-transform: translate(-50%, -50%) translate(var(--d2-x), var(--d2-y));
}
.loop-logo-doodad-3 {
  --base-transform: translate(-50%, -50%) translate(var(--d3-x), var(--d3-y));
}



/*TRIGGER ANIMATIONS*/
.is-doodads-animating .loop-logo-doodad-1 {
  animation:
    doodadDropInLeft 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) 4.0s forwards,
    doodadStretch    3s   ease-in-out                         5.0s infinite;
}

.is-doodads-animating .loop-logo-doodad-11 {
  animation:
    doodadDropInLeft 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) 4.2s forwards,
    doodadStretch    3s   ease-in-out                         5.2s infinite;
}

.is-doodads-animating .loop-logo-doodad-2 {
  animation:
    doodadDropInCenter 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) 4.1s forwards,
    doodadClick        4s   cubic-bezier(0.3, 0.8, 0.2, 1)    5.0s infinite;
}

.is-doodads-animating .loop-logo-doodad-3 {
  animation:
    doodadDropInRight 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) 4.15s forwards,
    doodadSpin        5.5s cubic-bezier(0.15, 0.8, 0.2, 1)   5.2s infinite;
}




/*DROP-IN ANIMATION*/
/* DOODAD 1 + 11 */
@keyframes doodadDropInLeft {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translateY(-20px);
  }
  70% {
    opacity: 1;
    transform: rotate(-45deg) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: rotate(-45deg) translateY(0);
  }
}

/* DOODAD 2 (COMPOSE ON TOP OF BASE TRANSFORM) */
@keyframes doodadDropInCenter {
  0% {
    opacity: 0;
    transform: var(--base-transform) translateY(20px) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: var(--base-transform) translateY(-6px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: var(--base-transform) translateY(0) scale(1);
  }
}

/* DOODAD 3 (COMPOSE ON TOP OF BASE TRANSFORM + ROTATION) */
@keyframes doodadDropInRight {
  0% {
    opacity: 0;
    transform: var(--base-transform) rotate(45deg) translateY(-20px);
  }
  70% {
    opacity: 1;
    transform: var(--base-transform) rotate(45deg) translateY(6px);
  }
  100% {
    opacity: 1;
    transform: var(--base-transform) rotate(45deg) translateY(0);
  }
}


/*LOOPING ANIMATION*/
/* DOODAD 1 + 11 */
@keyframes doodadStretch {
  0%, 55%, 100% { transform: rotate(-45deg) scaleY(1); }
  70%          { transform: rotate(-45deg) scaleY(1.6); }
  80%          { transform: rotate(-45deg) scaleY(0.9); }
}

/* DOODAD 2 (COMPOSE ON TOP OF BASE TRANSFORM) */
@keyframes doodadClick {
  0%, 60%, 100% {
    transform: var(--base-transform) translateY(0) scaleY(1);
  }
  72% {
    transform: var(--base-transform) translateY(10px) scaleY(0.7);
  }
  84% {
    transform: var(--base-transform) translateY(-4px) scaleY(1.15);
  }
  92% {
    transform: var(--base-transform) translateY(0) scaleY(1);
  }
}

/* DOODAD 3 (COMPOSE ON TOP OF BASE TRANSFORM + ROTATION SPIN) */
@keyframes doodadSpin {
  0% {
    transform: var(--base-transform) rotate(45deg);
  }
  40% {
    transform: var(--base-transform) rotate(945deg);
  }
  100% {
    transform: var(--base-transform) rotate(1125deg);
  }
}

/* PAIRED DOODADS SCALE FROM BOTTOM (ANCHOR BASE) */
.doodad-pair .loop-logo-doodad-1,
.doodad-pair .loop-logo-doodad-11 {
  transform-origin: 50% 100%;
}








/*PREVIEW FRAME FOR DIGBI*/
#frame-digbi {
	position: relative;
	z-index: 3;
	position: absolute;
	left: 0px;
	top: 0px;
	width: calc(100%);
	height: calc(100%);
 	overflow: hidden;
/* 	border: 4px solid green;*/
}
@media screen and (max-width: 768px) {
	#frame-digbi {
		display: none;
	}
}



/*HOVER IMAGE*/
[id^='hover_image'] {
	height: 100%;
	width: 100%;
  display: flex;
 	justify-content: center;
 	border: 1px solid rgba(49,48,254,1);
 	overflow: hidden;
}









/*DIGBI APP PREVIEW*/
/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_app .project-image {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #11D29B;
}

/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_app .project-image {
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

/*IMG - BASE*/
#frame-digbi #hover_image-digbi_app .project-image .meal-base {
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}
/*IMG - RAFT*/
#frame-digbi #hover_image-digbi_app .project-image .meal-raft {
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}

/*ANIMATION - RAFT*/
#frame-digbi #hover_image-digbi_app .project-image .meal-raft {
  position: absolute;
   x-transition: all 6s ease-in-out;
  animation: raft 12s infinite;
}
@keyframes raft {
  0% {
  	top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  50% {
  	top: 16px;
    left: calc(50% - 16px);
    transform: translate(-50%, 0);
  }
  100% {
  	top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}













/*DIGBI HOMEPAGE PREVIEW*/
/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_homepage .project-image {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #FCE9C8;
}

/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_homepage .project-image {
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

/*IMG - BASE*/
#frame-digbi #hover_image-digbi_homepage .project-image .still {
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}
/*IMG - RAFT*/
#frame-digbi #hover_image-digbi_homepage .project-image .move {
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}









/*DIGBI PARTNER PREVIEW*/
/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_partner .project-image {
	width: 100%;
	background-color: #FAFAFA;
}

/*GRASS*/
#frame-digbi #hover_image-digbi_partner .project-image .grass-dark {
	height: 2%;
	width: calc(100% - 2px);
  bottom: 8%;
  left: 1px;
  position: absolute;
	background-color: #1B8A7C;
}

#frame-digbi #hover_image-digbi_partner .project-image .grass-light {
	height: 8%;
	width: calc(100% - 2px);
  bottom: 1px;
  left: 1px;
  position: absolute;
	background-color: #00CC91;
}

/*IMG*/
#frame-digbi #hover_image-digbi_partner .project-image img {
	height: 66.67%;
  bottom: 10%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}









/*PROGRAM*/
/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_program .project-image {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #E3ECFC;
}

/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_program .project-image {
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

/*WATER*/
#frame-digbi #hover_image-digbi_program .project-image .water {
	height: 50%;
	width: 100%;
  bottom: 0px;
  left: 0px;
  position: absolute;
	background-color: rgba(76,132,255,.07);
}

/*IMG - SITTING*/
#frame-digbi #hover_image-digbi_program .project-image .sitting {
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}
/*IMG - SCUBA*/
#frame-digbi #hover_image-digbi_program .project-image .scuba {
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}
/*IMG - BOAT*/
#frame-digbi #hover_image-digbi_program .project-image .boat {
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}

/*ANIMATION - BOAT*/
#frame-digbi #hover_image-digbi_program .project-image .boat {
  position: absolute;
  x-transition: all 2s ease-in-out;
  animation: boat 6s infinite;
}
@keyframes boat {
  0% {
    left: 50%;
    transform: translate(-50%, 0);
  }
  50% {
    left: calc(50% + 16px);
    transform: translate(-50%, 0);
  }
  100% {
    left: 50%;
    transform: translate(-50%, 0);
  }
}

/*ANIMATION - SCUBA*/
#frame-digbi #hover_image-digbi_program .project-image .scuba {
  position: absolute;
  x-transition: all 2s ease-in-out;
  animation: scuba 6s infinite;
}
@keyframes scuba {
  0% {
    top: 0px;
  }
  50% {
    top: 16px;
  }
  100% {
    top: 0px;
  }
}









/*BRAND*/
#frame-digbi #hover_image-digbi_brand .project-image {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}


/*DIGBI LOGO WRAPPER*/
#frame-digbi #hover_image-digbi_brand .project-image .wrapper-header {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 60px;
}

/*DIGBI LOGO*/
#hover_image-digbi_brand .project-image .wrapper-header img {
  width: 165px;
}



/*PROJECT IMAGE*/
#frame-digbi #hover_image-digbi_brand .project-image {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #4C84FF;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

#frame-digbi #hover_image-digbi_brand .project-image .airplane-container {
  height: 200px;
  position: absolute;
  display: flex;
  align-items: center;
}

#frame-digbi #hover_image-digbi_brand .project-image .airplane-container img  {
  width: 200px;
  height: 200px;
  z-index: 2;
}


#frame-digbi #hover_image-digbi_brand .project-image .airplane-container {
  left: 0;
  animation: airpplanFlying 6s ease-in-out infinite;
}
@keyframes airpplanFlying {
  0% {
    left: calc(50% - 96px);
  }
  50% {
    left: calc(50% - 104px);
  }
  100% {
    left: calc(50% - 96px);
  }
}


#frame-digbi #hover_image-digbi_brand .project-image .airplane-container img {
  animation: airplaneTurbulence 6s infinite ease-in-out;
}
@keyframes airplaneTurbulence {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
  32% {
    transform: translateY(6px);
  }
  34% {
    transform: translateY(-4px);
  }
  36% {
    transform: translateY(0);
  }
}












/*ANNOUCEMENT*/
.project-announcement {
	width: 72px;
	height: 48px;
  top: -60px;
  left: 50%;
  z-index: 4;
  position: absolute;
  transform: translate(-50%, 0);
  transition: 0.4s ease;
}
.project-announcement.animate-down {
  transition-delay: .6s;
  top: 60px;
}





/*LABEL*/
.project-label {
  position: absolute;
  display: flex;
  padding: 8px 10px;
  bottom: -44px;
  left: 16px;
  border-radius: 24px;
  z-index: 4;
  transition: 0.4s ease;
  border: 3px solid #3130FE;
}
.project-label.animate-up {
  transition-delay: .2s;
  bottom: 16px;
}
.project-label h5 {
	font-weight: 600;
}







/* DIGBI-WALKING-ANIMATION */
#history .digbi-logo-animation {
  width: 100%;
  height: 74px;
  position: relative;
  overflow: hidden;
}

#history #digb, 
#history #turned, 
#history #walking {
  width: 132px;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

#history #digb {
  opacity: 1;
  visibility: visible;
}

#history #walking {
  left: 100%;
  opacity: 0;
  visibility: hidden;
}

#history #turned {
  left: 0;
  opacity: 0;
  visibility: hidden;
}

@keyframes walking {
  0% {
    left: 100%;
    opacity: 1;
    visibility: visible;
  }
  99.999% {
    left: 0px;
    opacity: 1;
    visibility: visible;
  }
  100% {
    left: 0px;
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes turned {
  0%, 25% {
    left: 0px;
    opacity: 1;
    visibility: visible;
  }
  37.5% {
    left: 4px;
    opacity: 1;
    visibility: visible;
  }
  50% {
    left: 4px;
    opacity: 1;
    visibility: visible;
  }
  62.5% {
    left: 2px;
    opacity: 1;
    visibility: visible;
  }
  75% {
    left: 12px;
    opacity: 1;
    visibility: visible;
  }
  100% {
    left: 0px;
    opacity: 1;
    visibility: visible;
  }
}










/*H2 HEADERS*/
#history .job h2 {
	font-weight: 900;
}



/*LINK*/
#history .job .job-link {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

#history .job .job-link h3 {
	font-weight: 500;
}

#history .job .job-link img:first-of-type {
	width: 40px;
	height: 40px;
}


#history .job .job-link:hover { 
	cursor: pointer;
}

/*NO-LINK*/
#history .job .job-no-link {
	width: 100%;
	position: relative;
}
#history .job .job-no-link h3 {
	font-weight: 500;
}



/*COMING SOON*/
#history .job .job-soon {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

#history .job .job-soon h3 {
	font-weight: 500;
}

#history .job .job-soon img:first-of-type {
	width: 40px;
	height: 40px;
}

/*COMING SOON SPEECH BUBBLE*/
/*NOTE: POSITION THESE WITH CSS IN THE HTML FILE*/
#history .job .coming-soon {
	width: 72px;
	height: 48px;
	position: absolute;
}











/* CONNECT */
#connect{
  position:relative;
  --connect-pill-gap:80px;
}

/* BLUE PANEL */
#connect #connect-panel{
  position:relative;
  padding-top:280px;
  background-color:#3130FE;
}

/* HEADER */
#connect .header-text h1{
  font-weight:800;
}

/* PARAGRAPH TEXT */
#connect .paragraph-text{
  width:100%;
}

/* PANEL HEADLINE (CENTERED, Y ONLY) */
#connect #connect-panel h4{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%) !important;
  width:100%;
  text-align:center;

  margin:0;
  padding:0;
  z-index:4;
  pointer-events:none;

  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}

/* CONNECT WRAP */
#connect .connect-wrap{
  position:relative;
  width:100%;
  max-width:700px;
  margin:0 auto;

  aspect-ratio:2 / 1;
  overflow:visible;
  pointer-events:auto;

  z-index:1;
  isolation:isolate;
}

/* MORPH WRAP (RESPONSIVE IN SNIGLET STATE) */
#connect #email-morph-wrap{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);

  width:100%;
  max-width:700px;

  /* KEEP A STABLE BOX FOR BOTH STATES */
  aspect-ratio:388 / 194;
  height:auto;

  display:block;
  overflow:visible;

  /* NEW: LOCAL STACKING CONTEXT SO Z-INDEX IS PREDICTABLE */
  isolation:isolate;
}

/* SNIGLET SVG (DESKTOP) */
#connect #email-sniglet-svg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;

  display:block;
  overflow:visible;

  z-index:3;
  pointer-events:none;
}

/* SNIGLET SVG (MOBILE) */
#connect #email-sniglet-svg-mobile{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;

  display:block;
  overflow:visible;

  z-index:3;
  pointer-events:none;
}

/* LEXEND SVG (HIDDEN, MEASURABLE) */
#connect #email-lexend-src{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;

  display:block;
  overflow:visible;

  opacity:0;
  pointer-events:none;

  /* IMPORTANT: KEEP THIS ABOVE THE PILL TOO (PREVENTS "DISAPPEAR" IF/WHEN SHOWN) */
  z-index:3;
}

/* GLYPH TRANSFORMS */
#connect #email-sniglet-svg path,
#connect #email-sniglet-svg-mobile path,
#connect #email-lexend-src path{
  transform-box:fill-box;
  transform-origin:50% 50%;
}

/* EMAIL PILL HIT AREA */
#connect .email-button-hit{
  position:absolute;
  left:50%;
  top:5%;
  transform:translate(-50%, -50%);

  width:1px;
  height:1px;

  padding:0;
  margin:0;

  /* PILL BACKGROUND */
  background-color:#3130FE;
  background-clip:padding-box;

  /* BASE: NO OUTLINE UNTIL READY */
  border:1px solid transparent;
  border-radius:999px;

  cursor:pointer;

  /* PILL LAYER: BELOW SVGs, ABOVE TOAST */
  z-index:2;

  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;

  pointer-events:auto;
  transition:border-color 160ms ease;
}

/* MARCHING ANTS OVERLAY (DEFAULT OFF) */
#connect .email-button-hit::after{
  content:"";
  position:absolute;

  /* KEEP ANTS OVERLAY ALIGNED WITH THE SOLID BORDER WIDTH */
  inset:-3px;

  border-radius:999px;
  pointer-events:none;

  opacity:0;

  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  background-image:var(--ants-url, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 48'%3E%3Cstyle%3E%40keyframes dash%7Bto%7Bstroke-dashoffset%3A-20%3B%7D%7D%3C/style%3E%3Crect x='0.75' y='0.75' width='214.5' height='46.5' rx='24' ry='24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='5 5' style='animation%3Adash 550ms linear infinite%3B'/%3E%3C/svg%3E"));

  transform:translateZ(0);
  will-change:opacity;
}

/* READY STATE (AFTER MORPH): SHOW ANTS BY DEFAULT */
#connect .email-button-hit.is-hovered::after{
  opacity:1;
}

/* FORCE ANTS (OVERRIDES HOVER / SOLID STATES) */
#connect .email-button-hit.is-force-ants{
  border-color:transparent !important;
}

#connect .email-button-hit.is-force-ants::after{
  opacity:1 !important;
}

/* READY + HOVER: SOLID OUTLINE, HIDE ANTS (BUT NOT WHEN FORCED)
   ONLY ON TRUE HOVER DEVICES (PREVENTS "STUCK HOVER" IN MOBILE EMULATION) */
@media (hover: hover) and (pointer: fine){
  #connect .email-button-hit.is-hovered:hover:not(.is-force-ants){
    transform:translate(-50%, -50%) translateZ(0);

    border-width:3px;
    border-style:solid;
    border-color:#fff;
  }

  #connect .email-button-hit.is-hovered:hover:not(.is-force-ants)::after{
    opacity:0;
  }
}

/* MOBILE TAP “PULSE SOLID” (FORCE SOLID ON) */
#connect .email-button-hit.is-solid{
  transform:translate(-50%, -50%) translateZ(0);

  border-width:3px;
  border-style:solid;
  border-color:#fff;
}

#connect .email-button-hit.is-solid::after{
  opacity:0;
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  #connect .email-button-hit::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 52'%3E%3Crect x='1.5' y='1.5' width='217' height='49' rx='24' ry='24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='5 5'/%3E%3C/svg%3E");
  }
}

/* @ SYMBOL */
#connect .email-at{
  position:absolute;
  left:0;
  top:0;

  font-family:"Lexend Deca", sans-serif;
  font-size:18px;
  line-height:1;
  color:#fff;

  pointer-events:none;

  /* KEEP @ ABOVE EVERYTHING */
  z-index:9999;

  transform:none;
}

/* ENSURE NO CLIPPING */
#connect .diagram,
#connect .connect-wrap,
#connect #email-morph-wrap{
  overflow:visible;
}

/* REMOVE LEGACY WRAPPERS */
#connect .email-button,
#connect .letter-pile,
#connect .email-lexend-src{
  all:unset;
}



/* COPY CONFIRMATION TOAST */
#connect .copy-toast{
  position:absolute;
  left:50%;
  top:5%;
  transform:translate(-50%, -50%);

  /* TOAST LAYER: BELOW PILL */
  z-index:1;
  pointer-events:none;

  /* HARD SHOW/HIDE (NO FADE) */
  visibility:hidden;
  opacity:1;
}

#connect .copy-toast.is-showing{
  visibility:visible;
}

/* TOAST INNER */
#connect .copy-toast-inner{
  background:#fff;
  color:#3130FE;
  border-radius:12px;
  padding:8px 12px;
  text-align:center;
  white-space:nowrap;

  opacity:1;
  transform-origin:center;

  /* BASE FALLBACK (MATCHES 0% KEYFRAME) */
  transform:translateY(10px) scale(0.08) rotate(-24deg);
}

/* TRIGGER */
#connect .copy-toast.is-showing .copy-toast-inner{
  animation:copyToastPop 2200ms ease-in-out both;
}

/* POP FROM NOTHING -> HOLD/ROTATE -> SHRINK TO NOTHING */
@keyframes copyToastPop{
  /* TINY INSIDE PILL */
  0%{
    transform:translateY(10px) scale(0.08) rotate(-24deg);
  }

  /* QUICK POP OUT + OVERSHOOT */
  14%{
    transform:translateY(-122px) scale(1.06) rotate(-10deg);
  }

  /* SETTLE TO PEAK */
  24%{
    transform:translateY(-120px) scale(1) rotate(-4deg);
  }

  /* HOLD AT PEAK, SLOWLY ROTATE */
  78%{
    transform:translateY(-120px) scale(1) rotate(4deg);
  }

  /* SHRINK WHILE DROPPING INTO PILL */
  94%{
    transform:translateY(-14px) scale(0.18) rotate(18deg);
  }

  /* TINY INSIDE PILL AGAIN */
  100%{
    transform:translateY(10px) scale(0.08) rotate(24deg);
  }
}



/* RESPONSIVE: WHICH SNIGLET SVG IS VISIBLE */
@media (max-width:500px){
  #connect #email-sniglet-svg{
    display:none !important;
  }

  #connect #email-sniglet-svg-mobile{
    display:block !important;
  }
}

@media (min-width:501px){
  #connect #email-sniglet-svg{
    display:block !important;
  }

  #connect #email-sniglet-svg-mobile{
    display:none !important;
  }
}










/*SNACKBARS*/
.snackbar-wrapper {
	display: none;
	position: absolute;
	width: 100vw;
	height: 100%;
	z-index: 4;
	align-items: center;
	justify-content: center;
}



[class*="snackbar-container"] {
	display: flex;
	justify-content: center;
  position: sticky;
  top: calc(50% - 40px);
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 12px;
  opacity: 0;
}

[class*="snackbar-container"] h4 {
	font-weight: 900;
}






/*JJR OVERLAY*/
#jjr {
	top: 0px;
	left: 0px;
	position: fixed;
	align-content: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	z-index: 7;
	display: none;
	background-color: rgb(255,255,255);
	pointer-events: auto;
}

/*CLOSE TITLE*/
#jjr-title {
	font-weight: 900;
	position: absolute;
}
@media screen and (max-width: 768px) {
	#jjr-title {
		top: 24px;
		left: 24px;
	}
	#jjr-title span:first-of-type {
		display: none;
	}
}
@media screen and (min-width: 769px) {
	#jjr-title {
		top: 48px;
		left: 48px;
	}
	#jjr-title span:last-of-type {
		display: none;
	}
}

/*CLOSE BUTTON*/
#jjr-close {
	width: 40px;
	height: 40px;
	position: absolute;
}
@media screen and (max-width: 768px) {
	#jjr-close {
		top: 24px;
		right: 24px;
	}
}
@media screen and (min-width: 769px) {
	#jjr-close {
		top: 48px;
		right: 48px;
	}
}

#jjr-close:hover {
	cursor: pointer;
}



/*EXTENDS SECTION FOR LEFT-RIGHT KEYBOARD CLICK*/
.project-imagery .carousel-extents-extender {
	position: fixed;
	width: 100%;
	height: 100%;
}



/*PROJECT-IMAGERY-WRAPPER*/
#jjr .project-imagery-wrapper {
	display: flex;
	justify-content: center;
}



/*PROJECT-IMAGERY*/
#jjr .project-imagery-wrapper .project-imagery {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}

/*WRAPPER-CAROUSEL*/
#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel {
  box-shadow: 0 0 0 1px #3130FE;
}

/*NARROW SCREENS*/
@media screen and (max-width: 768px) {
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel {
      aspect-ratio: 1 / 1;
      width: 100%;
      max-width: calc(100vw - 48px);
      height: calc(100vw - 48px);
      max-height: calc(100vh - 200px);
	}
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container {
	  aspect-ratio: 1 / 1;
	}

	/*CAROUSEL-SLIDE*/
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container .carousel-slide {
	  aspect-ratio: 1 / 1;
	}

	/*IMG*/
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container .carousel-slide img {
	  aspect-ratio: 1 / 1;
	}

	/*HIDE NON-MOBILE IMAGE*/
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container .carousel-slide img:nth-child(1) {
		display: none;
	}
}

/*WIDE SCREENS*/
@media screen and (min-width: 769px) {
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel {
	  aspect-ratio: 2 / 1;
		max-width: calc(100vw - 96px);
		max-height: 60vh;
	}

	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container {
	  aspect-ratio: 2 / 1;
	}

	/*CAROUSEL-SLIDE*/
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container .carousel-slide {
	  aspect-ratio: 2 / 1;
	}

	/*IMG*/
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container .carousel-slide img {
	  aspect-ratio: 2 / 1;
	}

	/*HIDE MOBILE IMAGE*/
	#jjr .project-imagery-wrapper .project-imagery .wrapper-carousel .carousel-container .carousel-slide img:nth-child(2) {
		display: none;
	}
}









/*WRAPPER-PAGINATION*/
#jjr .wrapper-pagination {
	position: absolute;
	z-index: 2;
	bottom: -52px;
}
@media screen and (max-width: 768px) {
	#jjr .wrapper-pagination {
	  left: 50%;
	  transform: translate(-50%, 0%);
	}
}
@media screen and (min-width: 769px) {
	#jjr .wrapper-pagination {
		left: -6px;
	}
}



/*PAGINATION-DOT*/
#jjr .pagination_dot {
  background-color: #3130FE;
}
#jjr .pagination_dot-boundary.inactive:hover .pagination_dot {
  background-color: rgba(255,255,255,0);
  box-shadow: 0 0 0 4px #3130FE;
}


#jjr .wrapper-arrows {
	position: absolute;
}

@media screen and (min-width: 769px) {
	#jjr .wrapper-arrows {
		display: flex;
		right: -12px;
		bottom: -52px;
	}
}

@media screen and (min-width: 769px) {
	#jjr .carousel-arrows {
		display: flex;
	}
}

/*ARROW COLOR*/
#jjr .carousel-arrow-backward span  {
  background-color: #3130FE
}
#jjr .carousel-arrow-forward span  {
  background-color: #3130FE;
}








/*PROJECT SELECTOR WRAPPER*/
#jjr .project-selector-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}



/*PROJECT SELECTOR*/
#jjr .project-selector-wrapper .project-selector {
	width: 48px;
	height: 48px;
	margin-left: 2px;
	margin-right: 2px;
	position: relative;
}

/*PROJECT THUMBNAIL*/
#jjr .project-selector-wrapper .project-selector .project-thumbnail {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	border-radius: 24px;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 0 0 0px rgb(49,48,254);
}
#jjr .project-selector-wrapper .project-selector.active .project-thumbnail {
	border: 2px solid rgba(49,48,254,1);
}
#jjr .project-selector-wrapper .project-selector:hover .project-thumbnail {
  box-shadow: inset 0 0 0 8px rgb(49,48,254);
}



/*PROJECT BUBBLE*/
#jjr .project-selector-wrapper .project-selector .project-bubble {
	position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -100%);
	padding: 8px;
	border-radius: 18px;
	background-color: rgba(49,48,254,1);
	border: 3px solid rgba(49,48,254,1);
	z-index: 2;
}
/*PROJECT BUBBLE H5*/
#jjr .project-selector-wrapper .project-selector .project-bubble h5 {
	line-height: 15px;
	text-align: center;
}
/*PROJECT BUBBLE IMG*/
#jjr .project-selector-wrapper .project-selector .project-bubble img {
	bottom: -12px;
	position: absolute;
	width: 20px;
	height: 12px;
  left: 50%;
  transform: translate(-50%, 0);
}



/*PROJECT SELECTOR IMG*/
#jjr .project-selector-wrapper .project-selector .project-thumbnail img {
	width: 40px;
	height: 40px;
	border-radius: 20px;
}
/*PROJECT SELECTOR HOVER*/
#jjr .project-selector-wrapper .project-selector:hover,
#jjr .project-selector-wrapper .project-selector .project-thumbnail:hover,
#jjr .project-selector-wrapper .project-selector .project-thumbnail img:hover {
	cursor: pointer;
}




/* Ensure child elements take up full height */
/*#jjr .carousel-container,
#jjr .carousel-slide {
    height: 100%;
}*/

/*LOADER*/
/*.loader-wrapper {
	position: absolute;
	width: 100vw;
	height: 100%;
	z-index: 4;
}

.loader-wrapper {
  x-transition: all 2.5s ease-in-out;
  animation: loadBlur 2.5s infinite;
}
@keyframes loadBlur {
  0% {
  	backdrop-filter: blur(200px);
 		background-color: rgba(49,48,254,1);
  }
  10% {
  	backdrop-filter: blur(5px);
 		background-color: rgba(49,48,254,.2);
  }
  100% {
  	backdrop-filter: blur(0px);
  }
}*/