/* ===========================================
   LINDA VAN DER KOIJK — STYLE.CSS
   Design transported from the original site (2010s, by Joeri Boodt),
   rebuilt database-free. Lightbox (auto/HDR toggles) ported from
   joeriboodt.nl, restyled to this site's plain black/white chrome
   instead of the Liquid Glass system.
   =========================================== */

/* ---------- Reset ---------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---------- Root tokens ---------- */
:root {
	--outside-bg: #ACCAC9;
	--inside-bg: #ECF9F9;

	--lb-bg: rgba(20, 20, 20, 0.6);
	--lb-bg-hover: rgba(20, 20, 20, 0.8);
	--lb-border: rgba(255, 255, 255, 0.35);
	--lb-border-strong: rgba(255, 255, 255, 0.6);
	--lb-text: #fff;
	--lb-text-secondary: rgba(255, 255, 255, 0.75);
	/* Site's own mint (--outside-bg, #ACCAC9) as RGB triplet, for tinting
	   the AUTO/HDR toggle when on — echoes joeriboodt.nl's accent-tinted
	   "on" state without introducing an unrelated color. */
	--lb-accent-rgb: 172, 202, 201;
	/* Matches joeriboodt.nl's lightbox radius system (--radius-sm/--radius-md). */
	--lb-radius-sm: 12px;
	--lb-radius-md: 20px;
}

/* ---------- Base ---------- */
html {
	padding: 1em;
}

body {
	max-width: 1280px;
	min-width: 280px;
	font-family: Georgia, serif;
	margin: 0 auto;
	word-wrap: break-word;
	background-color: var(--outside-bg);
}

section p {
	line-height: 1.4em;
	margin: 0.8em 0;
}

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.2em; }
h1, h2, h3, h4, h5, h6 {
	margin: 0.2em 0;
	padding: 0.2em 0;
}

a { text-decoration: none; color: black; }
a:link { text-decoration: none; color: black; }

strong, b { font-weight: bold; }
em { font-style: italic; }

img {
	max-width: 200%;
	height: auto;
	margin: 0.5em;
}

section img {
	max-width: 98%;
	border: 3px solid black;
	background-color: black;
	border-radius: 0.3em;
}

footer {
	border-top: 3px solid black;
	padding-top: 0.3em;
	margin-top: 0.7em;
}

.taCenter { text-align: center; }

.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.tekstArea {
	text-align: left;
	margin: 1em 0 1.3em;
}

/* Alignment classes written by the Site Manager app's rich-text editor
   (default/bare <p> = left; center + right are explicit). */
.tekstArea p.center { text-align: center; }
.tekstArea p.right { text-align: right; }

/* Editor-inserted images sit on their own line, centered (matching the
   app's editor preview); bare <img> = full column, im-small/medium cap it. */
.tekstArea img { display: block; margin: 0.7em auto; }
.tekstArea img.im-small { max-width: 40%; }
.tekstArea img.im-medium { max-width: 70%; }

.tekstMargin { margin: 0.7em; }

/* ---------- Back navigation (matches the old site's "terug"/"naar boven") ---------- */
.titleLink {
	transition: opacity 0.15s;
}
.titleLink:hover {
	opacity: 0.6;
}

.return p {
	font-size: 1.5em;
	font-weight: bold;
	margin: 1.8em 1em 1.6em 1em;
	padding: 0;
	text-align: center !important;
	transition: opacity 0.15s;
}
.return:hover p {
	opacity: 0.6;
}

/* ---------- Navigation ---------- */
#navigation {
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	padding: 0.2em;
	font-size: 1.7em;
	text-transform: capitalize;
	line-height: 1.4em;
	word-wrap: normal !important;
}

#navigation a { margin: 0 0.5em; }

#navigation a:hover,
#navigation a.active {
	color: white;
	text-shadow: -2px -2px 5px #000;
}

#footernavigation {
	font-size: 1em;
	font-weight: bold;
	text-transform: capitalize;
	line-height: 1.4em;
	word-wrap: normal !important;
	padding: 0.3em 0;
}

