:root {
    --black-red-gold: linear-gradient(to bottom, black 33.33%, crimson 33.33%, crimson 66.67%, gold 66.67%);
    --dk-red: #c60c30;
    --no-red: #ba0c2f;
    --ch-red: #da291c;
    --mk-red: #ce2028;
    --mt-red: #cf142b;
    --us-red: #b22234;
    --us-blue: #3c3b6e;
    --fi-blue: rgb(24,68,126);
    --is-blue: #02529c;
    --no-blue: #00205b;
    --se-blue: #006aa7;
    --gr-blue: #005bae;
    --de-th-blue: #0094cb;
    --us-de-blue: #669da6;
    --us-de-buff: #c8ab80;
    --us-me-buff: #f8ebaf;
    --se-yellow: #ffcd00;
    --mk-gold: #f9d616;
    --us-mn-light-blue: #74c7e6;
    --us-pa-blue: #0A3161;
    --us-pa-yellow: #ffcd00;
    --us-pa-green: #007A33;

    --mk-ray-s1: 0deg;
    --mk-ray-s2: 52deg;
    --mk-ray-s3: 92deg;
    --mk-ray-s4: 134deg;
    --mk-ray-s5: 180deg;
    --mk-ray-s6: 233deg;
    --mk-ray-s7: 270deg;
    --mk-ray-s8: 311deg;
    --mk-ray-e1: calc(var(--mk-ray-s1) + 20deg);
    --mk-ray-e2: calc(var(--mk-ray-s2) + 15deg);
    --mk-ray-e3: calc(var(--mk-ray-s3) + 15deg);
    --mk-ray-e4: calc(var(--mk-ray-s4) + 15deg);
    --mk-ray-e5: calc(var(--mk-ray-s5) + 20deg);
    --mk-ray-e6: calc(var(--mk-ray-s6) + 15deg);
    --mk-ray-e7: calc(var(--mk-ray-s7) + 15deg);
    --mk-ray-e8: calc(var(--mk-ray-s8) + 15deg);
}

body {
    margin: 0;
    padding: 2em;
    color: white;
    font-size: 133%;
    font-synthesis: none;
    hyphens: auto;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}
body, .fail > div, .fail > p, th {
    /* background-color: #68889f; */ /* original Katica blue */
    background-color: #426680; /* default background color */
}

:disabled {
    opacity: 0.2;
}

.s, .done {
    text-decoration: line-through;
}

.relative {
    position: relative;
}

figure,
.figure {
    padding: 0;
    position: relative;
    margin: 0;
}
.bugLike {
    float: right;
    background-color: rgba(0,0,0,0.6);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: rgba(255,255,255,0.4);
    border-bottom-left-radius: 1em;
    border-left-width: 1px;
    border-left-style: solid;
    text-align: right;
    padding: 0 0.4em 0.1em 0.6em;
    margin: 0 -0.5em 0 0.3em;
}
.bug,
.bugLeft, 
.frameMsg::before,
.katicasNew::before {
    position: absolute;
    color: white; 
    z-index: 101;
    font-size: 100%;
    margin: 0;
    top: 0;
    display: block;
    background-color: rgba(0,0,0,0.6);
    /*text-shadow: 2px 2px 8px black;*/
    border-bottom-width: 1px;
    border-bottom-style: solid;
    /*border-color: rgba(255,255,255,0.6);*/
    border-color: rgba(255,255,255,0.4);
    cursor: pointer;
}
.bug {
    right: 0;
    border-bottom-left-radius: 1em;
    border-left-width: 1px;
    border-left-style: solid;
    text-align: right;
    padding: 0 0.4em 0.1em 0.6em;
}
.bugLeft,
.frameMsg::before,
.katicasNew::before {
    left: 0;
    border-bottom-right-radius: 1em;
    border-right-width: 1px;
    border-right-style: solid;
    text-align: left;
    padding: 0 0.6em 0.1em 0.4em;
}
.meinFoto, .frameMsg::before, .katicasNew::before {
    background-color: snow;
    font-weight: 600;
}
figure.katicas,
.figure.katicas,
.meinFoto,
.frame,
.frameMsg::before,
.katicasNew::before
{
    /* color: #68889f; */
    color: #426680;
}

.frame .bug,
.katicas .bug {
    right: 1em;
    top: 1.5em;
    background-color: rgba(0,0,0,0);
    border: none;
}

.hide, 
#restoreHiddenElements,
.burgerMenu .hideable,
.hide-hideable .hideable,
.vidsOnly li,
.inVidsOnly {
    display: none;
}
.vidsOnly li.hasVideo,
.vidsOnly li.hasVideoCC {
    display: inherit;
}
.vidsOnly .inVidsOnly, .inline {
    display: inline;
}

.langdots span[lang] + span[lang]::before,
.langdots span[data-lang] + span[data-lang]::before {
    content : " · ";
    color: white;
}
/*
.burgerMenu .langdots span[lang] + span[lang]::before,
.burgerMenu .langdots span[data-lang] + span[data-lang]::before,
*/
.selLang .langdots span[lang] + span[lang]::before,
.selLang .langdots span[data-lang] + span[data-lang]::before,
.selLang.langdots span[lang] + span[lang]::before,
.selLang.langdots span[data-lang] + span[data-lang]::before
{
    content : "";
}
.user_lang_all .selLang .langdots span[lang] + span[lang]::before,
.user_lang_all .selLang .langdots span[data-lang] + span[data-lang]::before,
.user_lang_all .selLang.langdots span[lang] + span[lang]::before,
.user_lang_all .selLang.langdots span[data-lang] + span[data-lang]::before,
.selLang .alwaysShow .langdots span[lang] + span[lang]::before,
.selLang .alwaysShow .langdots span[data-lang] + span[data-lang]::before,
.selLang.alwaysShow.langdots span[lang] + span[lang]::before,
.selLang.alwaysShow.langdots span[data-lang] + span[data-lang]::before
{
    content : " · ";
    color: white;
}

.hairGaps span + span,
/* .burgerMenu .langdots span[data-lang] + span[data-lang], */
.selLang .langdots span[data-lang] + span[data-lang] {
    margin-left: 0.1em;
}

.hide-de .langdots span[lang=de] + span[lang]::before {
    content : "";
}
.hide-de [lang = "de"] {
    display: none;
}
.hide-de .inline[lang = "de"],
.hide-de .inline
{
    display: inline;
}
.hide-de [lang = "de"] + br {
    display: none;
}
.hide-de .show {
    display: inherit;
}

