html {
	/* -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; */
}


body, html {
	background-color: black;
	margin: 0; 
	height: 100%; 
	overflow: hidden;
	font-family: 'Rubik', sans-serif;
	line-height: 1.3;
}

body {
	overflow: hidden;
}

h1, h2, h3 {
    font-family: 'Rubik', sans-serif;
}

p {
	font-size: 2vh;
	line-height: 1.4;
}

a {
	color: rgba(0,0,0,0.8);
	text-decoration: solid underline rgba(0,0,0,0.25) 0.15rem;
}

a:hover {
	color: rgba(0,0,0,1);
	text-decoration: solid underline rgba(0,0,0,0.75) 0.15rem;
}
/* 
i {
	font-style: italic;
	font-family: 'EB Garamond', serif;
} */

a.external {
	/* padding: 1vh 1.5vh; */
	background-color: #4B701C;
	border-radius: 1vh;
	color: white;
	text-indent: -999px;
	overflow: hidden;
	width: 4vh;
	height: 4vh;
	background-image: url(images/quill.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	display: inline-flex;
	margin-left: 1vh;
}

a.external:hover {
	opacity: 0.5!important;
}

#app {
	display: flex;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

#map_wrap {
	transition: filter 0.5s ease-in;
	transition-delay: 0.25s;
	display: block;
	width: 100%;
	height: 100%;
	filter: brightness(0);
}

#mapbox_map {
	top: 0;
	left: 0;
	z-index: 10;
	position: absolute;
	width: 100%;
	height: 100%;
}

#map_wrap.visible {
	filter: brightness(1);
}

#map_element {
	width: 100%;
	height: 100%;
	background-image: url(images/Cordilla_Map_1.jpg);
	background-size: cover;
	background-position: center;
	transition: transform 1.5s linear;
}

#map_element.zoom {
	transform: scale(2);
}

#map_element.rotate {
	transform: scale(2) rotate(180deg);
}

#story_box {
	transition: transform 1s 0s ease-in-out, opacity 1s 1s ease-in-out;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60vh;
	height: 90vh;
	z-index: 500;
	display: block;
	transform: translateX(-50%) translateY(-50%) scale(0.75);
	box-sizing: border-box;
	opacity: 0;
	/* box-shadow: 0 0 5vw rgba(0,0,0,0.5); */
}

body.ready #story_box {
	opacity: 1;
}

#story_box::after {
	content:"";
	width: 100vw;
	height: 150vh;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateX(-75%) translateY(-50%);
	z-index: -1;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

#story_box_inner {
	/* border-left: 1rem solid rgb(202, 81, 81); */
	position: relative;
	height: 100%;
	width: 100%;
	overflow: visible;
	/* perspective: 1000px; */
	box-sizing: border-box;
}

#story_box_inner .story_book_page {
	transition: filter 0.5s linear, transform 0.5s linear;
	width: 0;
	left: 0;
	height: 100%;
	position: absolute;
	top: 0;
	perspective: 200vh;
	filter: brightness(1);
}

#story_box_inner .story_book_page .story_book_page_content::after {
	position: absolute;
	content: "";
	background-color: rgb(236, 224, 207);
	border-top: 1.4vh solid rgb(147, 46, 46);
	border-bottom: 1.4vh solid rgb(147, 46, 46);
	box-sizing: border-box;
	z-index: 550;
	border-radius: 0vh 1vh 0 0;
	width: 1vh;
	top: 0;
	bottom: 0;
	left: 0vh;
}


#story_box_inner .story_book_page:first-child .story_book_page_content::after {
	background-color: rgb(147, 46, 46);
	backface-visibility:hidden;
}

#story_box_inner #book_page_intro_1.story_book_page .story_book_page_content::after {
	background-color: rgb(147, 46, 46);
	backface-visibility:hidden;
}

#story_box_inner #book_page_intro_1.story_book_page .story_book_page_content::before {
	backface-visibility:hidden;
	position: absolute;
	content: "";
	background-color: rgb(236, 224, 207);
	border-top: 1.4vh solid rgb(147, 46, 46);
	border-bottom: 1.4vh solid rgb(147, 46, 46);
	box-sizing: border-box;
	z-index: 200;
	border-radius: 1vh 0 0 0;
	width: 1vh;
	top: 0;
	bottom: 0;
	left: 0vh;
	transform: rotateY(180deg);
}

/* #story_box_inner #book_cover.story_book_page::after {
	top: 0vh;
	height: calc(100% - 0vh);
} */
/* 
#story_box_inner .story_book_page.page_visible.flipped::after {
	display: none;
} */

#story_box_inner div.story_book_page .story_book_page_content {
	overflow: visible;
	height: 100%;
	/* transform-style: preserve-3d; */
	overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
	/* z-index: 10; */
	transition: transform 1s ease-in-out;
	transform-style: preserve-3d;

}

#story_box_inner div.story_book_page.flipped .story_book_page_content {
	transform: rotateY(-180deg);
	/* box-shadow: 0 0 5vw rgba(0,0,0,0.5); */
}

#story_box_inner div.story_book_page .story_book_page_content > * {
	flex-grow: 1;
}

.story_book_page_content_inner {
	/* border-left: 1rem solid rgb(202, 81, 81); */
	width: 60vh;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	display: flex;
	z-index: 150;
	backface-visibility: hidden;
}

