:root {
	--Byzantium				: #702652;	
	--Avocado				: #567C27;	
	--Powder-Blue			: #94B1C7;
	--Air-Force-Blue		: #5E8AAB;
	--Bice-Blue				: #286DA1;	
	--Lapis-Lazuli			: #28628E;	/* Logo color */
	--Charcoal				: #33424E;
	--Eerie-Black			: #1B1B1B;
	--Patttern-Bars			: Repeating-linear-gradient(
								-45deg,
								Transparent,
								Transparent 15px,
								#F2F6F8 15px,
								#F2F6F8 30px
							);
}

HTML, BODY {
	box-sizing				: Border-Box;
	padding					: 0;
	margin					: 0;
	border					: 0;
	word-wrap				: break-word;
	background-color		: #F9FBFC;
	background-image		: var(--Patttern-Bars);
}
HTML {
	height					: 100vh;
	overflow-y				: auto;
}
BODY {
	height					: 100vh;
	font-family				: Arial, Helvetica, sans-serif;
	font-size				: 18px;
	position				: Absolute;
	width					: 100%;
	min-height				: 100%;
	padding-top				: 160px;
    color					: var(--Charcoal);
}
DIV.container {
	padding					: 70px 5em;
	box-sizing				: border-box;
}
DIV.logo {
	position				: Absolute;
	overflow				: hidden;
	left					: 0;
	right					: 0;
	top						: 0;
	height					: 110px;
	background				: White; 
	border-bottom			: 2px Solid black;
	padding-left			: 30%;
}
DIV.logo IMG.logo {
	float					: Left;
	margin					: 0.5em;
	height					: 91px; 
	padding					: 0;
	border					: 0;
	transition				: 0.6s;
}
DIV.logo IMG.logo:hover {
	opacity					: 0.5;
	transition				: 0.6s;
}
DIV.logo H1, DIV.logo H2 {
	color					: var(--Lapis-Lazuli);
}
DIV.breadcrumbs {
	margin					: 0;
	padding					: 0;
	top						: 0.6em;
	position				: relative;
}
DIV.breadcrumbs SPAN.prologue {
}
DIV.breadcrumbs A {
	color					: inherit;
	text-decoration			: None;
}
DIV.language {
	display					: none;
}
DIV.language SPAN.separator {
	display					: None;
}
DIV.breadcrumbs SPAN.separator {
	font-size				: 75%;
}
DIV.breadcrumbs SPAN.epilogue {
}
DIV.right {
	float					: right;
	max-width				: 33%;
	box-sizing				: border-box;
	padding-right			: 15px;
	text-align				: center;
	margin					: 0 0 1em 1em;
}
DIV.right-text {
	max-width				: 60%;
	text-align				: left;
	margin					: 0 0 0 1em;
}
DIV.right P {
	margin-block-start		: 0em;
	margin-block-end		: 0em;
	font-size				: 1.1em;
	color					: var(--Lapis-Lazuli);
	transition				: 0.6s;	
}
DIV.right A {
	color					: var(--Lapis-Lazuli);
	display					: inline-block;
	position				: Relative;
	text-decoration			: None;
	z-index					: 2;
	transition				: 0.6s;	
}
DIV.right A:HOVER {
	color					: var(--Eerie-Black);
	transition				: 0.6s;	
}
DIV.right IMG {
	border					: 15px solid var(--Lapis-Lazuli);
	max-width				: 96%;
	transition				: 0.6s;	
	border-radius			: 12px;
}
DIV.right IMG:HOVER {
	border					: 15px solid var(--Eerie-Black);
	transition				: 0.6s;	
	border-radius			: 12px;
}
DIV.left {
	float					: left;
	max-width				: 33%;
	box-sizing				: border-box;
	text-align				: center;
	margin					: 0 2em 1em 0;
}
DIV.left-text {
	max-width				: 60%;
	text-align				: left;
	margin					: 0 0 0 1em;
}
DIV.left P {
	margin-block-start		: 0em;
	margin-block-end		: 0em;
	font-size				: 1.1em;
	color					: var(--Lapis-Lazuli);
	transition				: 0.6s;	
}
DIV.left A {
	color					: var(--Lapis-Lazuli);
	display					: inline-block;
	position				: Relative;
	text-decoration			: None;
	z-index					: 2;
	transition				: 0.6s;	
}
DIV.left A:HOVER {
	color					: var(--Eerie-Black);
	transition				: 0.6s;	
}
DIV.left IMG {
	border					: 15px solid var(--Lapis-Lazuli);
	max-width				: 96%;
	transition				: 0.6s;	
	border-radius			: 12px;
}
DIV.left IMG:HOVER {
	border					: 15px solid var(--Eerie-Black);
	transition				: 0.6s;	
	border-radius			: 12px;
}
DIV.logos {
	float					: left;
	max-width				: 33%;
	box-sizing				: border-box;
	padding-right			: 15px;
	text-align				: center;
	margin					: 0 0 1em 1em;
}
DIV.logos A {
	color					: var(--Lapis-Lazuli);
	display					: inline-block;
	position				: Relative;
	text-decoration			: None;
	z-index					: 2;
	transition				: 0.6s;	
}
DIV.logos A:HOVER {
	color					: var(--Eerie-Black);
	transition				: 0.6s;	
}
DIV.logos IMG {
	border					: 5px solid var(--Lapis-Lazuli);
	max-width				: 96%;
	transition				: 0.6s;	
	border-radius			: 5px;
}
DIV.logos IMG:HOVER {
	border					: 5px solid var(--Eerie-Black);
	transition				: 0.6s;	
	border-radius			: 5px;
}
DIV.color-box-l {
	clear					: both;
	float					: left;
	max-width				: 33%;
	width					: fit-content;
	box-sizing				: border-box;
	background-color		: var(--Lapis-Lazuli);
	padding					: 1em;
	margin-bottom			: 1em;
	font-weight				: 400;
	line-height				: 30px;
	border-radius			: 12px;
}
DIV.color-box-r {
	clear					: both;
	float					: right;
	max-width				: 50%;
	width					: fit-content;
	box-sizing				: border-box;
	background-color		: var(--Lapis-Lazuli);
	padding					: 1em;
	margin-bottom			: 1em;
	margin-left				: 2em;
	font-weight				: 400;
	line-height				: 30px;
	border-radius			: 5px;
}
DIV.color-box-l, DIV.color-box-r H2{
	color					: var(--Powder-Blue);
	text-shadow				: 0 0 3px var(--Bice-Blue);
}
DIV.wide {
	float					: center;
	max-width				: 96%;
	box-sizing				: border-box;
	padding					: 0;
	text-align				: center;
	margin					: 0 0 1em 1em;
}
DIV.wide IMG {
	border					: 5px solid var(--Lapis-Lazuli);
	max-width				: 96%;
	transition				: 0.6s;	
	border-radius			: 5px;
}
DIV.wide IMG:HOVER {
	border					: 5px solid var(--Eerie-Black);
	transition				: 0.6s;	
	border-radius			: 5px;
}

