:root {
	--Bordaux			: #790A1D;
	--Bordaux-dark		: #480101;
	--Cream				: #fff4dd;
	--Bordaux-hover		: RGBA(72, 1, 1, 80%);
	--Transparent		: RGBA(0, 0, 0, 0.15);
	
	--Border-Radius		: 1.5em;
	--Page-Padding		: 3em;
}

@media only screen and (max-width: 836px) {
	:root {
		--Border-Radius		: 0.75em;
		--Page-Padding		: 1em;
	}
}

@media only screen and (max-width: 400px) {
	:root {
		--Border-Radius		: 0.5em;
		--Page-Padding		: 0.5em;
	}
}

HTML, BODY {
	font-family			: Helvetica, Sans-serif;
	font-size			: Medium;
	box-sizing			: Border-Box;
	padding				: 0;
	margin				: 0;
	border				: 0;
	word-wrap			: break-word;
	padding-bottom		: 1em;
}

HTML {
	height				: 100vh;
	-width				: 100vw;
	overflow-y			: scroll;
}

BODY {
	position			: Absolute;
	width				: 100%;
	min-height			: 100%;
	background			: Var(--Cream);
	color				: black;
	display				: flex;
	flex-flow			: Column NoWrap;
	padding-bottom		: 0;
}

BODY > * {
	margin				: 0 Auto 0 Auto;
	width				: Calc(100% - 2*Var(--Page-Padding));
	max-width			: 1500px;
	box-sizing			: Content-Box;
	padding				: 0 Var(--Page-Padding) 0 Var(--Page-Padding);
	flex-grow			: 0;
	flex-shrink			: 0;
	flex-basis			: Auto;
}


DIV.logo {
	order				: 1;
}

DIV.logo * {
	margin				: 0;
	padding				: 0;
}

DIV.logo A {
	display				: Block;
}

DIV.logo IMG {
	width				: 100%;
	max-width			: 1500px;
	height				: Auto;
	border				: 0;
}

DIV.logo H1, DIV.logo H2 {
	display				: None;
}

DIV.language, DIV.language  * {
	display				: None;
}


DIV.breadcrumbs {
	margin				: 0;
	padding				: 0;
}

DIV.breadcrumbs SPAN.prologue {
}

DIV.breadcrumbs A {
	color				: inherit;
	text-decoration		: None;
}

DIV.breadcrumbs SPAN.separator {
	font-size			: 75%;
}
DIV.breadcrumbs SPAN.epilogue {
}





DIV.navigation {
	padding				: 0;
	width				: 100%;
	max-width			: Calc(1500px + 2*Var(--Page-Padding));
	background-color	: Var(--Bordaux);
	color				: white;
	order				: 2;
	text-align			: center;
	font-style			: italic;
	z-index				: 1;
	box-shadow			: 0px 5px 1px rgba(0,0,0,0.5);
}

DIV.navigation UL {
	margin				: 0;
	list-style-type		: None;
}

DIV.navigation LI {
	padding				: 0;
	margin				: 0.25em 0 0.25em 0;
	display				: inline-block;
	list-style-type		: None;
}

DIV.navigation LI A, DIV.navigation LI span {
	display				: inline-block;
	color				: white;
	position			: Relative;
	width				: 8em;
	text-decoration		: None;
	z-index				: 2;
	padding				: 0.5em 0 0.5em 0;
}

DIV.navigation UL UL {
	display				: Block;
	position			: Absolute;
	margin				: 0;
	padding				: 0.25em 0 0 0;
	width				: 8em;
	max-height			: 0em;
	overflow			: hidden;
	background			: Var(--Bordaux);
	z-index				: 1;
	transition			: max-height 0.2s;
    transition-delay	: 0s, 0s;
	transition-delay	: 0.1s;
}

DIV.navigation LI:hover UL {
	max-height			: 10em;
}

DIV.navigation LI LI {
	display				: Block;
	margin				: 0.25em;
}

DIV.navigation LI LI A {
	display				: Block;
	font-weight			: Normal;
	width				: Initial;
	color				: white;
	background-color	: transparent;
}

DIV.navigation SPAN.separator {
	display				: None;
}

