:root {
    --map-padding-right: 0px;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Arnhem Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 12pt;
    background-color: #fff;
    color: #191919;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

html[lang="de"] q {
    quotes: "»" "«" "›" "‹";
}
cite {
    font-style: normal;
}
blockquote {
    margin: 0;
}

code,
tt {
    font-family: "Roboto Mono", "Courier New", Courier, monospace;
    font-size: 0.8em;
}

a:link,
a:link:hover,
a:visited,
a:visited:hover {
    color: inherit;
}

a.button-image {
    outline: none;
}

/* Reset input elements for Safari on MacOS and iOS */
button, input[type=button], input[type=color], input[type=email], input[type=file],
input[type=password], input[type=reset], input[type=search], input[type=submit],
input[type=tel], input[type=text], input[type=url], select, textarea {
    border-radius: 0;
    margin: 0;
    padding: 0;
}
button, input[type=button], input[type=search], input[type=reset], input[type=submit] {
    -webkit-appearance: none;
}

figure {
    margin: 0;
}

input, textarea, select, button {
    font-family: inherit;
    font-weight: inherit;
}
input, textarea, .button {
    border: 2px solid #000;
    background-color: transparent;
}
select {
    border: 2px solid #000;
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

select:not([multiple]), input[type="submit"], #header, body > footer, .button {
    color: #fff !important;
    background-color: #000;
    text-decoration: none !important;
}

/* Main layout */

body {
    box-sizing: border-box;
    max-height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
        -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}
    body > * {
        flex: 0 0 auto;
    }
    #map,
    #inhalt {
        flex: 1 1 auto;
    }

/* Header bar */

#header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    min-height: 36px;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
}
    #header h1 {
        font-weight: inherit;
    }
    #header > :last-child {
        text-align: right;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }

/* Warnings */

.warnings {
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}
.warnings--float {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1;
}
.warnings--static {
    position: absolute;
    bottom: 0;
    width: calc(100% - var(--map-padding-right));
}
.warnings > * {
    margin-top: 1px;
}

/* Browser incompatibility warning */

.browser-warning {
    align-items: center;
    background: black;
    color: white;
    display: flex;
    flex-direction: row;
    padding: 12px 1.8em;
}
.browser-warning {
    display: none;
}

.warnings--float .browser-warning {
    opacity: 0.8;
}

.browser-warning i {
    color: yellow;
    margin-right: 1.8em;
}

.no-csscalc .browser-warning,
.no-csstransforms .browser-warning,
.no-es5 .browser-warning,
.no-strictmode .browser-warning {
    display: flex;
}


/***************
 * Header menu *
 ***************/

#menu_button {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.3em;
    padding: 0 0.5em;
    cursor: pointer;
}
#menu {
    box-sizing: border-box;
    position: absolute;
    top: var(--map-padding-top);
    right: 0;
    display: none;
    max-width: 100%;
    width: 300px;
    font-weight: normal;
    font-style: normal;
    background-color: rgba(0,0,0, 0.8);
    color: #fff;
    padding: 5px 15px 5px 15px;
    text-align: left;
    z-index: 2;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu li {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border-top: 1px solid #fff;
}
#menu a {
    display: inline-block;
    width: 100%;
}
#menu a:link,
#menu a:visited {
    text-decoration: none;
}
#menu .mobile-only  {
    display: none;
}

.top-menu.large-devices {
    display: inline-block;
    list-style: none;
    padding: 0 1em;
}
.top-menu.large-devices li {
    display: inline-block;
}

/* General definitions */

th {
    text-align: left;
}
td, th {
    padding-right: 1em;
    vertical-align: top;
}


/*************
 * Utilities *
 *************/

.aspect-16-9 {
    position: relative;
}
.aspect-16-9:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
}
.aspect-16-9 > .aspect-16-9-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/**************
 * Main pages *
 **************/

.logos > * {
    vertical-align: middle;
}

#header > nav {
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 12pt;
    letter-spacing: 0.05em;
}
    #header > nav a {
        display: inline-block;
        margin-left: 0.7em;
        margin-right: 0.7em;
    }
    #header > nav a:link {
        text-decoration: none;
        outline: none;
    }
    #header > nav > .active,
    #header > nav a:link:hover {
        text-decoration: underline;
    }
    #header > nav > .important {
        font-family: "Roboto Mono","Courier New",Courier,monospace;
        font-weight: normal;
        font-style: normal;
        color: #f00;
    }
    #header > nav > .important:hover {
        color: #f00;
    }
header > nav .beta-version .small-devices {
    font-size: 1.3em;
}
#logo img,
#beta img {
    width: 100%;
    height: 100%;
}
#logo {
    display: inline-block;
    width: 176px;
    height: 22px;
    margin: 6px 0 8px 0;
    padding-left: 40px;
}
#slogan {
    font-family: "Arnhem Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 12pt;
    padding-left: 0.5em;
    white-space: nowrap;
}

.slideshow {
    position: relative;
    list-style: none;
    height: 25vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}
.slideshow > li {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.slideshow-main.small-devices {
    background-color: #000;
}
.slideshow-main, .slideshow-main .slideshow {
    height: 100%;
}
.slideshow-main.small-devices .slideshow {
    height: 89vw;
}
.slideshow-main:after {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    font-size: 3.5em;
    font-weight: 900;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 7px rgba(0,0,0, 0.7);
    pointer-events: none;
    -webkit-animation: bounce-vertical 2s infinite;
            animation: bounce-vertical 2s infinite;
}

.progress-bullets {
    font-size: 0.75em;
    width: 100%;
    text-align: center;
    color: #fff;
    pointer-events: none;
}
.progress-bullets > * {
    display: inline-block;
    padding-right: 0.75em;
    -webkit-transition: color 1.5s, text-shadow 1.5s;
            transition: color 1.5s, text-shadow 1.5s;
}
.progress-bullets > *:last-child {
    padding-right: 0;
}
.progress-bullets > .active {
    color: #000;
}

.slideshow-main .progress-bullets {
    position: absolute;
    bottom: 6em;
}
.slideshow-main .progress-bullets > * {
    -webkit-transition-delay: 0.5s, 0.5s;
            transition-delay: 0.5s, 0.5s;
    text-shadow: 0px 0px 7px rgba(0,0,0, 0.67);
}
.slideshow-main .progress-bullets > .active {
    text-shadow: 0px 0px 7px rgba(255,255,255, 0.75);
}

.beta-tester a {
    display: block;
    position: absolute;
    border-radius: 50%;
    right: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
    -webkit-animation: pop-in 1s;
            animation: pop-in 1s;
    box-shadow: 5px 5px 5px rgba(0,0,0, 0.5);
}
.beta-tester a img {
    width: 100%;
    height: 100%;
}
.home > .slogan {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    padding-left: 70px;
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-style: italic;
    font-size: 22pt;
}
.home > .slogan span {
    display: inline;
    background-color: #000;
    color: white;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}

.newsletter input {
    display: inline-block;
    border: 1px solid #000;
    vertical-align: top;
}
.newsletter input[type=email] {
    color: inherit;
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-size: inherit;
    padding: 0 10px;
    width: 90%;
    max-width: 200px;
    height: 25px;
}
.newsletter input[type=email]::-webkit-input-placeholder {
    font-size: 12pt;
    color: inherit;
    opacity: 1;
}
.newsletter input[type=email]::-moz-placeholder {
    font-size: 12pt;
    color: inherit;
    opacity: 1;
}
.newsletter input[type=email]:-ms-input-placeholder {
    font-size: 12pt;
    color: inherit;
    opacity: 1;
}
.newsletter input[type=submit] {
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-weight: bold;
    background: #f00;
    border-color: #f00;
    color: #fff;
    cursor: pointer;
    padding: 0 0.25em;
    height: 27px;
}

/* Enable kinetic scrolling on iOS */
.home,
.shop,
.gif-wall,
#inhalt {
    -webkit-overflow-scrolling: touch;
}
.map,
.map-article,
.popup-panel main,
.search-box,
#editorial {
    -webkit-overflow-scrolling: touch;
}