#story_box_inner div.story_book_page_content .backside {
	content: "";
	width: calc(60vh - 1.5vh);
	height: calc(100% - 2.5vh);
	background: linear-gradient(to left, rgb(236, 224, 207) 0%, rgb(245, 234, 220) 7.5%, rgb(250, 242, 230) 75%);

	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	transform: rotateY(180deg);
	position: absolute;
	top: 1.25vh;
	left: 0;
	box-sizing: border-box;
	z-index: 150;
}

#story_box_inner div.story_book_page:last-child .story_book_page_content .backside {
	/* backface-visibility: visible; */
	background: rgb(140, 60, 56);
	/* border-right: 1rem solid rgb(147, 46, 46); */
	z-index: 50;
	border-radius: 0 1vh 1vh 0;
	top: 0vh;

	transform: none;

	width: 60vh;
	height: 100%;
	box-shadow: 2vh 1vh 4vh rgba(0,0,0,0.2);
}

#story_box_inner div.story_book_page:last-child {
	z-index: 100!important;
}

#story_box_inner div.story_book_page:first-child .story_book_page_content .backside {
	/* backface-visibility: visible; */
	background: rgb(140, 60, 56);
	/* border-right: 1rem solid rgb(147, 46, 46); */
	border-radius: 1vh 0 0 1vh;
	width: 60vh;
	height: 100%;
	top: 0vh;

}

#story_box_inner .story_book_page .story_book_page_content .cover {
	/* padding: 4vw; */
	background-color: rgb(174, 64, 58);
	overflow: visible;
	z-index: 90;
	border-radius: 0 1vh 1vh 0;
	border: 0vh solid rgb(147, 46, 46);
	border-left-width: 1.5vh;
}

#story_box button#book_enter {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* text-indent: -999px; */
	background: none;
	border: none;
	cursor: pointer;
	text-align: right;
	box-sizing: border-box;
	vertical-align: bottom;
	/* line-height: 200%; */
    align-items: baseline;
	display: block;
	z-index: 300;
}


#story_box button#book_enter span {
	position: absolute;
	bottom: 2vw;
	right: 2vw;
	display: none;
	font-size: 3vw;
	font-weight: bold;
	color: white;
}

#story_box button#book_enter:hover,
#story_box button#book_enter:focus {
	outline: 0.5rem solid yellow;
}

#story_box button#book_enter:hover span,
#story_box button#book_enter:focus span {
	display: block;
}

#story_box.open button#book_enter {
	display: none;
}

#story_box.open {
	/* transform: translateX(-50%) translateY(-50%) scale(1); */
	transform: translateX(-45vw) translateY(-50%) scale(1);

}
/* 
#story_box.side {
	transform: translateX(-45vw) translateY(-50%) scale(1);
} */

#story_box.hidden {
	transform: translateX(-200vw) translateY(-50%);
}

#story_box button#book_go_back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	/* text-indent: -999px; */
	background: none;
	border: none;
	cursor: pointer;
	text-align: right;
	box-sizing: border-box;
	vertical-align: bottom;
	/* line-height: 200%; */
    align-items: baseline;
	display: none;
	z-index: 500;
}

#story_box button#book_go_back span {
	position: absolute;
	bottom: 2vh;
	right: 3vh;
	font-size: 5vh;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.63);
}


/* #story_box.open button#book_go_back {
	display: block;
} */

#story_box button#book_go_back:hover,
#story_box button#book_go_back:focus {
	outline: 0.5rem solid yellow;
}

#story_box_inner .story_book_page .story_book_page_content .cover h2 {
	color: #ffcf93;
	font-size: 7vh;
	line-height: 9vh;
    /* font-family: 'Cormorant Garamond', serif; */
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	text-align: center;
	padding: 8vh;
	padding-top: 12vh;
	margin: 0;
	/* text-transform: uppercase; */
}

#story_box_inner .story_book_page .story_book_page_content .cover h2 strong {
	font-size: 8vh;
	font-weight: 600;
}

#story_box_inner .story_book_page .story_book_page_content .cover .year {
	font-family: 'Charm', cursive;
	text-align: center;
	color: black;
	font-size: 2vw;
}

#story_box_inner .story_book_page .story_book_page_content .page {
	position: absolute;
	top: 1.25vh;
	right: 1.5vh;
	bottom: 1.25vh;
	left: 0;
	/* margin: 0.5vh;
	margin-left: 0; */
	padding: 8vh;
	padding-right: 11vh;
	/* background-color: gradiant(rgb(250, 235, 215)); */
	background: linear-gradient(to right, rgb(240, 230, 216) 0%, rgb(247, 238, 226) 7.5%, rgb(248, 243, 232) 75%);
	overflow: visible;
	z-index: 90;
	display: flex;
	flex-direction: column;
	/* backface-visibility: hidden; */
}

#story_box_inner .story_book_page .story_book_page_content .page button.book_next {
	/* transition: opacity 0.5s linear; */
	position: absolute;
	right: 3.5vh;
	bottom: 3vh;
	border: none;
	background: none;
	font-size: 2.5vh;
	cursor: pointer;
	/* background-color: rgb(174, 64, 58); */
	background-color: rgb(181, 95, 53);
	width: 7vh;
	height: 7vh;
	box-sizing: border-box;
	border-radius: 50%;
	z-index: 250;
	text-indent: -100vh;
	overflow: hidden;
	opacity: 1;

	background-image: url(images/arrow_2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 55%;
}

