#featured-highlights{
	position: relative; width: 100%; height: 955px; padding: 50px 0 0 0; overflow: hidden; perspective: 500px; display: flex; align-items: center; flex-direction: column; margin: 20px 0 80px 0;
}

@media (width <= 768px) {
	#featured-highlights{
		margin:0 0 50px 0;
	}
}

#pin-container{
	position:relative; height:770px;; width:800px;
}

#water{
	width:245px; height:450px; background:url(../images/water.jpg) no-repeat center; background-size:contain; position:absolute; top:80px; left:-33px;
}

#pin{
	position:absolute; height:700px;; width:510px; background:url('../images/pin-bg.png') no-repeat center; background-size:contain; bottom:0; left:0; right:0; margin:auto; transform-origin:bottom center;
}

#river{
	position:absolute; height:700px;; width:510px; background:url('../images/river-bg.webp') no-repeat center; background-size:contain; bottom:0; left:0; right:0; margin:auto; transform-origin:bottom center;
}

#coaster{
	width:300px; height:260px; background:url(../images/coaster.png) no-repeat center; background-size:contain; position:absolute; top:292px; left:26px;
}

#road{
	width:351px; height:410px; background:url(../images/road.png) no-repeat center; background-size:contain; position:absolute; top:60px; right:-44px;
}

#wafer{
	width:350px; height:350px; background:url('../images/wafer.png') no-repeat center; background-size:contain; position:absolute; top:155px; left:0; right:0; margin:auto;
}

#graph{
	width:200px; height:200px; background:url(../images/graph.png) no-repeat center; background-size:contain; position:absolute; right:150px; right:135px; top:-50px;
}

#trees{
	    width:250px; height:120px; background:url(../images/trees.png) no-repeat center; background-size:contain; position:absolute; top:-15px; left:-5px; right:0; margin:auto;
}

#grid-worker{
	width:230px; height:250px; background:url('../images/grid.png') no-repeat center; background-size:contain; position:absolute; left:70px; top:0;
}

#business-woman{
	width:200px; height:260px; position:absolute; top:-55px; left:-15px; right:0; margin:auto; background:url(../images/business-woman.png) no-repeat center; background-size:contain;
}

#shot-clock{
	width:90px; height:160px; position:absolute; left:185px; top:140px; background:url(../images/shot-clock.png) no-repeat center; background-size:contain;
}

#lab-tech{
	width:150px; height:250px; position:absolute; top:60px; right:160px; background:url('../images/lab-tech.png') no-repeat center; background-size:contain;
}

#ny-topo{
	position:absolute; height:245px; width:100%; background:url('../images/ny-topo.jpg') no-repeat center; background-size:contain; bottom:0; left:0; right:0; background-position:calc(50% + 70px) 50%; margin:auto; transform-origin:center bottom;

	
}

#ny-topo #circle{
	height:60px; width:100px; background:url('../images/pin-circle.png') no-repeat center; background-size:contain; position:absolute; left:calc(50% - 51px); top:100px;
}

#hotspots{
	width:100%; height:100%; position:relative;
}

#hotspots .spot{
	position:absolute; height:30px; width:30px; border-radius:50%; background:#fff; border:0; cursor:pointer; padding:0; margin:0; z-index:0;
}

#hotspots .spot span{
	font-size:20px; color:#000; line-height:1;
}

#hotspots .spot span:first-of-type{
	color:var(--blue-primary);
}

#hotspots .spot p{
	font-family: 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size:14px; font-weight:400; margin:1rem 0;
}

#hotspots .spot:hover,
#hotspots .spot:focus{
	outline:none; box-shadow:none; z-index:1;
}

#hotspots .spot:before{
	content:""; position:absolute; top:-6px; left:-6px; width:calc(100% + 12px); height:calc(100% + 12px); box-sizing:border-box; border-radius:50%; border:4px solid #fff; opacity:0; transform:scale(0.75); transition:all 0.75s ease; transform-origin:center; animation:border-pulse 1.25s ease infinite;
}
@media (prefers-reduced-motion: reduce){
	#hotspots .spot:before{
		animation:none; opacity:1; transition:none;
	}
}

@keyframes border-pulse{
	0%{ transform:scale(0.75); opacity:1; }

	100%{ transform:scale(1.25); opacity:0; }
}

#hotspots .spot:hover:before,
#hotspots .spot:focus:before{
	animation:none; border:3px solid #fff; transform:scale(1); opacity:1; 
}

/*#hotspots .spot span{
	display:block !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important;
}*/

#hotspots .spot:nth-of-type(1){
	top:80px; left:220px; background:var(--blue-primary);
}
#hotspots .spot:nth-of-type(1):before{
	border-color:var(--blue-primary);
}

#hotspots .spot:nth-of-type(2){
	top:100px; left:440px;
}

#hotspots .spot:nth-of-type(3){
	top:240px; left:670px;
}

#hotspots .spot:nth-of-type(4){
	top:300px; left:300px;
}

