body {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

a:visited {
        color: inherit;
    }

:root {
    --header-width: 240px;
    --gutter: 40px;
    --smallgutter: 20px;
    --spacer: 10px;

    --max-content: 1400px;

    --logo-height: 128px;

    --ease: cubic-bezier(0.84, 0.01, 0.16, 0.99); /* custom */
    --crawl-ease: cubic-bezier(0.27, 0, 0.09, 1);
    --ease-out: cubic-bezier(0.08, 0.795, 0, 1); /* custom */
}

@media screen and (max-width: 1279px) {
    :root {
        --max-content: 100%;
        --gutter: 16px;
    }
}

article, header.header .pre-header .wrapper, header.header .main-header .wrapper, footer .wrapper, #intro-hero .hero-box, #intro-hero .search-wrap, .lesser-hero, .search-box, section {
    max-width: var(--max-content);
    width: 100%;
    margin: 0 auto;
}

article {
    padding: var(--gutter);
}

.row {
    display: flex;
    flex-direction: row;

    gap: var(--gutter);
}

.row .col {
        flex: 1;
    }

.row .col:first-child {
            padding-left: var(--gutter);
        }

.row .col:last-child {
            padding-right: var(--gutter);
        }

@media screen and (max-width: 979px) {

.row {
        flex-direction: column
}

        .row .col {
            padding: var(--gutter);
        }
    }

.columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
}

.columns-2 p {
        margin-bottom: 0.2em;
    }

:root {
    --color-fond: #fff;
    --color-dust: #f8f8f8;
    --color-separator: #cacaca;
    --color-separator-subtle: #e0e0e0;

    --color-text: #212020;
    --color-meta: #777676;

    --color-accent: #25a8b0;

    --color-map-background: #97afbe;

    --color-nav-hover: #fca503;
    --color-nav-active: #1e94c4;
    --color-nav-current: #1479a1;

    --color-fond-dark: #0b1318;
    --color-fond-light: rgb(52, 99, 118);

    --color-primary: #ffcc00;

    --color-mark: #ffe8a6;
    --color-mark-current: #ffcc00;

    --color-ED: #00a3af;
    --color-ED-tint: #baf2f6;

    --color-ES: #f29100;
    --color-ES-tint: #f9c785;

    --color-SYS: #4996cc;
    --color-SYS-tint: #8cc6ea;

    --color-VC: #d37000;
    --color-VC-tint: #edb985;

    --color-GO: #ffcc00;
    --color-GO-dark: #102838;
    --color-GO-tint: #ffe8a6;

    --color-link: var(--color-ED);

    --color-transport: #cabf00;
    --color-transport-tint: #f9f5b7;
    --color-industry: #d37204;
    --color-industry-tint: #fdd9af;
    --color-buildings: #4a96cd;
    --color-buildings-tint: #cae7fb;
    --color-agriculture: #00acb6;
    --color-agriculture-tint: #c9f1f4;

    --color-bioenergy: #d47000;
    --color-bioenergy-tint: #ffedd9;
    --color-geothermal: #f39200;
    --color-geothermal-tint: #ffefd8;
    --color-heatpumps: #cd0e1f;
    --color-heatpumps-tint: #ffe9eb;
    --color-hydrogen: #a2bc0c;
    --color-hydrogen-tint: #faffdd;
    --color-hydropower: #00a3af;
    --color-hydropower-tint: #ddfdff;
    --color-oceanpower: #00a3af;
    --color-oceanpower-tint: #b1f1f5;
    --color-solarpv: #fdc300;
    --color-solarpv-tint: #fff9e3;
    --color-csp: #fdc300;
    --color-csp-tint: #fff8e1;
    --color-solarthermal: #fdc300;
    --color-solarthermal-tint: #fff9e7;
    --color-wind: #4a96d2;
    --color-wind-tint: #e0f2ff;
}

.page_annex, .page_preface {
    --current-color: #526d78;
}

.ED, .module-5, .renewables-in-energy-demand-global-trends {
    --current-color: var(--color-ED);
    --current-tint: var(--color-ED-tint);
}

.ES, .module-2, .renewables-in-energy-supply-global-trends {
    --current-color: var(--color-ES);
    --current-tint: var(--color-ES-tint);
}

.SYS, .energy_systems_infrastructure, .energy-systems-infrastructure, .module-3, .energy_systems_infrastructure-global-trends {
    --current-color: var(--color-SYS);
    --current-tint: var(--color-SYS-tint);
}

.VC, .economic_social_value_creation, .economic-social-value-creation, .module-4, .economic_social_value_creation-global-trends {
    --current-color: var(--color-VC);
    --current-tint: var(--color-VC-tint);
}

.GO, .global_overview, .global-overview, .module-1, .global_overview-global-trends {
    --current-color: var(--color-GO);
    --current-tint: var(--color-GO-tint);
}

.buildings, .renewables-in-buildings, .chapter-2 {
    --current-color: var(--color-buildings);
    --current-tint: var(--color-buildings-tint);
}

.transport, .renewables-in-transport, .chapter-3 {
    --current-color: var(--color-transport);
    --current-tint: var(--color-transport-tint);
}

.industry, .renewables-in-industry, .chapter-1 {
    --current-color: var(--color-industry);
    --current-tint: var(--color-industry-tint);
}

.agriculture, .renewables-in-agriculture, .chapter-4 {
    --current-color: var(--color-agriculture);
    --current-tint: var(--color-agriculture-tint);
}

.bioenergy {
    --current-color: var(--color-bioenergy);
    --current-tint: var(--color-bioenergy-tint);
}

.geothermal {
    --current-color: var(--color-geothermal);
    --current-tint: var(--color-geothermal-tint);
}

.heatpumps {
    --current-color: var(--color-heatpumps);
    --current-tint: var(--color-heatpumps-tint);
}

.hydrogen {
    --current-color: var(--color-hydrogen);
    --current-tint: var(--color-hydrogen-tint);
}

.hydropower {
    --current-color: var(--color-hydropower);
    --current-tint: var(--color-hydropower-tint);
}

.oceanpower {
    --current-color: var(--color-oceanpower);
    --current-tint: var(--color-oceanpower-tint);
}

.solar, .solarpv {
    --current-color: var(--color-solarpv);
    --current-tint: var(--color-solarpv-tint);
}

.csp {
    --current-color: var(--color-csp);
    --current-tint: var(--color-csp-tint);
}

.solarthermal {
    --current-color: var(--color-solarthermal);
    --current-tint: var(--color-solarthermal-tint);
}

.wind {
    --current-color: var(--color-wind);
    --current-tint: var(--color-wind-tint);
}

@font-face {
font-family: "icons";
src: url("../icons/icons.ttf?3317e370ee660a59b8f5f69c49cba4d4") format("truetype");
}

/*
{
"agriculture": "\uf101",
"ai-search": "\uf102",
"arrow-d": "\uf103",
"arrow-l": "\uf104",
"arrow-r": "\uf105",
"arrow-u": "\uf106",
"bio": "\uf107",
"buildings": "\uf108",
"challenges": "\uf109",
"close": "\uf10a",
"csp": "\uf10b",
"dogear": "\uf10c",
"download-data": "\uf10d",
"download-figure": "\uf10e",
"download-img": "\uf10f",
"download-map": "\uf110",
"download-pdf": "\uf111",
"download-slides": "\uf112",
"download-xls": "\uf113",
"download": "\uf114",
"email": "\uf115",
"facebook": "\uf116",
"geothermal": "\uf117",
"gsr": "\uf118",
"heat": "\uf119",
"hydro": "\uf11a",
"industry": "\uf11b",
"info": "\uf11c",
"interactive": "\uf11d",
"linkedin": "\uf11e",
"mail": "\uf11f",
"map": "\uf120",
"marker": "\uf121",
"menu": "\uf122",
"ocean": "\uf123",
"opportunities": "\uf124",
"phone": "\uf125",
"print": "\uf126",
"ren_icons_1": "\uf127",
"ren_icons_2": "\uf128",
"ren_icons_3": "\uf129",
"ren_icons_4": "\uf12a",
"ren21_logo_mini": "\uf12b",
"ren21_logo_w": "\uf12c",
"ren21_logo": "\uf12d",
"ren21": "\uf12e",
"search": "\uf12f",
"share": "\uf130",
"solar": "\uf131",
"supply": "\uf132",
"systems": "\uf133",
"target-biofuel": "\uf134",
"target-countries": "\uf135",
"target-heat": "\uf136",
"target-power": "\uf137",
"target-re": "\uf138",
"tech_icon_bioenergy": "\uf139",
"tech_icon_geothermal": "\uf13a",
"tech_icon_heat": "\uf13b",
"tech_icon_heatpumps": "\uf13c",
"tech_icon_hydrogen": "\uf13d",
"tech_icon_solar": "\uf13e",
"tech_icon_wind": "\uf13f",
"topics": "\uf140",
"translate": "\uf141",
"transport": "\uf142",
"twitter": "\uf143",
"whatsapp": "\uf144",
"wind": "\uf145",
"zoom-in": "\uf146",
"zoom-out": "\uf147",
"zoom-reset": "\uf148",
}

*/

.btn i, .download-pdf i, .download-figures i, .download-jpg i, .download-maps i, .download-data i, .download-xlsx i, .download-slides i, .download-presentations i, .download-ppt i, header.header .pre-header #logo, #nav-bar .page-nav li a.download i, .box-more-label i{
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}

.icon:before, header.header #toc-nav .nav-icon:before, header.header #toc-nav .toggle-icon:before, header.header #search-nav .search-icon:before, #share-box i:before, li.shariff-button .fa-facebook-f:before, li.shariff-button .fa-twitter:before, li.shariff-button .fa-linkedin-in:before, li.shariff-button .fa-whatsapp:before, li.shariff-button .fa-envelope:before, li.shariff-button .fa-print:before, .share .trigger:before, .share .tweet:before, .share .fb:before, .share .mail:before, .figure-actions a:before, .figure-actions .figure-action-share .tweet:before, .figure-actions .figure-action-share .fb:before, .figure-actions .figure-action-share .mail:before, .sheet-count:before, #figure_2 label[for="radio-figure_2-energy"] .label-text:before, #figure_2 label[for="radio-figure_2-power"] .label-text:before, #figure_2 label[for="radio-figure_2-heat"] .label-text:before, #figure_2 label[for="radio-figure_2-transport_fuel"] .label-text:before, #figure_17 label[for="radio-figure_17-power"] .label-text:before, #figure_17 label[for="radio-figure_17-solar"] .label-text:before, #figure_17 label[for="radio-figure_17-wind"] .label-text:before, #figure_17 label[for="radio-figure_17-hydropower"] .label-text:before, #figure_17 label[for="radio-figure_17-biopower"] .label-text:before, #figure_17 label[for="radio-figure_17-csp"] .label-text:before, #figure_17 label[for="radio-figure_17-geothermal"] .label-text:before, .search-box #hero-search button:before, #nav-bar .toplink:before, #nav-bar #marker #marker-mark:before, #nav-bar #marker #clear-btn:before, #nav-bar #marker #prev-btn:before, #nav-bar #marker #next-btn:before {
font-size: 32px;
font-family: icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

color: var(--current-color);

display: flex;

align-items:center;
justify-content:center;

}

.btn i:before, .download-pdf i:before, .download-figures i:before, .download-jpg i:before, .download-maps i:before, .download-data i:before, .download-xlsx i:before, .download-slides i:before, .download-presentations i:before, .download-ppt i:before, header.header .pre-header #logo:before, #nav-bar .page-nav li a.download i:before, .box-more-label i:before{

font-size: 32px;
font-family: icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

color: var(--current-color);

display: flex;

align-items:center;
justify-content:center;

}

.icon-agriculture:before {
content: "\f101";
}

.icon-ai-search:before {
content: "\f102";
}

.icon-arrow-d:before, header.header #toc-nav .toggle-icon:before, .box-more-label i:before {
content: "\f103";
}

.icon-arrow-l:before, #nav-bar #marker #prev-btn:before {
content: "\f104";
}

.icon-arrow-r:before, #nav-bar #marker #next-btn:before {
content: "\f105";
}

.btn.start-reading i:before {
content: "\f105";
}

.icon-arrow-u:before, #nav-bar .toplink:before {
content: "\f106";
}

.icon-bio:before, #figure_17 label[for="radio-figure_17-biopower"] .label-text:before {
content: "\f107";
}

.icon-buildings:before {
content: "\f108";
}

.icon-challenges:before {
content: "\f109";
}

.icon-close:before, #nav-bar #marker #clear-btn:before {
content: "\f10a";
}

.icon-csp:before, #figure_17 label[for="radio-figure_17-csp"] .label-text:before {
content: "\f10b";
}

.icon-dogear:before {
content: "\f10c";
}

.icon-download-data:before {
content: "\f10d";
}

.download-data i:before, .download-xlsx i:before, ul.download-list a.download.download-data i:before {
content: "\f10d";
}

.icon-download-figure:before {
content: "\f10e";
}

.download-figures i:before, .download-jpg i:before, ul.download-list a.download.download-figures i:before {
content: "\f10e";
}

.icon-download-img:before, .figure-actions .figure-action-image:before {
content: "\f10f";
}

.icon-download-map:before {
content: "\f110";
}

.download-maps i:before, ul.download-list a.download.download-maps i:before {
content: "\f110";
}

.icon-download-pdf:before {
content: "\f111";
}

.download-pdf i:before, ul.download-list a.download.download-pdf i:before {
content: "\f111";
}

.icon-download-slides:before {
content: "\f112";
}

.download-slides i:before, .download-presentations i:before, .download-ppt i:before, ul.download-list a.download.download-slides i:before {
content: "\f112";
}

.icon-download-xls:before, .figure-actions .figure-action-dataset:before {
content: "\f113";
}

.icon-download:before {
content: "\f114";
}

.icon-email:before, li.shariff-button .fa-envelope:before {
content: "\f115";
}

.icon-facebook:before, li.shariff-button .fa-facebook-f:before, .share .fb:before, .figure-actions .figure-action-share .fb:before {
content: "\f116";
}

.icon-geothermal:before, #figure_17 label[for="radio-figure_17-geothermal"] .label-text:before {
content: "\f117";
}

.icon-gsr:before {
content: "\f118";
}

.icon-heat:before {
content: "\f119";
}

.icon-hydro:before {
content: "\f11a";
}

.icon-industry:before {
content: "\f11b";
}

.icon-info:before {
content: "\f11c";
}

.icon-interactive:before {
content: "\f11d";
}

.icon-linkedin:before, li.shariff-button .fa-linkedin-in:before {
content: "\f11e";
}

.icon-mail:before, .share .mail:before, .figure-actions .figure-action-share .mail:before {
content: "\f11f";
}

.icon-map:before {
content: "\f120";
}

.icon-marker:before, #nav-bar #marker #marker-mark:before {
content: "\f121";
}

.icon-menu:before, header.header #toc-nav .nav-icon:before {
content: "\f122";
}

.icon-ocean:before, #figure_17 label[for="radio-figure_17-hydropower"] .label-text:before {
content: "\f123";
}

.icon-opportunities:before {
content: "\f124";
}

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

.icon-print:before, li.shariff-button .fa-print:before {
content: "\f126";
}

.icon-ren_icons_1:before {
content: "\f127";
}

.icon-ren_icons_2:before {
content: "\f128";
}

.icon-ren_icons_3:before {
content: "\f129";
}

.icon-ren_icons_4:before {
content: "\f12a";
}

.icon-ren21_logo_mini:before {
content: "\f12b";
}

.icon-ren21_logo_w:before {
content: "\f12c";
}

.icon-ren21_logo:before {
content: "\f12d";
}

.icon-ren21:before {
content: "\f12e";
}

.icon-search:before, header.header #search-nav .search-icon:before, .search-box #hero-search button:before {
content: "\f12f";
}

.icon-share:before, #share-box i:before, .share .trigger:before, .figure-actions .figure-action-share .trigger:before {
content: "\f130";
}

.icon-solar:before, #figure_17 label[for="radio-figure_17-solar"] .label-text:before {
content: "\f131";
}

.icon-supply:before {
content: "\f132";
}

.icon-systems:before {
content: "\f133";
}

.icon-target-biofuel:before, #figure_8 label[for="radio-figure_8-biofuel_targets"] .sheet-count:before {
content: "\f134";
}

.icon-target-countries:before, #figure_2 label[for="radio-figure_2-energy"] .label-text:before, #figure_8 label[for="radio-figure_8-summary"] .sheet-count:before, #figure_17 label[for="radio-figure_17-power"] .label-text:before {
content: "\f135";
}

.icon-target-heat:before, #figure_2 label[for="radio-figure_2-heat"] .label-text:before, #figure_8 label[for="radio-figure_8-renewable_heat_targets"] .sheet-count:before {
content: "\f136";
}