#story_box_inner .story_book_page .story_book_page_content .page button.book_next:hover{
	opacity: 0.5;
	/* box-shadow: 0 0 3vh rgba(0,0,0,0.2); */

}

#story_box_inner .story_book_page .story_book_page_content .page button.book_goback {
	position: absolute;
	right: 11vh;
	bottom: 3vh;
	border: none;
	background: none;
	font-size: 2.5vh;
	cursor: pointer;
	background-color: rgba(111, 83, 54, 0.5);
	width: 7vh;
	height: 7vh;
	box-sizing: border-box;
	border-radius: 50%;
	z-index: 250;
	text-indent: -100vh;
	overflow: hidden;
	opacity: 0.75;
	transform: rotate(180deg) scale(0.9);

	background-image: url(images/arrow_2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;

}

#story_box_inner .story_book_page .story_book_page_content .page button.book_goback:hover{
	opacity: 0.5;
	/* box-shadow: 0 0 3vh rgba(0,0,0,0.2); */
}


/* 
#story_box_inner .story_book_page .story_book_page_content .page button:hover {
	background: black;
	color: white;
} */
/* 
#story_box_inner .story_book_page.flipped {
	transform: rotateY(-180deg);
} */

#story_box_inner .story_book_page .story_book_page_content .page h2 {
	font-size: 4vh;
	margin-top: 0.5vh;
	margin-bottom: 2vh;
	line-height: 1.15;
	font-weight: 700;
	color: rgba(23, 18, 13, 0.77);
	/* font-weight: bold;
    font-family: 'Cormorant Garamond', serif; */
	font-family: 'EB Garamond', serif;
	font-weight: 600;

	flex-grow: 0;

}

#story_box_inner .story_book_page .story_book_page_content .page .content {
	flex-grow: 1;
}

#story_box_inner .story_book_page .story_book_page_content .page .content p {
	margin-bottom: 2vh;
	margin-top: 0;
	font-size: 1.9vh;
	color: rgba(32, 29, 28, 0.77);
	line-height: 2.8vh;
}
/* 
#story_box_inner .story_book_page .story_book_page_content .page .content i {
	font-size: 2.0vh;
	color: rgba(51, 37, 28, 0.774);
} */

#story_box_inner .story_book_page .story_book_page_content .page .content small {
	font-size: 1.5vh;
	line-height: 1.75vh;
	color: rgba(51, 37, 28, 0.774);
}

#story_box_inner .story_book_page .story_book_page_content .page img.map {
	transition: transform 0.2s linear, filter 0.2s linear;
	width: 100%;
	height: auto;
	/* box-shadow: 0.25vh 0.25vh 1.5vh rgba(0,0,0,0.15); */
	/* transform: scale(1.3) rotate(-1.75deg) translateX(2vh); */
	margin: 5vh 0;
	transform: scale(1.15) rotate(-2.5deg) translateX(2vh);
	filter: brightness(0.92);
}

.row {
	display: flex;
	flex-direction: row;
	margin-bottom: 2vh;
}

.row .bio {
	padding-top: 2vh;
	padding-bottom: 2vh;
}

.row h3 {
	font-family: 'EB Garamond', serif;
	font-size: 3.25vh;
	font-weight: 500;
	margin: 1vh 0;
	color: white;
	display: block;
}

.row p {
	font-size: 1.9vh;
	margin: 0 0 1vh;
	color: white;
}

.portrait_wrap {
	width: 19vh;
	height: 27.5vh;
	border: 0.5vh solid #ffcf93;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 3vh;
	border-radius: 50%;
	/* box-shadow: 0vh 0vh 2.5vh rgba(0,0,0,0.2.5); */
}

.portrait {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	border: 0.5vh solid black;
	box-sizing: border-box;
}

p.caption {
	text-align: right;
	/* font-style: italic; */
}

.conversation {
	/* display: flex; */
	/* flex-direction: row; */
	/* padding: 2vh 6vh 4vh; */
	height: 20vh;
	width: 100%;
	position: relative;
	margin-top: 5vh;
	margin-bottom: 3vh;
}

.conversation .fitzroy_portrait {
	position: absolute;
	height: 20vh;
	width: 20vh;
	border: none;
	margin-right: 0vh;
	top: 0;
	right: 18vh;
}

.conversation .darwin_portrait {
	position: absolute;
	height: 20vh;
	width: 20vh;
	border: none;
	margin-right: 0vh;
	top: 0;
	right: 1vh;
}

.conversation .darwin_portrait .portrait {
	object-position: center 15%;
}

.conversation .fitzroy_portrait .portrait {
	object-position: center 15%;
}


.conversation .portrait {
	border: none;
}

.andes {
	max-width: 100%;
	height: auto;
	margin-left: 0vh;
	margin-top: 3.25vh;
	margin-bottom: 4.5vh;
}
/* 
.darwin {
	width: 15vh;
	height: 24vh;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 2vh;
}

.fitzroy {
	width: 18vh;
	height: 30vh;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	overflow: hidden;
} */

.beagle {
	width: 100%;
	height: 17vh;
	border-radius: 50%;
	object-fit: cover;
	object-position: left 60%;
	transform: scale(0.9);
}

