/* Explanations

-- Listings --
Post list 1n: FacetWP listing with filters (navigation links). Class 'ohcc-post-list1n'.
Post list 1c: FacetWP listing with filters (commercial links). Class 'ohcc-post-list1c'.
Post list 2: Listing without filters. Not created with FacetWP but with Views in Meta Box. Class 'ohcc-post-list2'.
----------------------------------------*/

/* Global Variables
----------------------------------------*/
:root {
	--hover-opacity: .5;
	
	/* These colours are configured in Kadence Theme:
	
		Light Theme --global-palette1
		===================================================
		1. Accent #083ED3 				= --global-palette1
		2. Accent Alt #DA291C 			= --global-palette2 (Swiss red)
		3. Strongest Text #2C3345 		= --global-palette3
		4. Strong Text #7A86A9 			= --global-palette4
		5. Medium Text #002BA1 			= --global-palette5
		6. Subtle Text #DBDFEA 			= --global-palette6
		7. Subtle Background #E5E8F0 	= --global-palette7
		8. Lighter Background #F2F4F7 	= --global-palette8
		9. White #FFFFFF 				= --global-palette9
	
	
		Dark Theme --global-palette2
		===================================================
		1. Accent #40A8FF 				= --global-palette1
		2. Accent Alt #DA291C 			= --global-palette2
		3. Strongest Text #FFFFFF 		= --global-palette3
		4. Strong Text #EEF6FB 			= --global-palette4
		5. Medium Text #E6F2F9 			= --global-palette5
		6. Subtle Text #E6F2F9 			= --global-palette6
		7. Subtle Background #043858 	= --global-palette7
		8. Lighter Background #0E2F45 	= --global-palette8
		9. White #01243B 				= --global-palette9

	*/
	
	/* Colours - Light Theme */
	--blue-2: #002BA1;
	--light-blue-4: #F0F4FE;
	--light-blue-5: #D2DDFB;
	--green-1: #61BA13;
	--green-2: #EEF7E5;
	--green-3: #D6ECC1;
	--green-4: #488B0E;  /* Hover color for --green-1 */
	--light-grey-1: #F8F9F9;
	--light-grey-4: #BFC6D9;
	--dark-grey-1: #DBDFEA;
	--dark-grey-2: #7A86A9;
	--black: #000;
	
	/* Colours - Dark Theme */
	--dark-blue-1: #345062;	
	--dark-blue-2: #02375A;
	--dark-blue-3: #01243B;
	--dark-blue-5: #5B7D94;
	--dark-blue-6: #103751;
	--light-blue-2: #144666;
	--grey-1: #84A0B3;
	
	/* Other colors */
	--global-palette2-hover: #A81B14; /* Hover color for Swiss red */
	--white: #FFF;
	
	/* Margins */
	--margin-xs: 4px;
	--margin-s: 8px;
	--margin-m: 12px;
	--margin-l: 16px;
	--margin-xl: 24px;
	--margin-2xl: 32px;
	--margin-3xl: 48px;
	--margin-4xl: 64px;
	
	/* Font sizes */
	/*--font-xs: 14px;*/
	--font-s: 16px;
	--font-m: 20px;
	--font-l: 24px;
	/*--font-xl: 0px;
	--font-2xl: 0px;
	--font-3xl: 0px;
	--font-4xl: 0px;*/
}

/* General Styles
----------------------------------------*/
body {
	line-height: 32px !important;
}

body, code, h1, h2, .ohcc-h2, h3, h4, h5, h6, p, select {
	font-family: "Gill Sans", Corbel, Calibri, Verdana, sans-serif !important;
}

/* The code tag is used to display the new e-mail address if users change their e-mail address. */
code {
	font-size: inherit;
}

main p {
    margin: 0 0 var(--margin-xl);
}

main ul li {
    margin: 0 0 6px;
}

.ohcc-hero > div {
	max-width: var(--global-content-width) !important;
}

.content-wrap {
	margin: var(--margin-3xl) 0 0;
}

.content-area ul {
    list-style-type: disc !important;
}

.site-footer {
    /* 20251024, Arno: added margin to the bottom to prevent sticky footer ads overlapping the footer.
	margin-top: 30px; */
    margin: 30px 0 90px;
}

/* Headers */

h1 {
	display: inline-block; /* Because of the "copy URL" button after the header. */
	text-align: left;
}

h2, .ohcc-h2 {
	display: inline-block; /* Because of the "copy URL" button after the header. */
	margin: 0 0 var(--margin-xl) !important; /* 20230710: Arno added "!important" because Kadence theme overwrites this. */
	padding: var(--margin-4xl) 0 0 !important; /* Top padding makes sure that the header is not hidden behind the sticky header when scrolling to it via an anchor link. */
}

/* 20250306: Arno. Added styling for .ohcc-product-link-list-short. */
.ohcc-must-know h2, .ohcc-product-link-list-short .ohcc-h2 {
	background: url(/wp-content/uploads/msa-icon.svg) no-repeat 0px 49px; /* H2 with logo icon */
    padding: var(--margin-4xl) 0 0 100px !important;
    background-size: 84px;
}

/* 20241005: Arno. Added the class "ohcc-h2" to use on div's that should look like an h2 tag. To be used for headings that should not be included in the table of contents. */
.ohcc-h2 {
	/* Apply the styles of the h2 in Kadence Theme. */
	font-style: normal;
	font-weight: 700;
	font-size: 48px;
	line-height: 56px;
	letter-spacing: 0em;
	text-transform: none;
	color: var(--global-palette3);
}
/* Apply the styles of the h2 in Kadence Theme. */
.single-content .ohcc-h2+* {
	margin-top: 0;
}

h3 {
	margin: var(--margin-2xl) 0 var(--margin-m);
	line-height: var(--margin-2xl);
}

h4 {
	margin: 0 0 var(--margin-s);
}

/* Buttons */

/* 20240122: Arno. Changed Load More button of FacetWP from secundary to primary styling.
.ohcc-nav-block > div:last-child a:link, .ohcc-nav-block > div a:visited, .wp-block-buttons >.wp-block-button a, button.facetwp-load-more, .ohcc-btn-secondary
*/
.ohcc-nav-block > div:last-child a:link, .ohcc-nav-block > div a:visited, .wp-block-buttons >.wp-block-button a, .ohcc-btn-secondary {
    display: inline-block;
	text-transform: uppercase;
    text-decoration: none;
    font-size: .8em;
    color: var(--green-1);
    font-weight: 700;
    border: 2px solid var(--green-1);
    border-radius: 6px;
    padding: var(--margin-m) var(--margin-2xl);
    margin: var(--margin-xl) 0 0;
	background: var(--global-palette9);
}

/* 20240122: Arno. Changed Load More button of FacetWP from secundary to primary styling.
.ohcc-nav-block > div a:hover, .ohcc-nav-block > div a:active, .wp-block-buttons >.wp-block-button a:hover, .wp-block-buttons >.wp-block-button a:active, button.facetwp-load-more:hover, .ohcc-btn-secondary:hover, .color-switch-dark .ohcc-btn-secondary:active, .color-switch-dark .ohcc-btn-secondary:focus, .ohcc-testimonials-group .wpsr-write-review:hover, .ohcc-testimonials-group .wpsr-reviews-loadmore span:hover
*/
.ohcc-nav-block > div a:hover, .ohcc-nav-block > div a:active, .wp-block-buttons >.wp-block-button a:hover, .wp-block-buttons >.wp-block-button a:active, .ohcc-btn-secondary:hover, .color-switch-dark .ohcc-btn-secondary:active, .color-switch-dark .ohcc-btn-secondary:focus, .ohcc-testimonials-group .wpsr-write-review:hover, .ohcc-testimonials-group .wpsr-reviews-loadmore span:hover {
	background: var(--green-1) !important;
	color: var(--global-palette9) !important;
}

div.facetwp-facet-pager_load_more {
    text-align: center;
}

div.facetwp-facet-pager_load_more button {
    margin: 0;
}

div#inner-wrap {
    clear: both;
}

.ohcc-commercial-disclosure {
	font-size: .8em;
	color: var(--dark-grey-2);
	margin: var(--margin-l) 25px;
	float: right;
	line-height: 26px;
}

.ohcc-commercial-disclosure img {
    float: left;
    margin: 5px 5px 0px 0;
}

.ohcc-commercial-disclosure a:link, .ohcc-commercial-disclosure a:visited {
	color: var(--dark-grey-2);
}

.ohcc-commercial-disclosure a:hover, .ohcc-commercial-disclosure a:active {
	text-decoration: none;
}

.ohcc-downloads button, .ohcc-btn-tertiary {
	text-transform: uppercase;
    text-decoration: none;
    font-size: .8em;
    color: var(--green-1);
    font-weight: 700;
    border-radius: 6px;
    padding: 14px var(--margin-2xl);
    display: inline-block;
    margin: 0 auto var(--margin-m) !important;
	background: var(--green-2);
}

.ohcc-downloads button img {
    width: 24px;
}

.ohcc-downloads button:hover, .ohcc-btn-tertiary:hover {
	background: var(--green-3);
	color: var(--green-1);
}

/* 20250115, Arno: added class ohcc-button-action1, for important CTAs. */
/* 20240122, Arno: Changed Load More button of FacetWP from secundary to primary styling.
.fwp_button a button, .ohcc-map-detailed-disabled > div > a, .ohcc-post-list2-item button, .ohcc-weather-report-disabled > div > a
*/
/* 20241017, Arno: add button for Show/Hide content.
.fwp_button a button, .ohcc-map-detailed-disabled > div > a, .ohcc-post-list2-item button, .ohcc-weather-report-disabled > div > a, button.facetwp-load-more */
/* 20250724, Arno: added class ohcc-button-action3, for the custom WordPress Button block. */
.fwp_button a button, .ohcc-map-detailed-disabled > div > a, .ohcc-post-list2-item button, .ohcc-weather-report-disabled > div > a, button.facetwp-load-more, .ohcc-toggle-content-show, .ohcc-toggle-content-hide, .ohcc-button-action1, .ohcc-button-action2, .ohcc-button-action3 {
	text-transform: uppercase;
    text-decoration: none;
    font-size: .8em;
	color: var(--white) !important; /* 20250115, Arno: added important to make this work for .ohcc-button-action1 in dark mode. */
    font-weight: 700;
    border-radius: 6px;
    padding: 12px 32px;
    display: inline-block;
	background: var(--green-1);
	text-align: center;
}

/* 20250402, Arno: added class ohcc-button-action2, for important CTAs, standalone button. */
.ohcc-button-action2 {
	display: table;
	margin: var(--margin-xl) 0;
}

/* 20250724, Arno: created a Button block for WordPress. */
.ohcc-button-align-center {
    text-align: center;
}
.ohcc-button-align-left {
    text-align: left;
    width: fit-content;
}
/*.ohcc-button-action1, .ohcc-button-action3 {
    margin: var(--margin-xl) 0;
}*/
.ohcc-button-action3 {
	background: var(--green-1);
}
.ohcc-button-action3:hover {
	background: var(--green-4);
}
.ohcc-button-link {
    display: block;
    font-size: var(--font-m);
    text-align: center;
}
.ohcc-button-wrapper {
    margin: var(--margin-xl) 0;
}

/* 20241017, Arno: button for Show/Hide content is small and requires different styles because it's a <label> tag. */
.ohcc-toggle-content-show, .ohcc-toggle-content-hide {
    padding: 2px var(--margin-xl);
    display: block;
	background: var(--green-1);
	margin: var(--margin-xl) 0;
    cursor: pointer;
	width: max-content;
}

