.imap {
	margin-top: -120px;
}

.imap section {
	padding: 0 15px;
	position: relative;
	box-sizing: border-box;
}

#svg img {
	display: inherit;
	max-width: 100%;
	border: 0;
}

.imap section.stage {
	width: 100%;
	height: calc(100vh - 83px);
	margin-top: 83px;
}

.imap section.stage .stage-1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -167px);
	opacity: 1;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.imap section.stage .stage-1 {
		transform: translate(-50%, -170px);
	}
}

@media screen and (min-width: 1024px) {
	.imap section.stage .stage-1 {
		transform: translate(-50%, -194px);
	}
}

.imap section.stage .scroll {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: auto;
	transform: translate(-50%, 140px);
}

.imap section.stage .stage-2 {
	position: absolute;
	top: 110%;
	left: 50%;
	transform: translate(-377px, -84.5px);
	opacity: 0;
}

@media screen and (max-width: 1024px) {
	.imap section.stage .stage-2 {
		transform: translate(-121px, -153px);
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.imap section.stage .stage-2 {
		transform: translate(-170px, -126px);
	}
}

.imap section.stage .boroughs {
	position: absolute;
	top: 110%;
	left: 50%;
	width: 752px;
	height: 233px;
	transform: translate(-241px, -185.5px);
	opacity: 0;
}

@media screen and (max-width: 640px) {
	.imap section.stage .boroughs {
		transform: translate(-85px, -251px);
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.imap section.stage .boroughs {
		transform: translate(-110px, -175px);
		/* width: 355px; */
	}
}

.imap section.stage .boroughs .title {
	position: absolute;
	right: 0px;
	bottom: 0;
	overflow: hidden;
	width: 660px;
	display: flex;
	justify-content: flex-end;
}

@media screen and (max-width: 640px) {
	.imap section.stage .boroughs .title {
		bottom: 104px;
		right: 561px;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.imap section.stage .boroughs .title {
		bottom: 126px;
		right: 401px;
	}
}

.imap section.stage .boroughs .title .mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
}

.imap section.stage .boroughs .title img {
	max-width: none;
}

.imap section.stage .boroughs .numbers {
	position: absolute;
	left: 0;
	bottom: -212px;
	overflow: hidden;
	width: 724px;
	height: 344px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

@media screen and (max-width: 640px) {
	.imap section.stage .boroughs .numbers {
		bottom: -207px;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.imap section.stage .boroughs .numbers {
		bottom: -158px;
	}
}

.imap section.stage .boroughs .numbers img {
	opacity: 0;
}

.imap section.stage .six {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-241px, -79.5px);
}

@media screen and (max-width: 640px) {
	.imap section.stage .six {
		transform: translate(-87px, -153px);
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.imap section.stage .six {
		transform: translate(-105px, -126px);
	}
}

.imap section.explore {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 100vh;
	z-index: 100;
	pointer-events: none;
	opacity: 0;
}

@media screen and (max-width: 1024px) {
	.imap section.explore {
		display: none;
	}
}

.imap section.explore .white,
.imap section.explore .black {
	position: absolute;
	top: 83px;
	left: 50%;
	width: 598px;
	height: 204px;
	transform: translate(-50%, -50%);
}

.imap section.explore .inner {
	width: 598px;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.imap section.map {
	display: grid;
	grid-template-rows: 360px auto;
	padding: 0;
	margin-bottom: 10px;
}

.imap.short section.map {
	grid-template-rows: 60px auto;
}

.imap section.map * {
	pointer-events: none;
}

.imap section.map .top {
	background-color: black;
}

.imap section.map .bottom {
	background-color: white;
}

.imap section.map svg #labels-active > g:not(.cls-6) {
	opacity: 0;
	transition: all ease 0.4s;
}

.imap section.map svg #labels-active > g:not(.cls-6).hover, .imap section.map svg #labels-active > g:not(.cls-6).active {
	opacity: 1;
}

.imap section.map svg #neighborhoods > path:not(#bg),
.imap section.map svg #neighborhoods #waterfront path,
.imap section.map svg #neighborhoods #waterfront polygon {
	fill: black;
	pointer-events: all;
	cursor: pointer;
	transition: all ease 0.4s;
}

.imap section.map svg #neighborhoods > path:not(#bg).hover,
.imap section.map svg #neighborhoods #waterfront path.hover,
.imap section.map svg #neighborhoods #waterfront polygon.hover {
	fill: #2d2d2d;
}

.imap section.map svg #neighborhoods > path:not(#bg).active,
.imap section.map svg #neighborhoods #waterfront path.active,
.imap section.map svg #neighborhoods #waterfront polygon.active {
	fill: #e2231a;
}