.miner {
	width: 10vh;
	height: auto;
	margin-top: 1vh;
	margin-right: 3vh;
	display: block;
	/* border-radius: 50%;
	object-fit: cover;
	object-position: left 60%;
	transform: scale(0.9); */
	/* box-shadow: 0.1vh 0.1vh 0.5vh rgba(0, 0, 0, 0.5); */
	border-radius: 1.5vh;
}

.sutcliffe {
	width: 26vh;
	height: 18vh;
	border-radius: 50%;
	object-fit: cover;
	object-position: 35% 60%;
	/* transform: scale(0.9); */
	/* float: right; */
	display: block;
	margin: 3vh auto 5vh;
	filter: grayscale(0.2);
}

.explore_map {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	/* transform: scale(1.3) rotate(-1.75deg) translateX(2vh); */
}

#story_box_inner .story_book_page .story_book_page_content .page .explore_map:hover img.map{
	transform: scale(1.3) rotate(0deg) translateX(2vh);
	filter: brightness(1) contrast(1);
}

/* 
#story_box_inner div.story_book_page.flipped .story_book_page_content .page img.map {
	transform: scale(1.3) rotate(-1.75deg) translateX(2vh) translateY(50vh);
} */

#story_box_inner .story_book_page .story_book_page_content .page img.rock_sample {
	width: 90%;
	height: auto;
	/* box-shadow: 0.25vh 0.25vh 1.5vh rgba(0,0,0,0.15); */
	transform: scale(0.80) rotate(-120deg) translateX(4vh);
	margin: 5vh 0;
}

#story_box_inner .story_book_page .story_book_page_content blockquote {
	font-family: 'EB Garamond', serif;
	font-size: 2.4vh;
	line-height: 3vh;
	padding-left: 0;
	margin-left: 2vh;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1vh;
	color: rgba(32, 25, 20, 0.874);
}

#story_box_inner .story_book_page .story_book_page_content blockquote.large_first_letter::first-letter {
	font-size: 3.25vh;
	line-height: 3vh;
}

.story_box_inner {
	flex-grow: 1;
	overflow: visible;
}

.story_box_next {
	flex-grow: 0;
	padding: 0.5vh;
	padding-right: 1vh;
	background-color: rgb(202, 81, 81);
	color: white;
	font-weight: 700;
	border: none;
	cursor: pointer;
	font-size: 1.5vh;
	/* font-family: 'Charm', cursive; */
	text-align: right;
}


/* Drawn map overlay */

#map_overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: row;
	z-index: 500;
	transform: translateY(-100%);
	transition: transform 1.5s ease-out, opacity 2s ease-out;
	overflow: hidden;
	opacity: 1;
}

.drawn_map_visible #map_overlay {
	transform: translateY(0);
}

#map_drawing {
	user-select: none;
	width: auto;
	height: 44.25vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(1) translateX(-39.4%) translateY(-47.1%) rotate(7deg);
	z-index: 10;
	/* opacity: 0.75; */
}

#map_drawing_route {
	user-select: none;
	width: auto;
	height: 44.25vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(1) translateX(-39.4%) translateY(-47.1%) rotate(7deg);
	z-index: 20;
	opacity: 0.75;
	filter: brightness(0.85);
}

#map_overlay_pointers {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 77.5vw;
	height: 38.75vw;
	transform: translateX(-48%) translateY(-45%);
	z-index: 200;
}

#map_overlay_pointers .letter {
	position: absolute;
	right: -10vh;
	top: 17.5vh;
	transform: scale(1.5);
	opacity: 0.75;
}

#map_overlay_pointers .map_marker {
	display: block;
	position: absolute;
}

#map_overlay_pointers .map_marker .marker_wrap {
	opacity: 1;
}

button#control_reset {
	transition: opacity 1s linear;
	width: 5vh;
	height: 5vh;
	background-color: black;
	font-weight: bolder;
	position: fixed;
	top: 1vh;
	right: 1vh;
	z-index: 750;
	border: none;
	color: white;
	background-color: black;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	font-size: 3vh;
	line-height: 3vh;
	padding: 0;
	margin: 0;
	display: block;
}

body.started button#control_reset {
	opacity: 1;
}

button#credits {
	transition: opacity 0.5s linear;
	width: 5vh;
	height: 5vh;
	background-color: black;
	font-weight: bolder;
	position: fixed;
	top: 7vh;
	right: 1vh;
	z-index: 750;
	border: none;
	color: white;
	background-color: black;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	font-size: 3.25vh;
	color: white;
	font-weight: bolder;
	font-family: 'EB Garamond', serif;

	line-height: 3vh;
	padding: 0;
	margin: 0;
	display: none;
}

body.route_stage button#credits {
	display: block;
}

body.markers_visible button#credits {
	opacity: 1;
}

#map_call_to_action {
	transition: transform 0.78s 0.17s ease-in-out;
	position: absolute;
	right: 10vw;
	bottom: 5vh;
	max-width: 40vw;
	height: auto;
	width: auto;
	flex-direction: row;
	z-index: 800;
	display: flex;
	overflow: hidden;
	/* opacity: 0; */
	transform: translateY(50vh);
	background-color: black;
	border-radius: 2vh;
	padding: 2vh;
	align-items: center;
}

#map_call_to_action img {
	flex-grow: 0;
	flex-shrink: 0;
	width: 8vh;
	height: 8vh;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
	object-position: center;
	margin-right: 1.5vh;
}

#map_call_to_action p {
	flex-grow: 1;
	flex-shrink: 1;
	display: block;
	color: white;
	margin: 0;
}