.ohcc-map-detailed-disabled > div > a, .ohcc-weather-report-disabled > div > a, button.facetwp-load-more {
    margin: var(--margin-l) 0 0;
}

/* fix weather box width for logged out users - after update */
/* 20250716, Arno: removed this to make it work for mobile */
.ohcc-weather-report-disabled {
    width: fit-content !important;
}

/* 20240819: Arno. Removed margin because we changed the order of the text and the button. */
/*.ohcc-post-list2-item button {
	margin-bottom: 20px;
}*/

/* 20250115, Arno: added class ohcc-button-action1. */
.ohcc-post-list1c-item button, .ohcc-post-list1c-footer + .facetwp-facet button.facetwp-load-more, .ohcc-post-list1n-item button, .ohcc-post-list2-item button, .ohcc-button-action1, .ohcc-button-action2 {
	background: var(--global-palette2) !important;
}

button.facetwp-load-more {
	width: 50%
}

/* 20240819: Arno. Removed margin because we changed the order of the text and the button. */
/*.ohcc-post-list1c-item .fwp_post_text, .ohcc-post-list1n-item .fwp_post_text {
	margin-top: 20px;
}*/

/* 20240819: Arno. Added margin because we changed the order of the text and the button. */
.ohcc-post-list1c-item button, .ohcc-post-list1n-item button, .ohcc-post-list2-item button {
	margin-top: var(--margin-l);
}

/* 20240201: Arno. FacetWP sets the facetwp-hidden class on this button when there are no more results in a listing and it needs to be hidden. Our CSS overrides the display property on that class. Here, we correct that. */
button.facetwp-load-more.facetwp-hidden {
	display: none
}

/* 20240122: Arno. Changed Load More button of FacetWP from secundary to primary styling.
.fwp_button a button:hover, .ohcc-map-detailed-disabled > div > a:hover, .ohcc-post-list2-item button:hover, .ohcc-weather-report-disabled > div > a:hover
*/
/* 20241017, Arno: add button for Show/Hide content.
.fwp_button a button:hover, .ohcc-map-detailed-disabled > div > a:hover, .ohcc-weather-report-disabled > div > a:hover, button.facetwp-load-more:hover */
.fwp_button a button:hover, .ohcc-map-detailed-disabled > div > a:hover, .ohcc-weather-report-disabled > div > a:hover, button.facetwp-load-more:hover, .ohcc-toggle-content-show:hover, .ohcc-toggle-content-hide:hover {
	background: var(--green-4);
}

/* 20250115, Arno: added class ohcc-button-action1. */
.ohcc-post-list1c-item button:hover, .ohcc-post-list1c-footer + .facetwp-facet button.facetwp-load-more:hover, .ohcc-post-list1n-item button:hover, .ohcc-post-list2-item button:hover, .ohcc-button-action1:hover, .ohcc-button-action2:hover {
	background: var(--global-palette2-hover) !important;
}

/* Navigation blocks */

.ohcc-nav-blocks {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
	/* 20240714, Arno: changed margin */
	margin-top: var(--margin-xl);
}

.ohcc-nav-block img {
	border-radius: 6px;
}

.ohcc-nav-block img:hover {
	opacity: var(--hover-opacity);
	background-color: var(--global-palette9);
	cursor:pointer
}

.ohcc-nav-block {
    border: 1px solid var(--dark-grey-1);
    padding: var(--margin-xl);
    border-radius: 10px;
    text-align: center;
	flex: 0 0 32%;
	margin: 0 2% var(--margin-2xl) 0;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ohcc-nav-blocks > div:nth-child(3n) {
	margin-right: 0;
}

.ohcc-nav-block h4 {
	margin: var(--margin-m) 0 var(--margin-s);
    font-style: normal;
    font-weight: 700;
    font-size: var(--font-l);
    text-transform: none;
    color: var(--global-palette3);
}

.ohcc-nav-block h4 a:link, .ohcc-nav-block h4 a:visited {
	color: var(--global-palette3) !important;
}

.ohcc-nav-block h4 a:hover, .ohcc-nav-block h4 a:active {
	color: var(--green-1) !important;
	background: none !important;
}

/* Post date, sponsored posts */
.ohcc-postdate, .ohcc-sponsored {
	font-size: .8em;
    color: var(--dark-grey-2);
}

/* Margins for the author link. */
.ohcc-postdate a {
	margin: 0 3px;
}

.ohcc-postdate img, .ohcc-sponsored img {
	filter: invert(59%) sepia(32%) saturate(373%) hue-rotate(187deg) brightness(84%) contrast(79%);
	float: left;
    margin: var(--margin-s) 5px 0px 0;
}

/* Post author summary */

.ohcc-author-summary {
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
	align-items: center;
	gap: 32px;
    max-width: 860px;
    text-decoration: none;
    font-size: 20px;
    margin: var(--margin-4xl) auto;
    background: var(--light-grey-1);
    padding: var(--margin-2xl);
    border-radius: 140px;
    line-height: 32px;
	color: var(--global-palette3);
	font-style: italic;
}

.ohcc-author-summary img {
    border-radius: 50%;
	max-width: none;
    width: 100px;
    height: 100px;
}

.ohcc-author-summary span {
	display: block;
	font-style: normal;
	font-weight: 600;
}

/* User avatar */
.ohcc-user-avatar img {
	border: 0;
	border-radius: 6px;
	margin: 10px 0;
	width: 150px;
	height: 150px;
}

a.ohcc-user-avatar:hover {
	opacity: var(--hover-opacity);
}

/* User menu avatar */
/* Prevent weird shapes in case people upload a non-square avatar. */
.header-account-avatar img {
    max-width: 24px;
    max-height: 24px;
}

/* Breadcrumbs */

.ohcc-breadc {
	font-size: .8em;
	margin: var(--margin-l) 25px;
    float: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	flex-direction: row;
    gap: 6px;
}

.ohcc-breadc-item, .ohcc-breadc-separator {
	display: inline-block;
}

.ohcc-breadc a {
	color: var(--dark-grey-2);
}

.ohcc-breadc-separator{
	margin:0 5px;
	color: var(--light-grey-4);
    font-size: 20px;
    font-weight: 200;
}

/* Table of content */

.kb-table-of-content-nav .kb-table-of-content-wrap {
    border: 1px solid var(--dark-grey-1);
    border-radius: 10px;
	/* 20241021, Arno: Smaller gap below expanded table of content.
    margin: var(--margin-l) 0 var(--margin-3xl); */
	margin: var(--margin-l) 0 var(--margin-s);
	padding: var(--margin-l) var(--margin-xl);
}

.kb-table-of-content-nav .kb-table-of-content-wrap ul {
	margin: 0 !important;
	padding: 0 0 0 var(--margin-l) !important;
	list-style-type: disc !important;
}

.kb-table-of-content-nav .kb-table-of-content-wrap ul li {
	margin: 0 0 10px;
}

.kb-table-of-content-nav .kb-table-of-content-wrap ul a {
	color: var(--global-palette1) !important;
}

.kb-table-of-content-nav .kb-table-of-content-wrap ul a:hover {
	color: var(--green-1) !important;
}

/* Tables */

/* Make the table responsive on very narrow screens. */
.ohcc-table2 {
	overflow-x: auto;
}

.content-area .semantic_ui .ui.table, .ohcc-table2 table {
	border: none;
    color: var(--global-palette3);
    margin: 0 0 var(--margin-m);
	border-collapse: collapse;
}

.content-area .semantic_ui .ui.table thead tr th, .ohcc-table2 thead tr th {
	background: var(--global-palette8);
	border: none;
}

.content-area .semantic_ui .ui.striped.table tbody tr td, .ohcc-table2 tbody tr td {
	border: none;
	vertical-align: middle;
}

.content-area .semantic_ui .ui.striped.table tbody tr:nth-child(2n), .ohcc-table2 tbody tr:nth-child(odd) {
	background: var(--global-palette8);
}

.content-area .semantic_ui .ui.table thead tr:first-child>th:first-child, .ohcc-table2 tbody tr th:first-child {
    border-radius: 7px 0 0 7px;
}

.content-area .semantic_ui .ui.table thead tr:first-child>th:last-child, .ohcc-table2 tbody tr th:last-child {
    border-radius: 0 7px 7px 0;
}

.content-area .semantic_ui .ui.striped.table tbody tr:nth-child(2n) {
    background: unset;
}

.content-area .semantic_ui .ui.striped.table tbody tr td:first-child, .ohcc-table2 tbody tr td:first-child {
    border-radius: 7px 0 0 7px;
}

.content-area .semantic_ui .ui.striped.table tbody tr td:last-child, .ohcc-table2 tbody tr td:last-child {
    border-radius: 0 7px 7px 0;
}

.content-area .semantic_ui .ui.striped.table tbody tr:nth-child(2n) td {
    background: var(--global-palette8);
}

.content-area .semantic_ui .ui.striped.table tbody tr:hover td, .ohcc-table2 tr:hover:not(:first-child) {
    background: var(--global-palette7) !important;
}

.content-area .semantic_ui .ui.striped.table tbody tr:hover {
	background: unset !important;
}

a.nt_edit_link {
    float: right;
}

.ohcc-table1 a.nt_btn {
	text-decoration: underline !important;
	font-size: 100% !important;
	padding: 0;
}


/* 20250523, Arno: hover effect on links in tables */
.ohcc-table1 td a {
  display: inline-block;
  transition: all 0.2s ease;
}
.ohcc-table1 td a:hover {
  transform: scale(1.005);
  font-weight: 600;
}
/* 20250523, Arno: hover effect on links in tables */

/* 20240904, Arno. */
.ohcc-table1 img {
	border-radius: 6px;
}

/* 20240904, Arno: assuming that any picture in a table is linked, we need a hover effect. */
.ohcc-table1 img:hover {
	opacity: var(--hover-opacity);
}

/* Set a width range for all columns except the last. The last column usually contains the longest text. */
.ohcc-table1 th:not(:last-child), .ohcc-table1 td:not(:last-child) {
	min-width: 150px;
	max-width: 300px;
}
/* The last column is sometimes too narrow if the min-width we set for mobile doesn't apply yet. Set a min-width. */
.ohcc-table1 th:last-child, .ohcc-table1 td:last-child {
	min-width: 200px;
}

.ohcc-table-footer, .ohcc-post-list1c-footer, .ohcc-post-list2-footer {
	font-size: .8em;
    color: var(--dark-grey-2);
    margin: 0 0 var(--margin-l) !important;
    background: url(/wp-content/uploads/info.svg) no-repeat 0 2px;
    padding: 0 0 0 22px;
	line-height: 20px;
}

.ohcc-table-footer a, .ohcc-post-list1c-footer a, .ohcc-post-list2-footer a {
	color: var(--dark-grey-2);
}

.ohcc-table2 tr td, .ohcc-table2 tr th {
    padding: var(--margin-l) var(--margin-xl);
    text-align: left;
}

.ohcc-table2 p, .ohcc-table2 ul {
    font-size: var(--font-s);
}

/* Tip notification */

.ohcc-tip {
    font-weight: bold;
    max-width: 1200px;
    min-height: 50px;
    margin: var(--margin-xl) 0;
	background: url(/wp-content/uploads/msa-icon.svg) no-repeat 24px center;
    padding: 20px 20px 20px 140px;
	background-size: 104px;
}

/* Scroll Up Arrow */

#kt-scroll-up-reader, #kt-scroll-up {
    border: none !important;
    border-radius: 50% !important;
    color: var(--global-palette1) !important;
    /* 20231128, Arno: remove this as it blocks the setting in the theme to configure the bottom margin of this button. We need to move it because the Ezoic anchor ad overlaps and disables it.
	bottom: 32px;*/
    font-size: 2em !important;
    padding: 15px !important;
    background: var(--light-blue-4) !important;
    /*right: 32px !important;*/
	z-index: 10 !important; /* 20240609, Arno: changed from 2 to 10 because the scroll-up arrow was hidden behind the sticky sidebar ad. */
}