.icon-target-power:before, #figure_2 label[for="radio-figure_2-power"] .label-text:before, #figure_8 label[for="radio-figure_8-renewable_power_targets"] .sheet-count:before {
content: "\f137";
}

.icon-target-re:before, #figure_8 label[for="radio-figure_8-renewable_energy_targets"] .sheet-count:before {
content: "\f138";
}

.icon-tech_icon_bioenergy:before {
content: "\f139";
}

.icon-tech_icon_geothermal:before {
content: "\f13a";
}

.icon-tech_icon_heat:before {
content: "\f13b";
}

.icon-tech_icon_heatpumps:before {
content: "\f13c";
}

.icon-tech_icon_hydrogen:before {
content: "\f13d";
}

.icon-tech_icon_solar:before {
content: "\f13e";
}

.icon-tech_icon_wind:before {
content: "\f13f";
}

.icon-topics:before {
content: "\f140";
}

.icon-translate:before {
content: "\f141";
}

.icon-transport:before, #figure_2 label[for="radio-figure_2-transport_fuel"] .label-text:before {
content: "\f142";
}

.icon-twitter:before, li.shariff-button .fa-twitter:before, .share .tweet:before, .figure-actions .figure-action-share .tweet:before {
content: "\f143";
}

.icon-whatsapp:before, li.shariff-button .fa-whatsapp:before {
content: "\f144";
}

.icon-wind:before, #figure_17 label[for="radio-figure_17-wind"] .label-text:before {
content: "\f145";
}

.icon-zoom-in:before, .figure-actions .figure-action-fullscreen:before {
content: "\f146";
}

.icon-zoom-out:before {
content: "\f147";
}

.icon-zoom-reset:before {
content: "\f148";
}

.btn {
    font-weight: 500;
    font-size: 1.2rem;
    width: auto;
    min-width: 220px;
    padding: 0.8em 1.2em !important;
    background-color: var(--color-accent);
    color: #fff;
    border-radius: 1px;
    display: inline-flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.btn:visited {
        color: #fff;
    }

.btn i:before {
            font-size: 1.25em;
        }

.cta {
}

input {
    font-family: var(--copy-font);
}

select {
    font-family: var(--copy-font);
    padding: 0.5em 0.75em;
    font-weight: 500;
}

mark {
    background: var(--color-mark);
}

mark.active-match {
        background-color: var(--color-mark-current);
    }

.pill {
    padding: 0.75rem 1.25rem;
    font-size: 1.1rem;

    color: var(--color-text);
    background: #f6f6f6;

    font-weight: 500;
    display: block;

    border-radius: 1.5rem;
    margin-right: 0.35rem;
    margin-bottom: 0.5rem;

    cursor: pointer;
}

.pill:hover, .pill:focus {
    background-color: var(--color-separator-subtle);
}

.pill.active {
    background-color: var(--color-nav-active);
    color: #fff;
}

@svg-load icon-target-countries url(assets/_source/icons/target_countries.svg) {
    fill: #8c8c8c;
}

@svg-load icon-target-countries-active url(assets/_source/icons/target_countries.svg) {
    fill: #ffcd00;
}

@svg-load icon-target-re url(assets/_source/icons/target_re.svg) {
}

@svg-load icon-target-power url(assets/_source/icons/target_power.svg) {
}

@svg-load icon-target-heat url(assets/_source/icons/target_heat.svg) {
}

@svg-load iocn-target-biofuel url(assets/_source/icons/target_biofuel.svg) {
}

.btn i, .download-pdf i, .download-figures i, .download-jpg i, .download-maps i, .download-data i, .download-xlsx i, .download-slides i, .download-presentations i, .download-ppt i, header.header .pre-header #logo, #nav-bar .page-nav li a.download i, .box-more-label i {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

@font-face {
    font-family: "IBMPlex";
    src: url("../fonts/IBMPlexSans-VariableFont_wdth,wght.ttf");
}

@font-face {
    font-family: "Narrow";

    /* src: url("../fonts/SofiaSansCondensed-VariableFont_wght.ttf"); */
    src: url("../fonts/Supreme-Variable.ttf");
}

@font-face {
    font-family: "SemiNarrow";
    /*
    src: url("../fonts/SofiaSansSemiCondensed-VariableFont_wght.ttf");*/
    src: url("../fonts/Supreme-Variable.ttf");
}

:root {
    --font-fallback: Arial, Helvetica, sans-serif;
    --copy-font: "IBMPlex";
    --narrow-font: "SemiNarrow";
}

body {
    font-family: var(--copy-font), var(--font-fallback);
    font-size: 1.2rem;
    line-height: 1.1em;
}

h1, h2, h3, h4, .tippy-box[data-theme="map"] .tip-head {
    font-family: var(--narrow-font), var(--font-fallback);
    margin: 0;
    padding: 0;
    line-height: 1.1em;
    margin-bottom: 0.5rem;
}

h1 {
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: 2.4rem;
}

@media screen and (max-width: 979px) {

h1 {
        font-size: 2rem
}
    }

h2, .tippy-box[data-theme="map"] .tip-head {
    text-transform: uppercase;
    font-size: 2rem;
}

@media screen and (max-width: 979px) {

h2, .tippy-box[data-theme="map"] .tip-head {
        font-size: 1.4rem
}
    }

h3 {
    margin-bottom: 1rem;
}

@media screen and (max-width: 979px) {

h3 {
        font-size: 1.4rem
}
    }

h4 {
}

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    line-height: 1.4em;
}

p strong {
        font-weight: 500;
    }

hr {
    margin: var(--gutter) 0;
    border: 1px solid rgb(242, 242, 242);
}

.nobreakout, .footnote a {
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;

    word-break: break-all;

    word-break: break-word;
}

.nowrap {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

.textwrap {
    white-space: initial !important;
}

.center {
    text-align: center;
}

sup {
    font-size: 14px;
    line-height: 0;
    font-variation-settings: "wght" 420;
    font-family: var(--narrow-font), var(--font-fallback);
}

sup a {
        font-weight: normal;
        line-height: 0;
        margin-left: -0.5em;
    }

sup a.foot-ref {
        margin-left: -0.2em;
    }

sub {
    font-size: 12px;
    line-height: 0;
}

span.square:before {
        content: "■";
        color: var(--color-primary);
    }

span.arrow:before {
        content: "→";
        color: var(--color-primary);
    }

a.see-link:before {
        content: "→";
        font-size: 1rem;
        padding-right: 4px;
    }

.footnote {
    font-size: 1rem;
}

.caption {
    font-size: 1rem;
    margin-top: -20px;
    font-style: italic;
}

header.header #toc-nav ul li.nav-item .drawer, header.header #main-nav ul li.nav-item .drawer, header.header #main-nav ul li.nav-item#nav-item-sectors .drawer, header.header #main-nav ul li.nav-item#nav-item-tech .drawer, header.header #main-nav ul li.nav-item#nav-item-cases .drawer, header.header #search-nav ul li.nav-item .drawer {
    position: absolute;
    z-index: -1;

    top: 100%;
    left: 0px;
    right: 0px;
    width: 100%;

    transform: translateY(-100%);
    transition: all 0.4s var(--ease);

    padding: var(--gutter) 0;
    background-color: var(--color-fond);
}

header.header #toc-nav ul li.nav-item .drawer .wrapper, header.header #main-nav ul li.nav-item .drawer .wrapper, header.header #main-nav ul li.nav-item#nav-item-sectors .drawer .wrapper, header.header #main-nav ul li.nav-item#nav-item-tech .drawer .wrapper, header.header #main-nav ul li.nav-item#nav-item-cases .drawer .wrapper, header.header #search-nav ul li.nav-item .drawer .wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

@media screen and (max-width: 979px) {

header.header #toc-nav ul li.nav-item .drawer, header.header #main-nav ul li.nav-item .drawer, header.header #main-nav ul li.nav-item#nav-item-sectors .drawer, header.header #main-nav ul li.nav-item#nav-item-tech .drawer, header.header #main-nav ul li.nav-item#nav-item-cases .drawer, header.header #search-nav ul li.nav-item .drawer {
        height: 90dvh;
        overflow: scroll
}
    }

header.header #toc-nav ul li.nav-item #home-check:checked + .drawer, header.header #main-nav ul li.nav-item:hover .drawer, header.header #search-nav ul li.nav-item #search-check:checked + .drawer {
    box-shadow:
        rgba(0, 0, 0, 0.07) 0px 1px 2px,
        rgba(0, 0, 0, 0.07) 0px 2px 4px,
        rgba(0, 0, 0, 0.07) 0px 4px 8px,
        rgba(0, 0, 0, 0.07) 0px 8px 16px,
        rgba(0, 0, 0, 0.07) 0px 16px 32px,
        rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

header.header .main-header:before {
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

header.header #toc-nav ul li.nav-item .drawer, header.header #main-nav ul li.nav-item#nav-item-sectors .drawer, header.header #main-nav ul li.nav-item#nav-item-tech .drawer, header.header #main-nav ul li.nav-item#nav-item-cases .drawer, header.header #search-nav ul li.nav-item .drawer {
}

header.header ul.tiles li:hover a {
    background-color: #fff !important;
    outline: 6px solid #fff;
    border-radius: 0.1px;
    border: none;
}

header.header {
    --pre-header-height: 128px;
    --smallgutter: 20px;

    position: sticky;

    z-index: 940;
    top: calc(var(--pre-header-height) * -1);

    left: 0px;
    width: 100%;
}

@media screen and (max-width: 979px) {

header.header {
        --pre-header-height: 64px
}
    }

header.header .pre-header {
        font-family: var(--narrow-font), var(--font-fallback);
        background-color: #ffffff;
        height: var(--pre-header-height);
    }

header.header .pre-header .wrapper {
            padding: 0 var(--smallgutter);
            height: 100%;

            display: grid;

            grid-template-columns: 1fr 3fr 1fr;
        }

@media screen and (max-width: 979px) {

header.header .pre-header .wrapper {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center
        }
            }

header.header .pre-header .col-left {
            display: grid;
            justify-items: start;
            align-items: center;
        }

@media screen and (max-width: 979px) {

header.header .pre-header .col-left {
                order: 2;
                display: none
        }
            }

header.header .pre-header .col-center {
            display: grid;
            justify-items: center;
            align-items: center;
        }

@media screen and (max-width: 979px) {

header.header .pre-header .col-center {
                order: 1;
                flex-grow: 4;
                width: 100%
        }
            }

header.header .pre-header .col-right {
            display: grid;
            justify-items: end;
            align-items: center;
        }

@media screen and (max-width: 979px) {

header.header .pre-header .col-right {
                display: flex;
                position: absolute;
                z-index: 500;

                top: 12px;
                right: 8px;
                background-color: #fff
        }

                header.header .pre-header .col-right i {
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-content: center;
                    justify-content: center;
                }
            }

header.header .pre-header #logo-switch {
            position: relative;
            z-index: 280;
            overflow: hidden;
        }