.home section:not(.fullsized) {
    padding: 2.5em 10px;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    text-align: center;
}
.home section:not(.fullsized) > main {
    display: inline-block;
    width: 100%;
    max-width: 830px;
    text-align: left;
}
.home > section:not(.fullsized) h2 {
    text-align: center;
}
.home section h2 {
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 20pt;
    margin-bottom: 0.75em;
}
.home .slideshow-main .slogan {
    padding: 0.5em 30px 0.5em 70px;
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 20pt;
    background-color: #000;
    color: #fff;
}

.home section > p {
    line-height: 1.4;
    margin-bottom: 0.5em;
}

.home #about_how .about-usage img {
    vertical-align: top;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
}

#map.home .follow-sidebar {
    font-size: 26px;
    line-height: 1;
    pointer-events: auto;
    bottom: 25%;
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
    width: auto;
    padding: 0.5em 0.3em;
    border-radius: 0 0.5em 0.5em 0;
    background-color: #0ff;
}
#map.home .follow-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#map.home .follow-sidebar li {
    margin-bottom: 0.6em;
}
#map.home .follow-sidebar li:last-child {
    margin-bottom: 0;
}

.swipe-container-horizontal {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    /* Prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.swipe-container-horizontal .nav {
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
            align-items: center;
    min-width: 20px;
    padding: 0 0.5em;
    cursor: pointer;
    -webkit-box-flex: 1;
    -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
}
.swipe-container-horizontal .nav > * {
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
ul.swipe-horizontal {
    list-style: none;
    padding: 0;
}
.swipe-horizontal {
    overflow: hidden;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
.swipe-horizontal > * {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: normal;
    margin-right: 0.25em;
    cursor: move;
}
.swipe-horizontal > :last-child {
    margin-right: 0;
}

.embedded-video {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
}

#about_who .swipe-horizontal > * {
    width: auto;
}
#about_who figure {
    width: 200px;
}
#about_statements figure .portrait,
#about_who figure .portrait {
    margin-bottom: 0.5em;
}
#about_statements figure .portrait img,
#about_who figure .portrait img {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #666;
}

#about_who figure .portrait {
    display: block;
    height: 200px;
    overflow: hidden;
}

#about_why_gallery .slideshow {
    height: 65vh;
}
#about_why_gallery .slideshow > li {
    background-position: 50% 25%;
}

#about_statements figure {
    padding-right: 2em;
}
#about_statements figure .portrait {
    display: inline-block;
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 1.5em;
}
#about_statements figure blockquote {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.2;
    margin-bottom: 0.5em;
    -webkit-hyphens: manual;
       -moz-hyphens: manual;
        -ms-hyphens: manual;
            hyphens: manual;
}
#about_statements figure figcaption {
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-size: 0.75em;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 1em;
}
#about_statements figure figcaption cite {
    font-weight: bold;
}

#about_footer {
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-size: 0.75em;
}
#about_footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#about_footer > main > ul {
    display: inline-block;
    margin-right: 4em;
    margin-bottom: 1em;
    vertical-align: top;
}
#about_footer > main > ul:last-child {
    margin-right: 0;
}
#about_footer li, #about_footer p {
    margin-bottom: 1em;
}
#about_footer li:last-child, #about_footer p:last-child {
    margin-bottom: 0;
}
#about_footer a:link {
    text-decoration: none;
}
#about_footer a:link:hover {
    text-decoration: underline;
}

/* Campaigns */

.campaign button {
    border: none;
    cursor: pointer;
    border-radius: 0;
    background-color: transparent;
}
.campaign button > span {
    background-color: #f00;
    padding: 0.5em 0.75em;
}

.campaign-header {
    position: relative;
    height: 62vw;
    max-height: 100%;
    background-position: center;
}
.campaign-header:after {
    bottom: 20px;
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-size: 2em;
    font-weight: 900;
    position: absolute;
    color: #000;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.7);
    pointer-events: none;
    text-align: center;
    width: 100%;
}
.campaign-header > * {
    padding-left: 40px;
}
.campaign-header > form {
    position: absolute;
    top: 10px;
    right: 20px;
}
.campaign-header header {
    position: absolute;
    top: 30%;
    -webkit-transform: translate(0% -50%);
        -ms-transform: translate(0% -50%);
            transform: translate(0% -50%);
}
.campaign-header h1, #inhalt.campaign h1, .campaign header > h1 {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 56pt;
}
.campaign-header h2, .campaign header > h2 {
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 16pt;
    font-weight: normal;
}
.campaign header.small-devices > h1 {
    font-size: 24pt;
}
.campaign header.small-devices > h2 {
    margin-top: 0.25em;
    font-size: 12pt;
}
.campaign header.small-devices {
    margin-bottom: 2em;
}
.campaign h1 > span, .campaign h2 > span,
#inhalt.campaign h1 > span {
    display: inline;
    background-color: #000;
    color: #fff;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.campaign > .content {
    padding-top: 40px;
    padding-left: 40px;
    max-width: 800px;
    font-size: 14pt;
}
.campaign > .content p {
    margin-bottom: 0.5em;
}
.campaign > .content .pre-cta {
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.campaign > .content button {
    margin-bottom: 2em;
    font-size: 14pt;
}
.campaign .newsletter input[type=submit] {
    color: #000 !important;
    background-color: #f00;
    border: 0;
}
#inhalt.campaign {
    padding: 0;
}
#inhalt.campaign h1 {
    font-size: 32pt;
    margin-bottom: 0.5em;
}

/* Crowdfunding campaign */

.cf-campaign section > *:not(.slideshow) {
    max-width: 50%;
}
.info-sidebar {
    position: fixed;
    right: 0;
    top: 36px;
    width: 33.3%;
    height: 100%;
    padding: 1em 1.5em;
    background-color: rgba(0,0,0, 0.75);
    color: #f2f2f2;
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-size: 1.25em;
    pointer-events: none;
    line-height: 1.4;
}
.info-sidebar a:link {
    pointer-events: auto;
}
.info-sidebar h2 {
    font-size: 0.8em;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.info-sidebar .description {
    font-family: "Arnhem Pro",Georgia,"Times New Roman",Times,serif;
}
.info-sidebar .button {
    border: none;
}
.info-sidebar .button-cta > a {
    display: block;
    font-weight: bold;
    font-size: 2.25vw;
    background-color: #f00;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5vw 0;
    margin: 1em 0;
}

ul#cf_countdown {
    list-style: none;
    padding: 0;
}
#cf_countdown {
    font-family: "Fakt Con Pro",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}
#cf_countdown > * {
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}
#cf_countdown > * > :first-child {
    color: #f00;
    font-size: 7vw;
    margin-top: 0.2em;
    line-height: 0.8;
    border-bottom: 0.4vw solid #f2f2f2;
}
#cf_countdown > * > :last-child {
    margin-top: 0.25em;
}
#cf_countdown > :nth-child(1) > :first-child { font-weight: bold; }
#cf_countdown > :nth-child(2) > :first-child { font-weight: 500; }
#cf_countdown > :nth-child(3) > :first-child { font-weight: normal; }
#cf_countdown > :nth-child(4) > :first-child { font-weight: 200; }

