:root {
	--pageWidth:                  1280px;
	--headerHeightMax:            100px;
	--headerHeightMin:            36px;
	--headerLogoHeightMax:        75px;
	--headerLogoHeightMin:        30px;
	--scrollbarWidth:             0px;
	--shrink-size:                1;
	--footerHeigth:               80px;
	--fontSize:                   1.8rem;
	--fontSizeSmall:              1.6rem;
	--fontSizeSmaller:            1.4rem;
	--fontSizeLarge:              2.2rem;

	--expander:                   -345px;

	--customerColor:            #fff;
	--customerColor1:           #8c9d5c;
	--customerColor2:           #2d2818;
	--customerColor3:           #4e7e5edd;
	--customerColor4:           #b1212a;
	--customerColor5:           #F1B254;
	--aksellColor:              #1f3344;

	--variantColor1:            #333;
	--variantColor2:            #808080;
	--variantColor3:            #b3b3b3;
	--variantColor4:            #e6e6e6;
	--variantColor5:            #f6f6f6;

	--highlightColor:             yellow;
	--headerBgColor:              var(--customerColor);
	--headerLogoColor:            var(--variantColor1);
	--headerLinkColor:            var(--variantColor1);
	--footerLinkColor:            var(--variantColor1);
	--footerTextColor:            var(--variantColor1);
	--iconColor:                  var(--variantColor1);
	--iconMenuColor:              var(--variantColor1);
	--iconShareColor:             var(--customerColor4);
	--iconPrevNextColor:          var(--customerColor4);
	--menuTextColor:              var(--customerColor);
	--menuLinkColor:            #000;
	--tocPartColor:               var(--customerColor);
	--tocLinkColor:             #000;
	--contentHeaderColor:       #333;
	--contentLeadColor:           var(--customerColor);
	--contentQuoteColor:          var(--customerColor);
	--contentTextColor:         #666;
	--contentTextColorLight:    #888;
	--contentTextColorDark:     #333;
	--contentLinkColor:           var(--customerColor4);
	--contentBoxBgColor:          var(--variantColor4);
	--contentBoxTextColor:        var(--contentTextColorDark);
	--contentBoxBgColorB:         var(--customerColor5);
	--contentBoxTextColorB:       var(--variantColor1);
	--contentBoxBgColorC:         var(--variantColor3);
	--contentBoxTextColorC:       var(--variantColor1);
	--contentBoxBgColorF:         var(--variantColor5);
	--contentBoxTextColorF:       var(--variantColor1);
	--dividor:                    var(--variantColor2);
	--tablestripe-color:          var(--variantColor5);
	--buttonBgColor:              var(--customerColor1);
	--buttonHoverBgColor:         var(--customerColor);
	--buttonTxtColor:             var(--variantColor5);

	--footerBgColor:              var(--customerColor);

	--canvasText:                 Lato, Helvetica, Arial, sans-serif;
	--contentText:                'Merriweather', Times, 'Times New Roman', serif;
	--contentHeading:             Lato, Helvetica, Arial, sans-serif;
	--contentSans:                Lato, Helvetica, Arial, sans-serif;
	--contentBoxText:             'Merriweather', Times, 'Times New Roman', serif;

	--str-advertisement: 'advertisement:';
}

/* latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	src: local('Lato Light'), local('Lato-Light'), url(../font/lato/v14/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: local('Lato Regular'), local('Lato-Regular'), url(../font/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: local('Lato Bold'), local('Lato-Bold'), url(../font/lato/v14/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../font/lato/v24/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 400;
	src: local('Merriweather Regular'), local('Merriweather-Regular'), url(../font/merriweather/v19/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 700;
	src: local('Merriweather Bold'), local('Merriweather-Bold'), url(../font/merriweather/v19/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6hPvhPQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
	font-family: 'Merriweather';
	font-style: italic;
	font-weight: 400;
	src: local('Merriweather Italic'), local('Merriweather-Italic'), url(../font/merriweather/v20/u-4m0qyriQwlOrhSvowK_l5-eRZOf-LVrPHp.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
ul{list-style:none;}
button,input,select,textarea{margin:0;}
html{box-sizing:border-box;min-height: 100%;font-size: 62.5%;}
*,*:before,*:after{box-sizing:inherit;}
img,embed,iframe,object,audio,video{max-width:100%;}
iframe{border:0;}
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;text-align:left;}
:focus:not(:focus-visible) {outline:none;}
address{font-style:unset;}

body {
	font-size: 14px;
	font-size: 1.4rem;
	font-family: var(--canvasText);
}

a {
	text-decoration: none;
	color: var(--contentLinkColor);
}

sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub { top: 0.4em; }

/* icons */
svg.icon {
	display: inline-block;
	width: 25px;
	height: 25px;
	fill: var(--iconColor);
	vertical-align: text-top;
}
#content svg.icon {
	width: 1em;
	height: 1em;
}
svg.icon.huge,
#content svg.icon.huge {
	width: 48px;
	height: 48px;
}
svg.icon.large,
#content svg.icon.large {
	width: 36px;
	height: 36px;
}
svg.icon.small,
#content svg.icon.small {
	width: 14px;
	height: 14px;
}
button .icon {
	cursor: pointer;
}
button:focus,
svg.icon:focus,
a:focus {
	outline: var(--customerColor) dotted 1px;
}