@media only screen and (max-width: 836px) {
	DIV.navigation {
		text-align			: Left;
		padding				: 0.5em 0 0.5em 1em;
		order				: 1;
	}
	DIV.logo {
		margin-top			: 1em;
		order				: 2;
	}
	
	DIV.navigation:before {
		content				: "☰";
		font-size			: 150%;
		font-weight			: Bold;
		font-style			: Normal;
	}
	
	DIV.navigation UL {
		position			: Absolute;
		display				: None;
		left				: 0;
		width				: 16em;
		border-right		: 1px solid White;
		border-bottom		: 1px solid White;
		margin				: 0.5em 0 0 0;
		padding				: 0 1em 0 1em;
		background 			: Var(--Bordaux);
	}
	
	DIV.navigation:hover UL {
		display				: Block;
	}
	
	DIV.navigation LI, DIV.navigation LI LI {
		display				: Block;
		margin				: 0 0 0.25em 0;
	}
	
	DIV.navigation LI A, DIV.navigation LI span, DIV.navigation LI LI A {
		display				: Block;
		position			: Initial;
		box-sizing			: Border-Box;
		width				: 100%;
		margin				: 0;
		padding				: 0.5em;
	}
	
	DIV.navigation UL UL {
		position			: Initial;
		box-sizing			: Border-Box;
		width				: 100%;
		height				: Initial;
		max-height			: Initial;
		margin				: 0;
		padding				: 0 0 0 1em;
		border-right		: 0;
		border-bottom		: 0;
	}
	
	DIV.navigation LI:hover UL {
		max-height			: Initial;
	}
}

DIV.referers SPAN.separator {
	display				: None;
}

DIV.referers IMG {
	max-width				: 50px;
	clear					: Both;
}

DIV.footer {
	display				: Flex;
	flex-flow			: Row Wrap;
	background			: Var(--Cream);
	order				: 4;
	border-top			: 1px Solid Black;
}

DIV.footer P.copyright {
	min-width			: 100%;
	text-align			: Center;
	padding				: 0.25em;
	margin				: 0;
}

DIV.footer * {
	font-size			: Medium;
	font-weight			: Normal;
	padding				: 0;
	margin				: 0;
}

DIV.footer DIV.category {
	box-sizing			: Border-Box;
	flex-grow			: 1;
	flex-shrink			: 0;
	flex-basis			: 0;
	min-width			: 15em;
	padding				: 0.25em 0.25em 0 0.25em;
	margin				: 0;
}

DIV.footer DIV.category H2 {
	font-weight			: Bold;
}

DIV.footer DIV.category UL {
	padding				: 0;
	margin				: 0;
	list-style-type		: None;
}

DIV.footer DIV.category LI {
	display				: Block;
	list-style-type		: None;
}

DIV.footer DIV.category LI.separator {
	height				: 1em;
}

DIV.footer DIV.category LI.separator  HR{
	display				: None;
}

DIV.footer DIV.category LI A, DIV.footer DIV.category P A {
	text-decoration		: None;
	color				: Var(--Bordaux);
}

DIV.footer DIV.category P.newsection {
	margin-top			: 0.5em;
}

DIV.footer DIV.category:nth-child(4) {
	position			: Relative;
	flex-grow			: 0;
	width				: 48px;
	min-width			: Initial;
	margin				: 0;
	padding 			: 0;
}

DIV.footer DIV.category:nth-child(4) IMG {
	position			: Absolute;
	bottom				: 0;
	right				: 0;
	width				: 48px;
	height				: 48px;
	margin				: 0;
	padding				: 0;
	border				: 0;
}

DIV.footer DIV.category:nth-child(1) { order : 1; }
DIV.footer DIV.referers				{ order : 2; }
DIV.footer DIV.category:nth-child(2) { order : 3; }
DIV.footer DIV.category:nth-child(3) { order : 4; }
DIV.footer DIV.category:nth-child(4) { order : 5; }
DIV.footer P.copyright				{ order : 6; }

DIV.footer DIV.referers {
	position			: Absolute;
	bottom				: 1.5em;
}

@media only screen and (max-width: 836px) {
	DIV.footer {
		flex-flow			: Column Wrap;
		align-items			: Center;
		border				: None;
	}
	DIV.footer DIV.category:nth-child(1) {
		display				: None;
	}
	DIV.footer DIV.category:nth-child(2), DIV.footer DIV.category:nth-child(3) {
		margin				: 0.25em 0;
	}
	DIV.footer DIV.category:nth-child(4) {
		align-self			: End;
	}
	DIV.footer DIV.referers {
		position			: Initial;
		bottom				: Initial;
	}
}