#about_cf_intro {
    background: rgb(150, 211, 207);
}
#about_cf_intro > * {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 2em;
    font-style: italic;
    margin: 0;
}


/* Regular (non-map) content */

#inhalt {
    padding: 20px 20px 20px 50px;
    overflow: auto;
}
#inhalt h1, #inhalt h2, #inhalt h3, #inhalt h4, #inhalt h5, #inhalt h6 {
    margin-bottom: 1em;
}
#inhalt p {
    margin-bottom: 1em;
}
#inhalt a:link {
    text-decoration: underline;
}
#inhalt a:link:hover {
    text-decoration: none;
}
#inhalt > table {
    margin-bottom: 2em;
}
#inhalt.content {
    max-width: 700px;
}

.spalten {
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    -webkit-column-width: 265px;
       -moz-column-width: 265px;
            column-width: 265px;
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
    -webkit-column-fill: auto;
       -moz-column-fill: auto;
            column-fill: auto;
}

.security-content {
    max-width: 800px;
}
.security-content h2 {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 18pt;
    font-style: italic;
    font-weight: normal;
}
#inhalt.security-content h1, #inhalt.security-content h2 {
    margin-bottom: 0.5em;
}
#inhalt.security-content h3, #inhalt.security-content h4,
#inhalt.security-content h5, #inhalt.security-content h6 {
    margin-bottom: 0;
}

.security-form {
    max-width: 600px;
}
.security-form p {
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
}
.security-content .security-form  {
    margin-bottom: 2em;
}

.security-form label:first-child {
    width: 7em;
    min-width: 7em;
    text-align: right;
    margin-top: 0.25em;
    margin-right: 0.5em;
}
.security-form label:last-child {
    margin-left: 0.5em;
}
.security-form input[type="email"],
.security-form input[type="password"],
.security-form input[type="text"] {
    width: 100%;
    max-height: 1.25em;
    padding: 0.25em 0.5em;
}
.security-form input[type="submit"] {
    cursor: pointer;
    padding: 0.25em 0.5em;
}
.security-form input:first-child {
    margin-left: 9em;
}

/* Content edit forms */

.edit-form {
    max-width: 875px;
    margin-bottom: 2em;
}
.edit-form label {
    padding-top: 0.1em;
}
.edit-form label:first-child {
    width: 190px;
    min-width: 190px;
    text-align: right;
    margin-right: 10px;
}
.edit-form p {
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
}
.edit-form input, .edit-form textarea, .edit-form .button {
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 10pt;
}
.edit-form input[type="text"],
.edit-form input[type="number"],
.edit-form input[type="date"],
.edit-form input[type="email"],
.edit-form input[type="password"],
textarea {
    border: none;
    color: rgba(0,0,0, 0.75);
    background-color: rgba(0,0,0, 0.0);
    -webkit-transition: background-color 0.5s, color 0.5s;
            transition: background-color 0.5s, color 0.5s;
    padding: 0.1em 0.25em;
    border-bottom: 1px solid rgba(0,0,0, 0.05);
}
.edit-form input[type="text"]:focus,
.edit-form input[type="number"]:focus,
.edit-form input[type="date"]:focus,
.edit-form input[type="email"]:focus,
.edit-form input[type="password"]:focus,
textarea:focus {
    background-color: rgba(0,0,0, 0.05);
    color: rgba(0,0,0, 1);
}
.edit-form p > span,
.edit-form input[type="text"],
.edit-form input[type="number"],
.edit-form input[type="date"],
.edit-form input[type="email"],
.edit-form input[type="password"],
.edit-form textarea {
    width: 100%;
}
.edit-form :not(span) > input:first-child {
    margin-left: 200px;
}
.edit-form input[type="submit"] {
    cursor: pointer;
}
.edit-form input + .button {
    margin-left: 1em;
}
.edit-form fieldset {
    border: none;
    border-top: 2px dotted #000;
    padding: 0.5em 0 0 0;
    margin: 0 0 1em 0;
}
.edit-form fieldset legend {
    font-style: italic;
}

/************************
 * Map and map elements *
 ************************/

#header h1 .title {
    padding-left: 20px;
}
#header h1 .title a {
    text-decoration: none;
    outline: none;
}

#map {
    position: relative;
    overflow: auto;
}
#map > .map {
    position: absolute;
    top: 0;
}
.map a:link,
.map a:visited {
    text-decoration: none;
}
#map .article {
    -webkit-transition: opacity 2s;
            transition: opacity 2s;
}
/* Scale articles and topics by (6/7)**zoom_level */
.article.level-2, .topic.level-2   { -webkit-transform: scale(0.8571); -ms-transform: scale(0.8571); transform: scale(0.8571); }
.article.level-3, .topic.level-3   { -webkit-transform: scale(0.7347); -ms-transform: scale(0.7347); transform: scale(0.7347); }
.article.level-4, .topic.level-4   { -webkit-transform: scale(0.6297); -ms-transform: scale(0.6297); transform: scale(0.6297); }
.article.level-5, .topic.level-5   { -webkit-transform: scale(0.5398); -ms-transform: scale(0.5398); transform: scale(0.5398); }
.article.level-6, .topic.level-6   { -webkit-transform: scale(0.4627); -ms-transform: scale(0.4627); transform: scale(0.4627); }
.article.level-7, .topic.level-7   { -webkit-transform: scale(0.3966); -ms-transform: scale(0.3966); transform: scale(0.3966); }
.article.level-8, .topic.level-8   { -webkit-transform: scale(0.3399); -ms-transform: scale(0.3399); transform: scale(0.3399); }
.article.level-9, .topic.level-9   { -webkit-transform: scale(0.2914); -ms-transform: scale(0.2914); transform: scale(0.2914); }
.article.level-10, .topic.level-10 { -webkit-transform: scale(0.2497); -ms-transform: scale(0.2497); transform: scale(0.2497); }

.article.level-2 .label  { margin-left: 0; margin-top: -1px; }
.article.level-3 .label  { margin-left: 0; margin-top: -1px; }
.article.level-4 .label  { margin-left: 4px; margin-top: -2px; }
.article.level-5 .label  { margin-left: 8px; margin-top: -2px; }
.article.level-6 .label  { margin-left: 10px; margin-top: -3px; }
.article.level-7 .label  { margin-left: 12px; margin-top: -5px; }
.article.level-8 .label  { margin-left: 14px; margin-top: -5px; }
.article.level-9 .label  { margin-left: 18px; margin-top: -6px; }
.article.level-10 .label { margin-left: 20px; margin-top: -6px; }