#grid {
	display: grid;
	grid-template-columns: auto var(--pageWidth) auto;
	grid-template-rows: var(--headerHeightMax) 1fr var(--footerHeigth);
	grid-gap: 0 0;
	grid-template-areas:
	"header header header"
	". main ."
	"footer footer footer"
	;
}
#grid.widemap {
	grid-template-rows: var(--headerHeightMin) 1fr var(--footerHeigth);
	grid-template-areas:
	"header header header"
	"main main main"
	"footer footer footer"
	;
}
header,
#menu,
main,
footer {
	padding: 0 15px;
}
#menu {
	margin: 0 -15px
}
#grid > header {
	grid-area: header;
	background-color: var(--headerBgColor);
	box-shadow: 0 0 5px var(--variantColor1);
}
body #grid > header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 666;
	height: var(--headerHeightMax);
	transition: all .2s ease-in-out;
}
body.min-header #grid > header,
#grid.widemap > header {
	height: var(--headerHeightMin);
}
#grid > main {
	grid-area: main;
	min-height: calc(100vh - var(--headerHeightMax) - var(--footerHeigth));
}
#grid > footer {
	grid-area: footer;
	min-height: var(--footerHeigth);
	display: flex;
	align-items: center;
	text-align: center;
	background-color: var(--footerBgColor);
	color: var(--footerTextColor);
	box-shadow: 0 0 5px var(--variantColor1);
}
#grid > footer .constrainer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	padding: 10px 0
}
#grid > footer .siteowner,
#grid > footer .sitedeveloper a {
	display: flex;
	align-items: center;
}
#grid > footer .siteowner svg {
	vertical-align: bottom;
	margin-right: 1ex;
}
#grid > footer .sitedeveloper {
	text-align: right;
}
#grid > footer .sitedeveloper svg {
	margin-top: -2px;
	margin-left: 1ex;
	vertical-align: middle;
	fill: var(--aksellColor);
}
#grid > footer a {
	color: var(--footerLinkColor);
	text-decoration: none;
}
#grid > footer a:hover {
	text-decoration: underline;
}
.constrainer {
	position: relative;
	width: 100%;
	max-width: var(--pageWidth);
	margin: 0 auto;
}
#topmenu {
	display: flex;
	align-items: stretch;
	position: relative;
	height: 100%;
}
#topmenu h1,
#topmenu nav {
	display: flex;
	flex-grow: 1;
	justify-content: flex-end;
	align-items: center;
}
#topmenu nav .navrap {
	display: contents;
}
#topmenu h1 { justify-content: flex-start; }
#topmenu h1 a { display: contents; }
#topmenu h1 img {
	max-width: var(--headerLogoHeightMax);
	max-height: var(--headerLogoHeightMax);
	fill: var(--headerLogoColor);
	margin-right: 20px;
	transition: all .2s ease-in-out;
}
.min-header #topmenu h1 img,
#grid.widemap #topmenu h1 img {
	width: var(--headerLogoHeightMin);
	height: var(--headerLogoHeightMin);
}
#topmenu h1 .text {
	white-space: nowrap;
	color: var(--headerLinkColor);
}
#topmenu nav a.search {
	padding: 3px 15px;
	font-size: 0;
}
#topmenu nav a {
	margin: 5px;
	padding: 0 10px;
	font-size: var(--fontSizeSmall);
	font-weight: bold;
	text-transform: uppercase;
	color: var(--headerLinkColor)
}
.min-header #topmenu nav a,
#grid.widemap #topmenu nav a {
	padding-top: 2px;
	padding-bottom: 3px;
}
.min-header #topmenu nav a.search,
#grid.widemap #topmenu nav a.search {
	padding-top: 0px;
	padding-bottom: 1px;
}
#topmenu nav a:hover {
	text-decoration: underline;
}
#topmenu nav button.toggle-menu {
	display: none;
	background-color: transparent;
	border: none;
	font-size: 0;
}
#topmenu nav button .icon {
	fill: var(--iconMenuColor);
}
#topmenu nav button .icon.cross {
	display: none;
}
body.menu #topmenu nav button .icon.cross {
	display: unset;
}
body.menu #topmenu nav button .icon.bars {
	display: none;
}
#menu {
	height: 0;
	overflow: hidden;
	background-color: var(--headerBgColor);
	font-size: var(--fontSizeSmall);
}
body.menu #menu {
	height: auto;
	padding-bottom: 20px;
}
#menu .constrainer > ul {
	column-count: 3;
}
#menu h2 {
	text-transform: uppercase;
	font-size: var(--fontSizeSmall);
	color: var(--menuTextColor);
}
#menu h2 .icon {
	margin: 4px 2px 0 -16px;
	fill: var(--menuTextColor)
}
#menu a {
	color: var(--menuLinkColor);
}
#menu a:hover {
	text-decoration: underline;
}
#menu > div > ul > li {
	margin-bottom: .6rem;
}

#grid.frontpage .burns {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100vw - var(--scrollbarWidth));
	height: 100vh;
	object-fit: cover;
	z-index: -1;
	overflow: hidden;
}
#grid.frontpage .burns img {
	width: 100vw;
	height: 100vh;
	max-width: none;
	object-fit: cover;
	animation: move ease 60s infinite;
}
@keyframes move {
  0% {
    transform-origin: bottom left;
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.2);
  }
	100% {
    transform: scale(1.0);
  }
}

main {
	display: grid;
	grid-template-columns: 280px 1fr 280px;
	grid-template-areas:
		"toc content aside"
	;
	gap: 0 40px;
}
main.wide {
	display: block;
	padding: 20px 0;
}
main.tall {
	padding: 0;
}
main.frontpage {
	display: grid;
	grid-template-rows: auto min-content auto;
	grid-template-columns: 1fr;
		grid-template-areas:
		"heading"
		"search"
		"blurb"
	;
	gap: 20px 30px;
	padding-bottom: 30px;
}
main.tables {
	display: block;
}
main #content {
	grid-area: content;
	z-index: 2;
	padding-top: 20px;
}
main #content * {
	scroll-margin-top: calc(var(--headerHeightMin) + 20px);
}
main #content .nogo {
	display: flow-root;
	position: relative;
	&::before {
		position: absolute;
		top: -50vh;
		left: 0;
		width: 100%;
		height: 50vh;
		content: ' ';
		background: linear-gradient(0deg, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	}
}

