@font-face {
    font-family: Asap Condensed;
	src: url("fonts/asap-condensed_400_latin.woff2");
}
@font-face {
    font-family: Asap Condensed;
	src: url("fonts/asap-condensed_400_italic_latin.woff2");
	font-style: italic;
}
@font-face {
    font-family: Asap Condensed;
	src: url("fonts/asap-condensed_500_latin.woff2");
	font-weight: 500;
}
/*@font-face {
    font-family: Asap Condensed;
	src: url("fonts/AsapCondensed-Bold.ttf");
	font-weight: 600;
}*/


:root {

	/*** colors ***/
	--grey: #4a4a4a;
	--lightgrey: #888886;
/*	--lightyellow: #f4f2ef;*/
	--lightyellow: rgb(243, 242, 239);
	--pink: #ff005b;
	--lightpink: #f39aca;
	--fontcolor: var(--lightgrey);
	--fontcolordark: var(--grey);
	--fontcolorhighlight: var(--pink);
	--bgcolor: var(--lightyellow);
	--bgcolor-translucent: rgb(243, 242, 239, 0.9);


	/*** grid ***/
	/*** 8-cols grid with 3 fix cols (position of fix cols is variable) ***/
	/*** 
	 *   2.5vw|10vw|
	 *  2.5vw|10vw|
	 *  2.5vw|150px|
	 *  2.5vw|10vw|
	 *  40px|150px|
	 *  40px|150px|
	 *  40px|10vw|
	 *  2.5vw|10vw|
	 *  2.5vw|10vw|
	 *  2.5vw 
	 * ***/
	--scrollbar-width: 20px;
	/*fix margin between fix cols*/
	--mfix: 40px;
	--c1fix: 150px;
	/* c2fix: 340px */
	/* c3fix: 530px */
	--c2fix: calc(2*var(--c1fix) + 1*var(--mfix));
	--c3fix: calc(3*var(--c1fix) + 2*var(--mfix));
	/*width of the 5 flex columns: vw minus the 3 fix cols */
	--c5flex: calc(100vw - var(--c3fix) - var(--scrollbar-width));
	/*flex margin between flex cols and at start*/
	--mflex: calc(var(--c5flex) * 2.5 / 67.5);
	--c1flex: calc(var(--c5flex) * 10 / 67.5);
	--c2flex: calc(2*var(--c1flex) + 1*var(--mflex));
	--c3flex: calc(3*var(--c1flex) + 2*var(--mflex));
	--c4flex: calc(4*var(--c1flex) + 3*var(--mflex));
}

.darkbody {
	--fontcolor: var(--lightyellow);
	--fontcolordark: #ffffff;
	--fontcolorhighlight: var(--lightpink);
}

.darkbody > header h1 {
	color: var(--grey);
}
.darkbody > header a {
	color: var(--lightgrey);
}
.darkbody > header a:hover {
	color: var(--pink);
}



body {
	margin:0;
	margin-top: 44px;
	background-color: var(--bgcolor);
	color: var(--fontcolor);
/*	font-family: "Arial";*/
/*	font-family: "Arial Narrow";*/
/*	font-family: "Helvetica";*/
/*	font-family: "HelveticaNeue-CondensedBold";*/
/*   Helvetica Neue: Condensed only bold! */
/*	font-family: "Helvetica Neue";*/ 
/*	font-family: "Helvetica LT Std";*/
/*	font-family: "Helvetica Neue LT Std";*/
/*	font-family: "Fira Sans Extra Condensed";*/
/*	font-family: "Asap Condensed";*/
/*	font-family: "Helvetica Neue LT Std", "Helvetica LT Std", "Helvetica", "Asap Condensed", "Arial Narrow", "Arial", sans-serif;*/
	font-family: "Helvetica Neue LT Std", "Asap Condensed", "Arial Narrow", sans-serif;

	font-weight: 400;
	font-stretch: condensed;

	font-size: 18px;
	font-size: clamp(18px, 1.6vw, 30px);
	/* prevent iphone from auto-resizing text (in landscape)	*/
	-moz-text-size-adjust: 100%;
	line-height: 22px;
	line-height: clamp(22px, 2.0vw, 36px);

/* sample fallback */
/*	@supports (display: grid) {
	   .container {
	        display: grid;
	    }
	}
*/
}


nav {
	display: none;
	position:fixed;
	z-index:100;
	top:70px;
	top: clamp(62px, 4.9vw, 85px);
	left:20px;
	background-color: var(--pink);
	color: white;
	filter: drop-shadow(0 0 8px rgba(0,0,0,0.15));
	font-size: 22px;
	font-size: clamp(22px, calc(1.7vw + 2px) , 34px);
	line-height: clamp(30px, 2.3vw , 38px);
/*	height: 100vh;*/
	padding-right: 22px;
	padding-left: 22px;
}


