.map, .map img {
	width: 100%;
	
}
.map {
	position:relative;
	margin-top: calc(3rem + 6px);
}

.location-info {
	position: absolute;
	background-color: #141414;
	width: 40%;
	top: 5rem;
	right: 1vh;
	padding-bottom: 2rem;
	display: none;
	z-index: 1;
	min-height: 60vh;
	padding: 3vh;
}
.location-info.left {
	left: 1vh;
}
.location-info img {
	width: 40vh;
	height: 22.5vh;
}
.location-name {
	text-align: center;
	font-size: 7vh;
	font-family: "Trade Winds";
	text-shadow: 0px 0px 1rem #DC62F4;
}
.location-desc {
	font-size: 1.4em;
	text-shadow: 0px 0px 1rem #DC62F4;
	text-align: left;
}

.location {
	cursor: pointer;
	width: 1.4vh;
	height: 1.4vh;
	position: absolute;
	background-color: white;
	border-radius: 50%;
	border: 2px solid #141414;
}
.location.active, .location:hover {
	background-color: #DC62F4;
}

.slide img {
	height: 160%;
	margin-top: -10rem;
	margin-right: -10rem;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.slide img, .dot {
	image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.char-title {
	width: 50%;
	font-size: 6em;
	top: 6rem;
	text-shadow: 0 0 0;
}
.char-desc {
	width: 100%;
	left: 0;
	font-size: 0.2em;
	text-align: left;
	font-family: Poppins, sans-serif;
	top: 14rem;
}
.char-title > div {
	position: relative;
	width: 28rem;
	text-align: center;
	margin: 0;
	margin-left: auto;
	font-family: "Trade Winds";
}
.char-title hr {
	margin: 1rem -20% 0 -20%;
}
.char-race {
	width: 100%;
	color: white;
	font-size: 0.3em;
	position: absolute;
	top: -3rem;
	right: 0%;
	text-align: center;
	text-shadow: 0px 0px 1rem #DC62F4;
}
.char-name {
	margin-left: -50%;
	margin-right: -50%;
	display: block;
	height: 9rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
	text-shadow: 0px 0px 1rem #DC62F4;
}

.slideshow-container {
	height: 60vh;
	background-color: #141414;
}
.dot {
	background-size: 160%;
	background-position: center;
}