main > nav.toc {
	z-index: 1;
	position: sticky;
	top: var(--headerHeightMin);
	height: calc(100vh - var(--footerHeigth));
	overflow-y: auto;
	padding-top: 20px;
}
main > nav.toc a,
main.page .toc a {
	color: var(--variantColor1)
}
main > nav.toc a:hover,
main.result nav li label:hover {
	color: var(--customerColor4);
	text-decoration: underline;
}
main > nav.toc button.toggle-toc {
	visibility: hidden;
}
main nav.toc ul.level1 > li > a,
main.page .toc ul li a {
	position: relative;
	display: block;
	margin-top: 12px;
	padding-left: 30px;
	font-size: var(--fontSize);
}
main nav.toc ul.level1 > li > a:before,
main.page .toc ul li a:before,
main.result nav li label:before {
	position: absolute;
	top: -3px;
	left: 0;
	width: 24px;
	height: 24px;
	content: ' ';
	background: var(--variantColor3) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23fff" stroke="%23fff" stroke-width="55px" d="M367.42,247.51c4.67,4.67,4.67,12.3,0,16.97L164.39,467.51c-4.67,4.67-12.3,4.67-16.97,0l-2.83-2.83 c-4.67-4.67-4.67-12.3,0-16.97L327.8,264.49c4.67-4.67,4.67-12.3,0-16.97L144.58,64.29c-4.67-4.67-4.67-12.3,0-16.97 l2.83-2.83c4.67-4.67,12.3-4.67,16.97,0L367.42,247.51z"/></svg>') no-repeat 5px center;
	background-size: 70%;
	border: 0px solid var(--customerColor4);
	border-radius: 12px;
}
main nav.toc ul.level2 > li > a {
	position: relative;
	display: block;
	margin-top: 6px;
	padding-left: 30px;
	font-size: var(--fontSizeSmall);
}
main nav.toc ul.level1 > li.active > a:before,
main nav.toc ul.level1 > li:has(.active) > a:before,
main.page .toc ul li p.active a:before,
main.result nav li input:checked + label:before {
	background-color: var(--contentLinkColor);
	rotate: 90deg;
}
main nav.toc .active > a,
main.page .toc ul li p.active a,
main.result nav li input:checked + label {
	font-weight: 600;
}
main.result nav ul {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto;
	gap: 15px 5px;
}
main.result nav ul li,
main.result nav ul li label {
	display: contents;
}
main.result nav ul li label .icon {
	width: 24px;
	height: 24px;
	margin-top: -2px;
	background-color: var(--contentLinkColor);
	border-radius: 13px;
	fill: var(--variantColor5);
}
main.result nav li input:checked + label .icon {
	background-color: var(--customerColor4);
	rotate: 90deg;
	fill: var(--variantColor5);
}
main.result nav ul li label .count {
	text-align: right;
	font-weight: 400;
}
main.result nav ul li label .count:before { content: '('; }
main.result nav ul li label .count:after { content: ')'; }
main.result nav ul li label .count.all { visibility: hidden; }

main aside {
	grid-area: aside;
	padding-top: 20px;
}
main aside button {
	padding: 0;
	background-color: transparent;
	border: none;
}
main aside figure {
	scale: .333;
}

/* content */
*:has(>.page-normal) {
	position: relative;
}
.page-normal {
	position: absolute;
	top: 0;
	left: -30px;
	font-family: var(--contentText);
	font-weight: 300;
	font-size: var(--fontSizeSmaller);
	color: var(--contentTextColorLight);
}
li .page-normal {
	left: calc(-1.2em - 30px);
}

#content figure {
	position: relative;
}
#content figure:has(nav.active) {
	display: block;
	z-index: 666;
	margin-right: var(--expander) !important;
	margin-left: var(--expander) !important;
	border: 10px solid #fff;
	background-color: var(--variantColor5);
	box-shadow: 0 0 5px var(--variantColor3);
}
#content figure:has(nav.active):has(img) {
	width: fit-content !important;
}
#content figure > nav {
	position:absolute;
	top: 5px;
	right: 5px;
	z-index: 2;
	width: 30px !important;
	height: 30px;
}
#content figure.table > nav {
	top: 0;
	right: 0;
	z-index: 2;
}
#content figure > nav button {
	width: 30px;
	height: 30px;
	padding: 0;
	background-color: #cccccc66;
	border-width: 0;
	border-radius: 15px;
}
#content nav button .icon {
	width: 20px;
	height: 20px;
	fill: #333;
}
#content nav.active button .icon {
	transform: rotate(45deg);
}

/* headings */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	margin: 1.2em 0 .5em 0;
	font-family: var(--contentHeading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--contentHeaderColor);
}
#content h1 {
	margin-top: 0;
	font-size: calc(2 * var(--fontSize));
}
#content h2 {
	font-size: calc(1.6 * var(--fontSize));
}
#content h3 {
	font-size: calc(1.4 * var(--fontSize));
}
#content h3 {
	font-size: calc(1.2 * var(--fontSize));
}
#content h4 {
	font-size: calc(1.1 * var(--fontSize));
}
#content h5 {
	font-weight: 700;
	font-style: italic;
	font-size: var(--fontSize);
}
#content h6 {
	font-weight: normal;
	font-style: italic;
	font-size: var(--fontSize);
}

#content .meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tocPartColor);
}
#content .lead p {
	color: var(--contentLeadColor);
}
#content blockquote {
	padding-top: 1rem;
	margin-bottom: 1rem;
	border: 1px solid var(--dividor);
	border-width: 1px 0;
}
#content blockquote p {
	font-size: 2.6rem;
	color: var(--contentQuoteColor);
}

#content blockquote .origin p {
	font-size: var(--fontSizeSmall);
	text-align: right;
}
#content p,
#content ul,
#content ol {
	font-family: var(--contentText);
	font-size: var(--fontSize);
	color: var(--contentTextColor);
	line-height: 1.8;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
#content .persons {
	padding: 1rem 0;
	font-family: var(--contentSans), sans-serif;
}
#content .person {
	margin: 1rem 0;
	color: var(--contentTextColorLight);
}
#content .person > *,
#content .person [class^="misc"] {
	display: inline-block;
}
#content .persons .name span {
	font-weight: bold;
}
#content .persons p {
	margin: 0;
	font-size: var(--fontSizeSmall);
	color: var(--contentTextColorLight);
}





#content .suptitle {
	margin: 6px 0 0 0;
	font-family: var(--contentHeading), sans-serif;
	font-size: var(--fontSize);
	font-weight: 400;
	line-height: 1.2;
}
#content .suptitle + h2 {
	margin-top: .5em;
}
#content .subtitle {
	margin: -.5em 0 1em 0;
	font-family: var(--contentHeading), sans-serif;
	font-size: var(--fontSizeLarge);
	font-weight: 400;
	line-height: 1.2;
}
#content h2 + section > h3,
#content h3 + section > h4 { margin-top: 0; }
#content :not(section) h1,
.page #content :not(section) h1 {
	font-size: var(--fontSize);
}
#content figure h1 {
	margin-bottom: .5em;
}

#content p { margin: 0 0 1em 0; }
#content p.blank { margin-top: 2em; }
#content p.unindented { margin-top: -1em; }
#content h2 + p.unindented { margin-top: 0; }
#content p.hanging {
	padding-left: 2.2rem;
	text-indent: -2.2rem;
}
#content p.hanging * {
	text-indent: 0;
}
#content p.left { text-align: left; }
#content p.center { text-align: center; }
#content p.right { text-align: right; }
#content p.justify { text-align: justify; }
#content p.source {
	text-align: right;
	font-size: var(--fontSizeSmall);
}
#content p a {
	word-wrap: break-word;
	word-break: break-all;
}

