body	{
	background-image: linear-gradient(to right, #ffffff,#ffffff,#333333);
	background-image: linear-gradient(to right, #333333,#ffffff,#ffffff);
	background-image: linear-gradient(to right, #808080,#ffffff);
	background-image: linear-gradient(to right, #91999d,#ebeded);
}


header	{
	padding-bottom: 20%;
	background-size: 20%;
	background-position: top left;
}	

#title	{
	width: 40%;
	position: static;
	float: left;
	margin-left: 12%;
	margin-top: 7%;
}	


h2	{
	display: block;
	max-width: 35%;
	height: 0;
	/*padding-bottom: 22%;*/
	font-size: 200%;
	top: 0;
	right: 0;
}

h2 span	{
	display: block;
	float: right;
	padding: .1em 0;
}

h2 #create	{
	margin-top: 9%;
	margin-right: 6.5em;
}	

h2 #use	{
	margin-right: 6em;
}	

h2 #investigate	{
	margin-right: 1.5em;
}

/*TOP NAVIGATION*/

#menu label	{
	display: none;
}

#menu nav	{
	display: block;
	width: calc(100% - 4rem);
	margin: 1rem auto 0;
	padding: 0;
}

nav	{
	margin-top: 1rem;
	margin-bottom: 1rem;
}	

#menu nav ul	{
	width: 100%;
	margin: 0;
	padding: 0;
}

#menu nav li	{
	padding: 0;
	display: inline-block;	
	text-align: left;
	margin: 0 1.4rem 0 0;
	font-size: 1.2rem;
}	

#menu nav li:last-child	{
	margin-right: 0;
}	
	
/*FOOTER NAVIGATION*/
#content ~ nav	{
	font-size: 1rem;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
	-moz-column-count: 1; /* Firefox */
	column-count: 1;
	
	-webkit-column-gap: 0; /* Chrome, Safari, Opera */
	-moz-column-gap: 0; /* Firefox */
	column-gap: 0;
}	

#content ~ nav > ul > li	{
	display: block;
	margin-right: 0;
	margin-bottom: .5rem;	
}

#content ~ nav a	{
	padding-top: 0;
}

#content ~ nav li ul 	{
	display: inline;
	margin-left: 1rem;
	padding-left: 0;
}	

#content ~ nav li ul li	{
	display: inline-block;
	position: relative;
	margin: 0 1rem 0 .5rem;
}	

#content ~ nav li ul li:before	{
	content: "|";
	color: #000000;
	position: absolute;
	top: 0;
	left: -1rem;
}

/*CONTENT*/	

#panel	{
	width: calc(93.6% - 3rem);
	font-size: 1.1rem;
	margin-top: 1rem;
}

#topics, figcaption	{
	font-size: 1rem;
}	

figure.portrait	{
	width: 40%;
	margin: 0 0 1.5rem 1.5rem;
}

figure.landscape	{
	width: 50%;
	margin: 0 0 1.5rem 1.5rem;
}

figure.wide	{
	margin: 0 0 1.5rem;
}	

/*PAGES*/

h3	{
	font-size: 200%;
	text-align: left;
}	

h4	{
	font-size: 130%;
}	

/*ARTIFACTS*/

.six {
	-webkit-column-count: 6; /* Chrome, Safari, Opera */
	-moz-column-count: 6; /* Firefox */
	column-count: 6;
}

.four {
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
	-moz-column-count: 4; /* Firefox */
	column-count: 4;

}	

.artifacts	{
	margin-top: 2rem;
}	

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

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

/*ZOOM*/

.object	{
	padding: 0 2rem;
}

.object .small	{
	float: left;
	width: 40%;
	margin-right: 2rem;
}	

.object .medium	{
	float: left;
	width: 60%;
	margin-right: 2rem;
}


.tombstone	{
	/*font-size: 110%;*/
	line-height: 1.3;
}	

/*COLOR QUIZ*/

.flip-container {
	width: 28%;
	padding-bottom: 28%;
	margin-right: 8%;
}

.flip-container:nth-child(odd)	{
	margin-right: 8%;
}

.flip-container:nth-child(3n)	{
	margin-right: 0;
}	

/*COLOR MAP*/

.map section	{
	margin-bottom: 4rem;
}

/*.raw	{
	max-width: 15rem;
}*/

.raw	{
	width: auto;
}	

/*.double .raw	{
	max-width: calc(32rem + 4px);
	width: calc(32rem + 4px);
}*/	

.raw figure	{
	width: 12rem;
	float: left;
}	

.double .raw figure:first-child	{
	margin-right: 2rem;
}

.fact	{
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 4rem;
	height: calc(100% - 12rem);
}

.narrow	{
	padding-left: 25%;
	padding-right: 25%;
}

.very_narrow	{
	padding-left: 30%;
	padding-right: 30%;
}
	
.close	{
	right: 5%;
}

.narrow .close	{
	right: calc(25% - 5rem);
}

.very_narrow .close	{
	right: calc(30% - 5rem);
}

/*.fact figcaption	{
	border-bottom: 1px solid #000000;
}*/	

/*FOOTER*/
footer	{
	clear: both;
}