#footernavigation a:hover {
	color: white;
	text-shadow: -2px -2px 5px #000;
}

/* ---------- Wrapper / header ---------- */
#wrapper {
	padding: 1em;
	border-radius: 0.4em;
	border: 3px solid black;
	box-shadow: 1px 1px 15px #000;
	background-color: var(--inside-bg);
}

#mainTitle {
	padding: 0.2em 0 0.3em 0;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
}

#mainTitle img {
	margin: 0.2em auto 0 auto;
	max-width: 100%;
}

#upperTitle {
	font-size: 1.8em;
	margin: 0.9em 0 0.6em;
	padding: 0.1em;
	text-transform: capitalize;
}

#miniTitle {
	padding: 0.1em;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 auto 0.5em auto;
}

#headerImg {
	/* Full wrapper width — the source thumb is 1200px while the content
	   column can be ~1240px, so without an explicit width the banner left a
	   gap on the right (the ~3% upscale is imperceptible). */
	width: 100%;
	max-width: 100%;
	padding: 0.8em 0 0.7em 0;
	margin: 0;
}

#headerIcons {
	position: absolute;
	right: 0.4em;
	bottom: 0.8em;
	display: inline-block;
}

#footerlogo img {
	height: 50px;
	margin: 0;
}

#wdjoeri {
	border-top: 3px solid black;
	margin-top: 1em;
	padding-top: 1.2em;
	font-size: 0.7em;
}

#wdjoeri a { text-decoration: underline; }
#wdjoeri a:hover { font-weight: bold; }

.footerInfo {
	width: 200px;
	display: inline-block;
	margin: 0.75em 1em;
}

/* ---------- Icons ---------- */
.icon_thumbnail,
.icon_thumbnail_footer {
	display: inline-block;
	height: 2em;
	width: 2em;
	margin: 0.2em 0;
	border-radius: 0.2em;
	border: 2px solid black;
	background-color: black;
}

.icon_thumbnail:hover,
.icon_thumbnail_footer:hover {
	transform: scale(1.07, 1.07);
}

a[href*="facebook"]:not(#headerIcons a):not(.footerInfo a) {
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
	font-weight: bold;
	color: white !important;
	background-color: #3b5998;
	padding: 0 3px;
	border: 2px solid #3b5998;
	border-radius: 0.2em;
}

a[href*="facebook"]:not(#headerIcons a):not(.footerInfo a):hover {
	border: 2px solid white;
}

/* ---------- Section-index album tiles ---------- */
.sectionTiles {
	margin-top: 1.2em;
}

.portfolioTnU {
	display: inline-block;
	margin: 0;
}

.portfolioTn {
	height: 200px;
	width: 300px;
	overflow: hidden;
	border: 3px solid black;
	border-radius: 0.3em;
	background-color: black;
}