header.header .pre-header #logo {
            display: block;
            width: 220px;
            height: 45px;

            position: relative;
            z-index: 250;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='150' height='35' viewBox='0 0 150 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_4_421)'%3E %3Cpath d='M6.27966 11.9479C6.10856 11.7818 5.97271 11.584 5.87998 11.3658C5.78725 11.1476 5.7395 10.9135 5.7395 10.6771C5.7395 10.4406 5.78725 10.2065 5.87998 9.98836C5.97271 9.7702 6.10856 9.57234 6.27966 9.40625L10.1554 5.59375C10.3233 5.41921 10.5251 5.27954 10.7487 5.183C10.9724 5.08647 11.2135 5.03502 11.4578 5.0317C11.702 5.02838 11.9445 5.07325 12.1708 5.16367C12.3971 5.25409 12.6027 5.38821 12.7755 5.55812C12.9482 5.72803 13.0845 5.93028 13.1765 6.1529C13.2684 6.37553 13.314 6.61403 13.3106 6.85429C13.3072 7.09456 13.2549 7.33172 13.1568 7.55176C13.0587 7.77181 12.9167 7.97027 12.7392 8.13541L8.8635 11.9479C8.69465 12.1162 8.4935 12.2499 8.27173 12.3411C8.04995 12.4323 7.81196 12.4793 7.57158 12.4793C7.3312 12.4793 7.09321 12.4323 6.87143 12.3411C6.64966 12.2499 6.44851 12.1162 6.27966 11.9479Z' fill='%23EC820A'/%3E %3Cpath d='M20.0035 34.4687C19.8324 34.3026 19.6966 34.1048 19.6039 33.8866C19.5111 33.6685 19.4634 33.4344 19.4634 33.1979C19.4634 32.9614 19.5111 32.7273 19.6039 32.5092C19.6966 32.291 19.8324 32.0932 20.0035 31.9271L27.9245 24.1354C28.2702 23.8136 28.73 23.6372 29.2059 23.6436C29.6819 23.6501 30.1365 23.839 30.4731 24.1701C30.8097 24.5011 31.0017 24.9483 31.0082 25.4165C31.0148 25.8847 30.8355 26.337 30.5083 26.6771L22.5874 34.4687C22.4185 34.637 22.2174 34.7707 21.9956 34.8619C21.7738 34.9531 21.5358 35.0001 21.2955 35.0001C21.0551 35.0001 20.8171 34.9531 20.5953 34.8619C20.3735 34.7707 20.1724 34.637 20.0035 34.4687Z' fill='%23F7AA01'/%3E %3Cpath d='M5.70764 21.5312C5.53654 21.3652 5.40068 21.1673 5.30796 20.9491C5.21523 20.731 5.16748 20.4969 5.16748 20.2604C5.16748 20.024 5.21523 19.7899 5.30796 19.5717C5.40068 19.3535 5.53654 19.1557 5.70764 18.9896L20.4058 4.53125C20.5737 4.35671 20.7755 4.21704 20.9992 4.1205C21.2229 4.02397 21.464 3.97252 21.7082 3.9692C21.9525 3.96588 22.1949 4.01075 22.4212 4.10117C22.6476 4.19159 22.8532 4.32571 23.0259 4.49562C23.1986 4.66553 23.335 4.86778 23.4269 5.0904C23.5188 5.31303 23.5644 5.55153 23.561 5.79179C23.5577 6.03206 23.5054 6.26922 23.4072 6.48926C23.3091 6.70931 23.1671 6.90777 22.9897 7.07291L8.29147 21.5312C8.12263 21.6996 7.92148 21.8332 7.6997 21.9244C7.47793 22.0156 7.23994 22.0626 6.99956 22.0626C6.75918 22.0626 6.52119 22.0156 6.29941 21.9244C6.07763 21.8332 5.87648 21.6996 5.70764 21.5312Z' fill='%23019BA3'/%3E %3Cpath d='M18.0338 27.4063C17.8627 27.2402 17.7269 27.0423 17.6341 26.8241C17.5414 26.606 17.4937 26.3719 17.4937 26.1354C17.4937 25.899 17.5414 25.6649 17.6341 25.4467C17.7269 25.2285 17.8627 25.0307 18.0338 24.8646L33.6004 9.55209C33.9461 9.23028 34.4059 9.05385 34.8818 9.06032C35.3578 9.06679 35.8124 9.25566 36.149 9.58675C36.4855 9.91784 36.6775 10.365 36.6841 10.8332C36.6907 11.3014 36.5113 11.7536 36.1842 12.0938L20.6176 27.4063C20.4488 27.5746 20.2477 27.7082 20.0259 27.7994C19.8041 27.8906 19.5661 27.9376 19.3257 27.9376C19.0853 27.9376 18.8474 27.8906 18.6256 27.7994C18.4038 27.7082 18.2027 27.5746 18.0338 27.4063Z' fill='%230092CB'/%3E %3Cpath d='M3.44153 32.7604C3.27043 32.5943 3.13457 32.3965 3.04184 32.1783C2.94912 31.9601 2.90137 31.726 2.90137 31.4896C2.90137 31.2531 2.94912 31.019 3.04184 30.8009C3.13457 30.5827 3.27043 30.3848 3.44153 30.2187L21.8249 12.1354C22.1706 11.8136 22.6304 11.6372 23.1063 11.6436C23.5823 11.6501 24.0369 11.839 24.3735 12.1701C24.7101 12.5012 24.9021 12.9483 24.9086 13.4165C24.9152 13.8847 24.7358 14.337 24.4087 14.6771L6.02536 32.7604C5.85652 32.9287 5.65537 33.0624 5.43359 33.1536C5.21181 33.2448 4.97383 33.2918 4.73344 33.2918C4.49306 33.2918 4.25507 33.2448 4.0333 33.1536C3.81152 33.0624 3.61037 32.9287 3.44153 32.7604Z' fill='%23EF6C05'/%3E %3Cpath d='M17.8857 3.07291C17.5399 3.39473 17.0802 3.57116 16.6042 3.56469C16.1283 3.55821 15.6737 3.36935 15.3371 3.03826C15.0005 2.70717 14.8085 2.25998 14.8019 1.79179C14.7954 1.3236 14.9747 0.871363 15.3019 0.531248C15.4698 0.356707 15.6715 0.217041 15.8952 0.120504C16.1189 0.0239669 16.36 -0.0274824 16.6042 -0.0308036C16.8485 -0.0341247 17.0909 0.0107496 17.3173 0.101168C17.5436 0.191586 17.7492 0.325713 17.9219 0.495622C18.0946 0.665532 18.231 0.867776 18.3229 1.0904C18.4148 1.31303 18.4604 1.55153 18.4571 1.79179C18.4537 2.03206 18.4014 2.26922 18.3033 2.48926C18.2051 2.70931 18.0631 2.90777 17.8857 3.07291Z' fill='%23EC820A'/%3E %3Cpath d='M3.12382 26.6146C2.86826 26.8662 2.54259 27.0375 2.18801 27.107C1.83342 27.1765 1.46585 27.141 1.13179 27.0049C0.797735 26.8689 0.512198 26.6385 0.311301 26.3428C0.110404 26.0471 0.00317383 25.6994 0.00317383 25.3438C0.00317383 24.9881 0.110404 24.6404 0.311301 24.3447C0.512198 24.049 0.797735 23.8186 1.13179 23.6826C1.46585 23.5465 1.83342 23.511 2.18801 23.5805C2.54259 23.65 2.86826 23.8213 3.12382 24.0729C3.29492 24.239 3.43078 24.4369 3.52351 24.655C3.61623 24.8732 3.66398 25.1073 3.66398 25.3438C3.66398 25.5802 3.61623 25.8143 3.52351 26.0325C3.43078 26.2506 3.29492 26.4485 3.12382 26.6146Z' fill='%23019BA3'/%3E %3Cpath d='M29.5552 9.61459C29.2997 9.86617 28.974 10.0375 28.6194 10.107C28.2648 10.1765 27.8972 10.141 27.5632 10.0049C27.2291 9.8689 26.9436 9.63846 26.7427 9.34277C26.5418 9.04707 26.4346 8.69941 26.4346 8.34375C26.4346 7.9881 26.5418 7.64044 26.7427 7.34474C26.9436 7.04905 27.2291 6.8186 27.5632 6.68257C27.8972 6.54653 28.2648 6.511 28.6194 6.58049C28.974 6.64997 29.2997 6.82134 29.5552 7.07292C29.7263 7.23901 29.8622 7.43688 29.9549 7.65503C30.0476 7.87319 30.0954 8.1073 30.0954 8.34375C30.0954 8.58021 30.0476 8.81432 29.9549 9.03248C29.8622 9.25063 29.7263 9.4485 29.5552 9.61459Z' fill='%23EF6C05'/%3E %3Cpath d='M15.4288 32.5104C15.1732 32.762 14.8475 32.9334 14.4929 33.0029C14.1384 33.0724 13.7708 33.0368 13.4367 32.9008C13.1027 32.7647 12.8171 32.5343 12.6162 32.2386C12.4153 31.9429 12.3081 31.5952 12.3081 31.2396C12.3081 30.8839 12.4153 30.5363 12.6162 30.2406C12.8171 29.9449 13.1027 29.7144 13.4367 29.5784C13.7708 29.4424 14.1384 29.4068 14.4929 29.4763C14.8475 29.5458 15.1732 29.7172 15.4288 29.9688C15.5999 30.1349 15.7357 30.3327 15.8284 30.5509C15.9212 30.769 15.9689 31.0031 15.9689 31.2396C15.9689 31.4761 15.9212 31.7102 15.8284 31.9283C15.7357 32.1465 15.5999 32.3443 15.4288 32.5104Z' fill='%230092CB'/%3E %3Cpath d='M35.6548 21.6146C35.3993 21.8662 35.0736 22.0375 34.719 22.107C34.3644 22.1765 33.9969 22.141 33.6628 22.0049C33.3287 21.8689 33.0432 21.6385 32.8423 21.3428C32.6414 21.0471 32.5342 20.6994 32.5342 20.3438C32.5342 19.9881 32.6414 19.6404 32.8423 19.3447C33.0432 19.049 33.3287 18.8186 33.6628 18.6826C33.9969 18.5465 34.3644 18.511 34.719 18.5805C35.0736 18.65 35.3993 18.8213 35.6548 19.0729C35.8259 19.239 35.9618 19.4369 36.0545 19.655C36.1472 19.8732 36.195 20.1073 36.195 20.3438C36.195 20.5802 36.1472 20.8143 36.0545 21.0325C35.9618 21.2506 35.8259 21.4485 35.6548 21.6146Z' fill='%23F7AA01'/%3E %3Cpath d='M62.5944 18.0729L68.5457 26.4062H64.6064L58.8881 18.4062H53.5086V26.4062H50.0776V3.40625H59.9047C64.8394 3.40625 68.588 6.51042 68.588 10.9062C68.588 14.4479 66.1313 17.1562 62.5944 18.0729ZM53.5086 15.2604H59.4387C62.8062 15.2604 65.0935 13.6146 65.0935 10.9062C65.0935 8.19792 62.8062 6.55208 59.4387 6.55208H53.5086V15.2604Z' fill='%23333333'/%3E %3Cpath d='M75.9582 6.55208V13.1146H88.3479V16.2604H75.9582V23.2604H89.6822V26.4062H72.4849V3.40625H89.6822V6.55208H75.9582Z' fill='%23333333'/%3E %3Cpath d='M94.4053 3.40625H97.8574L111.306 20.8437V3.40625H114.737V26.4062H111.306L97.8574 8.96875V26.4062H94.4264V3.40625H94.4053Z' fill='%23333333'/%3E %3Cpath d='M119.185 22.3854L127.804 15.8229C130.6 13.6562 131.49 12.1354 131.49 10.5312C131.49 8.61457 129.859 7.48957 127.953 7.48957C125.665 7.48957 123.929 8.63541 122.234 10.5312L119.036 7.48957C121.345 4.61457 124.31 3.01041 128.08 3.01041C133.057 3.01041 136.657 6.03124 136.657 10.3437C136.657 13.4271 135.302 15.8021 131.214 18.7187L126.957 21.9687H136.848V26.4271H119.185V22.3854Z' fill='%23333333'/%3E %3Cpath d='M144.959 9.07292L140.978 11.5104L138.966 8.03125L145.976 3.40625H150V26.4062H144.959V9.07292Z' fill='%23333333'/%3E %3Cpath d='M52.3225 33.4271L53.4027 34.9271H52.6826L51.6448 33.4896H50.6706V34.9271H50.0564V30.7812H51.8354C52.7249 30.7812 53.4027 31.3437 53.4027 32.1354C53.3998 32.4397 53.2911 32.7339 53.0946 32.9689C52.898 33.204 52.6256 33.3657 52.3225 33.4271ZM50.6918 32.9271H51.7507C52.3649 32.9271 52.7673 32.6354 52.7673 32.1354C52.7673 31.6354 52.3649 31.3437 51.7507 31.3437H50.6918V32.9271Z' fill='%23333333'/%3E %3Cpath d='M57.7868 31.3438V32.5313H60.0106V33.0938H57.7868V34.3438H60.2647V34.9063H57.1726V30.7604H60.2647V31.3229H57.7868V31.3438Z' fill='%23333333'/%3E %3Cpath d='M64.1829 30.7812H64.797L67.2115 33.9271V30.7812H67.8256V34.9271H67.2115L64.797 31.7813V34.9271H64.1829V30.7812Z' fill='%23333333'/%3E %3Cpath d='M72.506 31.3438V32.5313H74.7298V33.0938H72.506V34.3438H74.984V34.9063H71.8918V30.7604H74.984V31.3229H72.506V31.3438Z' fill='%23333333'/%3E %3Cpath d='M78.5632 30.7812H79.241L80.2787 33.9479L81.3377 30.7812H82.0154L83.0744 33.9479L84.1121 30.7812H84.7898L83.4132 34.9271H82.799L81.6977 31.6354L80.5752 34.9271H79.961L78.5632 30.7812Z' fill='%23333333'/%3E %3Cpath d='M91.2072 34.0938H89.0046L88.6445 34.9479H87.9668L89.7882 30.8021H90.4659L92.2661 34.9479H91.5884L91.2072 34.0938ZM90.9742 33.5313L90.1059 31.5729L89.2587 33.5313H90.9742Z' fill='%23333333'/%3E %3Cpath d='M96.0146 30.7812H98.0055C98.7044 30.7812 99.2127 31.2187 99.2127 31.8229C99.2172 32.0163 99.1632 32.2066 99.0576 32.3698C98.9521 32.533 98.7996 32.6617 98.6197 32.7396C99.1068 32.9688 99.4033 33.3437 99.4033 33.8021C99.4033 34.4687 98.8526 34.9271 98.1114 34.9271H96.0358V30.7812H96.0146ZM97.8572 32.5104C98.2808 32.5104 98.5773 32.2604 98.5773 31.9271C98.5717 31.8404 98.5485 31.7557 98.509 31.678C98.4695 31.6004 98.4146 31.5313 98.3474 31.4749C98.2802 31.4186 98.2022 31.3761 98.118 31.35C98.0338 31.3238 97.9451 31.3146 97.8572 31.3229H96.6288V32.5104H97.8572ZM97.9631 34.3854C98.4291 34.3854 98.7679 34.0937 98.7679 33.6979C98.7679 33.3021 98.4291 33.0104 97.9631 33.0104H96.65V34.3854H97.9631Z' fill='%23333333'/%3E %3Cpath d='M106.032 34.3646V34.9271H103.173V30.7812H103.788V34.3646H106.032Z' fill='%23333333'/%3E %3Cpath d='M110.374 31.3438V32.5313H112.598V33.0938H110.374V34.3438H112.852V34.9063H109.76V30.7604H112.852V31.3229H110.374V31.3438Z' fill='%23333333'/%3E %3Cpath d='M116.452 34.3229L116.834 33.8646C117.012 34.0476 117.225 34.1936 117.462 34.2938C117.698 34.394 117.953 34.4464 118.21 34.4479C118.782 34.4479 119.1 34.1354 119.1 33.8229C119.1 33.4271 118.761 33.2813 118.041 33.1146C117.172 32.9063 116.601 32.6563 116.601 31.9063C116.601 31.2188 117.215 30.6771 118.062 30.6771C118.635 30.6676 119.189 30.8767 119.608 31.2604L119.248 31.7188C118.921 31.4136 118.492 31.2359 118.041 31.2188C117.575 31.2188 117.236 31.5104 117.236 31.8438C117.236 32.2396 117.596 32.3646 118.295 32.5313C119.142 32.7188 119.714 33.0104 119.714 33.7396C119.714 34.4688 119.184 34.9688 118.189 34.9688C117.87 34.9888 117.549 34.9415 117.25 34.8302C116.95 34.7188 116.679 34.5459 116.452 34.3229Z' fill='%23333333'/%3E %3Cpath d='M128.418 30.7812H129.033L131.447 33.9271V30.7812H132.061V34.9271H131.447L129.033 31.7813V34.9271H128.418V30.7812Z' fill='%23333333'/%3E %3Cpath d='M135.979 32.8438C135.979 32.4194 136.107 32.0045 136.347 31.6516C136.587 31.2987 136.928 31.0237 137.326 30.8613C137.725 30.6989 138.163 30.6564 138.587 30.7392C139.01 30.822 139.398 31.0263 139.703 31.3264C140.009 31.6265 140.216 32.0089 140.3 32.4251C140.385 32.8414 140.341 33.2728 140.176 33.6649C140.011 34.057 139.732 34.3922 139.373 34.628C139.014 34.8638 138.592 34.9896 138.161 34.9896C137.584 34.9831 137.033 34.7549 136.626 34.3539C136.218 33.9529 135.986 33.4109 135.979 32.8438ZM139.707 32.8438C139.695 32.5453 139.594 32.257 139.417 32.0146C139.239 31.7722 138.993 31.5864 138.709 31.4804C138.426 31.3744 138.116 31.3529 137.82 31.4184C137.524 31.484 137.254 31.6338 137.043 31.8492C136.833 32.0646 136.692 32.3361 136.637 32.6299C136.582 32.9237 136.617 33.2268 136.736 33.5015C136.855 33.7763 137.054 34.0105 137.307 34.1751C137.56 34.3396 137.857 34.4273 138.161 34.4271C138.368 34.4241 138.573 34.3807 138.764 34.2993C138.954 34.2179 139.126 34.1002 139.27 33.9529C139.414 33.8057 139.526 33.6318 139.601 33.4414C139.676 33.251 139.712 33.0479 139.707 32.8438Z' fill='%23333333'/%3E %3Cpath d='M143.752 30.7812H144.43L145.468 33.9479L146.527 30.7812H147.204L148.263 33.9479L149.301 30.7812H149.979L148.602 34.9271H147.988L146.887 31.6354L145.764 34.9271H145.15L143.752 30.7812Z' fill='%23333333'/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0_4_421'%3E %3Crect width='150' height='35' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E");
            background-position: center center;
        }

@media screen and (max-width: 979px) {

header.header .pre-header #logo {
                width: 200px;
                height: 32px
        }
            }

header.header .main-header {
        background-color: #f6f6f6;
    }

header.header .main-header:before {
            content: "";
            z-index: -1;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

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

header.header .main-header {
            padding-top: 4px
    }
        }

header.header .main-header .col-left {
            display: grid;
            justify-items: start;
            align-items: center;
        }

header.header .main-header .col-center {
            display: grid;
            justify-items: center;
            align-items: center;
        }

header.header .main-header .col-right {
            display: grid;
            justify-items: end;
            align-items: center;
        }

header.header .header-menus {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
    }

/* level 1 */

header.header ul {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

header.header ul li.nav-item.disabled a {
                    pointer-events: none;
                    color: #a3a3a3;
                }

header.header ul li.nav-item.disabled a.panel-header {
                    color: #000;
                }

header.header ul li.nav-item.disabled .thumb-link a img {
                            -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
                            filter: grayscale(100%);
                        }

header.header ul li.nav-item a {
                display: flex;
                justify-content: center;
                align-items: center;

                font-family: var(--narrow-font), var(--font-fallback);
                font-size: 1.4rem;

                padding: 0px var(--smallgutter);

                height: 24px;

                min-height: 48px;
                border-radius: 4px 4px 0 0;
            }

header.header ul li.nav-item:hover > a {
                color: var(--color-nav-active);
                background-color: var(--color-fond);
            }

header.header ul li.nav-item.current > a {
                color: var(--color-nav-current);
                background-color: var(--color-fond);
            }

/* level 2 */

header.header ul ul.sub-nav {
            width: 100%;

            gap: 16px;
        }

header.header ul ul.sub-nav li.nav-item, header.header ul ul.sub-nav li {
                width: 100%;
            }

header.header ul ul.sub-nav li.nav-item a, header.header ul ul.sub-nav li a {
                    padding: 0;
                    justify-content: flex-start;

                    border-radius: 0;
                    height: auto;
                    min-height: 0;

                    font-size: 1.2rem;
                }

header.header ul ul.sub-nav li.nav-item.disabled a, header.header ul ul.sub-nav li.disabled a {
                    pointer-events: none;
                    color: #a3a3a3;
                }

header.header ul ul.sub-nav li.nav-item:hover a, header.header ul ul.sub-nav li:hover a {
                    }

/* level 3 */

header.header ul ul.sub-nav ul li:hover a {
                        }

header.header li.panel {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: var(--gutter);
    }

header.header li.panel .panel-intro {
            min-width: 300px;
        }

header.header li.panel .panel-header {
            display: block;
            font-size: 1.6rem;
            margin-bottom: 0.5em;
            font-weight: 600;
        }

header.header li.panel p {
            font-size: 1.1rem;
        }

header.header ul.tiles {
        min-width: 300px;
    }

header.header ul.tiles li a {
                margin-bottom: 0px;
            }

/* First level input nav toggle */

header.header label.mobile-nav-label {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0 var(--smallgutter);
        gap: 12px;
    }

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

header.header label.mobile-nav-label a {
            padding: 0;
        }

header.header label.mobile-nav-label:hover {
            color: var(--color-nav-active);
            background-color: var(--color-fond);
            border-radius: 4px 4px 0 0;
        }

header.header input.mobile-nav-toggle {
        display: none;
    }

/* Second level input nav toggle */

header.header label.mobile-subnav-label {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        gap: 12px;

        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #a3a3a3;
    }

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

header.header label.mobile-subnav-label a {
            margin: 0;
            padding: 0;
            order: 1;

            font-weight: bold;
        }

header.header label.mobile-subnav-label i {
            order: 2;
        }

header.header label.mobile-subnav-label:hover {
            color: var(--color-nav-active);
            background-color: var(--color-fond);
            border-radius: 4px 4px 0 0;
        }

header.header input.mobile-subnav-toggle {
        display: none;
    }

header.header .mobile-subnav-toggle {
        pointer-events: none;
    }

@media screen and (max-width: 979px) {

header.header .mobile-subnav-toggle {
            pointer-events: all;
            padding: 0
    }
        }

header.header .mobile-subnav-toggle:checked {
    }

header.header .mobile-subnav-toggle:checked + ul {
        display: flex !important;
    }

header.header #toc-nav {
        display: flex;
        align-items: stretch;
        --color-fond: #ececec;
    }