#kt-scroll-up-reader:hover, #kt-scroll-up:hover {
    background: var(--light-blue-5) !important;
}

/* Copy URL */

.ohcc-copy-url {
	display: inline;
	margin-bottom: .4%;
    filter: invert(59%) sepia(32%) saturate(373%) hue-rotate(187deg) brightness(84%) contrast(79%);
    cursor: pointer;
}

.ohcc-copy-url:hover {
	filter: opacity(1);
}

.color-switch-dark .ohcc-copy-url {
	filter: invert(1) opacity(.6);
}

.color-switch-dark .ohcc-copy-url:hover {
	filter: invert(1) opacity(1);
}

/* Maps & Weather Report */

/* 20240714, Arno: changed margin
.ohcc-map-listing, .ohcc-map-listing-disabled, .ohcc-map-detailed, .ohcc-map-detailed-disabled { */
.ohcc-map-listing, .ohcc-map-listing-disabled {
	margin: 0 0 var(--margin-4xl);
}
.ohcc-map-detailed, .ohcc-map-detailed-disabled {
	margin: var(--margin-xl) 0 var(--margin-4xl);
}

.ohcc-map-listing-disabled, .ohcc-map-detailed-disabled {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* 20240714, Arno: rounded map border */
.ohcc-map-listing #facetwp-map, .ohcc-map-detailed .wpgmza_map, .ohcc-map-detailed-disabled > img {
	border-radius: 6px;
}

/*.ohcc-map-listing-disabled > img, .ohcc-map-detailed-disabled > img {
20250716, Arno: added ohcc-weather-report-disabled */
.ohcc-map-listing-disabled > img, .ohcc-map-detailed-disabled > img, ohcc-weather-report-disabled > img {
	/* max-width: 1200px;
	height: 400px; 	/* Image ID 198698 used for the disabled map has an aspect ratio of 1:3. We'll set the height to 400px, just like the enabled map. */
	width: 100%;
	height: auto;
	min-height: 380px;
	opacity: var(--hover-opacity);
	background-color: var(--global-palette9);
}

.ohcc-map-detailed-disabled > div img {
    position: absolute;
    left: 16px;
}

.ohcc-map-listing-disabled > div, .ohcc-map-detailed-disabled > div {
	position: absolute;
  	left: 50%;
  	top: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	z-index: 1;
	background-color: var(--global-palette9);
	border-radius: 10px;
	padding: 24px 24px 24px 130px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .1);
	display: flex;
    width: 830px;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 24px;
}

.ohcc-map-detailed-disabled >div > a {
	margin: 0;
}

.ohcc-map-detailed-disabled > div > div > div:nth-child(1) {
    font-size: var(--font-l);
}

.ohcc-map-detailed-disabled > div > div > div:nth-child(2), .ohcc-map-detailed-disabled > div > div > div:nth-child(2) a {
    font-size: 16px;
	color: var(--dark-grey-2);
}

.facetwp-map-filtering { 
    display: none; /* Map button "Enable map filtering" */
}

.ohcc-weather-report {
	width: 575px;
	height: 503px;
	display: block
}

.ohcc-weather-report-disabled {
	max-width: 598px;
	position: relative;
	overflow: hidden;
}

/* 20240714, Arno: changed margin */
.ohcc-weather-report, .ohcc-weather-report-disabled {
	margin-top: var(--margin-xl);
}

/* 20240714, Arno: rounded border */
.ohcc-weather-report, .ohcc-weather-report-disabled > img {
	border-radius: 6px;
}

.ohcc-weather-report-disabled > div {
	position: absolute;
  	left: 50%;
  	top: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	z-index: 1;
	background-color: var(--global-palette9);
	border-radius: 10px;
	padding: 0 32px 32px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .1);
	text-align: center;
	width: 75%;
}

.ohcc-weather-report-disabled > div > img {
	margin: auto;
}

.ohcc-weather-report-disabled > div > div > div:nth-child(1) {
    font-size: var(--font-l);
}

.ohcc-weather-report-disabled > div > div > div:nth-child(2), .ohcc-weather-report-disabled > div > div > div:nth-child(2) a {
    font-size: var(--font-s);
	color: var(--dark-grey-2);
	margin: 10px 0;
}

.ohcc-weather-report-credit {
	font-size: var(--font-s);
}

.ohcc-weather-report-disabled > img {
	/* 20250716, Arno: removed.
    max-width: 598px; */
	height: 503px; /* Image ID 198735 used for the disabled weather forecast has an aspect ratio of 1:1.1888. We'll set the height to 503px, just like the enabled weather forecast. */
	opacity: var(--hover-opacity);
	background-color: var(--global-palette9);
}

/* Lightbox */

.ohcc-lightbox-row {
	width: 100%;
	text-align: right
}

/* Clear floats after the columns */
.ohcc-lightbox-row:after {
	content: "";
	display: table;
	clear: both;
}

.ohcc-lightbox-row:last-child {
	display: flex;
	align-items: center;
}

.ohcc-lightbox-col {
	float: left;
	width: 33.33%;
	text-align: center;
	vertical-align: middle;
}

.ohcc-lightbox-col img {    
	max-height: 65vh;
    width: auto !important;
}

.ohcc-lightbox-col-5 {
    width: 7%;
	text-align: center;
	padding: 0;
}

.ohcc-lightbox-col-5 .ohcc-btn-left, .ohcc-lightbox-col-5 .ohcc-btn-right {
	width: 40px;
}

.ohcc-lightbox-col-90 {
    width: 90%;
	margin: 0 0;
	text-align: center;
}

.ohcc-lightbox {
	background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(4px);
	display: none;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1em;
}

/* @media (min-width: 1200px) {
	.ohcc-lightbox {
		padding-top: 60px;
	}
} */

/* Unhide the lightbox when it's the target */
.ohcc-lightbox:target {
  	display: block;
}

.ohcc-lightbox span {
	margin-top: 40px;
  	display: block;
  	width: 100%;
  	height: 90%;
	min-height: 800px;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: contain;
}

.ohcc-lightbox figcaption {
    text-align: center;
    color: black;
}

.lightbox-image {
    padding: 32px;
    background: #fff;
    border-radius: 20px;
	box-shadow: 0 0 50px rgb(0 0 0);
	display: inline-block;
    margin: 0 auto;
}

.lightbox-image img {
    margin: 0 auto 26px auto !important;
	
}

.lightbox-image figcaption {
	font-size: 20px !important;
}

.ohcc-lightbox-col-5 a {
    background: rgba(255, 255, 255, .15) !important;
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
	position: relative;
}

.ohcc-lightbox-col-5 a:hover {
    background: rgba(255, 255, 255, .3) !important;
}

.ohcc-lightbox-row #ohcc-btn-close {
    float: right;
    width: 44px;
	position: absolute;
	top: 1rem;
	right: 0.75rem;
    opacity: .4;
}

.ohcc-lightbox-row #ohcc-btn-close:hover {
    opacity: 1;
	cursor: pointer;
}

.ohcc-lightbox-col-5 a img {
	position: absolute;
  	left: 50%;
  	top: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	width: 18px !important;
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

/* FAQ's */

ol.rank-math-list {
    list-style: none;
}

ol.rank-math-list li {
    counter-increment: step-counter;
	position: relative;
}

ol.rank-math-list li h3:before {
    content: counter(step-counter);
    margin-right: var(--margin-m);
    background-color: var(--global-palette7);
    color: var(--global-palette3);
    padding: 0 10px;
    border-radius: 4px;
    line-height: 32px;
    display: inline-block;
    text-align: center;
    font-size: .8em;
}

/* Maintenance notification */

.ohcc-maintenance {
	text-align: center;
	background-color: var(--global-palette2);
	color: var(--global-palette9);
	padding: var(--margin-l);
	font-weight: 700;
	border-radius: 6px;
	margin: 0 25px var(--margin-xl);
}

/* Map markers */

.ohcc-map-marker-container {
	display: block;
	display: flex;
	max-width: 450px;
	text-decoration: none;
	text-align: left;
    gap: 10px;
	align-items: flex-start;
}

.ohcc-map-marker-title {
	font-size: 20px;
	line-height: 28px;
	font-weight: bold;
	color: var(--global-palette1);
    margin: 0 0 6px;
}

.ohcc-map-marker-container .wp-post-image { 
	margin: 7px;
	width: 40%;
	border-radius: 5px;
}

.ohcc-map-marker-txt, .wpgmza_infowindow_title {
	color: var(--black);
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 20px;
}

.ohcc-map-marker-link {
	margin-top: var(--margin-m);
    font-size: 14px;
    color: var(--global-palette1);
    font-weight: 600;
    text-transform: uppercase;
}

.ohcc-map-marker-container:hover .ohcc-map-marker-link, .ohcc-map-marker-container:hover .ohcc-map-marker-title {
	color: var(--global-palette-highlight-alt);
}

.gm-style-iw-d {
    max-height: unset !important;
}

/* Header
----------------------------------------*/

header#masthead {
	border-bottom: 1px solid var(--dark-grey-1);
}

header .custom-logo {
    max-width: 200px;
    height: auto;
}

header .header-html2 {
	font-size: .8em;
	margin: 0 0 var(--margin-s) 0;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
}

.secondary-navigation .secondary-menu-container > ul li.menu-item > a {
    padding: 0 12px !important;
	font-size: var(--font-s) !important;
}

.header-navigation .header-menu-container ul ul.sub-menu {
	border-radius: 10px;
}

.header-navigation .header-menu-container ul ul li.menu-item {
	margin: 0 var(--margin-l);
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
	padding: var(--margin-l) 0;
}

a.ohcc-search {
    background: var(--light-grey-1);
    padding: 10px;
	margin: var(--margin-m) 0 0;
    border-radius: 50%;
    display: inline-block;
	border: 1px solid transparent;
}

a.ohcc-search:hover {
	border: 1px solid var(--green-1);
}

.ohcc-icon-search {
	height: 16px;
	width: auto;
	max-width: unset;
}

.site-main-header-inner-wrap.site-header-row.site-header-row-has-sides.site-header-row-center-column {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
}

/* Only show 12 characters of the user nickname, to prevent issues with long names. */
.menu .header-account-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12ch;
}

.menu .header-account-label:hover {
	color: var(--green-1)
}

.header-navigation .menu {
    flex-wrap: nowrap;
}

.header-navigation .menu li {
    white-space: nowrap;
}

/* Make the user account menu less wide. This makes the distance between the main item and sub menu items smaller and thus easier to navigate. */
#account-navigation #menu-logged-out-menu a, #account-navigation #menu-logged-in-menu a, #account-navigation #menu-logged-out-menu-de a, #account-navigation #menu-logged-in-menu-de a {
	width: auto;
}

/* Hero section
----------------------------------------*/

