html {
    --main-hpadding: 20px;
    --main-vpadding: 11px;
    --main-content-hpadding: 0;
    --nav-font-weight: 500;
    --nav-font-weight-active: 700;
    --header-z-index: 7;
    

    --contact-bg-col: #000234dd;

    --welcome-bg-col-1: #000234;
    --welcome-bg-col-2: #1548ff;

    --extra-col-1: #f79149;

    --generic-border-radius: 11px;

    --menu-height: 86px;

    --paragraph-margin-bottom: 30px;
}
html, body {
    background: white;
    color: #000;
    font-size: 14px; line-height: 150%; font-weight: 400;
    font-family: 'Montserrat', Tahoma, sans-serif;
}
.just {
    text-align: justify;
}
.text-smaller {
    font-size: 12px;
    --paragraph-margin-bottom: 15px;
}
.main {
    color: black;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p {
    margin-bottom: var(--paragraph-margin-bottom);
}
a, .contact-toggle-label {
    color: black;
    text-decoration: none;
}
.contact-toggle {
    display: none;
}
.contact-toggle-label {
    cursor: pointer;
    user-select: none;
}
h1, h2 {
    font-family: 'Playfair Display', serif;
}
h1 { color: white; }
h1 { font-size: 32px; line-height: 105%; font-weight: 700; letter-spacing: 0.96px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h2 { font-size: 20px; line-height: 120%; font-weight: 800; letter-spacing: 1px; }
h3 { font-size: 16px; line-height: 120%; font-weight: 700; letter-spacing: 1.6px; }
h4 { font-size: 14px; line-height: 150%; font-weight: 400; }
h5 { font-size: 12px; line-height: 150%; letter-spacing: 0.8px; font-weight: 400; }

h3 {
    margin-bottom: 28px;
}
footer h3 {
    line-height: 135.9%;
    letter-spacing: 2px;
    font-weight: 700;
}

.region {
    font-weight: 700;
    display: block;
}
footer li {
    line-height: 150%;
}
.wrapper {
    width: 100%;
    height: 100%;
    /* border: 1px pink solid; */

    display: grid;
    grid-template-columns: calc(93px + 11.5em + var(--main-hpadding)) 1fr;
    grid-template-rows: 77px 9px 0px 1fr max-content;
    grid-template-areas: 
        "logo menu-main"
        "header-shadow header-shadow"
        "menu-details menu-details"
        "main main"
        "footer footer";
    /* border: 1px red solid; */
    height: 100%;
    min-height: 100vh;
    transition: 0.2s;
    transition-property: grid-template-rows;

    /* do not let fancy images overflow us in x dimension (and y on short pages) */
    position: relative;
    overflow: clip;
}
header {
    position: sticky;
    top: 0;
    grid-area: logo;
    display: flex;
    padding: var(--main-vpadding) 0 0 var(--main-hpadding);
    align-items: center;
    gap: 8px;
    background: white;
    z-index: var(--header-z-index);
}
.menu-opener {
    position: sticky;
    top: 0;
    grid-area: menu-main;
    text-align: right;
    padding: calc(var(--main-vpadding) + 15px) calc(var(--main-hpadding) + 10px) 0 0;
    background: white;
    z-index: var(--header-z-index);
}
.header-shadow {
    position: sticky;
    top: 77px;
    padding: 0;
    grid-area: header-shadow;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    z-index: var(--header-z-index);
    background: white;
}
nav.menu {
    position: sticky;
    grid-area: menu-details;
    padding: var(--main-vpadding) var(--main-hpadding) var(--main-vpadding) 0px;
    display: none;
    font: var(--nav-font-weight) 24px 'Montserrat', Tahoma, sans-serif;
    line-height: 29px;
    letter-spacing: 0.125em;
    z-index: var(--header-z-index);
    background: white;
}
.submenu {
    margin-top: 33px;
    font-size: 16px;
    line-height: 42px;
}
.submenu > ul {
    list-style-type: none;
}
nav.menu > ul {
    list-style-type: none;
    flex-basis: 680px;
}
.submenu li:not(:last-child) {
    border-bottom: black 1px solid;
}
nav #menu-item-nabozenstwo-short {
    display: none;
}
nav .dropdown-indicator {
    display: none;
}
nav li:hover > a, nav li:hover > .contact-toggle-label {
    color: var(--extra-col-1);
}
/* nav li:hover ul li {
    color: unset;
} */
nav .menu-item-active {
    font-weight: var(--nav-font-weight-active);
}
nav .menu-item-active > .submenu {
    font-weight: var(--nav-font-weight);
}
.main {
    grid-area: main;
    background-color: #ddd;
    padding: var(--main-vpadding) var(--main-hpadding) 0 var(--main-hpadding);
}
footer {
    grid-area: footer;
    padding: var(--main-vpadding) var(--main-hpadding);
    display: flex;
    flex-flow: row wrap;
    row-gap: 12px;
    column-gap: 12px;
    font: 400 12px 'Montserrat', Tahoma, sans-serif;
    letter-spacing: 1.5px;
    position: relative;
    z-index: 5;
    background: white;
}
footer .footer-smaller-group {
    flex: 1
}
footer .footer-regionals {
    flex: 2
}
footer .footer-regionals ul {
    column-width: 265px;
    column-fill: balance;
    column-gap: 65px;
}
footer .footer-regionals > div {
    width: 100%;
}
footer li {
    break-inside: avoid-column;
}
footer > div {
    display: flex;
    flex-flow: row wrap;
    align-content: baseline;
    column-gap: 12px;
}
footer > div h2, footer > div h3 {
    flex-basis: 100%;
    margin-bottom: 4px;
}
footer > div h3 {
    margin-top: 12px;
}
footer .footer-sites > div {
    flex: 1 1;
}
footer .contact-data {
    display: block;
}
.contact-mail {
    white-space: nowrap;
}
.contact-mail img {
    margin-right: 1ex;
    vertical-align: middle;
}
.contact-mail #mail-icon {
    display: none;
}
footer ul {
    list-style-position: outside;
    margin-left: 20px;
}
footer ul li::marker {
    font-size: 80%;
}
footer a {
    color: inherit;
    text-decoration: underline;
}
.tagline {
    font: 700 11px 'Montserrat', Tahoma, sans-serif;
}
@media (min-width: 350px) {
    .tagline {
        font: 700 12px 'Montserrat', Tahoma, sans-serif;
    }  
}
/* expand mobile menu */
.menu-on nav.menu {
    transform: scale(1, 1);
}
.menu-close-icon {
    display: none;
}
.menu-on .menu-open-icon {
    display: none
}
.menu-on .menu-close-icon {
    display: unset;
}
/* end expand mobile menu */
/* backgrounds */
.welcome-bg {
    background: var(--welcome-bg-col-1);
}
/* end backgrounds */
.welcome-banner {
    color: white;
    width: 100%;
    margin-top: 18px;

    /* do not let fancy images cover us */
    position: relative;
    z-index: 2;
}
.welcome-banner h1, .welcome-banner h2 {
    width: 90%;
}
.hr {
    /* height: 14px; */
    /* overflow: hidden; */
    margin: 20px 0;
}
div.hr {
    height: 4px;
    width: 100%;
    background-image: url("../img/hr.svg?v={{cache}}");
    background-repeat: repeat-x;
    background-position: center;
}
@media (min-width: 832px) {
    .hr {
        margin-bottom: 36px;
    }
}
div.hr-dark {
    background-image: url("../img/hr-dark.svg?v={{cache}}");
}
.welcome-image {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    --light-top: 22%;
    --light-left: 69%;
    --light-base-dim: 410px;
    --light-base-dim: calc(1*max(100vw, 100vh));
}
.lights {
    transition: transform 100ms;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
@keyframes mary-basic-light-anim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes mary-bg-light-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes mary-middle-light-anim {
    0% { opacity: 0; }
    100% { opacity: 1; filter: blur(120px); }
}
@keyframes mary-focus-light-anim {
    0% { opacity: 0; }
    100% { opacity: 1; filter: blur(20px); }
}
@keyframes mary-heart-light-anim {
    0% {
        transform: scale(0.3);
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.welcome-image img {
    width: 100%;
    max-width: calc(min(368px, 100vw - 2*var(--main-hpadding)));
}
.welcome-image .mary {
    max-width: 100%;
    width: max-content;
    position: relative;
}
.welcome-image .mary-heart-light {
    position: absolute;
    top: 32%;
    right: -13%;
    animation: 5s mary-heart-light-anim;
}
.mary-basic-light {
    top: var(--menu-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--menu-height));
    position: absolute;
    z-index: 0;
    background: radial-gradient(circle calc(100vw - 30px) at right 0px top 230px, var(--welcome-bg-col-2) 0%, var(--welcome-bg-col-1) 100%);
    animation: 5s both mary-basic-light-anim;
}
.welcome-image .mary-bg-light {
    --mary-bg-light-1: #FE9549;
    --mary-bg-light-2: #00023400;
    --w: var(--light-base-dim);
    --h: var(--light-base-dim);
    width: var(--w);
    height: var(--h);
    position: absolute;
    top: calc(var(--light-top) - var(--h)/2);
    left: calc(var(--light-left) - var(--w)/2);
    background: radial-gradient(circle calc((var(--w) + var(--h))/4) at right 50% top 50%, var(--mary-bg-light-1) 0%, var(--mary-bg-light-2) 94.86%);
    z-index: -1;
    border-radius: 50%;
    animation: 5s both mary-bg-light-anim;
}
.welcome-image .mary-focus-light {
    --light-1: #FFF;
    --light-2: #FFE55C;
    --w: calc(var(--light-base-dim) * 0.22);
    --h: calc(var(--light-base-dim) * 0.22);
    width: var(--w);
    height: var(--h);
    position: absolute;
    top: calc(var(--light-top) - var(--h)/2);
    left: calc(var(--light-left) - var(--w)/2);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(90.77% 90.77% at 50% 50%, var(--light-1) 0%, var(--light-2) 100%);
    filter: blur(10px);
    animation: 5s both mary-focus-light-anim;
}
.welcome-image .mary-middle-light {
    --light-1: #FFF0A1;
    --light-2: rgba(179, 125, 83, 0.79);
    --w: calc(var(--light-base-dim) * 0.62);
    --h: calc(var(--light-base-dim) * 0.62);
    width: var(--w);
    height: var(--h);
    position: absolute;
    top: calc(var(--light-top) - 3% - var(--h)/2);
    left: calc(var(--light-left) - 3% - var(--w)/2);
    z-index: -1;
    border-radius: 50%;
    filter: blur(15px);
    background: radial-gradient(37.79% 43.72% at 50% 50%, var(--light-1) 0%, var(--light-2) 100%);
    animation: 5s both mary-middle-light-anim;
}
.main-content {
    padding: 0 var(--main-content-hpadding);
    z-index: 1;
    position: relative;
}
.nav-btn {
    float: right;
}
nav.menu {
    display: unset;
    height: calc(100vh - var(--menu-height));
    top: var(--menu-height);
    transform-origin: top;
    transform: scale(1, 0);
    transition: transform 200ms ease-in-out;
}
nav.menu > ul > li {
    margin-bottom: 33px;
}
.menu-on nav.menu {
    transition: transform 200ms ease-in;
}
nav.menu * {
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.menu-on nav.menu * {
    opacity: 1;
    transition: opacity 200ms ease-in 100ms;
}
/* tablet version */
@media (min-width: 460px) {
    html {
        --welcome-image-offset-right: 184px;
        --main-content-hpadding: 20px;
    }
    body {
        font-size: 16px; line-height: 150%; font-weight: 400;
        font-family: 'Montserrat', Tahoma, sans-serif;
    }
    .text-smaller {
        font-size: 14px;
    }
    /* backgrounds */
    .mary-basic-light {
        background: radial-gradient(circle calc(100vw - 30px) at right -40vw top -40vh, var(--welcome-bg-col-2) 0%, var(--welcome-bg-col-1) 100%);
    }
    /* end backgrounds */
    .welcome-image {
        position: absolute;
        left: calc(100% - var(--welcome-image-offset-right));
        top: 58px;
        --light-base-dim: calc(2*max(100vw, 100vh));
        --light-left: 80%;
        --light-top: 5%;
    }
    .welcome-banner {
        width: calc(100% - var(--welcome-image-offset-right));
        margin-bottom: 100px;
    }
    .welcome-image .mary-focus-light {
        --w: calc(var(--light-base-dim) * 0.18);
        --h: calc(var(--light-base-dim) * 0.18);
    }
}
/* fix welcome image for screens in this specific range */
@media (min-width: 460px) and (max-width: 619px) {
    html {
        --welcome-image-offset-right: 157px;
    }
    .welcome-image img {
        max-width: 314px;
    }
}
@media (min-width: 500px) {
    h1 { font-size: 34px; font-weight: 800; line-height: 105%; letter-spacing: 1.8px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
@media (min-width: 620px) {
    h1 { font-size: 42px; font-weight: 800; line-height: 105%; letter-spacing: 1.8px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
@media (min-width: 750px) {
    h1 { font-size: 46px; font-weight: 800; line-height: 105%; letter-spacing: 1.8px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
/* end tablet version */
/* desktop version */
@media (min-width: 832px) {
    html {
        --main-hpadding: calc((100vw - 800px) / 2);
        --welcome-image-offset-right: 244px;
        --main-content-hpadding: 64px;
    }
    /* h1 { font-size: 72px; font-weight: 700; line-height: 105%; letter-spacing: 2.16px; } */
    h1 { font-size: 56px; font-weight: 800; line-height: 105%; letter-spacing: 1.86px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    h2 { font-size: 36px; font-weight: 700; line-height: 120%; letter-spacing: 1.8px; }
    h3 { font-size: 24px; font-weight: 700; line-height: 120%; letter-spacing: 1.2px; }
    h4 { font-size: 16px; font-weight: 400; line-height: 150%; }
    h5 { font-size: 14px; font-weight: 700; line-height: 150%; }

    h3 {
        margin-bottom: 21px;
    }
    footer h3 {
        line-height: 120%;
        letter-spacing: 1.2px;
        font-weight: 700;
    }
    .menu-opener {
        grid-area: unset;
        display: none;
    }
    nav.menu * {
        opacity: 1;
        transform: unset;
    }
    nav.menu {
        top: 0;
        height: unset;
        transition: none;
        transform: unset;
        grid-area: menu-main;
        display: inline-flex;
        justify-content: center;
        font: 500 14px 'Montserrat', Tahoma, sans-serif;
        letter-spacing: 1.75px;
        margin-bottom: calc(-9px);
    }
    nav.menu > ul {
        margin-top: unset;
        display: flex;
        justify-content: space-around;
    }
    nav.menu > ul > li {
        margin-bottom: unset;
        display: flex;
        flex-basis: 0;
        text-align: center;
        align-items: center;
    }
    .submenu {
        margin-top: 33px;
        line-height: 16px;
        text-align: left;
        letter-spacing: 12.5%;
        display: none;
        font-size: 14px;
        background-color: white;
        position: absolute;
        top: 32px;
        width: 188px;
        border-top: black 2px solid;
        padding: 19px;
        z-index: 20;
    }
    .submenu li:not(:last-child) {
        border-bottom: none;
        margin-bottom: 15px;
    }
    nav #menu-item-nabozenstwo-long {
        display: none;
    }
    nav #menu-item-nabozenstwo-short {
        display: inline-flex;
    }
    nav .dropdown-indicator {
       display: inline;
       margin-left: 2px;
    }
    nav .expandable-menu:hover .submenu {
        display: block;
        color: #000234;
    }
    footer {
        font: 400 16px 'Montserrat', Tahoma, sans-serif;
        letter-spacing: 2px;
        line-height: 160%;
    }
    .contact-mail #mail-icon-sm {
        display: none;
    }
    .contact-mail #mail-icon {
        display: inline;
    }
    /* backgrounds */
    .mary-basic-light {
        background: radial-gradient(circle calc(100vw - 30px) at right -40vw top -40vh, var(--welcome-bg-col-2) 0%, var(--welcome-bg-col-1) 100%);
    }
    /* end backgrounds */
    .welcome-image {
        left: calc(100% - var(--welcome-image-offset-right));
        top: 58px;
        --light-base-dim: calc(2*max(100vw, 100vh));
    }
    .welcome-banner {
        width: calc(100% - var(--welcome-image-offset-right));
        margin-top: 36px;
        margin-bottom: 146px;
    }
    .welcome-image .mary {
        max-width: 100%;
    }
    .welcome-image img {
        max-width: calc(min(488px, 100vw - 2*var(--main-hpadding)));
    }
    .contact-btn {
        display: auto;
    }
    #contact-link {
        display: none;
    }
    .contact-toggle:checked ~ .contact {
        transform: translateX(-100%);
    }
}
/* end desktop version */
/* wide screens */
@media (min-width: 1000px) {
    html {
        --main-hpadding: calc((100vw - 938px) / 2);
        --main-content-hpadding: 94px;
    }
    nav.menu {
        padding-left: 20px;
    }
}
@media (min-width: 1200px) {
    html {
        --main-hpadding: calc((100vw - 1100px) / 2);
    }
}
/* end wide screens */

/* ========================== */
/*         AKTUALNOSCI        */
/* ========================== */

html {
    --news-section-header-vpadding: 23px;
    --news-post-vpadding: 11px;
    --news-hpadding: 22px;
    --news-hmargin: calc(-1 * var(--main-hpadding));
}
.news-section-header {
    padding: var(--news-section-header-vpadding) var(--news-hpadding) calc(var(--news-section-header-vpadding) + var(--generic-border-radius)) var(--news-hpadding);
    background: #f3e6e680;
    border-radius: var(--generic-border-radius) var(--generic-border-radius) 0 0;
    margin-left: var(--news-hmargin);
    margin-right: var(--news-hmargin);
}
.news-section-header + .news-post {
    margin-top: calc(-1 * var(--generic-border-radius));
}
.news-post {
    padding: var(--news-post-vpadding) var(--news-hpadding);
    border-radius: var(--generic-border-radius);
    background: #f3e6e6;
    margin-bottom: 63px;
    margin-left: var(--news-hmargin);
    margin-right: var(--news-hmargin);
}
.news-post .hr {
    margin-top: 8px;
}
.news-post img {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.news-post ul, .news-post ol {
    margin-left: 30px;
}
@media (min-width: 620px) {
    html {
        --news-hmargin: 0;
    }
}
@media (min-width: 832px) {
    html {
        --news-section-header-vpadding: 40px;
        --news-post-vpadding: 28px;
        --news-hpadding: 50px;
    }
    .news-post {
        margin-bottom: 58px;
    }
}
@media (min-width: 1000px) {
    html {
        --news-section-header-vpadding: 58px;
        --news-hpadding: 95px;
    }
}

@media (min-width: 750px) {
    .news-post .side-image {
        max-width: 33%;
        min-width: 260px;
        order: 1;
    }
}


/* ========================== */
/*     REGULAR SUBPAGES       */
/* ========================== */

@media (min-width: 620px) {
    .page-body, .page-intro {
        text-align: justify;
    }
    .page-body h1, .page-body h2, .page-body h3,
    .page-intro h1, .page-intro h2, .page-intro h3 {
        text-align: left;
    }
}

.page-body, .page-intro {
    --page-h3-margin-top: 37px;
    --page-h3-margin-bottom: 31px;
}

@media (min-width: 832px) {
    .page-body, .page-intro {
        --page-h3-margin-top: 79px;
    }
}

.page-intro {
	color: white;
    --page-intro-padding-top: 30px;
    padding-top: var(--page-intro-padding-top);
}

.page-intro .welcome-image {
    --welcome-image-offset-right: 0px;
    position: absolute;
    left: calc(100% - var(--welcome-image-offset-right));
    --light-top: 22%;
    --light-left: 69%;
    --light-base-dim: calc(2*100vw);
}

.page-intro .welcome-image * {
    animation-duration: 0s;
}

@media (min-width: 832px) {
    .page-intro {
        --page-intro-padding-top: 104px;
    }
    .page-intro .welcome-image {
        --welcome-image-offset-right: 8%;
        top: 80px;
    }
}

.page-intro-content {
    position: relative;
    z-index: 1;
}

.page-body {
    position: relative;
}

.page-body-content {
    --top-gradient-height: 110px;
    --bottom-gradient-height: 158px;
    --top-vpadding: 0px;
    --bottom-vpadding: 0;
    /* width: 100%; */
    background-image: linear-gradient(
        180deg,
        transparent 0px,
        transparent calc(var(--top-gradient-height)),
        #f3e6e6 calc(var(--top-gradient-height)),
        #f3e6e6 100%
    );
    /* background-position-y: var(--top-gradient-height); */
    color: black;
    margin: 0 calc(-1 * var(--main-hpadding));
    padding: 0 var(--main-hpadding) var(--bottom-vpadding) var(--main-hpadding);
}

.page-body-content::before {
    content: ' ';
    height: var(--top-gradient-height);
    background: linear-gradient(180deg, #ffffff00 0%, #f3e6e6 calc(100% - 25px));
    /* linear gradient with cubic-bezier easing */
    background: linear-gradient(
        to bottom,
        hsla(0, 33.33%, 92.94%, 0) 0%,
        hsla(0, 33.33%, 92.94%, 0.013) 8.1%,
        hsla(0, 33.33%, 92.94%, 0.049) 15.5%,
        hsla(0, 33.33%, 92.94%, 0.104) 22.5%,
        hsla(0, 33.33%, 92.94%, 0.175) 29%,
        hsla(0, 33.33%, 92.94%, 0.259) 35.3%,
        hsla(0, 33.33%, 92.94%, 0.352) 41.2%,
        hsla(0, 33.33%, 92.94%, 0.45) 47.1%,
        hsla(0, 33.33%, 92.94%, 0.55) 52.9%,
        hsla(0, 33.33%, 92.94%, 0.648) 58.8%,
        hsla(0, 33.33%, 92.94%, 0.741) 64.7%,
        hsla(0, 33.33%, 92.94%, 0.825) 71%,
        hsla(0, 33.33%, 92.94%, 0.896) 77.5%,
        hsla(0, 33.33%, 92.94%, 0.951) 84.5%,
        hsla(0, 33.33%, 92.94%, 0.987) 91.9%,
        hsl(0, 33.33%, 92.94%) 100%
    );
    padding: 0 0 0 0;
    margin: 0 calc(-1 * var(--main-hpadding)) var(--top-vpadding) calc(-1 * var(--main-hpadding));
    display: block;
}

.page-body-content::after {
    content: ' ';
    height: var(--bottom-gradient-height);
    background: linear-gradient(
        to bottom,
        hsl(0, 33.33%, 92.94%) 0%,
        hsl(1.5, 34.27%, 92.73%) 8.1%,
        hsl(4.95, 36.64%, 92.12%) 15.5%,
        hsl(8.75, 39.66%, 91.19%) 22.5%,
        hsl(12.06, 42.72%, 89.98%) 29%,
        hsl(14.66, 45.49%, 88.57%) 35.3%,
        hsl(16.65, 47.85%, 87.01%) 41.2%,
        hsl(18.15, 49.8%, 85.35%) 47.1%,
        hsl(19.27, 51.38%, 83.67%) 52.9%,
        hsl(20.13, 52.64%, 82.01%) 58.8%,
        hsl(20.78, 53.64%, 80.45%) 64.7%,
        hsl(21.26, 54.41%, 79.04%) 71%,
        hsl(21.62, 55%, 77.83%) 77.5%,
        hsl(21.86, 55.41%, 76.9%) 84.5%,
        hsl(22.01, 55.65%, 76.29%) 91.9%,
        hsl(22.06, 55.74%, 76.08%) 100%
    );
    padding: 0;
    margin: 0 calc(-1 * var(--main-hpadding)) 0 calc(-1 * var(--main-hpadding));
    display: block;
}

@media (min-width: 832px) {
    .page-body-content {
        --top-gradient-height: 170px;
        --top-vpadding: 0px;
    }
}


.page-body-content h3 {
    color: var(--extra-col-1);
    margin-top: var(--page-h3-margin-top);
    margin-bottom: var(--page-h3-margin-bottom);
    /* margin-top: 0; */
    /* margin-bottom: 0; */
}

.page-body-content .accordion h3 {
    margin-top: calc(var(--page-h3-margin-top) - var(--page-h3-margin-bottom));
}

.page-body-content h3:first-child, .page-body-content .accordion:first-child h3 {
    margin-top: 0;
}

.page-body a, .page-intro a, .news-post a {
    text-decoration: underline;
}

.highlight-1 {
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-transform: uppercase;
}

.illustrated-1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
}

.illustrated-1 > figure {
    flex: 1;
    text-align: center;
}

.illustrated-1 figure > * {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.illustrated-1 figcaption {
    margin-top: 26px;
}

@media (min-width: 620px) {
    .illustrated-1 {
        flex-direction: row;
    }
    .illustrated-1 figcaption {
        margin-top: 46px;
    }
}

.illustrated-2, .news-post-illustrated-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: var(--paragraph-margin-bottom);
    gap: 30px;
}

.illustrated-2 p:last-child, .news-post-illustrated-2 p:last-child {
    margin-bottom: 0;
}

@media (min-width: 620px) {
    .illustrated-2 {
        flex-direction: row;
        gap: 0px;
    }
    .illustrated-2.keep-gap {
        gap: 30px;
    }

    .illustrated-2.rev {
        flex-direction: row-reverse;
    }
}

@media (min-width: 750px) {
    .news-post-illustrated-2 {
        flex-direction: row;
        gap: 0px;
    }
    .news-post-illustrated-2.keep-gap {
        gap: 30px;
    }

    .news-post-illustrated-2.rev {
        flex-direction: row-reverse;
    }
}

.news-post-illustrated-2.align-start {
    align-items: flex-start;
}

blockquote {
    color: #000;
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 800;
    line-height: 120%; /* 16.8px */
    letter-spacing: 0.7px;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

    margin: 0;
    padding: 40px 0 60px 0;
    position: relative;
    z-index: 0;
    clear: both;
}

blockquote::before, blockquote::after {
    display: block;
    position: absolute;
    content: ' ';
    width: 92px;
    height: 84px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}

blockquote::before {
    background-image: url("../img/quotes-left.svg?v={{cache}}");
    bottom: 11px;
    left: -10px;
}

blockquote::after {
    background-image: url("../img/quotes-right.svg?v={{cache}}");
    top: -12px;
    right: 1px;
}

@media (min-width: 620px) {
    blockquote {
        padding-left: 60px;
        padding-right: 60px;
    }

    blockquote::before {
        left: 15px;
    }

    blockquote::after {
        right: 16px;
    }
}

@media (min-width: 832px) {
    blockquote {
        color: #000;
        font-family: 'Playfair Display', serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 800;
        line-height: 120%; /* 28.8px */
        letter-spacing: 1.2px;
        
        padding: 56px 89px 76px 89px;
    }
    
    blockquote::before, blockquote::after {
        width: 163px;
        height: 147px;
    }
    
    blockquote::before {
        bottom: 12px;
        left: 24px;
    }

    blockquote::after {
        top: -3px;
        right: 25px;
    }
}

.float {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.float-always {
    --float-margin: 10px;
    margin: 0 var(--float-margin) var(--float-margin) var(--float-margin);
}

.float-always.left {
    float: left;
    margin-left: 0;
}

@media(min-width: 620px) {
    .float {
        --float-margin: 30px;
        display: unset;
        margin: var(--float-margin);
    }
    .float.right {
        float: right;
        margin-right: 0;
    }
    .float.left {
        float: left;
        margin-left: 0;
    }
    .float:first-child {
        margin-top: 0;
    }
    /* mimic margin collapsing */
    /* p ~ .float {
        margin-top: calc(var(--float-margin) - var(--paragraph-margin-bottom));
    }
    p ~ .float.push-down-for-h3 {
        margin-top: calc(var(--page-h3-margin-top) - var(--paragraph-margin-bottom));
    } */

    .float-always {
        --float-margin: 30px;
    }
}

/* align with h3 element that follows */
.push-down-for-h3 {
    margin-top: var(--page-h3-margin-top);
}

img.full-size {
    max-width: 100%;
    display: block;
    margin: 0 auto var(--paragraph-margin-bottom) auto;
}

@media(max-width: 619px) {
    .only-landscape-screens {
        display: none !important;
    }
}

@media(min-width: 620px) {
    .only-portrait-screens {
        display: none !important;
    }
}

audio {
    width: 100%;
    margin-bottom: 31px;
}

@media(min-width: 832px) {
    audio {
        margin-bottom: 59px;
    }
}

details {
    padding: 60px;
}

details summary {
    transition: margin 200ms ease-in-out;
}

details[open] summary {
    margin-bottom: 60px;
}

.accordion {
    --expander-dim: 21px;
    --expander-margin-right: 12px;
}

@media (min-width: 832px) {
    .accordion {
        --expander-dim: 33px;
        --expander-margin-right: 16px;
    }
}

.accordion > input {
    display: none;
}

/* details */
.accordion > input + * + * {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-out;
    padding-left: calc(var(--expander-dim) + var(--expander-margin-right));
}
.accordion > input + * + *[style] {
    /* Cancel "height: 0" base style which otherwise would be applied prematurely
     * - before JS changes from height: auto to a concrete value in px. */
    height: unset;
}

/* details - open */
.accordion > input:checked + * + * {
    height: auto;
}

.accordion > input + * label {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* label (summary) */
.accordion > input + * label::before {
    content: ' ';
    background: url("../img/accordion-arrow.svg?v={{cache}}");
    background-size: cover;
    transform: rotate(0deg);
    width: var(--expander-dim);
    height: var(--expander-dim);
    margin-right: var(--expander-margin-right);
    transition: transform 200ms ease-in-out;
    vertical-align: bottom;
    flex-shrink: 0;
}

/* label (summary) - open */
.accordion > input:checked + * label::before {
    transform: rotate(-180deg);
}

ul.footnotes {
    list-style: none;
}

.footnotes::before {
    content: ' ';
    display: block;
    width: 39%;
    margin: 0 0 18px 0;
    padding: 0;
    border-top: black 1px solid;
}

.footnotes a[name], a[name]:not([href]) {
    display: block;
    position: relative;
    visibility: hidden;
    top: calc(-1 * var(--menu-height));
    font-size: 0;
}

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

@media (min-width: 620px) {
    .alt-sides > * {
        width: 80%;
    }
    .alt-sides .img-container {
        flex-shrink: 0;
        width: 192px;
    }
}

@media (min-width: 832px) {
    .alt-sides > * {
        width: 65%;
    }
}

.alt-sides > *.even {
    margin-left: auto;
}

.page-intro h3 {
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.page-body-content .base-text-color {
    color: black;
}

@media (min-width: 620px) {
    .kardynal-image {
        max-width: 33%;
        min-width: 240px;
        order: 1;
    }
}

.non-breakable {
    white-space: nowrap;
}

.dl-frame {
    max-width: 320px;
    min-width: 280px;
    padding: 15px 17px 15px 17px;
    background: white;
    border-radius: 3px;
    margin: 15px auto 15px 0;
}

.dl-frame > h3 {
    margin: 3px 0;
}

.dl-frame h3 a {
    font-weight: 400;
    color: var(--extra-col-1);
    text-decoration: none;
}

@media (min-width: 832px) {
    .dl-frame {
        padding: 19px 50px;
        max-width: 500px;
        min-width: 340px;
    }

    .dl-frame > h3 {
        margin: 8px 0;
    }
}

.dl-frames {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.dl-frames .dl-frame {
    flex: 1;
}

dt {
    font-weight: 700;
    color: var(--extra-col-1);
}

dd {
    margin-bottom: 18px;
}

.highlight-2 {
    color: var(--extra-col-1);
    font-weight: 700;
}

.light-bold {
    font-weight: 500;
}

.bold {
    font-weight: 700;
}

.media-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0;
    gap: 30px;
    margin-bottom: 30px;
}

@media (min-width: 832px) {
    .media-container {
        flex-direction: row;
        border-radius: 10px;
        border: 3px solid rgba(243, 230, 230, 0.00);
        background: rgba(243, 230, 230, 0.10);
        padding: 95px;
    }
    .media-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .media-item.media-image {
        justify-content: flex-start;
    }
}

@media (min-width: 1200px) {
    .media-container {
        text-align: left;
    }
}

.media-container > * {
    flex: 1;
    flex-basis: 340px;
}

.iframe-container {
    position: relative;
    padding-top: 56%;
}

.iframe-container iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.img-container {
    width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.img-container img {
    max-width: 100%;
}

.page-body-content:empty::after {
    height: 0;
}

.page-body-content:empty::before {
    --top-gradient-height: 110px;
    background: linear-gradient(
      to bottom,
      #000234,
      /* hsl(238.85, 90.04%, 10.58%) 8.1%,
      hsl(242.84, 72.89%, 11.82%) 15.5%,
      hsl(250.58, 55.66%, 13.45%) 22.5%,
      hsl(264.84, 38.78%, 15.55%) 29%,
      hsl(293.85, 23.98%, 18.02%) 35.3%,
      hsl(333.03, 22.79%, 23.72%) 41.2%,
      hsl(356.33, 23.23%, 30.22%) 47.1%,
      hsl(9.38, 29.15%, 35.23%) 52.9%,
      hsl(15.58, 34.95%, 39.73%) 58.8%,
      hsl(19.06, 39.34%, 43.99%) 64.7%,
      hsl(21.2, 42.64%, 47.83%) 71%,
      hsl(22.57, 47.1%, 51.11%) 77.5%,
      hsl(23.44, 54.09%, 53.65%) 84.5%,
      hsl(23.93, 59.04%, 55.3%) 91.9%, */
      #945d45
    );
}

.contact .contact-mail {
    margin: 15px 0;
}

.page-intro a {
    color: white;
}

.contact-page ~ footer {
    display: none;
}

.contact-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;   
}