.hide-en .langdots span[lang=en] + span[lang]::before {
    content : "";
}
.hide-en [lang = "en"] {
    display: none;
}
.hide-en .inline[lang = "en"],
.hide-en .inline
{
    display: inline;
}
.hide-en [lang = "en"] + br {
    display: none;
}
.hide-en .show {
    display: inherit;
}

.hide-hu [lang = "hu"] {
    display: none;
}
.hide-hu .inline[lang = "hu"],
.hide-hu .inline
{
    display: inline;
}
.hide-hu [lang = "hu"] + br {
    display: none;
}
.hide-hu .show {
    display: inherit;
}

strong {
}

.emoji,
em {
    font-weight: normal;
    font-style: normal;
}
.emoji::after, em::after {
    content: "️";
}
em.gray {
    filter: grayscale(100%);
}
em.brexit {
    opacity: 0.25;
}
em.brexit:hover {
    opacity: 1;
}

.noemoji em {
    display: none;
}

.mirror {
    display: inline-block;
    transform: rotateY(180deg);
}

[data-rotate] {
    display: inline-block;
    XXtransform: rotate(90deg);
}
.rotate90 {
    display: inline-block;
    transform: rotate(90deg);
}
.rotate {
    display: inline-block;
    transform: rotate(var(--rotate-by));
}

.meh {
    display: inline-block;
    transform: rotate(270deg);
}

.asl {
    color: #f48e82;
}

.speech {
    font-style: italic;
}
.noSpeech {
    font-style: normal;
}

h1, h3 { 
    font-weight: 700;
}

h1 {
    margin-top: 0;
    margin-bottom: 0;
    /*border: 1px dashed snow;*/
    font-size: 200%;
}

.large {
    font-size: 200%;
}
.huge {
    font-size: 400%;
}

.withSC {
    font-weight: 400;
    font-style: normal;
}

h1, h2, p, ul {
    /*border: 1px dotted orange;*/
}

p, figure {
    /*border: 1px dotted orange;*/
}
.debug {
    border: 1px dotted orange;
}


h2 {
    margin-top: 1.33em;
    margin-bottom: 0;
    font-weight: 700;
}
h3, h4 {
    margin-top: 1rem;
    margin-bottom: 0;
}
h2:first-child,
h3:first-child,
h4:first-child {
    margin-top: 0;
    padding-top: 0;
}