.ohcc-hero img.wp-post-image {
	width: 100%;
	max-width: calc(768px*.8);
	border-radius: 20px;
}

.ohcc-img-copyright{
	font-size: 64%;
	padding: 2px 10px;
    width: fit-content;
    opacity: .8;
    background-color: var(--global-palette9);
    border-radius: 20px;
    position: absolute;
    bottom: 12px;
    left: 12px;
	color: var(--global-palette3);
}


@media only screen and (max-width: 1024px) {
  body .ohcc-img-copyright {
    left: 20% !important;
  }

  .ohcc-hero .wp-block-kadence-advancedheading {
      padding-right: 0 !important;
  }
}
@media only screen and (max-width: 900px) {
  body .ohcc-img-copyright {
    left: 15% !important;
  }
}
@media only screen and (max-width: 800px) {
  body .ohcc-img-copyright {
    left: 10% !important;
  }
}
@media only screen and (max-width: 670px) {
  body .ohcc-img-copyright {
    left: 5% !important;
  }
}


.ohcc-hero .kt-inside-inner-col {
	margin-right: .7rem;
	margin-left: 1.5rem;
	margin-top: 2.5rem;
}

.ohcc-hero .wp-block-kadence-advancedheading {
	text-align: left;
	font-size: 30px;
    line-height: 42px;
    padding-right: var(--margin-m);
}

.ohcc-hero .kt-row-column-wrap {
	padding: 20px;
	max-width: unset;
}

.ohcc-hero .kt-inside-inner-col {
	text-align: left;
	margin: auto;
	position: relative;
}

.ohcc-hero .kt-row-column-wrap {
	padding: 20px;
	max-width: unset;
	gap: 24px;
}

.ohcc-hero .kt-row-column-wrap > div:first-child .kt-inside-inner-col {
    margin-left: 0;
}

.ohcc-hero .kt-row-column-wrap > div:last-child .kt-inside-inner-col {
    margin-right: 0;
}

/* Homepage
----------------------------------------*/

.ohcc-usp > .kt-inside-inner-col {
    align-items: stretch !important;
    gap: var(--margin-xl) !important;
}

.ohcc-usp .inner-column-1 {
    border: 4px solid var(--blue-2);
    border-radius: 10px;
    padding: var(--margin-xl);
    margin: 20px 0 var(--margin-4xl);
}

.ohcc-usp .inner-column-1 > .kt-inside-inner-col {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
}

.ohcc-usp .inner-column-1 > .kt-inside-inner-col, .ohcc-usp .inner-column-1 > .kt-inside-inner-col > div {
    height: 100%;
}

.ohcc-usp .inner-column-1 > .kt-inside-inner-col figure {
	margin: 0;
}

.ohcc-usp .inner-column-1 p:first-child {
    font-size: var(--font-l);
	line-height: 34px;
    margin: 0 0 var(--margin-s);
	font-weight: 700;
}

.ohcc-usp .inner-column-1 p:last-child {
    font-size: 19px;
    line-height: 27px;
    margin: 0;
}

.ohcc-usp > .kt-inside-inner-col img {
    min-width: 48px;
}

.ohcc-testimonials .wpsr-review-template .wpsr-review-date {
    font-size: var(--font-s);
}

/* Content Page
----------------------------------------*/

.ohcc-downloads {
	display: flex;
	column-gap: var(--margin-xl);
	flex-direction: row;
    flex-wrap: wrap;
	margin: 0 0 var(--margin-4xl);
}

.ohcc-downloads > div {
	border: 1px solid var(--dark-grey-1);
	border-radius: 10px;
	padding: var(--margin-xl);
	text-align: center;
	width: 46%;
    max-width: 500px;
    /* 20250722, Arno: correction of download block margins. */
    margin-top: var(--margin-xl);
}

.ohcc-downloads > div > div:first-child {
	font-size: var(--font-l);
	line-height: 30px;
	font-weight: 700;
	margin: 0 0 var(--margin-xl);
}

.ohcc-downloads button {
    display: flex;
    margin: auto;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* About Us */

.ohcc-about-us {
	background: var(--global-palette8);
    padding: var(--margin-xl);
    border-radius: 10px;
    margin: var(--margin-3xl) 0;
}

.ohcc-about-us .kt-inside-inner-col {
    column-gap: 64px !important;
	text-align: center;
}

.ohcc-about-us .kt-inside-inner-col .wp-block-buttons {
	justify-content: center;
}

.ohcc-about-us .kt-inside-inner-col p:first-child {
    font-size: var(--font-l);
    margin: 0 0 var(--margin-l);
}

.ohcc-about-us .kt-inside-inner-col p:nth-child(2) {
    margin: 0 !important;
}

.ohcc-about-us > div > div:nth-child(2) p:nth-child(2) {
    /*20230612: removed by Arno
	font-weight: 700;*/
    margin: 0 0 10px !important;
}

.ohcc-about-us > div > div:nth-child(2) p:nth-child(4) {
    margin: var(--margin-l) 0 4px;
}

.ohcc-about-us .kt-inside-inner-col ul {
    text-align: left;
    max-width: 330px;
    margin: auto;
}

.ohcc-about-us > div {
	align-items: stretch !important;
}

.ohcc-about-us > div > div > div {
	height: 100%;
	justify-content: space-between !important;
	display: inline-grid;
}

.ohcc-about-us > div > div > div .wp-block-buttons {
	align-items: flex-end;
}

/* Navigation Page
----------------------------------------*/

/* Filters */

.ohcc-post-list1n-filter1, .ohcc-post-list1c-filter1 {
    margin: var(--margin-xl) 0 var(--margin-l);
}

.ohcc-post-list1n-filter2, .ohcc-post-list1c-filter2 {
	margin: 0 0 var(--margin-m);
}

.ohcc-post-list1n-filter1 .kt-inside-inner-col, .ohcc-post-list1c-filter1 .kt-inside-inner-col {
	gap: 10px;
}

.ohcc-post-list1n-filter1 > div > div, .ohcc-post-list1n-filter2 .kt-inside-inner-col .facetwp-facet {
	flex-grow: 1;
	width: 20%;
}

.ohcc-post-list1n-filter1 > div, .ohcc-post-list1c-filter1 > div, .ohcc-post-list1n-filter2 .kt-inside-inner-col {
    column-gap: 16px !important;
}

.ohcc-post-list1n-filter1 select, .ohcc-post-list1c-filter1 select, .facetwp-facet select {
	border: 1px solid var(--dark-grey-1);
	border-radius: 7px;
	font-weight: 700;
    padding: 10px 30px 10px 16px;
	width: 100%;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	cursor: pointer;
	background-position: calc(100% - 10px) 50%; /* Correct the position of the background image as set by Kadence Theme/Blocks (98% 50%). It caused a varying margin to the right edge, depending on the width of the select tag. */
}

.ohcc-post-list1n-filter1 select option, .ohcc-post-list1c-filter1 select option, .facetwp-facet select option {
	font-weight: 400;
}

.ohcc-post-list1n-filter1 select option:checked, .ohcc-post-list1c-filter1 select option:checked, .facetwp-facet select option:checked {
	font-weight: 700;
}

.ohcc-post-list1n-filter2 .kt-accordion-wrap {
    border-radius: 7px;
    border: 1px solid var(--dark-grey-1);
}

.ohcc-post-list1n-filter2 .kt-accordion-wrap .wp-block-kadence-pane .kt-accordion-header-wrap .kt-blocks-accordion-header {
    border: none;
	border-radius: 7px;
	background: none;
}

.kt-accordion-id_243c35-c6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id_243c35-c6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-icon-trigger:before {
	background: var(--light-grey-4);
}

.ohcc-post-list1n-filter2 .kt-blocks-accordion-header .kt-blocks-accordion-title {
    font-size: var(--font-m);
	color: var(--global-palette3) !important;
}

.ohcc-post-list1n-filter2 .kt-accordion-wrap .kt-accordion-panel-inner {
    border-radius: 7px;
	padding: 8px 12px 12px;
	background: none;
}

.ohcc-post-list1n-filter2 .kt-accordion-inner-wrap .wp-block-kadence-pane .kt-accordion-header-wrap {
    margin-top: 0 !important;
}

.facetwp-slider-wrap .noUi-target {
    background: var(--global-palette9);
    border-radius: 20px;
    border: 1px solid var(--dark-grey-1);
}

.facetwp-slider-wrap .noUi-handle {
    border-radius: 20px;
    background: var(--dark-grey-2);
    cursor: default;
	border: none;
}

.facetwp-slider-wrap .noUi-horizontal {
    height: 12px;
}

.facetwp-slider-wrap .noUi-horizontal .noUi-handle {
    width: 24px;
    height: 24px;
    right: -10px;
    top: -8px;
}

.facetwp-slider-wrap .noUi-connect {
    background: var(--dark-grey-1);
}

.facetwp-facet {
    margin: 0;
	text-align: right;
}

.facetwp-facet .facetwp-slider-label {
    font-weight: 700;
	text-align: center;
    display: block;
}

.facetwp-facet.facetwp-type-slider.not-empty {
    border: 1px solid var(--dark-grey-1);
    padding: 20px 20px 12px;
    border-radius: 7px;
}

.facetwp-facet a {
	color: var(--dark-grey-2);
	font-size: 18px;
}

.facetwp-template {
	margin: var(--margin-2xl) 0 0;
}

/* Pagination */

.facetwp-facet.facetwp-facet-pager_page_numbers {
    margin: 0 0 var(--margin-4xl);
}

.facetwp-pager {
	text-align: center;
}

.facetwp-pager a {
	vertical-align: bottom;
	border: 1px solid var(--dark-grey-1);
	border-radius: 7px;
	color: var(--dark-grey-2);
	padding: 12px 22px;
	font-size: var(--font-m);
	margin: 3px;
}

.facetwp-pager a:hover {
	border: 1px solid var(--dark-grey-2);
}

.facetwp-pager a.active {
	color: var(--global-palette3);
	font-weight: 400;
	background: var(--global-palette7);
	border-color: transparent;
}

.facetwp-pager a.prev {
	background: url(/wp-content/uploads/arrow-left.svg) no-repeat 16px 50%;
    padding-left: 40px;
}

.facetwp-pager a.next {
	background: url(/wp-content/uploads/arrow-right.svg) no-repeat calc(100% - 16px);
    padding-right: 40px;
}

/* Listings */

.ohcc-post-list1n-item > div > div:nth-child(2) > div:first-child, .ohcc-post-list1c-item > div > div:nth-child(2) > div:first-child, .ohcc-post-list2-item > div:nth-child(2) > div:first-child {
	margin: 0 var(--margin-xl) 0 0;
}

.ohcc-post-list1n-item .fwp_img_post, .ohcc-post-list1c-item .fwp_img_post, .ohcc-post-list2-item > div:nth-child(2) > div:first-child img {
	/* Subtle shadow to make images with a white background stand out, while it is hardly visible for other images and in dark mode. */
	box-shadow: 0 0 0 1px rgba(122, 134, 169, .15);
}
.ohcc-post-list1n-item .fwp_img_logo, .ohcc-post-list1c-item .fwp_img_logo {
	height: 75px;
	width: auto;
	position: relative;
	top: 85px;
	left: 10px;
	margin-top: -75px;
	border-radius: 6px;
	rotate: -4deg;
	z-index: 1; /* Make sure that this image is on top of the product image, especially to prevent that the hover effect of the product image applies to the logo image too. */
}

.ohcc-post-list1n-item .fwp_promotions:has(*) {
	margin-bottom: -16px;
}

.ohcc-post-list1n-item .fwp_promotions a {
    text-transform: uppercase;
	text-decoration: none;
    font-size: var(--font-s);
    background: var(--green-1);
    text-align: center;
    color: #fff;
    padding: 2px 8px;
    margin: 0 5px -7px 0;
    display: inline-block;
    border-radius: 6px;
    font-weight: bold;
    letter-spacing: .05em;
	left: 20px;
	top: -30px;
	position: relative;
	rotate: -3deg;
}

.ohcc-post-list1n-item .fwp_promotions a:hover {
	background: var(--green-4);
}

.ohcc-post-list1n, .ohcc-post-list1c {
	gap: unset !important;
}

.ohcc-post-list1n-item, .ohcc-post-list1c-item, .ohcc-post-list2-item {
	/* 20240819: Arno. Changed padding because we changed the order of the text and the button. */
	/*padding: var(--margin-l) var(--margin-l) var(--margin-s);*/
	padding: var(--margin-l) var(--margin-l) var(--margin-l);
	/*border: 1px solid var(--dark-grey-2);*/
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 10px;
	margin: 0 0 var(--margin-xl);
}

.ohcc-post-list1n-item .fwp_img_post, .ohcc-post-list1c-item .fwp_img_post, .ohcc-post-list2-item > div:nth-child(2) > div:first-child img {
	border-radius: 6px;
	width: 100%;
	max-width: 384px;
	display: inline;
}

.ohcc-post-list1n-item .fwp_post_title, .ohcc-post-list1c-item .fwp_post_title, .ohcc-post-list2-item > div:first-child {
    font-size: var(--font-l);
	line-height: 32px;
	padding-bottom: 16px;
}

.ohcc-post-list-labels {
	font-size: var(--font-s);
	color: var(--dark-grey-2);
	/* 20240819: Arno. Changed margin because we changed the order of the text and the button. */
	/*margin: 2px 0 var(--margin-s);*/
	margin: 0 0 var(--margin-s);
	/*display: flex; Arno, 20240705: removed to improve on mid size screens above 600px. */
}

.ohcc-post-list-labels span::before {
	content: '\2022'; /* Encode the bullet */
	color: var(--dark-grey-1);
	font-size: var(--font-m);
	margin: 0 10px;
}

.ohcc-post-list1c-item-vendor {
	margin: var(--margin-2xl) 0 0;
}

.ohcc-post-list1c-item-vendor ul, .ohcc-post-list2-item ul {
	margin: -16px 0 0 14px;
	font-size: var(--font-s);
	line-height: 26px;
}

.ohcc-post-list2-item > div:nth-child(2) {
	display: grid;
	grid-template-columns: 30.0% 1fr;
}

.ohcc-post-list2-item > div:nth-child(2) > div:first-child img:hover {
	opacity: var(--hover-opacity);
	background-color: var(--global-palette9);
	cursor: pointer
}

/* 20250306: Arno. Added styling for .ohcc-product-link-list-short. */
.ohcc-product-link-list-short p {
	margin-bottom: var(--margin-s);
}

/* 20250531: Arno. Added animation for .ohcc-product-link-list-short.*/
@keyframes ohcc-product-link-list-short-ani {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-24px); }
  40%  { transform: translateY(12px); }
  60%  { transform: translateY(-6px); }
  80%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