header.header #toc-nav .nav-icon {

            display: flex;
            flex-direction: row;
            justify-content: center;
        }

header.header #toc-nav .nav-icon:before {
                font-size: 24px;
                margin-right: 5px;
            }

header.header #toc-nav .toggle-icon {

            display: flex;
            flex-direction: row;
            justify-content: center;
        }

header.header #toc-nav .toggle-icon:before {
                font-size: 24px;
                margin-right: 5px;
            }

header.header #toc-nav ul li.nav-item a {
                    font-size: 1.2rem;
                }

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

header.header #toc-nav ul li.nav-item:hover .drawer {
                            transform: translateY(0%);

                            box-shadow:
                                rgba(0, 0, 0, 0.07) 0px 1px 2px,
                                rgba(0, 0, 0, 0.07) 0px 2px 4px,
                                rgba(0, 0, 0, 0.07) 0px 4px 8px,
                                rgba(0, 0, 0, 0.07) 0px 8px 16px,
                                rgba(0, 0, 0, 0.07) 0px 16px 32px,
                                rgba(0, 0, 0, 0.07) 0px 32px 64px
                    }
                        }

header.header #toc-nav ul li.nav-item label.mobile-nav-label i {
                        order: 2;
                    }

header.header #toc-nav ul li.nav-item label.mobile-nav-label a {
                        padding: 0;
                        order: 1;
                    }

header.header #toc-nav ul li.nav-item #home-check {
                    pointer-events: none;
                }

@media screen and (max-width: 979px) {

header.header #toc-nav ul li.nav-item #home-check {
                        pointer-events: all;
                        padding: 0
                }
                    }

header.header #toc-nav ul li.nav-item #home-check:checked {
                }

header.header #toc-nav ul li.nav-item #home-check:checked + .drawer {
                    transform: translateY(0%) !important;
                }

header.header #toc-nav ul li.nav-item .drawer {

                    padding: var(--smallgutter) 0 var(--gutter) 0;
                }

@media screen and (max-width: 979px) {

header.header #toc-nav ul li.nav-item .drawer {
                        padding: 0;
                }
                    }

header.header #toc-nav ul li.nav-item .drawer .wrapper {
                        display: grid;
                        grid-template-columns: repeat(4, minmax(0, 1fr));
                    }

@media screen and (max-width: 979px) {

header.header #toc-nav ul li.nav-item .drawer .wrapper {
                            display: flex;
                            flex-direction: column
                    }
                        }

header.header #toc-nav ul li.nav-item .sub-nav {
                    display: flex;
                    flex-direction: column;

                    padding: var(--smallgutter);
                    border-radius: 6px;
                }

@media screen and (max-width: 979px) {

header.header #toc-nav ul li.nav-item .sub-nav#toc-esvc {
                            display: none
                    }
                        }

@media screen and (max-width: 979px) {

header.header #toc-nav ul li.nav-item .sub-nav {
                        padding: 12px var(--smallgutter);
                        border-radius: 0
                }
                    }

header.header #toc-nav ul li.nav-item .sub-nav a {
                    }

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

header.header #toc-nav ul li.nav-item .sub-nav li:hover {
                                background-color: #fff !important;
                                outline: 6px solid #fff;
                                border-radius: 0.1px;
                                border: none
                        }
                            }

header.header #toc-nav ul li.nav-item .sub-nav li a.soon {
                            display: flex;
                            justify-content: space-between;
                            gap: 5px;

                            color: #a3a3a3;
                        }

header.header #toc-nav ul li.nav-item .sub-nav li a.soon span {
                                font-size: 1rem;
                                text-align: right;
                                font-weight: normal;
                                line-height: 100%;
                            }

header.header #toc-nav ul li.nav-item .sub-nav li ul {
                            display: flex;
                            flex-direction: column;
                            gap: 12px;
                        }

@media screen and (max-width: 979px) {

header.header #toc-nav ul li.nav-item .sub-nav li ul {
                                display: none
                        }
                            }

header.header #toc-nav ul li.nav-item .sub-nav li ul a {
                                font-weight: normal;
                                border-bottom: none;
                                margin: 0px;
                                padding: 0px;
                            }

header.header #main-nav {
        --color-fond: #ececec;

        display: flex;
        align-items: stretch;
    }

@media screen and (max-width: 979px) {

header.header #main-nav {
            display: none
    }
        }

header.header #main-nav ul {
            display: flex;
            flex-direction: row;
        }

header.header #main-nav ul li.nav-item {
                display: flex;
                align-items: stretch;
            }

header.header #main-nav ul li.nav-item .drawer {
                    padding: var(--gutter) var(--smallgutter);
                }

header.header #main-nav ul li.nav-item:hover .drawer {
                        transform: translateY(0%) !important;
                        border-radius: 0 0 6px 6px;
                    }

header.header #main-nav ul li.nav-item#nav-item-go {
                    position: relative;
                }

header.header #main-nav ul li.nav-item#nav-item-go .drawer {
                        width: 720px;
                    }

header.header #main-nav ul li.nav-item#nav-item-go li.panel {
                    }

header.header #main-nav ul li.nav-item#nav-item-go ul.sub-nav ul.tiles {
                            border-left: 1px solid #dedede;
                            flex-direction: column;
                            padding-left: var(--gutter);
                            gap: 12px;
                        }

header.header #main-nav ul li.nav-item#nav-item-sectors .drawer {
                        padding: var(--gutter) var(--smallgutter);
                    }

header.header #main-nav ul li.nav-item#nav-item-sectors ul.sub-nav li:hover {
                            outline: none;
                            border-radius: 0;
                        }

header.header #main-nav ul li.nav-item#nav-item-sectors ul.sub-nav ul.tiles {
                            display: grid;
                            grid-template-columns: repeat(4, minmax(0, 1fr));
                            gap: var(--smallgutter);
                        }

header.header #main-nav ul li.nav-item#nav-item-tech .drawer {
                        padding: var(--gutter) var(--smallgutter);
                    }

header.header #main-nav ul li.nav-item#nav-item-tech ul.sub-nav {
                        width: 100%;
                    }

header.header #main-nav ul li.nav-item#nav-item-tech ul.sub-nav ul.tiles {
                            display: grid;
                            grid-template-columns: repeat(4, minmax(0, 1fr));
                            gap: var(--smallgutter);
                        }

header.header #main-nav ul li.nav-item#nav-item-cases .drawer {
                        padding: var(--gutter) var(--smallgutter);
                    }

header.header #main-nav ul li.nav-item#nav-item-cases ul.sub-nav {
                        width: 100%;
                    }

header.header #main-nav ul li.nav-item#nav-item-cases ul.sub-nav ul.tiles {
                            display: grid;
                            grid-template-columns: repeat(4, minmax(0, 1fr));
                            gap: var(--smallgutter);
                        }

header.header #main-nav ul li.nav-item#nav-item-cases .thumb-link a img {
                                aspect-ratio: 1/1;
                            }

header.header #main-nav ul ul.section-nav {
                display: none;
            }

header.header #search-nav {
        --color-fond: #ececec;
    }

header.header #search-nav .search-icon {

            display: flex;
            flex-direction: row;
            justify-content: center;
        }

header.header #search-nav .search-icon:before {
                font-size: 24px;
                margin-left: 5px;
            }

header.header #search-nav ul {
            display: flex;
            flex-direction: row;
        }

header.header #search-nav ul li.nav-item {
                display: flex;
                align-items: stretch;
            }

header.header #search-nav ul li.nav-item a {
                    font-size: 1.2rem;
                }

header.header #search-nav ul li.nav-item label.mobile-nav-label i {
                        order: 2;
                    }

header.header #search-nav ul li.nav-item label.mobile-nav-label a {
                        padding: 0;
                        order: 1;
                    }

header.header #search-nav ul li.nav-item #search-check {
                    pointer-events: none;
                }

@media screen and (max-width: 979px) {

header.header #search-nav ul li.nav-item #search-check {
                        pointer-events: all;
                        padding: 0
                }
                    }

header.header #search-nav ul li.nav-item #search-check:checked {
                }

header.header #search-nav ul li.nav-item #search-check:checked + .drawer {
                    transform: translateY(0%) !important;
                }

header.header #search-nav ul li.nav-item .drawer {

                    padding: var(--gutter) var(--smallgutter);
                }

header.header #search-nav ul li.nav-item:hover .drawer {

                        border-radius: 0 0 6px 6px;
                    }

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

header.header #search-nav ul li.nav-item:hover .drawer {
                            transform: translateY(0%) !important;
                            box-shadow:
                                rgba(0, 0, 0, 0.07) 0px 1px 2px,
                                rgba(0, 0, 0, 0.07) 0px 2px 4px,
                                rgba(0, 0, 0, 0.07) 0px 4px 8px,
                                rgba(0, 0, 0, 0.07) 0px 8px 16px,
                                rgba(0, 0, 0, 0.07) 0px 16px 32px,
                                rgba(0, 0, 0, 0.07) 0px 32px 64px;
                    }
                        }

.thumb-link.disabled:hover a {
            outline: none !important;
        }

.thumb-link.disabled a {
            pointer-events: none;
        }

.thumb-link.disabled a img {
                -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
                filter: grayscale(100%);
                opacity: 0.5;
            }

.thumb-link a {
        display: block;
        position: relative;
        border-radius: 2px !important;
        overflow: hidden;
    }

.thumb-link a img {
            object-fit: cover;
            width: 100%;
            height: 100%;

            margin: 0;
            display: block;

            aspect-ratio: 1/1;

            transition: transform 0.25s var(--crawl-ease);
            transition-duration: 0.2s;
            backface-visibility: hidden;
        }

.thumb-link a:hover img {
                transform: perspective(1px) scale(1.05);
                transition-duration: 0.75s;
            }

.thumb-link a:hover .thumb-title span {
                transform: perspective(1px) scale(1.2);
                transition-duration: 0.75s;
            }

.thumb-link a .thumb-title {
            position: absolute;

            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;

            width: 100%;
            height: 100%;

            display: flex;
            align-items: center;
            justify-content: center;

            backface-visibility: hidden;
        }

.thumb-link a .thumb-title span {
                display: block;

                background-color: #fff;
                color: #000;
                font-weight: bold;
                padding: 0.5em 1em;
                border-radius: 2px;

                text-transform: uppercase;
                text-align: center;

                transition: transform 0.25s var(--crawl-ease);
            }

footer {
    margin-top: 180px;

    font-size: 1rem;
}

@media screen and (max-width: 979px) {

footer {
        margin-top: 40px
}
    }

footer .citation {
        background-color: #f6f6f6;
    }

footer .citation .wrapper {
            padding: var(--gutter);
        }

footer .citation p {
            margin: 0;
        }

footer .footer-cols {
        background-color: var(--color-primary);

        padding: var(--gutter) 0;
    }

@media screen and (max-width: 979px) {

footer .footer-cols {
            padding-bottom: 80px
    }
        }

footer .footer-cols .col:last-child {
            text-align: right;
        }

footer .footer-nav {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

@media screen and (max-width: 979px) {

footer .footer-nav {
            justify-content: center
    }
        }

@media screen and (max-width: 979px) {

footer .col {
            text-align: center !important
    }
        }

footer .row .col:first-child, footer .row .col:last-child {
        padding: 0;
    }

figure.img, figure.svg {
    margin: 0;

    width: 100%;
    position: relative;

    display: inline-block;
}

@media screen and (max-width: 979px) {

figure.img, figure.svg {
        --cap-offset: -22px
}
    }

figure.img picture, figure.svg picture {
        display: block;
    }

figure.img img, figure.svg img {
        display: block;
        position: relative;
        z-index: 20;

        width: 100%;
        height: auto;
    }

figure.img img.lazyloaded, figure.svg img.lazyloaded {
        }

figure.img figcaption, figure.svg figcaption {
        padding: 4px 8px;
        color: #fff;
        opacity: 0.5;
        position: absolute;
        bottom: 0px;
        right: 0px;
        z-index: 30;
        font-size: 0.8rem;
    }

.portrait-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 20px;
}

.portrait-box figure.img {
        max-width: 200px;
        height: auto;
    }

.portrait-box p {
        text-align: right;
    }

.double-image {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.double-image figure.img {
        width: 30%;
    }

.center-image {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.center-image figure.img {
        width: 40%;
    }

.side-image {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.side-image figure.img {
        width: 40%;
    }

.float-image {
    width: 50%;
    display: inline;
    float: left;
}

.float-image figure.img {
        margin-bottom: 20px;
    }

#share-box {
    --social-size: 40px;
    position: absolute;

    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text);
}

@media screen and (max-width: 979px) {

#share-box {
        position: relative
}
    }

#share-box i:before {
            font-size: 24px;
        }

#share-box:hover #shariff-standin {
            display: flex;
        }

#share-box:hover .share-label .via {
                display: inline;
            }

#share-box .wrapper {
        display: flex;

        z-index: 100;
        top: 0px;
        right: var(--social-size);
    }

#share-box .share-label {
        padding-right: 10px;
        width: 100px;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        font-size: 1rem;
    }

#share-box .share-label .via {
            display: none;
        }

@media screen and (max-width: 979px) {

#share-box .share-label {
            display: none
    }
        }

#share-box #shariff-standin {
        padding: 0px;

        display: none;
        align-items: stretch;
    }

#share-box #shariff-standin ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
        }

#share-box #shariff-standin ul li.shariff-button {
                margin: 0;
                margin-right: 2px;
                padding: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 0;

                color: #fff;
            }

#share-box #shariff-standin ul li.shariff-button a {
                    display: flex;
                    width: var(--social-size);
                    height: var(--social-size);
                    align-items: center;
                    justify-content: center;
                }

#share-box #shariff-standin ul li.shariff-button .fab, #share-box #shariff-standin ul li.shariff-button .fas {
                    color: #fff;
                    display: block;
                }

#share-box #shariff-standin ul li.shariff-button .fab:before, #share-box #shariff-standin ul li.shariff-button .fas:before {
                        color: #fff;
                    }

#share-box #shariff-standin ul li.shariff-button .share_text {
                    display: none;
                }

#share-box #shariff-standin ul li.shariff-button.twitter {
                    background-color: #55acee;
                }

#share-box #shariff-standin ul li.shariff-button.facebook {
                    background-color: #3b5998;
                }

#share-box #shariff-standin ul li.shariff-button.linkedin {
                    background-color: #007bb5;
                }

#share-box #shariff-standin ul li.shariff-button.xing {
                    background-color: #126567;
                }

#share-box #shariff-standin ul li.shariff-button.whatsapp {
                    background-color: #4dc247;
                }

#share-box #shariff-standin ul li.shariff-button.mail {
                    background-color: #cc4830;
                }

#share-box #shariff-standin ul li.shariff-button.print {
                }

.share {
    background-color: transparent;
    display: block;
    position: absolute;
    z-index: 300;

    width: var(--social-size);
    height: var(--social-size);
    right: 0px;
    bottom: 0px;
    left: auto;
}

.share:hover .trigger:before {
                opacity: 0;
            }

.share:hover .tweet {
            left: var(--social-size);
        }

.share:hover .fb {
            left: var(--social-size);
            top: var(--social-size);
        }

.share:hover .mail {
            top: var(--social-size);
        }

.share .trigger, .share .tweet, .share .fb, .share .mail {
        display: block;

        position: absolute;

        width: var(--social-size);
        height: var(--social-size);

        transition: all 0.2s ease-in-out;
    }

.share .trigger:before, .share .tweet:before, .share .fb:before, .share .mail:before {
            color: #fff;
            width: var(--social-size);
            height: var(--social-size);
        }

.share .trigger {
        background-color: var(--color-primary);
        display: block;
        cursor: se-resize;
        position: absolute;
        z-index: 20;
    }

.figure .share .trigger {
            background-color: #fff;
        }

.figure .share .trigger:before {
                color: var(--color-separator);
            }

.share .tweet {
        z-index: 10;
        background-color: #1da1f2;
    }

.share .fb {
        z-index: 15;
        background-color: #3b5998;
    }

.share .mail {
        z-index: 8;
        background-color: rgba(204, 72, 48, 1);
    }

.tippy-box[data-animation="fade"][data-state="hidden"] {
    opacity: 0;
}

[data-tippy-root] {
    max-width: calc(100vw - 10px);
}

.tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^="top"] > .tippy-arrow {
    bottom: 0;
}