.portfolioTn img {
	position: relative;
	max-height: none;
	margin: 0;
	border: none;
	max-width: 305px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolioTnP {
	text-align: left;
	margin-left: 0.2em;
	position: relative;
	font-size: 2.5em;
	color: white;
	text-shadow: -2px -2px 5px black;
	margin-top: -1.3em;
	margin-bottom: 0;
	width: 280px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.portfolioTnU:hover > .portfolioTn {
	border: 3px solid white;
	background-color: white;
}

.portfolioTnU:hover { opacity: 0.8; }

.portfolioTnU:hover > p {
	color: black;
	text-shadow: -1px 1px 2px white;
}

/* ---------- Album photo grid (replaces the old FlexSlider) ---------- */
.photoGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.6em;
	margin: 1.4em 0;
}

.gallery__item {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 3px solid black;
	border-radius: 0.3em;
	background-color: black;
	cursor: pointer;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	/* override section img { max-width: 98% } so cover fills edge-to-edge —
	   otherwise a ~3px black sliver of the tile shows on every thumbnail */
	max-width: 100%;
	object-fit: cover;
	margin: 0;
	border: none;
	display: block;
}

.gallery__item:hover {
	border-color: white;
	opacity: 0.85;
}

.photoGrid__empty {
	text-align: center;
	padding: 2em 1em;
}

/* ---------- Contact form ---------- */
.contactform {
	width: 45%;
	margin: 0.2em;
	font-family: Georgia, serif;
	font-size: 1em;
	padding: 0.4em;
	border: 2px solid black;
	border-radius: 0.4em;
}

textarea.contactform { width: 45%; }

.knop {
	margin: 0.2em;
	border: 2px solid white;
	background: black;
	color: white;
	width: 140px;
	padding: 0.5em;
	border-radius: 0.4em;
	font-family: Georgia, serif;
	font-size: 1em;
	cursor: pointer;
}

.knop:hover {
	background: white;
	color: black;
	border: 2px solid black;
}

.formMessage {
	margin: 0.6em auto;
	padding: 0.6em 1em;
	border-radius: 0.4em;
	max-width: 45%;
	border: 2px solid black;
}

.formMessage--error {
	background: #fdecec;
}

.formMessage--success {
	background: #eafaf0;
}

.honeypotField {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* ---------- Lightbox (ported from joeriboodt.nl, restyled) ---------- */
/* joeriboodt.nl has a global `box-sizing: border-box` reset that this
   lightbox CSS was authored/ported against; this site has no such reset
   (content-box everywhere else), so identical width+padding+border
   declarations rendered fatter here — the toggle track, the mobile title
   pill (which overflowed the viewport), and the mobile description pill
   all assume border-box math. Scoped to the lightbox only so the rest of
   the site's content-box layout is untouched. */
.lightbox, .lightbox *, .lightbox *::before, .lightbox *::after {
	box-sizing: border-box;
}

.lightbox {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100vh;
	height: 100dvh;
	background: #000;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity 0.2s ease;
	overscroll-behavior: none;
	touch-action: pan-x;
	/* How far the title pill (desktop) / whole control cluster (mobile)
	   lifts when the description popover opens — set from JS to the
	   popover's real rendered height so it can never overlap whatever
	   sits above it. 0 while closed. */
	--desc-lift: 0px;
}

.lightbox--active {
	display: flex;
	opacity: 1;
}

.lightbox__close {
	position: absolute;
	top: 1.2em;
	right: 1.2em;
	width: 46px;
	height: 46px;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 50%;
	color: var(--lb-text);
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, transform 0.15s;
	z-index: 11;
}

.lightbox__close:hover { background: var(--lb-bg-hover); transform: scale(1.1); }
.lightbox__close:active { transform: scale(0.9); }

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 50%;
	color: var(--lb-text);
	font-size: 1.1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, transform 0.15s;
	z-index: 10;
}

.lightbox__nav--prev { left: 1.2em; }
.lightbox__nav--next { right: 1.2em; }
.lightbox__nav:hover { background: var(--lb-bg-hover); transform: translateY(-50%) scale(1.1); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.9); }

.lightbox__controls { display: contents; }
.lightbox__toggles { display: contents; }

.lightbox__counter {
	position: absolute;
	bottom: 1.2em;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.35em 1em;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 999px;
	color: var(--lb-text);
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.5em;
	transition: transform 0.2s;
}

/* Desktop: the description opens in the title pill's old spot, and the
   title pill itself glides up by the popover's height so the two never
   overlap. AUTO/HDR stay in the corners here — they're never above the
   title on desktop, so they don't need to move (see the mobile block
   below, where they do sit above it). Scoped to the same breakpoint as
   the mobile overrides further down so it can never fight them. */
@media (min-width: 769px) {
	.lightbox--desc-open .lightbox__counter {
		transform: translateX(-50%) translateY(calc(-1 * var(--desc-lift)));
	}
}

.lightbox__description {
	position: absolute;
	bottom: 1.2em;
	left: 50%;
	max-width: min(36rem, calc(100vw - 20rem));
	padding: 0.6em 1em;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius-md);
	color: var(--lb-text-secondary);
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: center;
	margin: 0;
	opacity: 0;
	transform: translateX(-50%) translateY(6px) scale(0.96);
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
}

.lightbox__description--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1);
	pointer-events: auto;
}

