/*
#	-------------------------------------------------------	
#
#	Table-of-Contents
#
#	-------------------------------------------------------	
#
#	1. Variables
#	2. SSI-Fonts (deprecated)
#	3. Basic: Reset defaults
#	4. Grid
#	5. Header / Footer
#	5.1 Navigation
#	5.2 Header elements (language, locator, etc.)
#	5.3 Footer
#	5.4 Search
#	6. Sub-Navigation and fullscreen modal definitions
#	7. Buttons
#
#	8. Element definitions – Utility first CSS approach
#	8.1 General
#	8.2 Statistics
#	8.3 Card-Shelf
#	8.4 Card-Grid
#
#	9. Widgets
#	9.1 LanguageSwitch

#	99. Other overrides – needed for 3rd party plugings
#
#	-------------------------------------------------------	
*/

/*
# 	1. Variables 
#	-------------------------------------------------------	
*/

:root {
    --app-height: 100vh;

    --color-ssi-red: #e32119;
    --color-accent-light: #54b9ca;
    --color-accent-middle: #44808a;
    --color-accent-dark: #005161;

    --color-white: white;
    --color-text: #262626;

    --color-text-lighter: #666;
    --color-text-lighter-hover: #262626;
    --color-lightgray: #dfdfdf;
    --color-bright: #f0f0f0;

    --color-background-midgray: #cbcbcb;

    --color-transparent-border: #cccccc66;

    --default-background: #fff;
    --default-contrast-background: #fafafa;
    --default-foreground: #262626;
    --default-contrast-foreground: #262626;
    --default-separator-color: #d9d9d9;

    --page-max-width: 1440px;
    --page-max-width-condensed: 1440px;
    /* --page-max-width:1200px;
	--page-max-width-condensed:1200px; */

    --col-width: 8.33%;
    /* --col-width: calc(var(--page-max-width) / 12); */

    --navigation-height: 100px;
    --sub-nav-height: 50px;

    --column-gap: 30px;
    --side-safe-area: 20px;
    --sparator-gap: 20px;
    --default-content-padding: 15px;
    --default-padding: 40px;
    --default-double-padding: calc(var(--default-padding) * 2);
    --default-row-margin: 40px;

    --border-radius: 5px;
    --border-radius-min: 3px;
    --font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji';
}

/* @media(prefers-color-scheme: dark) {
    
   body {

        --default-background:#222;
        --default-contrast-background:#333;
        --default-foreground:#eee;
        --default-contrast-foreground:#eee;
		--default-separator-color:#555;
    }

} */

/*
# 	3. Reset defaults 
#	-------------------------------------------------------	
*/

* {
    box-sizing: border-box;
}

html,
body {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 22px;
    color: var(--default-foreground);
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

body:not(:has(.unified-navigation)) {
    --navigation-bar-height: 0px;
    --navigation-height: 0px;
}

article,
section,
nav {
    margin: 0;
}

section {
    background-color: var(--default-background);
    padding-top: calc(var(--default-padding) * 1);
    padding-bottom: calc(var(--default-padding) * 1);
    /* display:grid; */
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 600;
    line-height: 1.2;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    color: var(--default-foreground);
    text-wrap: balance;
}

h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty {
    display: none;
}

h1 {
    font-size: 2rem;
    line-height: 1.1;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.2;
}

h3 {
    font-size: 1.4rem;
}

p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--default-foreground);
    text-wrap: pretty;
}

hr {
    margin: 30px 0px;
    border-color: #e32119;
    max-width: 60%;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

img {
    display: block;
    width: 100%;
}

.reset_translation_session {
    img {
        display: inline-block;
        width: auto;
    }
}

ul,
li {
    margin: 0;
}

li {
    list-style: none;
}

button {
    color: inherit;
}

.divessi-generic-link {
    display: inline-block;
    margin-right: 10px;
    padding: 0.35rem 1rem;
}
.divessi-generic-link:has(img) {
    padding: 0;
}

* > .divessi-generic-link:last-child {
    margin-right: 0;
}

.divessi-generic-link > a {
    display: inline-block;
    padding: 0.3em 1em;
}

.divessi-generic-link img {
    max-width: 150px;
}

.divessi-link-red {
    display: block;
    text-align: center;
    background-color: var(--color-ssi-red);
    border: 1px solid var(--color-ssi-red);
    color: white;
    border-radius: 5px;
    margin-right: 0;
}

.divessi-link-transparent {
    display: block;
    text-align: center;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    border-radius: 5px;
    margin-right: 0;
}

.divessi-link-black {
    display: block;
    text-align: center;
    background-color: var(--color-text);
    border: 1px solid var(--color-text);
    color: var(--color-lightgray);
    border-radius: 5px;
    margin-right: 0;
}

.divessi-link-black:hover {
    background-color: var(--color-ssi-red);
    border: 1px solid var(--color-ssi-red);
    color: #fff;
}

.preview-only {
    background-color: var(--color-ssi-red);
    font-size: 0.8rem;
    color: white;
    text-align: center;
    padding: 0.3em 0 0.1em 0;
}

/*
# 	4. Grid 
#	-------------------------------------------------------	
*/

/* .divessi-display-tiny {

} */

.flex-break {
    flex-basis: 100% !important;
    height: 0 !important;
}

.row {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--column-gap);
    /* margin-top:var(--default-row-margin);
	margin-bottom:var(--default-row-margin); */
    /* padding-left:var(--side-safe-area);
	padding-right:var(--side-safe-area); */
    padding: var(--side-safe-area);
    position: relative;
    max-width: var(--page-max-width);
    width: auto;
}

.row-bottom-border-separator {
    margin-bottom: var(--side-safe-area);
    padding-bottom: calc(2 * var(--side-safe-area));
    border-bottom: 1px solid #999;
}

.col {
    min-height: 1px;
    max-width: 100%;
}

.constrain-mode-0 {
    max-width: 100%;
}

.constrain-mode-1 {
    max-width: var(--page-max-width);
}

.row.constrain-mode-1 {
    max-width: calc(var(--page-max-width) - calc(2 * var(--side-safe-area)));
}

/*? Remove end 1 – or set end-1 to 2 and delete end-13 (everything +1) */
.desktop-col-end-13 {
    grid-column-end: 13;
}

.desktop-col-end-12 {
    grid-column-end: 12;
}

.desktop-col-end-11 {
    grid-column-end: 11;
}

.desktop-col-end-10 {
    grid-column-end: 10;
}

.desktop-col-end-9 {
    grid-column-end: 9;
}

.desktop-col-end-8 {
    grid-column-end: 8;
}

.desktop-col-end-7 {
    grid-column-end: 7;
}

.desktop-col-end-6 {
    grid-column-end: 6;
}

.desktop-col-end-5 {
    grid-column-end: 5;
}

.desktop-col-end-4 {
    grid-column-end: 4;
}

.desktop-col-end-3 {
    grid-column-end: 3;
}

.desktop-col-end-2 {
    grid-column-end: 2;
}

.desktop-col-end-1 {
    grid-column-end: 1;
}

.desktop-col-start-12 {
    grid-column-start: 12;
}

.desktop-col-start-11 {
    grid-column-start: 11;
}

.desktop-col-start-10 {
    grid-column-start: 10;
}

.desktop-col-start-9 {
    grid-column-start: 9;
}

.desktop-col-start-8 {
    grid-column-start: 8;
}

.desktop-col-start-7 {
    grid-column-start: 7;
}

.desktop-col-start-6 {
    grid-column-start: 6;
}

.desktop-col-start-5 {
    grid-column-start: 5;
}

.desktop-col-start-4 {
    grid-column-start: 4;
}

.desktop-col-start-3 {
    grid-column-start: 3;
}

.desktop-col-start-2 {
    grid-column-start: 2;
}

.desktop-col-start-1 {
    grid-column-start: 1;
}

.desktop-off {
    display: none !important;
}

