/* CSS Document */

body, h1, h2, h3, p {
	margin:0;
}

h1, h3 {
	font-family: source-code-pro, monospace;
	font-weight: 400;
	font-style: normal;
}

h2 {
	font-family: futura-pt, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-bottom:15px;
}

h3 {
	text-transform:uppercase;
	font-size:0.6em;
	letter-spacing:1px;
}

p, a, .end p {
	font-family: turnip, serif;
	font-style:normal;
	font-weight: 200;
}

a, .end p {
	font-style:italic;
}

a {
	margin:20px 0;
	font-style: italic;
	text-decoration:none;
}

p.location {
	font-size:1.4em;
	font-style:italic;
}

p.coords {
	font-family: source-code-pro, monospace;
	font-weight:400;
	font-size:0.6em;
}

.light {
	color:#CCCCCC;
}

.dark {
	color:#ffffff;
	background-color:#231E1E;
}

.section {
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:40px 0;
}

.section.tray {
	width:100vw;
	position:fixed;
	bottom:0;
	transition:transform 0.25s ease;
	transform:translateY(0);
}

.section.tray.closed {
	transform:translateY(100%) translateY(-55px);
}

.section.no-pad {
	padding:0;
}

.section>.tab p {
	display:inline-block;
	padding:20px 40px;
	margin:0 0 0 19vw;
	border-radius:8px 8px 0 0;
}

.row.pad {
	padding:40px 19vw;
}

.row {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.row.with-gutters>.column {
	padding:0 0.5vw;
}

.row.with-gutters>.column:first-child {
	padding-right:0.5vw;
	padding-left:0;
}

.row.with-gutters>.column:last-child {
	padding-right:0;
	padding-left:0.5vw;
}

.row.equal-width-columns .column {
	flex:1;
}

.row.centered {
	justify-content:center;
}

.column {
	width:19vw;
	/*flex:1;*/
}

.grid {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}

.grid.full-width, .column.full-width {
	width:62vw;
}

.grid.fill-down {
	flex-direction:column;
	justify-content:flex-start;
}

.image-container {
	width:20vw;
	margin-bottom:0.5vw;
}

.image-container img {
	height:20vw;
}

.image-container .data-container {
	display:flex;
	justify-content:space-between;
	align-content:center;
}

.image-container .data-container p {
	color:#CCCCCC;
}

.column.centered {
	text-align:center;
}

.data-label-container {
	display:flex;
	align-content:center;
	margin-bottom:10px;
}

.data-label-container p {
	margin-left:10px;
	display:inline-block;
}

.data-dot {
	min-width:15px;
	min-height:15px;
	max-width:20px;
	max-height:20px;
	width:2vw;
	height:2vw;
	margin-right:2px;
	border-radius:50%;
	display:inline-block;
	background-color:#CCCCCC;
}

.location-data-container {
	margin-bottom:20px
}

.vert-line {
	display:inline-block;
	height:100px;
	margin:10px 0;
	border-left:1px solid #cccccc;
}

.hor-line {
	display:inline-block;
	width:19vw;
	margin:0 10px 1ex 0;
	border-top:1px solid #cccccc;
}

.story {
	margin:0 0 80px 0;
}

.end {
	margin-bottom:80px;
}

.end p {
	display:inline-block;
	color:#cccccc;
	font-size:10
}

.hidden {
	display:none;
}

@media screen and (min-width: 800px) {
	
	.sticky {
		position:sticky;
		top:40px;
	}
	
	.nav-elem#view-all {
		position:sticky;
		top:calc(100vh - 120px);
	}
	
	.nav-elem a {
		display:block;
	}
	
}

.expandable {
	display:none;
}

@media screen and (max-width: 800px) {
	
	.collapsible {
		display:none;
	}
	
	.expandable {
		display:inherit;
	}
	
	.section>.tab p {
		display:inline-block;
		padding:20px 30px;
		margin:0 0 0 3vw;
		border-radius:8px 8px 0 0;
	}
	
	.grid.full-width, .column.full-width, .image-container.full-width {
		width:94vw;
		margin:0 auto;
	}
	
	.image-container.full-width {
		margin-bottom:20px;
	}
	
	.nav-elem {
		margin:20px 0;
	}
	
	.nav-elem a {
		margin:10px 20px;
	}
	
	.image-container .data-container {
		justify-content:center;
	}
	
	.image-container .data-container p {
		display:none;
	}
	
	.image-container {
		width:30vw;
	}
	
	.image-container img {
		height:30vw;
	}
	
	.image-container.full-width img {
		height:94vw;
	}
	
	.row {
		flex-direction:column;
	}
	
	.column {
		width:auto;
	}
	
	.story {
		margin:0 0 40px 0;
	}
	
	.row.with-gutters>.column {
		padding:10px 0;
	}

	.row.with-gutters>.column:first-child {
		padding:0 0 10px;
	}

	.row.with-gutters>.column:last-child {
		padding:10px 0 0;
	}
}