.tippy-box[data-placement^="top"] > .tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top;
}

.tippy-box[data-placement^="bottom"] > .tippy-arrow {
    top: 0;
}

.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom;
}

.tippy-box[data-placement^="left"] > .tippy-arrow {
    right: 0;
}

.tippy-box[data-placement^="left"] > .tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left;
}

.tippy-box[data-placement^="right"] > .tippy-arrow {
    left: 0;
}

.tippy-box[data-placement^="right"] > .tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right;
}

.tippy-box[data-inertia][data-state="visible"] {
    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333;
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid;
}

.tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1;
}

.tippy-box[data-theme="light"] {
    color: var(--colortext);
    box-shadow: none;
    background-color: #fff;
    border: 2px solid var(--color-meta);
    border-radius: 0;
}

.tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333;
}

.tippy-box[data-theme="light"][data-placement^="top"] > .tippy-arrow:before {
    content: "";
    width: 16px;
    height: 16px;
    transform: rotate(45deg) translate(8px, 0px);
    border-top: none;
    border-bottom: 2px solid var(--color-meta);
    border-right: 2px solid var(--color-meta);
    border-left: none;

    background-color: #fff;
}

.tippy-box[data-theme="light"][data-placement^="bottom"] > .tippy-arrow:before {
    content: "";
    width: 16px;
    height: 16px;
    transform: rotate(45deg) translate(-8px, 0px);
    border-bottom: none;
    border-top: 2px solid var(--color-meta);
    border-left: 2px solid var(--color-meta);
    border-right: none;

    background-color: #fff;
}

.tippy-box[data-theme="light"] > .tippy-backdrop {
    background-color: var(--color-fond);
}

.tippy-box[data-theme="light"] > .tippy-svg-arrow {
    fill: #fff;
}

.tippy-content .tip-link {
        display: flex;

        padding: 6px;

        color: var(--color-text);
    }

.tippy-content .tip-link .map-tip-number {
            font-family: "Oswald", Arial, Helvetica, sans-serif;
            font-variation-settings: "wght" 520;
            font-size: 2rem;
            line-height: 1em;
            margin-right: 0.4em;
        }

.tippy-content .tip-link .map-tip-title {
            font-family: "Oswald", Arial, Helvetica, sans-serif;
            font-variation-settings: "wght" 320;
            font-size: 2rem;
            line-height: 1em;
        }

.tippy-content .tip-link .map-tip-location {
        }

.tippy-content a {
        word-break: break-all;
    }

.tippy-content .data-0 {
        display: block;
        text-align: center;
    }

.tippy-content .data-1 {
        display: none;
    }

.tippy-content .data-2 {
        display: block;
        font-size: 16px;
        text-align: center;
    }

.tippy-box[data-theme="map"] {
    --tippy-back: #585858;
    --tippy-text: #dedede;

    box-shadow: none;
    background-color: var(--tippy-back);
    color: var(--tippy-text);
    border: none;
    border-radius: 4px;

    padding: 12px;
    min-width: 200px;

    font-size: 1rem;
    line-height: 1.2em;

    box-shadow:
        rgba(0, 0, 0, 0.07) 0px 1px 1px,
        rgba(0, 0, 0, 0.07) 0px 2px 2px,
        rgba(0, 0, 0, 0.07) 0px 4px 4px,
        rgba(0, 0, 0, 0.07) 0px 8px 8px,
        rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.tippy-box[data-theme="map"] .tippy-content {
        width: 100%;
        padding: 0;
    }

.tippy-box[data-theme="map"] .tippy-arrow {
        width: 10px;
        height: 10px;
        color: var(--tippy-back);
    }

.tippy-box[data-theme="map"] .data-0 {
        padding: 3px 4px;
    }

.tippy-box[data-theme="map"] .data-2 {
        padding: 3px 4px;
        font-size: 3rem;
        font-variation-settings: "wght" 340;
        font-family: "Oswald";
    }

.tippy-box[data-theme="map"] .fi {
        aspect-ratio: 4/3;
        width: 100%;
        border-bottom: 1px solid var(--tippy-back);
    }

.tippy-box[data-theme="map"] .tip-head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;

        text-transform: uppercase;
        font-size: 1.8rem;
        font-weight: 200;

        line-height: 100%;

        padding-bottom: 6px;
        margin-bottom: 5px;
        border-bottom: 1px solid #b1b1b1;
    }

.tippy-box[data-theme="map"] .tip-thumb {
        margin: -12px -12px 10px -12px;
    }

.tippy-box[data-theme="map"] .tip-thumb img {
            width: 100%;
            height: auto;
            aspect-ratio: 16/9;
            object-fit: cover;
        }

.tippy-box[data-theme="map"] .tip-thumb .thumb-title {
            display: none;
        }

.tippy-box[data-theme="map"] .tip-footer {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.tippy-box[data-theme="map"] .tip-footer .btn {
        }

.tippy-box[data-theme="map"] .flag {
        aspect-ratio: 4/3;
        height: 28px;
        width: auto;
    }

.tippy-box[data-theme="map"] dl {
        margin: 0;
        display: grid;
        grid-template-columns: 1fr auto;
    }

.tippy-box[data-theme="map"] dl dt {
            font-weight: 500;
            text-align: right;
            padding-right: 5px;

            color: #dadada;
        }

.tippy-box[data-theme="map"] dl dd {
            padding: 0;
            margin: 0;
            padding-left: 5px;

            color: #fff;
        }

.tippy-box[data-theme="map"] dl dd.large-number {
                white-space: nowrap;
                font-size: 2.5rem;
                font-family: var(--narrow-font), var(--font-fallback);
                line-height: 100%;
                font-weight: 200;
            }

.tippy-box[data-theme="map"] dl dd.large-number .unit {
                    font-size: 1.5rem;
                    font-weight: 400;
                }

.tippy-box[data-theme="map"] dl dd a {
                display: inline-block;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 220px;
            }

.tippy-box[data-theme="map"] dl dt, .tippy-box[data-theme="map"] dl dd {
            padding-top: 6px;
            padding-bottom: 8px;
            border-bottom: 1px solid #6f6d6d;
        }

.tippy-box[data-theme="map"] dl dt:last-child, .tippy-box[data-theme="map"] dl dt:nth-last-child(2), .tippy-box[data-theme="map"] dl dd:last-child, .tippy-box[data-theme="map"] dl dd:nth-last-child(2) {
                border-bottom: none;
            }

.tippy-box[data-theme="map"] > .tippy-backdrop {
    background-color: var(--color-fond);
}

.tippy-box[data-theme="map"] > .tippy-svg-arrow {
    fill: #fff;
}

.tippy-box[data-theme="map"][data-placement^="top"] > .tippy-arrow:before {
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(45deg) translate(3px, -2px);
    border-top: none;
    border-bottom: 1px solid var(--color-meta);
    border-right: 1px solid var(--color-meta);
    border-left: none;

    background-color: var(--tippy-back);
}

.tippy-box[data-theme="notes"] {
    --tippy-back: #585858;
    --tippy-text: #dedede;

    box-shadow: none;
    background-color: var(--tippy-back);
    color: var(--tippy-text);
    border: none;
    border-radius: 4px;

    padding: 12px;
    width: auto;

    max-width: 640px;

    font-family: var(--copy-font), var(--font-fallback);

    font-size: 1rem;
    line-height: 1.4em;

    box-shadow:
        rgba(0, 0, 0, 0.07) 0px 1px 1px,
        rgba(0, 0, 0, 0.07) 0px 2px 2px,
        rgba(0, 0, 0, 0.07) 0px 4px 4px,
        rgba(0, 0, 0, 0.07) 0px 8px 8px,
        rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.tippy-box[data-theme="notes"] .tippy-content {
        width: 100%;
        padding: 0;
    }

.tippy-box[data-theme="notes"] .tippy-content a {
            margin: 0;
            text-decoration: underline;
        }

.tippy-box[data-theme="notes"] .tippy-content a.Endnote-Target {
            display: none;
        }

.tippy-box[data-theme="notes"] .tippy-arrow {
        width: 10px;
        height: 10px;
        color: var(--tippy-back);
    }

.tippy-box[data-theme="notes"] .fi {
        aspect-ratio: 4/3;
        width: 100%;
        border-bottom: 1px solid var(--tippy-back);
    }

.tippy-box[data-theme="notes"] > .tippy-backdrop {
    background-color: var(--color-fond);
}

.tippy-box[data-theme="notes"] > .tippy-svg-arrow {
    fill: #fff;
}

body.figure-standalone {
    min-height: 100vh;

    --gutter: 20px;

    padding: 0px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

body.figure-standalone main {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

body.figure-standalone .figure-container {
        width: 100%;
        margin: var(--gutter);
    }

body.figure-standalone .figure-body img {
            max-height: 100%;
        }

body.figure-standalone footer {
        margin-top: auto;
    }

body.figure-standalone footer .citation {
            background-color: #f6f6f6;
        }

body.figure-standalone footer .citation .wrapper {
                max-width: 100%;
                padding: var(--gutter);
                padding-bottom: 10px;
            }

body.figure-standalone footer .footer-cols {
            padding: 0;
            background-color: #f6f6f6;
        }

body.figure-standalone footer .footer-cols .wrapper {
                max-width: 100%;
                padding: var(--gutter);
                padding-top: 0;
            }

figure {
    scroll-margin-top: 90px;
    clear: both;
}

/* Ensure the main container div allows content to size */

.figure-container {
    --border-color: #a0a0a0;
    --color-neutral: #7a7a7a;

    width: 100%; /* Or whatever width it should occupy */
    margin: var(--gutter) 0;
}

/* Ensure it doesn't have a fixed height smaller than the map needs */

.figure-container.type-map {
    }

.figure-container.type-figure .figure-wrapper {
            box-shadow:
                rgba(0, 0, 0, 0.1) 0px 10px 10px -5px,
                rgba(0, 0, 0, 0.04) 0px 10px 5px -5px;

            border-radius: 3px;
        }

.figure-container .figure-wrapper {
        margin: 0 auto;
        max-width: var(--max-content);
        position: relative;
    }

.figure-svg-container {
    border: 1px solid var(--border-color);
    background-color: #fff;
    /*   border-top: none; */
    border-radius: 3px 3px 0 0;
    border-bottom: none;
}

.figure-svg-container svg text {
            font-family: var(--narrow-font), var(--font-fallback);
        }

.figure-header {
    margin: 0 auto;
    max-width: var(--max-content);

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5em;
}

.figure-header h4 {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        font-size: 1.4rem;
    }

@media screen and (max-width: 979px) {

.figure-header h4 {
            flex-direction: column
    }
        }

.figure-header .ren-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;

        background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg id='a' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E %3Cpath d='M24.36,43.38c-2.33-2.33-2.33-6.13,0-8.47l12.7-12.7c2.33-2.33,6.13-2.33,8.47,0s2.33,6.13,0,8.47l-12.7,12.7c-2.33,2.33-6.13,2.33-8.47,0Z' fill='%23f39200'/%3E %3Cpath d='M69.38,118.5c-2.33-2.33-2.33-6.13,0-8.47l26-26c2.33-2.33,6.13-2.33,8.47,0s2.33,6.13,0,8.47l-26,26c-2.33,2.33-6.13,2.33-8.47,0Z' fill='%23fcc400'/%3E %3Cpath d='M22.46,75.31c-2.33-2.33-2.33-6.13,0-8.47l48.26-48.26c2.33-2.33,6.13-2.33,8.47,0,2.33,2.33,2.33,6.13,0,8.47l-48.26,48.26c-2.33,2.33-6.13,2.33-8.47,0Z' fill='%2300a3af'/%3E %3Cpath d='M62.92,94.94c-2.33-2.33-2.33-6.13,0-8.47l51.09-51.09c2.33-2.33,6.13-2.33,8.47,0s2.33,6.13,0,8.47l-51.09,51.09c-2.33,2.33-6.13,2.33-8.47,0Z' fill='%234a96d2'/%3E %3Cpath d='M14.99,112.81c-2.33-2.33-2.33-6.13,0-8.47l60.32-60.32c2.33-2.33,6.13-2.33,8.47,0,2.33,2.33,2.33,6.13,0,8.47l-60.32,60.32c-2.33,2.33-6.13,2.33-8.47,0Z' fill='%23d47000'/%3E %3Cpath d='M62.45,13.76c-2.33,2.33-6.13,2.33-8.47,0s-2.33-6.13,0-8.47c2.33-2.33,6.13-2.33,8.47,0,2.33,2.33,2.33,6.13,0,8.47Z' fill='%23f39200'/%3E %3Cpath d='M13.99,92.24c-2.33,2.33-6.13,2.33-8.47,0-2.33-2.33-2.33-6.13,0-8.47,2.33-2.33,6.13-2.33,8.47,0s2.33,6.13,0,8.47Z' fill='%2300a3af'/%3E %3Cpath d='M100.71,35.55c-2.33,2.33-6.13,2.33-8.47,0s-2.33-6.13,0-8.47,6.13-2.33,8.47,0,2.33,6.13,0,8.47Z' fill='%23d47000'/%3E %3Cpath d='M54.35,111.97c-2.33,2.33-6.13,2.33-8.47,0s-2.33-6.13,0-8.47,6.13-2.33,8.47,0,2.33,6.13,0,8.47Z' fill='%234a96d2'/%3E %3Cpath d='M120.77,75.61c-2.33,2.33-6.13,2.33-8.47,0s-2.33-6.13,0-8.47c2.33-2.33,6.13-2.33,8.47,0,2.33,2.33,2.33,6.13,0,8.47Z' fill='%23fcc400'/%3E %3C/svg%3E");
    }

.figure-header .figure-number {
        flex-shrink: 0;
        line-height: 100%;
        font-variation-settings: "wght" 360;
    }

.figure-header .figure-title {
        line-height: 100%;
        font-variation-settings: "wght" 520;
    }

.figure-header .figure-meta {
        font-weight: 300;
        word-break: keep-all;
        white-space: nowrap;
    }

.figure-body img {
        object-fit: contain;
        width: 100%;
        height: auto;
        display: block;

        max-height: 600px;

        border: 1px solid var(--border-color);
        border-radius: 3px 3px 0 0;
        overflow: hidden;
        border-bottom: none;
    }

.figure-footer {
    background-color: #f3f3f3;
    border: 1px solid var(--border-color);
    border-top: none;
    padding: 0px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;

    font-size: 1rem;
    border-radius: 0 0 3px 3px;
}

.figure-footer .figure-source {
        padding: 12px;
    }

.figure-actions {
    display: flex;
    flex-direction: row;
    gap: 6px;

    --social-size: 42px;
}

.figure-actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--social-size);
        height: var(--social-size);
        text-decoration: none;
    }

.figure-actions a:before {
            color: var(--border-color);
        }

.figure-actions .figure-action-export {
        /* display: none;*/
    }

.figure-actions .figure-action-fullscreen:hover:before {
                color: #fca503;
            }

.figure-actions .figure-action-image:hover:before {
                color: rgb(114, 86, 186);
            }

.figure-actions .figure-action-dataset:hover:before {
                color: rgb(42, 153, 83);
            }

.figure-actions .figure-action-share {
        background-color: transparent;
        display: block;
        position: relative;
    }

.figure-actions .figure-action-share:hover .tweet {
                left: var(--social-size);
            }

.figure-actions .figure-action-share:hover .fb {
                left: var(--social-size);
                top: var(--social-size);
            }

.figure-actions .figure-action-share:hover .mail {
                top: var(--social-size);
            }

.figure-actions .figure-action-share .trigger {
            background-color: #f3f3f3;
            position: relative;
            z-index: 20;
            cursor: se-resize;
        }

.figure-actions .figure-action-share .trigger:hover:before {
                    color: rgb(67, 34, 255);
                }

.figure-actions .figure-action-share .tweet, .figure-actions .figure-action-share .fb, .figure-actions .figure-action-share .mail {
            display: block;

            top: 0px;
            left: 0px;

            position: absolute;
            cursor: pointer;

            width: var(--social-size);
            height: var(--social-size);

            transition: all 0.2s ease-in-out;
        }

.figure-actions .figure-action-share .tweet:before, .figure-actions .figure-action-share .fb:before, .figure-actions .figure-action-share .mail:before {
                color: #fff;
                width: var(--social-size);
                height: var(--social-size);
            }

.figure-actions .figure-action-share .tweet {
            z-index: 10;
            background-color: #1da1f2;

            border-radius: 0 4px 0 0;
        }

.figure-actions .figure-action-share .fb {
            z-index: 15;
            background-color: #3b5998;
            border-radius: 0 0 4px 0;
        }

.figure-actions .figure-action-share .mail {
            z-index: 8;
            background-color: rgba(204, 72, 48, 1);
            border-radius: 0 0 0 4px;
        }

.figure-notes {
    margin: 0 auto;
    max-width: var(--max-content);

    margin-top: 12px;
    font-size: 1rem;
    padding: 6px;
}

/* src/maps/target_map/style.css */

/* Style the legend axis text */

.figure-legend .legend-axis .tick text {
    font-size: 14px;
    fill: #555;
}

/* Style the legend title */

.figure-legend .legend-title {
    font-size: 16px;
    font-weight: bold;
    fill: #333;
    text-anchor: start; /* Ensure it's centered */
}

.bars-title {
    font-size: 14px;
    font-weight: bold;
    fill: #333;
    text-anchor: start; /* Ensure it's centered */
}

/* Your map styles */

.figure-elements .country {
    stroke: #fff; /* White borders between countries */
    stroke-width: 0.5px;
}

.figure-elements .country.fog {
        fill: #dedede;
        /* filter: grayscale(1); */
    }

.figure-elements .country.no-data {
    /* Optional: Different style for countries with no data */
    stroke: #eee;
    stroke-dasharray: 1 1; /* Example: Dashed border */
}

/* Radio button basic layout */

.figure-controls {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 3px;

    border-bottom: 1px solid var(--border-color);
}

@media screen and (max-width: 979px) {

.figure-controls {
        display: flex;
        flex-direction: column
}
    }

.figure-controls legend {
    display: none;
}

.figure-controls .radio-item {
    font-size: 0.9em;
    border: 1px solid #efefef;
    border-bottom: 1px solid var(--border-color);
    background-color: #efefef;
    border-radius: 3px 3px 0 0;
    display: flex;
    gap: 5px;
    height: 100%;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;

    transform: translateY(1px);
}

.figure-controls .radio-item label {
    cursor: pointer;
    display: flex;
    padding: 5px;
    gap: 4px;
    flex: 1;

    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media screen and (max-width: 979px) {

.figure-controls .radio-item label {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px
}
    }

.figure-controls .radio-item input {
    margin: 3px;
    display: none;
}

.radio-item:has(input[type="radio"]:checked) {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-bottom: 1px solid #fff;
}

.radio-item:has(input[type="radio"]:checked) .sheet-count {
        color: var(--current-color);
    }

.radio-item:has(input[type="radio"]:checked) .sheet-count:before {
            color: var(--current-color);
        }

.radio-item:has(input[type="radio"]:checked) label .label-text:before {
        color: var(--active-color) !important;
    }

.label-text {
    order: 2;
    text-align: center;
    line-height: 110%;

    font-family: var(--narrow-font), var(--font-fallback);
    font-weight: 500;

    color: var(--color-neutral);
}

.label-text:before {
        color: var(--color-neutral);
    }

@media screen and (max-width: 979px) {

.label-text {
        text-align: left
}
    }

.sheet-count {
    order: 1;
    font-family: var(--narrow-font), var(--font-fallback);

    font-size: 2.2rem;
    font-weight: 300;
    line-height: 100%;

    display: flex;
    flex-direction: row;
    gap: 6px;

    color: var(--color-neutral);
}

.sheet-count:before {
        color: var(--color-neutral);
    }

/* TABBED MAPS */

#figure_2 .figure-svg-container, #figure_6 .figure-svg-container, #figure_5 .figure-svg-container, #figure_7 .figure-svg-container, #figure_8 .figure-svg-container, #figure_17 .figure-svg-container, #figure_25 .figure-svg-container {
        border-top: none;
        border-radius: 0px 0px 0px 0px;
    }

#figure_2 .radio-item:nth-child(2) {
            --active-color: #fcb403;
        }