.level-2, .level-3, .level-4, .level-5,
.level-6, .level-7, .level-8, .level-9, .level-10 {
    -webkit-transition: opacity 1s;
            transition: opacity 1s;
    opacity: 0;
    pointer-events: none;
}
.zoom-level-2 .level-2, .zoom-level-3 .level-2,
.zoom-level-4 .level-2, .zoom-level-5 .level-2,
.zoom-level-6 .level-2, .zoom-level-7 .level-2,
.zoom-level-8 .level-2, .zoom-level-9 .level-2,
.zoom-level-10 .level-2 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-3 .level-3, .zoom-level-4 .level-3,
.zoom-level-5 .level-3, .zoom-level-6 .level-3,
.zoom-level-7 .level-3, .zoom-level-8 .level-3,
.zoom-level-9 .level-3, .zoom-level-10 .level-3 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-4 .level-4, .zoom-level-5 .level-4,
.zoom-level-6 .level-4, .zoom-level-7 .level-4,
.zoom-level-8 .level-4, .zoom-level-9 .level-4,
.zoom-level-10 .level-4 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-5 .level-5, .zoom-level-6 .level-5,
.zoom-level-7 .level-5, .zoom-level-8 .level-5,
.zoom-level-9 .level-5, .zoom-level-10 .level-5 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-6 .level-6, .zoom-level-7 .level-6,
.zoom-level-8 .level-6, .zoom-level-9 .level-6,
.zoom-level-10 .level-6 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-7 .level-7, .zoom-level-8 .level-7,
.zoom-level-9 .level-7, .zoom-level-10 .level-7 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-8 .level-8, .zoom-level-9 .level-8,
.zoom-level-10 .level-8 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-9 .level-9, .zoom-level-10 .level-9 {
    opacity: 1;
    pointer-events: auto;
}
.zoom-level-10 .level-10 {
    opacity: 1;
    pointer-events: auto;
}

#map .bg {
    -webkit-transition: opacity 1.5s;
            transition: opacity 1.5s;
}
.zoom-level-7 .bg {
    opacity: 0.8;
}
.zoom-level-8 .bg {
    opacity: 0.6;
}
.zoom-level-9 .bg {
    opacity: 0.4;
}
.zoom-level-10 .bg {
    opacity: 0.3;
}

#map .article .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
#map .article .icon a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#map .article.visited .icon a {
    background-color: #ccc !important;
}
#map .article .icon.text a {
    background-image: url('../map/article-text.svg');
}
#map .article .icon.bild a {
    background-image: url('../map/article-image.svg');
}
#map .article .icon.audio a {
    background-image: url('../map/article-audio.svg');
}
#map .article .icon.video a {
    background-image: url('../map/article-video.svg');
}
#map .article .icon.grafik a {
    background-image: url('../map/article-interactive.svg');
}
#map .line {
    /* SVG*/
    stroke: #fff;
    stroke-width: 1px;
}
#map .label {
    white-space: nowrap;
}
#map .topic {
    color: #fff;
}
#map .topic .icon {
    width: 18px;
    height: 18px;
    -webkit-transition: -webkit-transform 0.5s;
            transition: -webkit-transform 0.5s;
            transition: transform 0.5s;
            transition: transform 0.5s, -webkit-transform 0.5s;
}
#map .topic .icon:hover,#map .topic .icon:active {
    -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
            transform: scale(1.25);
}
#map .topic .icon a {
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
}
#map .topic .icon a > * {
    display: block;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
    background-color: #fff;
}
#map .topic .label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}
#map .subject a {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
    background-color: white;
    display: inline;
    padding: 0.1em 0.25em 0 0.25em;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
#map .main.subject a {
    font-size: 38px;
    color: #fff;
    background-color: #000;
}
#map .graphics {
    pointer-events: none;
}


/****************
 * Map controls *
 ****************/

#map .logos {
    position: fixed;
    margin-left: 20px;
    margin-top: 10px;
    z-index: 1;
}
#map .logos > *, #map .logos img {
    display: block;
}
#map .logos img {
    width: 100%;
    height: 100%;
}
#map .logos .logo {
    width: 76px;
    height: 76px;
}
#map .logos .beta {
    width: 66px;
    height: 29px;
    border: 1px solid black;
    margin-top: 4px;
    float: right;
}

.controls {
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-weight: 500;
}
.controls a {
    display: block;
    margin-bottom: 2px;
    text-decoration: none;
}
.controls a img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Tabs */

.tabs {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
}

.tabs .label a:link, .tabs .label a:visited {
    text-decoration: none;
}

.tabs > ul {
    margin: 0;
    padding: 0;
    max-width: 900px;
    text-align: right;
    list-style: none;
}
.tabs .label {
    font-size: 10pt;
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    vertical-align: bottom;
    pointer-events: auto;
    white-space: nowrap;
    letter-spacing: 0.2em;
}
.tabs .label a {
    outline: none;
    text-decoration: none;
}
.tabs .label img {
    vertical-align: bottom;
}
.tabs .body {
    display: none;
    pointer-events: auto;
    overflow: hidden;
    background-color: rgba(255,255,255, 0.95);
    border-top: 7px solid black;
}
.tabs .body.active {
    display: block;
}

.tabs .body .close {
    position: absolute;
    right: 0;
    top: 0.5em;
    font-size: 2.5em;
}
.tabs .body .close a {
    text-decoration: none;
}

.tabs .body > h2 {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 1.5em;
}
.tabs .body > h2 a {
    text-decoration: none;
}
.tabs .body > * {
    padding: 10px 20px;
}
.tabs .body img {
    vertical-align: bottom;
}

/* Editorial */

#editorial {
    background: rgba(0,0,0, 0.75);
    color: #fff;
    overflow-y: auto;
}
#editorial h2 {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 1.5em;
    margin-top: 1em;
}
#editorial h3 {
    margin-bottom: 1em;
}
#editorial section > * {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
#editorial > section:nth-child(2) {
    padding-top: 2em;
    padding-bottom: 1em;
}
#editorial > section:nth-child(2) .button,
#editorial > section:last-child .button {
    margin-bottom: 1em;
}
#editorial > section {
    padding-top: 0;
    padding-bottom: 3em;
}

#editorial .team figure {
    display: -webkit-box;
    display:     -ms-flexbox;
    display:         flex;
    overflow: hidden;
    margin-bottom: 2em;
}
#editorial .team .portrait {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-right: 1.5em;
    overflow: hidden;
    border-radius: 49.9%;
}
#editorial .team .portrait,
#editorial .team .portrait img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center top;
}
#editorial .team figcaption {
    -webkit-box-flex: 0;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
}

#editorial video,
#editorial img {
    width: 100%;
}


/* Forum */

