/*
	* * *   "Der Merker" Cascading Style Sheet   * * *

	
	S T Y L E S . C S S

	
	This file holds the basic style definitions for the "Der Merker" web site.

	It builds upon the CSS reset definitions by Eric Meyer on meyerweb.com
	(http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126).

	This file is provided "as is" without expressed or implied warranty.
	
	Last updated on: 2021.10.09

	
	Attributes:	none.

	Usage:		invoked implicitely with each page request

	Return:		none.
	
	Author:		Thomas Prochazka <thomas.prochazka@dermerker.com>
	Version:	7.401 - 2026.06.10
						blockquotes: allow singel paragraphs without author (source) information
				7.400 - 2021.10.08
						chart/SVG section: extension for 2021/2022 COVID-19 and influenza season
				7.300 - 2021.09.12
						- allow old style numbers and hyphenation
						- introduce correct quotes for English, French, German, and Italian
				7.200 - 2021.08.20
						overhaul the abbreviation settings, remove double definition
				7.100 - 2021.06.08
						add the audio media container section
				7.001 - 2021.03.03
						color adaptations in chart/SVG section
				7.000 - 2020.12.08
						add the chart/SVG section
				6.200 - 2020.10.05
						use Google font "Nunito" as first substitute for "Avenir Next"
				6.100 - 2020.08.15
						split the definition list parameterization: own styling for dialogs,
						minor adaptations for dl.legal
				5.000 - 2019.08.30
						adaptations of colors, fonts, definition lists, footnotes, etc.
				4.005 - 2019.05.01
						- set the line height for <h2> to 1.6 (was: 1.4)
						- set the text alignment for unordered lists to "justify" (was: left).
				4.004 - 2019.03.24
						- limit 'Cormorant Garamond' font weights to 500 and 700
						- increase footer size to 80rem (was: 68rem)
						- increase footer paragraph size to 0.9rem (was: 0.8rem)
						- lighter colors for the table of content entries
				4.003 - 2019.01.07
						- minimize the vertical top padding for dialog titles
						- dialog definition list titles: correct the line height
						- rework the colors (darken paragrahs, lighter colors for headings and 
						  footnotes/endnotes)
				4.002 - 2018.07.22
						- new section for left-floated images
						- new link settings for footnotes
						- numbered list for styled footnotes/endnotes
				4.001 - 2018.03.24
						- unordered lists: less vertical space between the items (was: 1.125rem)
						- figure caption: change color to #252627 (was: #535859)
						- card location and date/time: change color to #535859 (was: #787c7f)
				4.000 - 2018.02.18
						- add media query for retina sprite image
						- update masthead branding, home icon, and <h2> definition
						  for the new sprite image
						- update footer branding and <h2> definition for the new 
						  sprite image
				3.000 - 2017.11.11
						- left-align the text on small devices (less than 720px)
						- darken the theme colors due to user requests
						- adapt the image credit link colors
						- no top margin for the first <h2> element in teasers
						  ("hero copy")
				2.000 - 2017.10.14
						increase all fonts by 0.2rem
				1.000 - 2017.10.01
						initial version
*/


/* 			_________________________
			THE BASIC DEFINITIONS
			These settings shall help to spare us surprises because of
			the various browser settings									*/

html, body, div, span, 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;
	border: 0;
	padding: 0;
	outline: 0;
	font-size: 100%;
	font-weight: inherit;
	vertical-align: baseline;
	background: transparent;
	}

/*	basic html settings														*/
html {
	font-family: "Avenir Next", Nunito, Helvetica, sans-serif;
	font-size: 10px;
	/* 	apply a natural box layout model to all elements but allow
		components to change												*/
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow-y: scroll;
	}

/*	the detailed body settings												*/
body {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.6;
	quotes: "\00BB\202F" "\202F\00AB" "\203A\202F" "\202F\2039";
	}
@media (min-width: 768px) {
body {
	font-size: 1.6rem;
	}
}

/*	for box sizing, use the border-box approach								*/
*, *::after, *::before {
	box-sizing: border-box;
	}

/*	HTML5 display-role reset for older browsers								*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	}

/*	always go for the maximum width											*/
img, object, embed {
    max-width: 100%;
	}

/*	no display of hidden text ;-)											*/
[hidden] {
    display: none;
	}

/*	font-variant and default hyphenation for the text copy					*/
p, li, dt, dd {
	font-variant-numeric: oldstyle-nums;
	font-weight: 400;
	-webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;   
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;  
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;   
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;   
    hyphenate-limit-zone: 8%;
	}

/*	the basic text color													*/
html, button, input, select, textarea {
	color: #000;
	}

/*	the horizontal line settings											*/
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
	}

/*			no default styles for numbered and unnumbered lists				*/
ol, ul {
	list-style: none;
	margin: 0 0 1rem 0;
	}

/*			blockquote default settings: no quotes per default				*/
blockquote {
	quotes: none;
	}
blockquote::before, blockquote::after {
	content: none;
	}

/*			basic image settings											*/
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
	}

/*	button-like appearance for webkit browsers								*/ 			
button, input[type="button"], input[type="submit"] {
	-webkit-appearance: button;
	}

/*			text selections (e.g., with the mouse) - for Mozilla...			*/
::-moz-selection {
	background: #ddd;
	color: #000;
	text-shadow: none;
	}
/*			...and others...												*/
/* alistapart.com */
::selection {
	background: #ddd;
	color: #000;
	text-shadow: none;
	}
/*			...and images													*/
img::selection {
	background: transparent;
	}

b, strong {
    font-weight: 600;
	}

i, em {
	font-style: italic;
	}

dfn {
    font-style: italic
	}

/*	inserted text															*/
ins {
	background: #ff9;
	color: #000;
	text-decoration: none;
	}
			
/*	deleted text															*/
del {
	text-decoration: line-through;
	}
			
/*	marked text (for highlighting, etc.)									*/
mark {
	background: #ff0;
	color: #000;
	font-style: italic;
	font-weight: 600;
	}

/*	fixed-width fonts for code snippets etc.								*/
pre, code, kbd, samp {
	font-family: "Courier New", Monospace;
	font-size: 1em;
	}

/*	additional settings for preformatted text								*/
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word
	}

/*	small text																*/
small {
	font-size: 85%;
	}

/*			superscript and subscript settings								*/
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	}
/*	superscript position													*/		
sup {
	top: -0.5rem;
	}
/*	subscript position														*/
sub {
	bottom: -0.25rem;
	}

/*			settings for abbreviations										*/
abbr, .abbr {
	font-style: normal;
	font-variant-caps: all-small-caps;
	font-variant-numeric: lining-nums;
	letter-spacing: 0.05rem;
  	}

/*			the default table settings										*/
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

/*			no borders for linked images									*/
a img {
	border: none;
	}

/* ---  @@@ end of "reset.css"  --- */



/* 			__________________________
			C O N T A I N E R S   A N D   R O W S
			This section holds all container and row definitions 
			(derived from the Bootstrap CSS modules, see 
			https://getbootstrap.com										*/

/*	the container settings													*/
.container {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	}
@media (min-width: 1240px) {
.container {
	max-width: 1240px;
	}
}

/*	the row settings														*/
.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
	}

/*	the column settings														*/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, 
.col-10, .col-11, .col-12, .col, .col-auto, 
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, 
.col-sm, .col-sm-auto, 
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, 
.col-md, .col-md-auto,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, 
.col-lg, .col-lg-auto,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, 
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, 
.col-xl, .col-xl-auto {
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
	width: 100%;
	}
.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
	}
.col-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	}
.col-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
	}
.col-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
	}
.col-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
	}
.col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
	}
.col-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
	}
.col-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	}
.col-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
	}
.col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;	
	}
.col-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
	}
.col-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
	}
.col-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
	}
.col-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	}
@media (min-width: 576px) {
.col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
	}
.col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
	}
.col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
	}
.col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
	}
.col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
	}
.col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
	}
.col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
	}
.col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
	}
.col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
	}
.col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
	}
.col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
	}
.col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
	}
.col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
	}
.col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
	}
}
@media (min-width: 768px) {
.col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
	}
.col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
	}
.col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
	}
.col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
	}
.col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
	}
.col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
	}
.col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
	}
.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
	}  
.col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
	}
.col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
	}
.col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
	}
.col-md-10 {
	-ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
	}
.col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
	}