#hotspots .spot:nth-of-type(5){
	top:330px; left:65px; background:var(--orange-accent);
}
#hotspots .spot:nth-of-type(5):before{
	border-color:var(--orange-accent);
}

#hotspots .spot:nth-of-type(6){
	top:500px; left:500px;
}

#hotspots .spot:nth-of-type(7){
	top:765px; left:385px;
}

#hotspots .spot div:not(.close-spot){
	position:absolute;top:0; left:50px; background:#fff; text-align:left; padding:30px; border:2px solid var(--blue-primary); border-radius:20px; box-shadow:0 0 20px 10px rgba(0,0,0,0.20); width:300px; pointer-events:none; opacity:0; transform:scale(0.95) translateY(calc(-50% + 15px)); transition:all 0.33s ease; box-sizing:border-box; transform-origin:center;
}
@media (prefers-reduced-motion: reduce){
	#hotspots .spot div:not(.close-spot){
		transition:none;
	}
}

@media (width <= 1250px){
	#hotspots .spot:nth-of-type(3) div:not(.close-spot){
		left:-320px;
	}
}

#hotspots .spot:nth-of-type(7) div:not(.close-spot){
	top:-80px;
}

#hotspots .spot:focus div,
#hotspots .spot:focus-within div,
/* for Ipad */
#hotspots .spot div.visible{
	opacity:1; transform:scale(1) translateY(calc(-50% + 15px)); pointer-events:all;
}

#hotspots .spot .close-spot{
	position:absolute; height:30px; width:30px; top:10px; right:10px;
}
#hotspots .spot .close-spot:hover svg path{
	fill:var(--blue-dark); transition:all 0.25s ease;
}

.layer.dim{
	opacity:0.33 !important; transition:all 0.5s ease !important; transition-delay:0 !important;
}

#pin-container{
	transform-origin:bottom center; opacity:0; transform:scale(1) rotateX(90deg); transition:all 0.75s ease; filter:blur(10px);
}
#featured-highlights.active #pin-container{
	opacity:1; transform:scale(1) rotateX(0) rotateY(0); filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #pin-container{
		opacity:1; transform:scale(1) rotateX(0) rotateY(0); filter:blur(0);
	}
}

#water{
	opacity:0; transform:translateX(100px) scale(0.8) rotateX(0) rotateY(65deg); transform-origin:bottom right; transition:all 0.75s ease; filter:blur(10px);
}
#featured-highlights.active #water{
	opacity:1; transform:translateX(0) scale(1) rotateX(0) rotateY(0); filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #water{
		opacity:1; transform:translateX(0) scale(1) rotateX(0) rotateY(0); filter:blur(0);
	}
}
#featured-highlights.active.initial #water{
	transition-delay:0.5s;
}

#grid-worker{
	opacity:0; transform:translateY(30px) translateX(80px) rotate(20deg); transition:all 0.75s cubic-bezier(0.4, 0, 0.34, 1.42); filter:blur(8px);
}
#featured-highlights.active #grid-worker{
	opacity:1; transform:translateY(0) translateX(0) rotate(0deg); filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #grid-worker{
		opacity:1; transform:translateY(0) translateX(0) rotate(0deg); filter:blur(0);
	}
}
#featured-highlights.active.initial #grid-worker{
	transition-delay:0.5s;
}

#trees{
	opacity:0; transform:scale(0.75) translateY(30px); transform-origin:center bottom; transition:all 0.75s ease; 
}
#featured-highlights.active #trees{
	opacity:1; transform:translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #trees{
		opacity:1; transform:translateY(0) scale(1);
	}
}
#featured-highlights.active.initial #trees{
	transition-delay:0.5s;
}

#graph{
	opacity:0; transform:scale(0.5) translateY(30px); transform-origin:bottom left; transition:all 0.75s ease; 
}
#featured-highlights.active #graph{
	opacity:1; transform:translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #graph{
		opacity:1; transform:translateY(0) scale(1);
	}
}
#featured-highlights.active.initial #graph{
	transition-delay:0.5s;
}

#road{
	opacity:0; transform:rotateX(-45deg) rotateY(90deg); transform-origin:bottom left; transition:all 1s cubic-bezier(0.4, 0, 0.34, 1.42); filter:blur(8px);
}
#featured-highlights.active #road{
	opacity:1; transform:rotateX(0) rotateY(0deg); filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #road{
		opacity:1; transform:rotateX(0) rotateY(0deg); filter:blur(0);
	}
}
#featured-highlights.active.initial #road{
	transition-delay:0.5s;
}

#coaster{
	opacity:0; transform-origin:top right; transform:rotateY(90deg); transition:all 0.75s cubic-bezier(0.4, 0, 0.34, 1.42); filter:blur(8px);
}
#featured-highlights.active #coaster{
	opacity:1; transform:rotateY(0); filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #coaster{
		opacity:1; transform:rotateY(0); filter:blur(0);
	}
}
#featured-highlights.active.initial #coaster{
	transition-delay:0.75s;
}