.forum {
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
}
.forum .menu, .forum .posts {
    padding-bottom: 1.5em;
}
.forum .menu {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    min-width: 16em;
    padding-right: 3em;
}
.forum .menu , .forum .menu ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.forum .menu a:link, .forum .menu a:visited {
    text-decoration: none;
}
.forum .menu ul {
    padding-left: 0;
}
.forum .menu li li > div { padding-left: 1.5em; }
.forum .menu li li li > div { padding-left: 3em; }
.forum .menu li li li li > div { padding-left: 4.5em; }
.forum .menu li > div {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid #000;
}
.forum .menu li > ul {
    display: none;
}
.forum .menu li.active > ul {
    display: block;
}
.forum .menu li > div > i {
    padding-left: 0.25em;
}
.forum .menu .active > div > a {
    font-weight: bold;
    font-style: italic;
}
.forum .posts {
    line-height: 1.4;
    max-width: 800px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
.forum .posts h1, .forum .posts h2, .forum .posts h3,
.forum .posts h4, .forum .posts h5, .forum .posts h6 {
    margin-top: 1em;
}
.forum .posts > h1:first-child, .forum .posts > h2:first-child,
.forum .posts > h3:first-child, .forum .posts > h4:first-child,
.forum .posts > h5:first-child, .forum .posts > h6:first-child {
    margin-top: 0;
}
.forum .posts h1, .forum .posts h2, .forum .posts h3 {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-size: 1.5em;
    font-style: italic;
}
.forum .posts > .description {
    font-weight: bold;
    margin-bottom: 1em;
}
.forum .posts article, .forum .posts .article {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid #000;
    margin-top: 0.5em;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
}
.forum .posts article .avatar {
    min-width: 4.5em;
}
.forum .posts article .avatar img {
    width: 45px;
    height: 45px;
}
.forum .posts article :last-child {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
.forum .posts article .info {
    margin-bottom: 1em;
}
.forum .posts blockquote {
    margin-left: 1.75em;
}
.forum .posts blockquote:before {
    content: "\f10e";
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    height: 0;
    left: -1.75em;
    position: relative;
}
.forum .posts article .reply {
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 1em;
}
.forum .posts article .reply a {
    word-spacing: 0.25em;
    display: inline-block;
    margin-right: 1em;
    text-decoration: none;
}
.forum .posts .md-editor, .forum .posts textarea {
    border: 1px solid #000;
    width: 100%;
    min-height: 6em;
}
.forum .posts textarea {
    font-family: inherit;
}

/* Contents */

.contents-index {
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 0.9em;
    font-weight: 900;
    margin-bottom: 1em;
}
.contents-index > * {
    text-decoration: none;
}
.contents-index > .active, .contents-index > .active:hover {
    background-color: #000;
    color: #fff;
}

.contents {
    /* See glossary */
}

.contents article, .contents article > section {
    -webkit-column-break-inside: avoid;
              page-break-inside: avoid;
                   break-inside: avoid;
}

.contents article {
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    border-top: 1px solid #000;
    padding-top: 0.5em;
    margin-bottom: 2.5em;
}
.contents article > aside {
    padding-right: 0.75em;
    -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
}
.contents article > aside img {
    background-color: #000;
    border-radius: 50%;
    width: 3em;
    height: 3em;
}

.contents article > section {
    -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
}
.contents article > section img {
    display: inline-block;
    border: 1px solid #000;
    margin-top: 1em;
    width:95%;
    height:auto;
}
.contents article > section code {
    font-weight: bold;
}

/************
 * Glossary *
 ************/

/* Glossary terms in the table of contents section on the map */
.glossary > * > :last-child {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s, opacity 0.5s;
}
.glossary > *.active > :last-child {
    max-height: 100em; /* This restricts the glossary description to 100 lines. */
    opacity: 1;
}

/* A highlighted glossary term in a popup or article text */
.glossary-term {
    font-weight: inherit;
    font-style: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
}
/* Definition tooltip for a highlighted glossary term */
.ui-tooltip {
    padding: 0.25em 0.5em;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 0 0 10px rgba(0,0,0, 0.5);
    border-radius: 0.2em;
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/**********
 * Footer *
 **********/

body > footer  {
    height: 0;
}


/*********************
 * Map overview page *
 *********************/

#map.maps {
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
}
.maps {
    position: relative;
}

.maps > div {
    font-size: 14pt;
}

.maps > .menu {
    position: fixed;
    right: 0;
    z-index: 1;
}
.maps > .menu a {
    display: inline-block;
}

.maps .sections {
    white-space: nowrap;
    overflow: visible;
}
.maps .nav-left a, .maps .nav-right a {
    height: 100%;
    outline: none;
}

.maps .sections > section {
    display: inline-block;
    position: relative;
    white-space: normal;
    vertical-align: top;
    -webkit-transition: opacity 0.5s;
            transition: opacity 0.5s;
}
.maps .sections > section.outside {
    opacity: 0.4;
}
.maps section > .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.maps section > .bg > :first-child {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}
.maps section.protected > .bg:before {
    font-family: "Font Awesome 5 Free";
    font-size: 1.25em;
    font-weight: 900;
    content: "\f023";
    position: absolute;
    right: 1.5em;
    top: 0.5em;
    width: 0.6em;
    height: 1.1em;
}
.maps section > .content {
    width: 95vw;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.maps section.protected > .content {
    color: rgba(0,0,0, 0.5);
}
.maps section > .content > div {
    min-height: 100%;
    padding: 10px 150px 40px 40px;
    background: -webkit-linear-gradient(top, rgba(255,255,255, 0), rgba(255,255,255, 0) 10vh, rgba(255,255,255, 1) 100vh);
    background:         linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 0) 10vh, rgba(255,255,255, 1) 100vh);
}
.maps section > .content > div > * {
    max-width: 700px;
}
.maps section > .content > div > header {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    min-height: 80vh;
}
.maps section > .content > div > header > .info {
    margin-bottom: 1em;
}
.maps section > .content > div > header > .info .beta {
    color: #f00;
}
.maps section > .content > div > header > .info, .maps section > .content > div > .tags {
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 0.6em;
}
.maps section > .content > div > header > h1 {
    max-width: 10em;
    font-size: 3em;
    line-height: 1.1;
    margin-bottom: 0.5em;
}
.maps section > .content > div > header > h1 > a {
    display: inline;
    text-decoration: none;
    background-color: #000;
    color: #fff;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.maps section > .content > div > header > .intro {
    font-size: 1.25em;
    max-width: 25em;
}
.maps section > .content > div > header > .intro p,
.maps section > .content > div > header > .enter a {
    display: inline;
    background-color: #fff;
    color: #000;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.maps section > .content > div > .tags {
    border-top: 1px solid #000;
}
.maps section > .content > div > .authors {
    font-size: 1.25em;
}
.maps section > .content > div > .authors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.maps section > .content > div > .authors .ui-accordion-header {
    cursor: pointer;
    outline: none;
}
.maps section > .content > div > .authors .ui-accordion-header-active {
    font-style: italic;
    text-decoration: underline;
}
.maps section > .content > div > .authors .ui-accordion-content {
    margin-right: 200px;
    font-size: 0.8em;
    padding-bottom: 1em;
}
.maps section > .content > div > header > .enter {
    margin-top: 1em;
    font-family: "Roboto Mono", "Courier New", Courier, monospace;
    font-size: 0.8em;
}
.maps section > .content > div > header > .enter > a {
    padding: 0 0.5em 0 0.1em;
    color: #f00;
    text-decoration: none;
}
.maps section > .content > div > .enter {
    position: absolute;
    right: 40px;
    top: 40px;
}
.maps section > .content > div > .enter a {
    display: block;
    width: 5vw;
    height: 5vw;
    padding: 1vw;
    background-color: #f00;
    border: 1px solid #000;
    border-radius: 50%;
    text-align: center;
    font-size: 1.75vw;
    font-weight: bold;
    line-height: 1.1;
    text-decoration: none;
    outline: none;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-name: pop-in;
            animation-name: pop-in;
    box-shadow: 5px 5px 5px rgba(0,0,0, 0.5);
}
@-webkit-keyframes pop-in {
    from {
        opacity: 0;
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(1.25);
                transform: scale(1.25);
        box-shadow: 10px 10px 10px rgba(0,0,0, 0.25);
    }
    to {
        -webkit-transform: scale(1);
                transform: scale(1);
        box-shadow: 5px 5px 5px rgba(0,0,0, 0.5);
    }
}
@keyframes pop-in {
    from {
        opacity: 0;
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(1.25);
            -ms-transform: scale(1.25);
                transform: scale(1.25);
        box-shadow: 10px 10px 10px rgba(0,0,0, 0.25);
    }
    to {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
        box-shadow: 5px 5px 5px rgba(0,0,0, 0.5);
    }
}
.maps .nav-left, .maps .nav-right {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 36px;
    margin-top: 0;
    font-size: 24pt;
    -webkit-transition: opacity 0.5s;
            transition: opacity 0.5s;
}
.maps .nav-left.active, .maps .nav-right.active {
    opacity: 1;
    pointer-events: auto;
}
.maps .nav-left {
    text-align: right;
    left: 0;
}
.maps .nav-right {
    text-align: left;
    right: 0;
}
.maps .nav-left a, .maps .nav-right a {
    display: block;
    width: 25px;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-align:   center;
    -webkit-align-items: center;
        -ms-flex-align:  center;
            align-items: center;
    text-decoration: none;
    text-shadow: 0 0 5px #fff;
}
.maps .nav-left a {
    padding-left: 5px;
}
.maps .nav-right a {
    padding-right: 5px;
}

/* Polls on map overview page */

.maps .poll {
    margin-bottom: 3em;
}
.maps .poll > header, .maps .poll > footer {
    margin-bottom: 1em;
}
.maps .poll .question {
    border-top: 1px solid #000;
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 0.7em;
    margin-bottom: 2em;
}
.maps .poll .question p {
    margin-bottom: 0.25em;
}
.maps .poll .question header, .maps .poll .question > div:first-child {
    margin-bottom: 1em;
}
.maps .poll input {
    font-family: "Roboto Mono","Courier New",Courier,monospace;
}
.maps .poll input[type="submit"] {
    cursor: pointer;
}
.maps .poll th {
    font-weight: normal;
}
.maps .poll td {
    text-align: center;
}

/****************
 * Article page *
 ****************/

.map-article {
    overflow-x: hidden;
    overflow-y: scroll;
}
.map-article > article {
    font-size: 14pt;
}
.map-article > article > header,
.article-content > * {
    padding-left: 55px;
    padding-right: 15px;
}

.map-article > article > header {
    position: relative;
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh - 36px);
}

