:root{

	--essayMacroMainFontSize: 30pt;
	--essayMacroIntroFontSize: 18pt;
	--essayMacroMainLineHeight: 175%;
	--essayMacroCaptionFontSize: 8pt;
	--essayMacroHead2FontSize: 13pt;
	--essayMacroColumnWidth: 33rem;

	--essayMainFontSize: 12pt;
	--essayIntroFontSize: 18pt;
	--essayMainLineHeight: 175%;
	--essayCaptionFontSize: 8pt;
	--essayHead2FontSize: 12pt;
	--essayColumnWidth: 33rem;
	
	/*big*/
	--essayIntroFontSizeBig: 25pt;
	--essayColumnWidthBig: 45rem;
	--essayMainFontSizeBig: 16pt;
	--essayMainLineHeightBig: 165%;
	--essayHead2FontSizeBig: 18pt;
	}


body{
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 2;
	-webkit-hyphenate-limit-lines: 2;
	hyphenate-limit-lines: 2;
}

.essay .essayToc{
		font-size: 12pt;
		line-height: 150%;
		font-weight: 200;
		
	}
.essay .essayTopLink{
		text-align: right;
		font-weight: 100;
}

.essayHeroImage{
	background-image: url("assets/lens.webp");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
	background-size: cover;
	height: 500pt;
}

.essay{
	max-width: var(--essayColumnWidthBig);
	margin-left: auto;
	margin-right: auto;
}

.essay p{
	font-size: var(--essayMainFontSizeBig);
	line-height: var(--essayMainLineHeightBig);
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 10pt;
	font-feature-settings: "ss05" 1;
}

#essayIntro{
	font-size: var(--essayIntroFontSizeBig);
	font-weight: 550;
}

.essay .caption{
	font-size: var(--essayCaptionFontSize);
	line-height: 175%;
	font-weight: 455;
	margin-top: 0;
}
.essay b{
	font-weight: 800;
}

.essay h2{
	font-size: var(--essayHead2FontSizeBig);
	line-height: 130%;
	font-weight: 800;
	margin-top: 2em;
	margin-bottom: 10pt;
	padding: 0;
	margin-left: 0em;
}
.essay h1{
	font-size: 100pt;
	line-height: 100%;
	font-weight: 850;
	margin-bottom: 50pt;
	margin-top: 40pt;
	padding: 0;
}
.essay .essayReference{
	float: left;
	margin-left: -45pt;
	color: skyblue;
	font-feature-settings: "sups" 0;
	font-size: var(--essayMainFontSize);
}
.fitImage {
	width: 95%;
	height: auto;
	object-fit: cover;
	margin-bottom: 10pt;
	margin-top: 10pt;
}
.essayImage{
	max-width: 100%;
	height: auto;
	display: block;
	margin-top: 50pt;
	margin-bottom: 20pt;
}
.essay .caption{
	margin-top: 10pt;
	margin-left: -60pt;
}





@media only screen
	and (max-width: 900px)
		{
			.essay{
				max-width: var(--essayColumnWidth);
				margin-left: auto;
				margin-right: auto;
			}
			.essay p{
				font-size: var(--essayMainFontSize);
				line-height: var(--essayMainLineHeight);
				font-weight: 450;
				font-feature-settings: "ss05" 1;
				margin-left: 15pt;
				margin-right: 15pt;
			}
			#essayIntro{
				font-size: var(--essayIntroFontSize);
				font-weight: 450;
				font-feature-settings: "ss05" 1;
			}
			.essay h1{
				font-size: 16cqi;
				line-height: 110%;
				font-weight: 700;
				margin-bottom: 50pt;
				margin-top: 50pt;
				margin-left: 15pt;
				margin-right: 15pt;
			}
			.essay h2{
				font-size: var(--essayHead2FontSize);
				line-height: 170%;
				font-weight: 800;
				margin-top: 60pt;
				margin-bottom: 10pt;
				margin-left: 15pt;
				margin-right: 15pt;
			}
			.essay .essayReference{
				float: none;
				margin-left: 0pt;
				color: skyblue;
				font-feature-settings: "sups" 1;
				font-size: 100%;
				/*font-size: var(--essayMainFontSize);*/
			}
			.essay .essayTopLink{
				text-align: left;
				font-weight: 400;
			}
			.essay .caption{
				margin-left: 20pt;
			}
		   	td .essayRenderCaption{
				font-size: var(--essayCaptionFontSize);
		   		color: skyblue;
		   	}
		}

   	.distanceBig{
				font-size: 13pt;
				line-height: 160%;
				font-weight: 450;
				margin-top: 10pt;
				margin-bottom: 10pt;
   	}

   	.distanceSmall{
				font-size: 8pt;
				line-height: 170%;
				font-weight: 300;
				margin-top: 5pt;
				margin-bottom: 5pt;
   	}
   	.essayNotes{
   		max-width: 40em;
		font-feature-settings: "ss05" 1;
   	}
   	td .essayRenderCaption{
		font-size: 10pt;
		font-weight: 400;
		line-height: 155%;
   		color: white;
		margin-bottom: 5pt;
		margin-top: 2pt;
		margin-left: 10pt;
   	}
   	td .essayRenderScreen{
		font-size: 8pt;
		line-height: 150%;
		color: skyblue;
		margin-bottom: 5pt;
		margin-top: 10pt;
		max-width: 20em;
		margin-left: 10pt;

   	}
	.comparisonTableRank{
		font-size: 12pt;
		font-weight: 550;
		margin-left: 10pt;
		margin-top: 5pt;
	}


	/*copied from styles.css*/
	.essay .stedelijkBody{
		font-size:6.5pt;
		font-weight: 200;
		line-height: 160%;
		margin-top:20pt;
		margin-bottom: 20pt;
		border: 1px gray dotted;
		padding: 10pt;
		text-align: center;
		max-width: 100pt;
		margin-left: 10pt;
			}		
	.essay .pullout{
		margin-top: 50pt;
	}