@charset "utf-8";

/*=== Clean CSS classes version 1.1 for website v1.1 */

/*#region ==== TODO */
/*#endregion ==== TODO */

/*#region ==== Colors */

/*
From Idigo logo:
	deep blue: #285FAC;		#0E61AE
	light blue: #29ABE2;	#00AEEF
	dark gray: #343841
	medium gray: #60646A
	light gray: #878A8F
Derived:
	medium blue: #0092CC
	dark blues: #1D457D; #183968;


Hover Colors:
light blue: #29ABE2;

flashy-light blue: #01b3fb;

Per product category:
	pipe-markers-color: #B39B80; light marroon
	safety-signs-color: #7852E4; flashy violet
	labels-color: #70D151; fluo green
*/

/*#endregion ==== Colors */

/*#region === Fonts */

@font-face {
	font-family: "Icons";
	font-style: normal;
	src: url("/fonts/IdigoIcons.woff2") format('woff2'),
		url("/fonts/IdigoIcons.ttf") format('ttf');
	font-display: block;
}

/*#endregion === Fonts */

/*#region === :root */

:root {
	/*--- define css variables here */
	/* colors */
	--theme-main-color: #285FAC;
	--hover-color: #29ABE2;
	/* to be used in dark mode */
	--dark-grey: #121212;

	--theme-warning-color: #b00;
	--theme-green-color: #070;

	/* text/content colors*/
	--background-color: #white;
	--text-color: #475467;
	--highlighted-text-color: #121212;
	--highlighted-text-color: var(--dark-grey);
	/*--text-color: var(--dark-grey);*/
	/* margins and other dimensions, to compute them once*/
	--side-margin: calc(max(1em, (100vw - 1920px) / 2));
}

/*#endregion === :root */

/*#region === Icons */

.font-icon {
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	font-style: normal;
	font-family: Icons;
	text-align: center;
}

	i.font-icon {padding-right:0.3em}
	.font-icon.home {
		width: 1.0em;
	}

		.font-icon.home::before {
			content: "\f015";
		}

	.font-icon.facebook {
		width: 1.7em;
	}

		.font-icon.facebook::before {
			content: "\f09a";
		}

	.font-icon.linkedin {
		width: 2.0em;
	}

		.font-icon.linkedin::before {
			content: "\f0e1";
		}

	.font-icon.email, .font-icon.phone, .font-icon.link, font-icon.www {
		font-size: 1.25em;
		width: 1.5em;
		padding-left: 0.25em;
	}

		.font-icon.email::before {
			content: "\f003";
		}

		.font-icon.phone::before {
			content: "\f095";
		}

		.font-icon.link::before {
			content: "\f278";
		}
		.font-icon.www::before {
			content: "\f300";
		}

	.font-icon.hamburger::before {
		content: "\f0ca";
	}

	.font-icon.hamburger.opened::before {
		content: "\f0cb";
	}

/*#endregion === Icons */

/*#region ==== svg */

svg {
	padding: 0.5em;
	overflow: visible;
}

symbol, use {overflow: visible}

/*#endregion ==== svg */

/*#region ==== Common styling */

* {
	margin: 0;
	/*padding: 0;*/
}

html {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.0em;
	font-size: calc(max(min(0.5rem + 0.75vw, 1.0em),14px));
}

/*body {margin: 0}*/

/*section {overflow: auto}*/

h1, h2, h3, h4, h5, h6 {
	margin: 0 1em 0.5em 1em;
	color: #285FAC;
	color: var(--theme-main-color);
	font-variant: small-caps;
	font-weight: 500;
}

h1, h2, h3 {text-align: center}

h1 {font-size: 2.5em}
h2 {font-size: 2em}
h3 {font-weight: 400;font-size: 1.6em}
h4 {
	font-weight: 400;
	font-size: 1.3em;
	margin: 0.75em 0.65em 1em 1em;
}

/* inspired by Bootstrap */
/*h1, h2, h3 {
	margin-top: 0;
	margin-bottom: 0.5em;
}

h4, h5, h6 {
	margin-top: 1em;
	margin-bottom: 0.5em;
}*/

h2.icon-text {
	padding: 1em 0em 1em 0em
}
/* was main h2.xxx */

h2 > span,
h3 > span {
	display: flex;
	flex-direction: column;
	margin: auto;
}

	h2 > span > span.secline,
	h3 > span > span.secline {
		display: block;
		margin: auto;
		margin-top: 0.3em;
		padding-top: 0.2em;
		font-size: 0.7em;
		/*color: #1963af;*/
		/*color: #285FAC;
		color: var(--theme-main-color);*/
		color: inherit;
		width: 75%;
		border-top: 1px solid currentColor;
	}

/*h4 > span.secline {}*/

	h4 > span.secline:before {
		content: ' ➔ '
	}

b {font-weight: 600}

hr {
	margin: 1.5em 0 1.5em 0;
	border-top: 1px solid #285FAC;
}

ul, ol {margin-top: 0.5em; margin-right:1em}
li {margin-bottom: 0.35em}

/* was only for main */
figcaption, caption {
	text-align: center;
	font-variant: small-caps;
	font-weight: 700;
	padding: 0.5em 0 0.5em 0em;
	background-color: #def;
	color: #1963af;
	border: 1px solid #bbb;
}

table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin-bottom: 1em;
}

thead {
	background-color: #1963af;
	color: white;
	font-variant: small-caps;
	text-align: center;
}

tbody {
	font-size: 0.9em
}

/*tr {}*/

th, td {
	font-weight: 500;
	padding: 0.5em;
	border: 1px solid #bbb;
}

th {
	/* ensure no overflow by using ellipsis*/
	overflow: hidden;
	text-overflow: ellipsis;
	/*white-space: nowrap;*/
}

	th > span.secline {
		display: block;
		font-size: 0.7em;
	}

/*td {}*/

/* end that was only for main */
picture > img {
	width: 100%;
	margin: 0;
	padding: 0;
}

button {
	background-color: inherit;
	color: inherit;
}

*, ::after, ::before {box-sizing: border-box}

/* mobile first */
video {
	width: 100%;
	height: auto;
}

/* desktop advancement */
@media screen and (min-width:1280px) {
	video {
		display: block;
		width: 80%;
		margin: 1.5em auto 1.5em;
		box-shadow: 0.5em 0.5em 0.8em 0.4em #8d8a8a;
	}
}

/*#endregion ==== Common styling */

/* color themes */

/*
.main-theme {}
.warning-theme {}
.green-theme {}

.warning-theme > *:first-child
{background-color: var(--theme-warning-color) !important}
.warning-theme > h3
{color: var(--theme-warning-color) !important}
.button-links .warning-theme a
{background-color: var(--theme-warning-color)}
.button-links.secondary .warning-theme a
{color: var(--theme-warning-color)}

.green-theme > *:first-child
{background-color: var(--theme-green-color) !important}
.green-theme > h3
{color: var(--theme-green-color) !important}

.button-links .green-theme a
{background-color: var(--theme-green-color)}
.button-links.secondary .green-theme a
{color: var(--theme-green-color)}
*/

/*#region ==== Generic tags classes */

/*.internal-fragment:before {
	display: block;
	content: " ";
	height: 60px;
	margin-top: -60px;
	visibility: hidden;
}*/

/*.internal-fragment {
	position: relative;
	vertical-align: top;
	z-index: -1;
}*/

.internal-fragment {
	display: block;
	content: " ";
	height: 64px;
	margin-top: -64px;
	visibility: hidden;
}

/*#peekee {
	position: relative;
	vertical-align: top;
	/*z-index: -1; /* This prevents any links being behind the offset block and un-clickable */
}*/

.hide-overflow {
	position: relative;
	overflow: hidden;
}

/*.overlay-container {position: relative}

	@media screen and (min-width:640px) {
		.overlay-container > div:first-child {
			position: absolute;
			right: 0;
		}
	}*/

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.flex-1 {flex-grow: 1}