.col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
	}
}



/* ---  @@@ end of container/columns  --- *?



/* 			__________________________
			T H E   I C O N S
			This section holds all icon definitions (sprites, etc.)			*/

/*	general icon settings													*/
.icon {
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
	font-style: normal;
	}

/*	use the sprite image													*/
.sprite-icon {
	background-image: url(/css/images/sprite-250x250-20180106.png);
	}

@media	(-webkit-min-device-pixel-ratio: 2),
	and (   min--moz-device-pixel-ratio: 2),
	and (     -o-min-device-pixel-ratio: 2/1),
	and (        min-device-pixel-ratio: 2),
	and (                min-resolution: 192dpi),
	and (                min-resolution: 2dppx) {
/*	double density sprites for retina displays								*/
.sprite-icon {
	background-image: url(/css/images/sprite-250x250-20180106@2.png);
	background-size: 250px auto;
	}
}

/*	override the font-awesome settings: make the font 25 % larger relative 
	to the icon container (and substitute the "em" with "rem" units)		*/
 .fa-lg {
	font-size: 1.4rem;
	line-height: 1.0;
	vertical-align: -5%;
	}


/* 			__________________________
			T H E   B U T T O N S
			This section holds all button definitions						*/

/*	the button settings (rounded corners, font weight, color, etc.)			*/
.button {
	background-color: #fff;
	border: 1px solid #e2e5e8;
	border-radius: 3px;
	color: #000;
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.048rem;
	line-height: 13px;
	margin: 0 5px;
	padding: 7px 10px 6px;
	text-transform: uppercase;
	transition: background-color 0.5s ease-in-out;
	}

/*	remove the blue outline on Chrome buttons with focus					*/
button:focus {
	outline: none;
	}

/*	extra margins for buttons in button groups								*/	
.button-group .button {
	margin-left: 3px;
	margin-right: 3px;
	}


/* 			__________________________
			T H E   H E A D I N G S
			This section holds all heading definitions						*/

/*	the main heading (for articles and the like) -- one per page			*/
h1 {
	color: #c19b51; /* 2020.10.04 -- #be9b58; */
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	line-height: 1.4;
	margin-bottom: 1rem;
	text-transform: uppercase;
	}
@media (min-width: 576px) {
/*	the main heading (for medium screens)									*/
h1 {
	font-size: 3.6rem;
	}
}
@media (min-width: 768px) {
/*	the main heading (for medium screens)									*/
h1 {
	margin-bottom: 2rem;
	}
}
@media only screen and (min-width: 992px) {
/*	the main heading (for large screens)									*/
h1 {
	font-size: 5rem;
	}
}


/*	the sub-headings														*/
h2 {
	color: #9ca1a5;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.167rem;
	margin: 2.24rem 0 2.24rem;
	text-transform: uppercase;
	width: 85%;
	}
@media (min-width: 768px) {
/*	more white-space on the top on larger screens							*/
h2 {
	font-size: 1.6rem;
	margin-top: 4.48rem;
	}
}

/*	adapt the letter spacing for italic/emphazised elements					*/
h2 em {
	letter-spacing: 0.2rem;
}

/*	the sub-sub-headings													*/
h3 {
	color: #252627;
	font-weight: 600;
	line-height: 1.3;
	margin: 2.4rem 0;
	text-transform: uppercase;
	}


/*	the date and venue information											*/
h4 {
	color: #252627;
	font-size: 1.2rem;
	font-variant-numeric: oldstyle-nums;
	font-weight: 600;
	letter-spacing: 0.048rem;
	margin-bottom: 0.24rem;
	}
@media (min-width: 576px) {
h4 {
	font-size: 1.6rem;
	line-height: 1.4;
	}
}

/*	display the date information											*/
h4 span::before {
	color: #b4b9be;
	content: "|";
	display: inline;
	font-weight: initial;
	padding-left: 0.5rem;
	padding-right: 0.6rem;
	}

/*	the author information													*/
h5 {
	color: #787c7f;
	font-size: 1.2rem;
	font-style: italic;
	letter-spacing: 0.05rem;
	}
@media (min-width: 576px) {
/*	the author information													*/
h5 {
	font-size: 1.4rem;
	}
}

/*	the section headings													*/
h6 {
	color: #252627;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.2rem;
	line-height: 1.5;
	margin: 2rem 0 1rem;
	text-transform: uppercase;
	}
@media (min-width: 576px) {
h6 {
	font-size: 1.4rem;
	margin-bottom: 2rem;
	}
}

/*	the sub-section headings go into the <span> element...					*/
h6 span {
	vertical-align: baseline;
	text-transform: initial;
	letter-spacing: 0.05rem;
	}

/*	... and will be separated by a vertical divider							*/
h6 span:before {
	color: #b4b9be;
	content: "| ";
	padding-left: 0.1rem;
	}



/* 			__________________________
			T H E   L I N K S
			What would the web be without them?
			(Specify the pseudo classes in the following order: :link, 
			:visited, hover, and :active.)									*/

a {
	text-decoration: none;
	}

/*	the footnote/endnote back link settings. Use the following snippet for 
	the return link:
		<a class="footnoteBackLink"  title="Zur�ck zur Fu�note X im Text" 
		   href="#fnrX-yyyymmdd">&#x21a9;</a>
	and in the text itself: 
		<sup id="fnrX-yyyymmdd><a href="#fnX-yyyymmdd">X</a></sup>			*/
a.footnoteBackLink {
	border: 0;
	font-size: 1.0rem;
	line-height: 0;
	padding: 0 4px;
	vertical-align: 0.1rem;
	}
	
a:link,
a.footnoteBackLink {
	color: #c19b51; /* 2020.10.04 -- #be9b58; */
	}

a:visited {
	color:#b29152;
	}

a:hover,
a:active {
	color: #a00;
	}
	
/*	some visual indicators for an active footnote/endnot back link			*/
a.footnoteBackLink:hover,
a.footnoteBackLink:active {
	background-color: #f2f4f6;
	border-radius: 1px;
	color: #a00;
	}

/*	allow slightly more horizontal space for footnote/endnote links			*/
sup a {
	font-weight: 600;
	padding: 0 0.3rem 0;
	text-decoration: underline;
	}
	
h1 a:link,
h1 a:visited {
	color: #fff;
	font-weight: 600;
	}

h1 a:hover,
h1 a:active {
	color: #a00;
	font-weight: 600;
	}

/*	the link button overrides the general button settings (see below)		*/
.link-button {
	height: 29px;
	}

/*	the default color settings												*/
.link-button:link,
.link-button:visited {
	background-color: #b9a37f;
	border: 1px solid #b9a37f;
	color: #fff;
	margin: 0;
	}
		
/*	the pressed and active state link button color settings					*/
.link-button:hover,
.link-button:active,
.link-button:focus {
	background-color: #ddc59d;
	border-color: #ddc59d;
	color: #fff;
	margin: 0;
	}



/* 			__________________________
			M I S C E L L A N E O U S
			All miscellaneous definitions go here							*/

/*	the default paragraph (w/ left-aligned text on small screens)			*/
p {
	font-weight: 400;
	margin-bottom: 2.4rem;
	text-align: left;
	}

/*	a visual divider to separate different sections of concern. This			
	technique will also used at the beginning of the "footnotes" section	*/
.visual-divider::after,
.visual-divider-before::before,
ol.footnotes::before {
	content: "\25A0";
	color: #c19b51; /* 2020.10.04 -- #be9b58; */
	display: block;
	font-size: 2.4rem;
	margin: 2.6rem auto;
	text-align: center;
	}

/*	... if anchored to the following paragraph, increase the top margin		*/
.visual-divider-before::before {
	margin-top: 4.5rem;
	}

/*	the processing time information (display "invisible" in the page 
	footer, readable only by selecting the value)							*/
.processing-time {
	background-color: #252627;
	color: #252627;
	font-size: 1rem;
	margin: 0;
	padding: 0 1rem;
	width: 100%;
	}

/*	the block quote settings												*/
blockquote {
	background: url("/css/images/css-blockquote-left-20x20-20170724.png") 0 0 no-repeat;
	/* margin: 2.4rem 0; @@@proc@@@ */
	margin-top: 2.4rem;
	margin-bottom: 2.4rem; /* @@@proc@@@ */
	padding-left: 3rem;
	}