.map_call_to_action_active #map_call_to_action {
	/* display: flex; */
}

.map_call_to_action_visible #map_call_to_action {
	/* opacity: 1; */
	transform: translateY(0vh);

}

#map_navigation_top {
	transition: opacity 0.5s 1.5s linear;
	position: absolute;
	left: 3vh;
	top: 3vh;
	height: auto;
	width: auto;
	flex-direction: row;
	z-index: 900;
	display: none;
	/* border-radius: 1.5vh; */
	overflow: hidden;
	opacity: 0;
}

#map_navigation {
	transition: opacity 0.5s 1.5s linear;
	position: absolute;
	left: 3vh;
	bottom: 5vh;
	height: auto;
	width: auto;
	flex-direction: row;
	z-index: 900;
	display: none;
	border-radius: 1.5vh;
	overflow: hidden;
	opacity: 0;
}

.route_stage #map_navigation,
.route_stage #map_navigation_top {
	display: flex;
	flex-direction: column;
}

.map_navigation_visible #map_navigation,
.map_navigation_visible #map_navigation_top {
	opacity: 1;
}

#map_navigation button {
	width: 17vh;
	height: 17vh;
	box-sizing: border-box;
	background-color: rgb(202, 81, 81);
	color: white;
	border: none;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	font-size: 1.9vh;
	padding: 1vh;
	box-sizing: border-box;
}

/* #map_navigation_top button {
	width: 6vh;
	height: 6vh;
	box-sizing: border-box;
	background-color: black;
	color: white;
	border: none;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	font-size: 3vh;
	padding: 1vh;
	box-sizing: border-box;
	border-radius: 50%;

} */

#map_navigation_top button {
	/* position: absolute;
	right: 11vh;
	bottom: 3vh; */
	border: none;
	background: none;
	font-size: 2vh;
	cursor: pointer;
	width: 7vh;
	line-height: 1;
	height: 7vh;
	box-sizing: border-box;
	border-radius: 50%;
	z-index: 10;
	text-indent: -100vh;
	overflow: hidden;
	opacity: 0.9;
	background-color: black;
	background-image: url(images/arrow_2.svg);
	background-size: contain;
	transform: rotate(180deg) scale(0.9);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 55%;
}

#map_navigation_top button:hover{
	opacity: 0.5;
	/* box-shadow: 0 0 3vh rgba(0,0,0,0.2); */
}

/* #map_navigation_top button::after {
	color: rgb(248, 243, 232);
	font-size: 5vh;
	position: absolute;
	right: 0%;
	top: 0%;
	height: 100%;
	width: 100%;
	line-height: 1;
	z-index: -1;
	text-indent: 0;
	text-align: center;
} */

button#control_map_atlas {
	background-color: black;
}

.drawn_map_visible button#control_map_drawing {
	background-color: rgb(202, 81, 81);
}

.drawn_map_visible button#control_map_atlas {
	background-color: black;
}

.markers_visible button#control_map_atlas {
	background-color: rgb(202, 81, 81);
}

.markers_visible button#control_map_drawing {
	background-color: black;
}

#map_navigation button span {
	text-align: center;
	display: block;
}

#map_navigation button img {
	width: 10vh;
	height: 10vh;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto 1vh;
}


/* Overlays */

#overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: row;
	z-index: 900;
}

#overlay.visible {
	display: block;
}

#overlay_inner {
	transition: transform 0.4s ease-out;
	display: flex;
	position: absolute;
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	z-index: 100;
	background-color: rgb(226, 207, 171);
	border-radius: 1vh;
	overflow: hidden;
	transform: translateY(-125vh);
}

#overlay.show #overlay_inner {
	transform: translateY(0);
}

#overlay #overlay_background {
	transition: opacity 0.5s linear;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: black;
	opacity: 0;
	/* background: black; */
}

#overlay.show #overlay_background {
	opacity: 0.87;
}

#overlay #overlay_close {
	position: absolute;
	right: 1vh;
	top: 1vh;
	width: 20vh;
	height: 5vh;
	font-size: 2.25vh;
	box-sizing: border-box;
	padding: 0;
	border: none;
	background-color: black;
	color: white;
	cursor: pointer;
	border-radius: 1vh;
}

#overlay #overlay_next {
	flex-grow: 0;
	padding: 0.5rem;
	padding-right: 1rem;
	background-color: brown;
	color: white;
	font-weight: 700;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
	/* font-family: 'Charm', cursive; */
	text-align: right;
}

#overlay #overlay_object {
	width: 57%;
	height: 100%;
	/* background-color: rgba(0,0,0,0.15); */
	/* border-right: 0.5vh dashed rgba(0,0,0,0.15);; */
	flex-shrink: 0;
	flex-grow: 0;
	position: relative;
}

#overlay #overlay_object iframe {
	width: 100%;
	height: 100%;
}

#overlay #overlay_object > div {
	position: absolute;
	top: 5vh;
	left: 5vh;
	right: 5vh;
	bottom: 5vh;
	border-radius: 2.5vh;
	overflow: hidden;
}

#overlay #overlay_object button.view_rock_hint {
	background-color: black;
	color: white;
	border: none;
	font-size: 2vh;
	border-radius: 4vh;
	position: absolute;
	bottom: 7vh;
	right: 7vh;
	padding: 1.5vh 2.5vh;
	/* cursor: pointer; */
	pointer-events: none;
}