#content em {
	font-weight: inherit;
	font-style: normal;
	text-decoration: none;
}
#content em.strong { font-weight: bold; }
#content em.italic { font-style: italic; }
#content em.underline { text-decoration: underline; }

#content ol,
#content ul { margin: 0 0 1em 1.5em; }
#content ol.num { list-style: decimal; }
#content ol.A { list-style: upper-alpha; }
#content ol.a { list-style: lower-alpha; }
#content ol.I { list-style: upper-roman; }
#content ol.i { list-style: lower-roman; }
#content ul.circle { list-style: circle; }
#content ul.bullet { list-style: initial; }
#content ul.free { list-style: none; }
#content li { margin: .5em 0; }
#content li:first-of-type { margin: -.5em 0 .5em 0; }
#content li p { margin: 0; }

#content ol ol,
#content ul ul { margin: 1em 0 1em 1.2em; }
#content table ol,
#content table ul { margin: .6em 0 1em 1.2em; }

#content figure {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 10px;
	margin: 1.5em 0;
}
#content figure:not(.textflow) > * { grid-column: 1 / span 8; width: 100%; }
#content figure:not(.textflow).w100 > *   { grid-column: 1 / span 8; }
#content figure:not(.textflow).w75 > *    { grid-column: 1 / span 6; }
#content figure:not(.textflow).w50 > *    { grid-column: 1 / span 4; }
#content figure:not(.textflow).w25 > *    { grid-column: 1 / span 2; }
#content figure:not(.textflow).w12½ > *   { grid-column: 1 / span 1; }
#content figure:not(.textflow).center.w100> *  { grid-column: 1 / span 8; justify-self: center; }
#content figure:not(.textflow).center.w75> *   { grid-column: 2 / span 6; }
#content figure:not(.textflow).center.w50> *   { grid-column: 3 / span 4; }
#content figure:not(.textflow).center.w25> *   { grid-column: 4 / span 2; }
#content figure:not(.textflow).center.w12½> *  { grid-column: 4 / span 1; }
#content figure:not(.textflow).right.w100 > *  { grid-column: 1 / span 8; justify-self: end; }
#content figure:not(.textflow).right.w75 > *   { grid-column: 3 / span 6; }
#content figure:not(.textflow).right.w50 > *   { grid-column: 5 / span 4; }
#content figure:not(.textflow).right.w25 > *   { grid-column: 7 / span 2; }
#content figure:not(.textflow).right.w12½ > *  { grid-column: 8 / span 1; }
#content figure:not(.textflow).left.w75 figcaption[class^="side-"]   { grid-column: 7 / span 2 !important; grid-row: 1; }
#content figure:not(.textflow).left.w50 figcaption[class^="side-"]   { grid-column: 5 / span 4 !important; grid-row: 1; }
#content figure:not(.textflow).left.w25 figcaption[class^="side-"]   { grid-column: 3 / span 6 !important; grid-row: 1; }
#content figure:not(.textflow).left.w12½ figcaption[class^="side-"]  { grid-column: 2 / span 7 !important; grid-row: 1; }
#content figure:not(.textflow).center figcaption.full-width          { grid-column: 1 / span 8 !important; grid-row: 1; }
#content figure:not(.textflow).right.w75 figcaption[class^="side-"]  { grid-column: 1 / span 2 !important; grid-row: 1; }
#content figure:not(.textflow).right.w50 figcaption[class^="side-"]  { grid-column: 1 / span 4 !important; grid-row: 1; }
#content figure:not(.textflow).right.w25 figcaption[class^="side-"]  { grid-column: 1 / span 6 !important; grid-row: 1; }
#content figure:not(.textflow).right.w12½ figcaption[class^="side-"] { grid-column: 1 / span 7 !important; grid-row: 1; }
#content figure:not(.textflow) figcaption.side-top { align-self: start; }
#content figure:not(.textflow) figcaption.side-bottom { align-self: end; }
#content figure:not(.textflow) figcaption.full-width { grid-column: 1 / span 8 !important; }
#content figure.right figcaption { text-align: left; }
#content figure.center figcaption { text-align: center; }
#content figure.textflow {
	display: block;
	margin-top: 0.5em;
}
#content figure.textflow { float: left; margin-right: 20px; }
#content figure.textflow.center { margin-left: auto; margin-right: auto; text-align: center; }
#content figure.textflow.right { float: right; margin-left: 20px; }
#content figure.textflow.w75  { width: 75%; }
#content figure.textflow.w50  { width: 50%; }
#content figure.textflow.w25  { width: 25%; }
#content figure.textflow.w12½ { width: 12.5%; }

#content figcaption {
	margin-top: 0;
	font-family: var(--contentSans), sans-serif;
	font-style: italic;
	color: var(--contentTextColorDark);
}
#content figcaption p,
#content .box figcaption p {
	font-family: var(--contentSans), sans-serif;
	font-size: var(--fontSizeSmall);
	font-style: italic;
	line-height: 1.4;
	color: var(--contentTextColorLight);
}
#content figcaption .note p,
#content figcaption .origin p {
	font-style: normal;
	color: var(--contentTextColorLight);
}
#content figcaption p { margin-bottom: 0; }
#content figcaption p + .origin p { margin-top: .5em; }
#content figcaption ul,
#content figcaption ol { margin-top: 1em; }

figure.table {
	overflow-x: auto;
	overflow-y: hidden;
}
#content figure img {
	max-width: 100%;
}
#content figure img.b {
	padding: 10px;
	border: 1px solid var(--tableborder-color);
}

#content figure.imbed iframe {
	width: var(--pageWidth);
	aspect-ratio: 16/9;
}


#content .gallery {
	margin: 2em 0;
}
#content .gallery a { display: inline-block }
#content .gallery .item {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 10px;
	background-size: cover;
}
#content .gallery .item img {
	width: 1px;
	height: 1px;
}