.lightbox__info-btn {
	background: none;
	border: 1px solid var(--lb-border);
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-style: italic;
	font-weight: 700;
	color: var(--lb-text-secondary);
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.lightbox__info-btn:hover,
.lightbox__info-btn--active {
	color: var(--lb-text);
	border-color: var(--lb-border-strong);
	background: rgba(255, 255, 255, 0.1);
}

.lightbox__share {
	background: none;
	border: none;
	color: var(--lb-text-secondary);
	cursor: pointer;
	padding: 2px;
	display: flex;
	align-items: center;
	transition: color 0.15s, transform 0.15s;
	flex-shrink: 0;
}

.lightbox__share:hover { color: var(--lb-text); transform: scale(1.15); }
.lightbox__share:active { transform: scale(0.9); }
.lightbox__share svg { width: 16px; height: 16px; }

.lightbox__share-toast {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	padding: 4px 10px;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius-sm);
	color: var(--lb-text);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.lightbox__share-toast--visible { opacity: 1; transform: translateY(0); }

.lightbox__hdr,
.lightbox__auto {
	position: absolute;
	bottom: 1.2em;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.35em 0.7em;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 999px;
	color: var(--lb-text-secondary);
	font-family: Georgia, serif;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	z-index: 10;
}

.lightbox__hdr { right: 1.2em; }
.lightbox__auto { left: 1.2em; }

.lightbox__hdr:hover,
.lightbox__auto:hover { color: var(--lb-text); border-color: var(--lb-border-strong); }

.lightbox__hdr-track,
.lightbox__auto-track {
	width: 32px;
	height: 18px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid var(--lb-border);
	border-radius: 9px;
	display: flex;
	align-items: center;
	padding: 2px;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}

.lightbox__hdr-thumb,
.lightbox__auto-thumb {
	width: 12px;
	height: 12px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transition: transform 0.15s, background 0.15s;
}

.lightbox__hdr--on .lightbox__hdr-track,
.lightbox__auto--on .lightbox__auto-track {
	background: rgb(var(--lb-accent-rgb));
	border-color: rgb(var(--lb-accent-rgb));
}

.lightbox__hdr--on .lightbox__hdr-thumb,
.lightbox__auto--on .lightbox__auto-thumb {
	transform: translateX(14px);
	background: #fff;
}

.lightbox__hdr--on,
.lightbox__auto--on { color: var(--lb-text); }

.lightbox__hdr-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lightbox__hdr-info-icon {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--lb-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.55rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	color: var(--lb-text-secondary);
	opacity: 0.8;
}

.lightbox__hdr-info:hover .lightbox__hdr-info-icon { opacity: 1; border-color: var(--lb-border-strong); }

.lightbox__hdr-tooltip {
	position: absolute;
	bottom: calc(100% + 14px);
	right: -0.7em;
	min-width: 200px;
	max-width: 240px;
	padding: 0.4em 0.6em;
	background: rgba(10, 10, 10, 0.9);
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius-sm);
	font-size: 0.7rem;
	font-weight: 400;
	font-style: normal;
	color: var(--lb-text-secondary);
	white-space: normal;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s;
	z-index: 20;
}