body.viewing_rock #overlay #overlay_object button.view_rock_hint {
	display: none;
}


#overlay #overlay_detail {
	flex-grow: 1;
	overflow: visible;
	/* height: 100%; */
	/* margin-top: 10vh;
	margin-right: 10vh; */
	background-color: rgb(226, 207, 171);
	/* padding-left: 5vh; */
	padding-top: 7.5vh;
	padding-right: 0;
	box-sizing: border-box;
}

#overlay #overlay_detail_wrap {
	height: 100%;
	padding-right: 10vh;

}

#overlay #overlay_detail #overlay_title {
    font-family: 'Rubik', sans-serif;
	font-weight: 500;
	/* margin-top: 0.5rem;
	margin-bottom: 1rem; */
	margin: 0;
	font-size: 4vh;
	line-height: 5.5vh;
	margin-bottom: 3.5vh;
	text-decoration: underline;
	text-decoration-line: underline;
	text-decoration-thickness: 0.5vh;
	text-decoration-color: rgba(0,0,0,0.75);
	/* text-decoration-skip-ink: none; */
	text-underline-offset: 1vh;
}

#overlay #overlay_detail p {
	font-size: 2vh;
}

#overlay #overlay_detail small {
	font-size: 1.75vh;
	line-height: 1.9vh;
}

#overlay_id,
#overlay_material {
	/* text-decoration: underline;
	text-decoration-line: underline;
	text-decoration-thickness: 0.25vh;
	text-decoration-color: rgba(0,0,0,0.25);
	text-decoration-skip-ink: none;
	text-underline-offset: 0.5vh; */
	margin-top: 0;
	margin-bottom: 2.5vh;
}

#overlay_id strong,
#overlay_material strong,
#overlay_location strong {
	background-color: rgba(0,0,0,0.175);
	border-radius: 0.25vh;
	padding: 0.5vh 1vh;
	/* margin-left: 0.5vh; */
}

#overlay #overlay_detail #overlay_detail_inner {
	font-size: 2vh;
	/* padding-top: 1vh; */
	padding: 3vh 2vh;
	background-color: #f9e9e2;
	border-radius: 1vh;
}

#overlay #overlay_detail #overlay_detail_inner p:last-child {
	margin-bottom: 0;
}

#overlay_detail > p {
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

#overlay_detail > p span {
	margin-right: 2vh;
	/* width: 35%; */
	flex-shrink: 0;
}

#overlay_detail_inner blockquote,
#extra_overlay_detail_inner blockquote {
	font-family: 'EB Garamond', serif;
	font-size: 2.6vh;
	line-height: 3.25vh;
	padding-left: 0;
	/* margin-left: 2vh; */
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 2vh;
	color: rgba(32, 25, 20, 0.874);
}

#overlay_detail_inner blockquote.large_first_letter::first-letter,
#extra_overlay_detail_inner blockquote.large_first_letter::first-letter {
	font-size: 3.35vh;
	line-height: 3.25vh;
}

#extra_overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: row;
	z-index: 900;
}

#extra_overlay.visible {
	display: block;
}

#extra_overlay_inner {
	transition: transform 0.4s ease-out;
	display: block;
	position: absolute;
	width: 60%;
	height: 60%;
	top: 20%;
	left: 20%;
	z-index: 100;
	background-color: rgb(226, 207, 171);
	border-radius: 1vh;
	overflow: hidden;
	transform: translateY(-125vh);
	flex-grow: 1;
	overflow: visible;
	background-color: rgb(226, 207, 171);
	padding: 7.5vh;
	box-sizing: border-box;

}


#extra_overlay_inner #extra_overlay_title {
    font-family: 'Rubik', sans-serif;
	font-weight: 500;
	/* margin-top: 0.5rem;
	margin-bottom: 1rem; */
	margin: 0;
	font-size: 4vh;
	line-height: 5.5vh;
	margin-bottom: 3.5vh;
	text-decoration: underline;
	text-decoration-line: underline;
	text-decoration-thickness: 0.5vh;
	text-decoration-color: rgba(0,0,0,0.75);
	text-underline-offset: 1vh;
}

#extra_overlay.show #extra_overlay_inner {
	transform: translateY(0);
}

#extra_overlay #extra_overlay_background {
	transition: opacity 0.5s linear;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: black;
	opacity: 0;
}

#extra_overlay.show #extra_overlay_background {
	opacity: 0.87;
}

#extra_overlay #extra_overlay_close {
	position: absolute;
	right: 1vh;
	top: 1vh;
	width: 20vh;
	height: 5vh;
	font-size: 2.25vh;
	box-sizing: border-box;
	padding: 0;
	border: none;
	background-color: black;
	color: white;
	cursor: pointer;
	border-radius: 1vh;
}




#knowledgebase_overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: row;
	z-index: 900;
}

#knowledgebase_overlay.visible {
	display: block;
}

#knowledgebase_overlay .bio h3 {
	font-size: 3.5vh;
	/* line-height: 2.8vh; */
}

#knowledgebase_overlay .bio p {
	font-size: 2.1vh;
	line-height: 2.8vh;
}

#knowledgebase_overlay_inner {
	transition: transform 0.4s ease-out;
	display: block;
	position: absolute;
	width: 60%;
	height: 80%;
	top: 10%;
	left: 20%;
	z-index: 100;
	border-radius: 1vh;
	overflow: hidden;
	transform: translateY(-125vh);
	flex-grow: 1;
	overflow: visible;
	background-color: rgb(82, 113, 65);
	padding: 7.5vh 7.5vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

}