#content table {
	width: 100%;
	margin: .5em 0;
	border-collapse: collapse;
}
#content figure:has(figcaption) table {
	margin-bottom: 0;
}
#content table caption {
	margin-bottom: .5em;
	font-family: var(--contentSans), sans-serif;
	font-size: var(--fontSizeSmall);
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
}
#content table th,
#content table td {
	padding: 5px;
	border: 1px var(--dividor) solid;
	font-family: var(--contentSans), sans-serif;
	font-size: var(--fontSizeSmall);
	line-height: 1.2;
}
#content table th.left,
#content table td.left { text-align: left; }
#content table th.center,
#content table td.center { text-align: center; }
#content table th.right,
#content table td.right { text-align: right; }
#content table th,
#content table td { vertical-align: top; } /* default */
#content table th.top,
#content table td.top { vertical-align: top; }
#content table th.middle,
#content table td.middle { vertical-align: middle; }
#content table th.bottom,
#content table td.bottom { vertical-align: bottom; }
#content table th.rotate p,
#content table td.rotate p {
	writing-mode: vertical-lr;
	writing-mode: vertical-rl;
	white-space: nowrap;
	margin: 0 auto;
}
#content table p,
#content .box table p {
	margin: 0;
	font-size: var(--fontSizeSmall);
	font-family: var(--contentSans), sans-serif;
	line-height: normal;
}
#content table p.blank { margin-top: .5em; }
#content table th {
	background-color: var(--customerColor5);
	border-bottom-color: var(--customerColor2);
}
#content table th p {
	color: var(--customerColor2);
}
#content table.var-a tr:nth-child(even) td { background-color: var(--tablestripe-color); }
#content table.var-b tr th,
#content table.var-b tr td { background-color: transparent; }
#content table.var-c tr > * { border: none; }
#content table.var-d { margin: 0; }
#content table.var-d tr > * {
	padding: 0;
	border: none;
}
#content table.var-d tr > * > p,
#content table.var-d li p,
#content table.var-d caption {
	margin-right: 1ex;
	font-size: var(--fontSize);
	font-family: var(--contentText);
	font-weight: normal;
	line-height: 1.8;
	color: var(--contentTextColor);
}
#content .box table.var-d caption,
#content .box table.var-d tr > * > p {
	font-size: var(--fontSizeSmall);
	color: var(--contentBoxTextColor);
}
#content table.var-d tr > *:last-child > p {
	margin-right: 0;
}
#content table.var-d a.mappin .icon{
	width: 25px;
	height: 25px;
}
main.tables #content {
	position: relative;
}
main.tables .sticky {
	position: sticky;
	top: var(--headerHeightMin);
	text-align: right;
}
main.tables nav.taback .tab {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"icon label"
		"icon link"
	;
	gap: 0 5px;
	float: right;
	margin: -5px -10px 0 0;
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 5px var(--variantColor1);
}
main.tables nav.taback .tab > .icon {
	grid-area: icon;
	fill: var(--variantColor2);
}
main.tables nav.taback label {
	grid-area: label;
	font-size: var(--fontSize);
	font-weight: 600;
	color: var(--contentHeaderColor);
}
main.tables nav.taback .backer {
	grid-area: link;
	display: flex;
	align-items: center;
	justify-content: end;
}
main.tables nav.taback .backer .icon {
	fill: var(--contentLinkColor);
}
main.tables #content table { margin-bottom: 3rem; }
main.tables #content table tr:nth-child(even) td { background-color: var(--tablestripe-color); }
main.tables #content table th {
	background-color: var(--customerColor5);
}
main.tables #content table th,
main.tables #content table td {
	border: 1px var(--dividor) solid;
}
main.tables #content table th p,
main.tables #content table td p {
	font-family: var(--contentSans);
}

#content .footnote {
	vertical-align: baseline;
	top: -0.4em;
	position: relative;
	padding: 0;
	cursor: pointer;
	user-select: none;
	font-weight: bold;
	color: var(--contentLinkColor);
}
#content .footnote span {
	display: none;
	position: absolute;
	bottom: 20px;
	left: -150px;
	z-index: 666;
	width: 300px;
	padding: 10px;
	user-select: text;
	background-color: var(--variantColor5);
	border-radius: 3px;
	box-shadow: 1px 1px 6px var(--variantColor1);
	text-indent: 0;
	text-align: center;
	font-weight: normal;
	font-size: var(--fontSizeSmall);
	line-height: normal;
	color: var(--contentTextColor);
}
#content .footnote.active span {
	display: unset;
}

/* content elements */
#content .box {
	margin: 1rem 0;
	padding: 2rem 3rem;
	background-color: var(--contentBoxBgColor);
	color: var(--contentBoxTextColor);
}
#content .box h1,
#content .box h2,
#content .box h3,
#content .box h4,
#content .box .subtitle,
#content .box p {
	color: var(--contentBoxTextColor);
}
#content .box.var-b {
	background-color: var(--contentBoxBgColorB);
}
#content .box.var-b h1,
#content .box.var-b h2,
#content .box.var-b h3,
#content .box.var-b h4,
#content .box.var-b .subtitle,
#content .box.var-b p,
#content .box.var-b ul,
#content .box.var-b ol {
	color: var(--contentBoxTextColorB);
}
#content .box.var-c {
	background-color: var(--contentBoxBgColorC);
}
#content .box.var-c h1,
#content .box.var-c h2,
#content .box.var-c h3,
#content .box.var-c h4,
#content .box.var-c .subtitle,
#content .box.var-c p {
	color: var(--contentBoxTextColorC);
}
#content .box.var-f {
	background-color: var(--contentBoxBgColorF);
}
#content .box.var-f h1,
#content .box.var-f h2,
#content .box.var-f h3,
#content .box.var-f h4,
#content .box.var-f .subtitle,
#content .box.var-f p {
	color: var(--contentBoxTextColorC);
}
#content .box h1 {
	margin-top: 0;
	font-size: calc(1.5 * var(--fontSize));
	color: var(--contentBoxTextColor);
}
#content .box h2 {
	margin-top: 0;
	font-size: calc(1.3 * var(--fontSize));
}
#content .box h3 {
	margin-top: 0;
	font-style: normal;
	font-weight: bold;
	font-size: calc(1.1 * var(--fontSize));
}
#content .box h4 {
	margin-top: 0;
	font-style: italic;
	font-size: calc(1 * var(--fontSize));
}
#content .box p {
	font-family: var(--contentBoxText), sans-serif;
	font-size: var(--fontSizeSmall);
	color: var(--contentBoxTextColor);
}
#content .box section + p { margin-top: 1.2em; }

#content .petit {
	margin-left: 20px;
	font-style: italic;
}

#content .example {
	padding-left: 15px;
	border-left: 15px var(--complementarylighter-color) solid;
}
#content .variant p {
	font-weight: 700;
	font-style: italic;
	color: var(--customerColor1);
}

#content .poem { margin: 1em 0; }
#content .poem h1 {
	margin-top: 1.5em;
	font-size: 22px;
	font-style: italic;
}
#content .verse { margin: 1em 0;  }
#content .verse p { margin: 0; }