#figure_2 .radio-item:nth-child(3) {
            --active-color: #2274a2;
        }

#figure_2 .radio-item:nth-child(4) {
            --active-color: #e85417;
        }

#figure_2 .radio-item:nth-child(5) {
            --active-color: #c6bd00;
        }

#figure_8 .radio-item:nth-child(2) {
            --active-color: #e8a03d;
        }

#figure_8 .radio-item:nth-child(3) {
            --active-color: #ff9d00;
        }

#figure_8 .radio-item:nth-child(4) {
            --active-color: #4995d1;
        }

#figure_8 .radio-item:nth-child(5) {
            --active-color: #e85417;
        }

#figure_8 .radio-item:nth-child(6) {
            --active-color: #c6bd00;
        }

#figure_17 .radio-item:nth-child(2) {
            --active-color: #c6bd00;
        }

#figure_17 .radio-item:nth-child(3) {
            --active-color: #ff9d00;
        }

#figure_17 .radio-item:nth-child(4) {
            --active-color: #31bbaf;
        }

#figure_17 .radio-item:nth-child(5) {
            --active-color: #4995d1;
        }

#figure_17 .radio-item:nth-child(6) {
            --active-color: #c6bd00;
        }

#figure_17 .radio-item:nth-child(7) {
            --active-color: #ff9d00;
        }

#figure_17 .radio-item:nth-child(8) {
            --active-color: #e85417;
        }

#figure_17 .figure-svg-container {
        border-top: none;
        border-radius: 0px 0px 3px 3px;
    }

.location-marker {
    stroke-width: 4px;
    stroke-dasharray: 16px;
    stroke-dashoffset: 8px;

    stroke: transparent;
}

.location-dot-group.hovered .location-marker {
        stroke: var(--color-primary);
    }

/* Your activeDotStrokeColor */

.location-dot-group.hovered .location-marker.idle {
            opacity: 0;
        }

.location-dot-group.hovered .location-marker.active {
            opacity: 1;
        }

.location-dot-group.filtered-out {

    /* pointer-events: none; */ /* Optional: if you want them to be non-interactive when filtered out */
}

.location-dot-group.filtered-out .location-marker {
        opacity: 0.25 !important; /* Make them less prominent */
    }

.location-dot-group.active-url-match .location-marker {
        stroke: var(--color-primary);
    }

/* Your activeDotStrokeColor */

.location-dot-group.active-url-match .location-marker.idle {
            opacity: 0;
            stroke: red;
        }

.location-dot-group.active-url-match .location-marker.active {
            opacity: 1;
        }

.location-dot-group.active-url-match.hovered {
}

@keyframes ping-animation {
    0% {
        transform: scale(0.5); /* Start smaller than the dot */
        opacity: 0.8;
        stroke-width: 3px; /* Thicker stroke at the start */
    }
    70% {
        transform: scale(2.5); /* Scale up significantly larger than the dot */
        opacity: 0;
        stroke-width: 0.5px; /* Thinner stroke as it fades */
    }
    100% {
        /* Ensure it resets for the next iteration if needed, though opacity 0 covers it */
        transform: scale(2.5);
        opacity: 0;
        stroke-width: 0.5px;
    }
}

#snapshot-feature {
    background-image: url("../../assets/img/mosaik_map.svg");
    background-size: auto 100%;
    background-position: center center;

    height: calc(var(--max-content) / 10 * 4);
}

#snapshot-feature #snapshot_map {
        height: 560px;
    }

#snapshot_map {
    height: 100%;
}

#snapshot_map figure {
        height: 100%;
        margin: 0;
    }

#snapshot_map .figure-wrapper, #snapshot_map .figure-body {
        height: 100%;
        width: 100%;
    }

#snapshot_map .figure-wrapper {
        display: flex;
        flex-direction: row;
    }

@media screen and (max-width: 979px) {

#snapshot_map .figure-wrapper {
            flex-direction: column
    }
        }

#snapshot_map .figure-body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

#snapshot_map svg {
        height: 100%;
    }

#figure-svg-snapshot_map {
    width: 100%;
}

#figure-svg-snapshot_map .figure-elements .country {
        stroke-width: 0;
    }

#map-controls-snapshot_map {
    width: calc(var(--max-content) / 10 * 3);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;

    padding: var(--gutter);

    background-color: rgba(0, 0, 0, 0.25);
    color: #fff;
}

@media screen and (max-width: 979px) {

#map-controls-snapshot_map {
        width: auto
}
    }

#map-controls-snapshot_map h1, #map-controls-snapshot_map h2, #map-controls-snapshot_map h3 {
        text-transform: uppercase;
    }

#map-controls-snapshot_map .filters {
        display: table;
    }

#map-controls-snapshot_map .filter-field {
        display: table-row;
    }

#map-controls-snapshot_map .filter-field {
        padding: 5px 0;
    }

#map-controls-snapshot_map .filter-field label, #map-controls-snapshot_map .filter-field select {
            display: table-cell;

            box-sizing: border-box;
            padding: 0.25em 0.5em;
            font-size: 1rem;
        }

#map-controls-snapshot_map .filter-field label {
            padding-left: 0;
        }

#map-controls-snapshot_map .filter-field select {
            width: 180px;
        }

#fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    justify-content: center;
    align-items: center;
    padding: var(--gutter);
    margin: 0;
    overflow: hidden;
}

#fullscreen-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

#fullscreen-overlay iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 8px;
        background: white;
    }

#close-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    background: #444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}

#intro-hero {
    position: relative;

    padding-top: calc(var(--max-content) / 10 * 2);

    min-height: calc(var(--max-content) / 10 * 4);
}

@media screen and (max-width: 979px) {

#intro-hero {
        padding-top: 240px
}
    }

#intro-hero .hero-image {
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
        width: 100%;
        min-height: calc(var(--max-content) / 10 * 4);

        background-image: url("../../assets/img/mosaik.svg");
        background-size: cover;
        background-position: center center;
    }

#intro-hero .hero-box {
        position: relative;
        z-index: 20;

        background-color: rgb(242, 242, 242);
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        gap: var(--gutter);

        border-radius: 3px 3px 0 0;

        min-height: 20vh;

        padding: var(--gutter);
    }

@media screen and (max-width: 979px) {

#intro-hero .hero-box {
            flex-direction: column
    }
        }

#intro-hero .hero-box .left-col {
            width: 75%;
        }

#intro-hero .hero-box .left-col p {
                max-width: 800px;
            }

@media screen and (max-width: 979px) {

#intro-hero .hero-box .left-col {
                width: auto
        }
            }

#intro-hero .hero-box .right-col {
            min-width: 240px;
            width: 25%;
        }

@media screen and (max-width: 979px) {

#intro-hero .hero-box .right-col {
                width: auto
        }
            }

#intro-hero .hero-box h1 {
            font-size: 3rem;
        }

@media screen and (max-width: 979px) {

#intro-hero .hero-box h1 {
                font-size: 2rem
        }
            }

#intro-hero .hero-box h2 {
            text-transform: none;
        }

#intro-hero .search-wrap {

        margin-top: 4px;
        background-color: rgb(242, 242, 242);

        border-radius: 0 0 3px 3px;
    }

.hero-shadow {
    position: absolute;

    z-index: 15;
    top: calc(var(--max-content) / 10 * 2);
    left: 50%;
    transform: translateX(-50%);
    width: var(--max-content);
    height: calc(var(--max-content) / 10 * 2);

    box-shadow: rgba(0, 0, 0, 0.2) 0px -20px 30px;
}

ul.download-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

ul.download-list a.download {
        background-color: #fff;
        color: var(--color-nav-active);
    }

ul.download-list a.download i:before {
            color: var(--color-nav-active);

            font-size: 1.75em;
        }

ul.download-list .btn {
        display: flex !important;
    }

#snap-hero {
    background-image: url("../../assets/img/mosaik_map.svg");
    background-size: auto 100%;
    background-position: center center;

    height: calc(var(--max-content) / 10 * 4);
}

#snap-hero .figure-container {
        margin: 0;
    }

#go-hero {
    position: absolute;
    top: var(--pre-header-height);
    left: 0px;
    width: 100%;

    background-size: auto 100%;
    background-position: center center;

    height: calc(var(--max-content) / 10 * 4);
}

@media screen and (max-width: 1279px) {

#go-hero {
        height: 240px
}
    }

#go-hero .hero-image {
        position: absolute;
        top: 0px;
        left: 0px;

        z-index: -1;

        width: 100%;
        height: 100%;
    }

#go-hero .hero-image figure {
            height: 100%;
            width: 100%;
        }

#go-hero .hero-image figure picture {
                display: block;
                height: 100%;
                width: 100%;
            }

#go-hero .hero-image figure img {
                object-fit: cover;
                object-position: center center;
                height: 100%;
                width: 100%;
            }

#go-hero .hero-mosaic {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;

        z-index: 10;

        background-image: url("../../assets/img/go.svg");
        background-size: auto 100%;
        background-position: center center;
    }

@media screen and (max-width: 979px) {

#go-hero .hero-mosaic {
            background-size: cover;
            background-position: left center
    }
        }

#go-hero .hero-shadow {
        box-shadow: none;
    }

#go-hero .figure-container {
        margin: 0;
    }

.lesser-hero {
    position: relative;
    z-index: 20;
}

.lesser-hero h1 {
        font-size: 2em;
        margin-bottom: 2em;
    }

@media screen and (max-width: 979px) {

.lesser-hero h1 {
            font-size: 1.8rem;
            margin-bottom: 0.5em
    }
        }

.tech-hero, .sector-hero {
    position: absolute;
    top: var(--pre-header-height);
    left: 0px;
    width: 100%;

    background-size: auto 100%;
    background-position: center center;

    height: calc(var(--max-content) / 10 * 4);
}

@media screen and (max-width: 1279px) {

.tech-hero, .sector-hero {
        height: 240px
}
    }

.tech-hero .hero-image, .sector-hero .hero-image {
        position: absolute;
        top: 0px;
        left: 0px;

        z-index: -1;

        width: 100%;
        height: 100%;
    }

.tech-hero .hero-image figure, .sector-hero .hero-image figure {
            height: 100%;
            width: 100%;
        }

.tech-hero .hero-image figure picture, .sector-hero .hero-image figure picture {
                display: block;
                height: 100%;
                width: 100%;
            }

.tech-hero .hero-image figure img, .sector-hero .hero-image figure img {
                object-fit: cover;
                object-position: center center;
                height: 100%;
                width: 100%;
            }

.tech-hero .hero-mosaic, .sector-hero .hero-mosaic {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;

        z-index: 10;

        background-image: url("../../assets/img/go.svg");
        background-size: auto 100%;
        background-position: center center;
    }

@media screen and (max-width: 979px) {

.tech-hero .hero-mosaic, .sector-hero .hero-mosaic {
            background-size: cover;
            background-position: left center
    }
        }

.tech-hero#hero-csp .hero-mosaic, .sector-hero#hero-csp .hero-mosaic {
            background-image: url("../../assets/img/csp.svg");
        }

.tech-hero#hero-geo .hero-mosaic, .sector-hero#hero-geo .hero-mosaic {
            background-image: url("../../assets/img/geo.svg");
        }

.tech-hero#hero-hydro .hero-mosaic, .sector-hero#hero-hydro .hero-mosaic {
            background-image: url("../../assets/img/hydro.svg");
        }

.tech-hero#hero-sth .hero-mosaic, .sector-hero#hero-sth .hero-mosaic {
            background-image: url("../../assets/img/sth.svg");
        }

.tech-hero#hero-wind .hero-mosaic, .sector-hero#hero-wind .hero-mosaic {
            background-image: url("../../assets/img/wind.svg");
        }

.tech-hero#hero-ocean .hero-mosaic, .sector-hero#hero-ocean .hero-mosaic {
            background-image: url("../../assets/img/ocean.svg");
        }

.tech-hero#hero-solarpv .hero-mosaic, .sector-hero#hero-solarpv .hero-mosaic {
            background-image: url("../../assets/img/solarpv.svg");
        }

.tech-hero#hero-bio .hero-mosaic, .sector-hero#hero-bio .hero-mosaic {
            background-image: url("../../assets/img/bio.svg");
        }

.tech-hero#hero-transport .hero-mosaic, .sector-hero#hero-transport .hero-mosaic {
            background-image: url("../../assets/img/transport.svg");
        }

.tech-hero#hero-buildings .hero-mosaic, .sector-hero#hero-buildings .hero-mosaic {
            background-image: url("../../assets/img/buildings.svg");
        }

.tech-hero#hero-industry .hero-mosaic, .sector-hero#hero-industry .hero-mosaic {
            background-image: url("../../assets/img/industry.svg");
        }

.tech-hero#hero-agriculture .hero-mosaic, .sector-hero#hero-agriculture .hero-mosaic {
            background-image: url("../../assets/img/agriculture.svg");
        }

.tech-hero#hero-industry .hero-mosaic, .sector-hero#hero-industry .hero-mosaic {
            background-image: url("../../assets/img/industry.svg");
        }

.tech-hero#hero-demand .hero-mosaic, .sector-hero#hero-demand .hero-mosaic {
            background-image: url("../../assets/img/demand.svg");
        }

.tech-hero#hero-tech .hero-mosaic, .sector-hero#hero-tech .hero-mosaic {
            background-image: url("../../assets/img/technology.svg");
        }

.tech-hero .hero-shadow, .sector-hero .hero-shadow {
        box-shadow: none;
    }