#business-woman{
	opacity:0; transform-origin:center bottom; transform:translateY(100px); transition:all 0.5s ease; filter:blur(5px);
}
#featured-highlights.active #business-woman{
	opacity:1; transform:translateY(0); filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #business-woman{
		opacity:1; transform:translateY(0); filter:blur(0);
	}
}
#featured-highlights.active.initial #business-woman{
	transition-delay:0.75s;
}

#lab-tech{
	opacity:0; transform-origin:center bottom; transform:translateY(100px); transition:all 0.75s ease;
}
#featured-highlights.active #lab-tech{
	opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #lab-tech{
		opacity:1; transform:translateY(0);
	}
}
#featured-highlights.active.initial #lab-tech{
	transition-delay:1s;
}

#shot-clock{
	opacity:0; transform-origin:center bottom; transform:translateY(100px); transition:all 0.75s ease;
}
#featured-highlights.active #shot-clock{
	opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
	#featured-highlights #shot-clock{
		opacity:1; transform:translateY(0);
	}
}
#featured-highlights.active.initial #shot-clock{
	transition-delay:1.15s;
}

#hotspots .spot:nth-of-type(1),
#hotspots .spot:nth-of-type(2),
#hotspots .spot:nth-of-type(3),
#hotspots .spot:nth-of-type(4),
#hotspots .spot:nth-of-type(5),
#hotspots .spot:nth-of-type(6),
#hotspots .spot:nth-of-type(7){
	opacity:0; transform:scale(5); transition:all 0.5s ease; 
}
@media (prefers-reduced-motion: reduce){
	#hotspots .spot{
		opacity:1 !important; transform:scale(1) !important;
	}
}

#featured-highlights.active #hotspots .spot:nth-of-type(1),
#featured-highlights.active #hotspots .spot:nth-of-type(2),
#featured-highlights.active #hotspots .spot:nth-of-type(3),
#featured-highlights.active #hotspots .spot:nth-of-type(4),
#featured-highlights.active #hotspots .spot:nth-of-type(5),
#featured-highlights.active #hotspots .spot:nth-of-type(6),
#featured-highlights.active #hotspots .spot:nth-of-type(7){
	opacity:1; transform:scale(1);
}
#featured-highlights.active.initial #hotspots .spot:nth-of-type(5){
	transition-delay:1.25s;
}
#featured-highlights.active.initial #hotspots .spot:nth-of-type(1){
	transition-delay:1.35s;
}
#featured-highlights.active.initial #hotspots .spot:nth-of-type(4){
	transition-delay:1.45s;
}
#featured-highlights.active.initial #hotspots .spot:nth-of-type(2){
	transition-delay:1.65s;
}
#featured-highlights.active.initial #hotspots .spot:nth-of-type(6){
	transition-delay:1.75s;
}
#featured-highlights.active.initial #hotspots .spot:nth-of-type(3){
	transition-delay:1.8s;
}
#featured-highlights.active.initial #hotspots .spot:nth-of-type(7){
	transition-delay:2s;
}

@media (width <= 768px) {
	#scale-container{
		position:relative; transform:scale(0.75) !important;
	}

	#featured-highlights{
		padding:0; height:810px;
	}
}

@media (width <= 668px) {
	#scale-container{
		transform:scale(0.65) !important;
	}

	#featured-highlights{
		height:770px; margin-top:-80px;
	}
}

@media (width <= 576px) {
	#scale-container,
	#ny-topo{
		display:none;
	}

	#featured-highlights{
		background:url('../images/featured-static.webp') no-repeat center; background-size:contain; height:500px; margin:0;
	}
	#featured-highlights.phase2{
		background:url('../images/featured-static-2.png') no-repeat center; background-size:contain; height:500px; margin:0;
	}
}

#featured-highlights-carousel-container{
	position:relative;
}

#featured-highlights-carousel-container .carousel-inner{
	padding:20px;
}

#featured-highlights-carousel-container .carousel-item .card{
	border:2px solid var(--blue-primary); box-shadow:0 0 20px rgba(0,0,0,0.15);
}

#featured-highlights-carousel-container .carousel-item .card-body{
	padding:15px 25px;
}

#featured-highlights-carousel-container .carousel-item .card-body span{
	font-size:24px;
}
#featured-highlights-carousel-container .carousel-item .card-body span:first-of-type{
	color:var(--blue-primary);
}

#featured-highlights-carousel-container .carousel-item .card-body p{
	margin:1rem 0;
}

#featured-highlights-carousel-container .carousel-control-prev,
#featured-highlights-carousel-container .carousel-control-next{
	position:relative; filter:none; position:absolute; top:0; bottom:0; z-index:10; opacity:1; 
}

#featured-highlights-carousel-container .carousel-control-prev{
	border-radius:30px 0 0 30px; left:-5px;
}
#featured-highlights-carousel-container .carousel-control-next{
	border-radius:0 30px 30px 0; right:0px;
}

#featured-highlights-carousel-container .carousel-control-prev-icon,
#featured-highlights-carousel-container .carousel-control-next-icon{
	background-color:#1466B4; border-radius:50%; height:40px; width:40px; background-size:55%;
}