TD {
	color					: var(--Powder-Blue);
	font-size				: large;
}
DIV.buttons {
	clear					: Both;
	display					: Flex;
	margin					: 0 0 0.5em 0 !important;
	padding					: 0;
	justify-content			: space-around;
	flex-flow				: row wrap;
}
.button {
	display					: flex;
	flex-grow				: 0;
	flex-basis				: auto;
	margin					: 0.5em !important;
	padding					: 0;
	text-align				: center;
	min-width				: 8em;
	background-image		: linear-gradient(0deg,var(--Lapis-Lazuli) 0%,var(--Air-Force-Blue) 50%,var(--Lapis-Lazuli) 100%);
	position				: Relative;
	color					: white;
	text-decoration			: None;
	z-index					: 2;
	transition				: 0.6s;
}
/* ============================================ *
 * Navigation
 * ============================================ */
DIV.navigation {
	text-transform			: uppercase;
	font-weight				: 600;
	text-align				: center;
	border-bottom			: 1px solid #7697B5;
	border-top				: 1px solid #CCCCCC;
	background-image		: linear-gradient(0deg,var(--Lapis-Lazuli) 0%,var(--Air-Force-Blue) 50%,var(--Lapis-Lazuli) 100%);
	position				: absolute;
	left					: 0;
	top						: 110px;
	width					: 100%;
	box-shadow				: 0px 5px 10px rgba(0,0,0,0.5);
	z-index					: 0;
	transition-delay		: 0.4s;
	transition				: 0.6s;
	line-height				: 3em;
	max-height				: 3em;
}
DIV.navigation UL {
	margin					: 0;
	list-style-type			: None;
}
DIV.navigation LI {
	padding					: 0;
	margin					: 0;
	display					: inline-block;
	list-style-type			: None;
}
DIV.navigation LI A, DIV.navigation LI span {
	display					: inline-block;
	position				: Relative;
	color					: white;
	width					: 8em;
	text-decoration			: None;
	z-index					: 2;
	transition				: 0.6s;
}
DIV.navigation LI.empty {
	transition				: 0.6s;	
}
DIV.navigation LI A:hover, DIV.navigation LI span:hover{
	color					: white;
	background				: RGBA(15,15,15, 15%);
	text-shadow				: 0 0 5px var(--Eerie-Black) ;
	transition				: 0.6s;
}
DIV.navigation LI.currentpage A {
	font-weight				: Bold;
	color					: white;
	text-shadow				: 0 0 5px var(--Eerie-Black) ;
	background				: RGBA(2,2,2, 15%);
	transition				: 0.6s;
}
DIV.navigation LI.currentpage A:hover {
	background				: RGBA(2,2,2, 50%);
	transition				: 0.6s;
}
DIV.navigation > UL > LI.filled > A {
	transition-delay		: 0.4s;
	transition				: 0.3s;
	text-shadow				: 0 0 5px white;
	background				: RGBA(2,2,2, 10%);
}
DIV.navigation LI LI {
	display					: Block;
}
DIV.navigation LI LI A {
	display					: Block;
	font-weight				: Normal;
	width					: Initial;
	color					: white;
	background-color		: transparent;
}
DIV.navigation LI.currentpage LI A {
	text-transform			: uppercase;
	font-weight				: 600;
	color					: white;
}
DIV.navigation LI.currentpage LI A:hover {
	background-image		: linear-gradient(0deg,transparent 0%,var(--Eerie-Black) 50%,transparent 100%);
	transition				: all 0.3s;
}
DIV.navigation SPAN.separator {
	display					: None;
}
@media only screen and (max-width: 836px) {
	DIV.navigation UL UL {
	width					: 5em;
	}
	DIV.navigation LI A, DIV.navigation LI span {
	width					: 5em;
	}
}
@media only screen and (max-width: 361px) {
	DIV.navigation UL UL {
	width					: 4em;
	}
	DIV.navigation LI A, DIV.navigation LI span {
	width					: 4em;
	}
}