.ohcc-product-link-list-short.jump-effect {
  animation: ohcc-product-link-list-short-ani 0.6s cubic-bezier(0.25, 1.3, 0.5, 1);
}
/* 20250531: Arno. Added animation for .ohcc-product-link-list-short.*/

/* Product display.
----------------------------------------*/
.ohcc-product-display {
	display: grid;
    grid-template-columns: 20% 1fr;
	padding: 12px;
    border: 1px solid var(--dark-grey-1);
    border-radius: 10px;
    margin: 0 0 var(--margin-2xl);
}

/* Left column (image) */
.ohcc-product-display div:nth-child(1) {
	margin: 0 var(--margin-m) 0 0;
}

.ohcc-product-display div:nth-child(1) img:hover {
    opacity: var(--hover-opacity);
    background-color: var(--global-palette9);
    cursor: pointer;
}

.ohcc-product-display div:nth-child(1) img {
	border-radius: 6px;
    width: 100%;
    max-width: 256px;
}

/* Right column (text) */
.ohcc-product-display div:nth-child(2) > strong {
    font-size: var(--font-l);
	line-height: 32px;
}

.ohcc-product-display div:nth-child(2) > p {
	margin: var(--margin-s) 0;
}

@media (max-width: 768px) {
	/* Stack the columns */
	.ohcc-product-display {
		display: block;
	}
	
	.ohcc-product-display div:nth-child(1) {
		margin: 0 0 var(--margin-l);
	}
}

/* Details Page
----------------------------------------*/

.ohcc-icon-grid {
    margin: var(--margin-xl) 0 0;
    display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
	flex-direction: row;
    /* 20241005, Arno: smaller icon grid. */
	/*gap: var(--margin-xl);*/
	gap: var(--margin-xs);
}

.ohcc-icon-grid div {
	width: 250px;
	/* 20241005, Arno: smaller icon grid. */
	/*text-align: center;
	padding: 16px;*/
	padding: var(--margin-xs);
	align-items: center;
    display: flex;
	font-size: var(--font-s);
}

/* 20241005, Arno: smaller icon grid. */
.ohcc-icon-grid div a {
	display: contents;
}

.ohcc-icon-grid > div img {
	/* 20241005, Arno: smaller icon grid. */
    /*margin: 0 auto var(--margin-m);
	width: 64px;*/
	margin-right: var(--margin-m);
	width: 48px;
    filter: brightness(0) saturate(100%) invert(22%) sepia(11%) saturate(1526%) hue-rotate(187deg) brightness(97%) contrast(88%);
}

.ohcc-img-gal-1 {
	display: flex;
    justify-content: flex-start;
    flex-direction: row;
    column-gap: var(--margin-xl);
	flex-wrap: wrap; /* Added this to allow wrapping to the next line if there are more than 3 images (desktop). */
	margin-top: var(--margin-xl);
	/* 20250520: Arno, support for vertical thumbnails. */
  	gap: var(--margin-xl);
  	align-items: flex-start;
	/* 20250520: Arno, support for vertical thumbnails. */
}

.ohcc-img-gal-1 figure {
	border: 1px solid var(--dark-grey-1);
	padding: var(--margin-xl) var(--margin-xl) var(--margin-l);
	border-radius: 10px;
	text-align: center;
	margin: 0 0 var(--margin-xl) !important; /* Changed bottom margin from 64px to 24px to allow wrapping to the next line if there are more than 3 images (desktop). */
	width: 31%; /* Changed this from 33.333% to 31% to allow wrapping to the next line if there are more than 3 images (desktop). */
	display: inline-block;
	vertical-align: top;
	/* 20250520: Arno, support for vertical thumbnails. */
	flex: 1 1 30%;
  	max-width: 384px;
  	min-width: 280px;
  	box-sizing: border-box;
	/* 20250520: Arno, support for vertical thumbnails. */
}

.ohcc-img-gal-1 figure img {
	border-radius: 8px;
	width: 100%;
	margin: 0 0 var(--margin-m);
}

.ohcc-img-gal-1 figure figcaption {
	color: var(--dark-grey-2);
	line-height: 22px;
	font-size: var(--font-s);
}

.ohcc-img-gal-1 figure > figcaption {
	max-width: 440px
}

.ohcc-img-gal-1 figcaption {
	background-color: var(--global-palette9);
	color: var(--global-palette6);
	font-size: 75%;
}

.ohcc-post-list-more, .ohcc-nav-blocks-more {
	text-align: center;
	margin: var(--margin-l) 0 var(--margin-4xl);
}

.ohcc-post-list-more a, .ohcc-nav-blocks-more a {
	margin: 0;
}

/* Filters */

.ohcc-post-list1-filter1 > div {
    gap: var(--margin-l) !important;
	margin: 0 0 var(--margin-m);
}

.ohcc-post-list1-filter1 > div > div {
    flex-grow: 1;
}

/* Footer
----------------------------------------*/

#colophon .footer-html, .footer-navigation .footer-menu-container > ul li a, .wpml-ls {
    font-size: var(--font-s) !important;
}

.wpml-ls a:hover {
	color: var(--green-1) !important;
}

.footer-widget-area {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.site-footer-row-container-inner .footer-widget-area-inner p img.ohcc-custom-logo-dark, .ohcc-weather-report-disabled div img.ohcc-custom-logo-icon-dark, .ohcc-map-detailed-disabled div img.ohcc-custom-logo-icon-dark {
	display: none;
}

.ohcc-map-detailed-disabled div img:first-child {
	display: block;
}

.ft-ro-dir-row .footer-section-inner-items-2 .footer-widget-area {
	flex: 1 !important;
    text-align: left;
}

.footer-navigation .menu {
	flex-wrap: wrap;
}
	
.footer-navigation .menu li {
	white-space: nowrap;
}

/* Dark Theme
----------------------------------------*/

.color-switch-dark header#masthead, .color-switch-dark .site-bottom-footer-wrap .site-footer-row-container-inner {
	border-color: var(--dark-blue-1);
}

.color-switch-dark a.ohcc-search {
    background: var(--dark-blue-2);
	border: 1px solid transparent;
}

.color-switch-dark a.ohcc-search:hover {
    background: none;
	border: 1px solid var(--green-1);
}

.color-switch-dark .header-navigation .header-menu-container ul ul.sub-menu, .color-switch-dark .header-navigation .header-menu-container ul ul.submenu {
    box-shadow: 0px 4px 30px 0px rgba(255,255,255,.15);
}

.color-switch-dark a.ohcc-search img, .color-switch-dark .ohcc-usp .wp-block-image img {
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(327deg) brightness(103%) contrast(102%);
}

/* Class "wpsr-reviews-623170" is for German */
/*.color-switch-dark .ohcc-commercial-disclosure, .color-switch-dark .ohcc-breadc a, .color-switch-dark .ohcc-breadc-separator, .color-switch-dark .ohcc-commercial-disclosure a:link, .color-switch-dark .ohcc-commercial-disclosure a:visited, .color-switch-dark .ohcc-postdate, .color-switch-dark .ohcc-sponsored, .color-switch-dark .kt-blocks-accordion-header .kt-blocks-accordion-title, .color-switch-dark .ohcc-post-list-labels, .color-switch-dark .facetwp-facet a, .color-switch-dark .wpsr-reviews-149908 .wpsr-review-template .wpsr-review-date, .color-switch-dark .wpsr-reviews-101927 .wpsr-review-template .wpsr-review-date, .color-switch-dark .wpsr-reviews-623170 .wpsr-review-template .wpsr-review-date, .color-switch-dark .ohcc-img-gal-1 figure figcaption, .color-switch-dark .ohcc-table-footer, .color-switch-dark .ohcc-post-list1c-footer, .color-switch-dark .ohcc-post-list2-footer, .color-switch-dark .ohcc-table-footer a, .color-switch-dark .ohcc-post-list1c-footer a, .color-switch-dark .ohcc-post-list2-footer a, .color-switch-dark .ohcc-map-detailed-disabled > div > div > div:nth-child(2), .color-switch-dark .ohcc-map-detailed-disabled > div > div > div:nth-child(2) a {*/
.color-switch-dark .ohcc-commercial-disclosure, .color-switch-dark .ohcc-breadc a, .color-switch-dark .ohcc-breadc-separator, .color-switch-dark .ohcc-commercial-disclosure a:link, .color-switch-dark .ohcc-commercial-disclosure a:visited, .color-switch-dark .ohcc-postdate, .color-switch-dark .ohcc-sponsored, .color-switch-dark .ohcc-post-list1n-filter2 .kt-blocks-accordion-header .kt-blocks-accordion-title, .color-switch-dark .ohcc-post-list-labels, .color-switch-dark .facetwp-facet a, .color-switch-dark .wpsr-reviews-149908 .wpsr-review-template .wpsr-review-date, .color-switch-dark .wpsr-reviews-101927 .wpsr-review-template .wpsr-review-date, .color-switch-dark .wpsr-reviews-623170 .wpsr-review-template .wpsr-review-date, .color-switch-dark .ohcc-img-gal-1 figure figcaption, .color-switch-dark .ohcc-table-footer, .color-switch-dark .ohcc-post-list1c-footer, .color-switch-dark .ohcc-post-list2-footer, .color-switch-dark .ohcc-table-footer a, .color-switch-dark .ohcc-post-list1c-footer a, .color-switch-dark .ohcc-post-list2-footer a, .color-switch-dark .ohcc-map-detailed-disabled > div > div > div:nth-child(2), .color-switch-dark .ohcc-map-detailed-disabled > div > div > div:nth-child(2) a {
	color: var(--grey-1);
}

