/** This part of the stylesheet imports Google's Exo 2 fonts, which are used as main fonts of Predictive Works website. */
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; src: url("../google-fonts/exo-2-v6-latin-regular.eot"); src: local("Exo 2"), local("Exo2-Regular"), url("../google-fonts/exo-2-v6-latin-regular.eot?#iefix") format("embedded-opentype"), url("../google-fonts/exo-2-v6-latin-regular.woff2") format("woff2"), url("../google-fonts/exo-2-v6-latin-regular.woff") format("woff"), url("../google-fonts/exo-2-v6-latin-regular.ttf") format("truetype"), url("../google-fonts/exo-2-v6-latin-regular.svg#Exo2") format("svg"); }

/******************** COMMON STYLING */
:root { --brand-black: #0b0c0e; --brand-color: #1bacab; --brand-case: #fd7e14; --brand-blue:  #5a84e4; --brand-color10: rgba(27, 172, 171, 0.10); --brand-color90: rgba(27, 172, 171, 0.90); --brand-grey: #6c757d; --brand-white: #bababa; --link-color: #0366d6; --brand-border: 5px solid var(--brand-color); --brand-border-grey: 1px solid var(--brand-grey); --brand-border-white: 1px solid var(--brand-white); --main-nav-border: 1px solid var(--brand-white); /* font-size */ --h3-size: 1.25rem; --header-title-font-size: 2.5rem; --message-subtitle-font-size: 2.0rem; --message-title-font-size: 3.75rem; --message-topic-font-size: 1.50rem; --panel-button-font-size: 1.0rem; --panel-title-font-size: 1.5rem; --panel-subtitle-font-size: 1.25rem; --panel-text-font-size: 1.25rem; --p-font-size: 1.0rem; --p-size: 1.15rem; --header-nav-item-font-size: 1.15rem; --subtitle-font-size: 2.0rem; /* line height */ --about-line-height: 1.75rem; --li-line-height: 1.75rem; --panel-line-height: 1.75rem; /* padding & margin */ --about-padding: 5.0rem; --button-margin: 0.25rem; --chart-subtitle-padding: 0.75rem 0rem 0.75rem 0rem; --fa-icon-margin: 0rem 0.5rem 0rem 0.75rem; --header-nav-item-padding: 1.0rem 1.5rem 0rem 0rem; --header-logo-padding: 1.0rem 1.5rem 0rem 1.5rem; --imprint-padding: 5.0rem; --main-content-padding: 0.75rem; --message-title-padding: 3.75rem 0rem 0rem 0rem; --message-subtitle-padding: 1.0rem 0rem 3.75rem 0rem; --message-topic-padding: 1.0rem 0rem 0.5rem 0rem; --nav-container-margin: 1.0rem 0rem 1.0rem 0rem; --nav-container-padding: 1.25rem 0rem 1.25rem 0rem; --nav-article-margin: 0.5rem; --nav-article-padding: 0.5rem 0rem 0.5rem 0rem; --nav-article-item-padding: 0.5rem 0.5rem 0.5rem 0.75rem; --nav-title-padding: 0.75rem 0rem 0.75rem 0rem; --nav-subtitle-padding: 0.5rem 0rem 0.5rem 0rem; --nav-subtitle-margin: 0.75rem 0rem 0.75rem 0rem; --padding-band: 3.75rem 0rem 3.75rem 0rem; --panel-frame-margin: 1.0rem 0rem 0rem 0rem; --panel-inner-margin: 1.0rem; --panel-inner-margin-small: 0.25rem; --panel-title-padding: 1.0rem 0rem 2.0rem 0rem; --panel-subtitle-padding: 0.5rem; --panel-body-padding: 4.0rem 0.5rem 0.5rem 0.5rem; --panel-bottom-padding: 0.5rem 0rem 0.5rem 0rem; --panel-text-padding: 1.0rem 0rem 1.0rem 0rem; --panel-button-padding: 1.0rem; --panel-padding: 1.0rem; --site-footer-padding: 1.5rem; --site-footer-content-padding: 0.75rem; --site-main-message-padding: 0.5rem 0rem 0.5rem 0rem; --subtitle-padding: 3.75rem 0rem 1.0rem 0rem; --works-margin: 1.0rem 0rem 0rem 0rem; /* width height */ --github-width: 400px; --github-height: 200px; --max-width: 1600px; --panel-body-height: 200px; --panel-logo-width: 360px; --panel-logo-height: 240px; --site-footer-height: 60px; --site-header-height: 60px; --site-footer-media-width: 60px; --topic-size: 64px; /* Flow chart supoort */ --flow-chart-height: 225px; /* Leaflet map supoort */ --leaflet-margin-top: 30px; --slider-integrator-height: 675px; /* Sizes */ --size-24px:  24px; --size-32px:  32px; --size-40px:  40px; --size-60px:  60px; --size-128px: 128px; --size-160px: 160px; --size-300px: 300px; --size-320px: 320px; --size-400px: 400px; --size-425px: 425px; --size-450px: 450px; --size-455px: 455px; --size-480px: 480px; --size-500px: 500px; --size-533px: 533px; --size-600px: 600px; --size-675px: 675px; --size-800px: 800px; --size-900px: 900px; --size-1200px: 1200px; --size-1_0rem:  1.0rem; --size-1_75rem: 1.75rem; --size-2_5rem: 2.5rem; --size-3_25rem: 3.25rem; --map-tiles-filter: brightness(0.8) invert(1) contrast(3) hue-rotate(180deg) saturate(0.9) brightness(0.8); }

@media screen and (min-width: 799px) { /* Reference is 1600px, i.e. 50% */
  :root { /* font-size */ --h3-size: 0.625rem; --header-title-font-size: 1.25rem; --message-subtitle-font-size: 1.0rem; --message-title-font-size: 1.875rem; --message-topic-font-size: 0.75rem; --nav-title-font-size: 0.625rem; --nav-subtitle-font-size: 0.5rem; --panel-button-font-size: 0.5rem; --panel-title-font-size: 0.75rem; --panel-subtitle-font-size: 0.625rem; --panel-text-font-size: 0.625rem; --p-font-size: 0.5rem; --p-size: 0.575rem; --header-nav-item-font-size: 0.575rem; --subtitle-font-size: 1.0rem; /* line height */ --about-line-height: 0.875rem; --li-line-height: 0.875rem; --panel-line-height: 0.875rem; /* padding & margin */ --about-padding: 2.5rem; --button-margin: 0.125rem; --chart-subtitle-padding: 0.375rem 0rem 0.375rem 0rem; --fa-icon-margin: 0rem 0.25rem 0rem 0.375rem; --header-nav-item-padding: 0.5rem 0.75rem 0rem 0rem; --header-logo-padding: 0.5rem 0.75rem 0rem 0.75rem; --imprint-padding: 2.5rem; --imprint-subtitle-padding: 1.875rem 0rem 0.5rem 0rem; --main-content-padding: 0.375rem; --message-title-padding: 1.875rem 0rem 0rem 0rem; --message-subtitle-padding: 0.5rem 0rem 1.875rem 0rem; --message-topic-padding: 0.5rem 0rem 0.25rem 0rem; --nav-container-margin: 0.5rem 0rem 0.5rem 0rem; --nav-container-padding: 0.625rem 0rem 0.625rem 0rem; --nav-article-margin: 0.25rem; --nav-article-padding: 0.25rem 0rem 0.25rem 0rem; --nav-article-item-padding: 0.25rem 0.25rem 0.25rem 0.375rem; --nav-title-padding: 0.375rem 0rem 0.375rem 0rem; --nav-subtitle-padding: 0.25rem 0rem 0.25rem 0rem; --nav-subtitle-margin: 0.375rem 0rem 0.375rem 0rem; --padding-band: 1.875rem 0rem 1.875rem 0rem; --panel-frame-margin: 0.5rem 0rem 0rem 0rem; --panel-inner-margin: 0.5rem; --panel-inner-margin-small: 0.125rem; --panel-title-padding: 0.5rem 0rem 1.0rem 0rem; --panel-subtitle-padding: 0.25rem; --panel-body-padding: 2.0rem 0.25rem 0.25rem 0.25rem; --panel-bottom-padding: 0.25rem 0rem 0.25rem 0rem; --panel-button-padding: 0.5rem; --panel-text-padding: 0.5rem 0rem 0.5rem 0rem; --panel-padding: 0.5rem; --subpanel-padding: 0.125rem; --site-footer-padding: 0.75rem; --site-footer-content-padding: 0.375rem; --site-main-message-padding: 0.25rem 0rem 0.25rem 0rem; --subpanel-padding: 0.125rem; --subtitle-padding: 1.875rem 0rem 0.5rem 0rem; --works-margin: 0.5rem 0rem 0rem 0rem; /* width height */ --github-width: 200px; --github-height: 100px; --max-width: 800px; --panel-body-height: 100px; --panel-logo-width: 180px; --panel-logo-height: 120px; --site-footer-height: 30px; --site-header-height: 30px; --site-footer-media-width: 30px; /* Flow chart supoort */ --flow-chart-height: 112px; /* Leaflet map supoort */ --leaflet-margin-top: 15px; --slider-integrator-height: 337px; /* Sizes */ --size-24px:  12px; --size-32px:  16px; --size-40px:  20px; --size-60px:  30px; --size-128px: 64px; --size-160px: 80px; --size-300px: 150px; --size-320px: 160px; --size-400px: 200px; --size-425px: 212px; --size-450px: 225px; --size-455px: 227px; --size-480px: 240px; --size-500px: 250px; --size-533px: 266px; --size-600px: 300px; --size-675px: 337px; --size-800px: 400px; --size-900px: 450px; --size-1200px: 600px; --size-1_0rem:  0.5rem; --size-1_75rem: 0.875rem; --size-2_5rem:  1.25rem; --size-3_25rem: 1.625rem; --map-tiles-filter: brightness(0.8) invert(1) contrast(3) hue-rotate(180deg) saturate(0.9) brightness(0.8); } }

@media screen and (min-width: 1023px) { /* Reference is 1600px, i.e. 64% */
  :root { --h3-size: 0.8rem; --header-title-font-size: 1.6rem; --header-nav-item-font-size: 0.735rem; --message-title-font-size: 2.40rem; --message-subtitle-font-size: 1.28rem; --message-topic-font-size: 1.024rem; --nav-title-font-size: 0.8rem; --nav-subtitle-font-size: 0.64rem; --panel-button-font-size: 0.64rem; --panel-title-font-size: 0.96rem; --panel-subtitle-font-size: 0.80rem; --panel-text-font-size: 0.80rem; --p-font-size: 0.64rem; --p-size: 0.736rem; --subtitle-font-size: 1.28rem; /* line height */ --about-line-height: 1.12rem; --li-line-height: 1.12rem; --panel-line-height: 1.12rem; /* padding & margin */ --about-padding: 3.20rem; --button-margin: 0.16rem; --chart-subtitle-padding: 0.5rem 0rem 0.5rem 0rem; --fa-icon-margin: 0rem 0.32rem 0rem 0.48rem; --header-nav-item-padding: 0.64rem 0.96rem 0rem 0rem; --header-logo-padding: 0.64rem 0.96rem 0rem 0.96rem; --imprint-padding: 3.20rem; --imprint-subtitle-padding: 2.40rem 0rem 0.64rem 0rem; --main-content-padding: 0.48rem; --message-title-padding: 2.40rem 0rem 0rem 0rem; --message-subtitle-padding: 0.64rem 0rem 2.40rem 0rem; --message-topic-padding: 0.64rem 0rem 0.32rem 0rem; --nav-container-margin: 0.64rem 0rem 0.64rem 0rem; --nav-container-padding: 0.8rem 0rem 0.8rem 0rem; --nav-article-margin: 0.32rem; --nav-article-padding: 0.32rem 0rem 0.32rem 0rem; --nav-article-item-padding: 0.32rem 0.32rem 0.32rem 0.48rem; --nav-title-padding: 0.48rem 0rem 0.48rem 0rem; --nav-subtitle-padding: 0.32rem 0rem 0.32rem 0rem; --nav-subtitle-margin: 0.48rem 0rem 0.48rem 0rem; --padding-band: 2.40rem 0rem 2.40rem 0rem; --panel-frame-margin: 0.64rem 0rem 0rem 0rem; --panel-inner-margin: 0.64rem; --panel-inner-margin-small: 0.16rem; --panel-title-padding: 0.64rem 0rem 1.28rem 0rem; --panel-subtitle-padding: 0.32rem; --panel-body-padding: 2.56rem 0.32rem 0.32rem 0.32rem; --panel-bottom-padding: 0.32rem 0rem 0.32rem 0rem; --panel-button-padding: 0.64rem; --panel-text-padding: 0.64rem 0rem 0.64rem 0rem; --panel-padding: 0.64rem; --subpanel-padding: 0.16rem; --site-footer-padding: 0.96rem; --site-footer-content-padding: 0.48rem; --site-main-message-padding: 0.32rem 0rem 0.32rem 0rem; --subtitle-padding: 2.40rem 0rem 0.64rem 0rem; --works-margin: 0.64rem 0rem 0rem 0rem; /* width height */ --github-width: 256px; --github-height: 128px; --max-width: 1024px; --panel-body-height: 128px; --panel-logo-width: 230px; --panel-logo-height: 154px; --quota-size: 40px; --quota-medium-size: 30px; --site-footer-height: 39px; --site-header-height: 39px; --site-footer-media-width: 39px; --topic-size: 41px; /* Flow chart supoort */ --flow-chart-height: 144px; /* Leaflet map supoort */ --leaflet-margin-top: 20px; --slider-integrator-height: 432px; /* origin; 1152 x 686 scaled to 65% */ --works-width: 479px; --works-height: 285px; --size-24px:  15px; --size-32px:  20px; --size-40px:  26px; --size-60px:  38px; --size-128px: 82px; --size-160px: 102px; --size-300px: 192px; --size-320px: 205px; --size-400px: 256px; --size-425px: 272px; --size-450px: 288px; --size-455px: 291px; --size-480px: 307px; --size-500px: 320px; --size-533px: 341px; --size-600px: 390px; --size-675px: 432px; --size-800px: 512px; --size-900px: 576px; --size-1200px: 768px; --size-1_0rem:  0.64rem; --size-1_75rem: 1.12rem; --size-2_5rem:  0.96rem; --size-3_25rem: 2.08rem; --map-tiles-filter: brightness(0.8) invert(1) contrast(3) hue-rotate(180deg) saturate(0.9) brightness(0.8); } }

@media screen and (min-width: 1365px) { /* Reference is 1600px, i.e. 85% */
  :root { /* font-size */ --h3-size: 1.0625rem; --header-title-font-size: 2.215rem; --header-nav-item-font-size: 0.975rem; --message-title-font-size: 3.1875rem; --message-subtitle-font-size: 1.70rem; --message-topic-font-size: 1.275rem; --nav-title-font-size: 1.0625rem; --nav-subtitle-font-size: 0.85rem; --panel-button-font-size: 0.85rem; --panel-title-font-size: 1.275rem; --panel-subtitle-font-size: 1.0625rem; --panel-text-font-size: 1.0625rem; --p-font-size: 0.85rem; --p-size: 0.9775rem; --subtitle-font-size: 1.70rem; /* line height */ --about-line-height: 1.4875rem; --li-line-height: 1.4875rem; --panel-line-height: 1.4875rem; /* padding & margin */ --about-padding: 4.25rem; --button-margin: 0.2125rem; --chart-subtitle-padding: 0.6375rem 0rem 0.6375rem 0rem; --fa-icon-margin: 0rem 0.425rem 0rem 0.6375rem; --header-nav-item-padding: 0.85rem 1.275rem 0rem 0rem; --header-logo-padding: 0.85rem 1.275rem 0rem 0.85rem; --imprint-padding: 4.25rem; --imprint-subtitle-padding: 3.1875rem 0rem 0.85rem 0rem; --main-content-padding: 0.6375rem; --message-title-padding: 3.1875rem 0rem 0rem 0rem; --message-subtitle-padding: 0.85rem 0rem 3.1875rem 0rem; --message-topic-padding: 0.85rem 0rem 0.425rem 0rem; --nav-container-margin: 0.85rem 0rem 0.85rem 0rem; --nav-container-padding: 1.0625rem 0rem 1.0625rem 0rem; --nav-article-margin: 0.425rem; --nav-article-padding: 0.425rem 0rem 0.425rem 0rem; --nav-article-item-padding: 0.425rem 0.425rem 0.425rem 0.6375rem; --nav-title-padding: 0.6375rem 0rem 0.6375rem 0rem; --nav-subtitle-padding: 0.425rem 0rem 0.425rem 0rem; --nav-subtitle-margin: 0.635rem 0rem 0.635rem 0rem; --padding-band: 3.1875rem 0rem 3.1875rem 0rem; --panel-frame-margin: 0.85rem 0rem 0rem 0rem; --panel-inner-margin: 0.85rem; --panel-inner-margin-small: 0.2125rem; --panel-title-padding: 0.85rem 0rem 1.70rem 0rem; --panel-subtitle-padding: 0.85rem 0rem 0.425rem 0rem; --panel-body-padding: 3.40rem 0.425rem 0.425rem 0.425rem; --panel-bottom-padding: 0.425rem 0rem 0.425rem 0rem; --panel-button-padding: 0.85rem; --panel-text-padding: 0.85rem 0rem 0.85rem 0rem; --panel-padding: 0.85rem; --subpanel-padding: 0.2125rem; --site-footer-content-padding: 0.6375rem; --site-footer-padding: 1.275rem; --site-main-message-padding: 0.425rem 0rem 0.425rem 0rem; --subtitle-padding: 3.1875rem 0rem 0.85rem 0rem; --works-margin: 0.85rem 0rem 0rem 0rem; /* width height */ --github-width: 340px; --github-height: 170px; --max-width: 1366px; --panel-body-height: 170px; --panel-logo-width: 306px; --panel-logo-height: 204px; --quota-size: 50px; --quota-medium-size: 40px; --site-footer-height: 51px; --site-header-height: 51px; --site-footer-media-width: 51px; --topic-size: 54px; /* Flow chart supoort */ --flow-chart-height: 191px; /* Leaflet map supoort */ --leaflet-margin-top: 26px; --slider-integrator-height: 574px; --works-width: 637px; --works-height: 379px; --size-24px:  20px; --size-32px:  27px; --size-40px:  34px; --size-60px:  51px; --size-128px: 109px; --size-160px: 136px; --size-300px: 255px; --size-320px: 272px; --size-400px: 340px; --size-425px: 361px; --size-450px: 382px; --size-455px: 387px; --size-480px: 408px; --size-500px: 425px; --size-533px: 453px; --size-600px: 510px; --size-675px: 574px; --size-800px: 680px; --size-900px: 765px; --size-1200px: 1020px; --size-1_0rem:  0.85rem; --size-1_75rem: 1.4875rem; --size-2_5rem:  1.275rem; --size-3_25rem: 2.7625rem; --map-tiles-filter: brightness(0.8) invert(1) contrast(3) hue-rotate(180deg) saturate(0.9) brightness(0.8); } }

@media screen and (min-width: 1599px) { /* Reference is 1600px, i.e. 100% */
  :root { /* font-size */ --h3-size: 1.25rem; --header-title-font-size: 2.5rem; --message-subtitle-font-size: 2.0rem; --message-title-font-size: 3.75rem; --message-topic-font-size: 1.50rem; --nav-title-font-size: 1.25rem; --nav-subtitle-font-size: 1.0rem; --panel-button-font-size: 1.0rem; --panel-title-font-size: 1.5rem; --panel-subtitle-font-size: 1.25rem; --panel-text-font-size: 1.25rem; --p-font-size: 1.0rem; --p-size: 1.15rem; --header-nav-item-font-size: 1.15rem; --subtitle-font-size: 2.0rem; /* line height */ --about-line-height: 1.75rem; --li-line-height: 1.75rem; --panel-line-height: 1.75rem; /* padding & margin */ --about-padding: 5.0rem; --button-margin: 0.25rem; --chart-subtitle-padding: 0.75rem 0rem 0.75rem 0rem; --fa-icon-margin: 0rem 0.5rem 0rem 0.75rem; --header-nav-item-padding: 1.0rem 1.5rem 0rem 0rem; --header-logo-padding: 1.0rem 1.5rem 0rem 1.5rem; --imprint-padding: 5.0rem; --imprint-subtitle-padding: 3.75rem 0rem 1.0rem 0rem; --main-content-padding: 0.75rem; --message-title-padding: 3.75rem 0rem 0rem 0rem; --message-subtitle-padding: 1.0rem 0rem 3.75rem 0rem; --message-topic-padding: 1.0rem 0rem 0.5rem 0rem; --nav-container-margin: 1.0rem 0rem 1.0rem 0rem; --nav-container-padding: 1.25rem 0rem 1.25rem 0rem; --nav-article-margin: 0.5rem; --nav-article-padding: 0.5rem 0rem 0.5rem 0rem; --nav-article-item-padding: 0.5rem 0.5rem 0.5rem 0.75rem; --nav-title-padding: 0.75rem 0rem 0.75rem 0rem; --nav-subtitle-padding: 0.5rem 0rem 0.5rem 0rem; --nav-subtitle-margin: 0.75rem 0rem 0.75rem 0rem; --padding-band: 3.75rem 0rem 3.75rem 0rem; --panel-frame-margin: 1.0rem 0rem 0rem 0rem; --panel-inner-margin: 1.0rem; --panel-inner-margin-small: 0.25rem; --panel-title-padding: 1.0rem 0rem 2.0rem 0rem; --panel-subtitle-padding: 0.5rem; --panel-body-padding: 4.0rem 0.5rem 0.5rem 0.5rem; --panel-bottom-padding: 0.5rem 0rem 0.5rem 0rem; --panel-button-padding: 1.0rem; --panel-text-padding: 1.0rem 0rem 1.0rem 0rem; --panel-padding: 1.0rem; --subpanel-padding: 0.25rem; --site-footer-padding: 1.5rem; --site-footer-content-padding: 0.75rem; --site-main-message-padding: 0.5rem 0rem 0.5rem 0rem; --subpanel-padding: 0.25rem; --subtitle-padding: 3.75rem 0rem 1.0rem 0rem; --works-margin: 1.0rem 0rem 0rem 0rem; /* width height */ --github-width: 400px; --github-height: 200px; --max-width: 1600px; --panel-body-height: 200px; --panel-logo-width: 360px; --panel-logo-height: 240px; --quota-size: 60px; --quota-medium-size: 45px; --site-footer-height: 60px; --site-header-height: 60px; --site-footer-media-width: 60px; /* Flow chart supoort */ --flow-chart-height: 225px; /* Leaflet map supoort */ --leaflet-margin-top: 30px; --slider-integrator-height: 675px; /* origin; 1152 x 686 scaled to 65% */ --works-width: 749px; --works-height: 446px; --size-24px:  24px; --size-32px:  32px; --size-40px:  40px; --size-60px:  60px; --size-128px: 128px; --size-160px: 160px; --size-300px: 300px; --size-320px: 320px; --size-400px: 400px; --size-425px: 425px; --size-450px: 450px; --size-455px: 455px; --size-480px: 480px; --size-500px: 500px; --size-533px: 533px; --size-600px: 600px; --size-675px: 675px; --size-800px: 800px; --size-900px: 900px; --size-1200px: 1200px; --size-1_0rem:  1.0rem; --size-1_75rem: 1.75rem; --size-2_5rem:  2.5rem; --size-3_25rem: 3.25rem; --map-tiles-filter: brightness(0.8) invert(1) contrast(3) hue-rotate(180deg) saturate(0.9) brightness(0.8); } }

html { scroll-behavior: smooth; }

body { background-color: var(--brand-black); font-family: 'Exo 2'; height: 100%; margin: 0; padding: 0; }

::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ }

::-webkit-scrollbar-thumb { background: transparent; }

/*** common html tags ***/
p { font-size: var(--p-font-size); }

h1, h2, h3 { color: var(--brand-grey); }

h3 { font-size: var(--h3-size); }

a, a:visited { color: var(--link-color); font-weight: 100; text-decoration: none; }

p { color: var(--brand-grey); font-size: var(--p-size); }

/* Makes sure that the video fits to its # parent div, when resizing the browser # window */
video { width: 100%; height: 100%; object-fit: cover; position: absolute; /* magic sauce */ }

.slick-dots { display: flex; flex-direction: column; list-style-type: none; margin: 0; padding: 0; overflow: hidden; width: 10px; }

/************************************************** index.html */
/* `map-tiles` refers to the class name assigned to the Open Street Map (OSM) */
.map-tiles { filter: var(--map-tiles-filter, none); }

#home-control { align-items: center; display: flex; flex-direction: row; position: fixed; top: 0; right: 0; width: 20px; height: 100vh; z-index: 10; }

.chart-container { border: 1px solid #293042; width: var(--size-1200px); height: var(--size-675px); overflow: hidden; }

.chart-wrapper { position: relative; width: 100%; height: var(--size-675px); }

.chart-loader-wrapper { align-items: center; position: absolute; display: flex; flex-direction: column; width: 100%; height: var(--size-675px); top: 0; left: 0; opacity: 1; transition: opacity 2s; z-index: 1099; }

.chart-loader-wrapper.fade { opacity: 0; }

.chart-loader-background { background-image: url("/assets/images/techstack-integrations.jpg"); height: var(--size-675px); width: var(--size-1200px); }

.chart-loader { color: #fd7e14; font-size: var(--h3-size); position: absolute; left: 45%; top: 50%; }

#chart-panel { align-items: center; display: flex; flex-direction: column; height: var(--size-675px); width: 100%; }

.video-panel { align-items: center; display: flex; flex-direction: column; height: var(--size-900px); width: 100%; }

.video-wrapper { background-color: rgba(41, 48, 66, 0.2); background-image: url("/assets/images/grid-bg.png"); background-repeat: repeat; position: relative; width: 100%; height: var(--size-900px); }

.flow-header { width: 100%; }

.flow-title { color: var(--brand-white); font-size: var(--message-title-font-size); font-weight: 200; padding: var(--message-title-padding); text-align: center; width: 100%; }

.flow-subtitle { color: var(--brand-white); font-size: var(--message-subtitle-font-size); font-weight: 100; padding: var(--chart-subtitle-padding); text-align: center; width: 100%; }

.flow-subtitle.left { text-align: left !important; }

.flow-subtitle.blue { color: var(--brand-blue); }

.flow-subtitle.green { color: var(--brand-color); }

.flow-chart { height: var(--flow-chart-height); width: var(--size-800px); }

.flow-content-wrapper { align-items: center; display: flex; flex-direction: column; width: 100%; }

.flow-content { align-items: center; display: flex; flex-direction: row; }

.flow-content.fixed { width: var(--size-1200px); height: var(--size-675px); }

.flow-content.full { width: 100%; }

.flow-content.integrator { height: var(--slider-integrator-height); }

.flow-content.samples { height: var(--slider-integrator-height); }

.flow-content-distance { height: 5px; width: 100%; }

.flow-image { width: 100%; }

.flow-image img { background-size: contain; width: var(--max-width); }

.flow-distance { padding: var(--message-title-padding); width: 100%; }

.flow-section { background-color: var(--brand-black); width: 100%; }

.flow-panel { align-items: center; display: flex; flex-direction: row; position: relative; overflow: hidden; width: 50%; }

.flow-panel.grid { background-color: rgba(41, 48, 66, 0.2); background-image: url("/assets/images/grid-bg.png"); background-repeat: repeat; height: var(--size-675px); }

.flow-panel-chart-wrapper { align-items: center; display: flex; flex-direction: column; overflow: hidden; width: 100%; }

.flow-panel.border { border: 1px solid #293042; }

.flow-panel.border-grey { border: 1px solid #777777; }

.flow-panel img { background-size: contain; height: var(--size-675px); width: var(--size-800px); }

/******************** Folium extensions */
.flow-panel .folium { background-size: contain; height: var(--size-675px); width: var(--size-800px); }

.flow-panel-text-wrapper { padding: var(--panel-padding); width: 100%; }

.flow-panel-text { color: var(--brand-white); font-size: var(--h3-size); padding: var(--panel-padding); }

.flow-panel-text.white { background-color: rgba(255, 255, 255, 0.05); }

.ignition-wrapper { align-items: center; display: flex; flex-direction: column; width: var(--max-width); height: var(--size-675px); }

.ignition-content { align-items: center; display: flex; flex-direction: row; width: calc(var(--size-1200px) + 10px); height: var(--size-675px); }

#ignition-control { width: 10px; }

.slider-ignition { border: 1px solid #293042; width: var(--size-1200px); height: var(--size-675px); overflow: hidden; }

.ignition-line { background-color: white; width: 3px; height: 30px; margin-bottom: 5px; }

.ignition-line.active { background-color: var(--brand-case); color: white; }

.ignition-line:hover { background-color: var(--brand-case); color: white; cursor: pointer; }

/* The teckstack representation uses a custom representation of the slick-dots, and the stylesheet below defines the respective bridge */
.slick-dots li.slick-active .ignition-line { background-color: var(--brand-case); color: white; }

.slider-twins { overflow: hidden; height: var(--size-675px); width: var(--size-800px); }

.ignition-page { position: relative; }

.ignition-page img { background-size: contain; height: var(--size-675px); width: var(--size-120px); }

.slider-page { position: relative; }

.slider-page img { background-size: contain; height: var(--size-675px); width: var(--size-800px); }

.slider-page-text { bottom: 0; color: var(--brand-white); font-size: var(--panel-text-font-size); padding: var(--panel-padding); position: absolute; text-transform: uppercase; }

.slider-text { background-color: rgba(11, 12, 14, 0.5); color: var(--brand-white); padding: var(--panel-padding); position: absolute; font-size: var(--message-title-font-size); width: 100%; text-align: center; top: 40%; }

.apps-wrapper { background-color: var(--brand-black); position: relative; width: 100%; height: var(--size-675px); }

/************************************************** about-us.html */
#about-control { align-items: center; display: flex; flex-direction: row; position: fixed; top: 0; right: 0; width: 20px; height: 100vh; z-index: 10; }

#integrator-control.right { position: absolute; right: 0; width: 10px; }

#samples-control.right { position: absolute; right: 0; width: 10px; }

.slider-integrator, .slider-samples { width: var(--size-800px); height: var(--size-675px); position: absolute; top: 0; left: 0; overflow: hidden; }

.samples-page { position: relative; }

.samples-page img { background-size: contain; height: var(--size-675px); width: var(--size-120px); }

.flow-line, .integrator-line, .samples-line { background-color: white; width: 3px; height: 30px; margin-bottom: 5px; }

.flow-line.active, .integrator-line.active, .samples-line.active { background-color: var(--brand-case); color: white; }

.flow-line:hover, .integrator-line:hover, .samples-line:hover { background-color: var(--brand-case); color: white; cursor: pointer; }

/* The teckstack representation uses a custom representation of the slikc-dots, and the stylesheet below defines the respective bridge */
.slick-dots li.slick-active .flow-line { background-color: var(--brand-case); color: white; }

.slick-dots li.slick-active .integrator-line { background-color: var(--brand-case); color: white; }

.slick-dots li.slick-active .samples-line { background-color: var(--brand-case); color: white; }

.flow-panel-button-wrapper { align-items: center; display: flex; flex-direction: column; }

.flow-panel-button-wrapper img { background-size: contain; width: 20%; height: 20%; }

a .flow-panel-button { background-color: var(--brand-color); border-radius: 0.25rem; color: var(--brand-white); font-size: var(--h3-size); margin: auto; padding: var(--panel-button-padding); margin-top: var(--size-2_5rem); text-align: center; }

a:hover .flow-panel-button { color: var(--brand-white); }

a:visited .flow-panel-button { color: var(--brand-white); text-decoration: none; }

/************************************************** integrations.html */
.ignite { color: rgba(255, 0, 0, 0.8); }

.works { color: rgba(253, 126, 20, 0.8); }

#integrations-control { align-items: center; display: flex; flex-direction: row; position: fixed; top: 0; right: 0; width: 20px; height: 100vh; z-index: 10; }

.subpanel { padding: var(--subpanel-padding); width: 100%; }

.subpanel.w320 { width: var(--size-320px); }

.subpanel.w400 { width: var(--size-400px); }

.subpanel-inner { background-color: rgba(41, 48, 66, 0.2); border: 1px solid rgba(41, 48, 66, 0.7); border-radius: 0.15rem; overflow: hidden; position: relative; width: calc(100% - var(--subpanel-padding) * 2); }

.subpanel-inner.h300 { height: var(--size-300px); }

.subpanel-inner.h450 { height: var(--size-450px) !important; }

.subpanel-inner.h900 { height: var(--size-900px) !important; }

.subpanel-inner.dark { background-color: rgba(41, 48, 66, 0.4); }

.subpanel-inner-label { position: absolute; left: 0; top: 0; padding: calc(var(--subpanel-padding) * 2); color: #f1f5f8; font-size: var(--p-font-size); }

.subpanel-inner-label.black { color: #0b0c0e; }

.subpanel-inner img { background-size: contain; width: 100%; }

.github-icon { width: var(--size-32px); height: var(--size-32px); position: absolute; right: 10px; bottom: 10px; }

.github-icon > img { background-size: contains; width: 100%; }

.works-icon-wrapper { align-items: center; display: flex; flex-direction: column; margin-top: var(--size-3_25rem); margin-bottom: var(--size-1_75rem); width: 100%; }

.works-icon { width: var(--size-128px); }

.works-icon image { background-size: contain; width: var(--size-128px); }

.works-icon-title { color: var(--brand-white); font-size: var(--size-1_75rem); font-weight: 400; text-align: center; text-transform: uppercase; width: 100%; }

.works-icon-text { color: var(--brand-white); font-size: var(--size-1_0rem); padding: var(--panel-padding); padding-bottom: 0; }

/************************************************** techstack.html */
#techstack-control { align-items: center; display: flex; flex-direction: row; position: fixed; top: 0; right: 0; width: 20px; height: 100vh; z-index: 10; }

#computing, #integration { width: var(--size-1200px); height: var(--size-675px); }

.flow-content-wrapper { align-items: center; display: flex; flex-direction: column; }

.panel80 img { background-size: contain; width: 100%; }

.frontend-wrapper { align-items: center; display: flex; flex-direction: column; width: var(--max-width); height: var(--size-675px); }

.frontend-content { align-items: center; display: flex; flex-direction: row; width: calc(var(--size-1200px) + 10px); height: var(--size-675px); }

#front-control { width: 10px; }

.slider-frontend { border: 1px solid #293042; width: var(--size-1200px); height: var(--size-675px); overflow: hidden; }

.frontend-page { position: relative; }

.frontend-page img { background-size: contain; height: var(--size-675px); width: var(--size-120px); }

.frontend-line { background-color: white; width: 3px; height: 30px; margin-bottom: 5px; }

.frontend-line.active { background-color: var(--brand-case); color: white; }

.frontend-line:hover { background-color: var(--brand-case); color: white; cursor: pointer; }

/* The teckstack representation uses a custom representation of the slikc-dots, and the stylesheet below defines the respective bridge */
.slick-dots li.slick-active .frontend-line { background-color: var(--brand-case); color: white; }

/************************************************** linkedin.html */
.linkedin-header-wrapper { align-items: center; background-color: var(--brand-black); display: flex; flex-direction: column; width: 100%; }

.linkedin-header { align-items: center; background-color: var(--brand-black); display: flex; flex-direction: row; padding: var(--message-title-padding); }

.linkedin-title { color: var(--brand-white); font-size: var(--message-title-font-size); font-weight: 200; white-space: nowrap; }

.linkedin-icon { background-color: #0e76a8; border-radius: 0.25rem; margin-left: var(--panel-inner-margin); }

.linkedin-icon > img { background-size: contains; width: var(--size-60px); height: var(--size-40px); }

.linkedin-icon .linkedin-section { background-color: var(--brand-black); padding-top: 20px; padding-bottom: 20px; width: 100%; }

/************************************************** project specific styles */
.vertical { align-items: center; display: flex; flex-direction: column; justify-content: center; }

/* Color styles */
.brand-grey { color: var(--brand-grey); }

.brand-teal { color: var(--brand-color) !important; }

.brand-white { color: var(--brand-white) !important; }

.background-black { background-color: var(--brand-black); }

.background-brand10 { background-color: var(--brand-color10); }

.background-brand90 { background-color: var(--brand-color90); }

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

.background-white { background-color: var(--brand-white); }

.column-content { width: 60%; }

.column-left { width: 20%; }

.column-right { width: 20%; }

.fa-icon { margin: var(--fa-icon-margin); }

a .header-logo { color: var(--brand-white); font-size: var(--header-nav-item-font-size); font-weight: 100; padding: var(--header-logo-padding); text-transform: uppercase; }

.header-nav { align-items: center; display: flex; }

a .header-nav-item { color: var(--brand-white); font-size: var(--header-nav-item-font-size); font-weight: 100; padding: var(--header-nav-item-padding); text-transform: uppercase; }

a .header-nav-item.active { color: var(--brand-color); }

a:hover .header-nav-item { color: var(--brand-color); }

a .header-nav-item.active { color: var(--brand-color); }

.footer-media { display: flex; flex: 1; }

.footer-media-item { width: var(--site-footer-media-width); }

.footer-media-item img { height: 75%; width: 75%; }

.footer-nav { flex: 1; text-align: center; }

a .footer-nav-item { color: var(--brand-white); font-size: var(--header-nav-item-font-size); font-weight: 100; text-transform: uppercase; }

a:hover .footer-nav-item { color: var(--brand-color); }

.footer-text { color: var(--brand-white); flex: 4; font-size: var(--header-nav-item-font-size); font-weight: 100; padding-left: var(--size-1_0rem); text-transform: uppercase; }

.header-wrapper, .footer-wrapper { width: 100%; }

.header-content, .main-content { display: flex; }

.header-content { align-items: center; justify-content: center; }

.header-title { font-size: var(--header-title-font-size); font-weight: 600; text-align: center; text-transform: uppercase; }

.main-nav { border-right: var(--main-nav-border); height: 100%; }

.main-content { flex-direction: column; padding: var(--main-content-padding); height: 100%; }

.nav-container { padding: var(--main-content-padding); }

.nav-main { height: 100%; }

.nav-container > a { text-decoration: none; }

.nav-article { font-size: var(--nav-subtitle-font-size); font-weight: 100; }

a .nav-article { color: var(--brand-grey); padding: var(--nav-article-padding); }

a .nav-article.group.selected { border-bottom: var(--brand-border); }

a .nav-article.item { padding: var(--nav-article-item-padding); }

a:hover .nav-article.item { background: var(--brand-color); border-radius: 0.17rem; color: white; }

a:hover .nav-article.group { background: none; color: var(--brand-color); }

a:visited .nav-article { color: var(--brand-grey); text-decoration: none; }

.nav-title { color: var(--brand-black); font-size: var(--nav-title-font-size); font-weight: 800; padding: var(--nav-title-padding); text-transform: uppercase; }

.nav-subtitle { border-top: var(--brand-border-grey); border-bottom: var(--brand-border-grey); color: var(--brand-black); font-size: var(--nav-subtitle-font-size); font-weight: 400; padding: var(--nav-subtitle-padding); margin: var(--nav-subtitle-margin); }

a:hover .nav-title { color: var(--brand-color) !important; }

a:visited .nav-title { color: var(--brand-black); text-decoration: none; }

.centered { align-items: center; }

.site { width: 100%; }

.site-wrapper { display: flex; flex-direction: column; position: relative; min-height: calc(100vh - 120px); }

/* The current website is based on a single column layout, centered and with a maximum width of 1600px */
.set-maxwidth { max-width: var(--max-width); margin: 0 auto 0 auto; }

/* The leaflet z-index is 400; in order to make sure the site header is always on top of it, it is set  to 499. The leaflet control z-index is 1000, so we finally end up with 1099; */
.site-header { background: var(--brand-black); box-shadow: 0 2px 12px  #293042; display: flex; height: var(--site-header-height); position: sticky; top: 0; width: 100%; z-index: 1099; }

.site-header-title { align-items: center; width: 100%; }

.site-header-content { align-items: center; display: flex; justify-content: space-between; }

.site-footer { background: var(--brand-black); color: var(--brand-grey); font-size: var(--p-size); height: var(--site-footer-height); width: 100%; }

.site-footer-content { align-items: center; display: flex; flex-direction: row; height: var(--site-footer-height); justify-content: center; width: 100%; }

.site-main-message { align-items: center; display: flex; justify-content: space-between; padding: var(--site-main-message-padding); }

.site-header-message { background: white; height: var(--site-header-message-height); width: 100%; }

/* The centered main message for each webpage */
.message-title { color: var(--brand-black); font-size: var(--message-title-font-size); font-weight: 200; padding: var(--message-title-padding); text-align: center; width: 100%; }

.message-subtitle { color: var(--brand-black); font-size: var(--message-subtitle-font-size); font-weight: 100; padding: var(--message-subtitle-padding); text-align: center; width: 100%; }

.message-topic { color: var(--brand-black); font-size: var(--message-topic-font-size); font-weight: 100; padding: var(--message-topic-padding); text-align: left; text-transform: uppercase; width: 100%; }

.horizon-line { border-bottom: var(--brand-border-grey); }

/* Panel style is organized with respect to its width */
.horizon-center { align-items: center; display: flex; justify-content: center; }

.horizon-top { align-items: flex-start; display: flex; }

.panel5 { width: 5%; }

.panel10 { width: 10%; }

.panel15 { width: 15%; }

.panel20 { width: 20%; }

.panel25 { width: 25%; }

.panel33 { width: 33%; }

.panel34 { width: 34%; }

.panel50 { width: 50%; }

.panel70 { width: 70%; }

.panel80 { width: 80%; }

.panel90 { width: 90%; }

.panel-body { min-height: var(--panel-body-height); padding: var(--panel-body-padding); position: relative; }

.panel-frame { border-radius: 0.17rem; border: 1px solid #ddd; margin: var(--panel-frame-margin); }

/* Topic specific frames */
.case-frame { border: 1px solid var(--brand-grey); border-radius: 0.17rem; width: var(--size-800px); height: var(--size-500px); }

.connector-frame, .knowledge-frame { border: 1px solid var(--brand-grey); border-radius: 0.17rem; width: var(--size-800px); height: var(--size-480px); }

.distance-frame { border: 1px solid var(--brand-grey); border-radius: 0.17rem; width: var(--size-800px); height: var(--size-400px); }

.foundation-frame, .diy-frame { border: 1px solid var(--brand-grey); border-radius: 0.17rem; width: var(--size-800px); height: var(--size-425px); }

.intelligence-frame { border: 1px solid var(--brand-grey); border-radius: 0.17rem; width: var(--size-800px); height: var(--size-450px); }

.package-frame, .process-frame { border: 1px solid var(--brand-grey); border-radius: 0.17rem; width: var(--size-800px); height: var(--size-455px); }

.panel-inner { border-radius: 0.17rem; border: 1px solid #293042; margin: var(--panel-inner-margin); }

.panel-inner-small { border-radius: 0.17rem; border: 1px solid #293042; margin: var(--panel-inner-margin-small); padding: 0; }

.panel-inner-small > img { background-size: cover; display: block; width: 100%; }

.panel-logo { height: var(--panel-logo-height); width: var(--panel-logo-width); margin: auto; }

.panel-padding { padding: var(--panel-padding); }

.panel-title { font-size: var(--panel-title-font-size); font-weight: 600; padding: var(--panel-title-padding); text-align: center; }

.panel-subtitle { color: var(--brand-black); font-size: var(--panel-subtitle-font-size); font-weight: 100; padding: var(--panel-subtitle-padding); text-align: center; }

.panel-text { color: var(--brand-black); font-size: var(--panel-text-font-size); line-height: var(--panel-line-height); padding: var(--panel-text-padding); }

.td-desc { width: 100%; }

.panel { align-items: center; display: flex; }

.panel-item { width: 33%; }

.panel-item img { width: 100%; }

.center-flex { align-items: center; display: flex; }

.center-vertical { align-items: center; display: flex; flex-direction: column; }

.center-text { text-align: center; width: 100%; }

/*** misc styles ***/
.about { line-height: var(--about-line-height); padding: var(--about-padding); }

.circle { border-radius: 30%; border-left: 1px solid #ff0000; }

.github { width: var(--github-width); height: var(--github-height); margin: auto; }

.imprint { padding: var(--imprint-padding); }

.imprint.grid { background-color: rgba(41, 48, 66, 0.2); background-image: url("/assets/images/grid-bg.png"); background-repeat: repeat; }

.imprint p { color: var(--brand-white); padding: 0.15rem; margin: 0rem; }

.imprint-subtitle { color: var(--brand-blue); font-size: var(--subtitle-font-size); font-weight: 100; padding: var(--subtitle-padding); text-align: left; width: 100%; }

.italic { font-style: italic; }

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

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

.no-border { border: 0; }

.padding-band { padding: var(--padding-band); }

.uppercase { text-transform: uppercase; }

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

.vertical-line { border-left: var(--brand-border-grey); }

.height600 { min-height: var(--size-600px); }

.width25 { margin: auto; width: 25%; }

.width33 { margin: auto; width: 33%; }

.width50 { margin: auto; width: 50%; }

.width55 { margin: auto; width: 55%; }

.width75 { margin: auto; width: 75%; }

.width80 { margin: auto; width: 80%; }

.width-80 { width: 80%; }

.use-case-title { color: var(--brand-white); font-size: var(--message-subtitle-font-size); position: absolute; text-align: center; top: 45%; width: 100%; }

/*# sourceMappingURL=styles.css.map */