/*HOME PAGE*/
#content.home	{
	padding: 2rem;
}
	
#circles li	{
	margin: 1rem 2rem 3rem;
}
	
#circles li img	{
	width: 30vw;
}

/*CONTENT*/

.page	{
	width: calc(100% - 6rem); 
}	

.page.intro section	{
	clear: both;
}	

h2, h3	{
	text-align: left;
}	

.squares li	{
	flex: 0 0 20%;
	margin: 0 2rem 4rem;
}	
figure.round	{
	width: 60%;
	float: right;
	margin: 0 0 2rem 2rem;
}	

.narrative ul, .info ul, .sitemap ul	{
	padding-left: 2rem;
}

figure.small	{
	width: 50%;
	margin: 0 2rem 2rem 0;
	float: left;
}

figure.medium	{
	width: 50%;
	margin: 0 0 2rem 2rem;
	float: right;
}

.lightbox	{
	width: 60vh;
	width: min(60vh, calc(50% - 2rem));
	float: right;
	margin: 0 0 0 2rem;
}	

.lightbox.portrait	{
	width: 40vh;
	width: min(50vh, calc(50% - 2rem));
}	

.lightbox.landscape	{
	width: 90vh;
	width: min(90vh, calc(60% - 2rem));
}

/*BUTTONS*/

.narrative .button, 
.viewer .button	{
	margin: 2rem;
}

.narrative .button.uplevel	{
	margin-left: 0;
}

.narrative .button a, 
.viewer .button a,
.glossary .button a	{
	font-size: 110%;
}


.narrative .button span.long	{
	display: inline;
}

/*GLOSSARY*/

.glossary dl	{
	column-width: 15em;
	column-gap: 2rem;
}

.glossary dl div	{
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}

.glossary .diagram.tall	{
	float: right;
	margin: .5rem 0 2rem 2rem;
}

.glossary .button.top	{
	position: fixed;
	bottom: calc(10vh + 2rem);
	right: calc(50% - 42rem);
	right: -3rem;
	transform: rotate(-90deg);
}

/*SITEMAP*/

#sitemap	{
	column-width: 20em;
	column-gap: 2rem;
}

#sitemap > li	{
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}

/*TIMELINE NEW TL6*/

.tl6	{
	font-size: min(.95rem, 3vw);
}	

.tl6 .history	{
	margin: 1rem 1rem 1rem 0;	
}

.tl6 .story .what	{
	width: calc(100% - 2rem - 2px);
	margin: 0 0 0 1rem;
}	

/*CONFERENCE*/

.conference section	{
	padding: 1rem;
}

#content.conference details	{
	margin-left: 2rem;
	margin-right: 2rem;
}
	
.conference details summary + p	{
	margin-left: 2rem;
	margin-right: 2rem;
}	

figure.small.right	{
	
	margin: 0 0 2rem 2rem;
	float: right;
}

figure.medium.right	{
	margin: 0 0 2rem 2rem;
	float: right;
}

.conference .video	{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}	

.conference .video div	{
	flex: 0 0 auto;
	width: 40%;
}