body	{
	margin: 0;
	padding: 0;
	background: #000;
	background-image: url("../img/background2.png");
	background-size: 125vh;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	font-family: 'Gentium Basic', serif;
	color: #cac2b1;
}

.clearfix	{
	clear: both;
}	

.wide li	{
	padding-bottom: .5rem;
}

cite, em	{
	font-style: italic;
}

h1, footer	{
	text-align: center;
}
	
h1 {
	margin: 0 auto;
	padding: 0 1rem .5rem 1rem;
	margin-top: 4vh;
	color: #fff;
	font-size: 2.2rem;
	font-size: min(2.4rem, 5vw);
}	

/*MAIN NAVIGATION*/
#toggle {
	display: block;
	margin: 0;
	padding: .5em 1em;
	font-size: 1rem;
	font-weight: bold;
	position: relative;
	border-bottom: 1px solid #000;
}

#toggle:after	{
	content: "";
	position: absolute;
	width: 1em;
	height: 3px;
	top: .6em;
	right: 1em;
	border-top: 3px solid #000;
	border-bottom: 9px double #000;
}	

#main_menu	{
	margin: 4vh auto 0;
	background: #cac2b1;
}



#main_menu > ul	{
	list-style: none;
	max-width: 84rem;
	margin: 0 auto;
	padding: 0;
	display: none;
}

#main_menu > ul li	{
	margin: 0;
	padding: .5em 1em;
	font-size: 1rem;
	font-weight: bold;
	position: relative;
	border-bottom: 1px solid #000;
}

#main_menu > ul li.current	{
	background: #e5e1d8;
}	

#main_menu > ul li.current:hover, 
#main_menu > ul li.current:active, 
#main_menu > ul li.current:focus {
	background: #cac2b1;
}	

#main_menu > ul li.current:focus-within	{
	background: #cac2b1;
}	

#main_menu ul li ul	{
	list-style: none;
	margin: -.5em 2em 0;
	padding: 0;
	border-top: 1px solid #333;
	margin-top: 1em;
	text-align: left;
	background: #cac2b1;
	display: none;
}

#main_menu ul li:hover > ul, 
#main_menu ul li ul:hover, 
#main_menu ul li ul:focus 	{
	display: block;
}

#main_menu ul li:focus-within > ul {
	display: block;
}		

#main_menu ul li ul	li {
	background: #cac2b1;
	text-align: left;
	font-weight: normal;
}

#main_menu ul li ul li.current, 
#main_menu ul li ul li:hover, 
#main_menu ul li ul li:active, 
#main_menu ul li ul li:focus	{
	font-weight: bold;
}	

#main_menu ul li ul	li:last-child {
	margin-bottom: -.5em;
	border-bottom: none;
}	

#main_menu a	{
	text-decoration: none;
	color: #000;
	display: block;
}	

#main_menu a:hover	{
	opacity: .7;
}

#main_menu a.haspopup	{
	cursor: pointer;
	position: relative;
	display: inline-block;
}	

#main_menu a.haspopup:after	{
	content: '»';
	position: absolute;
	top: 0;
	right: -.8em;
}

#main_menu ul li:hover a.haspopup:after 	{
	display: none;
}

#main_menu ul li:focus-within a.haspopup:after{
	display: none;
}	

/*********************************/
/*HOME PAGE*/

#content.home	{
	color: #cac2b1;
	width: 90%;
	margin: 2rem auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.4;
	min-height: 70vh;
}

#circles	{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0;
	
}	

#circles li	{
	margin: 1rem 1rem 3rem;
	padding: 0;
	flex: 1 0 auto;
}

#circles li img	{
	display: block;
	margin: 0 auto;
	width: 40vw;
}	

#circles li span	{
	display: block;
	width: 9em;
	background: #cac2b1;
	margin: 2rem auto 0;
	text-align: center;
	padding: .3rem;
	font-weight: bold;
	font-size: 100%;
	border-radius: 4px;
	opacity: .8;
}	

#circles li a {
	color: #000;
	text-decoration: none;
	
}	

#circles li:hover span,
#circles li:active span,
#circles li:focus span 	{
	opacity: 1;
}	

#circles li img	{
	border-radius: 50%;
	box-shadow: 0 0 2rem #e5e1d8,
				0 0 5rem #cac2b1;
}	

#circles li:hover img,
#circles li:active img,
#circles li:focus img 	{
	box-shadow: 0 0 3rem #e5e1d8,
				0 0 6rem #cac2b1;
}	
/*******************************/

/*LOCAL NAVIGATION*/

.page.inverse	{
	background: none;
}	

.inverse h2	{
	color: #f2f0ec;
	text-align: center;
	margin-bottom: 3rem;
}	

.squares ul	{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	list-style: none;
	margin: 0;
	padding: 0;
}	