.imap section.map svg #neighborhoods #waterfront.hover path,
.imap section.map svg #neighborhoods #waterfront.hover polygon {
	fill: #2d2d2d;
}

.imap section.map svg #neighborhoods #waterfront.active path,
.imap section.map svg #neighborhoods #waterfront.active polygon {
	fill: #e2231a;
}

.imap section.map .caption {
	position: absolute;
	left: 70%;
	top: 70%;
	width: 390px;
	height: 230px;
}

.imap section.map .caption > div {
	position: absolute;
	left: -10000px;
	top: 0;
	opacity: 0;
	transition: opacity ease 0.4s;
}

.imap section.map .caption > div.active {
	opacity: 1;
	left: 0;
}

.imap section.map .caption .title {
	font-size: 34px;
	line-height: 34px;
	letter-spacing: .075em;
	font-family: "proxima-nova", sans-serif;
	text-transform: uppercase;
	color: black;
	font-weight: 700;

}

.imap section.map .caption .description {
	font-size: 18px;
	font-family: "Proxima Nova Rg", sans-serif;
	line-height: 25px;
	color: black;
	text-align: left;
	padding-top: 5px;
}

.imap section.map .caption a {
	pointer-events: all;
}

.imap section.map .caption .link {
	font-size: 18px;
	line-height: 27px;
	color: #e2231a;
	padding-top: 15px;
	font-family: 'subway_bold';
	letter-spacing: .05em;
	pointer-events: all;
}

.imap .small {
	display: none;
}

@media screen and (min-width: 1024px) and (max-width: 1315px) {
	.imap section.map .caption {
		left: 66%;
		width: 375px;
	}
}

@media screen and (min-width: 1024px) {
	.imap .stage .sm,
	.imap .stage .md {
		display: none;
	}
}


@media screen and (max-width: 1024px) {
	.imap .small {
		display: block;
	}
	.imap .large .map {
		display: none;
	}
	.imap .small .slides {
		display: block;
		position: relative;
		max-width: 390px;
		height: 315px;
		margin: 0 auto;
		padding: 50px 10px 20px 10px;
	}

	.imap .small .slides > div {
		transition: all ease 0.4s;
	}

	.imap .small .slides .slick-arrow {
		position: absolute;
		top: 0;
	}
	.imap .small .slides .slick-arrow.prev {
		right: 52px;
	}
	.imap .small .slides .slick-arrow.next {
		right: 0;
	}

	.small .bottom .svg {
		display: none;
	}

	.small .bottom .svg.active {
		display: block;
	}
}  

@media screen and (min-width: 641px) and (max-width: 1024px) {
	.imap .large .map {
		display: none;
	}
	.imap .large .explore {
		display: none;
	}
	.imap .small .explore {
		display: none;
	}
	.imap .small {
		display: block;
	}
	.imap .small .top {
		display: none;
	}
	.imap .stage .lg,
	.imap .stage .sm {
		display: none;
	}
	.imap .small .middle {
		display: none;
	}
}

@media screen and (max-width: 1024px) {
	.imap .small .slides {
		display: block;
		position: relative;
		max-width: 390px;
		height: 340px;
		margin: 0 auto;
		padding: 50px 20px 20px 20px;
	}

	.imap .small .slides > div {
		transition: all ease 0.4s;
	}

	.imap .small .slides .title {
		font-size: 30px;
		line-height: 30px;
		font-family: var(--font-body);
		text-transform: uppercase;
		letter-spacing: .075em;
		color: black;
		font-weight: 700;
	}

	.imap .small .slides .description {
		font-size: 18px;
		padding-top: 5px;
		font-family: var(--font-body);
		line-height: 25px;
		color: black;
		text-align: left;
	}

	.imap .small .slides .link {
		font-size: 18px;
		line-height: 27px;
		color: #e2231a;
		padding-top: 15px;
		font-family: 'subway_bold';
		letter-spacing: .0em;
	}

	.imap .small .slides .slick-arrow {
		position: absolute;
		top: 0;
		cursor: pointer;
	}
	.imap .small .slides .slick-arrow.prev {
		right: 60px;
	}
	.imap .small .slides .slick-arrow.next {
		right: 10px;
	}
}

@media screen and (max-width: 640px) {
	.imap .stage .lg,
	.imap .stage .md {
		display: none;
	}

	.small .top {
		text-align: center;
	}

	.small .top img {
		max-width: 100%;
		margin: 0 auto;
	}

	.small .middle {
		background: black;
		border-bottom: 1px solid black;
		padding: 50px 0;
		text-align: center;
		margin-top: 50px;
	}

	.small .middle img {
		width: 90%;
		max-width: 300px;
		margin: 0 auto;
	}

	.small .bottom {
		padding-bottom: 35px;
	}
}