.lightbox__hdr-info:hover .lightbox__hdr-tooltip,
.lightbox__hdr-info--active .lightbox__hdr-tooltip {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.lightbox__stage {
	/* Transparent passthrough — the lightbox backdrop is already pure #000,
	   so a black stage box here was redundant and, since it can end up
	   slightly larger than the image it wraps, left a rounded black strip
	   below the photo (mismatched corners). Rounding + shadow now live on
	   the image itself, guaranteeing 4 equal corners.
	   No position:relative here — keeps the DOM out of a new stacking
	   context so Safari's HDR gain-map compositing on <img> still applies
	   at the document layer (see CLAUDE.md). */
	max-width: 85%;
	max-height: 85%;
	line-height: 0;
}

.lightbox__image {
	max-width: 85vw;
	max-height: 85vh;
	display: block;
	object-fit: contain;
	border-radius: 0.3em;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	transition: opacity 0.15s ease;
	user-select: none;
	-webkit-user-drag: none;
	/* Overrides the site-wide `img { margin: 0.5em }` reset. That margin,
	   applied symmetrically but with the image's width already pinned to
	   its max-width cap, made the box over-constrained: per the CSS spec
	   the left margin is honored and the excess spills out the right edge
	   instead of being absorbed — the image rendered noticeably off-center
	   (shifted right) on mobile. The stage flexbox already centers this
	   image; it needs zero margin of its own. */
	margin: 0;
}

@media (max-width: 768px) {
	.lightbox__nav {
		width: 40px; height: 40px; font-size: 1rem;
		position: static; transform: none;
	}
	.lightbox__nav--prev { order: -2; }
	.lightbox__nav--next { order: -1; }
	.lightbox__nav:hover { transform: scale(1.1); }
	.lightbox__nav:active { transform: scale(0.95); }

	.lightbox__close { width: 40px; height: 40px; font-size: 1.25rem; top: 0.8em; right: 0.8em; }

	.lightbox__controls {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		position: absolute;
		bottom: 1em; left: 0; right: 0;
		z-index: 10;
		row-gap: 1em;
		padding: 0 0.8em;
		transition: transform 0.2s;
	}
	/* Here the toggles (and arrows) sit in the grid row ABOVE the title —
	   the case the whole cluster needs to lift for, as one unit, so row
	   alignment stays coherent and nothing in it can end up overlapping
	   the description pill revealed below. */
	.lightbox--desc-open .lightbox__controls {
		transform: translateY(calc(-1 * var(--desc-lift)));
	}
	/* The desktop lift rule targets .lightbox__counter directly; reset it
	   here since the mobile cluster-level lift above already moves the
	   counter along with everything else, and the counter is
	   position:static on mobile (translateX(-50%) would misplace it). */
	.lightbox--desc-open .lightbox__counter {
		transform: none;
	}
	.lightbox__nav--prev { grid-row: 1; grid-column: 1; justify-self: start; }
	.lightbox__nav--next { grid-row: 1; grid-column: 3; justify-self: end; }

	.lightbox__toggles {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		grid-row: 1; grid-column: 2;
	}
	.lightbox__auto, .lightbox__hdr {
		position: static; font-size: 0.75rem; padding: 4px 8px; border-radius: 999px;
	}
	.lightbox__counter {
		grid-row: 2; grid-column: 1 / -1; width: 100%;
		position: static; transform: none; font-size: 0.8rem;
		justify-content: center; text-align: center; border-radius: var(--lb-radius-md);
	}
	.lightbox__description {
		bottom: 1em;
		max-width: calc(100vw - 2em);
	}
	.lightbox__image { max-width: 95vw; max-height: 80vh; max-height: 80dvh; }
	.lightbox__stage { max-width: 95%; max-height: 80%; }
}

/* Gated on viewport HEIGHT, not width: a phone rotated to landscape often
   reports a width over 768px (e.g. 844px), so a max-width query alone would
   never match it, and the photo would fall back to the desktop 85vh/85%
   caps — too small for a short landscape screen. Fit the image to the
   screen instead of the old scroll-to-see-it-all approach. */
@media (max-height: 500px) and (orientation: landscape) {
	.lightbox__stage { max-height: none; }
	.lightbox__image { max-width: 94vw; max-height: 86vh; max-height: 86dvh; }
}

/* ---------- Responsive (transported breakpoints) ---------- */
@media screen and (max-width: 750px) {
	.photoGrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media screen and (max-width: 675px) {
	.icon_thumbnail { height: 1.6em; width: 1.6em; }
}

@media screen and (max-width: 600px) {
	#headerIcons { display: none; }
	.contactform, textarea.contactform, .formMessage { width: 80%; }
}

@media screen and (max-width: 500px) {
	#headerImg { padding: 0.5em 0 0.4em 0; }
}

@media screen and (max-width: 400px) {
	#navigation { font-size: 1.4em; }
	.portfolioTn { height: 150px; width: 225px; }
	.portfolioTnP { width: 225px; font-size: 1.5em; }
	.photoGrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.4em; }
}