#content menu.share {
	display: flex;
	margin: 20px 0 15px 0;
	padding: 15px 0 0 0;
	border-top: 1px solid var(--dividor);
}
#content menu.share .icon {
	fill: var(--variantColor3);
}
#content menu.share .icon:hover {
	fill: var(--customerColor4);
}
#content menu.share a {
	margin-right: 5px;
	font-size: 0;
}

#content nav.prevnext {
	display: flex;
	clear: both;
	padding: 15px 0;
	border-top: 1px solid var(--dividor);
	font-family: var(--contentSans);
	font-size: var(--fontSizeSmall);
}
#content nav.prevnext a {
	position: relative;
	display: block;
	width: 50%;
	margin: 0 15px;
	text-decoration: none;
	color: var(--variantColor2);
}
#content nav.prevnext a.next { text-align: right; }
#content nav.prevnext a.noprev { visibility: hidden; }
#content nav.prevnext .icon {
	position: absolute;
	top: -1px;
	left: -23px;
	fill: var(--iconPrevNextColor);
}
#content nav.prevnext .next .icon {
	left: unset;
	right: -23px;
}
#content nav.prevnext label {
	display: block;
	cursor: pointer;
}
#content nav.prevnext span {
	font-weight: bold;
}


/* toc */
#content.toc header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--dividor);
}
#content.toc header h1 {
	margin: 0;
	font-size: 4.8rem;
}
#content.toc header a.pdf {
	display: flex;
	align-items: center;
	align-self: flex-end;
}
#content.toc header a.pdf .icon {
	fill: var(--customerColor);
	margin-right: 10px;
}
#content.toc h2 {
	margin: 0;
	font-size: var(--fontSizeSmall);
	text-transform: uppercase;
	color: var(--tocPartColor);
}
#content.toc h2 .icon {
	margin: 3px 2px 0 0;
	fill: var(--tocPartColor)
}
#content.toc ul {
	margin: 0;
}
#content.toc ul ul {
	margin: 0 0 .5em 0;
	padding-left: 16px;
}
#content.toc a {
	color: var(--tocLinkColor);
}
#content.toc a:hover {
	text-decoration: underline;
}

/* frontpage */

main.frontpage h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--customerColor2);
	text-align: center;
	font-size: clamp(3rem, 2.609rem + 6.957vw, 8rem);
	font-weight: 900;
	text-transform: uppercase;
	text-shadow: 0 0 6px var(--variantColor1);
	color: var(--variantColor5);
}
main.frontpage form,
main.result.empty form {
margin-right: 1rem;
}
main.frontpage #search {
	margin: 0 auto;
	background-color: #fff;
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
	transition: background-color 0s 600000s, color 0s 600000s !important;
}
main.frontpage #search,
main.result.empty #search {
	display: flex;
	justify-content: center;
	padding: 10px 10px 10px 20px;
	border: 1px solid var(--customerColor2);
	border-radius: 50px;
	box-shadow: 0 0 3px var(--variantColor1);
}
main.frontpage #search:focus-within,
main.result.empty #search:focus-within {
	box-shadow: 0 0 5px var(--variantColor1);
}
main.frontpage #search input,
main.result.empty #search input {
	background-color: #fff;
	border: none;
	outline: none;
	font-size: 3rem;
}
main.frontpage #search button,
main.result.empty #search button {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
}
main.frontpage #search button svg,
main.result.empty #search button svg {
	fill: var(--customerColor2);
}
main.frontpage .blurb {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
main.frontpage .blurb aside {
	width: 58%;
	padding: 20px;
	background-color: var(--customerColor3);
	border-radius: 20px;
	font-size: 3rem;
	color: #fff;
	font-weight: bold;
}
#content .searchhighlight {
	position: relative;
	display: inline-block;
}
#content .searchhighlight:before {
	position: absolute;
	top: 20%;
	z-index: -1;
	left: -2px;
	content:'';
	width: calc(100% + 4px);
	height: 50%;
	background-color: var(--highlightColor);
	filter: url('#highlighter');
	transform: rotate(1.5deg);
}
#content .searchhighlight:nth-of-type(3n+1):before { transform: rotate(-0.5deg); }
#content .searchhighlight:nth-of-type(2n+2):before { transform: translateX(-2px); }
#content .searchhighlight:nth-of-type(3n+2):before { transform: rotateZ(180.5deg); }
#Xcontent .searchhighlight:after {
	content: ' ';
}
/* books */
#content.library {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(186px, 232px));
	grid-auto-rows: min-content;
	grid-gap: 30px;
}
#content.library a {
	text-decoration: none;
	color: var(--contentLinkColor);
}
#content.library a.pdf {
	display: block;
}
#content.library a.pdf label {
	cursor: pointer;
}
#content.library a.pdf:hover label {
	text-decoration: underline;
}
#content.library a.pdf .icon {
	vertical-align: bottom;
}
#content.library nav .active {
	font-weight: bold;
}
#content.library nav {
	grid-column: 1 / -1;
}
#content.library nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
#content.library nav ul li {
	width: 10vw;
	min-width: 5rem;
}
#content.library article img,
#content.library article .placeholder {
	box-shadow: 0 0 5px #00000066;
	transition: all .2s ease;
}
#content.library article .placeholder {
	width: 100%;
	height: 200px;
	background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.45 66"><title>publication</title><path d="M55.44,17s0,0,0-.05,0,0,0-.07,0,0,0-.06,0,0,0-.06,0,0,0-.06l-.06-.11,0,0,0-.06,0,0,0,0L43,.53l0,0L42.93.43l0,0a.52.52,0,0,0-.11-.1h0L42.67.22s0,0,0,0-.05,0-.1,0l0,0-.09,0h0a.19.19,0,0,0-.1,0h0a.18.18,0,0,0-.1,0H1.35A1.36,1.36,0,0,0,0,1.35v63.3A1.36,1.36,0,0,0,1.35,66H54.1a1.36,1.36,0,0,0,1.35-1.35V17.12h0v0S55.44,17,55.44,17Zm-4.09-1.11h-8l0-10.52Zm1.4,47.42H2.7V2.72H40.57l0,14.52A1.36,1.36,0,0,0,42,18.6h10.8Z"/><path d="M8.43,24.76a1.35,1.35,0,0,0,1.35,1.36h36a1.36,1.36,0,0,0,0-2.71h-36A1.35,1.35,0,0,0,8.43,24.76Z"/><path d="M9.78,17.87H33.3a1.36,1.36,0,0,0,0-2.71H9.78a1.36,1.36,0,0,0,0,2.71Z"/><path d="M9.78,34.37h36a1.36,1.36,0,0,0,0-2.71h-36a1.36,1.36,0,0,0,0,2.71Z"/><path d="M9.78,50.6h36a1.36,1.36,0,0,0,0-2.71h-36a1.36,1.36,0,0,0,0,2.71Z"/><path d="M33.3,42.62a1.36,1.36,0,0,0,0-2.71H9.78a1.36,1.36,0,0,0,0,2.71Z"/></svg>') no-repeat center center;
	background-size: 90% 90%;
}
#content.library article a:hover img,
#content.library article a:hover .placeholder { transform: scale(1.02); }
#content.library article a:hover h1 { text-decoration: underline; }
#content.library article h1 { font-size: 100%; }