P.info, P.ok, P.warning, P.error {
	border				: 1px Solid #480101;
	border-radius		: 0.5em;
	padding				: 1em;
	background-repeat	: No-repeat;
	background-position	: Left Center;
	box-sizing			: Border-box;
	min-height			: 16px;
	padding-left		: 16px;
	overflow			: Hidden;
}

p.info {
	background			: #a9abe5;
	background-image	: url('images/Status-dialog-information-icon-16.png');
}

p.ok {
	background			: #a9e5d9;
	background-image	: url('images/Actions-dialog-ok-apply-icon-16.png');
}

p.warning {
	background			: #e5bba9;
	background-image	: url('images/Status-dialog-warning-icon-16.png');
}

p.error {
	background			: #e5a9ac;
	background-image	: url('images/Status-dialog-error-icon-16.png');
}

@media only screen and (min-width: 400px) {
	P.info, P.ok, P.warning, P.error {
		background-repeat	: No-repeat;
		background-position	: Left Center;
		box-sizing			: Border-box;
		min-height			: 48px;
		padding-left		: Calc(0.5em + 48px);
	}
	
	p.info {
		background-image	: url('images/Status-dialog-information-icon-48.png');
		color				: #000000;
	}

	p.ok {
		background-image	: url('images/Actions-dialog-ok-apply-icon-48.png');
	}

	p.warning {
		background-image	: url('images/Status-dialog-warning-icon-48.png');
	}

	p.error {
		background-image	: url('images/Status-dialog-error-icon-48.png');
	}
}


DIV.body {
	flex-grow			: 1;
	order				: 3;
}

DIV.body a {
	color					: Black;
}

DIV.body IMG {
	max-width				: 33%;
	float					: Left;
	clear					: Both;
	margin-right			: 0.5em;
	margin-bottom			: 0.25em;
	border-radius			: Var(--Border-Radius);
}

DIV.body IMG.right {
	max-width				: 33%;
	float					: Right;
	clear					: Both;
	margin-left				: 0.5em;
	margin-bottom			: 0.25em;
	border-radius			: Var(--Border-Radius);
}

FORM {
	background			: #d8e4e9;
	color				: #480101;
	border				: 1px Solid #480101;
	border-radius		: 0.5em;
	margin				: 1em;
	padding				: 1em;
	width				: 40em;
}

FORM P {
	margin				: 0em;
	padding				: 0em;
	clear				: Right;
}

FORM P+P {
	padding-top			: 1em;
}

FORM P.field {
}

FORM P.controls {
	text-align			: Right;
}

FORM INPUT, BUTTON, TEXTAREA {
	font-family			: Helvetica, Sans-serif;
	font-size			: Medium;
	background			: White;
	color				: #480101;
	border				: 1px Solid #480101;
	border-radius		: 0.25em;
	box-sizing			: Border-box;
	margin				: 0;
	padding				: 0.125em;
}

FORM INPUT , TEXTAREA {
	float				: Right;
	width				: 25em;
}

FORM TEXTAREA {
}

FORM BUTTON {
	background			: #a9e5d9;
	background-image	: url('images/Actions-dialog-ok-apply-icon-24.png');
	background-repeat	: No-repeat;
	background-position	: 0.5em Center;
	background-origin	: Padding-box;
	box-sizing			: Border-box;
	min-height			: 24px;
	padding				: 0.25em 1em;
	padding-left		: Calc(1em + 24px);
}

FORM BUTTON.next {
	background-color	: #a9abe5;
	background-image	: url('images/Actions-go-next-icon-24.png');
}

FORM BUTTON.previous {
	background-color	: #a9abe5;
	background-image	: url('images/Actions-go-previous-icon-24.png');
}

FORM BUTTON.mail {
	background-image	: url('images/Places-mail-message-icon-24.png');
}

FORM BUTTON.reset {
	background-color	: #e5a9ac;
	background-image	: url('images/Actions-dialog-cancel-icon-24.png');
}

DIV.group H3 {
	margin					: 1em 0 0.5em 0;
	padding					: 0;
}