#knowledgebase_overlay_header {
	flex-grow: 0;
}

#knowledgebase_overlay_detail_inner {
	flex-grow: 1;
	overflow-y: scroll;
}


#knowledgebase_overlay_inner .tabs {
	display: flex;
	flex-direction: row;
	margin-bottom: 3.5vh;
}

#knowledgebase_overlay_inner .tabs button {
    font-family: 'Rubik', sans-serif;
	font-weight: 500;
	/* margin-top: 0.5rem;
	margin-bottom: 1rem; */
	color: wheat;
	margin: 0;
	font-size: 4vh;
	line-height: 5.5vh;
	border: none;
	background: none;
	cursor: pointer;
	flex-grow: 1;
}


#knowledgebase_overlay_inner .tabs button.active {
	text-decoration: underline;
	text-decoration-line: underline;
	text-decoration-thickness: 0.5vh;
	text-decoration-color: rgba(0,0,0,0.75);
	text-underline-offset: 1vh;
}

#knowledgebase_overlay_inner #knowledgebase_overlay_detail_inner {
	padding: 5vh;
	background-color: rgba(255,255,255,0.1);
	/* border-top: 0.5vh solid wheat;
	border-bottom: 0.5vh solid wheat; */
	/* box-shadow: 0vh 1vh 0.5vh rgba(0,0,0,0.9); */
}

#knowledgebase_overlay_inner .tab {
	display: none;
}

#knowledgebase_overlay_inner .tab.active {
	display: block;
}

#knowledgebase_overlay.show #knowledgebase_overlay_inner {
	transform: translateY(0);
}

#knowledgebase_overlay #knowledgebase_overlay_background {
	transition: opacity 0.5s linear;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: black;
	opacity: 0;
}

#knowledgebase_overlay.show #knowledgebase_overlay_background {
	opacity: 0.87;
}

#knowledgebase_overlay #knowledgebase_overlay_close {
	position: absolute;
	right: 1vh;
	top: 1vh;
	width: 20vh;
	height: 5vh;
	font-size: 2.25vh;
	box-sizing: border-box;
	padding: 0;
	border: none;
	background-color: black;
	color: white;
	cursor: pointer;
	border-radius: 1vh;
}





/* MAP */

.map_marker{
	overflow: visible;
	display: none;
	width: 0;
	height: 0;
}

.map_marker .marker_wrap{
	transition: opacity 0.75s linear;
	width: 0;
	height: 0;
	opacity: 0;
}

.map_marker .marker_inner {
	position: absolute;
	left: 0.3vh;
	top: 0.3vh;
	z-index: 100;
	width: 5.4vh;
	height: 5.4vh;
	overflow: hidden;
	border-radius: 50%;
	/* background-color: #a48960; */
	/* background-color: #85b9d2; */
	background-color: black;
	background-size: 400% 400%;
	cursor: pointer;
	transform: translateY(-6vh) translateX(-3vh);
	box-sizing: border-box;
	color: white;
}

.map_marker .marker_border {
	position: absolute;
	left: 0;
	top: 0;
	background-color: black;
	/* border: 0.3vh solid black; */
	border-radius: 50%;
	z-index: 20;
	box-sizing: border-box;
	transform: translateY(-6vh) translateX(-3vh);
	width: 6vh;
	height: 6vh;

	box-shadow: 0 0 2vh rgba(0,0,0,0.4);
}

/* @keyframes shine {
	0% {
		background-position: 75% 50%;
	}
	35% {
		background-position: 75% 50%;
	}
	44% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 75% 50%;
	}
	100% {
		background-position: 75% 50%;
	}
} */

.marker_wire {
	height: 1.2vh;
	overflow: hidden;
}

.marker_wire_center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 50;
}

.marker_wire_inner {
	position: absolute;
	/* background-color: #8a6c4d; */
	/* background-color: #3c352c; */
	/* background-color: #e6c17c; */
	background-color: black;
	/* background: linear-gradient(to left, #85b9d2 0%, #85b9d2 50%, #e6c17c 100%); */
	/* #85b9d2 */
	/* height: calc(100% - 0.8vh);
	width: calc(200% - 0.8vh); */
	/* bottom: 0.4vh;
	left: 0.4vh; */
	height: 100%;
	width: 200%;

	border: 0.15vh solid black;
	border-radius: 100% 0 0 100%;
	box-sizing: border-box;

	box-shadow: 0 0 1.5vh rgba(0,0,0,0.3);
}
/* 
.marker_wire_border {
	height: 1.2vh;
	overflow: hidden;
}

.marker_wire_border_center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 10;
}

.marker_wire_border_inner {
	background-color: black;
	height: 100%;
	width: 200%;
	border-radius: 100% 0 0 100%;
	box-sizing: border-box;
} */

button.marker_icon {
	border: none;
	background: none;
	border-radius: 0;
	width: 100%;
	height: 100%;
	font-size: 3.25vh;
	color: white;
	cursor: pointer;
	padding: 0;
	margin: 0;
	font-weight: bolder;
	font-family: 'EB Garamond', serif;

}

.map_marker .marker_image {
	position: absolute;
	width: 90%;
	height: 90%;
	margin: 5%;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	/* transition: filter 0.5s linear; */
	border: 0vh solid black;
	box-sizing: border-box;
}