.squares li	{
	flex: 1 0 40%;
	background: #333;
	padding: .5rem;
	border-radius: 4px;
	margin: 0 1rem 2rem;
}	

.inverse .squares li	{
	background: #f2f0ec;
}	

.squares li span	{
	display: block;
	margin-top: 1rem;
	text-align: center;
}	

.squares li a {
	color: #e5e1d8;
	text-decoration: none;
}	

.inverse .squares li a {
	color: #555;
	text-decoration: none;
}	

.squares li:hover img, 
.squares li:active img,
.squares li:focus img	{
	opacity: 1;
}	

.squares li:hover a, 
.squares li:active a,
.squares li:focus a	{
	color: #fff;
}	


.inverse .squares li:hover, 
.inverse .squares li:active,
.inverse .squares li:focus	{
	outline: 2px solid #f2f0ec;
}	

.inverse .squares li:hover a, 
.inverse .squares li:active a,
.inverse .squares li:focus a	{
	color: #333;
}	
	
#content2	{
	margin-top: 4rem;
}
	
/*CONTENT*/

.page	{
	width: calc(100% - 4rem); 
	min-height: 70vh;
	margin: 2rem auto;
	padding: 1rem 2rem 2rem;
	padding: 1rem min(2rem, 3vw) 2rem;
	border-radius: 4px;
	background: #f2f0ec;
	color: #000;
	font-family: 'Merriweather', 'Radley', serif;
	font-size: .95rem;
	font-size: min(.95rem, 3vw);
	line-height: 1.5;
	position: relative;
}	

#content.page .arabic	{
	font-family: 'Noto Sans Arabic', sans-serif;
	font-size: 120%;
}	

#content.page .greek	{
	font-size: 120%;
}	

#content img.symbol	{
	display: inline;
	height: 1.5em;
	width: 2.25em;
	vertical-align: top;
	
}	



h2, h3	{
	text-align: center;
}

h2	{
	font-size: min(1.5rem, 5vw);
}

h3	{
	font-size: min(1.2rem, 3.5vw);
}
	
.time_place	{
	font-weight: bold;
	font-style: italic;
}	

/*Check if needed*/
.caption	{
	list-style: none;
	font-size: 90%;
}	

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

/*TEXT LINKS*/

.page a	{
	color: #555;
	font-weight: bold;
}

.page a:hover, 
.page a:active, 
.page a:focus {
	text-decoration: none;
	color: #333;
}	

/*"BUTTON" LINKS*/

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

.narrative .button.uplevel	{
	margin-left: 0;
}	
	
.narrative .button a, 
.viewer .button a,
.glossary .button a	{
	text-decoration: none;
	position: relative;
	padding: .4em 1.4em .4em .4em;
	border-radius: 4px;
	border: 1px solid #000;
	background: #e5e1d8;
	color: #333;

}	

figcaption .button a	{
	position: relative;
	font-size: 110%;
	padding: .4em 1.4em .4em 0;
}	

.narrative .button.back	a, 
.viewer .button.back a	
	{
	padding: .4em .4em .4em 1.4em;
}	
	

.narrative .button a:hover, 
.narrative .button a:active, 
.narrative .button a:focus,
.viewer .button a:hover, 
.viewer .button a:active, 
.viewer .button a:focus,
.glossary .button a:hover, 
.glossary .button a:active, 
.glossary .button a:focus
	{
	background: #f2f0ec;
	color: #555;
}	

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

.narrative .button a:after,
.viewer .button a:after,
.glossary .button a:after,
figcaption .button a:after	{
	content: '»';
	position: absolute;
	top: .2em;
	right: .4em;
}

.narrative .button.back a:after,
.viewer .button.back a:after	{
	content: '«';
	left: .4em;
}

.narrative .button a:hover:after,
.viewer .button.back a:hover:after,
.glossary .button.back a:hover:after,
figcaption .button a:hover:after 	{
	display: none;
}



/*IMAGES*/

.page img	{
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

figure.round	{
	width: min(calc(100% - 6rem), 20rem);
	margin: 1rem auto;
}	

figure.small, figure.medium, figure.large	{
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
}	


figure.small figcaption, figure.medium figcaption, figure.large figcaption	{
	font-size: 90%;
	margin-top: 1rem;
}

figure.large	{
	margin: 2rem auto;
}	

figure.large figcaption span.credit	{
	font-style: italic;
}	

figure#nsf	{
	width: min(50%, 8rem);
	float: left;
	margin: 0 2rem 2rem 0;
	shape-outside: circle(50%);
}	

.lightbox	{
	margin: 2rem 0;
}	

.lightbox .wrapper	{
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	border: 1px solid #e5e1d8;
	border-radius: 6px;
}	

.lightbox.black .wrapper	{
	border: 1px solid #333;
	
}