.tech-hero .figure-container, .sector-hero .figure-container {
        margin: 0;
    }

.section-hero {
    position: relative;

    width: calc(var(--max-content) / 10 * 7);
    height: calc(var(--max-content) / 10 * 4);
    transform: translateX(calc(var(--gutter) * -1));
    margin-bottom: var(--gutter);
    margin-top: 200px;
}

@media screen and (max-width: 1279px) {

.section-hero {
        width: 100vw;
        height: 300px
}
    }

.section-hero:before {
        content: "";
        background-color: var(--color-GO);

        background-image: url("../../assets/img/checkerboard.svg");
        background-position: top right;
        background-size: contain;

        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        left: 0px;
        transform: translateX(-100%);
    }

.section-hero:after {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;

        height: 100%;

        z-index: 300;

        background-position:
            left center,
            right center;
        background-repeat: no-repeat, no-repeat;
        background-size: contain, contain; /* or 'auto' depending on use case */

        width: calc(100% + var(--max-content) / 10 * 2);
        transform: translateX(calc(var(--max-content) / 10 * -2));
    }

@media screen and (max-width: 1279px) {

.section-hero:after {
            width: 100vw;
            transform: none
    }
        }

.section-hero figure.img {
        height: 100%;
        margin: 0 !important;
    }

.section-hero figure.img picture {
            height: 100%;
        }

.section-hero figure.img img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

.section-hero figure.img figcaption {
            position: absolute;
            display: none;
        }

.section-hero .hero-title {
        display: block;
        position: absolute;
        margin-bottom: 0;
        padding: var(--gutter);
        padding-bottom: 0;

        z-index: 400;
        bottom: 0px;
        left: 0px;
        background-color: #fff;
        width: calc(var(--max-content) / 10 * 6);
        height: calc(var(--max-content) / 10 * 1);

        font-size: 2.5rem;
    }

@media screen and (max-width: 1279px) {

.section-hero .hero-title {
            width: auto;
            height: auto
    }
        }

section#investment-and-finance .section-hero:after {
            background-image: url("../../assets/img/investment_hero_l.svg"),
                url("../../assets/img/investment_hero_r.svg");
        }

section#energy-systems .section-hero:after {
            background-image: url("../../assets/img/systems_hero_l.svg"), url("../../assets/img/systems_hero_r.svg");
        }

section#renewables-in-energy-supply .section-hero:after {
            background-image: url("../../assets/img/supply_hero_l.svg"), url("../../assets/img/supply_hero_r.svg");
        }

section#policy-and-commitments .section-hero:after {
            background-image: url("../../assets/img/policy_hero_l.svg"), url("../../assets/img/policy_hero_r.svg");
        }

section#renewables-in-energy-demand .section-hero:after {
            background-image: url("../../assets/img/demand_hero_l.svg"), url("../../assets/img/demand_hero_r.svg");
        }

section#challenges-and-opportunities .section-hero:after {
            background-image: url("../../assets/img/challenge_hero_l.svg"), url("../../assets/img/challenge_hero_r.svg");
        }

.search-box {

    min-height: 100px;

    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}

.search-box #hero-search {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

.search-box #hero-search .spacer {
            display: flex;
            width: 32px;
            height: 32px;
        }

.search-box #hero-search input {
            flex: 1;
            border-radius: 4px;
            padding: 0.5em 1em;
            font-size: 1.2rem;

            border-radius: 50px;
            border: none;
            outline: none;
        }

.search-box #hero-search button {
            background-color: transparent;

            font-size: 0;
            border: none;
            cursor: pointer;
        }

.search-box .left-col {
        text-align: right;
        align-content: center;
    }

@media screen and (max-width: 979px) {

.search-box .left-col {
            display: none
    }
        }

.search-box .center-col {
        text-align: center;
        align-content: center;
    }

.search-box .right-col {
        text-align: left;
        align-content: center;
    }

.autocomplete-wrapper {
    position: relative;
    width: 100%;

    display: flex;
    flex-direction: row;
    gap: 10px;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;

    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-results.show {
        display: block;
        border: 1px solid #dedede;
    }

.autocomplete-results div {
    padding: 8px;
    cursor: pointer;
    text-align: left;
}

.autocomplete-results div:hover {
    background-color: #f0f0f0;
}

section#search-wrapper {
    margin-top: 80px;
    padding: 0 var(--gutter);
}

@media screen and (max-width: 979px) {

section#search-wrapper {
        margin-top: 20px
}
    }

@media screen and (max-width: 979px) {

#search-title {
        font-size: 1.4rem
}
    }

.search-header {
    --color-fond: #ececec;
    background-color: var(--color-fond);
}

#search-results ul {
        margin-top: var(--gutter);
    }

#search-results ul li {
            border: 1px solid #dedede;
            padding: 10px;
            margin-bottom: 10px;
        }

#search-results ul li a {
                color: var(--color-nav-active);
            }

#search-results ul li a:hover {
                    text-decoration: underline;
                }

#search-results ul li h1, #search-results ul li h2, #search-results ul li h3, #search-results ul li h4 {
                font-size: 1.2rem;
                margin-bottom: 10px;
                font-weight: 500;
            }

#search-results ul li p {
                font-size: 1.2rem;
                margin: 0;
            }

#search-results ul li p.more-occurrences {
                font-size: 1rem;
                color: var(--color-meta);
            }

body.env-local .intersecting {
        /*outline: 4px solid blue;*/
    }

section {
    --current-color: var(--color-primary);
    --current-background: #fff;
    margin-top: var(--gutter);
    margin-bottom: var(--gutter);

    position: relative;

    scroll-margin-top: 90px;
}

body.env-local section {
        --guide-color: rgb(206, 192, 255);
    }

/* outline: 2px solid var(--guide-color); */

body.env-local section section {
            --guide-color: pink;
        }

body.env-local section:after {
            content: attr(id); /* Use the element's id as content */
            position: absolute;
            top: 0.25rem;
            right: 0.25rem;
            background-color: var(--guide-color);
            color: #665858;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
            pointer-events: none; /* So it doesn’t interfere with clicks */
        }

main {
    width: calc(var(--max-content) / 10 * 7);
}

@media screen and (max-width: 1279px) {

main {
        width: 100%
}
    }

main ul.tiles {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--smallgutter);
    }

@media screen and (max-width: 1279px) {

main ul.tiles {
            grid-template-columns: repeat(2, minmax(0, 1fr))
    }
        }

@media screen and (max-width: 979px) {

main ul.tiles {
            display: flex;
            flex-direction: column
    }

            main ul.tiles .thumb-link a img {
                aspect-ratio: 16/9;
            }
        }

/* aside is in navbar.css */

article h1, article h2, article h3, article h4 {
        scroll-margin-top: 90px;
    }

article.page-article {
    display: flex;
    flex-direction: row;

    padding-top: 120px;
}

@media screen and (max-width: 979px) {

article.page-article {
        padding-top: 40px
}
    }

article.page-article aside {
        min-width: 240px;
        width: 25%;
    }

article.page-article main {
        padding-right: var(--gutter);
    }

article.page-article #nav-bar #marker .marker-input {
        width: 50px;
    }

article.module-article {
    position: relative;
    z-index: 300;
    margin-top: calc(var(--max-content) / 10 * 2);

    padding: 0;

    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1279px) {

article.module-article {
        margin-top: 240px
}
    }

article.module-article h2 {
        font-size: 2rem;
    }

@media screen and (max-width: 979px) {

article.module-article h2 {
            font-size: 1.6rem
    }
        }

article.module-article figure.img {
        margin: 10px 0 20px 0;
    }

article.module-article h3 {
        font-size: 1.7rem;
        font-variation-settings: "wght" 520;
        text-transform: uppercase;
    }

@media screen and (max-width: 979px) {

article.module-article h3 {
            font-size: 1.4rem
    }
        }

article.module-article h4 {
        font-size: 1.5rem;
        font-variation-settings: "wght" 520;
    }

@media screen and (max-width: 979px) {

article.module-article h4 {
            font-size: 1.4rem
    }
        }

article.module-article section.module-header {
        min-height: calc(var(--max-content) / 10 * 2);
        background-color: var(--color-GO);
        margin: 0;
        padding: var(--gutter);
    }

article.module-article section.module-header h1 {
            font-size: 3.2rem;
        }

@media screen and (max-width: 979px) {

article.module-article section.module-header h1 {
                font-size: 2.2rem;
                line-height: 100%
        }
            }

@media screen and (max-width: 1279px) {

article.module-article section.module-header {
            min-height: auto
    }
        }

article.module-article details#details-foreword {
        margin-top: 0;
    }

article.module-article details#details-foreword summary, article.module-article details#details-foreword summary::-webkit-details-marker {
            list-style: none; /* For some browsers */
        }

article.module-article details#details-foreword summary {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
        }

article.module-article details#details-foreword h2 {
            margin: 0;
        }

article.module-article details#details-foreword summary:after {
            content: "▶";
            font-size: 16px;
            display: inline-block;
            margin-right: 0.5em;
            transition: transform 0.3s ease;
        }

/* Rotate arrow when open */

article.module-article details[open] summary::after {
        transform: rotate(90deg);
    }

article.module-article section {
        padding: 0 var(--gutter);

        scroll-margin-top: 90px;
    }

article.module-article section section {
            padding: 0;
        }

article.module-article section.key-facts {
        margin-top: 0px;
        background-color: #f6f6f6;

        padding-top: var(--gutter);
        padding-bottom: 0;
    }

article.module-article section.key-facts ul.facts {
            list-style-type: disc;
            margin-left: 1em;
        }

article.module-article section.key-facts ul.facts li {
                padding-top: var(--smallgutter);
            }

article.module-article section.key-facts .quotes {
            padding-top: var(--gutter);
            display: flex;
            flex-direction: row;
        }

@media screen and (max-width: 979px) {

article.module-article section.key-facts .quotes {
                flex-direction: column;
                padding: var(--gutter)
        }
            }

article.module-article section.key-facts .quotes blockquote {
                background-color: #f6f6f6;
                margin-bottom: 0;
            }

article.module-article .credits {
        background-color: #f6f6f6;

        padding-top: var(--gutter);
        padding-bottom: var(--gutter);
    }

article.module-article .credits h3 {
            font-size: 1.4rem;
            margin-top: 1em;
            margin-bottom: 0.25em;
        }

article.module-article .credits p {
            margin-bottom: 0.25em;
            font-size: 1rem;
        }

.toplabel {
    display: block;
    font-weight: normal;
    font-size: 1.2rem;
    margin-bottom: 28px;
    font-family: var(--narrow-font), var(--font-fallback);
}

@media screen and (max-width: 979px) {

.toplabel {
        margin-bottom: 12px
}
    }

section#foreword {
    margin-top: 0px;
}

section#foreword #details-foreword-a {
        margin-top: 0px;
        margin-bottom: 4px;
    }

section#foreword #details-foreword-b {
        margin-top: 0px;
    }

section#annex details, section#foreword details {
        margin-top: var(--gutter);

        margin-left: calc(var(--gutter) * -1);
        margin-right: calc(var(--gutter) * -1);
        padding: var(--gutter);

        background-color: #f6f6f6;
    }

section#annex details summary, section#annex details summary::-webkit-details-marker, section#foreword details summary, section#foreword details summary::-webkit-details-marker {
            list-style: none; /* For some browsers */
        }

section#annex details summary, section#foreword details summary {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

section#annex details h2, section#annex details h3, section#foreword details h2, section#foreword details h3 {
            margin: 0;
        }

section#annex details summary:after, section#foreword details summary:after {
            content: "▶";
            font-size: 16px;
            display: inline-block;
            margin-right: 0.5em;
            transition: transform 0.3s ease;
        }

/* Rotate arrow when open */

section#annex details[open] summary::after, section#foreword details[open] summary::after {
        transform: rotate(90deg);
    }

section#annex details[open] summary, section#foreword details[open] summary {
        margin-bottom: var(--gutter);
    }

section#annex {

    --gutter: 20px;
}

section#annex section {
        margin: 0;
        margin-bottom: 4px;
    }

section#annex section:first-child {
            margin-top: 40px;
        }

section#annex details {
        margin: 0;
    }

section#annex details h2, section#annex details h3 {
            font-size: 1.5rem;
        }

dl.abbrev, dl.glossary {
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    gap: 0;
}

dl.abbrev dt, dl.glossary dt {
        font-weight: 500;

        padding: 16px 0 16px 0;
        border-bottom: 1px solid #dedede;
    }

dl.abbrev dd, dl.glossary dd {
        margin: 0;
        font-size: 1rem;
        padding: 16px 0 16px 32px;
        border-bottom: 1px solid #dedede;
    }

.unit-grid table {
    }

.sticky-section {
}

.sticky-icon {
    position: sticky;
    top: 90px;
    height: 0;

    transform: translate(-140px, -120px);
}

.sticky-icon:before {
        content: "";
        display: block;
        width: 100px;
        height: 200px;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-color: #fff;
        box-shadow: 0px -20px 20px 10px #fff;
    }

.sticky-icon.icon-road:before {
        background-image: url("../../assets/img/road.svg");
    }

.sticky-icon.icon-aviation:before {
        background-image: url("../../assets/img/aviation.svg");
    }

.sticky-icon.icon-shipping:before {
        background-image: url("../../assets/img/shipping.svg");
    }

.sticky-icon.icon-rail:before {
        background-image: url("../../assets/img/rail.svg");
    }

.feature .feature-header {
        padding: 0 var(--gutter);
    }

.feature-box figure {
        width: 100%;
    }

.feature-box figure img {
            width: 100%;
            height: auto;
        }

.feature-box .row {
        gap: 0;
    }

.feature-box .col {
        padding: 0;
    }

.feature-box .wrapper {
        width: 100%;

        padding: var(--gutter);
        background-color: rgb(242, 242, 242);
    }

.square-flag {
    position: absolute;
    z-index: 20;
    top: calc(var(--max-content) / 10 * -1);
    left: 0;

    display: block;
    width: calc(var(--max-content) / 10 * 2);
    height: auto;
    aspect-ratio: 4/3;
}

.square-flag img {
        display: block;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

aside {
    flex-shrink: 0;
    width: calc(var(--max-content) / 10 * 3);
}

@media screen and (max-width: 1479px) {

aside {
        flex-shrink: 1;
        margin-right: 4px
}
    }

@media screen and (max-width: 1279px) {

aside {
        position: fixed;
        z-index: 700;
        bottom: 0px;
        left: 0px;
        width: 100vw !important;

        background-color: rgb(242, 242, 242);

        box-shadow:
            rgba(50, 50, 105, 0.15) 0px -2px 5px 0px,
            rgba(0, 0, 0, 0.05) 0px -1px 1px 0px
}
    }

#nav-bar {
    position: sticky;
    top: 90px;

    margin-left: 4px;

    font-family: var(--narrow-font), var(--font-fallback);

    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 1279px) {

#nav-bar {
        position: relative;
        top: unset;
        margin: 0;
        width: 100%;
        flex-direction: row;
        justify-content: flex-end
}
    }

@media screen and (max-width: 979px) {

#nav-bar {
        justify-content: flex-start
}

        #nav-bar .nav-bar-body {
            padding: 0px !important;
            flex: 1;
        }
        #nav-bar .mobile-select {
            width: 90% !important;
            padding: 0.2em 0.5em;
        }
    }

/* hide on compact screens */

@media screen and (max-height: 900px) {
        #nav-bar .page-nav {
            display: none !important;
        }
        #nav-bar .mobile-select {
            display: block !important;
            width: 100%;
            font-size: 1rem;
        }

        #nav-bar .nav-bar-body {
            padding: 12px;
        }
    }

#nav-bar.compact .page-nav {
            display: none;
        }

#nav-bar.compact .mobile-select {
            display: block !important;
        }

#nav-bar .nav-bar-header, #nav-bar .nav-bar-body, #nav-bar .nav-bar-footer {
        background-color: rgb(242, 242, 242);
    }

#nav-bar .toplink {
        display: block;
        padding: 16px;

        font-weight: bold;
        text-transform: uppercase;

        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }

#nav-bar .toplink:before {
            font-size: 24px;
        }

@media screen and (max-width: 979px) {

#nav-bar .toplink {
            font-size: 0
    }
        }

#nav-bar .nav-bar-header {
        border-bottom: 3px solid #fff;
    }

@media screen and (max-width: 1279px) {

#nav-bar .nav-bar-header {
            border: none
    }
        }

@media screen and (max-width: 1279px) {

#nav-bar .nav-bar-body {
            display: flex;

            align-items: center
    }
        }

#nav-bar .nav-bar-footer {
        padding: 16px;
        border-top: 3px solid #fff;
    }

@media screen and (max-width: 1279px) {

#nav-bar .nav-bar-footer {
            display: none
    }
        }

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

#nav-bar .mobile-select {
            display: none
    }
        }