@media (min-width: 576px) {
blockquote {
	margin: 3.6rem 2.4rem; /* 4rem 2rem; @@@proc@@@ */
	width: 83.5%;
	}
}
@media (min-width: 768px) {
blockquote {
	background: url("/css/images/css-blockquote-left-30x30-20170724.png") 2rem 0rem no-repeat;
	max-width: 68rem;
	padding-left: 6rem;
	}
}
@media (min-width: 992px) {
blockquote {
	background: url("/css/images/css-blockquote-left-30x30-20170724.png") 0 0 no-repeat;
	float: left;
	margin-left: -8rem;
	margin-top: 0rem;
	margin-bottom: 1.8rem; /* @@@proc@@@ */
	max-width: 42rem;
	padding-left: 3.6rem; /* 4rem; @@@proc@@@ */
	padding-right: 3.6rem; /* 4rem; @@@proc@@@ */
	}
}
@media (min-width: 1240px) {
blockquote {
	margin-left: -16rem;
	max-width: 48rem;
	}
}

/*	the block quote paragraphs												*/
blockquote p {
	color: #9ca1a5;
	font-size: 2rem;
	font-style: italic;
	hyphens: none; /* @@@proc@@@ */
	letter-spacing: 0.05rem;
	line-height: 1.2;
	margin: 0; /* @@@proc@@@ */
	text-align: left;
}
@media (min-width: 768px) {
blockquote p {
	font-size: 2.4rem;
	}
}
@media (min-width: 992px) {
blockquote p {
	font-size: 2.8rem;
	text-align: right;
	}
}

/* @@@proc@@@ */
blockquote p + p {
	margin-top: 1.2rem;
}

/*	the block quote's source (usually the author's name) goes 
	in the last paragraph; -- but only if there are multiple				*/
blockquote p + p:last-child {
	color: #535859;
	font-size: 1.6rem;
	/* margin: -1rem 0 0; @@@proc@@@ */
	text-align: right;
	}
@media (min-width: 768px) {
blockquote p + p:last-child {
	font-size: 2rem;
	}
}

/*	some fancy typography before the quote source							*/
blockquote p + p:last-child::before {
	content: "\2014\00a0";
	}

/*	language-dependent quotes for German, English, French, and Italian.
	The first two definitions are for the outer, the next two for the inner
	quotations. Depending on the language, there will also be narrow 
	no-break spaces ('#8239' or '\202F').
	Together with the q::before and q::after definitions the respective 
	quote character ('open' or 'close') will be determined.
	Usgae: <q lang="en">Lorem ipsum dolor sit amet</q>						*/
q, q[lang="de"] {
	quotes: "\00BB\202F" "\202F\00AB" "\203A\202F" "\202F\2039";
	}
q[lang="en"] {
	quotes: "\201C" "\201D" "\2018" "\2019";
	}
q[lang="fr"], q[lang="it"], q[lang="ru"] {
	quotes: "\00AB\202F" "\202F\00BB" "\2039\202F" "\202F\203A";
	}
q::before { 
    content: open-quote;
}
q::after { 
    content: close-quote;
}

/*	the left-floated picture settings										*/
.float-left img {
	float: left;
	margin: 0 2.25rem 0 0;
	}

/*	*/
.float-left figcaption p {
	max-width: 48rem;
	text-align: left;
	}

/*	class for right alignment of objects									*/
.align-right {
	float: right;
	}

/*	the alert box settings (currently only used for the login form)			*/
.alert {
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
	border-radius: 3px;
	color: #c09853;
	font-size: 1.2rem;
	margin: 1.125rem 0;
	padding: 8px 35px 8px 14px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	}

/*	visually hide a class (but make it available, e.g., to screen readers	*/
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	}



/* 			__________________________
			T H E   L I S T   S E T T I N G S
			for ordered and unordered lists as used in articles,
			endnotes (footnotes), etc.										*/

/*	lists are usually tied to the paragraph before. Thus, we set 
	the top margin to only the half of a paragraph margin. (Since the 
	paragraph is set with a bottom margin of 2.24rem, we need to declare 
	a negative top margin here.)											*/
ol, 
ul {
margin: -1.2rem 0 2.4rem 3rem;
	}
@media only screen and (min-width: 768px) {
/*	adjust settings for larger screens										*/
ol, 
ul {
	margin-left: 4rem;
	}
}

/*	reset the counter for ordered lists										*/
ol {
	counter-reset: li;	/* initiate the counter								*/
	}
	
/*	some intendation and (less) vertical space for the list items			*/
ol li, 
ul li {
	margin: 0 0 1.2rem 0;
	}
@media only screen and (min-width: 768px) {
/*	adjust settings for larger screens										*/
ol li,
ul li {
	margin: 0 0 1.2rem 0;
	}
}

/*	the ordered list item number settings									*/
ol li::before,
ol.footnotes li::before {
	color: #c19b51; /* 2020.10.04 -- #be9b58; */
	content: counter(li);	/* use the counter as content					*/
	counter-increment: li;	/* increment the counter by 1					*/
	font-weight: 600;
	margin: 0 0 0 -3rem;
	position: absolute;
	}

/*	the unordered list item bullet settings									*/
ul li::before {
	color: #c19b51; /* 2020.10.04 -- #be9b58; */
	content: "\25A0";
	font-size: 2rem;
	margin-left: -3rem;
	margin-top: -0.4rem;
	position: absolute;
	}
	
@media (min-width: 768px) {
/*	adjust the list item or number for larger screens						*/
ol li::before, ol.footnotes li::before, ul li::before {
	margin-left: -3.6rem;
	}
}



/*	E N D N O T E   ( F O O T N O T E )   S E T T I N G S					*/
/*	smaller text with lighter color for endnotes (footnotes)				*/
ol.footnotes li {
/*	color: #787c7f; */
	color: #535859;
	font-size: 1.2rem;
	}
@media (min-width: 768px) {
/*	adjust the text alignment for larger screens							*/
ol.footnotes li {
	font-size: 1.4rem;
	}
}

/*	smaller counter numbers for the footnote								*/
ol.footnotes li::before {
	color: #9ca1a5;
	font-size: 1.0rem;
	margin-top: 0.48rem;
	font-weight: 600;
}



/* 			__________________________
			T H E   D E F I N I T I O N   L I S T   S E T T I N G S
			Mainly used for interviews and dialogs							*/

/*	the overall definition list settinga									*/
dl {
	margin-bottom: 2.4rem;
	}

/*	a smaller font for the title but with lighter color (and floated left)	*/
dt {
	font-style: italic;
	margin-bottom: 1.2rem;
	text-align: left;
	}

/*	allow some vertical space before the next definition list title
	for easier reading/scanning												*/
dd + dt {
	margin-top: 2.4rem;
}
	
/*	the definition list item's body copy settings with some left margin		*/
dd {
	margin-bottom: 0.6rem;
	text-align: left;
	}

/*	for dialogs, use a smaller font for the title but set it uppercase
	and with a lighter color												*/
dl.dialog dt {
	color: #787c7f;
	font-size: 1.2rem;
	font-style: normal;
	letter-spacing: 0.1rem;
	margin: 0 0 0 2rem;  /* 20200815 */
	padding-top: 0.28rem;
	text-indent: -2rem; /* 20200815 */
	text-transform: uppercase;
	}
@media (min-width: 768px) {
dl.dialog dt {
	font-size: 1.4rem;
	margin-left: 3rem; /* 20200815 */
	text-indent: -3rem; /* 20200815 */
	}
}

/*	intendation for the body dialog text									*/
dl.dialog dd {
	margin-left: 2rem;
	}
@media (min-width: 768px) {
/*	extend the left margin for medium and large screens						*/
dl.dialog dd {
	margin-left: 3rem; /* 20200815 */
	}
}

dl.dialog dt em {
	font-size: 1.4rem;
	letter-spacing: 0.05rem;
	text-transform: none;
	}
@media (min-width: 768px) {
dl.dialog dt em {
	font-size: initial;
	}
}
	
/*	lighter color for emphasized text										*/
dl.dialog dd em {
	color: #787c7f;
	}

/* 			__________________________
			T H E   M E D I A   C O N T A I N E R   S E T T I N G S
			These settings control the appearance of audio and video 
			media files														*/