nav.noscript {
	display: block;
	position: fixed;
	padding-top: 8px;
	top: 0;
}
nav.noscript ul,
nav.noscript li {
	display: inline;
	padding-right: 12px;
}

nav a {
	color: #ffceef;
}
nav a.current {
	color: #ffffff;
}

nav > ul > li > a {
	font-style: normal;
}

nav ul ul {
	padding-inline-start:18px;
}

nav a:hover {
	color: white;
/*	font-style: normal;*/
}

nav ul {
	list-style: none;
/*	padding-inline-start: 12px;*/
	padding-inline-start: 0;
}

nav > ul {
    margin-block-start: 0.7em;
    margin-block-end: 0.4em;
}


.emptynavitem {
	height:10px;
/*	background-color: lime;*/
}


header {
	position: fixed;
	background-color: var(--bgcolor-translucent);
	top: 12px;
	padding: 2px 24px 12px var(--mflex);
}
header a {
/* todo: margin left instead of nbsp	*/
	margin-right: 4px;
	margin-right: clamp(2px, 0.2vw, 6px);
}

.padding-below-header {
	padding-top: clamp(44px, 4.4vw, 76px);
}

h1, h2, h3, .dark {
	color: var(--fontcolordark);
}

h1 {
/*	font-size: 24px;*/
/*	font-size: clamp(24px, 2.7vw , 40px);*/
	font-size: 20px;
	font-size: clamp(20px, 2.0vw , 35px);
	font-weight: 500;
	display: inline-block;
	margin: 0;
}

h2 {
	font-size: 20px;
	font-size: clamp(20px, 2.0vw , 35px);
	font-weight: 500;
}

h3 {
	font-size: 19px;
	font-size: clamp(19px, calc(1.6vw + 2px) , 32px);
	margin: 0;
	font-weight: 500;
}

/* todo: not in use */
h4 {
	font-size: 17px;
	font-size: clamp(17px, calc(1.4vw + 2px) , 28px);
	margin: 0;
	font-weight: 500;
}



.small {
	font-size: clamp(14px, 1.3vw, 20px);
}

.pink {
	color: var(--fontcolorhighlight);
}

/*** fix widths w/o margin for imgs ***/
.w-1fix {
	width: var(--c1fix);
}
.w-2fix {
	width: var(--c2fix);
}
.w-3fix {
	width: var(--c3fix);
}


/*** fix cols  ***/
.c-1fix {
	float: left;
	width: var(--c1fix);
/*background-color: lightpink;*/
	margin-left: var(--mflex);
}
.c-2fix {
	float: left;
	width: var(--c2fix);
/*background-color: lightpink;*/
	margin-left: var(--mflex);
}
.c-3fix {
	float: left;
	width: var(--c3fix);
/*background-color:lightseagreen;*/
	margin-left: var(--mflex);
}

/*** flex cols  ***/
.c-1flex {
	float: left;
	width: var(--c1flex);
/*	background-color: lightgoldenrodyellow;*/
	margin-left: var(--mflex);
}
.c-2flex {
	float: left;
	width: var(--c2flex);
/*	background-color: lightgoldenrodyellow;*/
	margin-left: var(--mflex);
}
.c-3flex {
	float: left;
	width: var(--c3flex);
/*	background-color: cornflowerblue;*/
	margin-left: var(--mflex);
}
.c-4flex {
	float: left;
	width: var(--c4flex);
/*	background-color: cornflowerblue;*/
	margin-left: var(--mflex);
}
.c-5flex {
	float: left;
	width: var(--c5flex);
/*	background-color: lightgoldenrodyellow;*/
	margin-left: var(--mflex);
	/*	otherwise line break above win 3183 */
	max-width: 80vw;
}


/*** mixed cols  ***/
.c-1flex-1fix {
	float: left;
	width: calc(1*var(--c1fix) + 1*var(--c1flex) + + 1*var(--mfix));
	margin-left: var(--mfix);
}
.c-1fix-2flex {
	float: left;
	width: calc(1*var(--c1fix) + 2*var(--c1flex) + 1*var(--mfix) + 1*var(--mflex));
/*	background-color: lightsalmon;*/
	margin-left: var(--mflex);
}
.c-2fix-2flex {
	float: left;
	width: calc(2*var(--c1fix) + 2*var(--c1flex) + 1*var(--mfix) + 1*var(--mflex));
/*	background-color: lightsalmon;*/
	margin-left: var(--mflex);
}
.c-3fix-2flex {
	float: left;
	width: calc(3*var(--c1fix) + 2*var(--c1flex) + 2*var(--mfix) + 2*var(--mflex));
/*	background-color: lightgreen;*/
	margin-left: var(--mflex);
}

.c-h1px {
	height: 1px;
/*	background-color: orange;*/
}