DIV.group P {
	margin					: 0.25em 0 0.25em 0;
	padding					: 0;
}


DIV.body H2, DIV.body H3, DIV.body H4, DIV.body H5 {
	margin-bottom			: 0.25em;
	color					: black;
}

DIV.body H2 + P , DIV.body H3 + P, DIV.body H4 + P, DIV.body H5 + P {
	margin-top				: 0.25em;
}


DIV.slideshow {
	position				: Relative;
	box-sizing				: Border-Box;
	width					: 1500px;
	max-width				: 100%;
	margin 					: 1em 0 1em 0;
	padding					: 0;
	text-align				: Center;
}

DIV.slideshow  * {
	margin 					: 0;
	padding					: 0;
	box-sizing				: Border-Box;
	display					: Block;
}

DIV.slideshow IMG {
	border 					: 1px solid Black;
	width					: 1500px;
	max-width				: 100%;
	float					: None;
	clear					: None;
}

DIV.slideshow P {
	position				: Absolute;
	top						: 0;
	bottom					: 0;
	width					: 48px;
	max-width				: 10%;
	background				: Var(--Transparent);
	background-repeat		: No-repeat;
	display					: None;
}

DIV.slideshow P#button-previous {
	left					: 0;
	background-image		: url('images/Slideshow_arrow_left.png');
	background-position		: Center Center;
	border-radius			: Var(--Border-Radius) 0 0 Var(--Border-Radius);
}

DIV.slideshow P#button-next {
	right					: 0;
	background-image		: url('images/Slideshow_arrow_right.png');
	background-position		: Center Center;
	border-radius			: 0 Var(--Border-Radius) Var(--Border-Radius) 0;
}

DIV.slideshow:hover P {
	display					: Block;
}



DIV.columns {
	display					: Flex;
	flex-flow				: Row Wrap;
	margin					: 0 -0.5em 0.5em -0.5em;
	padding					: 0;
	max-width				: Calc(1500px + 2*0.5em);
}

DIV.columns > .column {
	display					: Block;
	position				: Relative;
	flex-grow				: 1;
	flex-shrink				; 0;
	flex-basis				: 0;
	max-width				: 100%;
	min-width				: 16em;
	-min-height				: 400px;
	margin					: 0.5em;
	padding 				: 0;
	color					: Black;
	text-decoration			: None;
}

DIV.columns > .box {
	display					: Flex;
	flex-flow				: Column NoWrap;
	padding 				: 0.5em;
	border					: 1px Solid Black;
	border-radius			: Var(--Border-Radius);
	background				: Var(--Bordaux);
	transition				: background 0.25s;
}

DIV.columns > .box * {
	flex-grow				: 0;
	flex-shrink				; 0;
	flex-basis				: Auto;
	Display					: Table-Row;
	Color					: White;
}

DIV.columns > .box P {
	flex-grow				: 1;
}

DIV.columns > .box:hover {
	background				: Var(--Bordaux-hover);
}


DIV.columns H2, DIV.columns H3, DIV.columns H4  {
	padding					: 0;
	margin					: 0;
}

DIV.columns IMG {
	width					: Calc(100% + 2*0.5em);
	max-width				: Initial;
	padding					: 0;
	margin					: 0 -0.5em -0.5em -0.5em;
	border-radius			: 0 0 Var(--Border-Radius) Var(--Border-Radius);
	opacity 				: 100%;
	transition				: opacity 0.25s;
}

DIV.columns > .box:hover IMG {
	opacity 				: 60%;
}


/* {
	border : 1px solid Black;
}/**/

DIV.body BLOCKQUOTE {
	margin					: 0 4em 0 4em;
	max-width				: 40em;
	font-size				: 1.25em;

}

DIV.body BLOCKQUOTE P:first-child:before {
	font-size				: 2em;
	color					: Var(--Bordaux);
	vertical-align			: Top;
	position				: Absolute;
	padding					: 0;
	margin					: 0 0.25em 0 -1em;
	content					: '“';
}

DIV.body BLOCKQUOTE P:last-child:after {
	font-size				: 2em;
	color					: Var(--Bordaux);
	vertical-align			: Top;
	padding					: 0 0 0 0.5em;
	margin					: 0;
	content					: '”';
}

DIV.body BLOCKQUOTE P {
	margin					: 0 0 0.5em 0;
}