/* ============================================ *
 * Footer styling
 * ============================================ */
DIV.footer {
	clear					: both;
	background-color		: var(--Lapis-Lazuli);
	background-image		: linear-gradient(10deg,var(--Lapis-Lazuli) 0%,var(--Air-Force-Blue) 75%,var(--Lapis-Lazuli) 100%);
	border-top				: 2px solid #DCDCDC;
	padding					: 0 5em;
	padding-bottom			: 2.5em;
	overflow				: visible;
	min-height				: 16em;
	position				: relative;
	left					: 0;
}
DIV.footer * {
	font-size				: Medium;
	font-weight				: Normal;
	padding					: 0;
	margin					: 0;
}
DIV.footer P {
	font-size				: 14px;
	font-weight				: normal;
	line-height				: 24px;
	margin					: 15px 0;
}
DIV.footer P.copyright {
	position				: relative;
	bottom					: -13em;
	font-size				: 100%;
	float					: right;
	padding					: 0.1em 1em 0.05em 1em;
	color					: var(--Eerie-Black);
}
DIV.footer DIV.category {
	float					: Left;
	box-sizing				: Border-Box;
	margin					: 0;
}
DIV.footer DIV.category H2 {
	font-size				: 1.5em;
	font-weight				: bold;
	margin-block-start		: .83em;
	margin-block-end		: .83em;
	color					: var(--Eerie-Black);
	padding-top				: 1em;
}
DIV.footer H4 {
	font-weight				: Bold;
	color					: var(--Eerie-Black);
	margin-block-start		: 1.33em;
	margin-block-end		: 1.33em;
}
DIV.footer H4 A {
	font-weight				: Bold;
	text-decoration			: None;
	color					: var(--Eerie-Black);
	transition				: all 600ms ease;
}
DIV.footer H4 A:hover {
	text-decoration			: None;
	color					: var(--Eerie-Black);
	text-shadow				: 0px 1px 6px var(--Eerie-Black);	
	transition				: all 600ms ease;
}
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(--Eerie-Black);
	transition				: all 600ms ease;
}
DIV.footer DIV.category P A:hover{
	text-decoration			: None;
	color					: var(--Eerie-Black);
	text-shadow				: 0px 1px 6px var(--Eerie-Black);	
	transition				: all 600ms ease;
}
DIV.footer DIV.category P.newsection {
	margin-top				: 0.5em;
}
DIV.footer DIV.referers {
	position				: relative;
	border					: 0;
}
DIV.footer DIV.referers SPAN.separator {
	display					: None;
}
DIV.footer DIV.referers A {
	top						: 14em;
	right					: 1em;
	position				: absolute;
	display					: Block;
	float					: Right;
}
DIV.footer DIV.referers IMG {
	display					: Block;
	width					: 48px;
	height					: 48px;
	clear					: Both;
}

PRE {
	color					: Black;
	font-family				: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
	font-size				: 16px;
	font-weight				: bold;
	width					: auto;
	overflow-x				: auto;
	white-space				: nowrap;
	background				: White;
	border-radius			: 0.5em;
	white-space				: pre-wrap;
	padding					: 0.5em 5em;
	margin					: 1em 0;
	overflow				: visible;
	overflow-x				: visible;
	display					: block;
	clear					: both;
}