.flushTop {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.flushBottom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.para, .paraTop, .paraBottom, .newSec {
    /*overflow: auto;*/
}
.figs {
    clear: both;
    overflow: auto;
    padding: 0;
}
.newSec {
    margin-top: 3em;
}
.halfSec {
    margin-top: 1.5em;
}

aside + h2 {
    margin-top: 0.5em;
}

p, blockquote, .para, .paraTop {
    margin-top: 0.5em;
}

.captionAbove {
    margin-top: 1em;
    margin-bottom: 0.3em;
}

.newSecCaptionAbove {
    margin-top: 3em;
    margin-bottom: 0.3em;
}
.flushCaptionAbove {
    margin-bottom: 0.3em;
}

.captionBelow {
    margin-top: 0.3em;
    margin-bottom: 1em;
}
.flushCaptionBelow {
    margin-top: 0.3em;
}

.paraTopNormal {
    margin-top: 1em;
}

p, ul, .para {
    /*font-size: 110%;*/
}

.para, .paraBottom {
    margin-bottom: 2em;
}

.paraBottomNormal, .p {
    margin-bottom: 1em;
}

.paraBottomThin {
    margin-bottom: 0.5em;
}

.paraTopThin {
    margin-top: 0.5em;
}

.text, dl, .textBlock {
    /*line-height: 1.6;*/
    max-width: 40em;
}
.textBlock {
    clear: both;
}

span.text {
    display: block;
}

.max1200px {
    max-width: 1200px;
}
.max600px {
    max-width: 600px;
}

.key {
    font-variant-caps: small-caps;
    font-weight: 600;
    color: white;
}

.langJumps {
}
a {
    text-decoration: none;
    color: white;
    /*border-bottom: 1px solid #ccc;*/
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
/*#overlay a,*/
figure a,
a.expand,
.naked a,
a.naked {
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}
span.more::before,
a.more {
    font-style: normal;
    font-size: 90%;
    font-weight: 700;
    border-bottom: none;
}
a.more.normal {
    font-weight: 400;
}
a::before, a::after {
    color: white;
}
a::before {
    content: "→ ";
}
/*#overlay a::before,*/ /* not sure why we needed this. th, 2020-09-03 */
figure a::before,
.plainLinks a::before,
.naked a::before,
a.naked::before,
a.plain::before {
    content: "";
}
.crumbs a::before {
    content: "";
}
.plainLinks a.normal::before,
.plainLinks .normalLinks a::before {
    content: "→ ";
}
.new::before, 
.updated::before, 
.incomplete::before, 
a.soon::before, 
.pros::before, 
.cons::before, 
.tip::before, 
.noch a::before, .auch a::before, .eher a::before, .weiter a::before, .ebenda a::before,
dt::before, dd::before,
[data-prefix]::before,
.prefix
{
    font-style: normal !important;
    font-variant-caps: small-caps;
    font-weight: 600;
    font-size: 90%;
    color: white !important;
}
[data-prefix]::before {
    content: attr(data-prefix) " ";
    padding-right: 0.2em;
}

.user_lang_de .new::before,
[lang=de] .new::before {
    content: "neu ";
}
.user_lang_en .new::before,
[lang=en] .new::before {
    content: "new ";
}
.user_lang_hu .new::before,
[lang=hu] .new::before {
    content: "új ";
}
.user_lang_de a.new::before,
[lang=de] a.new::before {
    content: "neu → ";
}
.user_lang_de a.new.plain::before,
[lang=de] a.new.plain::before {
    content: "neu ";
}
.user_lang_en a.new::before,
[lang=en] a.new::before {
    content: "new → ";
}
.user_lang_en a.new.plain::before,
[lang=en] a.new.plain::before {
    content: "new ";
}
.user_lang_hu a.new::before,
[lang=hu] a.new::before {
    content: "új → ";
}
.user_lang_hu a.new.plain::before,
[lang=hu] a.new.plain::before {
    content: "új ";
}

.user_lang_de .updated::before,
[lang=de] .updated::before {
    content: "aktualisiert ";
}
.user_lang_en .updated::before,
[lang=en] .updated::before {
    content: "updated ";
}
.user_lang_hu .updated::before,
[lang=hu] .updated::before {
    content: "frissített ";
}
.user_lang_de a.updated::before,
[lang=de] a.updated::before {
    content: "aktualisiert → ";
}
.user_lang_de a.updated.plain::before,
[lang=de] a.updated.plain::before {
    content: "aktualisiert ";
}
.user_lang_en a.updated::before,
[lang=en] a.updated::before {
    content: "updated → ";
}
.user_lang_en a.updated.plain::before,
[lang=en] a.updated.plain::before {
    content: "updated ";
}
.user_lang_hu a.updated::before,
[lang=hu] a.updated::before {
    content: "frissített → ";
}
.user_lang_hu a.updated.plain::before,
[lang=hu] a.updated.plain::before {
    content: "frissített ";
}

[lang=de] .incomplete::before {
    content: "in arbeit ";
}
[lang=en] .incomplete::before {
    content: "incomplete ";
}
.incomplete::before,
[lang=hu] .incomplete::before {
    content: "🏗 ";
}
[lang=de] a.incomplete::before {
    content: "in arbeit → ";
}
[lang=de] a.incomplete.plain::before {
    content: "in arbeit ";
}
[lang=en] a.incomplete::before {
    content: "incomplete → ";
}
[lang=en] a.incomplete.plain::before {
    content: "incomplete ";
}
[lang=hu] a.incomplete::before {
    content: "🏗 → ";
}
[lang=hu] a.incomplete.plain::before {
    content: "🏗 ";
}

[lang=de] a.soon::before {
    content: "bald → ";
}
[lang=en] a.soon::before {
    content: "soon → ";
}
[lang=hu] a.soon::before {
    content: "nemsokára → ";
}

.new .year::before,
.updated .year::before, 
.updated + .year::before 
{
    content: " · ";
}

.tn {
}
.tn::after {
    content: " fordítás szükséges 🙁";
    font-size: 80%;
    vertical-align: super;
    font-style: normal;
}
.tn.hasVideo::after {
    content: " 🎥 fordítás szükséges 🙁";
}
.tn.hasVideoCC::after {
    content: " 🎥 (cc) fordítás szükséges 🙁";
}
dd {
    margin-left: 0;
}
dd::before {
    content: "• ";
}
[lang=de] .pros::before {
    content: "Warum wir es mögen: ";
}
[lang=en] .pros::before {
    content: "Why we love it: ";
}
[lang=hu] .pros::before {
    content: "";
}
[lang=de] .cons::before {
    content: "Nicht so toll: ";
}
[lang=en] .cons::before {
    content: "Not so hot: ";
}
[lang=hu] .cons::before {
    content: "";
}

.noch a[lang]::before {
    content: "";
}

.noch a[lang]:first-child::before, 
.auch a[lang]::before, 
.weiter a[lang]::before,
.eher a[lang]::before,
.ebenda a[lang]::before {
    display: inline-block;
    text-align: right;
    padding-right: 0.3em;
}

.auch a[lang]::before, 
.weiter a[lang]::before,
.eher a[lang]::before,
.ebenda a[lang]::before {
    width: 5em;
}

.noch a[lang]:first-child::before {
    width: 2.5em;
}

.noch a[lang=de]:first-child::before {
    content: "noch:";
}
.noch a[lang=en]:first-child::before {
    content: "more:";
}
.noch a[lang=hu]:first-child::before {
    content: "még:";
}

.auch a[lang=de]::before {
    content: "siehe auch:";
}
.auch a[lang=en]::before {
    content: "also see:";
}
.auch a[lang=hu]::before {
    content: "";
}

.weiter a[lang=de]::before {
    content: "weiter:";
}
.weiter a[lang=en]::before {
    content: "next:";
}
.weiter a[lang=hu]::before {
    content: "tovább:";
}

.eher a[lang=de]::before {
    content: "eher:";
}
.eher a[lang=en]::before {
    content: "earlier:";
}
.eher a[lang=hu]::before {
    content: "ezelőtt:";
}

.ebenda a[lang=de]::before {
    content: "ebenda:";
}
.ebenda a[lang=en]::before {
    content: "also there:";
}
.ebenda a[lang=hu]::before {
    content: "";
}

.next a::after, .prev a::before
{
    font-style: normal !important;
    font-weight: 700;
    font-size: 90%;
    color: white !important;
}
.next a::before {
    content: "";
}
.next a::after {
    content: " →";
}
.prev a::before {
    content: "← ";
}

a.ext::before {
    content: "↗ ";
}
a.mail::before {
    /*content: "↘ ";*/
    /*
    font-family: "FontAwesome";
    content: "\f003 ";
    content: "📩️ ";
    content: "✉️ ";
    */
    content: "📨️ ";
    color: white;
    font-weight: normal;
    font-style: normal;
}
span.more::before, 
a.more::before {
    content: "↓ ";
}
a.more::after {
    /*content: " ↓";*/
    content: " ";
}

a:hover, a.more:hover {
    border-bottom: 1px solid ivory !important;
}
a.self, a.self:hover, a.disabled, a.disabled:hover {
    border-bottom: none !important;
}
a.self {
    font-weight: bold;
}
#overlay a:hover,
a.expand:hover,
figure a:hover {
    border-bottom: none  !important;
}
[lang = "hu"], [lang = "hu"] a, a[lang=hu], .hu, .hu a, a.hu {
    color: #a6f4a4; /* default Hungarian color */
}
video::cue(v[voice="hu"]),
video::cue([lang="hu"]) {
    color: #a6f4a4; /* default Hungarian color */
}

[lang = "de"], [lang = "de"] a, a[lang=de], .de, .de a, a.de, .tn.de a {
    color: #f4dc82; /* default German color */
}
video::cue(v[voice="de"]),
video::cue([lang="de"]) {
    color: #f4dc82; /* default German color */
}

[lang = "en"], [lang = "en"] a, a[lang=en], .en, .en a, a.en, .tn.en a {
    color: #a6d4f4; /* default English color */
}
video::cue(v[voice="en"]),
video::cue([lang="en"]) {
    color: #a6d4f4; /* default English color */
}

[lang = "zxx"], [lang = "zxx"] a, a[lang = "zxx"], .tn::after {
    color: white;
}
a:visited {
    border-bottom-color: #999;
}
[lang = "en"] a:visited {
    border-bottom-color: #8899cc;
}
[lang = "de"] a:visited {
    border-bottom-color: #bbaa44;
}
[lang = "hu"] a:visited {
    border-bottom-color: #66bb66;
}

[lang=cy], [lang=da], [lang=pl], [lang=sk], [lang=cz],
a[lang=cy], a[lang=da], a[lang=pl], a[lang=sk], a[lang=cz] 
{
    color: #f8b4b4;
    color: tomato !important;
}

a.plainVisitedLinks:visited,
.plainVisitedLinks a:visited
{
    border-bottom-color: #426680; /* default blue background color */
}

a.img {
    border-bottom: none !important;
}
a.img::before {
    content: none;
}

.hilite {
    font-weight: 700;
}

blockquote {
    margin: 0;
    padding-left: 1em;
    padding-right: 1em;
}

.leftMarginBlock {
    width: 20%;
    float: left;
    margin-top: 0;
    margin-right: 0.25em;
    padding-top: 0;
}

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

.translationBlock + .translationBlock {
    margin-top: 1em;
}

.translationBlock {
    white-space: pre-line;
}

.ipa {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 80%;
}

ol.footnotes {
    font-size: 80%;
    font-style: normal;
    padding-left: 1.4rem;
}
ol.footnotes::before {
    display: block;
    width: 10rem;
    border-bottom: 1px solid #85a9c3;
    content: " ";
    margin-left: -1.4rem;
}

ol {
    margin-top: 0;
    padding-top: 0;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.bullets {
    list-style: initial;
    padding-left: 2.5rem;
}
ul.bullets.flush {
    padding-left: 1em;
}
li ul {
    padding-left: 1em;
}
li ul li {
    margin-top: 0.3em;
}
li {
    margin-bottom: 0.3em;
}
ul .leftFlush, li .leftFlush {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.showDateBefore h4 {
    display: none;
}

.showNumBefore li[data-num]::before,
.showDayBefore li[data-day]::before,
.showDateBeforeXX li[data-new]::before {
    display: inline-block;
    margin-right: 0.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.showNumBefore li[data-num]::before {
    content: attr(data-num);
    min-width: 1.4em;
}

.showDayBefore li[data-day]::before {
    content: attr(data-day) ".";
    min-width: 1.4em;
}

.showDateBefore li[data-new]::before {
    font-variant-numeric: tabular-nums;
    font-weight: 400 !important;
    /*
    content: attr(data-new);
    min-width: 5em;
    background-color: orange;
    */
}

.loopToggle {
    display: inline-block;
    font-size: 80%;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}

.loopToggle em:first-child {
    display: none;
}
.loopToggle em:last-child {
    filter: grayscale(0.9);
}
.loopToggle.looping em:first-child {
    display: initial;
}
.loopToggle.looping em:last-child {
    display: none;
}

/*
.loopToggle em:last-child {
    display: none;
}
.loopToggle[data-loop='no-loop'] {
    filter: grayscale(0.9);
}
.loopToggle[data-loop='no-loop'] em:first-child {
    display: none;
}
.loopToggle[data-loop='no-loop'] em:last-child {
    display: initial;
}
*/

.known {
    visibility: hidden;
}

figcaption,
.figure aside,
aside.vidcaption,
.globalTip aside {
    display: none;
}

img {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.fw {
    width: 100%;
}
#overlay .fw,
.overlay .fw {
    width: initial;
}

.figs figure {
    float: left;
    display: block;
}
.max80 {
    max-width: 80%;
}
.max75 {
    max-width: 75%;
}
.max70 {
    max-width: 70%;
}
.w4x6_l_p,
.w6x4_l_p,
.w4x6_l_p-100,
.w6x4_l_p-100,
.w16x9_l_p,
.w9x16_l_p,
.w16x9_l_p-100,
.w9x16_l_p-100,
.w9x16_1x1,
.w9x16_1x1-100,
.w1x1_9x16, 
.w1x1_9x16-100,
.w16x9_1x1-100,
.w1x1_16x9-100,
.w1_11th,
.w7, .w7-33,
.mw7, .mw7-33,
.w8, .w8-33,
.mw8, .mw8-33,
.w9, .w9-33,
.mw9, .mw9-33,
.w40, .w60,
.w40-100, .w60-100
{
    float: left;
}
.max6x4_l_p {
    max-width: 69.23%;
}
.w6x4_l_p, 
.w6x4_l_p-100 {
    width: 69.23%;
}

.w7, .w7-33 {
    width: 7.69%;
}
.mw7, .mw7-33 {
    max-width: 7.69%;
}

.w8, .w8-33 {
    width: 8.33%;
}
.mw8, .mw8-33 {
    max-width: 8.33%;
}

.w9, .w9-33 {
    width: 9.09%;
}
.mw9, .mw9-33 {
    max-width: 9.09%;
}

.max66 {
    max-width: 66.66%;
}
.max60 {
    max-width: 60%;
}
.max6x4_l_p_p {
    max-width: 52.94%;
}
.max50 {
    max-width: 50%;
}
.max40 {
    max-width: 40%;
}
.w40, .w40-100 {
    width: 40%;
}
.max6x4_l_l_p,
.max40_9 {
    max-width: 40.9%;
}

.max9x16_1x1 {
    max-width: 36%;
}
.w9x16_1x1, 
.w9x16_1x1-100 {
    width: 36%;
}

.max1x1_9x16 {
    max-width: 64%;
}
.w1x1_9x16, 
.w1x1_9x16-100 {
    width: 64%;
}

.w16x9_1x1, 
.w16x9_1x1-100 {
    width: 64%;
}
.w1x1_16x9, 
.w1x1_16x9-100 {
    width: 36%;
}

.max33 {
    max-width: 33.33%;
}
.max33-50 {
    max-width: 33.33%;
}
.max4x6_l_p,
.max4x6_l_p-100 {
    max-width: 30.769%;
}
.w4x6_l_p, 
.w4x6_l_p-100 {
    width: 30.769%;
}

.max30 {
    max-width: 30%;
}
.max25 {
    max-width: 25%;
}
.max25-50 {
    max-width: 25%;
}
.max9x16_l_p {
    max-width: 24.05%;
}
.w9x16_l_p,
.w9x16_l_p-100 {
    width: 24.05%;
}
.max4x6_l_p_p {
    max-width: 23.52%;
}
.max20 {
    max-width: 20%;
}
.max4x6_l_l_p,
.max18_2 {
    max-width: 18.2%;
}
.max16x9_l_p {
    max-width: 75.94%;
}
.w60, .w60-100 {
    width: 60%;
}
.w16x9_l_p, 
.w16x9_l_p-100 {
    width: 75.94%;
}
.w20 {
    float: left;
    width: 20%;
}
.w25 {
    float: left;
    width: 25%;
}
.w33,
.w33-100 {
    float: left;
    width: 33.33%;
}
.w50,
.w50-100 {
    float: left;
    width: 50%;
}
.w66,
.w66-100 {
    float: left;
    width: 66.66%;
}

.w100 {
    float: left;
    width: 100%;
}

.mw20 {
    float: left;
    max-width: 20%;
}
.mw25 {
    float: left;
    max-width: 25%;
}
.mw33 {
    float: left;
    max-width: 33.33%;
}
.mw50 {
    float: left;
    max-width: 50%;
}
.mw100 {
    max-width: 100%;
}

figure.katicas::before,
.figure.katicas::before,
#overlayKaticas::before,
.katicasNew::before {
    content: "Mein Foto · my photo · az én képem";
    font-style: italic;
}
#overlayFrame::before,
figure.frame::before,
.frameMsg::before {
    content: attr(data-msg);
    font-style: italic;
}

#overlayZoomed::before {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style: normal !important;
    content: "\f047";
    cursor: pointer;
}

.frame::before,
figure.katicas::before,
.figure.katicas::before {
    display: block;
    background-color: snow;
    /* 
    padding-left: 1.8em;
    */
    padding-left: 1em; 
    padding-bottom: 0.2em;
    font-weight: 600;
}
.frame img, 
figure.katicas img, 
.figure.katicas img {
    /*
    border-left: 1.8em solid snow;
    border-right: 1.8em solid snow;
    */
    border-left: 1em solid snow;
    border-right: 1em solid snow;
    border-bottom: 1em solid snow;
    box-sizing: border-box;
    position: relative;
}

.clear {
    clear: both;
}

.left {
    float: left;
    margin-right: 2em;
}

.rightPlain {
    float: right;
}
.right {
    float: right;
    margin-left: 2em;
}
.rightMost {
    float: right;
    margin-left: 2em;
    clear: right;
}
.rightAlmost {
    float: right;
    margin-left: 2em;
    margin-right: 0.5rem;
    clear: right;
}
.padDown {
    padding-bottom: 0.5em;
}
.captionBlock {
    clear: both;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0.5em;
}

.rightAlign {
    display: block;
    text-align: right;
}

.photo {
    border: 5px solid white;
    box-shadow: 10px 10px 5px #666;
}

.polaroid {
    background-color: white;
    color: #333;
    font-size: 90%;
    border: 10px solid white;
    box-shadow: 20px 20px 10px #666;
    padding: 0;
    margin-bottom: 2em;
}

.port300, .port300 img {
    width: 300px;
}

.port266, .port266 img {
    width: 266px;
}

.port200, .port200 img {
    width: 200px;
}

.translated, .hovertext .def, .globalTip {
    border-bottom: 1px dashed white;
}
.translated:hover, .globalTip:hover {
    border-bottom: 1px dotted white;
}
.translated .hov, .hovertext .hov {
    display: none;
}
.translated:hover .hov, .hovertext:hover .hov {
    display: inline;
}
.translated:hover .def, .hovertext:hover .def {
    display: none;
}

.tip + p, .tip + div, .tip + span {
    clear: left;
}
.tip, .msg {
    font-size: 90%;
}
.tip .shortContent {
    display: inline-block; 
    padding-top: 0.6em;
}
.tip::before {
    display: inline-block;
    content: "U ";
    font-family: "HappyDayDingbats";
    font-size: 200%;
    font-weight: normal;
    float: left;
    width: 1.5em;
}
[lang = "de"] .tip::before {
    content: "U ";
}
[lang = "en"] .tip::before {
    content: "U ";
}

.icon::before {
    font-family: "HappyDayDingbats";
}
.love::before {
    content: "B";
}

.center {
    text-align: center;
}

.c640 {
    max-width: 640px;
    margin: auto;
    padding: 3rem 0;
}

footer {
    margin-top: 3em;
    margin-bottom: 5em;
    clear: both;
}

footer a {
    border-bottom: none;
}
footer a::before {
    content: "";
}

.blogFooter .prev,
.blogFooter .next {
    display: inline-block;
    min-width: 8em;
}

.smallish {
    font-size: 90%;
}
.small {
    font-size: 80%;
}

.footerNav > a,
.footerNav > span {
    margin-right: 0.8em;
}

.showOnGalleryPages {
    display: none;
}

.gallery .showOnGalleryPages {
    display: initial;
}

.showOnHover, .showOnPrintHover {
    display: none;
}

#setext {
    position: fixed;
    bottom: 0;
    right: 1rem;
    right: 0;
    background-color: rgba(0, 0, 0, 0.0);
    padding: 0.1em 0.6em 0.3em;
    padding: 0;
    font-size: 1000%;
    z-index: -999;
    opacity: 0.5;
}

#bottomRightStatus,
:hover > .showOnHover {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.1em 0.6em 0.3em;
    font-size: 90%;
    border-top-left-radius: 0.5em;
    z-index: 160;
}
#bottomRightStatus, #tap4zoom {
   display: none;
}
:hover > .showOnHover {
   display: block;
}

.onHover {
    display: none;
}

h1:hover .onHover {
    display: block;
}

.mini {
    font-size: 40%;
}

h2 .mini {
    font-size: 50%;
}

.lightbg {
    background-image: linear-gradient(#e9e3db, lavender);
    border-radius: 2rem;
}

.red {
    color: red;
}

.US::after {
    content: " 🇺🇸";
}
.DK::after {
    content: " 🇩🇰";
}
.DE::after {
    content: " 🇩🇪";
}
.GB::after {
    content: " 🇬‍🇧";
}
.HU::after {
    /*content: " 🇭🇺";*/
}
.DE-HU::after {
    content: " 🇩🇪 🇭🇺";
}
.hasVideo::after {
    content: " 🎥";
}
.hasVideoCC::after {
    content: " 🎥 cc";
    font-variant-caps: small-caps;
}
.hasVideo.needsCC::after {
    content: " 🎥 cc?";
    font-variant-caps: small-caps;
    color: #999;
}
.hasVideoCC.needsCC::after {
    content: " 🎥 cc+";
    font-variant-caps: small-caps;
}
.US::after,
.DK::after,
.DE::after,
.GB::after,
.HU::after,
.DE-HU::after,
.hasVideo,
.hasVideoCC
{
    font-style: normal;
    /*color: #68889f;*/
}

.up, .speech .up {
    font-style: normal;
}

.ccSymbol {
    font-size: 80%;
    font-weight: 700;
    display: inline-block;
    color: #ddd;
    border: 2px solid #ddd;
    border-radius: 0.3em;
    padding: 0 0.2em 0.1em 0.15em;
    /*text-decoration: line-through;*/
}

.fail {
    background: repeating-linear-gradient(135deg, ivory, ivory 10px, tomato 10px, tomato 20px); 
    padding: 3rem;
    margin-top: 3em;
}

.fail > div, .fail > p {
    padding: 1rem;
}

.newSaying h2:first-child {
    margin-top: 0.6em;
}

.newSaying h2::before {
    content: "🗨️ ";
    font-weight: normal;
}
.noemoji .newSaying h2::before {
    content: none;
}


#de::before, #en::before, #hu::before, .translationBlock::before {
    display: block;
    font-size: 70%;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}
.translationBlock[lang=de]::before {
    content: "übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung übersetzung";
}
.translationBlock[lang=en]::before {
    content: "translation translation translation translation translation translation translation translation translation translation translation translation translation translation translation translation translation translation translation translation translation";
}
.translationBlock[lang=hu]::before {
    content: "fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás fordítás";
}

#de::before {
    content: "deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német · deutsch · german · német";
}
#en::before {
    content: "english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol · english · englisch · angol";
}
#hu::before {
    content: "magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian · magyar · ungarisch · hungarian";
}