/* result */
main.result.empty #search {
	margin-top: 10vh;
}
main.result.empty #search input {
	width: 100%;
}
main.result .partitle {
	margin: 20px 0 2rem;
	font-size: var(--fontSizeSmall);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tocPartColor);
}
main.result h2.in { margin-bottom: 10px; } /* ? */
main.result nav form {
	margin: 20px 0;
}
main.result nav form input {
	margin-bottom: 1em;
	padding: 5px;
	background-color: transparent;
	border: 1px solid var(--variantColor3);
	font-size: var(--fontSize);
	color: var(--variantColor2);
	outline: none;
}
main.result nav form input::placeholder {
	color: var(--variantColor4);
}
main.result nav form button {
	background: none;
	border: none;
	font-size: 0;
	color: transparent;
}
main.result nav form button .icon {
	fill: var(--customerColor);
}
main.result nav ul { margin-left: 0; }
main.result nav li input { display: none; }
main.result nav li label {
	position: relative;
	display: block;
	margin-top: 7px;
	padding-left: 20px;
	font-size: var(--fontSizeSmall);
}

main.result #content > a {
	display: flex;
	margin: 3rem 0;
	text-decoration: none;
	color: var(--contentTextColorLight);
}
main.result #content > a > .icon {
	flex-shrink: 0;
	fill: var(--contentLinkColor);
	margin: 3px 2rem 0 0;
}
main.result #content > a > article {
	flex-grow: 2;
}
main.result #content article h1 {
	display: flex;
	justify-content: space-between;
	font-size: var(--fontSize);
}
main.result #content article h1 .issue {
	display: none;
	margin: .3em 0 0 10px;
	font-size: var(--fontSizeSmall);
	color: var(--tocPartColor);
}
main.result #content a:hover h1 .title { text-decoration: underline; }
main.result #content a:hover h1 .issue { text-decoration: none; }
main.result #content article * { margin: 0; }
main.result #content article p {
	display: inline;
	font-size: var(--fontSizeSmall);
	color: var(--contentTextColorLight);
}
main.result #content article .lead {
	font-family: var(--contentText);
	font-size: unset;
	line-height: unset;
}
main.result #content article p.author { font-style: italic; }
main.result #content article p.author:before { content: ' – '; }
main.result #content article em {
	font-weight: bold;
	color: var(--contentTextColorDark);
}

main.mypage {
	& #content {
		& .whoami {
			& span {
				font-family: var(--contentSans);
				font-size: var(--fontSizeLarge);
				color: #000;
			}
		}
		& form {
			display: flex;
			flex-direction: column;
			gap: 1em;
			& label {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid var(--dividor);
				& * {
					width: 50%;
					font-size: var(--fontSize);
				}
				& input {
					border: 1px solid var(--dividor);
					border-bottom-width: 0;
					border-radius: 0;
					font-size: var(--fontSizeSmall);
				}
			}
			& button {
				width: 50%;
				margin: 0 0 0 auto;
				padding: .4em .25em .25em;
				background-color: var(--buttonBgColor);
				border: none;
				border-radius: 1em;
				text-transform: uppercase;
				font-size: var(--fontSize);
				color: var(--buttonTxtColor);
				&:hover {
					background-color: var(--buttonHoverBgColor);
				}
			}
		}
		& .message {
			font-weight: 600;
			color: #000;
			&::before {
				content: '⚠️ ';
				font-size: var(--fontSizeLarge);
			}
		}
	}
}

.paginator {
	display: flex;
	margin: 30px 0;
	padding: 10px 0;
	border: 1px solid var(--dividor);
	border-width: 1px 0;
	font-family: var(--contentSans);
}
.paginator > span {
	flex-grow: 1;
	display: flex;
	justify-content: center;
}
.paginator span a,
.paginator span span {
	display: block;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 12px;
	line-height: 1.75;
	text-align: center;
	text-decoration: none;
	color: var(--contentTextColor)
}
.paginator span.previous a {
	margin-top: 0;
	text-align: left;
	font-size: 0;
	color: transparent;
}
.paginator span.next a {
	margin-top: 0;
	text-align: right;
	font-size: 0;
	color: transparent;
}
.paginator span.previous a .icon,
.paginator span.next a .icon {
	fill: var(--contentLinkColor);
}
.paginator span a:hover {
	text-decoration: underline;
}
.paginator span.current span {
	background-color: var(--customerColor4);
	font-weight: 600;
	color: #fff;
}

/* sponsors */
main.frontpage .advertisement {
	h1 {
		margin-bottom: 1em;
		font-size: var(--fontSize);
	}
	figure {
		margin: 2em auto 0;
		text-align: center;
		img {
			max-width: 512px;
			max-height: 100px;
			filter: brightness(0) invert(1) drop-shadow(0 0 3px var(--variantColor1));
		}
	}
}
main .toc .advertisement {
	margin: 2em 20px 2em 0;
	text-align: center;
	h1 {
		margin-bottom: 1em;
		font-size: var(--fontSizeSmall);
	}
	img {
		max-width: 512px;
		max-height: 100px;
	}
}

/* animania */
.prevnext .prev:hover .icon {
  animation: bounce-l 1.5s infinite;
}
	@keyframes bounce-l {
	0%, 20%, 50%, 90%, 100% { transform: translateX(0); }
  40% { transform: translateX(3px); }
  70% { transform: translateX(2px); }
}

.prevnext .next:hover .icon {
  animation: bounce-r 1.5s infinite;
}
@keyframes bounce-r {
	0%, 20%, 50%, 90%, 100% { transform: translateX(0); }
  40% { transform: translateX(-3px); }
  70% { transform: translateX(-2px); }
}