.contact-type-label {display: none}

/* IMPORTANT: used for hamburger icon in Javascript */
.force-visible {display: block !important}
.force-hidden {display: none !important}
.hidden-text {
	display: inline-block;
	visibility: hidden;
}

.collapsed {
	visibility: collapse;
	display: none;
}

.button-link, .pdf-link, .button-links a {
	display: block;
	padding: 0.5em 0.75em 0.5em 0.75em;
	margin: 0.75em auto 0.75em auto;
	width: 50%;
	width: fit-content;
	text-align: center;
	text-decoration: none;
}

.button-link, .button-links a {
	background-color: #285FAC;
	background-color: var(--theme-main-color);
	color: white;
}

	.button-link.secondary, .button-links.secondary a {
		color: #285FAC;
		color: var(--theme-main-color);
		background-color: inherit;
		border: 1px solid currentColor;
	}

	.button-link.important, .button-links.important a {
		background-color: #E00;
	}

@media (hover:hover) {
	.button-link:hover, .button-links a:hover {
		background-color: #29ABE2;
		background-color: var(--hover-color);
		color: white;
	}
}

img.secline, .secline .img-sprite {
	padding: 0;
	margin: auto;
	width: 50%;
	margin-bottom: 0.5em;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid blue;
}

img.secline {
	margin: 0
}

.img-sprite {
	overflow: hidden
}

	.img-sprite > img {
		transform: scale(1.1);
		padding: 0 !important;
		margin: 0 !important;
		aspect-ratio: 1;
		object-fit: cover;
	}

	.img-sprite.marine-offshore > img {
		object-position: 0 0
	}

	.img-sprite.oil-gas > img {
		object-position: 0 33.33%
	}

	.img-sprite.chemical-pharmaceutical > img {
		object-position: 0 66.66%
	}

	.img-sprite.industrials > img {
		object-position: 0 100%
	}

/*
.offering-images {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0 -6rem;
	grid-gap: 8px;
}

	.offering-images > picture {
		margin: 2em 0 2em 0;
		transition: .25s ease-out;
		display: inline-block;
		overflow: hidden;
		width: 33.33%;
		-webkit-transform: skewX(-10deg);
		transform: skewX(-10deg);
	}

		.offering-images > picture:nth-child(2)
		{background-color: #ccc}

		//.offering-images > picture:nth-child(1) {
			clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
		}
		.offering-images > picture:nth-child(2) {
			margin: 0 -10% 0 -10%;
			clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
		}
		.offering-images > picture:nth-child(3) {
			clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
		}//

		.offering-images > picture > img {
			height: 25em;
			vertical-align: middle;
		}

@media (hover:hover) {
	.offering-images > picture:hover {
		transition: .5s ease;
		z-index: 300;
		width: 50%;
		transition: .5s ease;
		transform: scale(1.3,1.2) skewX(-10deg);
		-ms-transform: scale(1.3,1.2) skewX(-10deg); // IE 9
		-moz-transform: scale(1.3,1.2) skewX(-10deg); // Firefox
		-webkit-transform: scale(1.3,1.2) skewX(-10deg); // Safari and Chrome
		-o-transform: scale(1.35) skewX(-10deg); // Opera
		margin: 0;
	}
}
*/

.framed-articles {}

	.framed-articles > article {
		/*margin: 1.0em;
		box-shadow: 0.25em 0.25em 0.75em #8d8a8a;*/
		background-color: white;
		/* flex so can align anchor link to bottom */
		display: flex;
		flex-direction: column;
	}

		.framed-articles > article > *:first-child {
			width: 100%;
			padding: 0.5em;
			margin: 0 auto;
			background-color: #285FAC;
			background-color: var(--theme-main-color);
			color: white;
		}

		.framed-articles > article > p {margin: 0 1em 1em 1em}
		.framed-articles > article > h3 {margin-top: 0.5em}

			.framed-articles > article > h3 > span > span.secline
			{color: inherit}

@media screen and (min-width:640px) {
	.framed-articles > article {
		margin: 1.0em;
		box-shadow: 0.25em 0.25em 0.75em #8d8a8a;
	}

	.framed-articles.flexes {
		display: flex;
		flex-wrap: wrap;
		/*margin:0;*/
		padding: 1em 0 1.0em 0;
		grid-gap: 1em;
		text-align: center;
		justify-content: center;
	}

		.framed-articles.flexes article {
			/* min-width: 27em; to more or less match grid auto*/
			min-width: calc(min(24em,60vw));
			/*max-width: 54em;*/
			flex: 1;
			margin: 0;
		}

	/* AMA, TODO, force a1:1 aspect ratio??*/
	.framed-articles .centered-illustration {
		max-width: 30em;
		/*max-height: 30em;*/
	}
}

#offering-services > article > *:first-child {
	background-color: #29ABE2;
}

.clipped-images {
	padding-top: 0;
	margin: 0;
	max-height: 48em;
	max-height: calc(max(48em,50vw));
	overflow: hidden;
	display: flex;
	align-items: center;
	/*
	margin: 2em 1em;
	background-color: white;*/
}