/*	allow sufficient space around each media container						*/
.media-container {
	margin: 2.4rem 0;
	width: 100%;
}
@media (min-width: 768px) {
.media-container {
	margin: 4rem 0;
	}
}

/*	the media description													*/
.media-container p {
	color: #252627; /* force the color also within <a> elements */
	font-size: 1.2rem;
	margin-bottom: 0;
	margin-top: 1.2rem;
	}
@media (min-width: 576px) {
.media-container p {
	width: 75%;
	}
}
@media (min-width: 768px) {
.media-container p {
	margin-top: 2.4rem;
	}
}
@media (min-width: 1240px) {
.media-container p {
	margin-left: 0;
	}
}

/*	the audio tag appearance												*/
audio { 
	height: 3rem;
	width: 100%;
	}


/* 			__________________________
			T H E   O V E R V I E W   P A G E   S E T T I N G S
			These settings treat the landing page and the section pages 
			as one big flex-box container (thank you, IE!)					*/

/*	in order to make the flex-boxes work in Internet Explorer, we need
	to treat the entire page as one big flex container						*/
.landing-page,
.sections-page {
	display: flex;
	flex-direction: column;
	}

/*	the main container on the landing and the sections pages is a flex item	*/
.landing-page main,
.sections-page main {
	flex: 1 0 auto;
	/*	correct the jumbotron image top margin								*/
	margin-top: 0.8rem;
	width: 100%;
	}



/* 			__________________________
			T H E   M A S T H E A D
			These settings shall help to spare us surprises because of
			the various browser settings									*/

