/*
Theme Name: Single Page Layout
Author: Daniel Kowalski
Author URI: http://itsystempartner.de/
Description: Single page layout framework for product maketing sites
Version: 1.8.7.7
*/
/*###########################################################################*/
/*---Date 2025/08/15---*/
/*###########################################################################*/
/*
-	01 // generic styles
	-	01a // import local fonts
	-	01b // cross browser normalization
	-	01c // hyphenation & alignment control
-	02	// ui components
	-	02a // header
	-	02b // content
	-	02c // footer
-	03 // views
	-	03a // global
	-	03b // single page layout
	-	03c // company presentation
	-	03d // single content area
	-	03e // glossary
	-	03f // news
-	04 // animation
	-	04a // header
	-	04b // single page layout
	-	04c // company presentation
	-	04d // single content area
-	05	// media queries // screen size
*/
/*###########################################################################*/
/*---01	// generic styles---*/
/*###########################################################################*/
/*---01a // import local fonts---*/
/*---variable fonts still create issues in safari---*/
/*
@font-face {
	font-family: Open Sans;
	src: url("fonts/OpenSans-VariableFont_wdth,wght.ttf");
	font-style: normal;
}
@font-face {
	font-family: Open Sans;
	src: url("fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf");
	font-style: italic;
}
*/
/*---normal---*/
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}
/*---italic---*/
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-LightItalic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-MediumItalic.ttf") format("truetype");
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/static/OpenSans-SemiBoldItalic.ttf") format("truetype");
	font-weight: 600;
	font-style: italic;
}
/*###########################################################################*/
/*---01b // cross browser normalization---*/
input,
textarea {
	font: 12px "Open Sans", sans-serif;
	letter-spacing: 0.015em;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
/*---reset opacity for input placeholder content---*/
::placeholder {
	opacity: 0.5;
	text-transform: uppercase;
}
/*---safari // remove outlines from input & button elements in focus---*/
input:focus,
button:focus {
	outline: none;
}
/*---safari // remove textarea inner shadow on mobile---*/
input[type="text"],
input[type="email"],
input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
}
/*---safari // remove tap highlight from buttons and links---*/
button,
a {
	-webkit-tap-highlight-color: transparent;
}
/*---firefox---*/
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
/*###########################################################################*/
/*---01c // hyphenation & alignment control---*/
.key-feature .content p,
.key-feature .content ul,
.usage-example .text p,
.usage-example .text ul,
.hero-feature .content p,
.hero-feature .content ul,
.testimonial-card blockquote p,
.single-content-area .entry-content p,
.single-content-area .entry-content ul,
.single-content-area .entry-content .generic-content-widget h4,
.company-presentation .solution-gallery .gallery-item p,
.company-presentation .expertise-container .expertise-content p,
.company-presentation .key-topics-list .key-topic .key-topic-content p,
.company-presentation .key-topics-list .key-topic .key-topic-content ul,
.glossary .glossary-container .glossary-list .glossary-item p,
.news .archive-item p,
.news .archive-item .archive-item-excerpt,
.news .post-single .post-content {
	-webkit-hyphens: auto;
	hyphens: auto;
	text-align: justify;
}
/*###########################################################################*/
html {
	background-color: #e6e6e6;
}
.single-page-layout {
	position: relative;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #777777;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
}
/*###########################################################################*/
/*---02 // ui components---*/
/*###########################################################################*/
/*---02a // header---*/
#header {
	position: absolute;
	top: 16px;
	left: 16px;
	overflow-x: hidden;
	width: calc(100% - 16px);
	height: 47px;
	background-size: 125px 47px;
	background-repeat: no-repeat;
	z-index: 2;
}
/*---ribbon---*/
#header .ribbon,
#header .ribbon::before,
#header .ribbon::after {
	background-color: rgba(255, 255, 255, 0.25);
	height: 47px;
	opacity: 0;
}
#header .ribbon {
	position: relative;
	width: calc(100% - 134px);
	margin-left: 138px;
	transform: skew(-10deg);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