#overlayIntro #de::before,
#overlayIntro #en::before,
#overlayIntro #hu::before {
    display: none;
}

#debug, #globalTip {
    padding: 0.5em 1em;
    margin: 0;
    font-weight: 400;
    background-color: black;
    opacity: 0.8;
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: 1em;
    transform: translate(-50%, -50%);
}
#debug {
    z-index: 199;
}
#globalTip {
    z-index: 200;
}
#centralIndicator {
    padding: 0.5em;
    margin: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 200%;
    opacity: 0.8;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 202;
    transform: translate(-50%, -50%);
    text-align: center;
}

#burger {
    /* position: absolute; */ /* scrolls with page */
    position: fixed; /* stays visible in corner */
    z-index: 101;
    top: 1em;
    right: 1em;
    font-family: FontAwesome;
    font-weight: normal;
    cursor: pointer;
}
.burger {
    cursor: pointer;
    font-family: FontAwesome;
    font-weight: normal;
}

.burgerMenu {
    display: none;
}

.burgerMenu {
    /*column-count: 2;*/
}

.comicJens .showForOSNfonts,
.comicSans .showForOSNfonts {
    display: none;
}

.sticky, th {
    position: sticky;
    top: 0;
}
.stickyBg {
    /*background-color: navy;*/
    display: inline-block;
    border-radius: 1em;
    padding: 0.4rem 1rem;
    margin: 0.4rem 0 0.4rem -1rem;
    filter: drop-shadow(0 0 0.6rem);
    top: 1rem;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
th, td {
    border: 1px solid white;
    padding: 0.3em 0.5em;
}

tr.pageStatic td, /* deprecated, only used on cc.shtml for now */
tr.page td, th {
    border-top-width: 3px;
}
tr:last-child td {
    border-bottom-width: 3px;
}
th:first-child, td:first-child {
    border-left-width: 3px;
}
th:last-child, td:last-child {
    border-right-width: 3px;
}
th.inner:first-child, td.inner:first-child {
    border-left-width: 1px;
}
th.inner:last-child, td.inner:last-child {
    border-right-width: 1px;
}

.borderless th,
.borderless td {
    text-align: left;
    border-width: 0 !important;
}

.lightBackground th, .lightBackground td {
    border-color: #555;
}

/************************ quotation marks **************/
[lang = "de"] q::before {
    content: '»';
}
[lang = "de"] q::after {
    content: '«';
}
[lang = "de"] q q::before {
    content: '›';
}
[lang = "de"] q q::after {
    content: '‹';
}

.germanQ [lang = "de"] q::before {
    content: '„';
}
.germanQ [lang = "de"] q::after {
    content: '“';
}
.germanQ [lang = "de"] q q::before {
    content: '‚';
}
.germanQ [lang = "de"] q q::after {
    content: '‘';
}


[lang = "en"] q::before {
    content: '“';
}
[lang = "en"] q::after {
    content: '”';
}
[lang = "en"] q q::before {
    content: '‘';
}
[lang = "en"] q q::after {
    content: '’';
}

[lang = "hu"] q::before {
    content: '„';
}
[lang = "hu"] q::after {
    content: '“';
}
/*********************** end quotation marks ************/

video.fitAll {
    max-width: 100%;
    max-height: 100vh;
}

/*********************** gallery ************************/

/**** gallery inline demo ****/
.inlineOverlay {
    position: relative;
    text-align: center;
    margin: 2rem 0;
}
.inlineOverlay, .inlineOverlay > div, .inlineOverlay img {
    height: 26vw;
}
.inlineOverlay, .inlineOverlay > div {
    width: 50vw;
}
.inlineOverlay > div {
    position: absolute;
    top: 0;
    left: 0;
}
.overlay.inlineOverlay .image img,
.overlay.inlineOverlay .image video {
    filter: drop-shadow(0 0 1rem black);
}
.coverFrame {
    border: 2rem solid #426680;
    top: -2rem !important;
    left: -2rem !important;
    z-index: 1;
}
/**** gallery inline demo end ****/

.overlay {
    color: #ddd;
}
.overlayBackground {
    background: rgba(0, 0, 0, 92%);
}

#overlay, #overlayKaticas, #overlayFrame, #overlayZoomed, #overlayIntro, #overlayCaption, #overlayMenuClose,
#debug, #globalTip, #prevArrow, #nextArrow, #centralIndicator, #modal {
    display: none;
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 101;
    text-align: center;
}
#overlayBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: rgba(0, 0, 0, 95%);
    z-index: -1;
} 
.overlayBackground img {
    filter: brightness(40%) contrast(100%) saturate(30%) blur(16px);
    object-fit: cover;
    /*
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    */
    image-rendering: smooth;
    width: 100%;
    height: 100%;
}
#overlayCaption, #overlayIntro, #modal, #tap4zoom {
    max-width: 90% !important; /* has no effect */
    margin: 0;
    font-weight: 400; /* why would we need that? */
    padding: 0.5em 1em;
    background-color: black;
    opacity: 0.8;
    position: fixed;
    left: 50%;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}