/*	the masthead															*/
.masthead {
	background-color: rgba(255,255,255,1.0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	left: 0;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	}	

/*	the masthead cap holds the quick navigation, search function, 
	user tools, and the mobile and article branding							*/
.masthead-cap {
	position: relative;
	max-width: 1200px;
	min-height: 48px; 
	margin: 0 auto;
	padding-top: 11px;
	border-bottom: 1px solid #e2e5e8;
	}

/*	the quick navigation section											*/
.masthead .quick-navigation {
	float: left;
	margin-left: 1.5rem;
	}
@media only screen and (min-width: 992px) {
/*	hide the quick navigation section on medium and larger screens			*/
.masthead .quick-navigation {
	display: none;
	}
}

/*	the masthead sections button 											*/
.masthead .quick-navigation .sections-button {
	display: inline-block;
	font-weight: 600;
	height: 29px;
	}

/*	no quick navigation buttons on small screens							*/
.masthead .quick-navigation .home-button,
.masthead .quick-navigation .search-button {	
	display: none;
	}
@media (min-width: 576px) {
/*	the quick navigation button settings for medium and large screens		*/
.masthead .quick-navigation .home-button,
.masthead .quick-navigation .search-button {	
	background-color: transparent;
	border: 1px solid transparent;
	display: inline-block;
	font-weight: 600;
	height: 29px;
	}	
}

/*	the user tool search button -- show on small screens					*/
.masthead .user-tools .search-button {	
	background-color: transparent;
	border: 1px solid transparent;
	display: inline-block;
	font-weight: 600;
	height: 29px;
	margin-top: 0.3rem;
	}
	
/*	width and height for the section button icons							*/
.icon {	
	height: 16px;
	margin-top: 0px;		
	width: 16px;
	}

/*	the button text settings -- hide on small screens						*/
.button-text {
	border: 0;
	clip: rect(0 0 0 0);
	font-family: "Avenir Next", Nunito, Helvetica, sans-serif;
	height: 1px;
	margin: -2px -1px -1px; /* 20171106/proc -- margin: 0; */
	margin-left: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	}
@media only screen and (min-width: 768px) {
/*	the button text settings - show on medium and large screens				*/
.button-text {
	clip: auto;
	height: auto;
	margin-left: 7px;
	overflow: visible;
	position: static;
	width: auto;
	}
}

/*	display button text as inline-block										*/
.button .button-text {
	display: inline-block;
	vertical-align: middle;
}
	
/*	the home icon															*/
.masthead .quick-navigation .home-button .icon {
	background-repeat: no-repeat;
	background-position: 0px -18px;
}

/*	the search icon															*/
.masthead .quick-navigation .search-button .icon,
.masthead .user-tools .search-button .icon {
		background-repeat: no-repeat;
		background-position: 0 -32px;
}

/*	the user tools section (subscription, login, search, etc.)				*/
.masthead .user-tools {
	float: right;
}

/*	user settings button w/o frame -- all on landing page, all except 
	the sections button on any other page									*/
.landing-page .masthead .quick-navigation .sections-button,
.masthead .quick-navigation .search-button {
	background-color: transparent;
	border: 1px solid transparent;
	color: #000;
	font-weight: 600;
	height: 29px;
	padding-bottom: 3px;
	}

/*	the hover effect for the quick navigation, the search 
	and the user settings buttons											*/
.masthead .quick-navigation .sections-button:hover,
.masthead .quick-navigation .home-button:hover,
.masthead .quick-navigation .search-button:hover,
.masthead .user-tools .search-button:hover {
	background-color: #f2f4f6;
	}

/*	the masthead and the footer branding (the text will be displayed 
	outside the visual canvas)												*/
.masthead-branding-small h2,
.global-footer h2 {
	font-size: 1px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	text-indent: -9999px;
	width: 120px;
	}

@media (min-width: 992px) {
/*	display the small branding for all pages (and screen sizes)
	with the exception of the landing page									*/
.masthead-branding-small {
	display: inherit;
	float: left; /* @@@ 20180106 @@@ */
	margin-left: 0.5rem; /* @@@ 20180106 @@@ */
	}
}

/*	the branding/logo position in the sprite-icon							*/
.masthead-cap .branding {
	background-repeat: no-repeat;
	background-position: 0 -32px;
	height: 28px;
	width: 120px;
	}

/*	treat the branding as block item										*/	
h2 a i {
	display: block;
	}



/* 			__________________________
			T H E   F L Y O U T   P A N E L
			This section contains the definitions for the site search forms	*/ 

/*	the masthead flyout panel; - to be used e.g., for the site search.
	It will cover the entire screen, thus directing the user's focus 
	on the task at hand.													*/
.masthead .flyout-panel {
	background-color: rgba(255, 255, 255, 0.95);
	display: none;
	height: 100%;
	position: fixed;
	top: 45px;
	width: 100%;
	z-index: 10000;
	}

/*	the flyout panel close button is entirely made with CSS					*/
.flyout-panel .close-button {
	background-clip: padding-box;
	background-color: #ccc;
	border: none;
	border-radius: 50%;
	display: block;
	float: right;
	height: 20px;
	margin: 9px 15px 0 0;
	padding: 0;
	position: relative;
	transition: background-color 0.5s ease-in-out;
	width: 20px;
}

/*	a horizontal white bar to be reused for the "x"...						*/
.masthead .flyout-panel .close-button .icon:before,
.masthead .flyout-panel .close-button .icon:after {
	background-color: #fff;
	content: '';
	display: block;
	height: 2px;
	left: 5px;
	position: absolute;
	top: 9px;
	width: 10px;
	}
/*	...rotated by 45 and 135 degrees										*/
.masthead .flyout-panel .close-button .icon:before {
	transform: rotate(45deg);
	}
.masthead .flyout-panel .close-button .icon:after {
	transform: rotate(135deg);
	}

/*	this class displays the flyout panel									*/
.masthead .flyout-panel-active {
	display: block;
	}



/* 			__________________________
			T H E   S E A R C H   F O R M   D E F I N I T I O N S
			This section contains the definitions for the site search form	*/ 

/*	the search panel														*/
.masthead .search-panel {
	background-color: #fff;
	border-bottom: 1px solid #e2e5e8;
	border-top: 1px solid #e2e5e8;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
	display: block;
	height: 110px;
	}

/*	the search form appearance (for small and medium screens)				*/
.masthead .search-panel .search-form {
	margin: 30px 0;
	margin-left: calc(20px + 180*(100vw - 400px)/(800 - 400));
	margin-right: calc(20px + 180*(100vw - 400px)/(800 - 400));
	padding: 10px;
	text-align: center;
	}
@media (min-width: 768px) {
/*	the search form appearance for large screens							*/
.masthead .search-panel .search-form {
	margin-left: auto;
	margin-right: auto;
	max-width: 50%;
	}
}

/*	don't display the search field label in the masthead search panel		*/
.masthead .search-panel .search-form label,
.search-page .search-form label {
 	display: none;
	}

/*	the search form input field parameters									*/
.masthead .search-panel .search-form input,
.search-page .search-form input {
	background: transparent;
	border: 1px solid #e2e5e8;
	border-radius: 3px;
	color: #252627;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	height: 30px;
	letter-spacing: 0.05rem;
	margin: 0 5px;
	padding: 4px 10px 5px;
	width: 170px;
	}
@media only screen and (min-width: 720px) and (max-width: 1200px) {
/*	the search input field width (for medium screens)						*/
.masthead .search-panel .search-form input {
	width: calc(170px + 290*(100vw - 720px)/(1200 - 720));
	}
}
@media only screen and (min-width: 1200px) {
/*	the maximum search input field witdh (for large screens)				*/
.masthead .search-panel .search-form input {
	width: 460px;
	}
}

/*	indicate the active input field											*/
.masthead .search-panel .search-form input: active,
.masthead .search-panel .search-form input: focus,
.search-page .search-form input: active,
.search-page  .search-form input: focus {
	border: 1px solid #c19b51; /* 2020.10.04 -- #be9b58; */
	}

/*	the search input field placeholder settings								*/
.masthead .search-panel .search-form input::placeholder {
	color: #787c7f;
	}

/*	the settings for the search page form									*/
.search-form {
	border-bottom: 1px solid #252627;
	border-top: 1px solid #e2e5e8;
	margin: 2rem auto 3rem;
	padding: 2rem 0.5rem;
	text-align: center;
	width: 100%;
}
@media (min-width: 576px) {
/*	only display the label on medium and large screens						*/
.search-page .search-form label {
	color: #787c7f;
	font-size: 14px;
	font-weight: 400;
	display: inline-block;
	margin-right: 2rem;
	}
}

@media only screen and (min-width: 560px) {
/*	only display the label on medium and large screens						*/
.entry .search-form input {
	width: 300px;
	}
}

/*	display search results centered											*/
.search-page .search-form + p {
	margin: 3.6rem 0;
	text-align: center;
}



/* 			__________________________
			T H E   S E C T I O N   N A V I G A T I O N
			This section contains the definitions for the section
			navigation as seen on the landing page and the section pages	*/

/*	the section ("mini") navigation	container is only displayed 
	on larger screens														*/
.mini-navigation {
	display: none;
	}
@media (min-width: 992px) {
/*	the section ("mini") navigation	container								*/
.mini-navigation {
	display: inherit;
	float: left;
	padding-top: 3px;
	}
}

/*	the section ("mini") navigation	unordered list							*/
.mini-navigation ul {
	margin: 0;
	}

/*	the section navigation menu												*/
.mini-navigation .mini-navigation-menu {
	margin-bottom: 0;
	padding: 3px 0;
	text-align: center;
	white-space: nowrap;
	}

/*	the menu items															*/
.mini-navigation .mini-navigation-menu li {
	color: #000;
	display: inline-block;
	font-size: 12px;
	font-style: normal;
	font-variant-numeric: lining-nums;
	font-weight: 600;
	-webkit-hyphens: auto;
	letter-spacing: 0.1rem;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
	vertical-align: top;
	}

/*	omit the list-item indicator for the navigation menu					*/
.mini-navigation .mini-navigation-menu li::before {
	display: none;
}

/*	the menu navigation links												*/
.mini-navigation .mini-navigation-menu li a {
	color: #000;
	display: inline-block;
	font-weight: 600;
	margin: 5px 2px 3px 0;
	padding: 0 12px;
	}


	
/* 			__________________________
			T H E   F L Y O U T   N A V I G A T I O N
			This section contains the definitions for the flyout navigation
			sections. It will mainly be used on small screens (e.g., for 
			mobiles and tablets).											*/

/*	the flyout navigation container											*/
.navigation {
    background-color: #fff;
    border-right: 1px solid #ccc;
	box-shadow: 4px 0 6px 1px rgba(0,0,0,0.1);
    display: block;
    height: 100%;
    left: -250px;
	padding: 4px 10px 0;
    position: fixed;
    top: 0;
    width: 230px;
	z-index: 9999;
	}
@media (min-width: 992px) {
/* adjust the top padding for larger screens								*/
.navigation {
	padding-top: 29px;
	}
}

/*	some mark-up for separating the different sections						*/
.navigation ul {
	margin: 0;
	padding: 1rem 0;
    border-bottom: 1px solid #e2e5e8;
}

/*	no old-style (hanging) numbers, no hyphenation for navigation items		*/
.navigation li {
	font-variant-numeric: lining-nums;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	}

/*	no list-item indicator for the navigation list							*/
.navigation li::before {
	display: none;
	}

/*	the link settings														*/
.navigation li a {
	color: #000;
	cursor: pointer;
	display: block;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1rem;
	line-height: 1.2;
    padding: 4px 21px 4px 12px;
	text-transform: uppercase;
	}
	
.navigation li a:hover,
.navigation li a:active,
.navigation li a:focus {
	border-radius: 4px;
	background-color: #c19b51; /* 2020.10.04 -- #be9b58; */
	color: #fff;
	transition: background-color 0.5s ease-in-out;
	}

/*	the active nagivation class (with a nice slide-in effect)				*/
.navigation-active {
	transition: all 0.5s ease-in-out;
	transform: translateX(250px);
	}



/* 			__________________________
			T H E   M A I N   S E C T I O N
			This section contains the definitions for the various page main 
			sections: the landing page, the section pages, the news entries, 
			and the special pages (e.g., for search results or projects)	*/ 

/*	the main section container												*/
main {
	margin-bottom: 9rem;
	margin-top: 4.8rem;
	}



/* 			__________________________
			T H E   E N T R Y   D E F I N I T I O N S
			This section contains the definitions for the news entries.		*/ 

/*	the article needs to span the entire width (required for Firefox)		*/
article {
	width: initial;
	}

/*	the article ("entry")													*/
.entry {
	margin: 4.8rem auto 9rem;
	max-width: 120rem;
	}

/*	the entry header section settings										*/
.entry-header {
	margin: 6rem 2rem 4rem;
	text-align: center;
	width: inherit;
	}
@media (min-width: 576px) {
.entry-header {
	margin-left: 4rem;
	text-align: left;
	width: 83.5%;
	}
}
@media (min-width: 768px) {
.entry-header {
	margin-top: 8rem;
	margin-bottom: 6rem;
	}
}
@media (min-width: 992px) {
.entry-header {
	margin-bottom: 8rem;
	margin-left: 9rem;
	margin-top: 12rem;
	}
}

.search-page .entry-header {
text-align: center;
}

/*	the entry body container												*/
.entry-body {
	margin: 1rem 2rem;
	max-width: 68rem;
	}
@media (min-width: 576px) {
/*	center the body copy on larger screens									*/
.entry-body {
	margin-bottom: 6rem;
	}
}
@media (min-width: 768px) {
/*	center the body copy on larger screens									*/
.entry-body {
	margin-left: auto;
	margin-right: auto;
	}
}


/* 			__________________________
			T H E   H E R O   D E F I N I T I O N S
			This section contains the definitions for the big article 
			images and headlines for various screen sizes:
			-	the "wide-hero" class spans the entire width with its 
				intended use for the headline on the landing page and 
				the article page heading
			-	the "hero" class spans the main column on the landing page
				(for the second or third item)								*/
	
/*	let the article span the entire width (for Firefox)						*/
.wide-hero article {
	width: 100%;
	}
	
/*	the header section for wide-hero containers								*/
.wide-hero header {
	margin-bottom: 3.375rem;
	text-align: center;
	}

@media only screen and (min-width: 720px) {
/*	increase the bottom margin on medium screens							*/
.wide-hero header {
	margin-bottom: 4.5rem;
	}
}

@media only screen and (min-width: 960px) {
/*	increase the bottom margin on large screens								*/
.wide-hero header {
	margin-bottom: 6.75rem;
	}
}

/*	further restrict the height on the landing page in order to show 
	our visitors more items													*/ 
/* .landing-page .wide-hero header, */
.landing-page .hero header,
/* .sections-page .hero header */ {
	max-height: 450px;
	}


/*	the hero content area (contains page title and author information)		*/
.wide-hero .hero-header-container,
.hero .hero-header-container {
	bottom: 15%;
	margin: 0 5%;
	position: absolute;
	width: 90%;
	}

@media only screen and (min-width: 720px) and (max-width: 1199px) {
/*	the hero content area on medium screens									*/
.wide-hero .hero-header-container {
	bottom: 10%;
	/*	when narrowing the viewport, decrease of the left margin starting 
		at 260px down to 10px right before the media query breakpoint		*/
	left: calc(10px + 230*(100vw - 720px)/(1200 - 720));
	margin: initial;	/* reset any margins */
	text-align: left;
	/*	when narrowing the viewport, increase the container width from 
		70 % to around 90 % right before the media query breakpoint			*/
	width: calc(630px + 240*(100vw - 720px)/(1200 - 720));
	}

/*	the landing page hero header container settings for medium screens		*/
.landing-page .wide-hero .hero-header-container,
.sections-page .wide-hero .hero-header-container {
	left: calc(10px + 165*(100vw - 700px)/(1200 - 720));
	}
}

@media only screen and (min-width: 1200px) {
/*	the hero content area on large screens									*/
.wide-hero .hero-header-container,
.hero .hero-header-container {
	bottom: 10%;
	left: 15%;
	margin: initial;
	text-align: left;
	width: 70%;
	}

/*	move the wide-hero header container to the left on the landing page		*/
.landing-page .wide-hero .hero-header-container,
.sections-page .wide-hero .hero-header-container {
	left: 15%;
	}

/*	move the hero header container to the left on the landing page			*/
.landing-page .hero .hero-header-container,
.sections-page .hero .hero-header-container {
	left: 10%;
	}
}

/*	the page title in the hero section										*/
.wide-hero .hero-header-container h1,
.hero .hero-header-container h1 {
	color: #fff;
	font-size: 1.8rem;
	line-height: 1.2;
	margin-bottom: 4rem;
	text-shadow: 0px 1px 2px #252627;
	}
	
@media only screen and (min-width: 400px) and (max-width: 719px) {
/*	the page title in the hero section for medium screens					*/
.wide-hero .hero-header-container h1,
.hero .hero-header-container h1 {
	font-size: 2.8rem;
	}
}

@media only screen and (min-width: 720px) {
/*	the page title in the hero section for larger screens					*/
.wide-hero .hero-header-container h1,
.hero .hero-header-container h1 {
	font-size: 4rem;
	line-height: 1.0;
	margin: 1rem 0;
	}

/*	adjust the page title size for the hero section							*/
.hero .hero-header-container h1 {
	font-size: 3rem;
	}
}

/*	the venue and date information											*/
.wide-hero .hero-header-container h4,
.hero .hero-header-container h4 {
	color: #e2e5e8;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.25rem;
	line-height: 1.2;
	margin-bottom: 1rem;
	text-shadow: 0px 1px 1px #444;
	}

@media only screen and (min-width: 720px) {
/*	... decrease the line height on bigger screens							*/
.wide-hero .hero-header-container h4,
.hero .hero-header-container h4 {
	line-height: 1;
	}
}

/*	an entry's section header												*/
.wide-hero h6 {
	font-size: 1.2rem;
	padding: 2.24rem 0;
	}

@media only screen and (min-width: 720px) {
/*	increase the font size and the top and bottom margins on larger screens	*/
.wide-hero h6,
.hero h6 {
	font-size: 1.4rem;
	padding: 3.36rem 0;
	}
}

@media only screen and (min-width: 960px) {
/*	increase the top and bottom margin on very large screens				*/
.wide-hero h6,
.hero h6 {
	padding: 4.48rem 0;
	}
}

/*	omit the section information on small screens							*/
.wide-hero .hero-header-container h6,
.hero .hero-header-container h6 {
	display: none;
	padding: 2rem 0;
	}

@media only screen and (min-width: 720px) {
/*	section information for bigger screens									*/
.wide-hero .hero-header-container h6,
.hero .hero-header-container h6 {
	color: #fff;
	display: inherit;
	font-size: 1.4rem;
	padding-top: 6rem;
	}
}

/*	section information for bigger screens									*/
.wide-hero .hero-header-container h6 span:before,
.hero .hero-header-container h6 span:before {
	color: #fff;
	}
	


/* 			__________________________
			T H E   J U M B O T R O N   S E T T I N G S
			This section contains the figure-related definitions			*/ 

/*	the entry's hero section (with or without image)						*/
.jumbotron {
	margin: 0 auto 3rem;
	max-width: 1200px;
	}

.jumbotron header {
	bottom: 4rem;
	left: 6rem;
	position: absolute;
	border: 1px solid #7ff77f;
	}

/* additional class for items without images								*/
.no-jumbotron {
	margin-top: 12rem;
	}
@media (min-width: 576px) {
.no-jumbotron {
	margin-top: 16rem;
	}
}
@media (min-width: 768px) {
.no-jumbotron {
	margin-top: 20rem;
	}
}
@media (min-width: 992px) {
.no-jumbotron {
	margin-top: 24rem;
	}
}



/* 			__________________________
			T H E   T E A S E R   S E C T I O N   S E T T I N G S
			The the settings for a news entry's teaser						*/ 

.teaser {
	color: #9ca1a5;
	font-weight: 600;
	margin: 0 2rem 2.4rem;
	max-width: 68rem;
	}
@media (min-width: 576px) {
.teaser {
	margin-left: 12rem;
	}
}
@media (min-width: 768px) {
.teaser {
	margin: 0 auto 4rem;
	padding-left: 9rem;
	}
}

.teaser p {
	font-weight: 600;
	margin-bottom: 0;
	}

.teaser p:last-child {
	margin-bottom: 0;
	}



/* 			__________________________
			T H E   F I G U R E   S E T T I N G S
			This section contains the figure-related definitions			*/ 

/*	allow sufficient space around each figure								*/
figure {
/* border: 1px solid #f00; */
	margin: 2.4rem 0;
	width: 100%;
	}
@media (min-width: 768px) {
figure {
	margin: 4rem 0;
	}
}

/*	the image credit (copyright) information								*/
figcaption {
	margin-top: 2rem;
	}
@media (min-width: 576px) {
figcaption {
	margin-top: 2.4rem;
	width: 75%;
	}
}
@media (min-width: 768px) {
figcaption {
	margin-top: 4rem;
	}
}
@media (min-width: 1240px) {
figcaption {
	margin-left: 0;
	}
}

/*	the left/right margins for the jumbotron figure's caption block			*/
.jumbotron figcaption {
	margin-left: 2rem;
	margin-right: 2rem;
	}
@media (min-width: 768px) {
.jumbotron figcaption {
	width: 66.667%;
	}
}
@media (min-width: 1240px) {
.jumbotron figcaption {
	margin-left: 0;
	}
}

/*	no jumbotron figure captions on the landing page for charts
	and on section pages													*/
.landing-page .jumbotron figure.chart figcaption,
.sections-page .jumbotron figcaption {
	display: none;
}

/*	figure caption paragraphs												*/	
figcaption p {
	color: #252627; /* force the color also within <a> elements */
	font-size: 1.2rem;
	margin-bottom: 0.3rem;
	}

/*	the picture credit information											*/
figcaption .credit {
	color: #9ca1a5;
	font-size: 1.0rem;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	}

/*	no special link color for image credit information						*/
figcaption .credit a {
	color: #ccc;
	}

/*	the media figure settings (for CD/DVD or book reviews)					*/
figure.media {
	max-width: 100%;
	}
@media (min-width: 768px) {
figure.media {
	float: left;
	margin: 0.4rem 3rem 2.4rem 0;
	max-width: 30rem;
	}
}
@media (min-width: 1200px) {
figure.media {
	float: left;
	margin-left: -20rem;
	max-width: 50rem;
	}
}

/*	clear any media figure floats											*/
figure.media:after {
  content: "";
  display: table;
  clear: both;
}

/*	save speace on medium screens and float the media image to the left		*/
@media (min-width: 576px) {
figure.media picture {
	float: left;
	padding-right: 2.24rem;
	}
}
@media (min-width: 768px) {
figure.media picture {
	float: none;
	padding-right: 0;
	}
}
@media (min-width: 1200px) {
figure.media picture {
	float: right;
	padding-left: 2rem;
	}
}

/*	the media figure caption settings (usually 100 % wide).					*/
figure.media figcaption {
	width: 100%;
	}
@media (min-width: 576px) and (max-width: 768px) {
/*	...with the exception for medium screens where we display 
	the caption left of the media image										*/
figure.media figcaption {
/*	padding-left: 22.4rem; */
	width: initial;
	}
}
@media (min-width: 1200px) {
/*	...and on large screens the caption will be displayed with a 
	negative margin right of the media image								*/
figure.media figcaption {
	margin: 0;
	width: initial;
	}
}

/*	darker color for the media figure caption...							*/
figure.media figcaption p {
	color: #535859;
	}
@media (min-width: 576px) and (max-width: 768px) {
/*	... and a bigger font size for better readability						*/
figure.media figcaption p {
	font-size: 1.4rem;
	}
}
@media (min-width: 1200px) {
figure.media figcaption p {
	text-align: right;
	}
}



/* 			__________________________
			T H E   O V E R V I E W   P A G E   D E F I N I T I O N S
			This section contains the definitions for the news entries.		*/ 

/*	the table of contents section											*/
.table-of-contents {
	margin-top: 8rem;
	margin-right: auto;
	margin-left: auto;
	}

.table-of-contents .row {
	margin-left: 0;
	margin-right: 0;
	}

/*	the table of content's section titles									*/
.table-of-contents h2 {
	column-span: all;
	font-weight: 600;
	margin: 1.4rem 0;
	padding-left: 15px;
	width: inherit;
	}



/*			__________________________
			T H E   C A R D   S E T T I N G S
			This section containes the definitions for all item cards, 
			i.e., the smaller article teasers (as used on the landing page)	*/

/*	treat each card as block element										*/
.card {
	display: block;
	/* the following setting is required for Webkit browsers to mitigate 
	   any sorts of weird effects (particial doubling of entries, etc.)		
	   source: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/	*/
	position: relative;
	}
	
/*	the card's anchor settings.												*/
.card > a {
	background-color: transparent;
	border-radius: 3px;
	display: inline-block;
	padding: 15px;
	width: 100%;
	}
		
/*	some nice hover transition (but not for advertisements)					*/
.card > a:hover {
	background-color: #c19b51; /* 2020.10.04 -- #be9b58; */
	transition: background-color 0.5s ease-in-out;
	}

/*	the item title															*/
.card h3 {
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
	margin-bottom: 0.3rem;
	margin-top: 0;
	}

/*	the date and venue information											*/
.card h4 {
	color: #535859;
	font-size: 1.2rem;
	font-weight: 400;
	margin: 0;
	}

/*	use the same color for the <span> information (i.e., the venue)			*/
.card h4 span {
	text-transform: none;
	}

/*	white color for the "hover" and "active" statuses						*/
.card > a:hover h3,
.card > a:hover h4,
.card > a:hover h4 span,
.card > a:hover h4 span::before {
	color: #fff;
	transition: color 0.3s ease-in-out;
	}

.card-extended {
	padding-bottom: 0.6rem;
	}

.card-extended h3 {
	color: #c19b51; /* 2020.10.04 -- #be9b58; */
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
	margin-bottom: 0.4rem;
	text-align: center;
	}
@media (min-width: 768px) {
.card-extended h3 {
	font-size: 1.6rem;
	text-align: left;
	}
}

/*	color indicator that the card has been hovered over and the enclosing 
	link is ready to be selected											*/
a:hover > .card-extended h3 {
	color: #a00;
	}
	
.card-extended h4 {
	color: #535859;
	font-size: 1.2rem;
	font-weight: 400;
	margin-bottom: 1rem;
	text-align: center;
	}
@media (min-width: 768px) {
.card-extended h4 {
	text-align: left;
	}
}

/*	lighter color for the span information (e.g., the section)				*/	
.card-extended h4 span {
	color: #787c7f;
	}
	
.card-extended p {
/*	force the color also within <a> elements								*/
	color: #000;
	}

/*	the COVID-19 blog page teaser settings									*/
.blog-page .card-extended {
	margin: 0;
	/*	smaller bottom padding because the extended-card paragraph 
		comes with a bottom margin of 1.8rem								*/
	padding: 4rem 0 2.6rem 0;
	}

/*	the top border onlystarts with the second entry							*/
.blog-page .card-extended:not(:first-child) {
	border-top: 1px solid #e2e5e8;
	}

/*	the blog entry heading													*/
.blog-page .card-extended h3 {
	margin-bottom: 1rem;
	margin-top: 0;
	}
@media (min-width: 768px) {
/*	...with some changes for large screens									*/
.blog-page .card-extended h3 {
	text-align: left;
	width: 83.333%;
	}
}

/*	the date/time information for the COVID-19 blog entry overview			*/
.blog-page .card-extended h4 {
	margin-bottom: 0.4rem;
	}

/*	the date/time information for the COVID-19 blog entry overview			*/
.blog-page .card-extended p {
	margin-bottom: 1.8rem;
	}



/* 			__________________________
			T H E   F O O T E R
			This section contains the definitions for the various page main 
			main sections: the landing page, the section pages, the news  
			entries and the special pages (e.g., for search results 
			or projects)													*/ 

/*	the global footer section with a dark background and some padding		*/
footer {
	background-color: #252627;
	padding: 5.5rem 1.5rem 3rem;
	width: 100%; 
	}
	
/*	the footer container													*/
.global-footer {
	color: #535859;
	letter-spacing: 0.1rem;
	margin: 0 auto;
	max-width: 76.8rem;
	text-align: center;
	}
@media (min-width: 768px) {
/*	left align all information for larger screens							*/
.global-footer {
	text-align: left;
	}
}

/*	correct the margins for the branding in the page footer					*/
.global-footer h2 {
	margin: 2.5rem auto 1rem;
	width: 92px;
	}
@media (min-width: 768px) {
/*	left align the branding													*/
.global-footer h2 {
	margin: 1.5rem 0 2.3rem;
	}
}

/*	the branding/logo position in the sprite-icon							*/
.global-footer .branding {
	background-repeat: no-repeat;
	background-position: 0 -60px;
	height: 28px;
	width: 92px;
	}

/*	the site section headings (of the departments)							*/	
.global-footer h6 {
	color: #e2e5e8;
	font-size: 1.2rem;
	margin: 3rem 0 0.5rem;
	}
@media (min-width: 768px) {
/*	increase the margins for larger screens									*/
.global-footer h6 {
	margin: 2.7rem 0 2.5rem;
	}
}

/*	the copyright information												*/
.global-footer p {
	color: #787c7f;
	font-size: 1rem;
	margin-bottom: 2.6rem;
	text-align: center;
	}
@media (min-width: 768px) {
.global-footer p {
	text-align: left;
	}
}

/*	the nvaigation items in the page footer section							*/
.global-footer ul {
	line-height: 1.2;
	margin: 0 0 0.3rem 0;
	}
	
.global-footer li {
	display: inline-block;
	font-size: 1.2rem;
	margin: 0.448rem 0;
	}
@media (min-width: 768px) {
.global-footer li {
	display: block;
	margin-bottom: 1rem;
	}
}

/*	don't display bullets for the footer items								*/
.global-footer li::before {
	display: none;
}
	
.global-footer li a {
	line-height: 1.0;
	margin: 0;
	padding: 0 1rem;
	font-weight: 400;
	}
@media (min-width: 768px) {
.global-footer li a {
	padding: 0;
	}
}

/*	no divider for the last list item										*/
.global-footer li:not(:last-child) a {
	border-right: solid 1px #474747;
	}
@media (min-width: 768px) {
.global-footer li:not(:last-child) a {
	border-right: 0;
	}
}
	
/*	the links in the footer section											*/
.global-footer a {
	color: #9ca1a5;
	}
		
.global-footer a:link,
.global-footer a:active,
.global-footer a:visited,
.global-footer a:hover {
	text-decoration: none;
	background-color: transparent;
	}

.global-footer a:active,
.global-footer a:hover {
	color: #fff;
	}	

/*	clear any floats														*/
section:after,
.masthead:after,
.entry .hero:after,
.float-left:after,
.footer:after {
	content: "";
	display: table;
	line-height: 0;
	clear: both;
	}
		
		

/*			__________________________
			T H E   L E G A L   S T U F F
			This section containes the definitions the legal stuff
			(disclosure). It will be displayed as definition list.			*/ 

/*	default settings for the legal definition list							*/
dl.legal { }

/*	the definition title													*/
dl.legal dt {
	color: #9ca1a5;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.224rem;
	margin: 2.24rem 0 0 0;
	text-transform: uppercase;
	}

/*	the definition itself													*/
dl.legal dd {
	margin: 0.448rem 0 2.24rem 2.24rem;
	}
@media only screen and (min-width: 576px) {
dl.legal dd {
	margin-left: 4.48rem;
	}
}




/*			__________________________
			T H E   C H A R T   S E T T I N G S
			This section contains the Scalable Vector Graphics (SVG) 
			settings. SVG charts are usually be treated like figures, i.e.,
			they should include a caption.
			Specific chart settings will be found at the end.				*/

/*	the maximum width for a responsive SVG									*/
svg {
	/*	border: #000 1px solid;	*/
	max-width: 1200px;
	}
/*	the basic SVG text definitions											*/	
svg text {
	fill: #252627;
	font-family: "Avenir Next", Nunito, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 400;
	text-anchor: middle;
	}

/*	the basic chart definitions												*/		
.chart {
	width: 100%;
	}

/*	special cursor settings for future jQuery/Javascript operations			*/
/*	2020.12.13/proc: preliminary commented
.chart svg {
	cursor: crosshair;
	}
*/

/*	hide the small SVG version of the chart on large screens				*/	
@media (min-width: 768px) {
.chart svg.small {
	display: none;
	}
}

/*	hide the large SVG chart version on smaller and medium screens			*/
.chart svg.large {
	display: none;
	}
@media (min-width: 768px) {
/*	... only show the fully-fledged SVG chart version on large screens		*/
.chart svg.large {
	display: initial;
	}
}
	
/*	the SVG chart tick line definitions										*/
.chart svg g.axis .tick line {
	stroke: #e2e5e8;
	shape-rendering: crispEdges;
	}
	
/*	... with special treatment (darker color) for the "zero" line			*/	
.chart svg g.axis .tick-0 line {
	stroke: #252627;
	}
	
/* the text definitions for the tick line texts								*/
.chart svg g.axis .tick text {
	fill: #9ca1a5;
	}

/*	alwaysdisplay text uppercase for the x coordinate						*/
.chart svg g.axis.x text {
	text-transform: uppercase;
	}
	
/* bigger font size for the y coordinate tick line texts on large screens	*/
@media (min-width: 768px) {
.chart svg g.axis.y text {
	font-size: 12px;
	}
}

/*	the guide line for the latest numbers									*/		
.chart svg g.guide line {
	stroke: #5b5e5f;
	stroke-dasharray: 2,2;
	stroke-width: 1;
	}

/*	...and the text which goes with it										*/
.chart svg g.guide text.label {
	font-size: 10px;
	font-weight: 400;
	text-anchor: middle;
	}

/*	the label background (extend by 5 to cover any text beneath)			*/
.chart svg g.guide text.label.bg {
	fill: none;
	stroke: #fff;
	stroke-width: 5;
	}
	
/*	the basic chart path settings (use stroke width of 3 or 4)				*/	
.chart svg .path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 4;
	}


