@font-face {
	font-family: "AkkuratLL-Regular";
	src: url("./fonts/AkkuratLL-Regular.otf")
		format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "AkkuratLL-Light";
	src: url("./fonts/AkkuratLL-Light.otf")
		format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "AkkuratLL-Italic";
	src: url("./fonts/AkkuratLL-Italic.otf")
		format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "AkkuratLL-Bold";
	src: url("./fonts/AkkuratLL-Bold.otf")
		format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "AkkuratLL-LightItalic";
	src: url("./fonts/AkkuratLL-LightItalic.otf")
		format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Merriweather-LightItalic";
	src: url("./fonts/Merriweather-LightItalic.ttf")
		format("truetype");
	font-weight: normal;
	font-style: normal;
}

html,
body {
	overflow-x: hidden;
	font-family: AkkuratLL-Light;
}

a,
a:hover,
a:visited {
	color: #0071bc;
}

#map {
	top: 0;
	height: 100%;
	width: 100%;
	position: fixed;
}

/*Chapter titles*/
h3 {
	font-family: "AkkuratLL-Regular";
	font-size: 1.2rem;
	color: #ffffff;
	background: #000000;
	padding: 0.2rem;
	line-height: normal;
	text-align: left;
}

p {
	font-size: 1rem;
	line-height: 1.2rem;
	margin-top: 0.3rem;
	margin-bottom: 0.1rem;
	text-align: left;
}

#footer {
	width: 100%;
	min-height: 3%;
	padding-top: 0.4%;
	padding-bottom: 0.4%;
	text-align: center;
	font-size: 0.6rem;
	position: relative;
	z-index: 5;
}

#features {
	padding-top: 2%;
	padding-bottom: 2%;
}

.hidden {
	visibility: hidden;
}

.centered {
	width: 70vw;
	margin: 0 auto;
}

.lefty {
	width: 30vw;
	margin-left: 2vw;
}

.righty {
	width: 30vw;
	margin-left: 70vw;
}

.fully {
	width: 100%;
	margin: auto;
}

.light {
	color: #444;
	background-color: #ffffff;
}

.dark {
	color: #fafafa;
	background-color: #0a0a0a;
}

.step {
	padding-bottom: 95%;
	/* margin-bottom: 10vh; */
	opacity: 0.5;
}

.step.active {
	opacity: 0.99 !important;
}

.step div {
	padding: 2px 12px;
	line-height: 1.3rem;
	font-size: 1rem;
}

.step img {
	width: 80%;
	max-width: 20rem;
}

/* mobile settings */
@media (max-width: 600px) {
	.centered,
	.lefty,
	.righty,
	.fully {
		width: 90vw;
		margin: 0 auto;
	}
	.step {
		padding-bottom: 250%;
	}
}

.mapboxgl-popup-content {
	width: 400px !important;
	padding: 12px 18px;
	background: #1f1f1f;
	border-radius: 6px;
	color: #fafafa;
}

.mapboxgl-popup-close-button {
	font-size: 18px;
	color: #4997ab;
	top: 6px;
	right: 10px;
}

/* Fix issue on mobile browser where scroll breaks  */
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan
	.mapboxgl-canvas {
	touch-action: unset;
}