.hero {
	position: absolute;
	z-index: 100;
	height: 100px;
	transform-origin: 50% 50%;

}
#ant-man {
	bottom: 60%;
	right: 80%;
}
#black-panther {
	bottom: 70%;
	right: 90%;
}
#captain-america {
	bottom: 80%;
	right: 75%;
}
#ironman {
	bottom: 70%;
	right: 70%;
}
#deadpool {
	bottom: 50%;
	right: 70%;
}
#dr-strange {
	bottom: 80%;
	right: 85%;
}
#hulk {
	bottom: 55%;
	right: 90%;
	transform-origin: 50% 100%;
}
#thanos {
	position: absolute;
	bottom: 0%;
	left: -400px;
	height: 1%;
	transform-origin: 50% 100%;
	z-index: 25;
}
.skyline {
	position: absolute;
	bottom: 0;
	width: 100%;

	/* opacity: 0; */

	/* background-size: cover;
	background-size: 130%;
	background-position: bottom;
	background-repeat: no-repeat; */
}
.skyline#skyline-far {
	height: 38%;
    background-color: #666;
    /* border: 1px solid; */
    width: 101%;
    left: -1px;
	z-index: 0;
}
.skyline#skyline-far svg {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	transform: translateY(-73%);
	fill: #666;
}


.skyline#skyline-near {
	height: 22%;
    background-color: #333;
    /* border: 1px solid; */
    width: 101%;
    left: -1px;
	z-index: 50;
}
.skyline#skyline-near svg {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	transform: translateY(-65%);
	fill: #333;
}