.lightbox figure	{
	flex: 0 0 calc(100% - 2rem);
	margin: 0;
	background: #fff;
	padding: 1rem;
}

.lightbox.black figure	{
	background: #333;
}	

.lightbox figcaption	{
	margin-top: .5rem;
	font-size: 90%;
	color: #333;
}

.lightbox.black figcaption, .page .black figcaption a	{
	color: #fff;
}

.lightbox figcaption ul	{
	list-style: none;
	margin: 0;
	padding: 0;
}	

.lightbox figcaption .arabic	{
	text-align: right;
	margin-bottom: .5rem;
}

.carousel	{
	width: 100%;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 0 3rem;
	padding: 0;
}	

.carousel.rtl	{
	flex-direction: row-reverse;
}	

.carousel li	{
	flex: 0 0 6rem;
	flex: 0 0 min(6rem, 20vw);
	margin: 1.5rem 1.5rem 0 0;
	padding: .5rem;
	background: #fff;
	border: 1px solid #e5e1d8;
	border-radius: 2px;
}

.carousel li.xl	{
	flex: 0 0 min(12rem, 40vw);
}

.black .carousel li	{
	background: #333;
	border: none;
}	

.landscape .carousel li	{
	flex: 0 0 8rem;	
	flex: 0 0 min(8rem, 20vw);
}	

.portrait .carousel li	{
	flex: 0 0 5rem;	
	flex: 0 0 min(5rem, 20vw);
}

.carousel.rtl li	{
	margin: 1.5rem 0 0 1.5rem;
}

.carousel li:hover, .carousel li:active, .carousel li:focus	{
	outline: 2px solid #cac2b1;
}

.black .carousel li:hover, .black .carousel li:active, .black .carousel li:focus	{
	outline: 2px solid #555;
}		

.carousel li a	{
	width: 100%;
}	

/*INFO SECTION - DETAILS ELEMENT*/	
.info	{
	clear: both;
	padding-top: 2rem;
}

#content details	{
	padding: 1rem;
	border-radius: 4px;
	border: 1px solid #000;
}	

#content details.personalia	{
	margin-bottom: 2rem;
}
	
@supports not (-ms-ime-align: auto) {

	#content details summary { 
    cursor: pointer;
  }

	#content details summary > * { 
    display: inline;
  }
  
}

/*IMAGE VIEWER*/

.image_viewer	{
	display: none;
	margin-top: 2rem;
	clear: both;
}

.image_viewer:target	{
	display: block;
}


.image_viewer iframe	{	
	width: 100% !important;
	height: 80vh !important;
	margin-top: 2rem;
	border: 1px solid #e5e1d8;
}


/***********************/	




/*GLOSSARY*/
/******************/

.glossary dl div	{
	margin-bottom: 1rem;
	padding-top: .5rem;
}	

.glossary dt	{
	display: inline-block;
	position: relative;
	
}	

.glossary dt:before	{
	position: absolute;
	min-width: 1.8em;
	content: "";
	top: -.2em;
	bottom: -.2em;
	left: -.6em;
	right: -.6em;
	border: 1px solid #333;
	border-radius: 50%;
}	

.glossary div dd:first-of-type	{
	margin-top: -1rem;
}	

.glossary dd	{
	font-size: 90%;
	margin-left: 2rem;
	padding: .3rem 0;
}

.glossary dd a	{
	font-weight: normal;
}	
	
.glossary #entries	{
	margin-top: 2rem;
	padding: 2rem 0 0;
	border-top: 1px solid #333;
}

.glossary #entries div	{
	clear: both;
	margin-right: 1rem;
	margin-bottom: 2.5rem;
	padding-left: .5rem;
	padding-right: .5rem;
}

.glossary #entries div.clearfix	{
	margin: 0;
	padding: 0;
}	

.glossary #entries div:target {
	background: #e5e1d8;
	padding: .5rem;
}

.glossary #entries p	{
	margin-top: 0;
	margin-bottom: .5rem;
}	

.glossary ol ul	{
	list-style: disk;
}		
	
.glossary .diagram	{
	width: min(calc(100% - 2rem - 2px), 36rem);
	margin: .5rem auto;
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f2f0ec !important;
}	

.glossary .diagram.tall	{
	width: min(calc(100% - 2rem - 2px), 18rem);
}	

/*GLOSSARY BACK TO TOP BUTTON*/

.glossary .button.top	{
	position: fixed;
	bottom: calc(10vh + 2rem);
	right: -2rem;
	right: min(-2rem, -3vw);
	transform: rotate(-90deg);
}
	
.glossary .button.top a 	{
	text-decoration: none;
	position: relative;
	padding: .4em 1.4em .4em .4em;
	border-radius: 4px;
	border: 1px solid #000;
	background: #e5e1d8;
	color: #333;
	
}	