.map-article > article > header > div {
    position: absolute;
    bottom: 4em;
}
.map-article > article > header h1 {
    max-width: 14em;
    font-size: 3em;
    font-family: "Arnhem Display Pro", Georgia, "Times New Roman", serif;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 0.25em;
}
.map-article > article > header h2 {
    max-width: 30em;
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-style: normal;
    font-weight: 500;
}
.map-article > article > header h1 > span,
.map-article > article > header h2 > span {
    display: inline;
    background-color: #000;
    color: white;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.map-article > article > header:after {
    position: absolute;
    left: 0;
    bottom: 30px;
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-size: 20pt;
    font-weight: 900;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
.article-content {
    margin-bottom: 2em;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
}
.article-content > main {
    margin-top: 1em;
    -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
}
.article-content > main > .intro {
    font-weight: bold;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
.article-content > main > .intro p {
    margin-bottom: 0;
}
.article-content > main > h1,
.article-content > main > h2 {
    font-family: "Arnhem Display Pro",Georgia,"Times New Roman",Times,serif;
    font-style: italic;
    font-size: 1.5em;
}
.article-content > main > h2 {
    font-weight: normal;
}
.article-content > main img {
    height: auto;
}
.article-content > main img,
.article-content > main audio,
.article-content > main video {
    max-width: 100%;
}
.article-content > main audio {
    width: 100%;
}
.article-controls {
    font-size: 0.9em;
    color: #fff;
    left: 20px;
    right: auto;
    top: 15px;
    z-index: 1;
}
.article-controls a {
    background: #000;
    padding: 0.25em 0.5em;
}
.map-article .series {
    font-size: 10pt;
    line-height: 1.4;
    margin-bottom: 50px;
}
.map-article .series h2 {
    padding-top: 1em;
    border-top: 2px solid #000;
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 1.1em;
    font-weight: normal;
    font-style: normal;
}
.map-article .series p {
    opacity: 0.6;
    margin-bottom: 0;
}
.map-article .series p:before {
    content: ' \f124';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 0.5em;
}
.map-article .series p a:link {
    font-weight: bold;
}
.map-article .series p a:link:after {
    content: '\f064';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 0.25em;
}
.map-article .share span a {
    display: inline-block;
    margin-right: 1em;
}

.article-content > main {
    max-width: 850px;
    line-height: 1.3;
}
.article-content > main p {
    margin-bottom: 1em;
}

.article-content > main .footnote {
    position: relative;
    font-size: 0.8em;
    vertical-align: super;
    text-decoration: none;
    outline: none;
}
.article-content > main .footnote:focus:after {
    position: absolute;
    top: 0;
    -webkit-transform: translate(-50%, -100%) translate(0, -12px);
        -ms-transform: translate(-50%, -100%) translate(0, -12px);
            transform: translate(-50%, -100%) translate(0, -12px);
    content: attr(data-footnote);
    width: 300px;
    text-indent: 0;
    padding: 10px 10px 10px 15px;
    background-color: #fff;
    border: 1px solid black;
}
.article-content > main .footnote:focus:before {
    position: absolute;
    top: 0;
    -webkit-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
            transform: translate(0, -100%);
    margin-left: -4px;
    content: "";
    width: 24px;
    height: 14px;
    background: url(/static/map/popup-arrow-down.png) 0 0 / cover no-repeat;
    z-index: 2;
}

.article-content > aside {
    width: 25em;
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 10pt;
    line-height: 1.4;
    -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
}
.article-content > aside > * {
    margin-bottom: 1.5em;
}
.article-content > aside a:link {
    text-decoration: none;
    font-weight: bold;
}
.article-content > aside a:link:hover {
    text-decoration: underline;
}
.article-content > aside > .description {
    margin-top: 1.5em;
}
.article-content > aside > .description p {
    margin-bottom: 0;
}
.map-article .tags,
.map-article .position {
    position: relative;
}
.map-article .tags {
    font-weight: 100;
}
.map-article .tags:before {
    content: '\f02c';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 0.5em;
}
.map-article .tags span {
    display: inline-block;
    font-style: italic;
}
.map-article .position {
}
.map-article .position > :first-child:before {
    content: '\f124';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 1em;
}
.map-article .sources h2 {
    font-weight: normal;
}

/* Articles with quotes in title headline */

.map-article > article.interview > header h1,
.map-article > article.video-interview > header h1 {
    max-width: 16em;
    font-size: 2.5em;
    font-style: italic;
}
.map-article > article.interview > header h2,
.map-article > article.video-interview > header h2 {
}


/* Text article */

.map-article > article.text > .article-content > main ul {
    padding-left: 0.8em;
}
.map-article > article.text > .article-content > main li > p > img {
    max-width: 100%;
    height: auto;
}

/* text/interview article */

.start-accordion {
    display: none;
}

.article-content > main .ui-accordion {
    list-style: none;
    padding-left: 0;
}
.article-content > main .ui-accordion > li {
    position: relative;
    padding-left: 40px;
    padding-left: 2.5rem;
}
.article-content > main .ui-accordion .ui-accordion-header {
    margin-bottom: 1em;
    cursor: pointer;
}
.article-content > main .ui-accordion .ui-accordion-header {
    font-weight: bold;
    font-style: italic;
}
.article-content > main .ui-accordion .ui-accordion-header:before {
    position: absolute;
    left: 0;
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.article-content > main .ui-accordion .ui-accordion-header-active:before {
    content: '\f078';
}
.article-content > main .ui-accordion .ui-accordion-content {
    margin-bottom: 1em;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

/* text/essay article */

.map-article > article.essay > .article-content > main .ui-accordion-header {
    font-family: "Roboto Mono","Courier New",Courier,monospace;
    font-size: 0.8em;
    padding-bottom: 0.15em;
    background-color: #000;
    color: #fff;
}
.map-article > article.essay > .article-content > main .ui-accordion-header > p {
    margin-bottom: 0;
}
.map-article > article.essay > .article-content > main .ui-accordion-header:before {
    position: absolute;
    top: 0.2em;
    left: 1px;
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8em;
}
.map-article > article.essay > .article-content > main .ui-accordion-header-active:before {
    content: '\f078';
}
.map-article > article.essay > .article-content > main .ui-accordion-content {
    padding-left: 0;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
.map-article > article.essay > .article-content > main .ui-accordion-content p,
.map-article > article.essay > .article-content > main .ui-accordion-content h2 {
    text-indent: 40px;
    text-indent: 2.5rem;
}
.map-article > article.essay > .article-content > main .ui-accordion-content p:first-child {
    text-indent: 0;
}
.map-article > article.essay > .article-content > main .ui-accordion-content h2 {
    font-family: inherit;
    font-weight: bold;
    font-style: normal;
    margin-bottom: 0.5em;
}

/* text/gallery article */

.map-article > article.gallery header {
    box-sizing: border-box;
    background-position: center;
}

.map-article > article.gallery > .article-content > main > p:not(.tags) {
    text-indent: 40px;
    text-indent: 2.5rem;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
.map-article > article.gallery > .article-content > main > p:first-child,
.map-article > article.gallery > .article-content > main > h2 + p {
    text-indent: 0 !important;
}

.map-article > article.gallery .gallery-container {
    list-style: none;
    position: relative;
    padding-left: 0;
    padding-top: 0.75em;
    padding-bottom: 0.5em;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
}
.map-article > article.gallery > .article-content > main ul.gallery-container li {
    padding-left: 0;
}
.map-article > article.gallery .gallery-container figure {
    margin: 0;
}
.map-article > article.gallery .gallery-container img {
    width: 100%;
}
.map-article > article.gallery .gallery-container .ratio-wrapper {
    position: relative;
    padding-top: 56%;
    margin-bottom: 0.5em;
}
.map-article > article.gallery .gallery-container iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.map-article > article.gallery .gallery-container figcaption {
    padding-top: 0.5em;
    border-top: 2px solid #000;
}
.map-article > article.gallery .gallery-container .gallery-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.map-article > article.gallery .gallery-container .gallery-nav a {
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    width: 30px;
    height: 100%;
    pointer-events: auto;
        -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
           -webkit-box-pack: center;
    -webkit-justify-content: center;
              -ms-flex-pack: center;
            justify-content: center;
    text-decoration: none;
    -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    font-size: 1.5em;
    text-shadow: 0 0 4px #fff, 0 0 2px #fff;
    outline: none;
}
.map-article > article.gallery .gallery-container .gallery-nav a > * {
    display: block;
    -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    width: 30px;
    height: 30px;
}


/* media articles (video, audio, etc.) */

.map-article > article.media header {
    background-position: center center;
}

.map-article > article.media header .start {
    color: #000;
    font-size: 20vh;
    margin-top: 0.6em;
    text-align: center;
    opacity: 0.65;
    position: absolute;
    left: 50%;
    top: 25vh;
    -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
            transform: translate(-50%);
}

/* media/video articles */

.video-lightbox {
    position: fixed;
    z-index: 3;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.video-lightbox-content {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-align:   center;
        -ms-flex-align:  center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack:        center;
        -ms-flex-pack:       center;
    -webkit-justify-content: center;
            justify-content: center;
}


/***********
 * Dialogs *
 ***********/

.dialog {
    font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    line-height: 1.5;
}
.dialog h1 {
    font-family: inherit;
    font-size: 2em;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 0.4em;
}
.dialog section {
    max-width: 700px;
    padding-top: 2em;
    padding-bottom: 4em;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    overflow-x: hidden;
    overflow-y: auto;
}
.dialog section img {
    margin-top: 2em;
}
.dialog a.next {
    font-size: 3em;
}
.dialog nav {
    text-align: right;
    margin-top: -5.5em;
}
.dialog > .close {
    position: absolute;
    right: 0;
    top: 0;
}

.flashes, .security-form ul {
    list-style: none;
    padding: 0;
}
.flashes li, .security-form ul > li {
    font-style: italic;
    background: rgba(0,0,0, 0.1);
    padding: 0.25em 0.5em;
}
.security-form ul > li {
    background-color: rgba(240,0,0, 0.1);
}

.security-menu {
    list-style: none;
    margin-top: 2em;
    padding: 0;
}
.security-menu li {
    display: inline-block;
    margin-right: 1.5em;
}


/**********
 * Share *
 **********/

.social-share-btn,
.social-share-link {
    align-items: center;
    border: none;
    cursor: pointer;
    display: inline-flex;
    background-color: #3c3c3c;
    border-radius: 16px;
    height: 30px;
    list-style: none;
    margin: 8px;
    text-align: center;
    width: 30px;
}
.social-share-btn i,
.social-share-link > i,
.social-share-link > a {
    align-items: center;
    color: white;
    display: flex;
    font-size: 18px;
    height: 100%;
    justify-content: center;
    text-decoration: none;
    width: 100%
}
.social-share-link:hover,
.social-share-link:hover > a {
    color: white;
}

/********************
 * Responsive rules *
 ********************/

.small-devices:not(.large-devices) {
    display: none;
}

@media only screen and (max-width: 1024px) {
    #blog-about {
        margin-left: 2em;
    }
    .maps section > .content > div > h1 {
        font-size: 24pt;
    }
    .map-article > article > header {
        background-attachment: scroll;
    }
}
@media only screen and (max-width: 900px) {
    #inhalt {
        padding-left: 25px;
    }
    #blog-about {
        display: none;
    }
    header > nav .large-devices,
    header > nav .top-menu.large-devices {
        display: none;
    }
    header > nav .beta-version .large-devices {
        display: inline-block;
    }
    header > nav .beta-version .small-devices {
        display: none;
    }
    nav .top-menu.small-devices,
    nav .burger-menu-icon.small-devices {
        display: block;
    }
    .home > .slogan, .home .intro, .home .beta-tester {
        padding-left: 50px;
    }
    #logo  {
        padding-left: 25px;
    }
    .article-content {
        display: block;
    }
    .article-content > aside {
        width: auto;
    }
}
@media only screen and (max-width: 768px), only screen and (max-height: 640px) {
    .maps > div {
        font-size: 10pt;
    }
    .maps section > .content > div > h1 {
        font-size: 18pt;
    }
    .maps section.protected > .bg > a:after {
        font-size: 1.5em;
    }
    .map-article > article > header, .article-content > * {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media only screen and (max-height: 700px) {
    .map-article > article .large-devices {
        display: none;
    }
    .map-article > article header.small-devices {
        display: block;
        height: auto;
    }
}
@media only screen and (max-width: 640px) {
    #blog-logo {
        width: 200px;
        height: 39px;
    }
    #slogan, .slogan.large-devices {
        display: none;
    }
    .slogan.small-devices {
        display: block;
    }
    .maps section > .content > div {
        padding-right: 15px;
    }
    .maps section > .content > div > .enter {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 1em;
    }
    .maps section > .content > div > .enter a {
        width: 65px;
        height: 65px;
        padding: 10px;
        font-size: 16pt;
    }
    .map-article > article header h1 {
        font-size: 2em;
    }
    .map-article > article.interview header h1,
    .map-article > article.video-interview header h1 {
        font-size: 1.5em;
    }
    .map-article > article header h2 {
        font-size: 0.9em;
    }
}
@media only screen and (max-width: 568px) {
    .blog article h2 {
        font-size: 22pt;
    }
    .blog article > div, .article > div {
        font-size: 12pt;
    }
    .blog article .share span a {
        margin-right: 1em;
    }
    .campaign .large-devices {
        display: none;
    }
    .campaign .small-devices {
        display: block;
    }
}
@media only screen and (max-width: 480px), only screen and (max-height: 480px) {
    #inhalt, #blog-logo {
        padding-left: 20px;
    }
    #logo, .home > .slogan, .home .intro, .home section:not(.fullsized), .home .slideshow-main .slogan {
        padding-left: 15px;
        padding-right: 10px;
    }
    .maps section > .content > div > .authors .ui-accordion-content {
        margin-right: 120px;
    }
    #logo {
        padding-right: 0;
    }
    #header .large-devices, .home .slideshow-main.large-devices,
    header > nav .beta-version .large-devices, #about_what .large-devices {
        display: none;
    }
    #header .small-devices, .home .slideshow-main.small-devices,
    #about_what .small-devices {
        display: block;
    }
    header > nav .beta-version .small-devices {
        display: inline-block;
    }
    #about_statements figure .portrait {
        margin-right: 1em;
        margin-bottom: 0.75em;
    }
    #about_statements figure .portrait, #about_statements figure .portrait img {
        width: 75px;
        height: 75px;
    }
    #about_statements figure figcaption {
        display: table-cell;
        height: 75px;
        vertical-align: bottom;
    }
    #about_statements figure blockquote {
        clear: both;
    }
    .home #about_statements figure blockquote {
        font-family: "Fakt Pro",Helvetica,Arial,sans-serif;
        font-size: 1em;
    }
    .home .about-usage.large-devices {
        display: none;
    }
    .home .about-usage.small-devices {
        display: block;
    }
    .home .follow-sidebar {
        display: none;
    }

    #header h1 .title {
        padding-left: 10px;
    }
    #map .logos {
        margin-left: 10px;
    }
    #map .logos .logo {
        width: 66px;
        height: 66px;
    }
    #map .logos .beta {
        width: 57px;
        height: 25px;
    }
    .article-controls {
        left: 10px;
    }
    body > footer {
        padding-left: 10px;
        padding-right: 10px;
    }
    #menu .mobile-only {
        display: list-item;
    }
    .tabs:not(.small-devices) {
        display: none;
    }
    .map-article > article {
        font-size: 12pt;
    }
    .map-article > article > header, .article-content > * {
        padding-left: 10px;
        padding-right: 10px;
    }
    .map-article > article > header h1, .map-article > article > header h2 {
        max-width: 100%;
    }
    .map-article > article > header h1 {
        font-size: 2em;
        line-height: 1.1;
    }
    .map-article > article > header h2 {
        font-size: 0.8em;
    }
    .map-article > article.essay > .article-content > main .intro {
        font-size: 1.5em;
        line-height: 1.2;
    }
    .map-article > article.text > .article-content > aside {
        font-size: 8pt;
    }
    .map-article > article.text > .article-content > main ul > li {
        padding-left: 1.5rem;
    }
    .dialog {
        line-height: 1.2;
    }
    .dialog section {
        padding-top: 1em;
    }
    .dialog h1 {
        line-height: 1;
    }
    .dialog .close {
        -webkit-transform-origin: 100% 0;
            -ms-transform-origin: 100% 0;
                transform-origin: 100% 0;
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
    }
    .dialog nav {
        margin-top: 0;
    }
    .dialog .large-devices {
        display: none;
    }
    .dialog .small-devices {
        display: block;
    }
    .cf-campaign section > *:not(.slideshow) {
        max-width: none;
    }
    .info-sidebar {
        position: static;
        font-size: 1em;
        width: 100%;
        pointer-events: auto;
        box-sizing: border-box;
        background-color: #2e2a2b;
    }
    .info-sidebar .button-cta > a {
        font-size: 1.1em;
        padding: 1.5em 0.5em;
    }
    #cf_countdown > * > *:first-child {
        font-size: 4em;
        border-bottom-width: 0.05em;
    }
    .cf-campaign .large-devices {
        display: none;
    }
    .cf-campaign .small-devices {
        display: block;
    }
    .cf-campaign .slideshow-main {
        /* preserve 16:9 aspect ratio */
        height: 56.25vw;
    }
    .cf-campaign .slideshow-main:after {
        display: none;
        content: "";
    }
    .cf-campaign #about_cf_intro > * {
        font-size: 1.5em;
    }
    .social-share-btn, .social-share-link {
          border-radius: 15px;
          height: 27px;
          margin: 7px;
          width: 27px;
    }
}
@media only screen and (max-width: 335px) {
    #inhalt, #blog-logo {
        padding-left: 13px;
        padding-right: 13px;
    }
    #logo, .home > .slogan, .home .intro, .home section:not(.fullsized), .home .slideshow-main .slogan {
        padding-left: 13px;
        padding-right: 10px;
    }
    .newsletter .email input {
        width: 170px;
    }
    .slideshow-main:after {
        bottom: -0.3em;
        font-size: 1.8em;
    }
    .slideshow-main .progress-bullets {
        bottom: 2em;
    }
    .home #about_who figure .portrait {
        height: 150px;
    }
    .home #about_who figure,
    #about_who figure .portrait img {
        width: 100%;
        height: auto;
    }
    #about_who figure .portrait img {
        position: relative;
        top: -20px;
    }
    .progress-bullets > * {
        padding-right: 0.5em;
    }
    .progress-bullets > :last-child {
        /* Space for arrow */
        padding-right: 30px;
    }
    .tabs .label {
        margin-right: 2px;
    }
    .maps section > .content > div > .authors .ui-accordion-content {
        margin-right: 0;
    }
    .map-article .share span a {
        margin-right: 0.5em;
    }
}
@media only screen and (max-width: 320px) {
    .blog article .share a {
        margin-right: 2em;
    }
}
@-webkit-keyframes bounce-vertical {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-0.5em);
                transform: translateY(-0.5em);
    }
    60% {
        -webkit-transform: translateY(-0.25em);
                transform: translateY(-0.25em);
    }
}
@keyframes bounce-vertical {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-0.5em);
                transform: translateY(-0.5em);
    }
    60% {
        -webkit-transform: translateY(-0.25em);
                transform: translateY(-0.25em);
    }
}
@-webkit-keyframes slide-in {
    to {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}
@keyframes slide-in {
    to {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@media print {
    body {
        display: block;
    }
    #map {
        height: auto !important;
    }
    #header,
    #map nav,
    .controls,
    .map-article > article > header:after,
    .map-article .share {
        display: none;
    }
    .map-article > article > header,
    .article-content > * {
        padding-left: 0;
        padding-right: 0;
    }
    .map-article > article > header {
        height: auto;
        background: none;
    }
    .map-article > article > header > div {
        position: static;
        padding-bottom: 1em;
    }
    .map-article > article > header h1 > span,
    .map-article > article > header h2 > span {
        background-color: transparent;
        color: #000;
        -webkit-box-decoration-break: unset;
                box-decoration-break: unset;
    }
    .article-content {
        display: block;
    }
    .article-content li.answer {
        display: list-item !important;
    }
}