/* @media (max-width: 768px) {
	.mobile-col-end-13 {
		grid-column-end: 13 !important;
	}
	.mobile-col-end-12 {
		grid-column-end: 12 !important;
	}
	.mobile-col-end-11 {
		grid-column-end: 11 !important;
	}
	.mobile-col-end-10 {
		grid-column-end: 10 !important;
	}
	.mobile-col-end-9 {
		grid-column-end: 9 !important;
	}
	.mobile-col-end-8 {
		grid-column-end: 8 !important;
	}
	.mobile-col-end-7 {
		grid-column-end: 7 !important;
	}
	.mobile-col-end-6 {
		grid-column-end: 6 !important;
	}
	.mobile-col-end-5 {
		grid-column-end: 5 !important;
	}
	.mobile-col-end-4 {
		grid-column-end: 4 !important;
	}
	.mobile-col-end-3 {
		grid-column-end: 3 !important;
	}
	.mobile-col-end-2 {
		grid-column-end: 2 !important;
	}
	.mobile-col-end-1 {
		grid-column-end: 1 !important;
	}
	
	.mobile-col-start-12 {
		grid-column-start: 12 !important;
	}
	.mobile-col-start-11 {
		grid-column-start: 11 !important;
	}
	.mobile-col-start-10 {
		grid-column-start: 10 !important;
	}
	.mobile-col-start-9 {
		grid-column-start: 9 !important;
	}
	.mobile-col-start-8 {
		grid-column-start: 8 !important;
	}
	.mobile-col-start-7 {
		grid-column-start: 7 !important;
	}
	.mobile-col-start-6 {
		grid-column-start: 6 !important;
	}
	.mobile-col-start-5 {
		grid-column-start: 5 !important;
	}
	.mobile-col-start-4 {
		grid-column-start: 4 !important;
	}
	.mobile-col-start-3 {
		grid-column-start: 3 !important;
	}
	.mobile-col-start-2 {
		grid-column-start: 2 !important;
	}
	.mobile-col-start-1 {
		grid-column-start: 1 !important;
	}

	.mobile-off {
		display:none !important;
	}
} */

.force-small-content .desktop-col-end-13,
.force-small-content .desktop-col-end-12,
.force-small-content .desktop-col-end-11,
.force-small-content .desktop-col-end-10,
.force-small-content .desktop-col-end-9,
.force-small-content .desktop-col-end-8,
.force-small-content .desktop-col-end-7,
.force-small-content .desktop-col-end-6,
.force-small-content .desktop-col-end-5,
.force-small-content .desktop-col-end-4,
.force-small-content .desktop-col-end-3,
.force-small-content .desktop-col-end-2,
.force-small-content .desktop-col-end-1 {
    grid-column-end: 13 !important;
}

.force-small-content .desktop-col-start-13,
.force-small-content .desktop-col-start-12,
.force-small-content .desktop-col-start-11,
.force-small-content .desktop-col-start-10,
.force-small-content .desktop-col-start-9,
.force-small-content .desktop-col-start-8,
.force-small-content .desktop-col-start-7,
.force-small-content .desktop-col-start-6,
.force-small-content .desktop-col-start-5,
.force-small-content .desktop-col-start-4,
.force-small-content .desktop-col-start-3,
.force-small-content .desktop-col-start-2,
.force-small-content .desktop-col-start-1 {
    grid-column-start: 1 !important;
}

.force-small-content .row {
    column-gap: 0;
    --page-max-width: 420px !important;
}

.force-small-content .row.constrain-mode-1 {
    max-width: unset !important;
}

.force-small-content .row.constrain-mode-0 {
    max-width: 420px !important;
}

/*
# 	5. Header / Footer
#	-------------------------------------------------------
#
# 	5.1 Navigation
#	-------------------------------------------------------
*/

/*
# 	5.2 Header elements (language, locator, etc.)
#	-------------------------------------------------------
*/

/*
# 	5.3 Footer
#	-------------------------------------------------------
*/

.copyright-notice {
    margin-top: 7px;
}

.corp-copyright span {
    color: var(--color-ssi-red);
    margin: 0 0.4em;
}

footer nav,
.corp-copyright {
    border: 0;
}

*/
/*
# 	5.4 Search
#	-------------------------------------------------------
*/


/*
# 	6. Sub-Navigation and fullscreen modal definitions
#	-------------------------------------------------------
*/

.page-sub-navigation {
    position: sticky;
    color: var(--color-text);
    top: 0;
    z-index: 80;
    width: 100%;
    height: 50px;
    transition: background 400ms;
    border-bottom: 1px solid #ddd;

    background-color: #333 !important;
    /* border-top: 1px solid var(--color-ssi-red); */
    border-top: 1px solid #555;
}

.page-sub-navigation-light {
    background-color: #f1f1f1;
    border-top-color: transparent;
}

/* nav.page-sub-navigation {
	background-color:#111 !important;
} */

.page-sub-navigation-inner {
    /* max-width: calc(var(--page-max-width) - calc(2 * var(--side-safe-area))); */
    max-width: calc(1952px - calc(2 * var(--side-safe-area)));
    margin: 0 auto;
    display: flex;
    height: var(--sub-nav-height);
    padding-left: var(--side-safe-area);
    padding-right: var(--side-safe-area);
    transition: all 400ms;
}

.page-sub-navigation-title {
    font-size: 1.15rem;
    line-height: 3.1;
    color: inherit;
    flex-grow: 1;
    transition: all 400ms;
    padding-right: 20px;
}

.links-element {
    flex-grow: 0;
    text-align: right;
    display: block;
    font-size: 0.875rem;
    line-height: 1;
    margin-top: 0.55em;
    transition: all 600ms ease-out;
    position: relative;
    border-left: 2px solid transparent;
    margin-bottom: 0.7em;
    position: relative;
}

.links-element a {
    margin-left: 15px;
    line-height: 2.3;
    font-size: 1rem;
}

/*.links-element a:hover {
	color:var(--color-ssi-red);	
} */

.btn-cta {
    color: unset;
    border: 1px solid var(--color-ssi-red);
    padding: 0.5em 1em 0.4em 1em;
    color: var(--color-ssi-red);
    border-radius: 5px;
}

.btn-cta:hover {
    border: 1px solid var(--color-ssi-red);
    background-color: var(--color-ssi-red);
    color: white;
}

.btn-filled {
    color: white;
    background-color: var(--color-ssi-red);
    border-color: var(--color-ssi-red);
}

.tabbed-links {
    margin: 0 auto;
}

.tabbed-links a {
    margin: 10px 0.5rem 0px 0.5rem;
    line-height: 1;
    display: inline-block;
    padding: 0.3em 0.95em;
    position: relative;
    border: 1px solid #777;
    border-radius: 99px;
    color: #777;
    /*
	margin: 10px 20px 0px 20px;
	line-height: 1;
	display: inline-block;
	padding: 0.6em 0em 0.7em 0em;
	position: relative;
	*/
}

.tabbed-links a.active {
    color: var(--color-text);
    z-index: 2;
    color: white;
    border-color: var(--color-ssi-red);
    background-color: var(--color-ssi-red);

    /*
	color: var(--color-text);	
	z-index: 2;
	border-bottom: 3px solid var(--color-ssi-red);
	color: var(--color-ssi-red);
	*/
}