.glossary .button.top a:hover, 
.glossary .button.top a:active, 
.glossary .button.top a:focus {
	background: #f2f0ec;
	color: #555;
}	

.glossary .button.top a:after 	{
	content: '»';
	font-size: 120%;
	position: absolute;
	top: 0;
	right: .4em;
}


.glossary .button.top a:hover:after	{
	display: none;
}

	
	 

/*FOOTER*/
footer	{
	padding-top: 0;
	border-top: 0;
	font-family: 'Merriweather', 'Radley', serif;
	font-size: 0.85rem;
	color: #fff;
}	

footer a	{
	color: #fff;
	text-decoration: none;
}	

footer a:hover, footer a:active	{
	text-decoration: underline;
}	

/*EXPERIMENT*/
.viewer iframe, .map iframe	{	
	width: 100% !important;
	height: 80vh !important;
	border: 1px solid #e5e1d8;
	border-radius: 4px;
}

.viewer div	{
	display: none;
}

.viewer div:target	{
	display: block;
}	
	
/*SITEMAP*/

.sitemap ul	{
	list-style: disc;
}
	
.sitemap li	{
	font-weight: bold;
}	

.sitemap li	a {
	font-weight: normal;
	color: #000;
}	

.sitemap li	a:hover, .sitemap li a:active, .sitemap li a:focus, .sitemap li.current a  {
	text-decoration: none;
	color: #333;
}	


/*TIMELINE NEW TL6*/

.tl6	{
	font-size: min(.95rem, 2.5vw);
	margin-bottom: 2rem;
}	

.tl6 .entry	{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 4px 1fr;
	grid-template-areas: 
    "history line story";
	
}	

.tl6 .history	{
	grid-area: history;
	margin: 1rem .5rem 1rem -.5rem;	
	background: #e5e1d8;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: .5rem;
	z-index: 100;
}	

.tl6 .where p	{
	text-transform: uppercase;
}	

.tl6 .who li	{
	margin-bottom: .5rem;
}	

.tl6 .line	{
	grid-area: line;
	background: #000;
}

.tl6 .story	{
	grid-area: story;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tl6 .story.late	{
	align-self: flex-end;
}	


.tl6 .story .what	{
	width: calc(100% - 1rem - 2px);
	float: left;
	margin: 0 0 0 .5rem;
	background: #cac2b1;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: .5rem;
	
}

.tl6 .story .when	{
	width: auto;
	min-width: 18%;
	float: left;
	min-height: 1.5em;
	font-weight: bold;
	position: relative;
	background: #cac2b1;
	padding: .2em .5em;
	margin-top: .5rem;
	margin-bottom: .5rem;
}		

.tl6 .when:before	{
	position: absolute;
	top: .5em;
	left: -.6em;
	content: '';
	background: #000;
	width: .9em;
	height: .9em;
	border-radius: 50%;
}

.tl6 .history ~ .story .when:after	{
	position: absolute;
	top: .9em;
	left: -1.3rem;
	content: '';
	width: 1.4rem;
	border-bottom: 1px solid #000;
	z-index: 1;
	
}	

.tl6 .gap	{
	margin-bottom: 4rem;
}	

/*CONFERENCE*/

.conference section	{
	/*border-bottom: 1px solid #ccc;*/
	background: #e5e1d8;
	padding: .5rem;
	margin-bottom: 2rem;
	border-radius: 4px;
	clear: both;
}

.conference	h4, .conference h5	{
	font-weight: bold;
}

.conference h4	{
	font-size: 110%;
	font-style: italic;

}

.conference h5	{
	font-size: 100%;
	margin-bottom: 1rem;
}

.conference h2, h3, h4	{
	margin-bottom: .5rem;
}	

.conference h2 + p, .conference h3 + p, .conference h4 + p	{
	margin-top: 0;
	margin-bottom: 2rem;
}	

.conference section div	{
	padding-bottom: 1rem;
	border-bottom: 1px solid #ccc;
}	

.conference section div:last-child	{
	border-bottom: none;
}	

#content.conference details	{
	border: none;
	background: #cac2b1;
	padding: .5rem;
	margin-bottom: 1rem;
	margin-left: 1rem;
	margin-right: 1rem;
}
	
.conference details summary + p	{
	font-size: 95%;
	margin-left: 1rem;
	margin-right: 1rem;
}

ul.zoom	{
	font-size: 95%;
	margin-top: 0;
}		
	
.conference .video div	{
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.conference .video div h4{
	margin-top: 0;
}	

.conference video	{
	width: 100%;
	outline: 1px solid #ccc;
	margin: 0;
	padding: 0;
}	

.conference .recording	{
	margin-top: 0;
	margin-bottom: 2rem;
}