@import url(https://fonts.timesdev.tools/fonts/TimesModern-Bold.css);
@import url(https://fonts.timesdev.tools/fonts/TimesModern-Regular.css);
@import url(https://fonts.timesdev.tools/fonts/GillSansW01-Medium.css);

html {
	font-size: 1.2em;
}

body {
	width: 100vw;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	background-color: rgba(255,255,255,0);
}

#graphic-container {
    width: 100%;
    height: 100%;
    background-color: rgb(245,245,245);
    margin: 0;
    //position: relative;
}

div.caption-container:nth-of-type(1) {
	display: inline-block;
}

div.caption-container:not(:nth-of-type(1)) {
	display: none;
}

div.caption-container h1 {
	max-width: 30em;
	font-family: 'TimesModern-Bold', sans-serif;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 125%;
	margin-bottom: 0.5em;
	margin-top: 0;
	color: rgb(210,40,20);
}

div.caption-container h2 {
	max-width: 30em;
	font-family: 'TimesModern-Regular', sans-serif;
	font-size: 1.5em;
	line-height: 125%;
	margin-bottom: 0.5em;
	margin-top: 0;
}

div.caption-container h3 {
	max-width: 30em;
	font-family: 'GillSansW01-Medium', sans-serif;
	font-weight: normal;
	font-size: 1em;
	line-height: 125%;
	margin-bottom: 0;
	margin-top: 0;

}

div.caption-container h4 {
	max-width: 30em;
	font-family: 'GillSansW01-Medium', sans-serif;
	font-weight: normal;
	font-size: 0.8em;
	line-height: 125%;
	margin-bottom: 0;
	margin-top: 0;

}

div.caption-container p {
	max-width: 30em;
	font-family: 'TimesModern-Regular', sans-serif;
	font-size: 1em;
	line-height: 125%;
	margin-top: 0;
}

div.caption-container div.buttons {
	font-family: 'GillSansW01-Medium', sans-serif;
	font-weight: normal;
	color: rgb(210,40,20);
	cursor: pointer;
	
}

div.caption-container div.buttons p {
	display: inline-block;
	margin-bottom: 0;
	font-family: 'GillSansW01-Medium', sans-serif;
	display: inline-block;
}

div.caption-container div.buttons p:hover {
	text-decoration: underline;
}

div.caption-container p:not(:last-child) {
	margin-bottom: 1em;
}

div.caption-container p:last-child {
	margin-bottom: 0;
}

div.arrow {
	height: 30px;
	width: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	margin-top: 10px;
}

div.arrow:not(:last-child) {
	margin-right: 20px;
}

div.arrow.next {
	background-image: url(arrowRight.svg);
}

div.arrow.back {
	background-image: url(arrowLeft.svg);
}

p.credit {
	font-family: 'GillSansW01-Medium', sans-serif;
	text-transform: uppercase;
	font-size: 0.5em;
	line-height: 125%;
	margin-top: 0.5em;
	margin-bottom: 0;
	float: right;
}

@media  (max-width: 500px) {
	
	body {
		height: calc(100vh - 2em);
	}

	#mapContainer {
		width: 100%;
		height: 100%;
	}
	
	#graphic-container {
		min-height: 25em;
		display: inline-block;
	}

	#buttons {	
		position: absolute;
		top: 10px;
		right: 20px;	
	}

	div.column {
		float: left;
		 width: calc(100% - 20px);
		height: calc(50% - 10px);
		position: relative;
		display: block;
		top: 10px;
	}

	div.column:nth-of-type(1) {
		margin: 10px 10px 0 10px;
	}

	div.column:nth-of-type(2) {
		margin: 0 10px 10px 10px;
		overflow-y: scroll;
	}
	
	div#slides {
		width: 75%;
	}
	
	div.caption-container {
		position: relative;
		top: 50px;
	}


}

@media  (min-width: 501px) {
	
	body {
		height: calc(100vh - 0em);
	}

	
	#mapContainer {
		width: 100%;
		height: calc(100% + 80px);
	}

	#buttons {	
		position: fixed;
		top: 10px;
		right: 20px;	
	}
	
	#graphic-container{
		max-height: 400px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: relative;
	}
	
	div.column {
		height: calc(100% - 20px);
		float: left;
	}

	div.column:nth-of-type(1) {
		 width: calc(50% - 20px);
		 margin: 10px;
		 position: relative;
		 top: -40px;
	}

	div.column:nth-of-type(2) {
		width: calc(40% - 20px);
		margin: 10px calc(5% + 10px) 10px calc(5% + 10px);
	}
	
	div#slides {
		height: 100%;
		width: 100%;
	}
	
	div.caption-container {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}





}