#header .ribbon::before,
#header .ribbon::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
}
/*---header navigation---*/
#home-link {
	position: absolute;
	width: 126px;
	height: 47px;
	top: 16px;
	left: 16px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	z-index: 4;
}
.header-menu {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: column;
	right: 0;
	top: 16px;
	width: 100%;
}
#header-menu-toggle {
	display: none;
}
.header-menu .menu-icon {
	align-self: flex-end;
	display: flex;
	justify-content: center;
	background-color: #7c7f9069;
	background-image: url("images/icon_burger_menu.png");
	background-size: 32px auto;
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	width: 56px;
	height: 47px;
	color: #ffffff;
	font-size: 40px;
	cursor: pointer;
}
.header-menu .menu-icon:hover {
	background-color: #7c7f907d;
}
.header-menu .menu-icon:active {
	background-color: #7c7f9096;
}
.header-menu .menu {
	display: none;
	flex-direction: column;
	row-gap: 4px;
	list-style-type: none;
	margin-top: 2px;
	margin-right: 14px;
	margin-bottom: 0;
	margin-left: 14px;
	padding: 10px;
	background-color: #f2f2f2c4;
	border-radius: 6px;
	border: 1px solid #ffffff54;
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25),
		0px 1px 4px -1px rgba(0, 0, 0, 0.25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.header-menu .menu a {
	display: flex;
	position: relative;
	padding: 8px 10px 8px 10px;
	text-decoration: none;
	color: #323232;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
}
.header-menu .menu .current-menu-item > a::before {
	position: absolute;
	top: 4px;
	left: 0;
	content: "";
	width: 4px;
	height: calc(100% - 8px);
	background-color: #7c7f90c4;
	border-radius: 3px;
}
.header-menu .menu a:hover {
	background-color: #999ba8c4;
	color: #f2f2f2;
	border-radius: 3px;
}
.header-menu .menu a:hover::before {
	display: none;
}
#header-menu-toggle:checked + .menu-icon + .menu {
	display: flex;
}
.header-menu .menu a[target="_blank"] {
	padding-right: 35px;
	background-image: url("images/icon_external_link.svg");
	background-size: 16px auto;
	background-repeat: no-repeat;
	background-position: right 10px center;
}
.header-menu .menu a[target="_blank"]:hover {
	background-image: url("images/icon_external_link_hover.svg");
}
/*---sub menu---*/
.header-menu .menu .current-menu-ancestor > a::before {
	position: absolute;
	top: 4px;
	left: 0;
	content: "";
	width: 4px;
	height: calc(100% - 8px);
	background-color: #7c7f907e;
	border-radius: 3px;
}
.header-menu .sub-menu {
	list-style-type: none;
	padding-left: 0;
}
.header-menu .sub-menu a {
	padding-left: 20px;
}
.header-visual {
	width: 100%;
	/* force a 2.5 : 1 box */
	aspect-ratio: 2.5 / 1;
	overflow: hidden;
	position: relative;
}
.header-visual img {
	/* fill the box */
	width: 100%;
	height: 100%;
	object-fit: cover; /* crop to cover area */
	object-position: center; /* center it vertically & horizontally */
	display: block;
}
/*###########################################################################*/
/*---02a // header // slider---*/
.entryVisual .ms-slide-info,
.basic-usage-container .ms-slide-info {
	position: relative;
	bottom: 0px !important;
}
/*---slider // entry visual---*/
.entryVisual .ms-slide-info.ms-dir-h {
	color: #54586f;
	width: auto;
	padding-top: 8px;
	padding-right: 16px;
	padding-left: 16px;
}
.entryVisual .ms-slide-info.ms-dir-h h1 {
	font-size: 28px;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 10px;
}
.entryVisual .ms-slide-info.ms-dir-h ul {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
}
.entryVisual .ms-slide-info.ms-dir-h ul::before {
	content: "";
	position: absolute;
	left: 0;
	height: 100%;
	background-color: #54586f;
	border-radius: 2px;
	width: 3px;
}
.entryVisual .ms-slide-info.ms-dir-h li {
	margin-bottom: 8px;
	padding-left: 12px;
}
/*---slider // basic usage container---*/
.basic-usage-container .ms-slide-info.ms-dir-h {
	width: auto;
	top: 0 !important;
	padding: 16px;
	color: #54586f;
}
.basic-usage-container .ms-slide-info.ms-dir-h h2 {
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}
.basic-usage-container .ms-slide-info.ms-dir-h p {
	font-size: 14px;
}
/*###########################################################################*/
/*---02a // header // theme variations---*/
/*---logo graphite---*/
.logoGraphite #header {
	background-image: url("images/logo_graphite.svg");
}
/*---logo white---*/
.logoWhite #header {
	background-image: url("images/logo_white.svg");
}
/*---optional visual gradient---*/
.logoWhite.news .post-single .header-visual::before,
.logoWhite .entryVisual .ms-slide .ms-slide-bgcont::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 65%;
	background: linear-gradient(
		to bottom,
		rgba(84, 88, 111, 1),
		rgba(128, 128, 128, 0)
	);
	mix-blend-mode: multiply;
	pointer-events: none; /* let clicks through */
	z-index: 1;
}
/*###########################################################################*/
/*---02b // content---*/
.entry-content > div {
	padding-bottom: 32px;
}
.entry-content > div:first-of-type {
	padding-top: 32px;
}
.entry-content > div:nth-of-type(even) {
	padding-top: 32px;
	background-color: #f7f7f7;
}
/*---in page navigation---*/
.in-page-navigation {
	display: none;
	position: fixed;
	top: 50%;
	left: calc(50% + 546px);
	transform: translateY(-50%);
}
.in-page-navigation ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*
		padding: 14px;
		border-radius: 20px;
		background-color: #ffffff;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25),
			0px 1px 3px -1px rgba(0, 0, 0, 0.25);
		*/
}
.in-page-navigation li {
	display: block;
	/*
		padding-top: 1px;
		padding-right: 1px;
		padding-left: 1px;
		height: 27px;
		background-color: #e6e6e6;
		margin-bottom: 6px;
		border-radius: 3px;
		*/
}
.in-page-navigation a {
	display: block;
	width: 12px;
	height: 12px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 6px;
	background-color: #999ba8;
	margin-bottom: 12px;
	box-shadow: inset 0px 1px 2px -1px rgba(0, 0, 0, 0.75),
		0px 1px 0px 0px rgba(255, 255, 255, 0.75);
	transition: all;
	transition-duration: 0.35s;
	transition-timing-function: ease-in-out;
}
.in-page-navigation li.active a {
	height: 26px;
}
.in-page-navigation li.active a {
	background-color: #e2003b;
}
.in-page-navigation li:last-of-type,
.in-page-navigation li:last-of-type a {
	margin-bottom: 0;
}
/*###########################################################################*/
/*---02b // content / attachments---*/
.attachments-list {
	display: flex;
	gap: 16px;
	background-color: transparent !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.attachments-list a {
	display: flex;
	align-items: center;
	position: relative;
	font-weight: 600;
	text-decoration: none;
	color: #f2f2f2 !important;
	background-color: #7c7f90;
	height: 50px;
	margin-right: 8px;
	padding-right: 16px;
	padding-left: 54px;
	border-radius: 6px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.attachments-list a::before {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	left: 16px;
	width: 24px;
	height: 30px;
	border-top-left-radius: 3px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 2px solid #ffffff;
	color: #ffffff;
	background-color: #999ba8;
	font-size: 10px;
}
/*---attachments // file types---*/
.attachments-list a[href$=".pdf"]::before {
	content: "PDF";
}
.attachments-list a[href$=".doc"]::before,
.attachments-list a[href$=".docx"]::before {
	content: "DOC";
}
.attachments-list a[href$=".ppt"]::before,
.attachments-list a[href$=".pptx"]::before {
	content: "PPT";
}
.attachments-list a[href$=".png"]::before {
	content: "PNG";
}
.attachments-list a[href$=".jpeg"]::before,
.attachments-list a[href$=".jpg"]::before {
	content: "JPG";
}
/*###########################################################################*/
/*---02b // content / contact form---*/
.contact-form-container {
	padding-top: 32px;
	padding-right: 16px;
	padding-left: 16px;
}
.wpcf7-form {
	position: relative;
	background-color: #ffffff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.form-field-container {
	display: flex;
	flex-flow: column;
	gap: 14px;
}
.form-field-container .form-field {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	color: #323232;
	border: 1px solid #ffffff;
}
.form-field-container .form-field label {
	font-size: 12px;
	text-transform: uppercase;
	color: #999ba8;
	padding-left: 4px;
}
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-number {
	color: #323232;
	width: calc(100% - 22px);
	padding-top: 8px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 10px;
	border-radius: 4px;
	border: 1px solid #e6e6e6;
	transition: all 0.25s ease-in-out 0s;
}
.wpcf7-text:focus,
.wpcf7-textarea:focus {
	outline: none;
	border: 1px solid #999ba8;
}
.wpcf7-textarea {
	height: 130px;
}
.form-submit-container {
	display: flex;
}
.form-submit-container .wpcf7-submit {
	display: flex;
	align-items: center;
	position: relative;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	background-color: #7c7f90;
	height: 32px;
	margin-left: auto;
	padding-right: 16px;
	padding-left: 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.wpcf7-spinner {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*---dialog output---*/
.wpcf7 form .wpcf7-response-output {
	border: none;
	border-radius: 6px;
	padding: 10px;
	font-weight: 600;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	color: #323232;
	background-color: #fffae6;
	border: 1px solid #ffdc78;
}
.wpcf7 form.sent .wpcf7-response-output {
	color: #ffffff;
	background-color: #45c867;
}
.wpcf7 form .wpcf7-response-output {
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
.wpcf7-not-valid-tip {
	color: #e2003b;
	font-weight: 600;
	font-size: 11.5px;
	text-transform: uppercase;
	padding-left: 4px;
}
/*---captcha output---*/
.captcha-image {
	margin-top: 15px;
	padding: 0;
	border: none;
	width: 100%;
	text-align: left;
}
.captcha-image .cf7ic_instructions {
	font-size: 12px;
	text-transform: uppercase;
	color: #999ba8;
	padding-left: 4px;
}
.captcha-image .cf7ic_instructions span {
	color: #e2003b;
	font-weight: 600;
}
.captcha-image label > input,
.captcha-image svg {
	width: 40px;
	height: auto;
}
.captcha-image label > input:checked + svg,
.captcha-image label > input:focus + svg {
	border: 2px solid #e2003b;
	border-radius: 4px;
}
.wpcf7-form-control-wrap.kc_captcha {
	display: initial;
}
/*###########################################################################*/
/*---02b // content / fancybox---*/
.fancybox__caption h2 {
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
}
/*###########################################################################*/
/*---02b // content / google recaptcha---*/
.grecaptcha-badge {
	visibility: hidden;
}
/*###########################################################################*/
/*---02c // footer---*/
#footer {
	background-color: #54586f;
	padding: 6px;
}
#footer ul,
#footer a {
	color: #ffffff;
}
#footer ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#footer li {
	line-height: 16px;
	text-transform: uppercase;
	font-size: 12px;
}
#footer li.alignRight {
	margin-right: 0;
}
#footer a {
	text-decoration: none;
	display: flex;
	padding: 10px;
}
#footer .alignRight {
	margin-left: auto;
}
#footer .svg-icon {
	display: block;
	fill: #ffffff;
}
/*###########################################################################*/
/*---03 // views---*/
/*###########################################################################*/
/*---03a // global---*/
.generic-content-widget a,
.key-feature .content p a,
.usage-example .text p a {
	font-weight: 500;
	text-decoration: none;
	color: #3296c8;
}
.generic-content-widget a:hover,
.key-feature .content p a:hover,
.usage-example .text p a:hover {
	text-decoration: underline;
	color: #2d64a0;
}
.generic-content-widget strong,
.key-feature .content strong,
.usage-example .text strong {
	font-weight: 500;
	color: #323232;
}
.single-content-area .entry-content p,
.news .post-single p {
	margin-top: 0;
	margin-bottom: 10px;
	line-height: 21px;
}
.single-content-area .entry-content ul,
.news .post-single ul {
	padding-left: 20px;
	line-height: 21px;
}
/*---testimonials---*/
.testimonials {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.testimonial-card {
	flex: 0 1 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: #f2f2f2;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.testimonial-card header {
	padding: 16px;
	background-color: #f7f7f7;
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
}
/*---grid // main structure---*/
.testimonial-card header {
	display: grid;
	grid-template-columns: 80px auto;
	grid-template-rows: auto 1fr;
	grid-template-areas: "testimonialImage testimonialName" "testimonialImage testimonialDescription";
}
.testimonial-card header .testimonial-image {
	grid-area: testimonialImage;
}
.testimonial-card header .testimonial-name {
	grid-area: testimonialName;
}
.testimonial-card header .testimonial-description {
	grid-area: testimonialDescription;
}
.testimonial-card header .testimonial-image {
	overflow: hidden;
	width: 72px;
	height: 72px;
	border-radius: 36px;
}
.testimonial-card header .testimonial-image img {
	display: block;
	width: 72px;
	height: 72px;
}
.testimonial-card header h3 {
	margin: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	color: #54586f;
}
.testimonial-card header h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: #7c7f90;
}
.testimonial-card .social-media-links {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 16px;

	background-color: #f7f7f7;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
}
.testimonial-card .social-media-links a {
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
}
.testimonial-card .social-media-links a[href^="https://www.linkedin.com"]
{
	background-image: url("images/social_media_icon-linked_in.svg");
}
.testimonial-card .social-media-links a[href^="https://x.com"]
{
	background-image: url("images/social_media_icon-x.svg");
}
.testimonial-card blockquote {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-right: 16px;
	margin-bottom: auto;
	margin-left: 16px;
}
.testimonial-card blockquote p {
	font-style: italic;
	margin-top: 0;
	margin-right: 32px;
	margin-bottom: 0;
	margin-left: 32px;
}
.testimonial-card blockquote::before,
.testimonial-card blockquote::after {
	font-size: 40px;
	font-weight: 400;
	line-height: 20px;
}
.testimonial-card blockquote::before {
	content: open-quote;
}
.testimonial-card blockquote::after {
	content: close-quote;
	align-self: flex-end;
}
/*---call to action---*/
.cta-widget {
	background-color: #fffae6 !important;
	margin-bottom: 16px;
	padding: 16px !important;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.cta-widget .cta-content {
	display: flex;
	gap: 16px;
	flex-direction: column;
}
.cta-widget .cta-content .cta-intro {
	color: #54586f;
	font-weight: 500;
}
.cta-widget .cta-content .cta-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
	background-color: #ff8c64;
	height: 32px;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 14px;
	border-radius: 6px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.cta-widget .cta-content .cta-button img {
	display: block;
	width: 32px;
	height: auto;
}
/*###########################################################################*/
/*---03b // single page layout---*/
/*---hero and key feature---*/
.hero-feature-container,
.hero-feature,
.key-feature-container {
	display: flex;
	padding-right: 16px;
	padding-left: 16px;
}
.hero-feature-container,
.key-feature-container {
	flex-flow: column;
	overflow-x: hidden; /* prevents animation problems? */
}
.key-feature-container {
	gap: 16px;
}
/*---hero feature---*/
.hero-feature {
	flex: 1;
	flex-flow: column;
	align-items: center;
	margin-bottom: 32px;
}
.hero-feature-container .hero-feature:last-of-type {
	margin-bottom: 0;
}
.hero-feature h2 {
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	color: #54586f;
}
.hero-feature .visual {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 112px;
	height: 112px;
	background-color: #45c867;
	border-radius: 56px;
}
.hero-feature .visual img {
	width: 50px;
	height: 50px;
	filter: drop-shadow(0px 0px 1px #218c3d);
}
.hero-feature .content {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	color: #54586f;
}
.hero-feature .content p {
	margin-top: 0;
	margin-bottom: 8px;
}
.hero-feature .content p:last-of-type {
	margin-bottom: 0;
}
.hero-feature .content p a {
	text-decoration: none;
	text-align: left;
	color: #ffffff;
	display: block;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	background-color: #7c7f90;
	border-radius: 6px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.hero-feature .content ul {
	padding-left: 15px;
}
/*---key feature & usage example---*/
/*---needs refactoring---*/
.key-feature h2,
.usage-example h2,
.contact-form-container h2 {
	position: relative;
	margin-top: 0;
	padding-left: 12px;
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
	text-transform: uppercase;
	color: #54586f;
}
.key-feature h2::before,
.usage-example h2::before,
.contact-form-container h2::before {
	content: "";
	position: absolute;
	left: 0;
	width: 3px;
	height: 0;
	background-color: #54586f;
	border-radius: 2px;
}
.key-feature .content p,
.key-feature .content ul,
.usage-example .text p {
	line-height: 21px;
}
.key-feature .content ul {
	padding-left: 20px;
}
/*---key feature---*/
.entry-content > div.key-feature-container {
	padding-bottom: 40px;
}
.key-feature {
	box-sizing: border-box;
	background-color: #ffffff;
	padding-top: 16px;
	padding-right: 16px;
	padding-bottom: 4px;
	padding-left: 16px;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.key-feature h2 {
	margin-bottom: 16px;
}
/*---usage example---*/
.basic-usage-container {
	padding-top: 24px;
	padding-right: 8px;
	padding-bottom: 24px;
	padding-left: 8px;
}
.usage-example {
	padding: 8px;
}
.usage-example .text ul {
	padding-left: 20px;
	line-height: 21px;
}
.usage-example .screenshot,
.usage-example .video {
	position: relative;
	width: 352px;
	height: 200px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
	transition: all 0.25s ease 0s;
}
.usage-example .screenshot:hover,
.usage-example .video:hover {
	transform: scale3d(1.05, 1.05, 1.05);
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15),
		0px 1px 6px -1px rgba(0, 0, 0, 0.2);
}
.usage-example .screenshot img {
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
}
/*###########################################################################*/
/*---03c // company presentation---*/
/*---segment background color definitions---*/
.company-presentation #segment-03,
.company-presentation #segment-05,
.company-presentation #segment-06 {
	background-color: #f7f7f7;
}
/*---flex grid with row wrap---*/
.company-presentation .expertise-container .expertise-list,
.company-presentation .key-topics-list,
.company-presentation .solution-gallery,
.company-presentation .logo-container .logo-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.company-presentation .solution-gallery .gallery-item,
.company-presentation .logo-container .logo-gallery li {
	flex: 0 1 100%;
	box-sizing: border-box;
}
.company-presentation .logo-container .logo-gallery li {
	flex: 0 1 calc((100% - 16px) / 2);
}
.company-presentation .solution-gallery .gallery-item,
.company-presentation .logo-container .logo-gallery li {
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
/*---needs refactoring---*/
.company-presentation .entry-content > div {
	padding-top: 16px;
	padding-right: 16px;
	padding-left: 16px;
}
.company-presentation .entry-content > div:nth-of-type(2n) {
	background-color: #ffffff;
}
/*---needs refactoring---*/
.company-presentation div[id^="segment-"] > h2 {
	position: relative;
	margin-top: 0;
	padding-left: 12px;
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
	text-transform: uppercase;
	color: #54586f;
}
.company-presentation div[id^="segment-"] > h2::before {
	height: 0;
	content: "";
	position: absolute;
	left: 0;
	width: 3px;
	background-color: #54586f;
	border-radius: 2px;
}
/*---expertise list---*/
.company-presentation .expertise-list {
	margin-bottom: 16px;
}
.company-presentation .expertise-list h2 {
	flex: 1 1 calc((100% - 16px) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0;
	height: 48px;
	background-color: #45c867;
	color: #ffffff;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.company-presentation .expertise-content {
	padding: 16px;
	color: #ffffff;
	background-color: #45c867;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.company-presentation .expertise-content p {
	margin-top: 0;
	margin-bottom: 8px;
}
.company-presentation .expertise-content > :last-child {
	margin-bottom: 0;
}
/*---solution gallery---*/
.company-presentation .solution-gallery {
	justify-content: center;
}
.company-presentation .solution-gallery .gallery-item {
	border-radius: 8px;
	background-color: #ffffff;
}
.company-presentation .solution-gallery a {
	text-decoration: none;
	color: #777777;
}
.company-presentation .solution-gallery .gallery-item figure {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 16px;
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
	background-color: #54586f;
}
.company-presentation .solution-gallery .gallery-item figure img {
	width: 96px;
	height: 96px;
}
.company-presentation .solution-gallery .gallery-item figure figcaption {
	font-weight: 600;
	color: #f2f2f2;
}
.company-presentation .solution-gallery .gallery-item p {
	margin: 0;
	padding: 16px;
}
.company-presentation .key-topics-list .key-topic {
	flex: 0 1 100%;
	box-sizing: border-box;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 16px;
	color: #ffffff;
	background-color: #3296c8;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.company-presentation .key-topics-list .key-topic h2 {
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0;
	padding-top: 2px;
	padding-bottom: 2px;
}
.company-presentation .key-topics-list .key-topic .key-topic-content {
	position: relative;
	margin-top: 8px;
	margin-bottom: 8px;
	padding-left: 12px;
	color: #f2f2f2;
}
.company-presentation .key-topics-list .key-topic .key-topic-content p,
.company-presentation .key-topics-list .key-topic .key-topic-content ul {
	margin: 0;
	padding-bottom: 8px;
}
.company-presentation .key-topics-list .key-topic .key-topic-content ul {
	padding-left: 20px;
}
.company-presentation .key-topics-list .key-topic .key-topic-content a {
	text-decoration: none;
	font-weight: 500;
	color: #ffdc78;
}
.company-presentation .key-topics-list .key-topic .key-topic-content strong {
	font-weight: 600;
	color: #ffffff;
}
.company-presentation
	.key-topics-list
	.key-topic
	.key-topic-content
	> :last-child {
	padding-bottom: 0;
}
.company-presentation .key-topics-list .key-topic .key-topic-content::before {
	height: 100%;
	content: "";
	position: absolute;
	left: 1px;
	width: 3px;
	background-color: #ffffff;
	border-radius: 2px;
}
.company-presentation .logo-container .logo-gallery {
	justify-content: center;
	margin: 0;
	padding: 0;
}
.company-presentation .logo-container .logo-gallery li {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 64px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 8px;
	background-color: #ffffff;
}
.company-presentation .logo-container .logo-gallery img {
	display: block;
	width: auto;
	height: auto;
	max-width: 128px;
	max-height: 100%;
}
/*###########################################################################*/
/*---03d // single content area---*/
/*---override generic styles---*/
.entry-content.single-content-area > div {
	padding-top: 0;
	background-color: transparent;
}
.entry-content.single-content-area > div:last-of-type {
	padding-bottom: 0;
}
.single-content-area .entry-content {
	padding: 16px;
}
.single-content-area .entry-content h1 {
	position: relative;
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 28px;
	font-weight: 300;
	color: #54586f;
}
.single-content-area .entry-content h2 {
	position: relative;
	margin-top: 0;
	margin-bottom: 10px;
	padding-left: 12px;
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
	color: #54586f;
}
.single-content-area .entry-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	width: 3px;
	height: 100%;
	background-color: #54586f;
	border-radius: 2px;
}
.single-content-area .entry-content h3 {
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: #54586f;
}
.single-content-area .entry-content .generic-content-widget h3 {
	font-weight: 500;
	margin-top: 16px;
	margin-bottom: 4px;
}
.single-content-area .entry-content .generic-content-widget h4 {
	margin-top: 0;
	margin-bottom: 10px;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 16px;
	font-weight: 400;
	color: #323232;
	background-color: #f2f2f2;
	border-radius: 8px;
}
.single-content-area .entry-content .generic-content-widget img {
	border-radius: 8px;
}
/*---card display---*/
.card-display .entry-content {
	background-color: #f7f7f7;
}
.card-display .entry-content .generic-content-widget {
	background-color: #fff;
	margin-bottom: 16px;
	padding-top: 16px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 16px;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.card-display .entry-content.single-content-area > div:last-of-type {
	padding-bottom: 8px;
}
/*---faq list---*/
.single-content-area .faq-widget .faq-header {
	display: flex;
}
.single-content-area .faq-widget .faq-toggle {
	display: flex;
	margin-left: auto;
	height: 22px;
	font-size: 11px;
	align-items: center;
	position: relative;
	color: #999ba8;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	background-color: transparent;
	padding-right: 36px;
	padding-left: 0;
	border: none;
	cursor: pointer;
}
.single-content-area .faq-widget .faq-toggle::before {
	position: absolute;
	top: 0;
	right: 16px;
	left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	content: "";
	width: 12px;
	height: 22px;
	background-image: url(images/icon_open_close_indicator.svg);
	background-size: 8px;
	background-repeat: no-repeat;
	border-radius: 8px;
}
.single-content-area .faq-list {
	background-color: #f7f7f7;
	margin-bottom: 10px;
	padding: 0 !important;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.single-content-area .faq-entry {
	padding: 0;
	border-bottom: 1px solid #e6e6e6;
}
.single-content-area .faq-entry:last-of-type {
	border-bottom: none;
}
.single-content-area .faq-entry h2.faq-question {
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 0;
	padding-top: 16px;
	padding-right: 48px;
	padding-bottom: 16px;
	padding-left: 16px;
}
.single-content-area .faq-entry h2.faq-question::before {
	top: 14px;
	right: 16px;
	left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	content: "";
	width: 12px;
	height: 26px;
	background-image: url(images/icon_open_close_indicator.svg);
	background-size: 8px;
	background-repeat: no-repeat;
	border-radius: 8px;
}
.single-content-area .faq-entry:first-of-type h2.faq-question {
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}
.single-content-area .faq-entry:last-of-type h2.faq-question.closed {
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}
.single-content-area .faq-entry .faq-answer {
	background-color: #ffffff;
}
.single-content-area .faq-entry .faq-answer > * {
	padding-right: 16px;
	padding-left: 16px;
}
.single-content-area .faq-entry .faq-answer > :first-child {
	padding-top: 16px;
}
.single-content-area .faq-entry .faq-answer > :last-child {
	margin-bottom: 0;
	padding-bottom: 16px;
}
.single-content-area .faq-entry:last-of-type .faq-answer {
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}
.single-content-area .faq-entry .faq-answer p {
	margin-top: 0;
	margin-bottom: 10px;
}
.single-content-area .faq-entry .faq-answer ul {
	text-align: justify;
	padding-left: 32px;
}
.single-content-area .faq-entry .faq-answer strong {
	font-weight: 500;
	color: #323232;
}
.single-content-area .faq-entry .faq-answer a {
	text-decoration: none;
	font-weight: 500;
	color: #3296c8;
}
.single-content-area .faq-entry .faq-answer a:hover {
	text-decoration: underline;
	color: #2d64a0;
}
/*###########################################################################*/
/*---03e // glossary---*/
.glossary .entry-content {
	padding: 16px;
}
.glossary #glossary-search-container {
	display: flex;
	padding-bottom: 10px;
}
.glossary #glossary-search-container input::placeholder {
	opacity: 1;
	color: #b7b8c1;
	font-size: 12px;
	font-weight: 500;
}
.glossary #glossary-search {
	flex: 0 1 100%;
	box-sizing: border-box;
	font-weight: 500;
	color: #54586f;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
	border: 1px solid #b7b8c1;
	border-radius: 8px;
}
.glossary #glossary-filter-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 16px;
	padding: 10px;
	background-color: #f2f2f2;
	border-radius: 8px;
}
.glossary #glossary-filter-controls .glossary-filter {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #7c7f90;
	font-weight: 500;
	width: 32px;
	height: 32px;
}
.glossary #glossary-filter-controls .glossary-filter.active {
	color: #f2f2f2;
	background-color: #7c7f90;
	border-radius: 5px;
}
.glossary #glossary-filter-controls .glossary-filter.empty {
	color: #b7b8c1;
}
.glossary #glossary-filter-controls .glossary-filter.show-all {
	width: auto;
	padding-right: 10px;
	padding-left: 10px;
}
.glossary .glossary-container .glossary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.glossary .glossary-container .glossary-list .glossary-item {
	position: relative;
	background-color: #f7f7f7;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 42px;
	padding-left: 16px;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.glossary .glossary-container .glossary-list .glossary-item h2 {
	color: #54586f;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0;
	padding-top: 2px;
	padding-bottom: 2px;
}
.glossary .glossary-container .glossary-list .glossary-item p {
	color: #7c7f90;
	margin-top: 8px;
	margin-bottom: 8px;
}
.glossary .glossary-container .glossary-list .glossary-item .read-more {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	width: fit-content;
	height: 32px;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	color: #f7f7f7;
	background-color: #7c7f90;
	border-radius: 5px;
}
.glossary .glossary-container .glossary-list .glossary-item-separator {
	flex: 0 1 100%;
	box-sizing: border-box;
	position: -webkit-sticky;
	position: sticky;
	top: 8px;
	z-index: 2;
}
.glossary .glossary-container .glossary-list .glossary-item-separator h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #b7b8c1;
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	width: 37px;
	height: 37px;
	border-radius: 8px;
}
.glossary
	.glossary-container
	.glossary-list
	.glossary-item
	.glossary-item-excerpt {
	position: relative;
	padding-left: 12px;
}
.glossary
	.glossary-container
	.glossary-list
	.glossary-item
	.glossary-item-excerpt::before {
	height: 100%;
	content: "";
	position: absolute;
	left: 1px;
	width: 3px;
	background-color: #7c7f90;
	border-radius: 2px;
}
.glossary .glossary-container .glossary-list .glossary-item {
	flex: 0 1 100%;
	box-sizing: border-box;
}
/*---modal window---*/
.glossary .glossary-container .glossary-list .glossary-item .modal {
	display: none;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(84, 88, 111, 0.25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.glossary .glossary-container .glossary-list .glossary-item .modal-content {
	background-color: #f7f7f7;
	margin: 10% auto;
	padding-top: 18px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-radius: 8px;
	width: 80%;
	max-width: 600px;
	position: relative;
	box-shadow: 0px 4px 16px 0px rgba(84, 88, 111, 0.35),
		0px 1px 4px -1px rgba(84, 88, 111, 0.45);
}
.glossary .glossary-container .glossary-list .glossary-item .modal-content h2 {
	width: calc(100% - 25px);
	padding-top: 0;
}
.glossary .glossary-container .glossary-list .glossary-item .close-modal {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	top: 12px;
	right: 12px;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}
/*###########################################################################*/
/*---03f // news---*/
/*---generic---*/
.news a {
	text-decoration: none;
}
.news .entry-meta,
.news .entry-meta .meta-author,
.news .entry-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.news .entry-meta,
.news .entry-meta .meta-author {
	align-items: center;
	font-size: 12px;
	font-weight: 500;
}
.news .entry-meta {
	margin-bottom: 16px;
}
.news .entry-meta .meta-author .avatar {
	border-radius: 16px;
	margin-right: 8px;
}
.news .entry-meta .meta-author,
.news .meta-tags {
	margin-right: auto;
}
.news .entry-meta .meta-date {
	font-weight: 600;
}
.news .entry-footer {
	padding-bottom: 16px;
	gap: 4px;
}
.news .entry-footer .meta-tags,
.news .entry-footer .meta-tags a {
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 500;
}
.news .entry-footer .meta-tags {
	gap: 4px;
}
.news .entry-footer .meta-tags a {
	align-items: center;
	color: #fff;
	background-color: #999ba8;
	height: 20px;
	border-radius: 6px;
	padding-right: 10px;
	padding-left: 10px;
}
.news .entry-content {
	padding: 16px;
}
.news .news-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
/*---archive view---*/
.news .archive-item {
	flex: 0 1 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	position: relative;
	background-color: #f7f7f7;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25),
		0px 1px 2px -1px rgba(0, 0, 0, 0.25);
}
.news .archive-navigation {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}
.news h1.archive-title {
	position: relative;
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	color: #999ba8;
}
.news h1.archive-title::after {
	content: "//";
	padding-left: 2px;
}
.news h1.archive-title:last-of-type::after {
	content: "";
}
.news h1.archive-title a {
	color: #54586f;
}
.news .archive-item h2 {
	color: #54586f;
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	padding-top: 8px;
	padding-bottom: 8px;
}
.news .archive-item p {
	color: #7c7f90;
	margin-top: 8px;
	margin-bottom: 8px;
}
.news .archive-item .entry-header .entry-header-visual {
	width: 100%;
	/* force a 2.5 : 1 box */
	aspect-ratio: 2.5 / 1;
	overflow: hidden;
	position: relative;
}
.news .archive-item .entry-header .entry-header-visual img {
	/* fill the box */
	width: 100%;
	height: 100%;
	object-fit: cover; /* crop to cover area */
	object-position: center; /* center it vertically & horizontally */
	display: block;
}
.news .archive-item .entry-header,
.news .archive-item .entry-header .entry-header-visual {
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
}
.news .archive-item .entry-header .archive-item-title,
.news .archive-item .entry-header .entry-meta,
.news .archive-item .archive-item-excerpt,
.news .archive-item .entry-footer {
	padding-right: 16px;
	padding-left: 16px;
}
.news .archive-item .archive-item-excerpt {
	margin-bottom: auto;
	padding-top: 8px;
	padding-bottom: 8px;
}
.news .archive-item .entry-footer .read-more-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	height: 32px;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	color: #f7f7f7;
	background-color: #7c7f90;
	border-radius: 5px;
}
/*---navigation---*/
.news .pagination .navigation {
	display: flex;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 10px;
	background-color: #f2f2f2;
	border-radius: 8px;
}
.news .pagination .navigation .screen-reader-text {
	display: none;
}
.news .pagination .navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.news .pagination .navigation .page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #7c7f90;
	font-weight: 500;
	width: 32px;
	height: 32px;
}
.news .pagination .navigation .page-numbers.current {
	color: #f2f2f2;
	background-color: #7c7f90;
	border-radius: 5px;
}
.news .pagination .navigation .next.page-numbers,
.news .pagination .navigation .prev.page-numbers {
	width: auto;
}
/*---single post view---*/
.news .post-single .header-visual {
	width: 100%;
	/* force a 2.5 : 1 box */
	aspect-ratio: 2.5 / 1;
	overflow: hidden;
	position: relative;
}
.news .post-single .header-visual img {
	/* fill the box */
	width: 100%;
	height: 100%;
	object-fit: cover; /* crop to cover area */
	object-position: center; /* center it vertically & horizontally */
	display: block;
}
.news .post-single .back-to-newslist {
	margin-bottom: 10px;
}
.news .post-single .back-to-newslist a {
	display: flex;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	color: #f2f2f2;
	background-color: #7c7f90;
	width: max-content;
	height: 37px;
	padding-right: 12px;
	padding-left: 10px;
	border-radius: 8px;
}
.news .post-single .back-to-newslist a .icon-back {
	display: flex;
	height: 37px;
	font-size: 23px;
	margin-right: 8px;
}
.news .post-single .post {
	padding: 16px;
}
.news .post-single .post .post-title {
	font-size: 24px;
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 10px;
}
.news .post-single .post .post-content img {
	border-radius: 8px;
}
.news .post-single .post .post-content h2,
.news .post-single .cta-widget h2 {
	font-size: 18px;
	font-weight: 400;
	color: #54586f;
	margin-top: 0;
	margin-bottom: 10px;
}
.news .post-single .post .post-content a,
.news .post-single .cta-widget .cta-intro a {
	font-weight: 500;
	color: #3296c8;
}
.news .post-single .post .post-content table {
	width: 100%;
	font-size: 12px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	margin-bottom: 10px;
}
.news .post-single .post .post-content table td,
.news .post-single .post .post-content table th {
	padding-top: 4px;
	padding-right: 2px;
	padding-bottom: 4px;
	padding-left: 2px;
	vertical-align: top;
}
.news .post-single .post .post-content table tbody tr:nth-child(odd) {
	background-color: #f7f7f7;
}
/*###########################################################################*/
/*---04 // animation---*/
/*###########################################################################*/
/*---04a // header---*/
#header .ribbon {
	animation-name: ribbon-fade00;
	animation-delay: 0.75s;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes ribbon-fade00 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#header .ribbon::before {
	animation-name: ribbon-fade01;
	animation-delay: 1.5s;
	animation-duration: 0.8s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes ribbon-fade01 {
	0% {
		transform: translateX(0px);
		opacity: 0;
	}
	75% {
		transform: translateX(27px);
		opacity: 1;
	}
	100% {
		transform: translateX(25px);
		opacity: 1;
	}
}
#header .ribbon::after {
	animation-name: ribbon-fade02;
	animation-delay: 1.5s;
	animation-duration: 0.75s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes ribbon-fade02 {
	0% {
		transform: translateX(0px);
		opacity: 0;
	}
	75% {
		transform: translateX(59px);
		opacity: 1;
	}
	100% {
		transform: translateX(55px);
		opacity: 1;
	}
}
.header-menu .menu a {
	transition: all 0.05s ease-in-out 0s;
}
/*###########################################################################*/
/*---04b // single page layout---*/
/*---hero feature---*/
.hero-feature-container .hero-feature {
	opacity: 0;
	transform: scale(0.5) translateY(-50px);
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}
.hero-feature-container .hero-feature.show {
	opacity: 1;
	transform: none;
}
/*---key feature---*/
.key-feature-container .key-feature {
	opacity: 0;
	transition-duration: 0.5s;
	transition-delay: 250ms;
	transition-timing-function: ease-in-out;
}
.key-feature-container .key-feature:nth-of-type(odd) {
	transform: translateX(-72px);
}
.key-feature-container .key-feature:nth-of-type(even) {
	transform: translateX(72px);
}
.key-feature-container .key-feature.show {
	opacity: 1;
	transform: none;
}
/*---usage example---*/
.basic-usage-container .usage-example {
	opacity: 0;
	transform: translateY(50px);
	transition-duration: 0.5s;
	transition-delay: 250ms;
	transition-timing-function: ease-in-out;
}
.basic-usage-container .usage-example.show {
	opacity: 1;
	transform: translateY(0);
}
/*---scale headline indicator---*/
.key-feature h2::before,
.usage-example h2::before,
.contact-form-container h2::before,
div[id^="segment-"] > h2::before {
	transition-duration: 0.35s;
	transition-timing-function: ease-in-out;
	transition-delay: 0.35s;
}
.key-feature.show h2::before,
.usage-example.show h2::before,
.contact-form-container h2::before,
.company-presentation div[id^="segment-"] > h2.show::before {
	height: 100%;
}
/*---fade in segment headlines---*/
.company-presentation div[id^="segment-"] > h2 {
	opacity: 0;
	transition-duration: 0.75s;
	transition-timing-function: ease-in-out;
}
.company-presentation div[id^="segment-"] > h2.show {
	opacity: 1;
}
/*###########################################################################*/
/*---04c // company presentation---*/
/*---expertise list---*/
.company-presentation .expertise-list h2 {
	opacity: 0;
	transform: scale(0.5) translateY(-25px);
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}
.company-presentation .expertise-list h2.show {
	opacity: 1;
	transform: none;
}
.company-presentation .expertise-content {
	opacity: 0;
	transform: scale(0.75) translateY(-20px);
	transition-duration: 0.75s;
	transition-timing-function: ease-in-out;
}
.company-presentation .expertise-content.show {
	opacity: 1;
	transform: none;
}
/*---solution gallery---*/
.company-presentation .solution-gallery .gallery-item {
	opacity: 0;
	transform: scale(0.95) translateY(-25px);
	transition-duration: 0.5s;
	transition-delay: 250ms;
	transition-timing-function: ease-in-out;
}
.company-presentation .solution-gallery .gallery-item.show {
	opacity: 1;
	transform: translateY(0);
	transition-duration: 0.25s;
	transition-delay: 0s;
	transition-timing-function: ease;
}
.company-presentation .solution-gallery .gallery-item.show:hover {
	transform: scale3d(1.05, 1.05, 1.05);
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15),
		0px 1px 6px -1px rgba(0, 0, 0, 0.2);
}
/*---key topic---*/
.company-presentation .key-topic {
	opacity: 0;
	transform: translateY(25px);
	transition-duration: 0.5s;
	transition-delay: 250ms;
	transition-timing-function: ease-in-out;
}
.company-presentation .key-topic.show {
	opacity: 1;
	transform: translateY(0);
}
/*---logo gallery---*/
.company-presentation .logo-gallery li {
	opacity: 0;
	transform: scale(0.5) translateY(-25px);
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}
.company-presentation .logo-gallery li.show {
	opacity: 1;
	transform: none;
}
/*---testimonials---*/
.company-presentation .testimonial-card {
	opacity: 0;
	transform: scale(0.95) translateY(-25px);
	transition-duration: 0.5s;
	transition-delay: 250ms;
	transition-timing-function: ease-in-out;
}
.company-presentation .testimonial-card.show {
	opacity: 1;
	transform: translateY(0);
}
/*###########################################################################*/
/*---04d // single content area---*/
.single-content-area .faq-widget .faq-toggle,
.single-content-area .faq-entry h2.faq-question {
	transition: all 0.15s ease 0s;
}
.single-content-area .faq-entry h2.faq-question:hover {
	background-color: rgba(183, 184, 193, 0.25);
}
.single-content-area .faq-widget .faq-toggle::before,
.single-content-area .faq-entry h2.faq-question::before {
	background-color: #b7b8c1;
	background-position: 2px 2px;
	transition: all 0.15s ease 0s;
}
.single-content-area .faq-widget .faq-toggle.open {
	color: #7c7f90;
}
.single-content-area .faq-widget .faq-toggle.open::before {
	background-color: #7c7f90;
	background-position: 2px 12px;
}
.single-content-area .faq-entry h2.faq-question.open::before {
	background-color: #7c7f90;
	background-position: 2px 16px;
}
.single-content-area .faq-answer {
	overflow: hidden;
	transition: height 0.4s cubic-bezier(0.65, 0.05, 0.36, 1),
		opacity 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.single-content-area .faq-answer.hidden {
	opacity: 0;
	height: 0;
}
.single-content-area .faq-answer.visible {
	opacity: 1;
}
/*###########################################################################*/
/*---05	// media queries // screen size---*/
/*###########################################################################*/
/*---responsive design // 375px---*/
@media screen and (max-width: 375px) {
	/*#######################################################################*/
	/*---this needs update. change class to myInvoicesSlide---*/
	/*---slider // entry visual / no title---*/
	.entryVisual .noTitle .ms-slide .ms-slide-bgcont img {
		width: 615px !important;
		height: auto !important;
		margin-top: -54px !important;
		margin-left: -240px !important;
	}
}
/*###########################################################################*/
/*---responsive design // 376px-460px---*/
@media screen and (min-width: 376px) and (max-width: 460px) {
	/*#######################################################################*/
	/*---slider // entry visual / no title---*/
	.entryVisual .noTitle .ms-slide .ms-slide-bgcont img {
		width: 616px !important;
		height: auto !important;
		margin-top: -54px !important;
		margin-left: -240px !important;
	}
}
/*###########################################################################*/
/*---responsive design // 568px---*/
@media screen and (min-width: 568px) {
	/*#######################################################################*/
	/*---slider---*/
	.entryVisual .ms-slide-info,
	.basic-usage-container .ms-slide-info {
		position: absolute;
	}
	/*---slider // entry visual---*/
	.entryVisual .ms-slide-info.ms-dir-h {
		top: 100px !important;
		left: 15px;
		width: 50%;
		padding-top: 0;
		padding-right: 0;
		padding-left: 0;
		/* color: #ffffff; */
	}
	.entryVisual .ms-slide-info.ms-dir-h h1 {
		font-size: 34px;
		margin-bottom: 16px;
	}
	.entryVisual .ms-slide-info.ms-dir-h ul::before {
		/* background-color: #ffffff; */
		left: 7px;
	}
	.entryVisual .ms-slide-info.ms-dir-h li {
		padding-left: 19px;
	}
	/*---slider // basic usage container---*/
	.basic-usage-container .ms-slide-info.ms-dir-h {
		width: 39%;
		color: #ffffff;
	}
	/*#######################################################################*/
	/*---02a // header // theme variations---*/
	/*---logo white---*/
	.logoWhite .entryVisual .ms-slide-info.ms-dir-h {
		color: #ffffff;
	}
	.logoWhite .entryVisual .ms-slide-info.ms-dir-h ul::before {
		background-color: #ffffff;
	}
	/*#######################################################################*/
	/*---slider // entry visual / no title---*/
	.entryVisual .noTitle .ms-slide-info.ms-dir-h ul {
		font-size: 14px;
	}
	/*#######################################################################*/
	/*---contact form---*/
	.form-field-container {
		flex-flow: row;
		flex-wrap: wrap;
	}
	.form-field-container .form-field {
		flex: 0 1 calc((100% - 14px) / 2);
	}
	/*#######################################################################*/
	/*---03a // global---*/
	/*---call to action---*/
	.cta-widget .cta-content {
		flex-direction: row;
	}
	.cta-widget .cta-content .cta-button {
		max-width: fit-content;
		margin-left: auto;
	}
	/*#######################################################################*/
	/*---03e // glossary---*/
	.glossary .glossary-container .glossary-list .glossary-item {
		flex: 0 1 calc((100% - 16px) / 2);
	}
	/*#######################################################################*/
	/*---03f // news---*/
	.news .archive-item {
		flex: 0 1 calc((100% - 16px) / 2);
	}
	/*---single post view---*/
	.news .post-single .post {
		padding-top: 60px;
		padding-right: 80px;
		padding-bottom: 60px;
		padding-left: 80px;
	}
}
/*###########################################################################*/
/*---responsive design // 768px---*/
@media screen and (min-width: 768px) {
	/*#######################################################################*/
	/*---slider // entry visual---*/
	.entryVisual .ms-slide-info.ms-dir-h {
		left: 72px;
	}
	/*#######################################################################*/
	/*---hero and key feature---*/
	.hero-feature-container,
	.key-feature-container,
	.basic-usage-container {
		padding-right: 64px;
		padding-left: 64px;
	}
	#header {
		top: 36px;
		left: 72px;
		width: calc(100% - 72px);
		height: 56px;
	}
	/*---navigation---*/
	#home-link {
		top: 36px;
		left: 72px;
	}
	.header-menu {
		top: 36px;
		width: auto;
	}
	.header-menu .menu a {
		font-size: 12px;
	}
	/*#######################################################################*/
	/*---02a // header // theme variations---*/
	/*---optional visual gradient---*/
	.logoWhite.news .post-single .header-visual::before,
	.logoWhite .entryVisual .ms-slide .ms-slide-bgcont::before {
		height: 50%;
		background: linear-gradient(
			to bottom,
			rgba(84, 88, 111, 0.75),
			rgba(128, 128, 128, 0)
		);
	}
	/*#######################################################################*/
	/*---attachments & footer---*/
	.contact-form-container,
	#footer {
		padding-right: 72px;
		padding-left: 72px;
	}
	#footer > nav > ul > li > a {
		padding-left: 0;
	}
	/*#######################################################################*/
	/*---03d // single content area---*/
	.single-content-area .entry-content {
		padding-top: 60px;
		padding-right: 80px;
		padding-bottom: 60px;
		padding-left: 80px;
	}
	/*#######################################################################*/
	/*---03e // glossary---*/
	.glossary .entry-content {
		padding-top: 60px;
		padding-right: 80px;
		padding-bottom: 60px;
		padding-left: 80px;
	}
	/*#######################################################################*/
	/*---03f // news---*/
	.news .entry-content,
	.news .post-single .post {
		padding-top: 60px;
		padding-right: 80px;
		padding-bottom: 60px;
		padding-left: 80px;
	}
	/*---archive view---*/
	.news h1.archive-title {
		font-size: 28px;
		font-weight: 300;
	}
	/*#######################################################################*/
	/*---theme variations---*/
	/*#######################################################################*/
	/*---slider // entry visual / no title---*/
	.entryVisual .noTitle .ms-slide-info.ms-dir-h {
		top: 120px !important;
	}
	/*#######################################################################*/
	/*---03a // global---*/
	.testimonial-card {
		flex: 0 1 calc((100% - 16px) / 2);
	}
	/*#######################################################################*/
	/*---03c // company presentation---*/
	/*---flex grid with row wrap---*/
	.company-presentation .logo-container .logo-gallery li {
		flex: 0 1 calc((100% - 32px) / 3);
	}
	.company-presentation .solution-gallery .gallery-item {
		flex: 0 1 calc((100% - 16px) / 2);
	}
	.company-presentation .logo-container .logo-gallery img {
		max-width: 144px;
	}
	.company-presentation .logo-container .logo-gallery li {
		height: 88px;
	}
	/*---expertise list---*/
	.company-presentation .expertise-list h2 {
		font-size: 16px;
		height: 72px;
	}
}
/*###########################################################################*/
/*---responsive design // 1024px---*/
@media screen and (min-width: 1024px) {
	/*#######################################################################*/
	/*---hero and key feature---*/
	.hero-feature-container,
	.basic-usage-container {
		padding-right: 32px;
		padding-left: 32px;
	}
	/*---navigation---*/
	#home-link {
		width: 148px;
		height: 56px;
		left: 41px;
	}
	.header-menu {
		top: 36px;
	}
	.header-menu .menu-icon {
		height: 56px;
	}
	/*#######################################################################*/
	.single-page-layout {
		width: 1024px;
		margin-right: auto !important;
		margin-left: auto !important;
		border-radius: 8px;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25),
			0px 1px 3px -1px rgba(0, 0, 0, 0.25);
	}
	#header {
		top: 36px;
		left: 40px;
		width: calc(100% - 40px);
		height: 56px;
		background-size: 150px 56px;
	}
	/*---ribbon---*/
	#header .ribbon,
	#header .ribbon::before,
	#header .ribbon::after {
		height: 56px;
	}
	#header .ribbon {
		width: calc(100% - 160px);
		margin-left: 165px;
	}
	/*---hero and key feature---*/
	.hero-feature-container,
	.key-feature-container {
		flex-flow: row;
	}
	/*---hero feature---*/
	.hero-feature {
		margin-bottom: 0;
	}
	/*---key feature---*/
	.key-feature-container {
		flex-wrap: wrap;
		padding-right: 40px;
		padding-left: 40px;
	}
	.key-feature {
		flex: 0 1 calc((100% - 16px) / 2);
	}
	/*#######################################################################*/
	/*---usage example---*/
	.basic-usage-container {
		padding-right: 0;
		padding-left: 0;
	}
	.usage-example {
		display: flex;
		padding-top: 32px;
		padding-right: 40px;
		padding-bottom: 32px;
		padding-left: 40px;
	}
	.usage-example .layout-column:nth-of-type(1) {
		width: calc(33% - 16px);
		padding-right: 16px;
	}
	.usage-example .layout-column:nth-of-type(2) {
		position: relative;
		display: flex;
		width: 67%;
	}
	.usage-example .text {
		width: calc(50% - 16px);
		padding-right: 16px;
	}
	.usage-example .screenshot,
	.usage-example .video {
		width: 50%;
	}
	.usage-example h2 {
		margin-bottom: 0;
	}
	.usage-example p,
	.usage-example ul {
		margin-top: 0;
	}
	/*#######################################################################*/
	/*---slider // entry visual---*/
	.entryVisual .ms-slide-info.ms-dir-h {
		top: 120px !important;
		left: 40px;
	}
	.entryVisual .ms-slide-info.ms-dir-h h1 {
		font-size: 34px;
	}
	/*---slider // basic usage container---*/
	.basic-usage-container .ms-slide-info.ms-dir-h {
		width: 39%;
		color: #ffffff;
	}
	/*---slider // entry visual / no title---*/
	.entryVisual .noTitle .ms-slide-info.ms-dir-h {
		top: 158px !important;
		left: 35px;
	}
	/*#######################################################################*/
	/*---contact form & footer---*/
	.contact-form-container,
	#footer {
		padding-right: 40px;
		padding-left: 40px;
	}
	.contact-form-container {
		padding-top: 32px;
	}
	/*#######################################################################*/
	/*---03d // single content area---*/
	.single-content-area .entry-content {
		padding: 40px;
	}
	/*#######################################################################*/
	/*---03e // glossary---*/
	.glossary .entry-content {
		padding: 40px;
	}
	.glossary #glossary-filter-controls {
		gap: 0;
		justify-content: space-between;
	}
	/*#######################################################################*/
	/*---03f // news---*/
	.news .entry-content,
	.news .post-single .post {
		padding: 40px;
	}
	.news .post-single .post .post-content table {
		font-size: 14px;
	}
	/*#######################################################################*/
	/*---animation---*/
	/*---ribbon---*/
	@keyframes ribbon-fade01 {
		0% {
			transform: translateX(0px);
			opacity: 0;
		}
		75% {
			transform: translateX(32px);
			opacity: 1;
		}
		100% {
			transform: translateX(30px);
			opacity: 1;
		}
	}
	@keyframes ribbon-fade02 {
		0% {
			transform: translateX(0px);
			opacity: 0;
		}
		75% {
			transform: translateX(74px);
			opacity: 1;
		}
		100% {
			transform: translateX(70px);
			opacity: 1;
		}
	}
	/*---hero feature---*/
	.hero-feature-container .hero-feature:nth-of-type(1) {
		transition-delay: 600ms;
	}
	.hero-feature-container .hero-feature:nth-of-type(2) {
		transition-delay: 700ms;
	}
	.hero-feature-container .hero-feature:nth-of-type(3) {
		transition-delay: 800ms;
	}
	.hero-feature-container .hero-feature:nth-of-type(4) {
		transition-delay: 900ms;
	}
	/*---key feature---*/
	.key-feature-container .key-feature.show {
		transition-delay: 500ms;
	}
	/*---attachments---*/
	.attachments-list a {
		transition: 0.2s;
		transition-timing-function: ease-in-out;
	}
	.attachments-list a:hover {
		transform: scale(1.075);
	}
	/*#######################################################################*/
	/*---theme variations---*/
	/*#######################################################################*/
	/*---slider // entry visual / no title---*/
	.entryVisual .noTitle .ms-slide-info.ms-dir-h ul {
		font-size: 16px;
	}
	/*#######################################################################*/
	/*---03a // global---*/
	.testimonial-card {
		flex: 0 1 calc((100% - 32px) / 3);
	}
	/*#######################################################################*/
	/*---03c // company presentation---*/
	/*---flex grid with row wrap // 3 columns---*/
	.company-presentation .expertise-container .expertise-list h2,
	.company-presentation .solution-gallery .gallery-item,
	.company-presentation .key-topics-list .key-topic {
		flex: 0 1 calc((100% - 32px) / 3);
	}
	/*---flex grid with row wrap // 4 columns---*/
	.company-presentation .logo-container .logo-gallery li {
		flex: 0 1 calc((100% - 48px) / 4);
	}
	/*---needs refactoring---*/
	.company-presentation .entry-content > div {
		padding-top: 32px;
		padding-right: 40px;
		padding-left: 40px;
	}
}
/*###########################################################################*/
/*---responsive design // 1048px---*/
@media screen and (min-width: 1048px) {
	/*#######################################################################*/
	.single-page-layout {
		margin-top: 16px;
		margin-bottom: 16px;
	}
	/*#######################################################################*/
	/*---slider + header visual---*/
	.entryVisual .ms-slide .ms-slide-bgcont,
	.entryVisual .ms-slide .ms-slide-bgvideocont,
	.header-visual {
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
	}
	/*---footer---*/
	#footer {
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
	}
}
/*###########################################################################*/
/*---responsive design // 1214px---*/
@media screen and (min-width: 1214px) {
	/*#######################################################################*/
	/*---in page navigation---*/
	.in-page-navigation {
		display: block;
	}
}