.color-switch-dark .ohcc-breadc a img, .color-switch-dark .ohcc-commercial-disclosure img, .color-switch-dark .ohcc-postdate img, .color-switch-dark .ohcc-sponsored img, .color-switch-dark .ohcc-table-footer, .color-switch-dark .ohcc-post-list1c-footer {
    filter: brightness(0) saturate(100%) invert(66%) sepia(8%) saturate(962%) hue-rotate(161deg) brightness(93%) contrast(89%);
}

.color-switch-dark .ohcc-nav-block > div:last-child a:link, .color-switch-dark .ohcc-nav-block > div a:visited, .color-switch-dark .wp-block-buttons >.wp-block-button a, .color-switch-dark .ohcc-btn-secondary, .color-switch-dark .lightbox-image {
	background: var(--dark-blue-3);
}

.color-switch-dark .ohcc-testimonials-group a.wpsr-write-review, .color-switch-dark .ohcc-testimonials-group .wpsr-reviews-loadmore span {
	background: var(--dark-blue-3) !important;
}

.color-switch-dark .ohcc-testimonials-group a.wpsr-write-review:hover, .color-switch-dark .ohcc-testimonials-group .wpsr-reviews-loadmore span:hover {
	background: var(--green-1) !important;
}

.color-switch-dark .ohcc-testimonials-group {
	background: var(--dark-blue-2);
}

/* Class "wpsr-reviews-623170" is for German */
.color-switch-dark .ohcc-testimonials-group .wpsr-review-template, .color-switch-dark .wpsr-reviews-101927 .wpsr-fixed-height .wpsr-business-info, .color-switch-dark .wpsr-reviews-623170 .wpsr-fixed-height .wpsr-business-info {
    background: var(--dark-blue-3) !important;
    border-color: var(--dark-blue-1) !important;
}

/* Class "wpsr-reviews-623170" is for German */
.color-switch-dark .wpsr-review-template .wpsr-review-title, .color-switch-dark .wpsr-review-template p, .color-switch-dark .wpsr-review-template .wpsr-reviewer-name, .color-switch-dark .wpsr-reviews-101927 .wpsr-review-template .wpsr-review-content, .color-switch-dark .wpsr-reviews-101927 .wpsr-fixed-height .wpsr-business-info .wpsr-rating-and-count .wpsr-total-reviews, .color-switch-dark .wpsr-reviews-623170 .wpsr-fixed-height .wpsr-business-info .wpsr-rating-and-count .wpsr-total-reviews, .color-switch-dark .wpsr-reviews-101927 .wpsr-fixed-height .wpsr-business-info .wpsr-rating-and-count .wpsr-total-rating, .color-switch-dark .wpsr-reviews-623170 .wpsr-fixed-height .wpsr-business-info .wpsr-rating-and-count .wpsr-total-rating, .color-switch-dark .wpsr-reviews-101927 .wpsr-fixed-height .wpsr-business-info .wpsr-rating-and-count span {
    color: var(--global-palette3) !important;
}

.color-switch-dark .wpsr-swiper-carousel-wrapper .wpsr-swiper-next, .color-switch-dark .wpsr-swiper-carousel-wrapper .wpsr-swiper-prev {
    background-color: var(--dark-blue-3);
    color: var(--global-palette3);
    -webkit-box-shadow: 0 0 16px 0 rgba(255,255,255,.2);
    box-shadow: 0 0 16px 0 rgba(255,255,255,.2);
}

.color-switch-dark .wpsr-swiper-carousel-wrapper .wpsr-swiper-next:focus, .color-switch-dark .wpsr-swiper-carousel-wrapper .wpsr-swiper-next:hover, .color-switch-dark .wpsr-swiper-carousel-wrapper .wpsr-swiper-prev:focus, .color-switch-dark .wpsr-swiper-carousel-wrapper .wpsr-swiper-prev:hover {
	background-color: var(--dark-blue-3);
}

/*.color-switch-dark .kb-table-of-content-nav .kb-table-of-content-wrap, .color-switch-dark .ohcc-post-list1n .fwpl-result, .color-switch-dark .ohcc-post-list1c .ohcc-post-list1c-item, .color-switch-dark .ohcc-post-list2-item, .color-switch-dark .ohcc-nav-block, .color-switch-dark .ohcc-post-list1n-filter1 select, .color-switch-dark .ohcc-post-list1c-filter1 select, .color-switch-dark .facetwp-facet select, .color-switch-dark .facetwp-facet.facetwp-type-slider.not-empty, .color-switch-dark .ohcc-post-list1n-filter2 .kt-accordion-wrap, .color-switch-dark .facetwp-pager a, .color-switch-dark .ohcc-img-gal-1 figure, .color-switch-dark .ohcc-tip, .color-switch-dark .ohcc-downloads > div {
border-color: var(--dark-blue-1);
}*/
.color-switch-dark .kb-table-of-content-nav .kb-table-of-content-wrap, .color-switch-dark .ohcc-post-list1n-item, .color-switch-dark .ohcc-post-list1c-item, .color-switch-dark .ohcc-post-list2-item, .color-switch-dark .ohcc-nav-block, .color-switch-dark .ohcc-post-list1n-filter1 select, .color-switch-dark .ohcc-post-list1c-filter1 select, .color-switch-dark .facetwp-facet select, .color-switch-dark .facetwp-facet.facetwp-type-slider.not-empty, .color-switch-dark .ohcc-post-list1n-filter2 .kt-accordion-wrap, .color-switch-dark .facetwp-pager a, .color-switch-dark .ohcc-img-gal-1 figure, .color-switch-dark .ohcc-tip, .color-switch-dark .ohcc-downloads > div {
	border: 1px solid rgba(255, 255, 255, .4);
}

.color-switch-dark .kt-blocks-accordion-icon-trigger:before, .color-switch-dark .kt-blocks-accordion-icon-trigger:after {
	background: var(--dark-grey-1) !important;
}

.color-switch-dark .facetwp-pager a:hover {
	border-color: var(--dark-blue-5);
}

.color-switch-dark .kt-accordion-id_243c35-c6 .wp-block-kadence-pane .kt-accordion-header-wrap .kt-blocks-accordion-header, .color-switch-dark .kt-accordion-id_243c35-c6 .kt-accordion-panel-inner {
	background: none;
}

.color-switch-dark .facetwp-slider-wrap .noUi-connect {
	background: var(--dark-blue-1);
}

.color-switch-dark .facetwp-slider-wrap .noUi-handle {
	color: var(--grey-1);
}

.color-switch-dark .facetwp-slider-wrap .noUi-target {
    border-color: var(--dark-blue-1);
}

.color-switch-dark .ohcc-post-list-labels span::before {
	color: var(--dark-blue-1);
}

.color-switch-dark .ohcc-usp .inner-column-1 {
	border-color: var(--global-palette1);
}

.color-switch-dark .facetwp-pager a.active {
	background: var(--dark-blue-5);
	border-color: var(--dark-blue-5);
	color: var(--global-palette3);
}

.color-switch-dark .ohcc-about-us {
    background: var(--dark-blue-6);
}

.color-switch-dark .ohcc-must-know h2 {
    background: url(/wp-content/uploads/msa-icon-dark.svg) no-repeat 0px 76px;
    background-size: 84px;
}

.color-switch-dark .ohcc-tip {
    background: url(/wp-content/uploads/msa-icon-dark.svg) no-repeat 24px center;
    background-size: 90px;
}

.color-switch-dark .ohcc-author-summary {
	background-color: var(--global-palette8);
}

.color-switch-dark #kt-scroll-up-reader, .color-switch-dark #kt-scroll-up {
    color: var(--global-palette3);
    background: var(--dark-blue-1) !important;
}

.color-switch-dark #kt-scroll-up-reader:hover, .color-switch-dark #kt-scroll-up:hover {
    color: var(--dark-blue-1);
    background: var(--global-palette3) !important;
}

.color-switch-dark .content-area .semantic_ui .ui.table, .color-switch-dark .ohcc-table2 table {
    border-color: var(--dark-blue-1);
	color: var(--global-palette3);
}

.color-switch-dark .semantic_ui .ui.table {
	background: none;
}

.color-switch-dark .content-area .semantic_ui .ui.table thead tr th, .color-switch-dark .ohcc-table2 thead tr th, .color-switch-dark .content-area .semantic_ui .ui.striped.table tbody tr:nth-child(2n) td, .color-switch-dark .ohcc-table2 tbody tr:nth-child(odd) {
    background: var(--dark-blue-6);
	color: var(---global-palette3);
}

.color-switch-dark .content-area .semantic_ui .ui.striped.table tbody tr:hover td, .color-switch-dark .ohcc-table2 tr:hover:not(:first-child) {
	background: var(--light-blue-2) !important;
	color: var(--global-palette3);
}

.color-switch-dark .ohcc-icon-grid>div img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(8%) saturate(962%) hue-rotate(161deg) brightness(93%) contrast(89%);
}

.color-switch-dark .site-footer-row-container-inner .footer-widget-area-inner p img:first-child {
	display: none;
}

.color-switch-dark .ohcc-weather-report-disabled div img:first-child, .color-switch-dark .ohcc-map-detailed-disabled div img:first-child {
	display: none;
}

.color-switch-dark .site-footer-row-container-inner .footer-widget-area-inner p img.ohcc-custom-logo-dark, .color-switch-dark .ohcc-map-detailed-disabled div img.ohcc-custom-logo-icon-dark {
	display: block;
}

.color-switch-dark .ohcc-weather-report-disabled div img.ohcc-custom-logo-icon-dark {
	display: block;
	padding: 32px 0 24px;
}

.color-switch-dark .ohcc-weather-report-credit, .color-switch-dark .ohcc-weather-report-credit a {
	color: var(--global-palette3) !important;
}

.color-switch-dark .ohcc-post-list1n-filter1 select option, .color-switch-dark .ohcc-post-list1c-filter1 select option, .color-switch-dark .facetwp-facet select option {
	color: var(--global-palette3) !important;
}