body.subnav-modal-open {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.global-modal {
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 1000;
    width: 100vw;
    height: 0;
    opacity: 0;
    background-color: #fff;
    transition: height 600ms, opacity 600ms ease-out;
}

body.subnav-modal-open .global-modal {
    height: calc(100vh - var(--sub-nav-height));
    top: var(--sub-nav-height);
    opacity: 1;
}

body.subnav-modal-open .page-sub-navigation {
    position: fixed;
    background-color: #222;
    color: var(--color-white);
    top: 0;
    width: 100%;
}

.page-sub-navigation.dark-sub {
    background-color: #111;
    color: var(--color-white);
    border-bottom: 1px solid #555;
    position: sticky;
    top: 0;
    z-index: 10;
}

.page-sub-navigation.sticky-sub {
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
}

.dark-sub .btn-cta {
    border-color: #ccc;
    color: #ccc;
}

.dark-sub .btn-cta:hover {
    background-color: #ccc;
    color: #333;
}

.dark-sub .btn-filled,
.dark-sub .btn-filled:hover {
    background-color: var(--color-ssi-red);
    border-color: var(--color-ssi-red);
    color: white;
}

body.subnav-modal-open a.btn-close-subnavigation-modal {
    display: inline-block;
    line-height: 1.2;
    margin-top: 0.55em;
    margin-bottom: 0.5em;
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

body.subnav-modal-open .page-sub-navigation-title {
    flex-grow: 0;
}

body.subnav-modal-open .links-element {
    opacity: 0;
    pointer-events: none;
    flex-grow: unset;
    border-left: 2px solid white;
    --color-text-lighter: #eee;
}

body.subnav-modal-open .main-navigation {
    display: none;
}

body.subnav-modal-open .links-element .btn-buy {
    background-color: white;
    color: var(--color-ssi-red);
}

body.subnav-modal-open .links-element .btn-buy:hover {
    color: var(--color-ssi-red);
}

body.subnav-modal-open .links-element a:hover {
    color: white;
    text-decoration: underline;
}

body.subnav-modal-open .page-sub-navigation-inner {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/*
# 	7. Buttons 
#	-------------------------------------------------------	
*/

.divessi-btn {
    display: inline-block;
    background-color: #ccc;
    padding: 5px 20px 2px 20px;
    border-radius: 5px;
    font-size: 1.15rem !important;
    cursor: pointer;
}

a.btn-buy,
.btn-buy {
    margin-right: 0px;
    background-color: var(--color-ssi-red);
    color: var(--color-white);
    transition: background 600ms, color 600ms;
}

.btn-buy:hover {
    color: inherit;
}

a.btn-close-subnavigation-modal {
    color: #262626;
    margin-left: auto;
}

a.btn-close-subnavigation-modal:hover {
    color: var(--color-ssi-red);
}

a.btn-close-subnavigation-modal {
    flex-grow: 0;
    display: none;
}

.ssi-btn {
    padding: 8px 10px 3px 10px;
    border: 0px;
    background: #e0e0e0;
    font-size: 0.925rem;
    vertical-align: middle;
    border-radius: 5px;
    margin: 0 5px;
    color: #666;
    cursor: pointer;
    line-height: 1.3rem;
}

.btn-as-link {
    background-color: transparent;
}

.btn-as-link:hover {
    background-color: #f0f0f0;
}

.btn-submit {
    background-color: lightslategray;
    color: white;
}

* > .ssi-btn:last-of-type {
    margin-right: 0;
}

/*
# 	8. Element definitions – Utility first CSS approach
#	-------------------------------------------------------	
#
# 	8.1 General
#	-------------------------------------------------------
*/

.star-rating {
    white-space: nowrap;
}

.star-rating > i {
    display: inline-block;
    margin: 0 -1px;
    color: #ccc;
    vertical-align: top;
}

.star-rating > i.star-active {
    color: var(--color-ssi-red);
}

.star-rating-right {
    margin-left: auto;
}

.col > * + * {
    margin-top: 20px;
}

img.img-module-tag,
div.img-module-tag > img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin-bottom: var(--side-safe-area);
}

div.img-module-tag {
    position: relative;
}

.divessi-force-center-text {
    margin: 0 auto;
}

.image-copyright {
    position: absolute;
    z-index: 4;
    /* bottom: -0.5em; */
    right: 0.5em;
    color: white;
    font-size: 0.75rem;
    text-shadow: 0px 2px 2px #11111199;
    transform-origin: 0 0;
    max-width: 90%;
    line-height: 1;
    top: 0.5em;
    text-align: right;
}

.mod-text-shadow {
    text-shadow: 1px 1px 0px #333333bb;
}

.divessi_dark_element {
    /* --default-background: #222;
	--default-foreground: white;
	--default-contrast-background:#222;
	--color-text-lighter: #eee;
	--color-background-midgray: #444;
	background-color: #1f1f1f;
	color:#fff; */
    --default-background: #333;
    --default-foreground: white;
    --default-contrast-background: #2f2f2f;
    --color-text-lighter: #eee;
    --color-background-midgray: #111;
    --color-transparent-border: #99999944;
    background-color: #1f1f1f;
    color: #fff;
}

.divessi_black_element {
    --default-background: #000;
    --default-foreground: #eee;
    --default-contrast-background: #2f2f2f;
    --color-text-lighter: #eee;
    --color-background-midgray: #111;
    background-color: #000;
    color: #eee;
}

.divessi_midlight_element {
    background-color: #e9e9e9;
    color: #333;
}

.divessi_light_element {
    background-color: #fff;
    color: #333;
}

.divessi-background-fit {
    background-size: cover;
    min-height: calc(100vh - var(--navigation-height));
    background-attachment: fixed;
}

.divessi-glass {
    -webkit-backdrop-filter: blur(20px);
    -moz-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.35);
    color: white;
}

.divessi-content-fit {
    padding: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.divessi-content-fit > .row {
    min-height: calc(calc(var(--app-height) - var(--navigation-height)) - 50px);
}

.divessi-content-fit > .row > .col {
    min-height: calc(calc(var(--app-height) - var(--navigation-height)) - 50px);
}
.divessi-content-fit > .row > .col > .tag-element,
.divessi-content-fit > .row > .col > .tag-element > [data-uimodule] {
    position: relative;
    height: 100%;
}

.divessi-maximize-row {
    position: relative;
    height: 100%;
}

.divessi-fit-col {
    position: absolute;
    width: 100%;
    height: calc(100% - 40px);
    top: 20px;
}

.divessi-floating-element {
    position: sticky;
    top: 30px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
}

.divessi-highlight-background {
    /* background-color:#efefef; */
    background: #f1f1f1;
}

.divessi-red-highlight-background {
    /* background: linear-gradient(
		188deg,
		rgba(0,0,0,1) 12%, 
		rgba(172,28,23,1) 50%, 
		rgba(74,12,10,1) 75%, 
		rgba(40,8,7,1) 92%
	); */
    background: linear-gradient(
        188deg,
        rgba(0, 0, 0, 1) 12%,
        rgba(124, 21, 17, 1) 50%,
        rgba(74, 12, 10, 1) 75%,
        rgba(40, 8, 7, 1) 92%
    );
    color: white;
    background-size: cover;
    background-position: center;
}

.divessi-round-corners {
    border-radius: var(--border-radius);
}

.divessi-round-corners-huge {
    border-radius: 20px;
}

.divessi-fit-top-bottom,
.divessi-fit-top-bottom > .row {
    padding-top: 0;
    padding-bottom: 0;
}

.divessi-border {
    border: 1px solid #ccc;
}

.divessi-increase-padding {
    padding: 20px;
}

.divessi-increase-bottom-margin {
    margin-bottom: 30px;
}

.divessi-uppercase {
    text-transform: uppercase;
}

.divessi-lowercase {
    text-transform: lowercase;
}

.divessi-normalize-case {
    text-transform: unset;
}

.divessi-fit {
    margin: 0;
    margin: 0 0 0 0;
    --side-safe-area: 0 !important;
}

section.divessi-fullscreen {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    min-height: calc(calc(var(--app-height) - var(--navigation-height)) - 50px) !important;
    background-size: cover;
    background-position: center center;
    position: relative;
}

section.divessi-fullscreen-70 {
    /* margin: 0 auto var(--default-double-padding) auto; */
    padding: 0;
    width: 100%;
    height: min(80vh, 800px) !important;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.divessi-force-center-text {
    text-align: center !important;
}

.divessi-keyvisual {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: min(70vh, 700px);
    /* height:min(calc(80vh - 100px), 900px); */
    background-color: #999;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.divessi-keyvisual-limit {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    /* height:max(50vh,500px); */
    height: min(70vh, 700px);
    background-color: #999;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.content-placeholder {
    margin: 20px auto;
    padding: 0;
    width: 100%;
    height: 200px;
    background-color: #ccc;
    position: relative;
}

.content-placeholder-500 {
    height: 500px;
}

.sticky-keyvisual {
    position: absolute;
    top: 0;
    right: 0;
    width: 66vw;
    height: 100%;
}

.sticky-keyvisual img {
    position: sticky;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 100vh;
}

.admin-outline-elements .sticky-keyvisual {
    max-width: 100%;
    width: 100%;
}

.admin-outline-elements .sticky-keyvisual img {
    position: relative;
}

.divessi-keyvisual-sticky-bottom {
    position: sticky;
    top: -650px;
    z-index: 10;
}

.divessi-red-separator {
    position: relative;
    margin-bottom: var(--default-padding);
    padding-bottom: var(--default-padding);
}

.divessi-red-separator:after {
    content: '';
    grid-column: 4 / span 6;
    height: 2px;
    background-color: var(--color-ssi-red);
}

/*? Admin overrides – place in admin css would propably be better */
.admin-area .divessi-keyvisual-sticky-bottom {
    position: relative;
    top: initial;
}

.admin-area .divessi-keyvisual-subnavigation {
    height: initial;
}

/* .divessi-keyvisual::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;	
	background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0) 60%);
	width: 100%;
	height: 100%;
} */

/* Title definitions */
.divessi-title-separator-30,
.divessi-title-separator-50,
.divessi-title-separator-100 {
    position: relative;
    padding-bottom: var(--sparator-gap);
    margin-bottom: var(--sparator-gap);
}

.divessi-title-separator-30:after,
.divessi-title-separator-50:after,
.divessi-title-separator-100:after {
    content: '';
    height: 3px;
    background-color: var(--color-ssi-red);
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 200px;
    max-width: 100%;
}

.divessi-keyvisual .row {
    height: 100%;
    padding-left: 0;
    padding-right: 0;
}

.divessi-keyvisual .row .col {
    position: relative;
}

.divessi-keyvisual-overlay {
    display: block;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    color: #fff;
    padding: 3em;
    background-color: hsla(200, 50%, 20%, 0.6);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 10px;
}

.divessi-keyvisual-overlay h1,
.divessi-keyvisual-overlay p {
    color: #fff;
}

.divessi-keyvisual-overlay h1 {
    text-transform: none;
    max-width: 100%;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 0.7em 0;
}

.divessi-keyvisual-overlay p {
    font-size: 1.3rem;
    margin-bottom: -6px;
    text-align: right;
}

.divessi-keyvisual-title {
    display: block;
    position: absolute !important;
    top: 50%;
    left: var(--side-safe-area);
    width: calc(100% - calc(2 * var(--side-safe-area)));
    z-index: 2;
    color: #fff;
    transform: translateY(-50%);
}

.divessi-keyvisual-title h1 {
    text-transform: none;
    font-size: 2.5rem;
    line-height: 1;
    color: inherit;
    font-weight: 600;
    position: relative;
}

/* .divessi-keyvisual-title h1::after {
	position: absolute;
	content: '';
	height: 4px;
	width: 70%;
	background-color: var(--color-ssi-red);
	bottom: -20px;
	left: 0;
	border-radius: 10px;
} */

.divessi-keyvisual-title p {
    color: inherit;
    max-width: 60ch;
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0.6em 0 0 0;
}

.divessi-keyvisual-title a {
    color: white;
    padding: calc(0.7 * var(--side-safe-area)) var(--side-safe-area) calc(0.3 * var(--side-safe-area));
    margin-top: var(--side-safe-area);
    display: inline-block;
    border-radius: var(--border-radius);
    background-color: var(--color-ssi-red);
    font-weight: 600;
    text-shadow: unset;
    font-size: 1.3rem;
}

.divessi-no-top-padding {
    padding-top: 0;
}

.divessi-increase-v-padding {
    padding-top: calc(var(--default-padding) * 3);
    padding-bottom: calc(var(--default-padding) * 3);
}

.divessi-increase-v-padding-2 {
    padding-top: calc(var(--default-padding) * 1);
    padding-bottom: calc(var(--default-padding) * 1);
}

div.divessi-image-banner img,
img.divessi-image-banner {
    height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
}

.divessi-medium-bullet-paragraph {
    font-size: 1rem;
    padding: 0.3rem 1rem 0.4rem 2.6rem;
    /* border-radius: 10px; */
    /* background-color: #111; */
    position: relative;
    margin-top: 0px;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.divessi-medium-bullet-paragraph::before {
    content: '\f0a9';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    position: absolute;
    left: 0rem;
    top: -5px;
    color: var(--default-foreground);
    font-size: 2rem;
}

.divessi-big-bullet-paragraph {
    font-size: inherit;
    padding: 1rem 1rem 0.7rem 2.6rem;
    border-radius: 10px;
    position: relative;
    margin-top: 0;
}

.divessi-big-bullet-paragraph::before {
    content: '\f0a9';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    position: absolute;
    left: 0rem;
    top: 4px;
    color: var(--color-ssi-red);
    font-size: 2rem;
}

.corp-nav-keyvisual {
    position: absolute;
    width: 100%;
    height: 400px;
    background-size: cover;
    top: 0;
    left: 0;
    background-position: center center;
}

.divessi-force-center-text.divessi-keyvisual-title p {
    margin: 1em auto 0 auto;
}

.divessi-text-shadow {
    text-shadow: 0px 2px 2px #11111199;
}

/*
# 	8.2. Statistics 
#	-------------------------------------------------------	
*/

.ssi-statistics {
    /* background-color: #fff; */
    position: relative;
    overflow: hidden;
    /* border-radius: 5px; */
    /* border: 1px solid #ddd; */
    /* padding: 15px; */
    transform: translateZ(0);
    margin: 10px 0;
    /* box-shadow: 0px 3px 10px 0px #00000010; */
}

.ssi-statistics h3 {
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--color-text);
}

.ssi-statistics p {
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.1rem;
}

.ssi-statistics canvas {
    width: 100%;
    height: 100%;
    margin-top: 20px;
}

.ssi-statistics .axis {
    position: absolute;
    color: var(--color-text);
    z-index: 1;
    text-transform: uppercase;
    display: flex;
    width: 100%;
    bottom: 0;
    left: 0;
}

.ssi-statistics .axis .tick {
    flex: 2;
    width: calc(100% / 13);
    position: relative;
    overflow: hidden;
    opacity: 0.35;
    font-size: 0.7rem;
    text-align: center;
    line-height: 20px;
    padding-top: 200px;
    flex-shrink: 0;
}

.ssi-statistics .axis .tick-off {
    width: calc(100% / 26);
    flex-shrink: 0;
    flex: 1;
}

.ssi-statistics .axis .tick:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 6px 6px 0 0;
}

.ssi-statistics .axis .tick-off:hover {
    opacity: 0;
    background-color: transparent;
}

.ssi-statistics .axis .tick .value {
    transform: translateY(-40px);
    transition: 0.3s transform;
    position: absolute;
    top: 20px;
    color: var(--color-text);
    width: 100%;
    line-height: 1.1rem;
    font-size: 1rem;
    font-weight: 600;
}

.ssi-statistics .axis .tick:hover .value.value--this {
    transform: translateY(0);
    display: block;
}

.ssi-statistics .value.value--this {
    color: #5555ff;
    font-weight: 600;
}

/*
# 	8.3 Card-Shelf 
#	-------------------------------------------------------	
*/

.cardshelf {
    /* height: 405px;
	overflow-y: hidden; */
}

.card-shelf-wrapper {
    position: relative;
    /* max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden; */
    /* padding: 10px 0px 65px 0px; */
    scroll-behavior: smooth;
}

.cardshelf-inner {
    width: 100%;
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    max-width: 1920px;
    /* margin: 0 auto; */
    /* justify-content: center; */

    /* justify-items: center; */
    /* padding-right: var(--side-safe-area); */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    /* max-width:2000px; */
    /* margin-left: auto;
	margin-right: auto; */
    /* display: flex;
	gap: 20px; */
    /* padding:0 15px; */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
}

/* .cardshelf-inner::after {
	content: '';
	width: 15px;
	display: block;
} */

/* .cardshelf-inner>.cardshelf-item:first-of-type {
	margin-left: calc(calc(100vw - calc(var(--page-max-width) - calc(4 * var(--side-safe-area)))) / 2);
} */

/* .cardshelf-inner>.cardshelf-item:last-of-type {
	margin-right: var(--side-safe-area)
} */

/* .divessi-card-shelf-no-offset .cardshelf-inner>.cardshelf-item:first-of-type {
	margin-left: auto;
} */

/* .divessi-card-shelf-scroll .cardshelf-inner {
	overflow-x: auto;
	overflow-y: hidden;
} */

.card-shelf-button {
    display: none !important;
    width: 40px;
    height: 40px;
    background-color: #ffffffdd;
    border-radius: 50px;
    display: inline-block;
    text-align: center;
    line-height: 45px;
    font-size: 1.5rem;
    position: absolute;
    top: calc(50% - 40px);
    color: black;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 400ms ease-in-out;
}

.card-shelf-direction-btn-left {
    left: 10px;
}

.card-shelf-direction-btn-right {
    right: 10px;
}

.cardshelf:hover > .card-shelf-button {
    opacity: 1;
}

.cardshelf-item {
    width: 284px;
    height: 371px;
    border-radius: var(--border-radius);
    color: var(--default-foreground);
    white-space: normal;
    isolation: isolate;
    background-color: var(--default-contrast-background);
    overflow: hidden;
    transform-style: preserve-3d;
    flex-shrink: 0;
    position: relative;
    padding-bottom: 55px;
    border: 1px solid var(--color-transparent-border);
}

.cardshelf-item,
.cardshelf-item > *,
.cardshelf-item .base-content img {
    transition: all 400ms ease-out;
}

.card-shelf-image {
    position: relative;
}

.card-shelf-image .image-copyright {
    all: unset;
    box-sizing: border-box;
    text-align: right;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    color: white;
    font-size: 0.75rem;
    transform: rotate(0);
    transform-origin: 0% 0%;
    line-height: 1;
    text-shadow: 0px 0px 1px #333;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 39%);
    padding: 0.5em;
}

.cardshelf-item img {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    clip-path: polygon(0 0%, 100% 0, 100% 95%, 0% 100%);
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.cardshelf-item .base-content h3 {
    margin: 20px 20px 10px 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.4;
}

.cardshelf-item .overlay-content {
    margin: 10px 20px 10px 20px;
    display: block;
    font-size: 0.85rem;
    line-height: 1.3;
}

.cardshelf-item .overlay-content p {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-text-lighter);
    white-space: normal;
    width: 100%;
    -webkit-line-clamp: 5;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-height: calc(5 * 1.3em);
}

.cardshelf-item .cardshelf-more {
    display: block;
    padding: 1em 1.25em;
    color: var(--default-foreground);
    text-align: right;
    font-weight: 600;
    font-size: 0.9rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.cardshelf-item:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 7px 0px rgba(0, 0, 0, 0.15);
    /* box-shadow: 0 4px 15px 3px rgba(0,0,0,0.15); */
}

.cardshelf-item:hover .cardshelf-more {
    background-color: var(--color-ssi-red);
    color: white;
    clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);
}

.cardshelf-item:hover img {
    clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);
}

