/* RESET –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	color: inherit;
	font-family: inherit;
}

/* SITE-WIDE –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
	font-size: 18pt;
	line-height: 1.66em;
	font-family: Verdana, Geneva, sans-serif;

	height: 100%;

	/*background-color: #4597cb;*/
	color: #535355;
}

body {
	position: relative;
	min-height: 100%;
}

h1 {
	font-size: 1em;
	font-family: Georgia, Palatino, serif;
	font-style: italic;
	line-height: 1.75em;
}

h1 b {
	display: inline-block;
	font-size: 3em;
	font-family: 'Teko', sans-serif;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: calc(1em / 72);
	line-height: 0.825em;

	transform: translateY(0.075em);
}

h2 {
	font-size: 1em;
	font-family: Georgia, Palatino, serif;
	font-style: italic;
}

h3 {

}

h4 {

}

/* HEADER ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;

	-ms-flex-direction: column;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;

	-ms-justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;

	background-color: #4597CB;
	background-image: url('../assets/city-background.svg');
	background-size: contain;
	background-size: cover;
	background-position: top;

}

.title-container {
	display: inline-block;
	text-align: center;
	background-color: #333;
	color: #fff;
	border: 0.25em solid #fff;
	padding: 1em;
	margin: 1em 1em 3em 1em;
}

/* FOOTER ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {

}

/* MAIN ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
main {
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;

	-ms-flex-direction: column;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;

	-ms-justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;

	background-color: #efefef;
}

.quiz-title-container {
	display: inline-block;
	text-align: center;
	background-color: #333;
	color: #ffffff;
	border: 0.25em solid #ffffff;
	padding: 0.5em 1em;
	transform: translateY(-50%);
}

.quiz-container {
	text-align: center;
	max-width: 800px;
	background-color: #ffffff;
}

.button {
	display: block;
	text-align: center;
	padding: 0.5em 1em;
	color: #ffffff;
	max-width: 50%;
	margin: 2em auto;
	background-color: #4597CB;
}

a.button {
	transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s;
}

a.button:hover, a.button:focus {
	transition: transform 0.25, box-shadow 0.25s, background-color 0.25s;
	transform: translateY(-0.125em);
	box-shadow: 0 0.25em 0.5em -0.25em #aaa;
	background-color: #4d9ed3;
}