/*	COVID-19 specific SVG chart definitions
	These charts compare the influenza-like and influenza cases with 
	the numbers reported for COVID-19 (the SARS-CoV-2 virus)				*/

/*	the background for special events/periods								*/	
.chart svg g.bar rect.bg {
	fill: #feaa87;
	fill-opacity: 0.15;
	}

/*	darker background for perods with real serious measures					*/
.chart svg g.bar rect.bg-serious {
	fill: #feaa87;
	fill-opacity: 0.4;
	}

/*	the text settings for those special events								*/
.chart svg g.bar text {
	fill: #252627;
	font-size: 12px;
	font-style: italic;
	}

/*	color setting for the 2018/2019 influenza SVG path						*/
.chart .path .ili18 {
	stroke: #ced4d9;
	}
	
/*	color setting for the 2019/2020 influenza SVG path						*/
.chart .path .ili19 {
	stroke: #b6bbbf;
	}
	
/*	color setting for the 2020/21 influenza SVG path						*/
.chart .path .ili20 {
	stroke: #daafd6;
	}
	
/*	color setting for the 2021/22 influenza SVG path						*/
.chart .path .ili21 {
	stroke: #bf7cbb;
	}
		
/*	color setting for the 2019/2020 COVID-19 SVG path						*/
.chart .path .covid19 {
	stroke: #fcd4c3;
	}