#nav-bar #marker {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

@media screen and (max-width: 1279px) {

#nav-bar #marker {
            display: none
    }
        }

#nav-bar #marker.active #clear-btn, #nav-bar #marker.active #prev-btn, #nav-bar #marker.active #next-btn {
                opacity: 1;
            }

#nav-bar #marker.active #marker-mark {
                opacity: 1;
            }

#nav-bar #marker.matches #marker-mark {
                opacity: 1;
            }

#nav-bar #marker.matches #marker-mark:before {
                    color: var(--color-mark-current);
                }

#nav-bar #marker.matches input {
                font-weight: 500;
            }

#nav-bar #marker .marker-actions {
            background-color: #fff;
            border-radius: 50px;
            padding: 0 10px;

            display: flex;
            flex-direction: row;
            align-items: center;
        }

#nav-bar #marker .marker-input {
            flex: 1;
            border-radius: 4px;
            padding: 0.5em 1em;
            font-size: 1.2rem;
            border-radius: 50px;
            border: none;
            outline: none;
            width: 100%;
        }

#nav-bar #marker .marker-pagination {
            margin: 0 52px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            font-size: 1rem;

            color: #888888;
        }

#nav-bar #marker button {
            border: none;
            background: transparent;

            cursor: pointer;
        }

#nav-bar #marker #marker-mark {

            opacity: 0.2;
        }

#nav-bar #marker #clear-btn {
            opacity: 0.2;
        }

#nav-bar #marker #clear-btn:before {
                font-size: 24px;
            }

#nav-bar #marker #prev-btn {
            opacity: 0;
        }

#nav-bar #marker #prev-btn:before {
                font-size: 24px;
                color: #888888;
            }

#nav-bar #marker #next-btn {
            opacity: 0;
        }

#nav-bar #marker #next-btn:before {
                font-size: 24px;
                color: #888888;
            }

@media screen and (max-width: 1279px) {

#nav-bar .page-nav {
            display: none
    }
        }

#nav-bar .page-nav li {
            /* H2 level */
            background-color: transparent;
            transition: all 0.2s ease-in-out;
            border-bottom: 1px solid #fff;
        }

#nav-bar .page-nav li.disabled a {
                pointer-events: none;
                color: #a3a3a3;
            }

#nav-bar .page-nav li a {
                display: block;
                text-transform: uppercase;
                padding: 16px 10px;

                border-left: 6px solid transparent;
            }

#nav-bar .page-nav li a.download {
                    padding-right: 16px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                }

#nav-bar .page-nav li a.download i:before {
                        color: var(--color-nav-active);

                        font-size: 1.5em;
                    }

#nav-bar .page-nav li ul {
                /* H3 level */

                display: none;
            }

#nav-bar .page-nav li ul li {
                    border-bottom: none;
                }

#nav-bar .page-nav li ul li a {
                        padding: 6px 16px 6px 16px;
                        text-transform: none;
                        font-size: 1rem;

                        display: flex;
                        flex-direction: row;
                        gap: 5px;
                    }

#nav-bar .page-nav li ul li a:before {
                            content: "●";
                            color: var(--color-primary);
                            visibility: hidden;
                        }

#nav-bar .page-nav li ul li.active a:before {
                            visibility: visible;
                        }

#nav-bar .page-nav li ul li:last-child {
                        padding-bottom: 16px;
                    }

#nav-bar .page-nav li.active, #nav-bar .page-nav li.always-active {
                background-color: #ffefaf;
            }

#nav-bar .page-nav li.active a, #nav-bar .page-nav li.always-active a {
                    border-left: 6px solid var(--color-primary);
                }

#nav-bar .page-nav li.active ul, #nav-bar .page-nav li.always-active ul {
                    display: block;
                }

#nav-bar .page-nav li.active ul li a, #nav-bar .page-nav li.always-active ul li a {
                        border-left: 6px solid #ffefaf;
                    }

/*

.details-tab {
    order: 0;
    @extend .pill;

    &::-webkit-details-marker {
        display: none;
    }
}

.details-tabs {
    position: relative;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
}

.details-content {
    order: 1;
    padding: 1rem;
    width: 100%;
    details {
        summary {
            font-weight: 600;
        }
        margin: 1.5rem;
    }
}

.details-item {
    display: contents;
    &[open] {
        & > .details-tab {
            @extend %pill-active;
        }
    }
}

@supports selector(::details-content) {
    .details-item[open]::details-content {
        display: contents;
    }
}


*/

ul.card-list {
    --border-color: #a0a0a0;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

ul.card-list li.figure-card {
        border: 1px solid var(--border-color);
        /*   border-top: none; */
        border-radius: 4px;
        box-shadow:
            rgba(0, 0, 0, 0.1) 0px 10px 10px -5px,
            rgba(0, 0, 0, 0.04) 0px 5px 5px -5px;

        overflow: hidden;
    }

ul.card-list li.figure-card:hover {
            outline: 3px solid rgba(83, 154, 255, 0.3);
        }

ul.card-list li.figure-card .card-header {
        }

ul.card-list li.figure-card .card-body {
            padding: 8px;
            font-size: 1rem;
            line-height: 100%;
            font-family: var(--narrow-font), var(--font-fallback);
        }

ul.card-list li.figure-card .card-body span {
                font-weight: 700;
            }

ul.card-list li.figure-card figure {
            width: 100%;
        }

ul.card-list li.figure-card figure picture {
                width: 100%;
            }

ul.card-list li.figure-card figure picture img {
                    object-fit: cover;
                    height: 100%;
                    width: 100%;
                }

li.file-card {
    --border-color: #a0a0a0;

    margin-bottom: 12px;
}

li.file-card a {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        box-shadow:
            rgba(0, 0, 0, 0.1) 0px 10px 10px -5px,
            rgba(0, 0, 0, 0.04) 0px 5px 5px -5px;
    }

/*   border-top: none; */

li.file-card a:hover {
            outline: 3px solid rgba(83, 154, 255, 0.3);
        }

li.file-card a span {
            word-break: break-all;
        }

article.snapshot {
    --current-color: var(--color-accent);
    --current-background: #dbe8e9;

    position: relative;
    padding: 0;

    margin-top: 0;
}

article.snapshot figure {
        width: 100%;
    }

article.snapshot figure img {
            width: 100%;
            height: auto;

            aspect-ratio: 16/9;
            object-fit: cover;
        }

article.snapshot section {
        margin: 0;
    }

article.snapshot .expanadble-content:after {
        display: none;
    }

article.snapshot .row {
        gap: 0;
    }

article.snapshot .col {
        padding: 0;
    }

article.snapshot .wrapper {
        width: 100%;
        height: 100%;
        padding: var(--gutter);
    }

article.snapshot .left-col {
        padding: 0 !important;
        background-color: var(--current-background);
        flex-basis: 70%;
    }

article.snapshot .right-col {
        padding: 0 !important;
        background-color: rgb(242, 242, 242);
        flex-basis: 30%;
    }

article.snapshot .right-col .wrapper {
            width: 100%;
            height: auto;
        }

article.snapshot .snapbox {
        padding: 0px;
        margin: 0px;
        position: relative;
        background-color: transparent;
    }

article.snapshot .snapbox .flag-wrapper {
            width: 132px;
            top: -40px;
            right: -40px;
            transition: none;
        }

article.snapshot .box-more-label {
        display: none !important;
    }

article.snapshot .expanadble-content {
        overflow: auto;
        max-height: none;
    }

article.snapshot .taglist {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-separator);
    }

article.snapshot .taglist strong {
            font-weight: 500;
        }

article.snapshot .taglist ul {
            margin-top: 10px;
            list-style-type: disc;
            list-style-position: inside;
            line-height: 1.4em;
        }

.snapbox {
    position: relative;
    clear: both;

    --current-background: #dbe8e9;
    --current-color: var(--color-accent);

    background-color: var(--current-background);

    margin-left: calc(var(--gutter) * -1);
    margin: var(--gutter) 0;

    padding: var(--gutter);
    margin-bottom: 80px;

    scroll-margin-top: 90px;
}

.snapbox .flag-wrapper {
        position: absolute;

        width: 100px;
        aspect-ratio: 4/3;
        height: auto;

        top: 0px;
        right: 0px;
        transition: all 0.3s ease-in-out;
    }

@media screen and (max-width: 979px) {

.snapbox .flag-wrapper {
            display: none
    }
        }

.snapbox.intersecting .flag-wrapper {
        top: -20px;
        right: -20px;
    }

blockquote {
    float: left;
    display: block;
    background-color: var(--current-background);
    color: #3e3e3e;

    font-family: var(--narrow-font), var(--font-fallback);
    font-size: 1.4rem;
    line-height: 120%;

    --wedge-size: 40px;
    --wedge-offset: -10px;

    transition: all 0.3s ease;

    /* @extend %wedge-t-r; */

    margin: 0px 10px 24px 0px;

    padding: 10px 12px;

    max-width: 300px;
    min-height: 100px;
}

blockquote.intersecting {
        margin-left: -12px;
        margin-right: 22px;
    }

@media screen and (max-width: 979px) {

blockquote.intersecting {
            margin-left: auto;
            margin-right: auto
    }
        }

@media screen and (max-width: 979px) {

blockquote {
        max-width: 85%;
        float: none;
        margin: 20px auto;
        text-align: center
}
    }

blockquote em {
        display: inline-block;
        font-size: 4rem;
        font-variation-settings: "wght" 200;
        font-style: normal;

        margin-left: -20px;
        margin-top: 0px;
        margin-bottom: 0.1em;
    }

blockquote em.noshift {
            margin-left: 0px;
        }

blockquote em i {
            font-size: 0.5em;
            font-style: normal;
            font-variation-settings: "wght" 360;
        }

blockquote.stagger {
        border-right: 1px solid #dedede;
    }

@media screen and (max-width: 979px) {

blockquote.stagger {
            border: none;
            border-bottom: 1px solid #dedede
    }
        }

blockquote.stagger:last-child {
            border: none;
        }

blockquote.stagger p {
            line-height: 110%;
        }

blockquote.stagger em {
            font-size: 2.8rem;
            font-variation-settings: "wght" 300;
        }

blockquote.stagger em.drop {
                transform: translateY(0.18em);
            }

blockquote.stagger em i {
                font-variation-settings: "wght" 500;
            }

.sidebar {
    --current-color: var(--color-primary);
    --current-background: #fdf4d7;

    scroll-margin-top: 90px;

    clear: both;
    background-color: var(--current-background);

    margin-left: calc(var(--gutter) * -1);
    padding: var(--gutter);
    margin-bottom: 80px;

    margin-top: 80px;
}

/*  box-shadow: calc(var(--gutter) * -1) 0px 0 0 var(--color-primary); */

.sidebar.box {
        --current-background: rgb(242, 242, 242);
    }

.snapbox, .sidebar {
    --wedge-size: 100px;
    --wedge-offset: -20px;
}

@media screen and (max-width: 979px) {

.snapbox, .sidebar {
        --wedge-offset: -16px;
}
    }

.snapbox.intersecting:before, .sidebar.intersecting:before {
            top: var(--wedge-offset);
            left: var(--wedge-offset);
        }

.snapbox:before, .sidebar:before {
        content: "";
        position: absolute;
        z-index: -1;
        display: block;

        transition: all 0.3s ease;

        width: var(--wedge-size);
        height: var(--wedge-size);

        background-color: var(--current-color);
    }

.snapbox:before, .sidebar:before {
        top: 0px;
        left: 0px;
    }

.snapbox, .sidebar {
    position: relative;
}

.snapbox.intersecting:after, .sidebar.intersecting:after {
            bottom: var(--wedge-offset);
            right: var(--wedge-offset);
        }

.snapbox:after, .sidebar:after {
        content: "";
        position: absolute;
        z-index: -1;
        display: block;

        transition: all 0.3s ease;

        width: var(--wedge-size);
        height: var(--wedge-size);

        background-color: var(--current-color);
    }

.snapbox:after, .sidebar:after {
        bottom: 0px;
        right: 0px;
    }

blockquote {
    position: relative;
}

blockquote.intersecting:before {
            bottom: var(--wedge-offset);
            left: var(--wedge-offset);
        }

blockquote:before {
        content: "";
        position: absolute;
        z-index: -1;
        display: block;

        transition: all 0.3s ease;

        width: var(--wedge-size);
        height: var(--wedge-size);

        background-color: var(--current-color);
    }

blockquote:before {
        bottom: 0px;
        left: 0px;
    }

details {
    scroll-margin-top: 90px;
}

.expanadble {
    display: flex;
    flex-direction: column-reverse; /* reverse visual order */
}

.box-toggle {
    display: none;
}

.expanadble-content {
    overflow: hidden;
    max-height: 60vh;
    transition: max-height 0.6s ease;
    position: relative;
}

/* Fade-out overlay */

.expanadble-content:after {
        content: "";
        position: absolute;
        z-index: 300;
        bottom: 0;
        left: 0;
        height: 120px;
        width: 100%;
        background: linear-gradient(to top, var(--current-background), transparent);
        pointer-events: none;
    }

/* Expand when checkbox is checked */

.box-toggle:checked ~ .expanadble-content {
    max-height: 9999px;
}

.box-toggle:checked ~ .expanadble-content:after {
        display: none;
    }

.box-toggle:checked ~ .expanadble-content .fade-out {
    display: none;
}

/* Toggle label */

.box-more-label {
    display: inline-block;
    margin-top: 1rem;
    color: blue;
    cursor: pointer;

    margin-left: auto;

    color: #000;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    margin-top: 10px;
    font-family: var(--narrow-font), var(--font-fallback);
    font-weight: 500;
}

.box-more-label i {

        margin-left: 10px;

        font-size: 3rem;
        color: var(--current-color);
    }

.box-more-label i:before {
            font-size: 38px;
        }

/* Toggle label text */

.box-more-label::before {
    content: "Read More";
}

.box-toggle:checked ~ .box-more-label::before {
    content: "Close";
}

.box-toggle:checked ~ .box-more-label i {
    transform: rotate(180deg);
}

.timeline-grid {
    display: grid;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px 6px;
    grid-template-areas:
        "jun sep sep oct jan"
        "one two three four five";
}

@media screen and (max-width: 979px) {

.timeline-grid {
        grid-template-columns: 1fr 1fr 1fr
}

        .timeline-grid #phase-oct, .timeline-grid #phase-jan, .timeline-grid #item-esvc, .timeline-grid #item-policy {
            display: none;
        }
    }

.timeline-grid .timeline-header {
        text-align: center;
        font-size: 0.9rem;
    }

@media screen and (max-width: 979px) {

.timeline-grid .timeline-header {
            display: none
    }
        }

.timeline-grid .timeline-header span {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

.timeline-grid .timeline-header span:before, .timeline-grid .timeline-header span:after {
                content: "";

                height: 8px;
                background-repeat: no-repeat;
                background-position: center right;
                background-size: cover;
                flex: 1;
                background-image: url("../../assets/img/time-arrow.svg");
            }

.timeline-grid .timeline-header span:after {
                background-position: center left;
            }

.timeline-grid #phase-jun {
        grid-area: jun;
    }

.timeline-grid #phase-jun span:before {
            background-image: none;
        }

.timeline-grid #phase-sep {
        grid-area: sep;
    }

.timeline-grid #phase-oct {
        grid-area: oct;
    }

.timeline-grid #phase-jan {
        grid-area: jan;
    }

.timeline-grid #phase-jan span:after {
            background-image: none;
        }

.timeline-grid .timeline-item {
        text-align: center;

        display: flex;
        align-items: stretch;
        justify-content: stretch;
    }

@media screen and (max-width: 979px) {

.timeline-grid .timeline-item {
            flex-basis: 30%
    }
        }

.timeline-grid .timeline-item a {
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;

            font-family: var(--narrow-font), var(--font-fallback);
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1.1em;
        }

@media screen and (max-width: 979px) {

.timeline-grid .timeline-item a {
                width: 100%
        }
            }

.timeline-grid .timeline-item.disabled a {
                background-color: var(--color-dust) !important;
            }

.timeline-grid #item-go {
        grid-area: one;
    }

.timeline-grid #item-go a {
            background-color: var(--color-GO);
        }

.timeline-grid #item-demand {
        grid-area: two;
    }

.timeline-grid #item-demand a {
            background-color: var(--color-ED);
        }

.timeline-grid #item-supply {
        grid-area: three;
    }

.timeline-grid #item-supply a {
            background-color: var(--color-ES);
        }

.timeline-grid #item-esvc {
        grid-area: four;
    }

.timeline-grid #item-esvc a {
            background-color: var(--color-VC);
        }

.timeline-grid #item-policy {
        grid-area: five;
    }

.timeline-grid #item-policy a {
            background-color: var(--color-PO);
        }

body {
}

html {
    height: 100%;
    /* scroll-behavior: smooth;  */
}