/*
# 	8.3.1 Card-Shelf - Flip Up Version
#	-------------------------------------------------------	
*/

/*? SHELF */
.card-shelf-flip-up {
    display: flex;
    --animation-duration: 650ms;
}

.cardshelf-flipup-inner {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/*? CARD */
.card-flip-up {
    position: relative;
    width: calc(33% - 13px);
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 420px;
    transform-style: preserve-3d;
}

.card-flip-up img {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    /* border-radius: var(--border-radius) var(--border-radius) 0 0; */
    border-radius: var(--border-radius);
    transition: transform var(--animation-duration), border-radius var(--animation-duration);
    transform-origin: top center;
    aspect-ratio: 16 / 10.4;
    object-fit: cover;
}

.card-flip-up .image-copyright {
    transform: unset;
    bottom: unset;
    top: 6px;
    left: unset;
    right: 6px;
    transition: transform var(--animation-duration);
}

.card-flip-up-content {
    position: relative;
    background-color: var(--default-background);
    padding-top: 40px;
    transform: translateY(-20px);
    transition: transform var(--animation-duration);
    height: 100%;
    border-radius: var(--border-radius);
}

.card-flip-up-headline {
    padding: 0.5em 1.4em;
    text-align: left;
    transition: padding var(--animation-duration), opacity var(--animation-duration);
}

.card-flip-up-headline h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-flip-up-front {
    display: none;
    opacity: 1;
    transition: transform calc(var(--animation-duration) / 2);
}

.card-flip-up-back {
    height: 4.8em;
    width: 100%;
    padding: 0 2em;
    text-align: center;
    transition: transform var(--animation-duration);
    transform: translateY(110%);
    position: absolute;
    top: 140px;
}

.card-flip-up-back p {
    font-size: 1rem;
    line-height: 1.2;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    height: 4.71em;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}

.card-flip-up-stats {
    display: flex;
    margin-top: 2.2em;
    justify-content: center;
}

.card-flip-up-stats-element {
    width: 33%;
    border-right: 1px solid #ccc;
}

.card-flip-up-stats > .card-flip-up-stats-element:last-of-type {
    border-right: 0;
}

.card-flip-up-stats-element > div:first-of-type {
    color: var(--color-ssi-red);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.3em;
}

.card-flip-up-stats-element > div:last-of-type {
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 0.45em;
}

.card-flip-up:hover img {
    transform: scale(0.5);
    border-radius: calc(2 * var(--border-radius));
    /* var(--border-radius) var(--border-radius) var(--border-radius) */
}

.card-flip-up:hover .image-copyright {
    transform: translateX(-75%);
}

.card-flip-up:hover .card-flip-up-content {
    transform: translateY(-48%);
    padding-top: 5em;
}

.card-flip-up:hover .card-flip-up-headline {
    animation: animate-flip-up calc(1.2 * var(--animation-duration)) forwards;
}

.card-flip-up:hover .card-flip-up-front {
    opacity: 0;
}

.card-flip-up:hover .card-flip-up-back {
    transform: translateY(0);
}

@keyframes animate-flip-up {
    0% {
        opacity: 1;
        text-align: left;
    }

    50% {
        opacity: 0;
        text-align: left;
    }

    51% {
        opacity: 0;
        text-align: center;
    }

    100% {
        opacity: 1;
        text-align: center;
    }
}

/*
# Spec list 
*/
.divessi-speclist {
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    gap: 1em;
}

.divessi-speclist-card {
    position: relative;
    width: calc(25% - 23px);
    /* border: 1px solid var(--color-lightgray); */
    padding: var(--default-content-padding);
    /* background-color: white;  */
    padding-left: 65px;
}

.divessi-speclist-size-2 {
    /* width: calc(50% - .5em); */
    width: 100%;
}

.divessi-speclist-size-3 {
    /* width: calc(33% - 19px); */
    /* width: calc(33% - 1em); */
    width: 100%;
}

.divessi-speclist-size-4 {
    /* width: calc(25% - 23px); */
    /* width: calc(25% - 1.5em); */
    width: 100%;
}

.divessi-speclist-card h3 {
    /* padding-bottom: 0.15em; */
    /* margin-bottom: 0.35em; */
    margin-top: 0.4em;
    font-size: 1.5em;
}

.divessi-speclist-card img {
    position: absolute;
    width: 35px;
    height: auto;
    top: 15px;
    left: 15px;
}

.divessi-speclist-card ul {
    padding: 0;
    display: flex;
    gap: 0.15em;
    flex-wrap: wrap;
}

.divessi-speclist-card li {
    list-style: none;
    font-size: 1em;
    line-height: 1.5;
}

.divessi-speclist-card li:not(:last-of-type):after {
    content: ', ';
}

.divessi-highlight-background .divessi-speclist-card {
    border: 1px solid var(--color-lightgray);
    background-color: white;
}

/*
# Flag list
*/

/* .divessi-flag-list {	
	padding: var(--default-content-padding);	
} */
.divessi-flag-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.flag-group {
    display: flex;
}

.flag-group-name {
    display: none;
    width: 190px;
    font-size: 1rem;
    line-height: 50px;
    font-weight: 600;
    flex-shrink: 0;
}

/* .flag-group-items {

} */

.flag-group-items img {
    width: 60px;
    display: inline-block;
    margin-right: 15px;
    transition: transform 400ms;
}

.flag-group-items img:hover {
    transform: scale(1.5);
}

.divessi-flag-list > .list-item {
    width: calc(50% - 5px);
    display: flex;
    border-radius: 99px;
    transition: background-color 300ms;
}
.divessi-flag-list > .list-item.has-cursor {
    cursor: pointer;
}

.list-item > div {
    /* width: 30px;
	height: 30px;
	overflow: hidden;
	border: 1px solid #dedede;
	border-radius: 99px; */
    flex-shrink: 0;
}

.list-item > div img {
    width: 28px;
    height: 28px;
    border-radius: 50px;
    /* margin-left: -5px; */
    /* margin-top: -5px; */
    background-color: #f0f0f0;
    filter: grayscale(30%);
    transition: filter 300ms;
}

.list-item > span {
    font-size: 1em;
    margin-left: 0.5em;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.divessi-flag-list.divessi-small-flags {
    gap: 0.5em 10px;
    justify-content: left;
    display: flex;
    flex-wrap: wrap;
}

.list-item:hover {
    background-color: #f0f0f0;
}

.list-item:hover > div img {
    filter: grayscale(0%);
}

/* .divessi-small-flags > div {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50px;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
} */

/* .divessi-small-flags img {
	width: 54px;
	height: 54px;
	margin-left: -7px;
	margin-top: -7px;
} */

/* .divessi-flag-list > img:first-of-type {
	margin-left:auto;
}
.divessi-flag-list > img:last-of-type {
	margin-right:auto;
} */

/*
# Video
*/

.video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/*
# 	8.3? Comparison (numbering is off) 
#	-------------------------------------------------------	
*/
/* .comparison-content {
	display: flex;
	overflow-x: auto;
	border: 1px solid #ddd;
	background-color: #fff;
	--title-col: 250px;
} */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.comparison-table thead {
    color: #111;
}

.comparison-table thead td {
    border-bottom: 2px solid #333;
}

.comparison-table tbody {
    color: #111;
}

.comparison-table tbody td {
    border-bottom: 1px solid #e0e0e0;
}

.comparison-table tbody > tr:last-of-type td {
    border-bottom: 0;
}

.comparison-table tr > td {
    text-align: center;
    padding: 5px 10px;
    font-size: 0.85rem;
    border-bottom: 1px solid #e9e9e9;
    background-color: #fff;
}

.comparison-table tr > td:first-of-type {
    padding: 5px 10px 5px 20px;
    text-align: left;
    width: var(--title-col);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.comparison-table span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--color-ssi-red);
    border-radius: 10px;
}

tr.row-hidden {
    display: none;
}

tr.comparison-row-head td {
    font-weight: 600;
    font-size: 1rem;
    background-color: #fff;
    padding: 5px 10px !important;
}

tr.comparison-row-head:hover td {
    background-color: hsl(200, 50%, 95%);
}

.comparison-table tr.head-active td {
    border-bottom: 1px solid #999;
    background-color: hsl(0, 10%, 93%);
}

/* DIV LAYOUT */
/* .comparison-col {
	width: 120px;
	flex-shrink: 0;	
	border-right: 1px solid #ccc;	
}
.comparison-col-base {
	position: sticky;
	left: 0;	
	background-color: hsl(200, 60%, 94%);
}
.comparison-col-content {
	text-align:center;
	flex-grow: 1;
}
.comparison-col .cell {
	padding: 5px;
	border-bottom: 1px solid #eee;
}
.comparison-col .cell-head {
	height:80px;
	border-bottom: 1px solid #ddd;
}

.comparison-col-content .cell span {
	display:inline-block;
	width:10px;
	height:10px;
	background-color:var(--color-ssi-red);
	border-radius: 10px;
}

.comparison-col-content .cell {
	font-size:0.6rem;
	color:#999;
} */

/*
# 	8.4 Card-Grid 
#	-------------------------------------------------------	
*/

.cardgrid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.cardgrid h3,
.cardgrid p {
    width: 100%;
}

.cardgrid h3 {
    margin: 5px;
}

.cardgrid-item {
    width: calc(33.3% - 10px);
    margin: 5px;
    border-radius: var(--border-radius);
    white-space: normal;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
}

/* .cardgrid-item a {
	text-decoration: none;
} */

/* .cardgrid-item img {
	padding: 0;
	margin: 0;
	width: 100%;
	height: auto;
	display: block;
} */

.cardgrid-item .text-content {
    padding: 10px;
}

.cardgrid-item .text-content h3 {
    font-size: 1rem;
    line-height: 1.2rem;
    vertical-align: bottom;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/*
# 	8.5 Spec-list 
#	-------------------------------------------------------	
*/
.spec-list {
    /* display: flex;
	flex-wrap: wrap;
	gap: 20px; */
    font-size: 1em;
}

.spec-element {
    font-size: inherit;
}

.spec-list > * + * {
    margin-top: 1em;
}

.spec-element p {
    font-size: 1em;
    color: #121212;
    /* margin-left: auto; */
    flex-shrink: 0;
}

.spec-element h3 {
    font-size: 1em;
    font-weight: 400;
    color: #a0a0a0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.spec-element span {
    display: none;
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* background-color: #e9e9e9;
	width: auto;
	flex-grow: 99;
	min-width: 5%;
	height: 2px; */
}

/*
# 	8.6? Step Approach 
#	-------------------------------------------------------	
*/

.step-approach {
    margin-top: 2em;
    display: flex;
    gap: 0px;
}

.step-approach-card {
    background-color: var(--default-background);
    width: 33.3%;
    color: var(--default-foreground);
    padding: 1rem 2.8rem;
    position: relative;
    text-align: center;
    clip-path: polygon(93% 0%, 100% 50%, 93% 100%, 0% 100%, 7% 50%, 0% 0%);
    transition: all 450ms;
    transform-origin: center;
    border: 2px solid transparent;
}

.step-approach-indicator {
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.7;
    color: var(--color-ssi-red);
    font-weight: 600;
    width: 50px;
    margin: 0 auto 0.8em auto;
    border: 2px solid var(--color-ssi-red);
    border-radius: 40px;
    height: 50px;
}

.step-approach-card h3 {
    margin-bottom: 1.2em;
    line-height: 1.2;
    /* height:2.4rem; */
    padding: 0 1.5em;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    color: inherit;
}

.step-approach-card p {
    margin-bottom: 1em;
    list-style: 1.4;
    color: inherit;
}

.step-approach .step-approach-card:first-of-type {
    clip-path: polygon(93% 0%, 100% 50%, 93% 100%, 0% 100%, 0% 50%, 0% 0%);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding-left: 1.4rem;
}

.step-approach .step-approach-card:last-of-type {
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 7% 50%, 0% 0%);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding-right: 1.4rem;
}

.step-approach-card:hover {
    z-index: 2;
    transform: scale(1.08);
    color: #333;
    background-color: white !important;
    /* clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%) !important; */
}

/*
# 	8.7? Banner 
#	-------------------------------------------------------	
*/

.divessi-banner {
    position: relative;
    height: 300px;
    transform-style: preserve-3d;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.banner-content {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

.divessi-banner.contain-background-image .banner-content {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #020202;
}

.disclaimer-start {
    font-size: 0.9em;
    color: #999;
    max-width: 120ch;
}
.disclaimer-start::before {
    content: '* ';
}
.disclaimer-end::after {
    content: '*';
    font-size: 0.7em;
    vertical-align: super;
}

/* .banner-content::before {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(40deg, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.1) 64%);
	top: 0;
	left: 0;
	content: '';
} */

.banner-overlay {
    position: absolute;
    top: 50%;
    /* left: 100px; */
    font-size: 1.5rem;
    color: white;
    transform: translateY(-50%);
    line-height: 1.1;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    font-weight: 600;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.36);
}

.divessi-banner .banner-text-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    background-color: rgba(0, 0, 0, 0.8);
    transition: transform 450ms ease-in-out;
    padding: 30px 20px;
    text-align: center;
    color: #f0f0f0;
    z-index: 2;
    /* line-height: 1.4; */
}

.divessi-banner .image-copyright {
    transform: unset;
    bottom: unset;
    right: 6px;
    left: unset;
    top: 6px;
    z-index: 1;
}

.call-to-action {
    position: absolute;
    bottom: 0px;
    left: 0;
    /* transform: translateX(-50%); */
    /*background-color: var(--default-contrast-foreground);*/
    background-color: #00000088;
    color: var(--default-contrast-background);
    height: 4em;
    /* border-radius: 5px; */
    width: 100%;
    z-index: 3;
    font-weight: 600;
    transition: all 450ms ease-in-out;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.call-to-action-off,
.call-to-action-on {
    position: absolute;
    right: 1.5em;
    top: 1.5em;
    transition: all 450ms ease-in-out;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

.call-to-action-on {
    opacity: 0;
}

.divessi-banner:hover .banner-text-content {
    transform: translateY(0);
}

.divessi-banner:hover .call-to-action {
    background-color: #e32119;
    height: 5em;
}

.divessi-banner:hover .call-to-action-off {
    opacity: 0;
    top: 2em;
}

.divessi-banner:hover .call-to-action-on {
    opacity: 1;
    top: 2em;
}

.divessi_dark_element .call-to-action {
    color: white;
}

/*
# 	8.8? Image-Text half 
#	-------------------------------------------------------	
*/

/* .image-text-half {

} */
.image-text-half > div {
    display: flex;
}

.image-text-half .image-area,
.image-text-half .text-area {
    width: 50%;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
}

.image-text-half > div.image-right .image-area {
    order: 2;
}

.image-text-half > div.image-right .text-area {
    order: 1;
}

.image-text-half-maximized .image-area {
    width: 66%;
    position: relative;
}

.image-text-half-maximized .text-area {
    width: 34%;
}

/* .image-text-half .image-area {

} */
.image-text-half .text-area {
    display: flex;
}

.image-text-half .text-area .text-area-inner {
    margin: auto 0;
    padding: 2rem;
    text-align: center;
}

.image-text-half .text-area h2 {
    margin-bottom: 1.5em;
}

.image-text-half .text-area a {
    color: var(--default-foreground);
    margin-top: 2rem;
    display: inline-block;
    border: 1px solid var(--default-foreground);
    padding: 0.5em 1em 0.35em 1em;
    border-radius: var(--border-radius);
    transition: background-color 400ms, border-color 400ms;
}

.image-text-half .text-area a:hover {
    background-color: var(--color-ssi-red);
    border-color: var(--color-ssi-red);
    color: white;
}

/*
# 	8.9? Search Banner
#	-------------------------------------------------------	
*/
.divessi-search-banner {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    margin: 0 auto;
    height: 100%;
    display: flex;
}

.divessi-search-banner > div {
    margin: auto;
}

.search-banner {
    margin: auto auto;
    max-width: 550px;
    position: relative;
    flex-direction: column;
    padding: 2em;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 2em;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
}

.search-banner img {
    width: 350px;
}

.search-banner-text h2 {
    /* font-size: 2rem; */
    color: white !important;
}

.search-banner-text p {
    font-size: 1rem;
    line-height: 1.3;
    color: white !important;
}
.search-banner-text > p {
    margin-bottom: 1em;
}

.search-banner-text input {
    max-width: 400px;
    font-size: 1rem;
    padding: 0.6em 2.2em 0.5em;
    border-radius: 8px;
    display: inline-block;
    border: 1px solid #00000066;
}

/* @media only screen and (max-width: 770px) {
    .search-banner {
		top:100px;
	}
} */

/* @media only screen and (max-width: 770px) {
    .search-banner-text input {
      width: calc(100% - 5em);
	  left: -1.5em;
    }
} */

.search-banner-text {
    position: relative;
    margin: 0 auto;
    padding: 0;
}

i.las.la-search.search-banner-icon {
    /* padding: 0.4em; */
    font-size: 1.2em;
    position: absolute;
    left: 0.7em;
    z-index: 2;
    color: black;
    cursor: pointer;
    border-radius: 8px;
    /* vertical-align: middle; */
    /* width: fit-content; */
    transform: translateY(-50%);
    top: 50%;
}

.search-banner-text .search-banner-clear {
    font-size: 1.2em;
    position: absolute;
    color: black;
    cursor: pointer;
    vertical-align: middle;
    top: 50%;
    right: 0.8em;
    transform: translateY(-50%);
}

.search-banner-text .search-banner-clear.hidden {
    display: none;
}

.search-banner-text .search-banner-clear:hover {
    background-color: rgba(159, 159, 159, 0.3);
}

@media only screen and (max-width: 770px) {
    i.las.la-search.search-banner-icon {
        left: 0.8em;
    }
}

i.las.la-search.search-banner-icon:hover {
    background-color: rgba(159, 159, 159, 0.3);
}

.search-banner-link {
    position: relative;
    display: inline-block;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.5em 1em 0.4em 1em;
    font-size: 1.5rem;
    background-color: rgba(255, 255, 255, 0.4);
    color: #222;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 5px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
    font-family: system-ui;
    cursor: text;
}

@media only screen and (max-width: 740px) {
    .search-banner-link {
        display: inline-block;
    }
}

.divessi-blur-background {
    padding: 1em;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -moz-backdrop-filter: blur(20px);
    background-color: #33333399;
    border-radius: 10px;
}

/*
# 	8.10? myDiveGuideSearch
#	-------------------------------------------------------	
*/

.mydiveguide-search-result {
    position: absolute;
    background-color: #222;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.mydiveguide-search-result .search-result-section {
    width: unset;
}

/*
# 	8.10? iFrame
#	-------------------------------------------------------	
*/

.divessi-event-calendar iframe {
    width: 100%;
    height: calc(100vh - 100px);
    max-height: 700px;
    border: 1px solid var(--color-lightgray);
}

/*
# 	8.10? Divesite stats
#	-------------------------------------------------------	
*/

.divesite-stats-table {
    display: flex;
    color: var(--color-ssi-red);
    border-bottom: 1px solid var(--color-ssi-red);
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.divesite-stats-position {
    width: 50%;
}

.divesite-stats-position img {
    width: 1em;
    height: auto;
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: middle;
}

.divesite-stats-rating {
    width: 50%;
    text-align: right;
}

/*
# 	8.11? Banner Static
#	-------------------------------------------------------	
*/

.divessi-banner-static {
    background-color: white;
    color: var(--default-contrast-background);
    transition: transform 400ms;
    height: 100%;
    position: relative;
    border: 1px solid #ddd;
}

.divessi-banner-static:hover {
    transform: scale(1.01);
}

a.banner-static-content {
    border: 0;
}

.banner-static-content > img.card-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    clip-path: polygon(0 0%, 100% 0, 100% 90%, 0% 100%);
    margin-bottom: 1.5rem;
}

.banner-static-content .card-label {
    color: var(--color-ssi-red);
    padding: 0px;
}

.banner-static-content .card-address {
    margin: 0 1.5rem 0.3rem 1.5rem;
    padding: 0 0 1.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

.banner-static-content > h1,
.banner-static-content > h2,
.banner-static-content > h3,
.banner-static-content > h4,
.banner-static-content > h5 {
    margin: 0 1.5rem 1rem 1.5rem;
    font-size: 1.25rem;
}

.banner-static-content > p {
    margin: 0 1.5rem 0.3rem 1.5rem;
    padding: 0 0 1.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.divessi-banner-static .image-copyright {
    transform: unset;
    bottom: unset;
    right: 6px;
    left: unset;
    top: 6px;
    z-index: 1;
}

.cardshelfbig {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    /* height: 435px; */
}

.cardshelfbig .divessi-banner-static {
    width: 440px;
    height: 420px;
    padding-bottom: 0px;
    position: relative;
    overflow: hidden;
    /* border-width: 1.5px; */
    /* border-color: white; */
}

.cardshelfbig .banner-static-content > h1,
.cardshelfbig .banner-static-content > h2,
.cardshelfbig .banner-static-content > h3,
.cardshelfbig .banner-static-content > h4,
.cardshelfbig .banner-static-content > h5 {
    max-width: calc(100% - 140px);
}

.cardshelfbig .divessi-banner-static.cardshelf-item > a {
    padding: 0;
    position: relative;
    color: var(--default-background);
    text-align: left;
    height: 100%;
}

.cardshelfbig .divessi-banner-static.cardshelf-item > a img.card-image {
    margin-bottom: 2rem;
    transition: clip-path 400ms;
}

.cardshelfbig .divessi-banner-static img.card-logo {
    all: unset;
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    transition: all 400ms;
}

.cardshelfbig .divessi-banner-static.cardshelf-item:hover > a {
    background-color: inherit;
}

.cardshelfbig .divessi-banner-static.cardshelf-item:hover > a img.card-image {
    clip-path: inherit;
}

.cardshelfbig .divessi-banner-static.cardshelf-item:hover > a img.card-logo {
    width: 70px;
    height: 70px;
}

/*
# 	8.12? Breadcrumb
#	-------------------------------------------------------	
*/
.page-breadcrumb-list {
    display: inline-block;
    color: var(--default-foreground);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--default-separator-color);
    white-space: nowrap;
    font-size: 0.75rem;
}

.page-breadcrumb-list a {
    display: inline-block;
    padding: 0.5em 0.75em 0.5em 0.75em;
    border-right: 1px solid var(--default-separator-color);
}

.page-breadcrumb-list a:last-child {
    background-color: var(--default-separator-color);
    /* color: var(--default-background); */
    border: 0;
}

/*
# 	8.13? More generic stuff
#	-------------------------------------------------------	
*/
.center-rating {
    font-weight: 600;
    color: var(--color-ssi-red);
    font-size: 0.8rem;
    margin-top: -0.3em;
}

/*
# 	8.14? Counter element
#	-------------------------------------------------------	
*/

.counter-element {
    padding: 10px 0 !important;
    margin: 0 !important;
    /* font-size:inherit !important; */
    /* padding:5px 0; */
}

.counter-element + .counter-element {
    border-top: 1px solid #ccc;
    /* margin-top:20px; */
}

.counter-element a {
    display: flex;
    font-weight: 600;
    line-height: 4rem;
    padding-left: 1em;
    transition: all 250ms;
}

.counter-element:has(a:empty) {
    display: none;
}

.counter-number {
    font-size: 2.5rem;
    width: 150px;
    text-align: center;
}

.counter-label {
    font-size: 1.2rem;
}

.counter-element a:hover {
    color: var(--color-ssi-red);
}

* > .counter-element:last-of-type {
    border-bottom: 0;
}

/*
# 	8.15? Bullet list
#	-------------------------------------------------------	
*/

.bullet-list ul li {
    list-style-type: disc;
    margin-bottom: 0.5em;
}

.bullet-list ul li:last-of-type {
    margin-bottom: 0;
}

.bullet-list ul li::marker {
    font-size: 23px;
}

/*
#	9.1 LanguageSwitch
#	-------------------------------------------------------	
*/
.switch-language {
    position: fixed;
    z-index: 50;
    width: 300px;
    bottom: 1rem;
    right: 1rem;
    padding: 1rem;
    background-color: var(--default-background);
    color: var(--default-foreground);
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.15);
}

.switch-language p {
    line-height: 1.2;
    margin-bottom: 1rem;
}

.switch-language p:empty {
    display: none;
}

.switch-language > div {
    display: flex;
    gap: 1rem;
}

.switch-language > div a {
    display: block;
    width: 50%;
    text-align: center;
    border: 1px solid var(--default-foreground);
    border-radius: var(--border-radius);
    padding: 0.3em 0 0.2em 0;
    font-size: 0.8rem;
}

.switch-language > div a:last-of-type {
    background-color: var(--default-foreground);
    color: var(--default-background);
}

/*
# 	99. Other overrides – needed for 3rd party plugings 
#	-------------------------------------------------------	
*/

/* ? does not belong here */
/* .divessi_dark_element .ssi-statistics {
	background-color:#222;
} */

.ol-zoom {
    left: initial !important;
    top: initial !important;
    bottom: 2.5em;
    right: 0.5em;
}

/*text-block*/
/* .text-block {

} */
.text-block h2 {
    font-size: 1.2rem;
    line-height: 1.1;
    margin-bottom: 0.1em;
}

/* .text-block p {
	
} */

/* Specs element/table */
.specs-element {
    /* border-radius: 10px; */
    /* box-shadow: 0 5px 20px 0px rgba(0,0,0,0.08); */
    /* padding: var(--default-content-padding); */
    font-size: 0.9rem;
    min-height: 200px;
}

.specs-element img {
    display: inline-block;
    /* width: 50px; */
    height: 50px;
    padding: 0 0.5em;
}

.specs-element > * + * {
    margin-top: 35px;
}

.specs-element h2 {
    font-size: 1.5em;
}

.specs-table h2 {
    padding-bottom: 0.15em;
    /* margin-bottom: 1em;
	margin-top: 0.35em; */
    font-size: 1rem;
    /* position: relative; */
}

/* .specs-table h2::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: var(--color-ssi-red);
	position: absolute;
	bottom: -0.5em;
	left: 0;
} */
.specs-table p {
    font-size: inherit;
    margin-top: 10px;
    line-height: 1.4;
}

.specs-table table {
    border-collapse: collapse;
}
.specs-table table.hidden {
    display: none;
}

.specs-table tr.opening-hours-row td {
    padding-top: 5px;
}
.specs-table tr.opening-hours-comment td {
    padding-top: 15px;
    white-space: normal;
}

.specs-table td {
    color: var(--default-foreground);
    padding: 1px 0;
}

.specs-table td:first-of-type {
    font-weight: 600;
    width: 100px;
}

.specs-table .headline-container {
    display: inline;
}

.specs-table .headline-container h2 {
    display: inline;
    padding-right: 10px;
}

.specs-table .headline-container .expand-button {
    font-weight: 800;
    display: inline-block;
}

.specs-table .headline-container .expand-button.rotated {
    transform: rotate(180deg);
}

/* .specs-table td:last-of-type {
	
} */

/* Card */
.card-element {
    overflow: hidden;
    /* border-radius: 7px;
	box-shadow: 0 3px 7px 1px rgba(0,0,0,0.1); */
}

/* Card header */
.card-header {
    /* background-color: var(--color-ssi-red);
	color: white; */
    padding: 0.75em var(--side-safe-area) 0.5em var(--side-safe-area);
}

.card-content {
    /* padding: 1.5em var(--side-safe-area) 0.5em var(--side-safe-area); */
    /* padding:var(--side-safe-area); */
    /* background-color: white; */
}

.card-headline {
    line-height: 1.1;
}
.profile-button {
    padding: 0.5em 0.75em 0.3em;
    margin-left: 1em;
    font-weight: 600;
    font-size: 1.1em;
    border-color: black !important;
    cursor: pointer;
    background-color: white;
    color: black;
}

/* .profile-button:hover{
	
    background-color: gray;
    color: white;
} */

.single-image {
    position: relative;
}

/*# Quick Links */

.quick-links {
    color: #777;
    text-align: center;
    margin: 15px 0;
}

.quick-links a,
.quick-links button {
    display: inline-block;
    width: 20%;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    position: relative;
}

.quick-links a > div:last-of-type,
.quick-links button > div:last-of-type {
    display: none;
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    background-color: var(--color-ssi-red);
    color: white;
    padding: 0.3em 1em;
    border-radius: 99px;
}

/* .quick-links a:hover>div:last-of-type,
.quick-links button:hover>div:last-of-type {
	display: block;
} */

.quick-links i {
    background-color: #eee;
    color: #777;
    display: inline-block;
    /* border: 1px solid var(--color-ssi-red); */
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    line-height: 38px;
}

.quick-links a:hover i {
    background-color: var(--color-ssi-red);
    color: white;
}

.quick-links button {
    padding: 0;
    margin-top: 0;
    border: 0;
    background-color: transparent;
}
/* .quick-links button.not-affiliated i {
	background-color: var(--color-ssi-red);
	color: white;
} */

.quick-links button[data-action='delete'] i,
.quick-links button[data-affiliation='REMOVE'] i {
    background-color: var(--color-ssi-red);
    color: white;
}

.quick-links button:hover i {
    /* .quick-links button:not(.not-affiliated) i { */
    background-color: var(--color-ssi-red);
    color: white;
}

.quick-links > * > div:last-of-type {
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/*# Table links */

.table-links > * {
    display: flex;
    padding: 8px 0;
    position: relative;
    /* border-top: 1px solid #eee; */
}

.table-links > *::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
}

.table-links a {
    cursor: pointer;
    border-radius: 5px;
}

.table-links > * > div:first-of-type {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding-top: 2px;
    /* color:#333; */
}

.table-links > * > div:last-of-type {
    line-height: 1.2rem;
    padding-top: 0.35em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.table-links a:hover {
    background-color: var(--color-ssi-red);
    color: white;
}

.divessi_dark_element .table-links > *::before {
    background-color: #444;
}

.divetrophy-ranking iframe {
    width: 100%;
    height: 650px;
    border: 0;
}

/* a.icon-highlight i {
	background-color:var(--color-ssi-red);
	color:white;
} */

/*specs-table*/
/* .specs-element .table-links {
	margin-top:30px;
}
.specs-element .table-links > div {
	display: flex;
	padding: 15px 0;
	border-top: 1px solid #ddd;
} 
.specs-element .table-links .table-left {
	width: 80px;
	flex-shrink: 0;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.5rem;
}

.specs-element .table-links .table-right {
	line-height: 1.2rem;
	padding-top: 0.2em;
}  */

.flockler-grid-item {
    vertical-align: top;
}

.flockler-grid-item::before {
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.025), 0 2px 2px rgba(0, 0, 0, 0.025), 0 2px 2px rgba(0, 0, 0, 0.025),
        0 2px 3px rgba(0, 0, 0, 0.025), 0 2px 3px rgba(0, 0, 0, 0.025);
}

.flockler-grid-item__text__content p {
    font-size: 0.95rem;
    line-height: 1.3;
}

.divessi-t3-import p {
    margin-top: 10px;
}

.divessi-t3-import header {
    margin-top: 30px;
}

.divessi-t3-import header:first-of-type {
    margin-top: 0;
}

.image-text-half.divessi-t3-import ul {
    text-align: left;
}

.image-text-half.divessi-t3-import li {
    list-style-type: disc;
}

.mod-no-bottom-padding {
    padding-bottom: 0;
}

.mod-no-top-padding {
    padding-top: 0;
}

.mod-copyright-contrast .image-copyright {
    color: #333333cc;
    text-shadow: unset;
}

.global-object-shadow {
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
}

.global-object-white-shadow {
    background-color: #fff;
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 3px 20px 2px rgba(0, 0, 0, 0.1);
}

.global-white-background {
    background-color: white;
}

.no-repeating-background {
    background-repeat: no-repeat;
    background-size: 100% !important;
}

.background-to-bottom {
    background-position: 0 100%;
}

.highlight-lightblue {
    background-color: rgba(58, 108, 156, 0.25);
}

.highlight-rose {
    background-color: rgba(225, 62, 99, 0.35);
}

.highlight-yellow {
    background-color: rgba(246, 234, 211, 1);
}

.highlight-brown {
    background-color: rgba(199, 126, 59, 0.5);
}

.limit-section-width {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.rotate-image-minus-10-degree {
    transform: rotate(-10deg);
}
.image-max-width-50percent img {
    max-width: 50%;
    margin: 0 auto;
}
.image-max-width-200 img {
    max-width: 200px;
    margin: 0 auto;
}
.image-max-width-300 img {
    max-width: 300px;
    margin: 0 auto;
}
.image-max-width-400 img {
    max-width: 400px;
    margin: 0 auto;
}
.image-max-width-500 img {
    max-width: 500px;
    margin: 0 auto;
}

.btn-cta-centered {
    padding: 0.5rem 1rem 0.35rem 1rem;
    max-width: fit-content;
    margin: 2rem auto !important;
    border-radius: 99px;
}

.bullet-list-checkmark {
    padding: 1.5rem;
}

.bullet-list-checkmark ul {
}

.bullet-list-checkmark li {
    list-style-type: none !important;
    position: relative;
}

.bullet-list-checkmark li::before {
    content: '';
    width: 20px;
    height: 40px;
    background-image: url(/assets/icons/checkmark.svg);
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    left: -30px;
    top: -10px;
    background-size: 100%;
}

.frame-borderless iframe {
    border: 0;
}
.fullheight-frame iframe {
    height: calc(100vh - 300px);
    width: 100%;
    outline: 1px solid #0000001f;
}

.overlap-grid-cols {
    column-gap: 0;
    max-width: 1800px;
}

.overlap-grid-cols .col {
}

.overlap-grid-cols .col img {
    transform: scale(1.4);
    max-width: 150px;
}

.zoomable-image img {
    transition: transform 300ms;
}

.zoomable-image img:hover {
    transform: scale(1.2);
}

.overlap-grid-cols.zoomable-image .col img:hover {
    transform: scale(1.6);
    max-width: 200px;
}

/* Cookie consent adjustments */
.cookiefirst-root > div > div > div > div > p {
    max-height: 35vh;
    overflow-y: auto;
}

.lazy-preloader {
    position: relative;
    min-height: 200px !important;
}

.lazy-preloader::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(92deg, #bfbfbf99, #ffffff99, #c6c6c699);
    background-size: 600% 600%;
    -webkit-animation: LazyPreloading 4s ease infinite;
    -moz-animation: LazyPreloading 4s ease infinite;
    animation: LazyPreloading 4s ease infinite;
    /*opacity: .6;*/
}

@-webkit-keyframes LazyPreloading {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 51%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes LazyPreloading {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 51%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes LazyPreloading {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 51%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* @-webkit-keyframes LazyPreloading {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes LazyPreloading {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes LazyPreloading { 
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
} */