#topmenu nav .icon:hover,
#content menu.share .icon:hover,
main.result nav form button:hover .icon {
	animation: expand 2000ms infinite;
}
@keyframes expand {
  0%, 100% { transform: scale(1); transform-origin: center; }
	50% { transform: scale(1.05); transform-origin: center; }
}
#content.library article:hover img {
	animation: expand-less 1500ms infinite;
}
@keyframes expand-less {
  0%, 100% { transform: scale(1); transform-origin: center; }
	50% { transform: scale(1.01); transform-origin: center; }
}

/*Map*/

main.map .leaflet-popup-content {
	font-size: var(--fontSizeSmall);
}
main.map .leaflet-popup-content button {
	position: relative;
	border: none;
	background-color: transparent;
	font-size: 0;
}
main.map .leaflet-popup-content button:before {
	position: absolute;
	top: -15px;
	left: 0;
	width: 20px;
	height: 20px;
	content: ' ';
	background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>') no-repeat center center;
}
main.map .leaflet-popup-content button.playing:before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>');
}
#map, #mapbox {
	width: 100vw;
	height: calc(100vh - var(--headerHeightMin) - var(--footerHeigth));
}
#content a.mappin {
	white-space: nowrap;
}
#content a.mappin .icon {
	fill: var(--customerColor4);
}
#content figcaption a.mappin .icon,
table a.mappin .icon {
	width: 17px;
	height: 17px;
}
main.map .leaflet-touch .leaflet-control-attribution {
	font-size: 1.1rem;
}
/* leaflet override */
#map.leaflet-container {
	font-family: var(--contentSans);
	font-size: var(--fontSize);
}
#map .search-input {
	min-width: 300px;
	padding: 10px 10px 10px 20px;
	border: 1px solid var(--customerColor2);
	border-radius: 50px;
	box-shadow: 0 0 3px var(--variantColor1);
	font-size: var(--fontSize);
}
#map .search-results {
	z-index: 900;
	max-height: calc(100vh - var(--headerHeightMin) - var(--footerHeigth) - 58px);
	overflow-y: auto;
}
#map + dialog {
	position: fixed;
	inset: 0;
	width: 250px;
	z-index: 666;
	min-width: 300px;
	padding: 10px;
	border: 1px solid var(--customerColor2);
	border-radius: 5px;
	box-shadow: 0 0 3px var(--variantColor1);
	font-size: var(--fontSize);
	& h3 {
		margin-bottom: .5em;
	}
	& button {
		margin-top: 10px;
		padding: 6px 20px 6px;
		border-radius: 20px;
		background-color: var(--customerColor1);
		font-size: var(--fontSizeSmall);
		font-weight: bold;
		text-transform: uppercase;
		color: var(--headerLinkColor);
	}
}

@media (max-width: 1280px) {
	#grid {
		grid-template-columns: auto;
		grid-template-areas:
			"header"
			"main"
			"footer"
		;
		grid-template-rows: var(--headerHeightMax) 1fr auto;
	}
	main {
		grid-template-columns: 22.4% 1fr 22.4%;
	}
	#grid > footer .constrainer {
		flex-wrap: wrap;
		justify-content: space-around;
		padding-top: 10px;
	}
	#content.library {
		padding: 0 10px;
	}
	#topmenu nav a {
		display: none;
	}
	#topmenu nav button.toggle-menu {
		display: unset;
	}
}
@media (max-width: 1280px) {
	body.menu #topmenu nav .navrap {
		position: absolute;
		top: calc(var(--headerHeightMax) - 3px);
		right: -15px;
		z-index: 667;
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
		justify-content: flex-end;
		align-items: center;
		width: 100vw;
		background-color: var(--variantColor4);
		transition: all .2s ease-in-out;
	}
	body.menu #topmenu nav .navrap a {
		display: inline;
	}
	body.min-header.menu #topmenu nav .navrap {
		top: var(--headerHeightMin);
	}
	#topmenu nav a.search {
		padding-right: 24px;
	}
	main {
		position: relative;
		display: block;
	}
	main nav.toc {
		position: unset;
		height: auto;
		overflow-y: initial;
		padding-top: 0;
		background-color: #fff;
	}
	main > nav.toc button.toggle-toc {
		visibility: visible;
		float: right;
		margin: 5px -10px 0 0;
		padding: 10px 15px 10px;
		background-color: #fff;
		border: none;
		border-radius: 10px;
		box-shadow: 0 0 5px var(--variantColor1);
		text-transform: uppercase;
		font-weight: 600;
		color: var(--tocLinkColor);
		transition: all .2s ease-in-out;
	}
	body.scrolled-down main > nav.toc button.toggle-toc {
		opacity: 1;
	}
	main nav.toc h2,
	main nav.toc > ul {
		display: none;
	}
	main nav.toc.open > ul {
		display: block;
		height: calc(100vh - 30px - var(--headerHeightMax));
		width: calc(100vw - 15px);
		overflow-x: visible;
		overflow-y: auto;
		margin: -15px -15px -15px -15px;
		padding: 0 10px 30px;
		background-color:#fff;
	}
	body.min-header main nav.toc.open > ul {
		height: calc(100vh - 30px - var(--headerHeightMin));
	}
	#content figure > nav {
		display: none;
	}
	#content .page-normal {
		right: -10px;
		left: unset;
	}
	#grid > footer .constrainer {
		display: block;
	}
	#grid > footer .constrainer .siteowner,
	#grid > footer .constrainer .sitedeveloper a {
		display: block;
		margin: 10px 0;
		text-align: center;
	}
}
@media (max-width: 630px) {
	#content.library {
		grid-template-columns: repeat(auto-fit, minmax(186px, 46%));
	}
}

@media (max-width: 466px) {
	#menu {
		max-height: calc(100vh - var(--headerHeightMax));
		overflow-y: auto;
	}
	body.min-header #menu {
		max-height: calc(100vh - var(--headerHeightMin));
	}
	body.menu {
		overflow-y: hidden;
	}
	#menu .constrainer > ul {
		column-count: 1;
	}
	#topmenu h1 .text {
		font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem);
	}
	main.frontpage #search {
		width: 100%;
	}
	main.frontpage #search input {
		width: calc(100% - 36px);
	}
	#content h1 {
		hyphens: auto;
		font-size: 9.33vw;
	}
	#content h2 {
		font-size: 8.33vw;
	}
	#content figure {
		width: 100% !important;
		float: unset !important;
		/* margin: 0 !important; */
	}
	#content figure:not(.textflow) > * {
		grid-column: 1 / span 8 !important;
	}
	#content figure:not(.textflow).left.w50 figcaption[class^="side-"] {
		grid-column: 1 / span 8 !important;
		grid-row: unset;
	}
}



/* site */