@media screen and (min-width:640px) {
	.clipped-images {
		margin-top: -2em;
		/*margin: 0;*/
		/*width: 80%;
		margin: 2em auto;*/
	}
}

	/*.clipped-images > h2 {
		position: absolute;
		padding: 1.5em 1em;
		background: rgba(255,255,255,0.9);
		left: 0;right: 0;
		bottom: 20%;
		margin: auto auto;
		width: 60%;
		width: fit-content;
	}*/
	.clipped-images > picture {
		flex: 1;
		/*max-height: 28em;*/
		display: flex;
		align-items: center;
	}

	.clipped-images > :nth-child(1) {
		clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
		margin-right: -10%;
		transform: translateX(-6%);
	}

	.clipped-images > :nth-child(2) {
		/*margin: 0 -10% 0 -10%;*/
		clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
	}

	.clipped-images > :nth-child(3) {
		clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
		margin-left: -10%;
		transform: translateX(+6%);
	}

	.clipped-images > picture:hover {
	}

	.clipped-images > picture > img {
		cursor: pointer;
	}

		.clipped-images > picture > img:hover {
			/*transform: scale(1.25);*/
		}

	.pdf-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1em;
		margin: 0 1em 0 1em;
	}

		.pdf-links > * {
			flex: 1;
			display: flex !important;
			flex-wrap: wrap;
			align-content: center;
			text-align: center;
		}

	.pdf-link {
		max-width: fit-content;
		background-color: white;
		color: #285FAC;
		color: var(--theme-main-color);
		border: 1px solid currentColor;
	}

	@media (hover:hover) {
		.pdf-link:hover {
			color: white;
			background-color: #29ABE2;
			background-color: var(--hover-color);
		}
	}

	.pdf-link > span {
		display: flex;
		align-items: center;
	}

		.pdf-link > span > * {
			flex: 1
		}

		.pdf-link > span::before {
			font-family: Icons;
			font-size: x-large;
			content: "\F1C1";
			padding-right: 0.5em;
		}

	.icon-text {
		display: flex
	}

		.icon-text > img {
			width: 2.6em;
			height: 2.6em;
			padding: 0.5em;
			margin-bottom: -0.6em;
		}

	.citation {
		display: block;
		padding: 0.5em;
	}
	/*.citation::before {}*/

	.note {
		font-style: italic;
		font-size: 0.9em;
	}

		.note::before {
			content: 'Note: ';
			font-weight: 700;
		}

	.notes {
		padding: 0.5em;
		border-top: 1px solid black;
		font-size: smaller;
	}

	.footnote {
		font-size: smaller;
		font-style: italic;
	}

	.footnote-reference {
		font-size: 50%;
		vertical-align: super;
		font-style: italic;
	}

	.dual-level-list {
		display: flex;
		flex-wrap: wrap;
		grid-gap: 2em;
		list-style: decimal;
		/*font-size: 1.2em;*/
	}

		.dual-level-list > li {
			flex: 1;
			min-width: 15em;
			min-width: fit-content;
		}

			.dual-level-list > li > span {
				padding: 0.5em 0 0.5em 0;
				display: inline-block;
				text-decoration: underline;
			}

	.check-marks {
		list-style-type: none
	}

		.check-marks > li {
			text-indent: -2em
		}

			.check-marks > li::before {
				font-size: larger;
				color: green;
				content: "\2713\0020";
			}

	article .icon-title > *:first-child {
		width: 100%;
		padding: 1.0em;
		margin: 0 auto;
		/*background: linear-gradient(to bottom, #01b3fb 0%, #01b3fb 50%, #ccc 50%, #ccc 100%);*/
		background: linear-gradient(to bottom, #01b3fb 0%, #01b3fb 49.5%,#285FAC 50%, #ccc 50.5%, #ccc 100%);
	}

	article.icon-title > img:first-child {
		height: 8em;
		object-fit: scale-down;
		/*border-bottom: 1px solid rgba(255,255,255,0.6);*/
	}

article > .fill-short-illustration {
	height: 14em !important;
	overflow: hidden;
	display: flex;
	height: 8em;
	/*display:none;*/
}
article > .fill-short-illustration img {object-fit: cover}

/*#region ---- Generic tags classes, Mobile queries related */
@media screen and (min-width:640px) {
	.mobile-only {
			visibility: collapse;
			display: none !important;
		}
	}

	/*#endregion ---- Generic tags classes, Mobile queries related */
	/*#endregion ==== Generic tags classes */

	/*#region ==== CTAs styling */

	/* AMA, TODO, IMPORTANT: implement and show CTAs */
	#cta-1, #cta-2, #cta-3, #cta-4 {
		display: none
	}

	/*.cta-button {
	display: block;
	text-align: center;
	padding: 0.5em 0.75em 0.5em 0.75em;
	margin: 1em auto 1em auto;
	width: 15em;
	width: fit-content;
	background-color: #E00;
	color: white;
}

	.cta-button:hover {
		background-color: #29ABE2;
		background-color: var(--hover-color);
	}*/

	/*#endregion ==== CTAs styling */

	/*#region ==== header styling*/

	header {
		background-color: white;
		border-bottom: 1px solid #285FAC;
	}

		header a {
			color: inherit;
			text-decoration: none;
		}

	@media screen and (min-height:512px) {
		header {
			position: sticky;
			top: 0;
			z-index: 300;
		}
	}

	/*#region ---- #header-bar (logo+menu) */

	#header-bar {
		display: flex;
		align-items: center;
		color: #285FAC;
	}

	/* ensure both logo are hidden first ? */
	#header-logo, #menu-logo {
		display: none
	}

		/* ensure same dimensions if inside the menu or outside */
		#header-logo > img,
		#menu-logo > img {
			width: 10em;
			height: 4em;
		}

	#header-menu {
		list-style-type: none;
		text-transform: uppercase;
		font-weight: 600;
	}

		#header-menu > a {
			border: none;
		}

	#header-bar::after {
	}

	#header-menu {
		/*display: flex;
	align-items: stretch;*/
	}

	/*#header-menu > * {display: inline-block;}*/

	/*#header-menu > .active {
		border-bottom: solid #cccccc 1px;
	}*/

	@media (hover:hover) {
		#header-menu > a:hover {
			/*transition: .25s linear;*/
			color: #29ABE2; /*#0092CC;*/
			border-color: currentColor;
			/*color: white;background-color: #29ABE2;background-color: var(--hover-color);*/
		}
	}

	/* 'mobile' menu, vertical */
	/* AMA, RWD mobile first EXCEPT FOR mobile-only stuff */
	@media screen and (max-width:639px) {
		#hamburger-open-close {
			display: inline-block;
			border: none;
			font-size: 3em;
			margin: 0.25em 0.25em 0 auto;
		}

		@media (hover:hover) {
			#hamburger-open-close:hover {
				/*transition: .25s linear;*/
				color: #29ABE2;
				color: var(--hover-color);
			}
		}

		#header-logo {
			display: inline-block;
			padding: 0.5em 1em 0.5em 1em;
		}

		/*#header-bar {flex-wrap: wrap}*/

		#header-menu {
			display: none; /* hidden at start */
			/* allow overlay so no smurf of below content */
			background-color: white;
			position: absolute;
			top: 5em;
			top: calc(5em + 4px);
			border-top: 1px solid #628199;
			z-index: 300;
			width: 100%;
			flex-basis: 100%;
		}

			/* exclude the menu logo that is used only in horizontal mode */
			#header-menu > :not(#menu-logo) {
				display: block
			}

			/* trick: we use box-shadow instead of transparent border-left
			due to bad rendering at the corner, cf. https://stackoverflow.com/questions/25669823/css-border-right-doesnt-rendering-correctly
		   also note we need to reset the border-left for unknown reason/side effects?
		*/

			#header-menu > a { /*  */
				padding: 0.65em;
				padding-left: calc(0.5em + 6px);
				/*border-left: 6px solid rgba(0,0,0,0);*/
				border-bottom: solid #628199 1px;
			}

				/* order important here*/
				#header-menu > a.active {
					box-shadow: inset 6px 0px 0px 0px #285FAC;
					/*border-left: 6px solid #285FAC;
				border-left: 6px solid var(--theme-main-color);*/
					border-bottom: solid #628199 1px;
				}

		@media (hover:hover) {
			#header-menu > a:hover {
				box-shadow: inset 6px 0px 0px 0px #29ABE2;
				/*border-left: 6px solid #29ABE2;
			border-left: 6px solid var(--hover-color);*/
				border-bottom: solid #628199 1px;
			}
		}
	}

	/* 'mobile' menu, horizontal, inside header-bar */
	@media screen and (min-width:640px) {
		#header-menu {
			display: flex;
			align-items: stretch;
		}

			#header-menu > a {
				/*margin-bottom: 2px;*/
				padding: 0.3em 1.2vw 0 1.2vw;
				display: flex;
				align-items: center;
				/* to avoid smurf when no active item, aka in home page*/
				border-bottom: 6px solid rgba(0,0,0,0); /*rgba(0,0,0,0);*/
			}

				#header-menu > a.active {
					/*background: #1963af;*/
					border-bottom: 6px solid #285FAC;
					border-bottom: 6px solid var(--theme-main-color);
				}
	}

	@media screen and (min-width:640px) and (hover:hover) {
		#header-menu > a:hover {
			border-bottom: 6px solid #29ABE2;
			border-bottom: 6px solid var(--hover-color);
		}
	}

	/* ---- END Menu */
	/*#endregion #header-menu */

	/*#endregion --- #header-bar */

	/*#region ---- #header-contacts */

	#header-contacts-container {
		/*position: relative;
		box-sizing: unset;*/
	}

	#header-contacts {
		/*position: absolute;
		right: 0;*/
		/*top: 1px;*/
	}

	#header-contacts {
		font-size: 80%;
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		/* */
		justify-content: flex-end;
	}

		#header-contacts > a {
			padding: 0.25em 0.4em 0.25em 0.4em;
			display: flex;
			/*align-items: center;*/
			/*background-color: #285FAC;
			background-color: var(--theme-main-color);*/
			color: #285FAC;
			color: var(--theme-main-color);
			border-left: 1px solid #628199;
			/*border-bottom: 1px solid #628199;*/
		}

	@media (hover:hover) {
		#header-contacts > a:hover {
			/*transition: .25s linear;*/
			background-color: #29ABE2;
			background-color: var(--hover-color);
			color: white;
		}
	}

	#header-contacts .icon-text {
		/*margin: auto;*/
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	#header-contacts p {
		display: inline-block;
	}

	#header-contacts .social-medias > .font-icon {
		/*display: block;*/
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 120%;
		height: 100%;
		line-height: 1.5em;
	}

	@media screen and (max-width:359) {}

	@media screen and (max-width:639px) {
		#header-menu {
			background-color: white;
			position: absolute;
			z-index: 300;
			top: 100%;
			width: 100%;
			display: none;
			flex-basis: 100%;
		}

		/*#header-contacts-container {}*/

		#header-contacts {width: 100%}

			#header-contacts > a {
				flex-grow: 1;
				justify-content: center;
			}

			#header-contacts > :first-child
			{border-left: none !important}
	}

	@media screen and (min-width:640px) {
		#header-contacts-container {
			position: relative;
			box-sizing: unset;
		}

		#header-contacts {
			position: absolute;
			right: 0;
		}
			#header-contacts > a
			{border-bottom: 1px solid #628199}
	}
		
	@media screen and (max-width:1149px) {
			#header-contacts {
			top: 0;
			border-top: 1px solid #285FAC;
		}
	}

	@media screen and (min-width:1150px) {
		#header-contacts-container {
			position: absolute;
			top: 0;
			width: 100%;
		}

		#header-contacts {right: 0px}
	}

	/*#endregion ---- #header-contacts */
	/*#endregion ==== header */

	/*#region ==== main */

	main {
		margin: 0;
		padding: 0;
		color: #475467;
		color: var(--text-color);
		background-color: white;
		background-color: var(--background-color);
	}

		main p {
			margin: 0.5em 1em 0.5em 1em
		}

	@media screen and (min-width:640px) {
		/*main p {margin: 0.5em 1em 0.5em 1em}*/
	}

	main > section {padding: 1em 0 0 0}

		main > section.empty {
			padding: 0;
			margin: 0;
		}

		main > section:nth-child(odd)
		{background: #f3f3f3}

	main address {
		margin: 0.5em;
		font-style: unset;
	}

	@media screen and (min-width:640px) {
		main > section
		{padding: 1em var(--side-margin) 1em var(--side-margin)}

		/*main p {margin: 0.5em 0 0.5em 0}*/
	}

	/*#region ---- #banner */

#banner {
	padding:0;
	/*position: relative;
	height: 16em;*/
}

	/*-webkit-font-smoothing: antialiased;*/

	#banner-content {
		/*position: relative;
		z-index: 200;*/
		padding: 1em;
		background-color: #285FAC;
		color: white;
	}

		#banner-content h1 {
			color: inherit;
			font-size: 2em;
			font-weight: 300;
			border-bottom: 1px solid #628199;
		}

	#banner-image {display: none}

	@media screen and (max-width:639px) {
		#banner-content h1 {
			padding-bottom: 0.5em;
		}
	}

	@media screen and (min-width:640px) {
		#banner {
			position: relative;
			/*height: 16em;*/
			padding: 1em var(--side-margin) 1em var(--side-margin);
			border-bottom: 1px solid #285FAC;
			margin-bottom: 2em;
			/*margin-bottom: 4em;*/
			/*overflow: visible;*/
			background-color: #eee;
			background-image: url('/img/private/mosaic-colored.svg');
			background-size: contain;
		}

		#banner-content {
			position: relative;
			z-index: 200;
			background-color: rgb(38,94,172);
			max-width: 50%;
			min-width: 35em;
			margin: 5em 0 -2em 3em;
			box-shadow: 0.5em 0.5em 0.8em 0.4em #8d8a8a;
		}

			#banner-content h1 {
				padding: 0 0.5em 0.5em 0.5em;
			}

		#banner-image {
			position: absolute;
			float: right;
			top: 15%;
			right: 2.5%;
			z-index: 100;
			max-width: 40%;
			max-width: calc(min(30em,40%));
			display: flex;
		}

			#banner-image img {
				flex-shrink: 0;
				width: 100%;
				height: auto;
				vertical-align: middle;
			}
	}

	/*#endregion ---- #banner */
	/*#endregion ==== main */

	/*#region ==== footer styling*/
	footer {
		background: #8edaff;
		border-bottom: 1.5em solid #628199;
	}

		footer h2 {
			color: #1963af;
			font-size: 1.0em;
		}

	#footer {
		color: #343841;
		font-size: 0.9em;
	}

		#footer > * {
			border-bottom: solid white 1px;
		}

			#footer > *:last-child {
				padding: 1em 0em 1em 0em;
				border-bottom: none;
			}

		#footer h2 {
			/*font-size: 1.0em;*/
			padding: 0.25em 0 0 0;
			margin: 0em;
		}

		#footer p {margin: 0.5em}

		#footer ul {
			list-style: none;
			list-style-position: inside;
			padding-left: 1em;
			margin: 0.5em 0.5em 1em 0;
		}

		#footer li {padding: 0.25em}

			#footer li > a {
				color: inherit;
				text-decoration: none;
			}

	/*#region ---- #footer-top */

	#footer-top {
		border-bottom: solid white 1px;
		padding-top: 1em;
	}

		#footer-top > div {padding: 1em}

		#footer-top:last-child {margin-bottom: 0em}

		#footer-top ul:last-child {margin-bottom: 0em}

		#footer-top .idigo-logo {
			width: 12em;
			aspect-ratio: 4;
			height: 3em;
		}

		#footer-top #certifications > li {
			display: inline-block;
			padding-right: 10px;
		}

		#footer-top #certifications span {
			display: none
		}

		#footer-top #certifications .iso-9001 {
			width: 3.5em;
			aspect-ratio: 1.25;
			height: 5em;
		}

		#footer-top #certifications .bizsafe-3 {
			width: 9em;
			aspect-ratio: 3;
			height: 3em;
		}

	footer .motto {
		text-decoration: underline solid;
	}

	/*AMA: TODO, simplify breakpoints and put responsive, simple css as default*/
	@media screen and (max-width:819px) {
		#footer-top > div {
			border-top: solid white 1px
		}

			#footer-top > div:first-child {
				border-top: none
			}

		#certifications > ul {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

			#certifications > ul > li {
				padding: 1.0rem
			}
	}

	@media screen and (min-width:820px /*768px*/ ) {
		#footer-top {
			display: flex
		}

			#footer-top > div:first-child {
				border-left: none
			}

			#footer-top > div {
				flex: 1;
				border-left: solid white 1px;
			}

		#summary {
			flex: 2.5
		}

		#legal {
			flex: 2
		}

		#certifications {
			text-align: center;
			flex: 0.5 !important;
		}

			#certifications > ul {
				display: flex;
				flex-direction: column;
				padding-left: 0;
				height: 100%;
			}

				#certifications > ul > li {
					flex: 1
				}
	}

	/*#endregion ---- #footer-top */

	/*#region ---- #footer-bottom */

	#footer-bottom {
		display: flex;
		align-items: center;
		margin: 0 1em 0 1em;
	}

		#footer-bottom > .copyright {
			display: inline
		}

		#footer-bottom > .social-medias {
			margin-left: auto
		}

		#footer-bottom .font-icon {
			font-size: 1.25em;
			display: inline-block;
			color: white;
			background: #628199; /*#59595c;*/
		}

	@media (hover:hover) {
		#footer-bottom .font-icon:hover {
			background: #1963af
		}
	}

	/*#endregion ---- #footer-bottom */
	/*#endregion ==== footer */

	/*#region ____ index.html */
	/*#region ____ index.html .pie-chart */
	/*
	cf. https://css-tricks.com/using-css-to-set-text-inside-a-circle/
	cf. https://codepen.io/thebabydino/pen/vPddeq
*/

	/* AMA, TODO, redo the pie-chart to avoid using position relative/absolute */
	.pie-chart-grid {
		position: relative;
		max-width: 1260px;
		margin: 1em auto;
	}

		.pie-chart-grid::before {
			content: "";
			display: block;
			padding-top: 50%; /* Set the padding-top to 50% to create a 2:1 aspect ratio (height:width) */
		}

	.pie-chart-labels {
		position: absolute;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0 2em;
		margin: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* Create a 2-column grid with equal widths */
		/* gap: 10px; Adjust the gap between items as needed */
		list-style: none;
		color: #285FAC;
		color: var(--theme-main-color);
		font-variant: small-caps;
		font-size: 1.33em;
		font-size: calc(max(min(3vw,1.33em),12px));
		font-weight: 500;
	}

		.pie-chart-labels > li {
			display: flex; /* Make items flex containers to center content */
			/*padding: 0.75em;*/
		}

			.pie-chart-labels > li > span {
				/*background-color: rgba(243, 243, 243, 0.8);*/
				height: fit-content;
				width: fit-content;
			}

			/* Target odd items (left side) and align text to the left */
			.pie-chart-labels > li:nth-child(odd) {
				/*text-align: left;*/
				/*justify-content: flex-start;*/
				padding-right: 25%;
			}

			/* Target even items (right side) and align text to the right */
			.pie-chart-labels > li:nth-child(even) {
				/*text-align: right;*/
				justify-content: flex-end;
				padding-left: 25%;
				text-align: end;
			}

			.pie-chart-labels > li:nth-child(1),
			.pie-chart-labels > li:nth-child(3) {
				border-right: 1px solid #ccc;
			}

			.pie-chart-labels > li:nth-child(3),
			.pie-chart-labels > li:nth-child(4) {
				border-top: 1px solid #ccc;
				align-items: flex-end;
			}

		.pie-chart-labels > .icon-text:nth-child(even) > img {
			order: 2;
			padding-right: 0;
		}

		.pie-chart-labels > .icon-text:nth-child(odd) > img {
			padding-left: 0;
		}

	.pie-chart-svg {
		position: absolute;
		z-index: 100;
		top: 0;
		left: 25%;
		padding: 2em;
		display: block;
		width: 50%;
		margin: auto
	}

	/*#endregion ==== Pie chart */

	/*#region ---- Pie chart descriptions */

	@media screen and (min-width:820px) {
		#commitments-descriptions {
			display: grid;
			grid-template-columns: auto auto;
		}

		.framed-detail summary {
			list-style: none;
			padding-left: 0.25em !important;
		}

		.framed-detail[open] summary {
			pointer-events: none
		}
	}

	.framed-detail {
		margin: 1em;
		/*background-color: #f3f3f3;*/
		border: solid #1963af;
		border-width: 1px;
		box-shadow: 0.25em 0.25em 0.75em #8d8a8a;
	}

		.framed-detail > summary { /*[open]*/
			padding: 0 0.5em 0.5em 1.5em;
			/*background-color: white;*/
			color: #265eac;
			cursor: pointer;
			border-bottom: 1px solid #1963af;
		}

		.framed-detail p {
			padding: 0 1.0em 0 1.0em
		}

		.framed-detail > summary > * {
			display: inline
		}

	/*#endregion ---- Pie chart descriptions */

	/*#region ---- #applications*/

	#applications {
	}

	#applications-list {
		padding-top: 1em;
		display: grid;
		grid-gap: 1em 3em;
		grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
		text-align: justify;
	}

		#applications-list h2 .secline {
			font-size: 0.75em;
			padding-top: 0.3em;
			border-top: none;
			text-decoration: none;
		}

		#applications-list > section {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: stretch;
		}

			#applications-list > section > a {
				display: flex;
				flex-direction: column-reverse;
			}

				#applications-list > section > a > h2 {
					padding: 0.25em
				}

		#applications-list .img-sprite {
			padding: 0;
			margin: auto;
			width: 50%;
			/*height: 10em;
		aspect-ratio: 1;*/
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid blue;
		}

		#applications-list > section > p {
			flex: 1;
			font-size: 0.9em;
		}

	.application > .img-sprite {
		padding: 0;
		margin: auto;
		width: 25%;
		max-width: 15em;
		/*height: 10em;
		aspect-ratio: 1;*/
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid blue;
	}

	/*#endregion ---- #applications*/

	/*#region ---- #resources*/

	#resources {
		background-color: black;
		background: url(/img/resources-bg.jpg) no-repeat;
		background-size: cover;
		color: #eef;
		padding: 3em 1em 3em 1em;
	}

		#resources h3 {
			/*font-size: 2.5em;*/
			font-weight: 100;
			color: #eef;
			padding: 1em;
		}

	/*#endregion ---- #resources*/

	/*#region ---- #map-contacts*/

	#map-contacts {
		background-color: #ccc;
		background: url(/img/idigo-map.jpg) no-repeat;
		background-size: cover;
		background-position: center;
		background-position-x: 60%;
		display: flex;
	}

	#map-contacts-content {
		display: inline-block;
		max-width: 65%;
		padding: 1em;
		margin: 3em;
		background-color: #265eac;
		color: white;
		font-size: 0.8em;
		font-size: calc(min(0.5em + 1vw,1em));
		box-shadow: 0.25em 0.25em 0.75em #265eac;
	}

		#map-contacts-content > * {
			width: fit-content
		}

		#map-contacts-content p {
			margin: 0.5em
		}

		#map-contacts-content > p:first-child {
			font-weight: 500
		}

	#contacts-links {
		width: inherit;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		padding-top: 0.75em;
		border-top: 1px solid currentColor;
	}

		#contacts-links > a {
			padding-right: 3em;
			color: inherit;
			text-decoration: none;
		}

			#contacts-links > a:hover {
				background-color: #29ABE2;
				background-color: var(--hover-color);
			}

		#contacts-links .icon-text {
			display: inline-block;
			cursor: pointer;
			margin: 0;
			padding: 0.25em;
		}

			#contacts-links .icon-text > i {
				padding-right: 0.1em
			}

			#contacts-links .icon-text:hover {
				background-color: #29ABE2;
				background-color: var(--hover-color);
			}

	#map-focus {
		flex: 1
	}

		#map-focus:hover {
			cursor: pointer
		}

	@media screen and (max-width:820px) {
		#contacts-links {
			grid-template-columns: auto
		}
	}

	/*#endregion ---- #map-contacts*/

	/*#endregion ____ index.html */

	/*#region ____ products.html */
	/*#products-page > header{background-image: url(/img/products-bg.jpg)}*/

	/*.section-content picture {
		display: block;
		padding: 0.5em;
	}*/

	/*.section-content img {
		width: 100%;
		height: auto;
		display: block;
		padding: 1em;
	}*/

	.centered-illustration {
		display: block;
		width: 80%;
		margin: 1em auto;
	}

	.side-image {
		display: block;
		width: 80%;
		margin: 1em auto;
	}

	@media screen and (min-width:640px) {
		.centered-illustration {
			/*max-width: 100em;*/
			margin: 1em auto;
			padding: 1em;
		}

		.side-image {
			float: left;
			width: 33.33%;
			max-width: 28em;
			margin: 1em 2em 1em 0;
		}
	}

	.offer-image {
		border: 2px solid #000
	}

	#pipe-markers .offer-image {
		border-color: #B39B80
	}

	#labels .offer-image {
		border-color: #70D151
	}

	#products-page .section-content::after {
		content: "";
		clear: both;
		display: table;
	}

	.important-note {
		clear: both;
		background: lightyellow;
		color: #2E5AA6;
		border-top: 1px solid #2E5AA6;
		border-bottom: 1px solid #2E5AA6;
		/*overflow: hidden;*/
		/*AMA, TODO: local trick here to avoid gap after peekee
			instead should be a general stuff
		*/
		margin: 1.5em 0 0 0;
		padding-bottom: 0.5em;
	}

		.important-note > :first-child { /*> h2*/
			margin: 0;
			display: block;
			width: 100%;
			text-align: center;
			background-color: #2E5AA6;
			color: white;
			padding: 0.25em;
		}


	@media screen and (min-width:640px) {
		.important-note {
			margin: 1.5em;
			border: 1px solid #2E5AA6;
			border-radius: 25px;
			overflow: hidden;
			/*margin: 1.5em 1em 1em 1em;*/
			box-shadow: 0.5em 0.5em 0.8em 0.4em #8d8a8a;
		}

			.important-note .button-link {
				/*background-color: #2E5AA6;*/
				border-radius: 10px;
			}
	}

	.digital-twin {
	}

		.digital-twin > section {
			flex: 1;
			margin: 0.5em 1.0em 0.5em 1.0em;
		}

		.digital-twin > img.peekee-head {
			display: block;
			width: 50%;
			max-width: 8em;
			margin: 0 auto;
			padding-bottom: 1em;
		}

	@media screen and (min-width:640px) {
		.digital-twin {
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
		}

			.digital-twin > img.peekee-head {
				margin: 0em 2em 1em 1em !important;
				padding: 0;
			}
	}

	.light-on-off {
		width: 80%;
		margin: 1em auto 2em auto;
		padding: 0;
		box-shadow: 0.25em 0.25em 0.75em #8d8a8a;
		/*position:absolute;
		width: 80%;
		margin: auto;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		position: relative;*/
		/*display: flex;*/
	}

	@-webkit-keyframes fade {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes fade {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.fade {
		-webkit-animation-name: fade;
		animation-name: fade;
	}

	.light-on-off > img {
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		width: 100% !important;
	}

	.light-on-off > .off {
		/*z-index: -2;*/
	}

	.light-on-off > .on {
		margin-top: -48.5% !important;
		-webkit-animation-name: fade;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-duration: 10s;
		-webkit-animation-fill-mode: both;
		animation-name: fade;
		animation-iteration-count: infinite;
		animation-duration: 10s;
		animation-fill-mode: both;
	}


	/*#products-page main p {
	margin: 0.5em 1em 0.5em 1em;
}*/

	.part-number {
		flex: 1;
		text-align: left;
		min-width: calc(max(45%, 321px));
		background-color: #f3f3f3;
		border-top: 1px solid #5278B5;
		border-bottom: 1px solid #5278B5;
	}

		.part-number > h4 {
			background-color: #5278B5;
			color: white;
			margin: 0;
			padding: 0.25em 1em 0.25em 1em !important;
		}

		.part-number > div {
			background-color: #f3f3f3;
			/*color: black;*/
			/*border-radius: 0.5em;*/
			padding: 0.25em;
			margin: 0;
		}

			.part-number > div > p {
				margin: 0.5em 1em 0.5em 1em;
			}

		.part-number .life-span {
			padding-top: 0.5em;
			margin-top: 1em !important;
			border-top: 1px solid black;
		}

		.part-number .specification-value {
			padding-top: 0.5em;
			margin-top: 1em !important;
			border-top: 1px solid black;
		}

	@media screen and (min-width:640px) {
		.part-numbers-descriptions {
			margin: 1em 0 2em 0;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			grid-gap: 2vw;
		}

			.part-numbers-descriptions::after {
				content: none !important;
			}

		.part-number {
			overflow: hidden;
			border-radius: 0.5em;
			box-shadow: 0.25em 0.25em 0.75em #8d8a8a;
		}
	}

	/* to match .part-numbers-descriptions articles??? */
	.documents {
		overflow: visible;
		margin: 1em 0 2em 0;
		background-color: #f3f3f3;
		border-top: 1px solid #5278B5;
		border-bottom: 1px solid #5278B5;
	}

		.documents h3 {
			margin: 0;
			padding: 0.25em !important;
			background-color: #5278B5;
			color: white;
			/* border-radius: 0.5em; */
		}

	@media screen and (min-width:640px) {
		.documents {
			border: 1px solid #5278B5;
			border-radius: 0.5em;
			overflow: hidden;
			box-shadow: 0.25em 0.25em 0.75em #8d8a8a;
		}
	}

	/*#endregion ____ products.html */

	/*#region ____ services.html */
	/*#services-page > header {background-image: url(/img/services-bg.jpg)}*/

	/*#services-page > main b {
		color: #285FAC;
		color: var(--theme-main-color);
	}*/

	/* AMA, TODO, IMPORTANT: this is also used in other pages, .e.g applications.html */

	.page-menu {
		/*position: sticky;top: 0;z-index: 200;*/
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin-bottom: 1em;
	}

		.page-menu > a {
			flex: 1;
			display: flex;
			align-items: center;
			/*font-size: larger;*/
			text-decoration: none;
			color: #285FAC;
			color: var(--theme-main-color);
			background-color: #f3f3f3;
		}

			.page-menu > a > picture:first-child {
				flex: 0.5;
			}

	.page-menu.simple > a {
		flex: 1;
		display: flex;
		align-items: center;
		padding: 0.75em;
		justify-content: center;
	}

	.page-menu > a:hover {
		background-color: #29ABE2;
		color: white;
	}

	.page-menu > a > * {
		flex: 1;
		margin:0.5em;
	}

	/* AMA, ugly patch to fix 2 pixels missing in the bottom*/
	/*.page-menu > a > .img-sprite {overflow: hidden}
			.page-menu > a > .img-sprite > img {transform: scale(1.1)}*/

	.page-menu > a > img {
		min-width: 25%;
		flex: 0;
		margin: 0.5em;
		padding: 0;
		max-height: 4em;
	}

	.page-menu .secline {
		display: block;
		font-size: smaller;
	}

	@media screen and (max-width:639px) {
		.page-menu {
			display: flex;
			/*display: grid;
			grid-template-columns: auto;*/
			/*grid-template-columns: auto auto;*/
			grid-gap: 1px;
			background-color: #285FAC;
			padding: 1px 0 1px 0;
		}

			.page-menu > a {
				flex: 1;
				min-width: 40%;
				display: flex;
				align-items: center;
				/*min-width: 12em;*/
			}

			.page-menu.simple > a {
				flex-direction: column;
			}

	}

	@media screen and (min-width:640px) {
		.page-menu {
			grid-gap: 1em;
			margin: 1em;
		}

			.page-menu > a {
				/*height: 100%;*/
				display: flex;
				align-items: center;
				min-width: 12em;
				/*font-size: larger;*/
				color: #285FAC;
				color: var(--theme-main-color);
				border: 2px solid #285FAC;
			}
	}

	#peekee-details img {
		display: block;
		margin: 1em auto 2em auto;
		float: none;
		/*width: 80%;*/
	}

	/*.services-details section {
		overflow: auto
	}

		.services-details section:not(:last-child) {
			border-bottom: 1px solid black;
		}

	.services-details img {
		border-color: #285FAC;
		background-color: var(--theme-main-color);
	}*/

	@media screen and (min-width:640px) {
	}

	/*#endregion ____ services.html */

	/*#region ____ applications.html */
	/*#applications-page > header {background-image: url(/img/applications-bg.jpg)}*/

	/* special rules for this page due to the added firefighter image
needed to be aligned bottom and have enough space else looks wrong */

	/*#applications-page .section-content section > img {
		border-radius: 50%;
	}

	@media screen and (min-width:640px) {
		#applications-page #header-banner {
			padding-right: 0;
		}

		#applications-page #header-banner-image {
			flex-direction: column-reverse;
			margin-left: 3em;
		}

		#applications-page .section-content section > img {
			float: left;
			width: 25%;
			height: 100%;
			margin: 0 2em 0.5em 0;
		}
	}

	@media screen and (max-width:800px) {
		#applications-page #header-banner {
			display: block !important;
		}

		#applications-page #header-banner-image {
			display: none;
		}
	}*/

	.tabs {
		/*overflow: hidden;*/
		padding: 0;
		margin: 0;
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		background-color: #f1f1f1;
		display: flex;
		flex-wrap: wrap;
	}

		.tabs li {
			/* Force at least 2 columns */
			min-width: 45% !important;
			padding: 0.5em;
			margin: 0;
			border-bottom: 1px solid #ccc;
			border-right: 1px solid #ccc;
			flex: 1;
			min-width: 15em;
			align-items: center;
			text-align: center;
			list-style-type: none;
			cursor: pointer;
		}

			.tabs li:hover {
				background-color: #29ABE2;
				background-color: var(--hover-color);
				color: white;
			}

			.tabs li.active {
				background-color: #1963af;
				color: white; /*rgb(216, 216, 223);*/
			}

	.tabcontent {
		display: none;
		padding: 6px 12px;
		border: 1px solid #ccc;
		border-top: none;
	}

	table img {
		width: 100%;
		padding: 0.5em;
		overflow: visible;
		max-height: 8em;
	}

	td > .secline {
		display:block;
		font-weight: 400;
	}


	#imo-A116-categories-table {
		overflow: auto;
		/*caption-side: bottom;*/
		margin-top: 0.5em;
	}

		/*#imo-A116-categories-table img {
			width: 100%;
			padding: 0.5em;
			overflow: visible;
			max-height: 8em;
		}*/

		#imo-A116-categories-table .category-code {
			width: 10%;
			min-width: 4em;
			/*max-width: 8em;*/
			background-color: #ddd;
		}

		#imo-A116-categories-table .category-meaning {
			width: 20%;
			min-width: 8em;
			/*max-width: 16em;*/
			background-color: #eee;
		}

		#imo-A116-categories-table .category-description {
		}

		#imo-A116-categories-table .category-shape {
			width: 15%;
			min-width: 4em;
			max-width: 8em;
		}

		#imo-A116-categories-table th:first-child,
		#imo-A116-sign-definition-table th:first-child,
		#imo-A116-categories-table td:first-child,
		#imo-A116-sign-definition-table td:first-child {
			font-weight: 700
		}

		/*#imo-A116-categories-table > tbody th:last-child {
			text-align: start;
		}*/

		#imo-A116-categories-table b
		{font-weight: 700}

	#imo-A116-sign-definition-table img {
		width:100%;
		padding: 1em;
	}

	#imo-A116-sign-definition-table .category-code {
		width: 20%;
		min-width: 8em;
		max-width: 12em;
		background-color: #ddd;
	}

	#imo-A116-sign-definition-table .category-graphic {
		width: 30%;
		min-width: 8em;
		max-width: 16em;
	}

	#imo-A116-sign-definition-table td:last-child {
		text-align: center;
	}

	#imo-A116-sign-examples-table > tbody > tr:first-child {
		background-color: #eee;
	}

	#iso-14726-classes {
		width: 95%;
		margin: 1em;
		/*grid-gap: 0.5em;*/
	}

	col.fluid-color {
		width: 20%;
	}

	col.fluid-color-code {
		width: 15%;
	}

	th.fluid-class {
		font-weight: 700;
		font-variant: small-caps;
		font-size: 1.1em;
	}

	th.fluid-sample {
		text-transform: uppercase;
	}

	#iso-14726-subclasses-tabs {
		font-variant: small-caps;
		font-size: 1.1em;
	}

	.iso-14726-dual-color-coding {
		/*padding: 0;*/
		border: 1px solid #ccc;
		/*background-color: #f1f1f1;*/
	}

	.iso-14726-dual-color-coding {
		display: none;
	}

		.iso-14726-dual-color-coding.active {
			display: block;
		}

		.iso-14726-dual-color-coding > summary {
			/*display: block;*/
			width: 100%;
			text-align: center;
			/*text-transform: capitalize;*/
			color: #1963af; /*rgb(216, 216, 223);*/
			background-color: white;
			margin: 0;
			padding: 0.5em;
		}

		.iso-14726-dual-color-coding h4 {
			color: inherit;
		}

		.iso-14726-dual-color-coding > p {
			padding: 0 1em 0 1em;
		}

		.iso-14726-dual-color-coding > table {
			font-size: 0.9em;
			/*padding: 0 0.5em 0 0.5em;
	margin: 0.5em;
	background-color: white;*/
		}

			.iso-14726-dual-color-coding > table > thead {
				/*background-color: #f1f1f1;
		color: rgb(71, 84, 103);*/
			}

			.iso-14726-dual-color-coding > table > tbody {
			}

		.iso-14726-dual-color-coding .left,
		.iso-14726-dual-color-coding .right {
			width: 15%;
		}

	.fluid-sample-left::before,
	.fluid-sample-right::before {
		content: '➔';
	}

	.fluid-sample-left {
		border-right: none;
	}

	.fluid-sample {
		border-right: none;
		border-left: none;
	}

	.fluid-sample-right {
		border-left: none;
	}

	.iso-14726-dual-color-coding {
		display: none;
	}

		.iso-14726-dual-color-coding.active {
			display: block;
		}

	.iso-black-sample {
		background-color: black;
		color: white;
	}

	.iso-blue-sample {
		background-color: #003fb1;
		color: white;
	}

	.iso-brown-sample {
		background-color: #b47218;
		color: white;
	}

	.iso-green-sample {
		background-color: green; /*#00b050;*/
		color: white;
	}

	.iso-grey-sample {
		background-color: #888;
		color: white;
	}

	.iso-maroon-sample {
		background-color: #800;
		color: white;
	}

	.iso-orange-sample {
		background-color: #FFA500;
		color: black;
	}

	.iso-silver-sample {
		background-color: #ccc;
		color: black;
	}

	.iso-red-sample {
		background-color: #e11;
		color: white;
	}

	.iso-violet-sample {
		background-color: #7030a0;
		color: white;
	}

	.iso-yellow-sample {
		background-color: #fe0;
		color: black;
	}

	#iso-14726-classes-details {
		display: flex;
		flex-wrap: wrap;
		grid-gap: 0.5em;
		align-items: center;
		text-align: center;
		list-style-type: none;
	}

		#iso-14726-classes-details > li {
			height: 3em;
			margin: auto;
			text-decoration: none;
			min-width: 8em;
			border: 1px solid black;
			flex: 0;
			display: flex;
			flex-direction: column;
		}

			#iso-14726-classes-details > li::before,
			#iso-14726-classes-details > li::after {
				content: '';
				flex: 1;
			}

	.asme-black-sample {
		background-color: black;
		color: white;
	}

	.asme-blue-sample {
		background-color: #003fb1;
		color: white;
	}

	.asme-brown-sample {
		background-color: #b47218;
		color: white;
	}

	.asme-green-sample {
		background-color: green; /*#00b050;*/
		color: white;
	}

	.asme-grey-sample {
		background-color: #888;
		color: white;
	}

	.asme-brown-sample {
		background-color: #6F4E37;
		color: white;
	}

	.asme-orange-sample {
		background-color: #FFA500;
		color: black;
	}

	.asme-grey-sample {
		background-color: #888;
		color: white;
	}

	.asme-red-sample {
		background-color: #e11;
		color: white;
	}

	.asme-violet-sample {
		background-color: #7030a0;
		color: white;
	}

	.asme-yellow-sample {
		background-color: #fe0;
		color: black;
	}

	#asme-13-1-color-coding-table {
		text-align: center
	}

		#asme-13-1-color-coding-table > colgroup > .color {
			width: 20%
		}

		#asme-13-1-color-coding-table .sample {
			display: flex;
			align-items: center;
			font-weight: 600;
			/*text-transform: capitalize;*/
		}

			#asme-13-1-color-coding-table .sample > * {
				flex: 1
			}

			#asme-13-1-color-coding-table .sample::before,
			#asme-13-1-color-coding-table .sample::after {
				content: '➔';
				font-size: larger;
				padding: 0 0.5em;
			}

		#asme-13-1-color-coding-table .secline {
			font-size: smaller;
			font-weight: initial;
			display: block;
		}

		#asme-13-1-color-coding-table td:first-child {
			text-align: initial
		}

	#asme-13-1-sized-table > tbody > tr > td > span {
		font-size: smaller
	}

	#ghs-pictograms > colgroup > #ghs-hazard {
		width: 15%;
		min-width: 8em;
	}

	#ghs-pictograms > colgroup > #ghs-pictogram {
		width: 15%;
		min-width: 8em;
	}

	#ghs-pictograms td:first-child {
		background-color: #eee
	}

	#ghs-pictograms tr > td:first-child:first-line {
		text-decoration: underline;
		font-weight: 700;
	}

	#ghs-pictograms img {
		padding: 0;
		margin: 0;
	}

	.chemical-category {
		font-size: smaller
	}

		.chemical-category::before {
			margin-left: 0.15em;
			content: "[";
		}

		.chemical-category::after {
			margin-right: 0.15em;
			content: "]";
		}

	#industry-segments {
		list-style-type: none;
		margin: 1em;
		padding: 0;
	}

		#industry-segments > li {
			margin: 0;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			background-color: #f3f3f3;
		}

			#industry-segments > li > * {
				flex: 1;
				width: 100%;
			}

			#industry-segments > li > h3,
			#industry-segments > li > h4 {
				text-decoration: unset;
				padding: 0.5em;
				margin: 0;
			}

			#industry-segments > li > img {
				flex:0;
				height:auto;
				max-height: 14em;
				margin: 0;
				object-fit: cover;
			}

	@media screen and (max-width:639px) {
		#industry-segments {
			display: grid;
			grid-template-columns: auto auto;
			grid-gap: 1px;
			background-color: #285FAC;
			padding: 1px 0 1px 0;
		}
	}

	@media screen and (min-width:640px) {
		#industry-segments {
			display: flex;
			flex-wrap: wrap;
			grid-gap: 1em;
			margin: 1em;
		}

			#industry-segments > li {
				flex: 1;
				display: flex;
				align-items: center;
				min-width: calc(max(12em,40vw));
				max-width: 60em;
				/*font-size: larger;*/
				color: #285FAC;
				color: var(--theme-main-color);
				border: 2px solid #285FAC;
			}
	}

	/*#endregion ____ applications.html */

	/*#region ____ resources.html */

	/*#resources-page > header {background-image: url(/img/resources-bg.jpg)}*/

	#resources-page #overview {
		padding-bottom: 0
	}

		#resources-page #overview h1 {
			display: none
		}

	#resources-page #documents {
		padding-top: 0
	}

	/* #resources-page */
	.fragments-nav {
		font-size: 1.3em;
		font-variant: small-caps;
	}

		.fragments-nav > ul > li {
			padding: 0.25em;
			background-color: #285FAC;
		}

			.fragments-nav > ul > li:hover {
				/*transition: .25s linear;*/
				background-color: #29ABE2
			}

		.fragments-nav a {
			color: white
		}

	.documents-categories,
	.about-categories {
		display: flex;
		flex-wrap: wrap;
		grid-gap: 2em;
		font-size: 1em;
		font-weight: 100;
		margin-top: 1em;
	}

		.documents-categories > section {
			/*display:inline-block;*/
			flex: 1;
			min-width: 20em;
		}

			.documents-categories > section h2 {
				text-align: center;
				margin: auto;
				/*text-transform: uppercase;*/
				color: white;
				background-color: #E00;
				/* AMA, try to do something nicer than this flashy red stuff
			color: #285FAC;
			color: var(--theme-main-color);
			background-color: inherit;
			border: 2px solid currentColor;*/
			}

			.documents-categories > section > ul {
				/*display: flex;
			flex-wrap: wrap;*/
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
				text-align: center;
				padding: 0;
			}

				.documents-categories > section > ul > li {
					/*flex: 1;*/
					list-style-type: none;
					padding: 1em 1em 0 1em;
				}

					.documents-categories > section > ul > li > a {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

						.documents-categories > section > ul > li > a > * {
							flex: 0
						}

						.documents-categories > section > ul > li > a > picture,
						.documents-categories > section > ul > li > a > picture > img,
						.documents-categories > section > ul > li > a > img {
							margin: 0;
							padding: 0;
							height: auto;
						}

	/*#endregion ____ resources.html */

	/*#region ____ about-us.html */

	/*#about-us-page > header {background-image: url(/img/about-us-bg.jpg)}*/

	#about-us-page #overview .secline {
		display: none
	}

	#about-us-page .section-content > h2 {
		/*padding-top: 0.5em;*/
		padding: 0.5em 0 0.5em 0;
		font-variant: small-caps;
		font-weight: 700;
		font-size: 1.5em;
		line-height: 1.2;
		text-align: center;
		display: flex;
	}

		#about-us-page .section-content > h2::before,
		#about-us-page .section-content > h2::after {
			content: "";
			flex: 1 1;
			border-bottom: 1px solid #000;
			margin: auto;
		}

		#about-us-page .section-content > h2::before {
			margin-right: 1em
		}

		#about-us-page .section-content > h2::after {
			margin-left: 1em
		}

	main .motto {
		font-variant: small-caps;
		text-align: center;
		/*font-style: italic;*/
		color: #285FAC;
		padding-top: 0.5em;
		/*font-weight: 700;*/
	}

	/*main .motto::before {
		content: "🚀"
	}

	main .motto::after {
		content: "🚀";
		display: inline-block;
		transform: scale(-1, 1);
	}*/

	#team-members {
		display: flex;
		flex-wrap: wrap;
	}

		#team-members > article {
			flex: 1;
			min-width: 12em;
			background-color: white;
			/*border-radius: 0.5em;
		border: 1px solid #5278B5;*/
			padding: 1em;
			margin: 1em;
			box-shadow: 0.25em 0.25em 0.75em #8d8a8a;
			/*text-align: center;*/
		}

	.employee {
		padding-top: 0.5em !important;
	}

		.employee > h3 {
			text-decoration: none;
			/*text-align: center;*/
			padding-bottom: 0.5em;
			border-bottom: 1px solid #8d8a8a;
		}

	.employee-position {
		display: block;
		padding-top: 0.25em;
		font-size: 0.8em;
		font-weight: normal;
		color: #285FAC;
	}

	#customers {
		margin-top: 0
	}

		#customers > figcaption {
			display: none;
			/*background-color: unset;
	border: unset;
	font-size: 1em;*/
		}

		#customers > ol {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			padding: 1em 0 0 0;
			margin: 0;
		}

			#customers > ol > li {
				flex: 1;
				max-width: 20em;
				margin: auto;
				padding: 1em;
				min-width: 12em;
				display: flex;
				/*max-width: 40vw;*/
				/* border: solid 1px black;*/
			}

				#customers > ol > li > img {
					/*margin: 0;
					height: 8em;*/
				}

	#references {
		background-color: white;
	}

		#references tr td:last-child {
			text-align: center
		}

	#customers-references h3 {
		background-color: #1963af;
		color: white;
		/*border: 1px solid #bbb;
		border-bottom: unset;*/
		padding: 0.5em;
		margin: 0;
		font-size: 1.25em;
		font-weight: 500;
		/*text-align: center;
		text-decoration: none;*/
	}

	/*#endregion ____ about-us.html */

	/*#region ____ legal.html */

	#legal-categories {
	}

		#legal-categories > li {
			min-width: 12em
		}

	#legal-page h3 {
		margin-top: 1em;
	}

	/*#legal-page ul {
list-style-type: none
}

#legal-page li {
text-indent: -2em
}

#legal-page li::before {
	font-size: larger;
	color: green;
	content: "\2713\0020";
}*/

	/*#endregion ____ legal.html */

	/* END Clean CSS classes for v1.1 */