.c-hspace-s {
	height: 22px;
	height: clamp(22px, 2.0vw, 36px);
}

.c-hspace-m {
	height: 44px;
	height: clamp(44px, 4.0vw, 72px);
}

.c-hspace-l {
	height: 66px;
	height: clamp(66px, calc(6.0vw) , 108px);
}


/*** composite  ***/
/* first of 3 large images */
.c-2fix-right-in-3flex {
	text-align: right;
}
.c-2fix-right-in-3flex > figure > figcaption {
	text-align: left;
	padding-left: calc(var(--c3flex) - var(--c2fix));
}

.wrapper {
	float: left;
}

.clear {
	clear: left;
}

.nowrap {
	white-space: nowrap;
}

figure {
	margin: 0;
}
img {
	vertical-align: middle;
	margin-bottom: 10px;
/*	filter: drop-shadow(0 0 6px #e6e6e6);*/
	box-shadow: 0 0 6px #dddddd;

}
.darkbody img {
	box-shadow: 0 0 6px #4c4c4c;
}

img.border {
/*	filter: drop-shadow(0 0 1px #cccccc);*/
/*	box-shadow: 0 0 0 1px #e6e6e6;*/
}
img.shadow {
	box-shadow: 3px 2px 6px 1px #d3d3d3;
/*	filter: */
/*		drop-shadow(2px 2px 2px #d3d3d3)*/
/*		drop-shadow(0 1px 4px #d3d3d3);*/
}

.c-text,
figcaption {
	margin-bottom: 22px;
	margin-bottom: clamp(22px, 2.2vw, 38px);}
.caption-right {
	float: left;
/*	margin-right: var(--mflex);*/
	margin-right: 10px;
}

.margin-small-left {
	margin-left: 11px;
}
/*.margin-small-right {
	margin-right: 11px;
}*/
/*.padding-3flex-to-2fix-left {
	padding-left: calc(var(--c3flex) - var(--c2fix));
}
*/
.no-y-margin {
	margin-top: 0;
	margin-bottom: 0;
}
.no-top-margin {
	margin-top: 0;
}

/*** breadcrumb ***/
.bc {
	display: inline-block;
	visibility: hidden;
	width: 20px;
}
.bc:hover {
	display: inline-block;
	visibility: visible;
	width: auto;
}
.bc::first-letter {
	visibility: visible;
}
/*.bc > .i-small {
	visibility: visible;
}*/


a {
	text-decoration: none;
	color: var(--fontcolor);
	font-style: italic;
}
a:hover {
	color: var(--fontcolorhighlight);
}


.i-small {
	display: inline-block;
	position: relative;
	top: 1px;
	top: clamp(1px, 0.2vw, 2px);
	width: 16px;
/*	width: clamp(16px, 1.6vw, 28px);*/
	width: clamp(18px, 1.7vw, 32px);
	margin-right: 3px;
	margin-right: clamp(3px, 0.3vw, 7px);
}
.i-xsmall {
	display: inline-block;
	position: relative;
	width: 16px;
	width: clamp(14px, 1.2vw, 18px);
	margin-right: 3px;
	margin-right: clamp(3px, 0.3vw, 7px);
}

.i-menu {
	content:url('icons/menu.pink.svg');
	width: 36px;
	width: clamp(36px, 3vw, 58px);
	position: relative;
	top: 10px;
	top: clamp(8px, 0.9vw, 14px);
}
a:hover > .i-menu {
	content:url('icons/menu.pink.svg');
}
.i-arrow-east {
	content:url('icons/arrow.east.grey.svg');
}
.i-arrow-east-dark {
	content:url('icons/arrow.east.darkgrey.svg');
}
.i-arrow-east-pink {
	content:url('icons/arrow.east.pink.svg');
}
a:hover > .i-arrow-east,
a:hover > .i-arrow-east-dark {
	content:url('icons/arrow.east.pink.svg');
}
a:hover > .i-arrow-east-pink {
	content:url('icons/arrow.east.darkgrey.svg');
}
.i-arrow-west {
	content:url('icons/arrow.west.grey.svg');
}
.i-arrow-east-bold {
	content:url('icons/arrow.east.bold.darkgrey.svg');
}
.i-arrow-west-bold {
	content:url('icons/arrow.west.bold.darkgrey.svg');
}


.darkbody .i-arrow-east {
	content:url('icons/arrow.east.lightyellow.svg');
}
.darkbody > header .i-arrow-west {
	content:url('icons/arrow.west.grey.svg');
}
.darkbody .i-arrow-east-dark {
	content:url('icons/arrow.east.lightyellow.svg');
}
.darkbody a:hover > .i-arrow-east,
.darkbody a:hover > .i-arrow-east-dark {
	content:url('icons/arrow.east.lightpink.svg');
}
.darkbody .i-arrow-west {
	content:url('icons/arrow.west.lightyellow.svg');
}