.color-switch-dark .mobile-toggle-open-container .menu-toggle-open {
	color: var(--global-palette3) !important;
}

.color-switch-dark #mobile-drawer .drawer-inner, .color-switch-dark #mobile-drawer.popup-drawer-layout-fullwidth.popup-drawer-animation-slice .pop-portion-bg, .color-switch-dark #mobile-drawer.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.pop-animated.show-drawer .drawer-inner, .color-switch-dark .mobile-navigation ul li > a, .color-switch-dark .mobile-navigation ul li.menu-item-has-children > .color-switch-dark .drawer-nav-drop-wrap {
	background: var(--dark-blue-3);
}

.color-switch-dark .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, .color-switch-dark .mobile-navigation ul li:not(.menu-item-has-children) a, .color-switch-dark .mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button {
    border-color: var(--dark-blue-1);
    color: var(--global-palette3);
}

.color-switch-dark .mobile-navigation ul li>a:hover, .color-switch-dark .mobile-navigation ul li.menu-item-has-children>.drawer-nav-drop-wrap:hover {
    background: var(--global-palette8);
}

.color-switch-dark ol.rank-math-list li h3:before {
    background-color: var(--global-palette7);
}

/* 20241017, Arno: remove this. *
/* In dark mode, no fading content before the show/hide link. */
/*.color-switch-dark .ohcc-toggle-content-container::after {
  background: none;
}*/

/* --- Listings --- */
/*.color-switch-dark .ohcc-post-list1n-item, .color-switch-dark .ohcc-post-list1c-item, .color-switch-dark .ohcc-post-list2-item {
	border: 1px solid rgba(255, 255, 255, .4);
}*/

.ohcc-post-list1n-item .fwp_img_post:hover, .ohcc-post-list1c-item .fwp_img_post:hover, .ohcc-map-marker-container:hover .wp-post-image {
	opacity: var(--hover-opacity);
	background-color: var(--global-palette9);
	cursor: pointer
}

.ohcc-post-list1c-footer, .ohcc-post-list2-footer {
	font-size: 75%;
}

.ohcc-post-list-loading {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--global-palette9);
	opacity: var(--hover-opacity);
}

/* --- FacetWP listings --- */
/* Don't show slider reset button. */
.facetwp-slider-reset {
	display: none !important
}

/* 1-column listings below 768px. */
@media (max-width: 768px) {
    .fwpl-layout, .fwpl-row {
        display: block !important;
    }
}

/* Testimonials */
.ohcc-testimonials-group {
	background-color: var(--global-palette8);
	padding: 24px;
	border-radius: 10px;
}

/* --- Paragraphs with no class --- */
/* Arno, 20240831: added "ol:not([class])". */
p:not([class])
{max-width: 1200px}
ul:not([class]), ol:not([class])
{max-width: 1181px}

/* --- Table of contents --- */

/* 20241018, Arno: show by default, instead of hide by default. */
/*.ohcc-toc {
	display: none;
}*/

/* Fix Kadence theme issue: shadow on buttons should not be applied to dot navigation icon. */
.kt-blocks-carousel .slick-dots li button {
	box-shadow: none
}

/* Video player */
.ohcc-video-player {
	margin: 20px 0;
}

.ohcc-video-player iframe {
	border: none;
	border-radius: 6px;
	width: 560px;
	max-width: 100%;
	aspect-ratio: 16/9;
}

/* Custom ads */
.ohcc-ads-container1 {
	content-visibility: auto; /* Browser should not render until in viewport */
	max-width: 1195px;
	margin: var(--margin-2xl) 0;
	text-align: left;
}

.ohcc-ads-container2 {
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
}

.ohcc-ads-ad-box {
	max-width: 384px;
	flex: 1;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	margin-right: 10px;
	margin-bottom: 10px;
	text-decoration: none;
	line-height: 32px;
	rotate: -1.5deg; /* 20240704 */
	/* 20240804, Arno: animation on custom ads on the hover effect (so, desktop only). Define the initial state and transition properties. */
	/* padding: 5px 5px 0 5px; 20240704 */
	padding: 10px 5px 0 10px;
	/* 20240913, Arno: animation for desktop, we have set a different animation below 600px. */	
	/*animation: ohcc-ads-ad-box-ani 18s ease-in-out infinite;*/
	animation: ohcc-ads-ad-box-ani 10s ease-in-out infinite;
}
@keyframes ohcc-ads-ad-box-ani {
	/* Pulsate twice fast (within 2s) and keep it at normal size for the rest of the time (8s). */
	/*0%, 8.33%, 16.66%, 100% {transform: scale(1);}
    4.16%, 12.16% {transform: scale(1.02);}*/
	0%, 10%, 20%, 100% {transform: scale(1);}
    5%, 15% {transform: scale(1.02);}
}

.ohcc-ads-ad-box img {
	width: 100%;
	border-radius: 6px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ohcc-ads-ad-title {
	font-weight: bold;
	margin-top: 10px;
	text-decoration: underline;
	color: var(--global-palette-highlight);
}

.ohcc-ads-ad-title:hover {
	color: var(--global-palette-highlight-alt);
}

.ohcc-ads-ad-review-container {
	display: flex;
	align-items: center;
	margin-top: 10px;
	font-size: var(--font-s);
	color: var(--global-palette3);
}

.ohcc-ads-ad-star {
	width: 20px;
	height: 20px;
	fill: #FFD700;
	margin-right: 2px;
	top: 3px;
    position: relative;
}

.ohcc-ads-ad-review-container-txt {
	font-size: var(--font-s);
	color: var(--global-palette3);
}

.ohcc-ads-footer-link {
	display: block;
	font-size: var(--font-s);
	color: var(--dark-grey-2);
}

.ohcc-ads-footer-link:hover, .ohcc-ads-footer-link:active, .ohcc-ads-footer-link:visited {
	color: var(--dark-grey-2);
}

/* Show/hide long content
----------------------------------------*/
/* Hide the helper checkbox. */
.ohcc-toggle-content {
    display: none;
}

/* 20241017, Arno: text label for Show/Hide content is now styled as a smaller button. */
/* Style the show/hide label as a clickable link. */
/*.ohcc-toggle-content-show, .ohcc-toggle-content-hide {
    display: block;
    margin-top: 20px;
    text-align: left;
    color: var(--global-palette-highlight);
    cursor: pointer;
	text-decoration: underline;
	font-weight: bold;
	width: max-content;
}
.ohcc-toggle-content-show:hover, .ohcc-toggle-content-hide:hover {
	color: var(--global-palette-highlight-alt);
}*/
/*.ohcc-toggle-content-show::first-letter, .ohcc-toggle-content-hide::first-letter {
	font-size: 80%;	Make the arrow a bit smaller
}*/

/* Initially hide the 'Show less' label, */
.ohcc-toggle-content-hide {
    display: none;
}

/* Set the initial height of the visible content, and overflow properties. */
.ohcc-toggle-content-container {
    overflow: hidden;
    position: relative;
}
.ohcc-toggle-content-container-size1 {
	max-height: 270px;
}
.ohcc-toggle-content-container-size2 {
	max-height: 470px;
}
.ohcc-toggle-content-container-size3 {
	max-height: 570px;
}

/* Create the fade-out effect. */
.ohcc-toggle-content-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 125px;
    background: linear-gradient(to bottom, transparent, var(--global-palette9));
	/* 20241025, Arno: this element should not receive events, so that clicks on the underlaying content still work. */
	pointer-events: none;
}

/* Remove the fade-out effect if the class 'ohcc-toggle-content-expanded' is applied by javascript. */
.ohcc-toggle-content-container.ohcc-toggle-content-expanded::after {
  content: none;
}

/* Media Queries
----------------------------------------*/
@media (max-width: 1440px) {
	.ohcc-post-list1n-item .fwp_img_logo, .ohcc-post-list1c-item .fwp_img_logo {
		height: 50px;
		top: 60px;
		margin-top: -50px;
	}
}

@media only screen and (max-width: 1200px) {
	h1 {
		font-size: 48px !important;
		line-height: 68px !important;
	}
	
	h2, .ohcc-h2 {
    	font-size: 32px !important;
    	line-height: 46px !important;
		margin: 0 0 var(--margin-l) !important;
	}
	
	.ohcc-hero .wp-block-kadence-advancedheading {
		font-size: var(--font-l);
		line-height: 34px;
	}
	
	.ohcc-usp > .kt-inside-inner-col {
    	flex-direction: column !important;
		gap: 0 !important;
		margin: 0 0 var(--margin-xl);
	}
	
	.ohcc-usp .inner-column-1 {
    	margin: var(--margin-m) 0 !important;
	}
	
	.header-navigation .menu {
    	flex-wrap: nowrap;
	}
	
	.main-navigation .primary-menu-container > ul > li.menu-item > a {
    	font-size: 14px;
	}
	
	.ohcc-post-list1n-filter1 > div > div, .ohcc-post-list1n-filter2 .kt-inside-inner-col .facetwp-facet {
		width: 40%;
	}
	
	.ohcc-map-listing-disabled > div, .ohcc-map-detailed-disabled > div {
    	width: 550px;
    	flex-direction: column;
		align-items: flex-start;
	}
	
	.ohcc-map-detailed-disabled >div > a {
    	margin: var(--margin-l) 0 0;
	}
	
	.ohcc-map-detailed-disabled > div img {
    	top: 50%;
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	transform: translateY(-50%);
	}
}

@media only screen and (max-width: 1300px) and (min-width: 1024px) {
	/* Hide username at 1024px to 1300px to avoid header overflow that cuts off dropdown menu and username */
	.header-account-username {
		display: none;
	}
}

