header	{
	width: 100%;
	padding-bottom: 30%;
	background-size: 35%;
	background-position: -1rem -1rem;
}	

#title	{
	width: 70%;
	position: absolute;
	top: 30%;
	left: 15%;
}	

h2 {
	display: none;
}	


/*TOP NAVIGATION*/
#menu_toggle	{
	display: none; /*hide checkbox*/
}

#menu_toggle ~ nav	{
	display: none;
}

#menu_toggle:checked ~ nav	{
	display: block;
}

#menu nav	{
	width: 84%;
	margin: 0 auto 0;
	text-align: center;
	font-size: 1.1rem;
}

nav ul	{
	margin: 0;
	padding: 0;
}

nav li	{
	display: block;
	margin: 0;
	padding-bottom: .5rem;
	padding-left: 0;
}	

/*HAMBURGER*/	

.hamburger {
	display: block;
	height: 12px;
	width: 1rem;
	position: absolute;
	top: 1rem;
	right: 1rem;
	cursor: pointer;
	z-index: 200;
}

.hamburger::before	{
	content: "";
	position: absolute;
	top: -.5rem;
	right: -.5rem;
	bottom: -.5rem;
	left: -.5rem;
}	

.stripe {
	position: absolute;
	display: block;
	width: 1rem;
	height: 2px;
	left: 0;
	background: #ffffff;
}

.stripe-1 {
	top: 0;
}

.stripe-2 {
	top: 5px;
}

.stripe-3 {
	top: 10px;
}

#menu_toggle:checked ~ label .stripe-2 {
	background: #81c0f6;
}

#menu_toggle:checked:checked ~ label .stripe-3 {
	background: #f28977;
}

#menu_toggle:checked:checked ~ label .stripe-1 {
	background: #b488ca;
}

/*FOOTER NAVIGATION*/
#content ~ nav	{
	margin: 1rem 0 0 1rem;
	padding: 0 1rem;
	font-size: .9rem;
}	

#content ~ nav ul ul	{
	margin: 0 1.5rem;
	padding-bottom: .5rem;
}	

#content ~ nav li	{
	padding-bottom: 0;
}

#content ~ nav a	{
	display: inline-block;
	padding-top: .3rem;
}

/*CONTENT*/
#content	{
	width: 100%;
	margin: 0;
}	

#panel	{
	margin: 0 auto;
	font-size: .9rem;
}	

h3	{
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 2rem;
}	

h4	{
	margin-top: 2rem;
	font-size: 1.2rem;
}	

/*ARTIFACTS*/

.artifacts	{
	margin-top: 2rem;
}

.four, .six {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
	
	-webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
	-moz-column-gap: 2rem; /* Firefox */
	column-gap: 2rem;
}

.four li	{
	margin-bottom: 2rem;
}	

.six li	{
	margin-bottom: 4rem;
}
	

/*ZOOM*/

.object	{
	padding: 0 1rem;
}	

.object figure	{
	width: 100%;
}	

.tombstone	{
	padding-left: 1rem;
	
}	

/*COLOR QUIZ*/

.flip-container {
	width: 100%;
	padding-bottom: 100%;
}

/*COLOR MAP*/

#circles	{
	width: 100%;
	margin: 2rem auto;
	text-align: center;
}	

#circles figure	{
	display: inline-block;
	width: 7%;
	margin: 0 1%;
	border: none;
}	

.raw {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.raw figure	{
	float: left;
	width: 40%;
	margin-left: 0;
}	

.raw figure:first-child	{
	margin-right: 10%;
}	

.map ul	{
	clear: left;
}	


.fact	{
	background: #000000;
	top: 0;
	left: 0;
	right: 0;
	/*bottom: 0;*/
	z-index: 200;
	padding: 3rem;
	height: calc(100% - 11rem);
}