#overlayCaption, #overlayIntro, #tap4zoom {
    z-index: 102;
}
#modal {
    z-index: 145;
    padding: 0.5em 0.7em;
}
#overlayCaption, #tap4zoom {
    bottom: 0;
    transform: translate(-50%, 0);
}
#overlayIntro, #modal {
    top: 50%;
    transform: translate(-50%, -50%);
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    text-align: left;
    cursor: pointer;
}
#overlayIntro h2, #modal h2 {
    font-size: 100%;
}
#overlayIntro .prev a::before {
    content: "← " !important;
}
#overlayIntro .newSecCaptionAbove, 
#overlayIntro .newSec {
    margin-top: 1em;
}

#overlayIntro > .newSecCaptionAbove, 
#overlayIntro > .newSec {
    margin-top: 0;
}

#overlayCaption.vid {
    /*bottom: 1.5em;*/
    bottom: auto;
    top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}
#overlayFrame::before,
#overlayKaticas::before,
#overlayZoomed::before {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 101;
    background-color: white;
    color: #333;
    font-weight: 600;
    font-style: italic;
    opacity: 0.8;
    border-bottom-right-radius: 1em;
    margin: 0;
    padding: 0.25em 0.8em;
}

.burgerMenu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 150;
    background-color: rgba(0, 0, 0, 0.8);
    /*
    font-weight: 600;
    font-style: italic;
    */
    border-bottom-left-radius: 1em;
    margin: 0;
    padding: 0.25em 0.8em;
}
.burgerMenu .close {
    float: right;
}