@media only screen and (max-width: 1024px) {
	.site-container {
    	padding: 0px 16px !important;
	}
	
	.site-mobile-header-wrap a.ohcc-search {
		position: absolute;
		right: 72px;
		top: 12px;
		margin: 0;
	}
	
	.ohcc-commercial-disclosure, .ohcc-breadc {
    	margin: var(--margin-l);
	}
	
	.ohcc-maintenance {
    	margin: 0 var(--margin-l) var(--margin-xl);
	}
	
	.ohcc-hero .kt-row-column-wrap {
    	padding: 20px var(--margin-l) !important;
	}
	
	.ohcc-hero .kt-row-column-wrap > div {
		margin: 0;
	}
	
	.ohcc-hero .kt-row-column-wrap {
    	gap: 0 !important;
	}
  
	.ohcc-hero .kt-row-column-wrap>div:last-child .kt-inside-inner-col {
    	width: 100%;
	}
	
	.mobile-toggle-open-container .menu-toggle-open {
    	color: var(--global-palette3) !important;
		padding: 0 !important;
	}
	
	.mobile-toggle-open-container .menu-toggle-open:hover, .mobile-toggle-open-container .menu-toggle-open:focus {
    	color: var(--green-1) !important;
	}
	
	.mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, .mobile-navigation ul li:not(.menu-item-has-children) a {
    	border-bottom: 1px solid var(--dark-grey-1);
	}
	
	.mobile-navigation ul li > a:hover, .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap:hover {
    	background: var(--light-grey-3);
    	color: var(--green-1);
	}
	
	.mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button {
    	border-left: 1px solid var(--dark-grey-1);
		font-size: var(--font-m);
	}
	
	.mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
		color: var(--green-1);
	}
	
	.ohcc-nav-blocks {
		/* 20240714, Arno: changed margin
		margin: 0;*/
		margin: var(--margin-xl) 0 0;
	}
	
	.ohcc-nav-block {
    	flex: 0 0 48%;
    	margin: 0 4% var(--margin-2xl) 0;
	}
	
	.ohcc-nav-blocks > div:nth-child(2n) {
		margin-right: 0 !important;
	}
	
	.ohcc-nav-blocks > div:nth-child(3n) {
		margin-right: 4%;
	}
	
	.site-footer-row-container-inner .site-footer-row.site-footer-row-tablet-column-layout-default > div {
    	margin: 0 0 var(--margin-l);
	}

    /* 20250722, Arno: correction of download block margins.
	.ohcc-downloads {
		column-gap: unset;
	} */
	
	.ohcc-downloads > div {
		width: 48%;
		/* 20250722, Arno: correction of download block margins.
		margin: 0 4% 0 0; */
        margin: var(--margin-xl) 4% 0 0;
	}

    /* 20250722, Arno: correction of download block margins.
	.ohcc-downloads > div:nth-child(even) {
		margin: 0;
	} */
	
	.ft-ro-dir-row .footer-section-inner-items-2 .footer-widget-area {
    	text-align: right;
	}
	
	.ohcc-img-gal-1 figure {
    	margin: 0 0 var(--margin-xl);
	}
	
	.ohcc-img-gal-1 figure > figcaption {
    	max-width: unset;
	}
	
	.ohcc-lightbox-col-5 {
    	width: 10%;
	}
	
	.ohcc-lightbox-row div:first-child {
    	text-align: left !important;
	}
	
	.ohcc-lightbox-row div:last-child {
    	text-align: right !important;
	}
	
	.ohcc-lightbox-col-5 a img {
    	width: 12px!important;
	}
	
	.ohcc-lightbox-col-5 a {
    	width: 60px;
    	height: 60px;
	}
	
	.ohcc-lightbox-col-90 {
    	width: 80%;
	}
	
	.lightbox-image figcaption {
    	font-size: var(--font-s) !important;
	}
	
	.lightbox-image img {
    	margin: 0 auto 20px auto !important;
		max-height: 65vh !important;
		width: auto;
	}
	
	.lightbox-image {
    	padding: 20px;
	}
	
	/* The last column of ohcc-table1 abd ohcc-table2 is considered the one that contains the longest text. To prevent that causing very high rows on mobile (hard to read), we'll set a minimum width. */
	.ohcc-table1 td:last-child, .ohcc-table2 td:last-child {
		min-width: 500px;
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-word;
	}
	
	/* Language switch */
	.wpml-ls {
		text-align: center;
	}
}

@media only screen and (max-width: 768px) {
	.ohcc-about-us > .kt-inside-inner-col {
		gap: 24px !important;
		flex-direction: column !important;
	}
	
	.ohcc-about-us > .kt-inside-inner-col > .wp-block-kadence-column {
    	border-bottom: 1px solid var(--global-palette6);
    	width: 100%;
    	padding: 0 0 24px;
	}
	
	.ohcc-about-us > .kt-inside-inner-col > .wp-block-kadence-column:last-child {
    	border: none;
    	padding: 0;
	}
	
	.facetwp-template {
    	margin: var(--margin-2xl) 0 0;
	}
	
	.ohcc-post-list1n-item > div > div:nth-child(2) > div:first-child, .ohcc-post-list1c-item > div > div:nth-child(2) > div:first-child, .ohcc-post-list2-item > div:nth-child(2) > div:first-child {
		margin: 0 0 var(--margin-m) 0;
	}

	.fwp_button a button, .ohcc-post-list2-item button, button.facetwp-load-more {
		width: 100%;
	}
	
	.ohcc-nav-block > div:last-child a:link, .ohcc-nav-block > div a:visited, .wp-block-buttons >.wp-block-button a, .ohcc-btn-secondary {
		display: block;
	}
	
	.facetwp-pager a {
		padding: 8px 18px;
		font-size: 18px;
	}

	.ohcc-post-list1n-item .fwp_post_title, .ohcc-post-list1c-item .fwp_post_title, .ohcc-post-list2-item > div:first-child {
		text-align: center;
	}
	
	.ohcc-post-list1n-item .fwp_img, .ohcc-post-list1c-item .fwp_img, .ohcc-post-list2-item > div:nth-child(2) > div:first-child {
		text-align: center;
	}
	
	.ohcc-post-list2-item > div:nth-child(2) {
		display: unset;
		grid-template-columns: unset;
	}
	
	.ohcc-post-list1n-item .fwp_img_logo, .ohcc-post-list1c-item .fwp_img_logo {
		height: 75px;
		top: 85px;
		margin-top: -75px;
	}

    /* .ohcc-map-listing-disabled > img, .ohcc-map-detailed-disabled > img {
    20250716, Arno: added ohcc-weather-report-disabled */
    .ohcc-map-listing-disabled > img, .ohcc-map-detailed-disabled > img, .ohcc-weather-report-disabled > img {
    	/* 20250716, Arno: removed.
        max-width: unset; */
    	width: auto;
	}
	
	.ohcc-img-gal-1 {
    	column-gap: 12px;
	}
	
	.ohcc-img-gal-1 figure {
    	padding: 16px;
	}

	/* 20250120: Arno. Make the icon smaller on narrow screens, so more space for the text. */
	/* Tip notification */
	.ohcc-tip {
		background: url(/wp-content/uploads/msa-icon.svg) no-repeat 0 center;
		padding: 20px 20px 20px 64px;
		background-size: 52px;
	}
	
	.color-switch-dark .ohcc-tip {
		background: url(/wp-content/uploads/msa-icon-dark.svg) no-repeat 6px center;
		padding: 20px 20px 20px 57px;
		background-size: 45px;
	}
}

@media only screen and (max-width: 600px) {
	h1 {
    	font-size: 40px !important;
    	line-height: 48px !important;
    	word-break: break-word !important;
	}

	h2, .ohcc-h2, h3 {
		word-break: break-word !important;
	}
	
	.ohcc-nav-block {
    	flex: 0 0 100%;
    	margin: 0 0 var(--margin-xl);
	}
	
	.ohcc-author-summary {
		flex-direction: column;
		margin: var(--margin-3xl) auto;
		padding: var(--margin-xl);
		border-radius: 42px;
	}
	
	.ohcc-downloads > div {
    	width: 100%;
    	margin: 0 0 var(--margin-xl);
    	max-width: unset;
	}
	
	.facetwp-pager a.next, .facetwp-pager a.prev {
    	padding: 18px;
		background-position: center;
	}
	
	.facetwp-pager a span {
		display: none;
	}
	
	.facetwp-pager a {
		padding: 2px 14px;
    	font-size: var(--font-s);
	}
	
	.ohcc-post-list1n-filter1 > div > div, .ohcc-post-list1n-filter2 .kt-inside-inner-col .facetwp-facet {
		width: 100%;
	}
	
	/* 20241005, Arno: smaller icon grid. */
	.ohcc-icon-grid {
		/* List the icons vertically. */
		flex-direction: column;
	}
	
	.ohcc-icon-grid div {
		/* 20241005, Arno: smaller icon grid.
		width: 45%; Display 2 icons per row instead of 1.*/
		width: initial;
	}
	
	.ohcc-map-listing-disabled > div, .ohcc-map-detailed-disabled > div {
		width: 94%;
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		text-align: center;
		display: block;
	}
	
	.ohcc-map-detailed-disabled div img {
    	display: block;
    	position: unset;
    	transform: unset;
    	margin: auto;
	}
	
	.color-switch-dark .ohcc-map-detailed-disabled div img.ohcc-custom-logo-icon-dark {
    	margin: 10px auto var(--margin-xl);
	}
	
	.ohcc-weather-report-disabled>div {
		padding: 0 var(--margin-l) var(--margin-l);
		/* 20250716, Arno: changed from 75% to 94% */
        width: 94%;
	}
	
	.ohcc-img-gal-1 {
		flex-direction: column;
	}
	
	.ohcc-img-gal-1 figure {
    	width: 100%;
		/* 20250520: Arno, support for vertical thumbnails. */
    	max-width: 100%;
		/* 20250520: Arno, support for vertical thumbnails. */
	}
	
	.gsc-result-info-container {
    	display: none;
	}
	
	.ohcc-lightbox-col-5 a {
    	width: 40px;
    	height: 40px;
	}
	
	.ohcc-lightbox-col-5 a img {
    	width: 8px !important;
	}
	
	.lightbox-image {
    	padding: var(--margin-m);
	}
	
	.lightbox-image img {
    	margin: 0 0 var(--margin-m) !important;
	}
	
	.ohcc-lightbox-row #ohcc-btn-close {
    	width: 32px;
	}
	
	/* Custom ads */
	.ohcc-ads-container2 {
		flex-direction: column;
		align-items: center;
	}

	.ohcc-ads-ad-box {
		/* 20240824, Arno: removed width to be more prominent on mobile.
		width: 60%; */
		/* 20240905, Arno: added minimum width on mobile because some image files are too small and need to be enlarged to prevent differences between optical image sizes. */
		min-width: 85%;
		margin-right: 0;
		/* 20240913, Arno: set a continuous animation for mobile because the ads are in the viewport for a short time. */
		animation: ohcc-ads-ad-box-ani-600px 2s infinite ease-in-out;
	}
	@keyframes ohcc-ads-ad-box-ani-600px {
		0%, 100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.02);
		}
	}

	.ohcc-ads-ad-review-container {
		margin-top: 5px;
	}

	.ohcc-ads-footer-link {
		margin-top: 10px;
		text-align: center;
	}

	/* Do not display the last (3rd) ad. */
	.ohcc-ads-ad-box:nth-child(3) {
		display: none;
	}
	
	.ohcc-toggle-content-container-size1 {
		max-height: 500px;
	}
	.ohcc-toggle-content-container-size2 {
		max-height: 600px;
	}
	.ohcc-toggle-content-container-size3 {
		max-height: 700px;
	}
}

@media only screen and (max-width: 480px) {
	/* Hide image on narrow screens so that the text still fits in the marker container. */
	.ohcc-map-marker-container .wp-post-image {
		display: none;
	}
}

@media only screen and (max-width: 360px) {
	/* Fix USP icon issue for small resolutions */
	.ohcc-usp .inner-column-1 > .kt-inside-inner-col {
    	flex-direction: column;
    	align-items: center;
	}
	
	.ohcc-usp .inner-column-1 > .kt-inside-inner-col p {
		text-align: center;
	}
	
	/* Tip notification */
	/* 20240120: Arno. Removed because it's now small under 768px wcreen width. */
	/*.ohcc-tip {
		padding: 20px 20px 20px 90px;
		background-size: 54px;
	}*/
}

@media only screen and (max-width: 280px) {
	/* 20240820: Arno. Moved this from "screen max-width 600px" to "screen max-width 280px". */
	.ohcc-post-list-labels {
    	margin: 6px 0 var(--margin-s);
    	flex-direction: column;
    	line-height: 30px;
		display: flex; /* Arno, 20240705: removed this for mid size screens above 600px, but we still need it below 600px.*/
	}
	
	/* 20240820: Arno. Moved this from "screen max-width 600px" to "screen max-width 280px". */
	.ohcc-post-list-labels > span:before {
    	display: none;
	}
}

.bbp-pagination .bbp-pagination-count {
   margin-bottom: 1rem;
   margin-right: 12px;
 }
.bbp-user-page.single .bbp-attachments {
	display: none;
}