@media only screen and (min-width: 1488px) {
	DIV.logo {
		padding-left			: 15em;
		padding-right			: 15em;
	}
	DIV.container {
		padding					: 70px 15em;
	}
	DIV.footer {
		padding					: 0 15em;
	}
	PRE {
		padding					: 0.5em 15em;
	}
}

@media only screen and (max-width: 975px) {
	DIV.logo {
		padding-left		: 6em;
		border-bottom		: none;
		height				: auto;
	}
	DIV.title {
		clear				: both;
		font-size			: 14px;
	}
	DIV.container {
		padding				: 10em 5em;
		z-index				: 0;
		position			: relative;
	}
	DIV.footer {
		padding				: 0 5em;
	}
	PRE {
		padding				: 0.5em 5em;
	}
	BODY {
		padding				: 0;
		margin				: 0;
		display				: Flex;
		flex-flow			: Column NoWrap;
	}
	BODY > * {
		flex-grow			: 0;
		flex-shrink			: 0;
		flex-basis			: Auto;
	}
	DIV.navigation {
		left				: Initial;
		bottom				: Initial;
		order				: 1;
		background			: Transparent;
		box-shadow			: 5px 5px 10px var(--Lapis-Lazuli);
		color				: white;
		top					: 0;
		width				: 100px;
		height				: 100px !important;
		max-height			: 100px !important;
	}
	
	DIV.navigation:before {
		content				: "☰";
		font-size			: 200%;
		font-weight			: Bold;
		font-style			: Normal;
		line-height			: 2.5em;
		color				: var(--Lapis-Lazuli);
	}
	
	DIV.navigation UL {
		position			: Relative;
		top					: -5px;
		width				: 10em;
		max-width			: 15em;
		padding				: 0.15em 0 0 0;
		display				: None;
		background-image	: linear-gradient(135deg,var(--Lapis-Lazuli) 0%,var(--Air-Force-Blue) 50%,var(--Lapis-Lazuli) 100%);
	}
	
	DIV.navigation LI {
		padding				: 1em 0 0 0;
	}
	
	DIV.navigation LI A {
		color				: White;
		width				: 10em;
	}
	
	DIV.navigation LI A:hover, DIV.navigation LI UL A:hover {
		font-weight			: Bold;
		color				: White;
	}
	
	DIV.navigation LI.currentpage A {
		font-weight			: Normal;
		border-bottom		: None;
	}

	DIV.navigation LI.currentpage A:before {
		content				: "";
	}
	
	DIV.navigation LI.currentpage UL A:before, DIV.navigation LI:hover UL A:before {
		content				: "";
	}
	
	DIV.navigation:hover UL {
		display				: Block;
	}
	
	DIV.navigation UL UL {
		position				: Initial;
		border-right			: None;
	}
	DIV.right {
		max-width				: 50%;
		padding					: 10px;
	}
}

@media only screen and (max-width: 800px) {
	DIV.container {
		padding					: 9em 1em;
	}
	DIV.footer {
		padding					: 0 1em;
	}
	DIV.logos {
		float					: left;
		max-width				: 50%;
		margin					: 0 0 1em 1em;
	}
	DIV.right {
		max-width				: 98%;
		padding					: 0;
		margin					: 0;
		float					: none;
	}
	DIV.left {
		max-width				: 98%;
		padding					: 0;
		margin					: 0;
		float					: none;
	}
	
}

@media only screen and (max-width: 550px) {
	DIV.title {
		display					: none;
	}
	DIV.container {
		padding					: 7em 1em;
	}
	DIV.footer {
		padding					: 0 1em;
	}
	DIV.logos {
		float					: none;
		max-width				: 100%;
		margin					: 0 0 1em 1em;
	}
	DIV.right IMG {
		max-width				: 92%;
	}
	DIV.left IMG {
		max-width				: 92%;
	}
	DIV.color-box-r {
	width						: 100%;
	max-width					: 100%;
	}
	DIV.color-box-l, DIV.color-box-r H2{
		color					: var(--Powder-Blue);
		text-shadow				: 0 0 3px var(--Bice-Blue);
		text-align				: center;
	}
	td {
		color					: var(--Powder-Blue);
		font-size				: large;
	}
	DIV.footer P.copyright {
		width					: 100%;
		padding					: 0;
		font-size				: 95%;
	}
}
/* Xsensible product image in the footer */
DIV.footer IMG.xsensible-footer-model {
	width: 432px;
	max-width: min(100%, calc(100vw - 4em));
	height: auto;
}