.marker_inner:hover .marker_image {
	/* filter: grayscale(0) contrast(1) brightness(1); */
}

/* .map_marker:hover .marker_inner {
	background: rgb(225, 140, 50);
} */
/* 
.map_marker:hover .marker_inner button.marker_icon {
	color: black;
	
} */

/* .map_marker:hover .marker_wire_inner {
	background: rgb(225, 140, 50);
} */

.markers_visible .map_marker .marker_wrap {
	opacity: 1;
}

.route_1_markers_visible .map_marker.route_1_marker .marker_wrap {
	opacity: 1;
}

.markers_active .map_marker {
	display: block;
}

.route_1_markers_active .map_marker.route_1_marker {
	display: block;
}

#mapbox_map #darwin_land_route {
	display: none;
}

.town_marker {
	display: none;
}

.town_marker .marker_inner {
	width: 0.5rem;
	height: 0.5rem;
	background-color: black;
	border-radius: 50%;
}

.town_marker p {
	position: absolute;
	bottom: 80%;
	left: 100%;
	color: white;
	font-family: 'Rubik', sans-serif;
	/* font-family: 'EB Garamond', serif; */
	font-size: 2.75vh;
	line-height: 1;
	text-shadow: 0 0 1.5vh rgba(0,0,0,0.75);
	padding-left: 0.5vh;
	margin: 0;
	text-indent: 0;
}

.town_marker.campana_mountain p {
	top: 80%;
	bottom: auto;
}

.valparaiso_marker_visible .valparaiso_marker {
	display: block;
}

.santiago_marker_visible .santiago_marker {
	display: block;
}

.nancagua_marker_visible .nancagua_marker,
.rancagua_marker_visible .rancagua_marker {
	display: block;
}

.goldmine_marker_visible .goldmine_marker {
	display: block;
}

.goldmine_marker_visible .campana_mountain {
	display: block;
}

.mountain_top_marker_visible .mountain_top_marker {
	display: block;
}

.england_marker {
	display: block;
}

@media screen and (orientation:landscape) {
	
}

@media screen and (max-height: 500px) {

	#story_box {
		width: 65vh;
		height: 100%;
	}

	#story_box_inner div.story_book_page:last-child .story_book_page_content .backside {
		height: 100%;
		width: 65vh;
	}
	
	
	#story_box .story_book_page_content_inner {
		width: 65vh;
	}

	#story_box.open {
		transform: translateX(-50vw) translateY(-50%) scale(1.025);
	}

	#story_box_inner .story_book_page .story_book_page_content .page button.book_goback,
	#story_box_inner .story_book_page .story_book_page_content .page button.book_next {
		bottom: 5vh;
	}

	#story_box.hidden {
		transform: translateX(-200vw) translateY(-50%) scale(1.025);
	}

	#story_box_inner .story_book_page .story_book_page_content .page p {
		margin-bottom: 2vh;
		font-size: 2.25vh;
		line-height: 3vh;
	}
	
	#story_box_inner .story_book_page .story_book_page_content .page i {
		font-size: 2.25vh;
	}
	
	#story_box_inner .story_book_page .story_book_page_content .page small {
		font-size: 2vh;
		line-height: 2.5vh;
	}

	#story_box_inner .story_book_page .story_book_page_content blockquote {
		font-family: 'EB Garamond', serif;
		font-size: 2.9vh;
		line-height: 3.25vh;
		margin-left: 2vh;
		margin-bottom: 1vh;
	}

	#overlay_inner {
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
	}

	.map_marker .marker_wrap {
		transform: scale(1.2);
	}

	.town_marker p {
		font-size: 3vh;
	}	

	#overlay #overlay_detail p,
	#extra_overlay #extra_overlay_detail p {
		font-size: 3vh;
	}

	#overlay #overlay_detail small,
	#extra_overlay #extra_overlay_detail small {
		font-size: 2.5vh;
	}

	#overlay_detail_inner blockquote,
	#extra_overlay_detail_inner blockquote {
		font-family: 'EB Garamond', serif;
		font-size: 3.5vh;
		line-height: 4.5vh;
	}

	#overlay #overlay_detail_wrap {
		overflow-y: scroll;
	}

}

#landscape_notice {
	display: none;
}

@media screen and (orientation:portrait) {

	#landscape_notice_box {
		width: 80vw;
		height: 45vw;
		border-radius: 5vw;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		box-sizing: border-box;
		border: 1vw solid white;
	}

	#landscape_notice {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: rgb(0, 0, 0);
		color:whitesmoke;
		text-align: center;
		box-sizing: border-box;
		font-size: 1.5rem;
		font-weight: bold;
	}

	#landscape_notice #landscape_notice_inner {
		position: absolute;
		top: 50%;
		left: 5vw;
		right: 5vw;
		transform: translateY(-50%);
		margin: 0;
	}

	#landscape_notice h3 {
		text-decoration: underline;
		text-decoration-thickness: 1vw;
		text-decoration-skip-ink: none;
		text-decoration-color: white;
		margin-top: 2vw;
		margin-bottom: 3vw;
		font-size: 5vw;
	}

	#landscape_notice p {
		margin: 0;
		font-size: 3vw;
	}
}


body.debug_pan_area #story_box {
	opacity: 0.4!important;
}

body.debug_pan_area #map_overlay {
	opacity: 0.4!important;
}