/*	color setting for the 2020/2021 COVID-19 SVG path						*/
.chart .path .covid20 {
	stroke: #feaa87;
	}

/*	color setting for the 2021/2022 COVID-19 SVG path						*/
.chart .path .covid21 {
	stroke: #f26739;
	}

/*	the text definitions to display the latest numbers						*/
.chart svg text.label {
	font-weight: 600;
	font-size: 14px;
	pointer-events: none;
	text-anchor: start;
	}
@media (min-width: 768px) {
.chart svg text.label {
	font-size: 16px;
	}
}

/*	the text background definitions for the latest numbers
	(for better usability)													*/
.chart svg text.label.bg {
	fill: none;
	stroke-width: 3;
	stroke: #fff;
	}
	
/*	color setting for the 2019/20 influenza values (matches the path color)	*/
.chart svg text.ili19 {
	fill: #b6bbbf;
	}

/*	color setting for the 2020/21 influenza values (matches the path color)	*/
.chart svg text.ili20 {
	fill: #daafd6;
	}

/*	color setting for the 2021/22 influenza values (matches the path color)	*/
.chart svg text.ili21 {
	fill: #bf7cbb;
	}

/*	color setting for the 2019/20 COVID-19 values (matches the path color)	*/
.chart svg text.covid19 {
	fill: #fcd4c3;
	}