#tmp {
    display: none;
    max-width: 90%;
    margin: 0;
    font-weight: 400;
    padding: 0.5em 1em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    background-color: orange;
    opacity: 0.8;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 600;
    z-index: 50; /* does this make a diff? */
}
#overlay a {
    /*cursor: pointer;*/
}
#overlay .image img,
#overlay .image video {
    /* for when images don’t fill vertical space*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.overlay .image img,
.overlay .image video {
    max-height: 100%;
    max-width: 100%;
    filter: drop-shadow(0 0 3rem black);
}

.overlay.zoomedImg .image img,
.overlay.zommedImg .image video {
    max-height: none;
    max-width: none;
}
.overlay.zoomedImg .image {
    overflow: scroll;
}
#overlayMenuClose, #prevArrow, #nextArrow {
    cursor: pointer;
    opacity: 0.5;
    z-index: 102;
    position: fixed;
    font-weight: 700;
    text-shadow: 2px 2px black;
}
#overlayClose, #prevArrow, #nextArrow {
}
#overlayMenuClose {
    top: 1rem;
    right: 1rem;
    text-align: center;
}
#overlayClose {
    font-size: 250%;
}
#overlayMenu {
    font-size: 120%;
}
#prevArrow, #nextArrow {
    font-size: 300%;
    top: 50%;
    transform: translate(0, -50%);
}
#prevArrow {
    left: 1rem;
    cursor: w-resize;
}
#nextArrow {
    right: 1rem;
    cursor: e-resize;
}
.gallery figure img,
.gallery .figure img,
.gallery figure a,
.gallery .figure a,
.tap4zoom {
    /* cursor: zoom-in; */
    cursor: nesw-resize;
}
/********************* END gallery **************************/