.dot-sold {    
	position:absolute;
    display: inline-block;
    background-color: var(--pink);
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    margin-left:0.8em;
    margin-top:-0.6em;
   }










/*** large screen only (not mobile)  ***/
/*.l-only {
}
*/
.s-only, .s-only-block {
	display: none;
}

/*** screen reader only, not visible  ***/
.sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}


footer {
	padding-top:44px;
	margin-bottom:10px;
	margin-left: var(--mflex);
}
footer a {
	margin-right: 16px;
}

.footer {
	padding-top:44px;
	margin-bottom:10px;
	margin-left: var(--mflex);
}
.footer a {
	margin-right: 16px;
}



/*** medium window larger: imgs > 66%  ***/
/*@media only screen and (min-width : 780px) and (max-width : 1150px) {*/
/*@media only screen and (min-width : 880px) and (max-width : 1150px) {*/
@media only screen and (min-width : 880px) and (max-width : 1240px) {
	:root {
		/*** grid ***/
		--mfix: 26.667px;
		--c1fix: 100px;
	}
}

/*** medium window smaller: imgs > 50%  ***/
/*@media only screen and (min-width : 600px) and (max-width : 779px) {*/
@media only screen and (min-width : 635px) and (max-width : 880px) {
	:root {
		/*** grid ***/
		--mfix: 20px;
		--c1fix: 75px;
	}
}


/*** small window: no floating, imgs > 100%  ***/
/*@media only screen and (min-width: 320px) and (max-width: 599px) {*/
@media only screen and (min-width: 320px) and (max-width: 634px) {
	:root {
		/*** grid ***/
		--mfix: 10px;
		--c1fix: 150px;
		--c2fix: 340px;
		--c3fix: 530px;
	}


	body {
/*		background-color:orange;*/
/*		font-size: 4.6vw;*/
		font-size:28px;
		line-height: 36px;
		margin-left: 22px;
		margin-top: 11px;
	}


	header {
		position: initial;
/*		padding: 2px 24px 12px var(--mflex);*/
	}

	header > .bc,
	header > .i-small {
		display: none;
	}


	.small {
		font-size:22px;
	}

	h1 {
		font-size: 28px;
		margin-left: 32px;
	}

	h2 {
		font-size: 28px;
	}

	h3 {
		font-size: 28px;
	}


	nav {
		font-size: 26px;
		top:62px;
	}

	.i-small {
		width: 4.6vw;
		margin-right: 3px;
	}

	.i-menu {
		position: fixed;
		width: 36px;
		width: clamp(36px, 3vw, 58px);
		/* margin required for Asap Condensed but not Helvetica Condensed */
		margin-top: 3px;
	}

	.padding-below-header {
/*		padding-top: 120px;*/
		padding-top: 0;
	}

	.w-1fix,
	.w-2fix,
	.w-3fix,
	.c-1fix,
	.c-2fix,
	.c-3fix,
	.c-1flex,
	.c-2flex,
	.c-3flex,
	.c-4flex,
	.c-5flex,
	.c-1flex-1fix,
	.c-1fix-2flex,
	.c-2fix-2flex,
	.c-3fix-2flex {
		float: none;
		/*scroolbar is set to 0 in @media for mobile below*/
		width: calc(100vw - var(--scrollbar-width));
/*		width: 100vw;*/
		width: calc(100vw - 44px);
/*
		max-width: var(--c3fix);
	/*	background-color:lightseagreen;*/
	/*	margin-left: var(--mfix);*/
		margin-left:0;
	}

/*	.c-text,
	figcaption,
	footer {
		padding-left: 22px !important;
		width: calc(100vw - 44px);
	}
*/	/*.c-2fix-right-in-3flex > figure > figcaption {
		// todo: important above ok?
	}*/

	.c-2fix-right-in-3flex {
		text-align: left;
	}


/* todo: caption left of image?	*/
	/* max size for small imgs */
	.w-1fix {
		max-width: var(--c1fix);
	}
	.w-2fix {
		max-width: var(--c2fix);
	}


	.wrapper {
		float: none;
		clear: left;
	}

	.caption-right {
		float: none;
		clear: left;
	}

	.l-only {
		display: none;
	}

	.s-only {
		display: initial;
	}
	.s-only-block {
		/* check on artbox */
		display: block;
	}


}


/* todo: test mobile only (iPad? skip max width?) */
/*@media (any-pointer: coarse) {*/
/*** small mobile window: like small window, but no scrollbar  ***/
@media only screen and (min-device-width: 320px) and (max-device-width: 634px) {
	:root {
		/*	use px to prevent iphone from miscalculation */
		--scrollbar-width: 0px;
	}

	/*** large screen only (not mobile)  ***/
	.l-only {
/*		display: none;*/
	}
	.s-only {
/*		display: initial;*/
	}

}