/*	color setting for the 2020/21 COVID-19 values (matches the path color)	*/
.chart svg text.covid20 {
	fill: #feaa87;
	}

/*	color setting for the 2021/22 COVID-19 values (matches the path color)	*/
.chart svg text.covid21 {
	fill: #f26739;
	}



/*			__________________________
			T H E   L O G I N   P A G E
			This section contains the login form definitions. It builds 
			upon the FarCry CMS default form classes ("formtools").			*/

/*	default settings for the login form										*/
.login-form {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	margin: 150px auto;
	max-width: 280px;
	padding: 10px 20px 0px;
	}

@media only screen and (min-width: 614px) {
/*	adaptations for medium and large screens								*/
.login-form {
	max-width: 400px;
	padding: 20px 40px;
	}
}

/*	the branding/logo position in the sprite-icon							*/
.login-form .branding {
	background-repeat: no-repeat;
	background-position: 0 -130px;
	height: 28px;
	width: 120px;
	}

/*	no padding for the form fieldset										*/
.login-form fieldset {
	padding: 0;
	}

/*	the form row settings													*/
.login-form .form-horizontal {
	margin: 0 0 5px;
	width: 100%;
	}

/*	make all form controls 100 % wide										*/	
.login-form .controls {
	width: 100%;
	}

/*	the login form label settings											*/	
.login-form .control-label {
	color: #787c7f;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 600;
	padding: 5px 2px;
	}

/*	the text input fields													*/
.login-form .textInput {
	border: 1px solid #e2e5e8;
	border-radius: 3px;
	box-sizing: border-box;
	color: #252627;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.05rem;
	height: 30px;
	padding: 2px 7px;
	width: 100%;
	}

/*	the text input focus and active state									*/
.login-form .textInput:focus,
.login-form .textInput:active {
	border: 1px solid #c19b51; /* 2020.10.04 -- #be9b58; */
	}

/*	the default login button state											*/	
.login-form .ui-state-default {
	background: #c19b51; /* 2020.10.04 -- #be9b58; */
	border: 1px solid #c19b51; /* 2020.10.04 -- #be9b58; */
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	height: 30px;
	margin: 20px 0;
	padding: 2px 0;
	width: 100%;
	}

/*	some nice hover, focus, and active login button states					*/
.login-form .ui-state-default:hover,
.login-form .ui-state-default:focus,
.login-form .ui-state-default:active {
	background-color: #ddc59d;
	border: 1px solid #ddc59d;
	transition: ease 0.5s ease-in-out;
	}

/*	the button text															*/	
.login-form button span {
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.05rem;
	line-height: 13px;
	text-transform: uppercase;
	transition: background-color 0.5s ease-in-out;
	}