/********************* HTML5 video **************************/
video::cue {
    background-color: rgba(0, 0, 0, 0.5);
}
.transparentCCs video::cue {
    background-color: rgba(0, 0, 0, 0.05);
}
video::cue(v[voice='Katica']) {
    color: tomato;
}
video::cue(.katica) {
    color: tomato;
}
video::cue(v[voice='Kim']) {
    color: aquamarine;
}
video::cue(v[voice='Judie']) {
    color: lightskyblue;
}
video::cue(v[voice='Steve']) {
    color: lightgreen;
}
/*
video::cue(b) {
}
video::cue(i) {
}
*/
/******************* END HTML5 video ************************/

.ccBar {
    margin: -0.4rem 0 0 0;
    padding: 0.4rem;
    background-image: linear-gradient(to bottom, #222 80%, transparent);
    font-style: italic;
    font-style: normal;
    font-weight: 500;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}

/******************* custom choosers ************************/
.chooserBox, .chooserOption, .chooserInline, .chooserMini, .removeParent, .close, .deleteLocalStorageItem, .klickbar, input[type='checkbox'], label,
.selectPreferredFlag {
    cursor: pointer;
}

.chooserBox, .chooserInline, .chooserMini {
    display: inline-block;
    border: 3px solid #aaa;
    border-radius: 1em;
    margin-bottom: 0.5rem;
}
.hideInitial {
    display: none;
}
.chooserMini, .burgerMenu .chooserBox {
    font-size: smaller;
}
.chooserMini .showOnHover, .burgerMenu .chooserBox .showOnHover {
    font-size: 110%;
}
.customChooserOption {
    min-width: 3em;
    min-height: 3em;
    margin: 0;
    padding: 12px;
    transform: translate(0, -12px);
    cursor: pointer;
    margin-right: 0.5em;
}
.chooserBoxOld,
.chooserBox {
    min-width: 3em;
    min-height: 3em;
    margin: 0;
    margin-right: 1em;
}
.burgerMenu .chooserBox {
    min-width: 0;
    min-height: 0;
    margin-right: 0;
}
.burgerMenu .chooserBox br {
    display: none;
}
.themeChooser {
    padding: 0 0.5em;
}
.chooserInlineOld, 
.chooserBox, 
.chooserInline {
    padding: 0.2em 0.5em;
}
.chooserMini, .burgerMenu .chooserBox {
    padding: 0.1em 0.25em;
}

.chooserBoxOld:hover, .chooserInlineOld:hover,
.chooserBoxOld.chooserSelected, .chooserInlineOld.chooserSelected {
    border: 12px double white;
}

.chooserBox:hover, .chooserInline:hover,
.chooserBox.chooserSelected, .chooserInline.chooserSelected,
.chooserMini:hover {
    border: 3px solid white;
}

.chooserBox:hover, .chooserInline:hover,
.chooserMini:hover {
    text-shadow: .1rem .1rem .05rem #333;
    background-color: rgba(255, 255, 255, 0.3);
}
/******************* END custom choosers ********************/

/*
.user_lang_de .burgerMenu [lang=en],
.user_lang_de .burgerMenu [lang=hu],
.user_lang_en .burgerMenu [lang=de],
.user_lang_en .burgerMenu [lang=hu],
.user_lang_hu .burgerMenu [lang=de],
.user_lang_hu .burgerMenu [lang=en],
*/
.user_lang_de .selLang [lang=en],
.user_lang_de .selLang [lang=hu],
.user_lang_en .selLang [lang=de],
.user_lang_en .selLang [lang=hu],
.user_lang_hu .selLang [lang=de],
.user_lang_hu .selLang [lang=en] {
    display: none;
}
.selLang .alwaysShow [lang] {
    display: initial !important;
}
.langOption {
    font-style: normal !important;
    font-variant-caps: small-caps;
    cursor: pointer;
}
.command {
    /*border-bottom-color: rgba(255, 255, 255, 0);*/
    cursor: pointer;
}
.command:hover {
    /*border-bottom-color: ivory;*/
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.lightBackground .darkOrLight,
.lightBackground .showOnHover {
    opacity: 1 !important;
    background-color: rgba(200, 200, 200, 1.0) !important;
}

.darkishBackground {
    background-color: rgba(30, 30, 30, 0.6) !important;
}

.transparentBackground {
    font-weight: 500 !important;
    text-shadow: 3px 3px 6px #000000;
    background-color: rgba(0, 0, 0, 0.05) !important;
}
.transparentBackground:hover {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.banner {
    position: relative;
}
.bannerMark {
    display: inline-block;
    position: absolute;
    top: 2rem;
    left: 3rem;
    font-size: 200%;
    padding: 1rem;
    background: var(--black-red-gold);
    min-width: 5rem;
    border-radius: 1rem;
    text-align: center;
}
.emojiFlag {
    display: inline-block;
    text-align: center;
    padding: 0.25em;
    min-width: 2em;
    border-radius: 0.15em;
    font-size: 45%;
    vertical-align: middle;
    margin-bottom: 0.6em;
}
.emojiFlag.large {
    padding: 0.5rem;
    min-width: 3rem;
    border-radius: 0.3rem;
    font-size: 100%;
}
img.splash {
    width: 100%;
    cursor: pointer;
}
img.splash.badge {
    width: initial;
    cursor: pointer;
}

img.splash:hover {
    /*
    filter: blur(2px) brightness(150%) sepia(100%);
    filter: blur(1px) sepia(100%);
    filter: hue-rotate(180deg);
    filter: saturate(150%);
    filter: contrast(105%);
    filter: blur(1px);
    filter: hue-rotate(30deg);
    filter: none !important;
    filter: grayscale(1);
    filter: hue-rotate(0);
    filter: none !important;
    filter: blur(1px) brightness(115%) sepia(10%);
    */
}
.expandable > ul {
    margin-bottom: 1.5rem;
}
.expandable.collapsed > ul {
    margin-bottom: 0;
}

.collapsed > ul > li, 
.collapsed > ol > li {
    display: none;
}
.collapsed > ul > li.alwaysShow, 
.collapsed > ol > li.alwaysShow {
    display: inherit;
}
.expandable .up-down::after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;

    content: "\f102";  /* angle-double-up */
    content: "\f106";  /* angle-up */
    content: "\f0d8";  /* caret-up */
}
.expandable.collapsed .up-down::after {
    content: "\f103"; /* angle-double-down */
    content: "\f107"; /* angle-down */
    content: "\f0d7"; /* caret-down */
}

main {
    clear: both;
}
#clockface {
    float: left;
}

.fullBleed, .figs {
    margin-left: -2em;
    margin-right: -2em;
}
.figs .right {
    margin-right: 2em;
}
.figs .figsAlign .right {
    margin-right: 0;
}

.leftMargin4Bleed {
    margin-left: 2em;
}
.neverBleed .leftMargin4Bleed {
    margin-left: 0;
}

.neverBleed .fullBleed, .neverBleed .figs,
.noBleed, .figs.noBleed {
    margin-left: 0;
    margin-right: 0;
}
.neverBleed .figs .right,
.figs.noBleed .right {
    margin-right: 0;
}

.neverBleed .banner.fullBleed {
    margin-left: -2em;
    margin-right: -2em;
}

.mobileOnly {
    display: none;
}

.stack {
    display: inline;
    position: relative;
}

.stack > * {
    text-align: left;
    position: absolute;
}

.showCorrectIncorrect .correct {
    background-image: linear-gradient(to right, darkseagreen 10%, transparent);
    font-weight: bold;
}

.showCorrectIncorrect .incorrect {
    background-image: linear-gradient(to right, coral 10%, transparent);
    text-decoration: line-through;
    font-style: italic;
}

@media print {
    body {
	font-size: 50% !important;
    }
    footer {
	display: none !important;
    }
}

@media (max-width: 1200px) {
    .w33-100, 
    .w40-100, 
    .w50-100, 
    .w60-100, 
    .w66-100, 
    .w9x16_1x1-100,
    .w1x1_9x16-100,
    .w16x9_1x1-100,
    .w1x1_16x9-100,
    .w4x6_l_p-100, .w6x4_l_p-100 {
	width: 100%;
    }
    #overlayIntro, #modal {
	width: 90%;
    }
    #setext {
	font-size: 300%;
	opacity: 0.25;
    }
    .desktopOnly {
	display: none;
    }
    .mobileOnly {
	display: initial;
    }

    .bannerMark {
	top: 50%;
	padding: 0.5rem;
	font-size: 100%;
	min-width: 2.5rem;
	transform: translate(0, -50%);
    }
}

@media (max-width: 1000px) {
    .w9x16_l_p-100,
    .w16x9_l_p-100 {
	width: 100%;
    }

    .mw7-33, .w7-33, 
    .mw8-33, .w8-33, 
    .mw9-33, .w9-33 {
	max-width: 33.3%;
    }
    .max25-50,
    .max33-50 {
	max-width: 50%;
    }
    #overlayIntro h1, #modal h1 {
	font-size: 120%;
    }
    .burgerMenu {
	font-size: smaller;
    }
    .widerThan1000 {
	display: none;
    }

    .inlineOverlay, .inlineOverlay > div, .inlineOverlay img {
	height: 45vw;
	max-height: 45vw !important;
    }
    .inlineOverlay, .inlineOverlay > div {
	width: 90vw;
	max-width: 90vw !important;
    }
    video::cue {
	font-size: 1.5rem;
    }
}

@media (max-width: 700px) {
    body {
	padding-left: 0.5em;
	padding-right: 0.5em;
    }
    .bannerMark {
	left: 0.5em;
    }
    .figs, .fullBleed, .fullBleedMob, .figs.noBleed.fullBleedMob {
	margin-left: -0.5em;
	margin-right: -0.5em;
    }
    .neverBleed .fullBleed, .neverBleed .figs, .neverBleed .fullBleedMob, .neverBleed .figs.noBleed.fullBleedMob,
    .noBleed, .figs.noBleed, .stickyBg {
	margin-left: 0;
	margin-right: 0;
    }
    .fail {
	padding: 0.5em;
    }
    #burger {
	position: absolute; /* scrolls with page, because it would otherwise overlay text */
    }
    video::cue {
	font-size: 1.3rem;
    }
}

@media (min-width: 800px) {
    .bug, .bugLeft {
	font-size: 150%;
    }
    .meinFoto, .frameMsg::before, .katicasNew::before {
	font-size: 100%;
    }
}

@media (orientation: landscape) and (max-height: 900px) {
    .burgerMenu ul {
	column-count: 2;
    }
}