@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);

.content-space.lead-space__batch{
    position: relative;
}

.desatRokovBatch{
    --side: clamp(160px, 20vw, 250px);
    position: absolute;
    top: calc(var(--side) * -1.05);
    left: calc(50% - (min(var(--contentSpaceMaxWidth), 100vw) * 0.5) + (var(--side) * 0.5) + var(--contentPadding));
    transform: translateX(-50%);
    width: var(--side);
    height: var(--side);
}
.article-list{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr; /* every row as tall as the tallest box */
    gap: 2rem;
}

.articlePrev{
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 18rem;
    border-radius: 0.7rem;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: var(--color-white);
    box-shadow:
            0 0rem 2px color-mix(in srgb, black 15%, transparent);
    transition:
        transform 0.25s ease-out,
        box-shadow 0.25s ease-out;
}

.articlePrev h4{
    text-shadow: 0 0.1rem 0.2rem rgb(46, 46, 46), 0 0.05rem 0.05rem rgb(46, 46, 46);
}

.articlePrevText{
    flex: none; /* fixed height, the image area takes the rest */
    display: flex;
    align-items: flex-start; /* align items to the start of the cross axis */
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem;
    padding-top: .5rem;
    color: var(--primaryFontColor);
}

.articlePrevText h5{
    margin-top: 0.4rem !important;
}

/* keyboard focus gets the lift on every device */
.articlePrev:focus-visible{
    transform: translateY(-0.25rem);
    box-shadow:
            0 0.8rem 2rem color-mix(in srgb, black 25%, transparent),
            0 0rem 2px color-mix(in srgb, black 15%, transparent);
    outline: none;
}

/* hover effects only where a real pointer can hover (not touch screens) */
@media (hover: hover) and (pointer: fine) {
    .articlePrev:hover{
        transform: translateY(-0.25rem);
        box-shadow:
            0 0.8rem 2rem color-mix(in srgb, black 25%, transparent),
            0 0rem 2px color-mix(in srgb, black 15%, transparent);
    }

    .articlePrev:hover .articlePrevBody::before{
        opacity: 0.85;
    }
}

/* beat the global a:link / a:visited color from links.css */
.articlePrev:link,
.articlePrev:visited{
    color: var(--color-white);
}

/* drop the global link underline / focus outline pseudo-elements */
.articlePrev::before,
.articlePrev::after,
.articlePrev:focus-visible::before{
    display: none;
}

/* hidden by the tag filter */
.articlePrev[hidden]{
    display: none;
}

.articlePrevBody{
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 1.5rem;
    background-size: cover;
    background-position: center;
}

/* darkening gradient so the text stays readable on any image */
.articlePrevBody::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        color-mix(in srgb, black 85%, transparent) 0%,
        color-mix(in srgb, black 55%, transparent) 45%,
        color-mix(in srgb, black 10%, transparent) 100%
    );
    transition: opacity 0.25s ease-out;
}

.articlePrevBody > *{
    margin: 0;
}

/* tags sit as labels in the top-left corner, one pill per tag */
.articleTags{
    order: -1;
    margin-bottom: auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.articleTag{
    padding: 0.25rem 0.7rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--primaryAccentColor);
    color: var(--color-dark-grey);
}

.articleHeadline{
    font-family: 'IBM Plex Serif', serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
}

.articleDescription{
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.4;
    opacity: 0.9;
    /* always exactly 2 lines tall: shorter text keeps the space, longer is cut with … */
    height: calc(2em * 1.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* button on the left, date on the right, same row */
.articlePrevFooter{
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.4rem;
}

.articleDate{
    margin: 0 !important;
    white-space: nowrap;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--primaryFontColor);
    font-style: italic;
    opacity: 0.7;
    
}

@media (min-width: 700px) {
    .article-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1100px) {
    .article-list{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}






.bgWhite{
    background-color: #fff !important;
}

.bgMagenta{
    background-color: #8a228a !important;
}

.bgRed{
    background-color: #d20069 !important;
}

.bgLightGrey{
    background-color: #f6f6f6 !important;
}

.bgMediumGrey{
    background-color: #545456 !important;
}

.bgDarkGrey{
    background-color: #202021 !important;
}

.bgDarkGreySemiTransparent{
    background-color: #202021c7 !important;
}
.box{
    padding: 1.5rem;
}
.button {
    --accentColor: var(--primaryAccentColor);

    --accentColorLight: hsl(from var(--accentColor) h s calc(l + 5));
    --accentColorDark: hsl(from var(--accentColor) h s calc(l - 5));
    --accentColorVeryDark: hsl(from var(--accentColor) h calc(s - 10) calc(l - 16));

    --sizeMultiplier: 1;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    padding:
        calc(0.6rem * var(--sizeMultiplier))
        calc(1.5rem * var(--sizeMultiplier));

    border: none;
    border-radius: calc(0.7rem * var(--sizeMultiplier));
    outline: none;

    color: #fff;
    background:
        linear-gradient(
            0deg,
            var(--accentColorDark) 0%,
            var(--accentColorLight) 100%
        );

    box-shadow:
        0 0.03rem 0.1rem var(--accentColorDark),
        inset 0 0.02rem 0.05rem color-mix(in srgb, white 42%, transparent),
        inset 0 0.05rem 0.1rem color-mix(in srgb, white 42%, transparent),
        0 0 5rem color-mix(in srgb, var(--accentColor) 50%, transparent),
        0 0 1rem color-mix(in srgb, var(--accentColor) 20%, transparent);
    
        text-shadow:
        0 0.03rem 0.1rem var(--accentColorDark),
        0 0.03rem 0.1rem color-mix(in srgb, rgb(0, 0, 0) 42%, transparent);

    cursor: pointer;

    transition:
        box-shadow var(--animationDuration) ease-out;



    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    display: inline-block;
    z-index: 999;
    user-select: none;
}

a.button, a.button:link, a.button:visited, a.button:hover, a.button:active {
    text-decoration: none;
    color:#fff;
}


.button:disabled {
    filter: saturate(0);
    opacity: 0.7;
    pointer-events: none;
}

.button.onBright{
    box-shadow:none
}

.button span {
    display: block;
}

.button span.btnIco {
    margin-bottom: -0.01rem;
    margin-right: 0.2rem;
}

.button-body{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}


.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: var(--accentColorLight);
    opacity: 0;

    transition: opacity var(--animationDuration) ease-out
}

.button.onBright::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: var(--accentColorDark);
    opacity: 0;

    transition: opacity var(--animationDuration) ease-out
}

@media (hover: hover) {
    .button:hover::before {
        opacity: 1;
        transition: opacity var(--animationDuration) ease-out;
    }


    .button:hover {
        box-shadow:
            0 0.03rem 0.1rem var(--accentColorDark),
            inset 0 0.02rem 0.05rem color-mix(in srgb, white 42%, transparent),
            inset 0 0.05rem 0.1rem color-mix(in srgb, white 42%, transparent),
            0 0 5rem color-mix(in srgb, var(--accentColor) 90%, transparent),
            0 0 1rem color-mix(in srgb, var(--accentColor) 70%, transparent);
        
    }

    .button.onBright:hover{
        box-shadow:none;
    }
}

@media (hover: none) and (pointer: coarse) {

    .button {
        transition:
            box-shadow calc(var(--animationDuration) * 0.1) ease-out;
    }

    .button:active::before {
        opacity: 1;
        transition: opacity calc(var(--animationDuration) * 0.1) ease-out;
    }

    .button:active {
        box-shadow:
            0 0.03rem 0.1rem var(--accentColorDark),
            inset 0 0.02rem 0.05rem color-mix(in srgb, white 42%, transparent),
            inset 0 0.05rem 0.1rem color-mix(in srgb, white 42%, transparent),
            0 0 5rem color-mix(in srgb, var(--accentColor) 90%, transparent),
            0 0 1rem color-mix(in srgb, var(--accentColor) 70%, transparent);
    }
}


button.small{
    --sizeMultiplier: 0.7;
    font-size: 1rem;
}


.button:focus-visible{
    outline: 0.1rem solid var(--accentColorLight);
    outline-offset: 0.1rem;
}




.moreBtn.bodyLink.lHChange {
    line-height: 2;
}





.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 900px) {
    .buttons {
        justify-content: flex-start;
    }
}
.povedaliOnasCarrousel{
    width: 100%;
    overflow: hidden;
}

.scstCarrousel{
    display: block;
    position: relative;
    overflow: visible;
    width: 100%;
    width: 100vw;
    margin: 0 auto;
    touch-action: pan-y; /* let the app handle horizontal drag; prevents the browser's own horizontal panning/swipe-navigation from dragging the whole page */
    /* background-color: aqua;
    border-top: 10px solid rgb(0, 102, 255);
    border-bottom: 10px solid rgb(0, 102, 255); */
}


.scstCarrousel > .scstRow{
    display: flex;
    position: relative;
    height: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    transform: translateX(0);
}

.scstCarrousel > .scstRow.source{
    visibility: hidden;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    pointer-events: none;
}

.scstCarrousel > .scstRow.scroller{
    position: absolute;
    left:50%;
    /* transform: translate3d(-50%, 0, 0); */
    top:0;
    height: 100%;
    width: unset
}



.scstCarrousel > .scstRow > .scstItem{
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    height: 100%;
    aspect-ratio: 1/1;
}

.scstCarrousel > .scstRow > .scstItem.wider{
    aspect-ratio: 1.5/1;
}

.scstCarrousel > .scstRow > .scstItem.taller{
    aspect-ratio: 1/1.5;
}

.scstCarrousel > .scstRow > .scstItem.responsive{
    aspect-ratio: 1/1.35;
}

@media (min-width: 500px) {
    .scstCarrousel > .scstRow > .scstItem.responsive{
        aspect-ratio: 1/1;
    }
}

/* .scstCarrousel > .scstRow > .scstItem > img{
    position: absolute;
    height: 100%;
    object-fit: cover;
} */

.scstCarrousel > .scstRow > .scstItem > img{
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}































.scstCarrousel{
    height: min(60svh, calc(95vw * 1.35));
}

@media (min-width: 768px) {
    .scstCarrousel{
        height: clamp(400px, 35vmin, 800px);
    }
}

.scstCarrousel > .scstRow > .scstItem {
    outline: solid 0px var(--scst-color-border);
    border-radius: 2rem;
    box-shadow: none;
    background-color: #f6f6f6;
}

/* @media (min-width: 1024px) {
    .scstCarrousel{
        height: 60svh;
    }
} */

/* @media (min-width: 1400px) {
    .scstCarrousel{
        height: 30svh;
    }
} */


.scstCarrousel > .scstRow{
    gap: 1rem
}
/* 
@media (min-width: 1024px) {
    .scstCarrousel > .scstRow{
    gap: 20px
}
} */


.scstCarrousel > .scstRow > .scstItem > img{
    padding: 20px;
}






.scstCarrousel > .scstRow > .scstItem{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 1rem;
    padding-right: 0.5rem;
}

.scstCarrousel > .scstRow > .scstItem > .text{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%);
}


.scstCarrousel > .scstRow > .scstItem > .text > p{
    padding-bottom: 0.4rem;
    padding-right: 0.5rem;
}

.scstCarrousel > .scstRow > .scstItem > .text > p:last-of-type{
    padding-bottom: 1rem;
}

@media (min-width: 425px) {
    .scstCarrousel > .scstRow > .scstItem{
        padding:2rem;
        padding-right: 1rem;
    }

    .scstCarrousel > .scstRow > .scstItem > .text > p{
        padding-right: 1rem;
    }
}




.scstItem .rating{
    padding-bottom: 0.5rem;
}

.scstCarrousel .rating::before{
    content: '★★★★★';
    font-size: 20px;
    color: #ffbb00;
    letter-spacing: 2px;
    text-shadow: 0px 0px 1px #c48d00;
}




.scstCarrousel .scstItem .author{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-top: 1rem;
}

.scstCarrousel .scstItem .author img{
    display: block;
    height: 50px;
    width: auto;
}


.scstCarrousel .scstItem .author a:link, .scstCarrousel .scstItem .author a:visited, .scstCarrousel .scstItem .author a:hover, .scstCarrousel .scstItem .author a:active{
    color: var(--color-dark-grey);
    
}


.scstCarrousel img.rounded{
    border-radius: 50%;
}

.scstPauseToggle{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
}

.scstPauseToggle::before{
    content: '⏸';
    display: block;
}

.scstPauseToggle[aria-pressed="true"]::before{
    content: '▶';
}

.scstPauseToggle:hover,
.scstPauseToggle:focus-visible{
    background-color: rgba(0, 0, 0, 0.75);
}

.scstPauseToggle:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 2px;
}





section.povedaliOnasCarrousel{
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
}

.checkbox {
    --primaryAccentColor: #23c464;
    --borderColor: #d1d1d1;
    --borderColorHover: hsl(from var(--borderColor) h s calc(l - 12));
    --labelColor: var(--primaryFontColor);
    --errorColor: #ff4d4f;
    --boxSize: 1.55rem;

    display: block;
    cursor: pointer;
}

/* Visually hidden native control — kept in the layout so it stays focusable */
.checkbox > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.checkbox .checkbox-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* The visible box */
.checkbox .checkmark {
    position: relative;
    flex: 0 0 auto;
    width: var(--boxSize);
    height: var(--boxSize);
    background-color: #fff;
    border: 1px solid var(--borderColor);
    border-radius: 0.375rem;
    outline: none;

    transition:
        border-color var(--animationDuration) ease-out,
        box-shadow var(--animationDuration) ease-out,
        background-color var(--animationDuration) ease-out;
}

/* Tick */
.checkbox .checkmark::after {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 0.3rem;
    height: 0.6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform var(--animationDuration) ease-out;
}

.checkbox .textContent {
    font-family: inherit;
    font-size: 1rem;
    line-height: var(--boxSize);
    color: var(--labelColor);
}

/* Hover */
@media (hover: hover) {
    .checkbox:hover > input:not(:disabled):not(:focus) ~ .checkbox-box .checkmark {
        border-color: var(--borderColorHover);
    }
}

/* Focus */
.checkbox > input:focus-visible ~ .checkbox-box .checkmark {
    border-color: var(--primaryAccentColor);
    box-shadow:
        0 0 0 0.2rem color-mix(in srgb, var(--primaryAccentColor) 60%, transparent);
}

/* Checked */
.checkbox > input:checked ~ .checkbox-box .checkmark {
    background-color: var(--primaryAccentColor);
    border-color: var(--primaryAccentColor);
}

.checkbox > input:checked ~ .checkbox-box .checkmark::after {
    transform: translate(-50%, -55%) rotate(45deg) scale(1);
}

/* Error — class on the checkbox itself or on any wrapper around it */
.checkbox.error > input ~ .checkbox-box .checkmark,
.checkbox > input[aria-invalid="true"] ~ .checkbox-box .checkmark,
.error .checkbox > input ~ .checkbox-box .checkmark {
    border-color: var(--errorColor);
    background-color: color-mix(in srgb, var(--errorColor) 5%, #fff);
}

.checkbox.error .textContent,
.checkbox.error .textContent a,
.checkbox.error .textContent a:link,
.checkbox.error .textContent a:visited,
.checkbox.error .textContent a:hover,
.checkbox.error .textContent a:active,
.checkbox > input[aria-invalid="true"] ~ .checkbox-box .textContent,
.error .checkbox .textContent {
    color: var(--errorColor);
}

.checkbox.error > input:focus-visible ~ .checkbox-box .checkmark,
.checkbox > input[aria-invalid="true"]:focus-visible ~ .checkbox-box .checkmark,
.error .checkbox > input:focus-visible ~ .checkbox-box .checkmark {
    border-color: var(--errorColor);
    box-shadow:
        0 0 0 0.2rem color-mix(in srgb, var(--errorColor) 60%, transparent);
}

.checkbox.error > input:checked ~ .checkbox-box .checkmark,
.checkbox > input[aria-invalid="true"]:checked ~ .checkbox-box .checkmark,
.error .checkbox > input:checked ~ .checkbox-box .checkmark {
    background-color: var(--errorColor);
}

/* Disabled */
.checkbox:has(> input:disabled) {
    cursor: not-allowed;
}

.checkbox > input:disabled ~ .checkbox-box .checkmark {
    background-color: var(--color-light-grey, #f6f6f6);
    border-color: var(--borderColor);
}

/* Disabled + checked — grey tick on the grey box so the state stays readable */
.checkbox > input:disabled:checked ~ .checkbox-box .checkmark {
    border-color: var(--borderColor);
}

.checkbox > input:disabled:checked ~ .checkbox-box .checkmark::after {
    border-color: var(--borderColor);
}

.checkbox > input:disabled ~ .checkbox-box .textContent {
    color: var(--labelColor);
}

:root {
    --primaryAccentColor: var(--color-fresh-orange);
    --primaryFontColor: var(--color-dark-grey);

    --color-white: #fff;
    --color-light-grey: #f6f6f6;
    --color-deep-orange: hsl(37, 100%, 45%);
    --color-pinkish: hsl(338, 100%, 36%);
    --color-blue: hsl(198, 100%, 44%);
    --color-violet: hsl(276, 100%, 59%);
    --color-fresh-orange: hsl(38, 100%, 50%);
    --color-dark-grey: #373a3d;
    --color-highlight-grey: #7a7d81;
}
.customGallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 500px) {
    .customGallery {
        gap: 0.5rem;
    }
}

@media (max-width: 375px) {
    .customGallery {
        grid-template-columns: 1fr;
    }
}

:root {
    --animationDuration: 0.2s;
}

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
  background-color: #fff;
}

/* Always reserve space for the page scrollbar so toggling overflow doesn't shift the layout */
html {
  scrollbar-gutter: stable;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


:root{
  --color-dark-grey: #272727;
}



.imgBlock img {
    display: block;
    width: 100%;
    height: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



iframe{
  border: none;
  /* outline: 1px solid #ff2c2c; */
  display: block;
}




.blured{
  backdrop-filter: blur(10px);
}


.toBeVisible {
  opacity: 0;
}
section.filter-section {

}

#filter-root {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* center instead of baseline-align, so the rotating icon can't shift the text */
.filter-title {
    display: flex;
    align-items: center;
    margin-left: -0.3rem;
}

/* reserve width of the alternate text so swapping it doesn't shift the toggle */
.filter-title [data-alt] {
    display: inline-flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
}

.filter-title [data-alt]::after {
    content: attr(data-alt);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}

.filter-toggle {
    --toggleSize: 2.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--toggleSize);
    height: var(--toggleSize);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    color: var(--primaryFontColor);
    cursor: pointer;
    transition: background-color var(--animationDuration) ease, color var(--animationDuration) ease;
}

.filter-toggle:hover {
    color: var(--primaryAccentColor);
}

.filter-toggle:focus-visible {
    outline: 2px solid var(--primaryAccentColor);
    outline-offset: -6px;
}

/* chevron pointing down (closed) */
.filter-toggle-icon {
    display: block;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: -0.3rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.5s ease-in-out, margin-top 0.5s ease-in-out;
}

/* chevron pointing up (open) */
#filter-root.is-open .filter-toggle-icon {
    margin-top: 0.3rem;
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .filter-toggle-icon {
        transition: none;
    }
}





.filter-main {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

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

    .filter-main {
        flex-direction: row;
    }

    .filter-main label.checkbox {
        margin: 0;
        margin-right: 0.8rem;
    }

}


.filteredItemsContent {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-top: 0.5rem;
}

.filteredItem {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem 0.15rem 0.5rem;
    border: 1px solid #d1d1d1;
    border-radius: 999px;
    background-color: var(--color-white);
    color: var(--primaryFontColor);
    font: inherit;
    cursor: pointer;
    font-size: 0.8rem; /* Adjust the font size as needed */
    transition: border-color var(--animationDuration) ease, color var(--animationDuration) ease;
}

.filteredItem:hover {
    border-color: var(--primaryAccentColor);
    color: var(--primaryAccentColor);
}

.filteredItem:focus-visible {
    outline: 2px solid var(--primaryAccentColor);
    outline-offset: 2px;
}

/* cross drawn from two rotated bars */
.filteredItem-cross {
    position: relative;
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
}

.filteredItem-cross::before,
.filteredItem-cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor; /* follows the pill color, incl. hover */
    border-radius: 1px;
}

.filteredItem-cross::before {
    transform: translateY(-50%) rotate(45deg);
}

.filteredItem-cross::after {
    transform: translateY(-50%) rotate(-45deg);
}

footer .legalText {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #999999;
    text-align: center;
    margin-top: 20px;
}



@media (max-width: 900px) {
    footer .content-row {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        text-align: center;
    }
}
hr {
    border: 0;
    height: 0.05rem;

    background: repeating-linear-gradient(
        to right,
        #999 0,
        #999 0.05rem,
        transparent 0.05rem,
        transparent 0.3rem
    );
}
.calendar.icon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;

    background-color: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 -960 960 960%27%3E%3Cpath d=%27M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z%27/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 -960 960 960%27%3E%3Cpath d=%27M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z%27/%3E%3C/svg%3E") center / contain no-repeat;
}
input, textarea, input ~ label, textarea ~ label{
    --primaryAccentColor: #23c464;
    --borderColor: #d1d1d1;
    --borderColorHover: hsl(from var(--borderColor) h s calc(l - 12));
    --labelColor: var(--primaryFontColor);
    --errorColor: #ff4d4f;
}

input, textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--primaryFontColor, #373a3d);
    background-color: #fff;
    border: 1px solid var(--borderColor);
    padding: 0.5rem;
    border-radius: 0.5rem;
    outline: none;

    transition:
        border-color var(--animationDuration) ease-out,
        box-shadow var(--animationDuration) ease-out,
        background-color var(--animationDuration) ease-out;
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--labelColor);
    opacity: 1;
}

/* Labels — colour stays constant across all states */
input ~ label,
textarea ~ label {
    font-size: 1rem;
    color: var(--labelColor);
    display: block;
    margin-bottom: 0.25rem;
}

/* Hover */
@media (hover: hover) {
    input:hover:not(:disabled, :focus),
    textarea:hover:not(:disabled, :focus) {
        border-color: var(--borderColorHover);
    }
}

/* Focus */
input:focus,
textarea:focus,
input:focus-visible,
textarea:focus-visible {
    border-color: var(--primaryAccentColor);
    box-shadow:
        0 0 0 0.2rem color-mix(in srgb, var(--primaryAccentColor) 60%, transparent);
}

/* Error — class on the field itself or on any wrapper around it */
input.error,
textarea.error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
.error input,
.error textarea {
    border-color: var(--errorColor);
    background-color: color-mix(in srgb, var(--errorColor) 5%, #fff);
}

/* error class on the field itself … */
input.error ~ label,
textarea.error ~ label,
input[aria-invalid="true"] ~ label,
textarea[aria-invalid="true"] ~ label,
/* … or on any wrapper around it */
.error input ~ label,
.error textarea ~ label {
    color: var(--errorColor);
}

input.error:focus,
textarea.error:focus,
input.error:focus-visible,
textarea.error:focus-visible,
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible,
.error input:focus,
.error textarea:focus,
.error input:focus-visible,
.error textarea:focus-visible {
    border-color: var(--errorColor);
    box-shadow:
        0 0 0 0.2rem color-mix(in srgb, var(--errorColor) 60%, transparent);
}

/* Disabled */
input:disabled,
textarea:disabled {
    cursor: not-allowed;
    background-color: var(--color-light-grey, #f6f6f6);
    border-color: var(--borderColor);
    color: var(--labelColor);
}


.formPart > div{
    display: flex;
    flex-direction: column-reverse;
}

.formPart > div > input,
.formPart > div > textarea {
    width: 100%;
}


@media (min-width: 1200px) {
    .formPart > div{
        flex-direction: row-reverse;
    }

    .formPart > div > input,
    .formPart > div > textarea {
        flex: 1;
        width: auto;
    }

    .formPart > div > input{
        margin-bottom: 0.5rem;
    }

    .formPart > div > input ~ label,
    .formPart > div > textarea ~ label {
        padding-top:0.4rem;
    }

    /* fixed label column so every field lines up to the same width */
    .formPart > div > label {
        flex: 0 0 12rem;
    }
}
:root{
    --contentPadding: 1rem;
    --contentSpaceMaxWidth: calc(var(--contentPadding) + 1800px);
}

@media (min-width: 500px) {
    :root{
        --contentPadding: 1.5rem;
    }
}

@media (min-width: 800px) {
    :root{
        --contentPadding: 2rem;
    }
}

@media (min-width: 1440px) {
    :root{
        --contentPadding: 4rem;
    }
}


.content-space {
    width: 100%;
    max-width: var(--contentSpaceMaxWidth);
    padding-left: var(--contentPadding);
    padding-right: var(--contentPadding);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

.alignItemsStart  {
    align-items: flex-start;
}

.content-space:not(.noGap) {
    gap: 1.5rem;
}

section, header, footer, main, article, aside, nav {
    z-index: 1;
    position: relative;
}

header{
    overflow: hidden;
}

main{
    background-color: #fff;
}

main section{
    margin: auto;
}



section{
    z-index: auto;
}





section .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    justify-content: flex-start;
}




.content-row{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
}

.content-col{
    flex: 1;
}

@media (min-width: 900px) {
    .content-row{
        flex-direction: row;
        gap: 1.5rem;
    }

    .content-col{
    flex: 0.5;
}
}


.content-row.layout-1-2 >.content-col{
    flex: 2 1 0;

}

.content-row.layout-1-2 >.content-col:first-child{
    flex: 1 1 0;
}




.content-row.layout-1-3 >.content-col{
    flex: 3 1 0;

}

.content-row.layout-1-3 >.content-col:first-child{
    flex: 1 1 0;
}








.contentCard{
    padding: .5rem;
    border-radius: 1rem;
}

@media (min-width: 500px) {
    .contentCard{
        padding: 1rem;
    }
}

.contentCard.box{
    padding: 1rem;
}

@media (min-width: 768px) {
    .contentCard.box{
        padding: 1.5rem;
    }
}



.contentCard .picture img{
    border-radius: 0.7rem;
}

.content-col.info{
    padding: .5rem;
    padding-top: 0;
}

@media (min-width: 768px) {
    .content-col.info{
        padding-top: 0.5rem;
        padding-left: 0;
    }   
}








.iconHeadline {
    gap: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
}

.iconHeadline > img {
    height: 3rem;
    width: auto;
    display: block;
}



@media screen and (min-width: 500px) {
    .iconHeadline {
        gap: 0;
        flex-direction: column-reverse;
    }

    .iconHeadline > img {
        margin-left: -0.2rem;
    }   
}


@media screen and (min-width: 768px) {
    .iconHeadline {
        flex-direction: row-reverse;
        gap: 0.5rem;
    }
}

@media screen and (min-width: 1024px) {
    .iconHeadline > img {
        height: 3.5rem;
        margin-left: -0.3rem;
        margin-top: .1rem;
    } 
}



.contentCard.flexBox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.flexBoxButtonContainer{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
}








@media (min-width: 900px) {
    .hideOnDesktop {
        display: none !important;
    }
}







.highlight{
    outline: 2px solid red;
    outline-offset: 2px;
}










main.autoPadding{
    padding-top: 50px
}

@media screen and (min-width: 375px) {
    main.autoPadding{
        padding-top: 60px;
    }
}

@media screen and (min-width: 425px) {
    main.autoPadding{
        padding-top: 70px;
    }
}

@media screen and (min-width: 1100px) {
    main.autoPadding{
        padding-top: 140px;
    }
}







.hideLastHr hr:last-of-type {
    display: none;
}






main > section{
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
}


img {
  max-width: 100%;
  overflow: hidden;   /* clips alt text to the img box */
}
section.lead-space {
    --leadSpaceHeight: 100svh;
    --fontColor: #fff;
    height: var(--leadSpaceHeight);
    position: relative;
    color: var(--fontColor);
    z-index: 0;
}

div.lead-space__body {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: var(--leadSpaceHeight);
    background-image: url(../assets/images/ZuzanaHQ.0771d8d8.jpg);
    background-size: cover;
    background-position: 65% 30%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: center;
    justify-content: flex-end;
}


div.lead-space__overlay {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
}


div.lead-space__body h1{
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 0.8;
}

div.lead-space__body h3{
    font-size: 1.1rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    margin-top: 0.5rem;
    max-width: 98%;
}

@media (min-width: 375px) {
    div.lead-space__body h1{
        font-size: 3.2rem;
        line-height: 0.9;
    }

    div.lead-space__body h3{
        font-size: 1.15rem;

    }
}


@media (min-width: 425px) {
    div.lead-space__body h1{
        font-size: 3.5rem;
        line-height: 0.9;
    }

    div.lead-space__body h3{
        font-size: 1.3rem;
        line-height: 1.3;
        margin-top: 1rem;
        max-width: 95%;
    }
}

@media (min-width: 500px) {
    div.lead-space__body h1{
        font-size: 3.9rem;
        font-weight: 300;
        line-height: 0.95;
    }

    div.lead-space__body h3{
        font-size: 1.35rem;
        line-height: 1.3;
        margin-top: 0.3rem;
        max-width: 85%;
    }
}




div.lead-space__body h3 b{
    font-weight: 600;
}


div.lead-space__content{
    position: relative;
    margin-bottom: min(15svh, 23vw);
}


@media (min-width: 425px) {
    div.lead-space__body {
        background-position: 65% 30%;
    }

    div.lead-space__overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
    }

    div.lead-space__content{
        position: relative;
        margin-bottom: max(10svh, 15vw);
    }
}


@media (min-width: 500px) {
    div.lead-space__body {
        background-position: 62% 30%;
        /* justify-content: center; */
    }

    div.lead-space__overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
    }

    div.lead-space__content{
        position: relative;
        margin-bottom: max(20svh, 20vw);
    }
}



@media (min-width: 768px) {
    div.lead-space__body {
        background-position: 64% 30%;
    }

    div.lead-space__content{
        position: relative;
        margin-bottom: max(10svh, 20vw);
    }

    div.lead-space__body h1{
        font-size: 4.7rem;
        max-width: 70%;
    }

    div.lead-space__body h3{
        font-size: 1.3rem;
    }
}


@media (min-width: 1024px) {
    div.lead-space__body {
        background-position: 60% 30%;
        justify-content: center;
    }

    div.lead-space__overlay {
        background: none;
    }

    div.lead-space__content{
        position: relative;
        margin-bottom: 0;
        margin-top: max(10svh, 10vw);
        /* margin-top: max(20svh, 20vw); */
    }

    div.lead-space__body h1{
        max-width: 90%;
        font-size: 4.7rem;
    }

    div.lead-space__body h3{
        max-width: 90%;
    }

    div.lead-space__overlay {
        background: none;
    }
}



@media (min-width: 1200px) {

    /* div.lead-space__body {
        justify-content: center;
    } */

    div.lead-space__content {
        margin-top: 15%;
    }

    div.lead-space__body h1{
        max-width: 70%;
        font-size: 6rem;
    }

     div.lead-space__body h3{
        max-width: 100%;
        font-size: 1.5rem;
        max-width: 70%;
    }
    
}



@media (min-width: 1800px) {
    div.lead-space__body h1{
        max-width: 70%;
    }

    div.lead-space__body h3{
        max-width: 70%;
    }
}




div.lead-space__body,
div.lead-space__content {
    will-change: transform;
}
.articlePage div.lead-space__body {
    background-position: 63% 30%;
}

.articlePage section.lead-space {
    --leadSpaceHeight: 60svh;
}

.articlePage div.lead-space__content {
    margin-bottom: 2rem;
}

/* @media (min-width: 425px) {
    .articlePage div.lead-space__content{
        margin-bottom: max(15svh, 15vw);
    }
} */

@media (min-width: 425px) {
    .articlePage div.lead-space__body h1 {
        font-size: 3rem;
    }

    .articlePage div.lead-space__body h3 {
        font-size: 1.1rem;
    }
}


@media (min-width: 500px) {
    .articlePage div.lead-space__content{
        margin-bottom: max(10svh, 10vw);
    }
}

@media (min-width: 500px) {
    .articlePage  div.lead-space__body h1{
        font-size: 3.9rem;
        font-weight: 300;
        line-height: 0.95;
    }

    .articlePage div.lead-space__body h3{
        font-size: 1.35rem;
        line-height: 1.3;
        margin-top: 1rem;
    }
}



@media (min-width: 768px) {
    .articlePage div.lead-space__content{
        margin-bottom: max(12svh, 12vw);
    }

    .articlePage div.lead-space__body h1{
        font-size: 4.7rem;
        max-width: 80%;
    }

    .articlePage div.lead-space__body h3{
        font-size: 1.3rem;
        max-width: 80%;
    }
}


@media (min-width: 1024px) {
    .articlePage div.lead-space__content{
        margin-bottom: max(15svh, 5vw);
    }

    .articlePage div.lead-space__body {
        justify-content: flex-end;
    }

    .articlePage div.lead-space__body h1{
        font-size: 5.5rem;
        max-width: 75%;
    }

    .articlePage div.lead-space__body h3{
        max-width: 75%;
    }
}



@media (min-width: 1200px) {

    .articlePage div.lead-space__body {
        justify-content: center;
    }

    .articlePage div.lead-space__content {
        margin-bottom: 0;
        margin-top: max(15svh, 5vw);
    }

    .articlePage div.lead-space__body h1{
        font-size: 6rem;
        max-width: 65%;
    }

    .articlePage div.lead-space__body h3{
        font-size: 1.5rem;
        max-width: 65%;
    }
    
}
.articlesPage div.lead-space__body {
    background-position: 63% 30%;
}

.articlesPage section.lead-space {
    --leadSpaceHeight: 70svh;
}

.articlesPage div.lead-space__content {
    margin-bottom: 2rem;
}

/* @media (min-width: 425px) {
    .articlesPage div.lead-space__content{
        margin-bottom: max(15svh, 15vw);
    }
} */

@media (min-width: 425px) {
    .articlesPage div.lead-space__body h1 {
        font-size: 3rem;
    }

    .articlesPage div.lead-space__body h3 {
        font-size: 1.1rem;
    }
}


@media (min-width: 500px) {
    .articlesPage div.lead-space__content{
        margin-bottom: max(10svh, 10vw);
    }
}

@media (min-width: 500px) {
    .articlesPage  div.lead-space__body h1{
        font-size: 3.9rem;
        font-weight: 300;
        line-height: 0.95;
    }

    .articlesPage div.lead-space__body h3{
        font-size: 1.35rem;
        line-height: 1.3;
        margin-top: 1rem;
    }
}



@media (min-width: 768px) {
    .articlesPage div.lead-space__content{
        margin-bottom: max(12svh, 12vw);
    }

    .articlesPage div.lead-space__body h1{
        font-size: 4.7rem;
        max-width: 80%;
    }

    .articlesPage div.lead-space__body h3{
        font-size: 1.3rem;
        max-width: 80%;
    }
}


@media (min-width: 1024px) {
    .articlesPage div.lead-space__content{
        margin-bottom: max(15svh, 5vw);
    }

    .articlesPage div.lead-space__body {
        justify-content: flex-end;
    }

    .articlesPage div.lead-space__body h1{
        font-size: 5.5rem;
        max-width: 75%;
    }

    .articlesPage div.lead-space__body h3{
        max-width: 75%;
    }
}



@media (min-width: 1200px) {

    .articlesPage div.lead-space__body {
        justify-content: center;
    }

    .articlesPage div.lead-space__content {
        margin-bottom: 0;
        margin-top: max(15svh, 5vw);
    }

    .articlesPage div.lead-space__body h1{
        font-size: 6rem;
        max-width: 65%;
    }

    .articlesPage div.lead-space__body h3{
        font-size: 1.5rem;
        max-width: 65%;
    }
    
}
a, a:link, a:visited{
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: var(--primaryFontColor);
}

.whiteFont a, .whiteFont a:link, .whiteFont a:visited{
    color: var(--color-white);
}

a, a:link, a:visited{
    text-decoration: none;
    position: relative;
}


a:not(.button):focus-visible{
    outline: none;
    border: none;
}

a:not(.button):focus-visible::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    outline: 1px solid var(--primaryFontColor);
    outline-offset: 0.2rem;
    border-radius: 0.1rem;
}

.whiteFont a:not(.button):focus-visible::before{
    outline: 0.1rem solid var(--color-white);
}


@media (hover: hover) and (pointer: fine) {
    a:not(.button)::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease-in-out;
    }

    a:not(.noHover):hover::after{
        transform: scaleX(1);
        transform-origin: left;
    }
}




/* Default (incl. touch devices): a real underline the browser snaps to
   device pixels, so it stays crisp on high-DPI phone screens. The 1px
   absolutely-positioned pseudo-element below lands on fractional
   sub-pixel offsets on mobile and renders as invisible/near-invisible. */
a.bodyLink{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    /* Desktop: swap the static underline for the animated pseudo-element. */
    a.bodyLink{
        text-decoration: none;
    }

    a.bodyLink::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: currentColor;
        transform: scaleX(1);
        transform-origin: left;
        transition: transform 0.3s ease-in-out;
    }

    a.bodyLink:not(.noHover):hover::after{
        transform: scaleX(0);
        transform-origin: right;
    }
}

.mapPin {
    animation: pinPulse 1.8s ease-in-out infinite;
    transform-origin: 50% 100%;
    filter: invert(1);
    
}

@keyframes pinPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.04);
    }
}

section .map{
    width: 100%;
    height: 60vh;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    section .map{
        height: 40vh;
    }
}


.mrg--top-0{
    margin-top: 0 !important;
}
.mrg--top-1{
    margin-top: calc(1rem * 0.1);
}
.mrg--top-2{
    margin-top: calc(1rem * 0.2);
}
.mrg--top-3{
    margin-top: calc(1rem * 0.3);
}
.mrg--top-4{
    margin-top: calc(1rem * 0.4);
}
.mrg--top-5{
    margin-top: calc(1rem * 0.5);
}
.mrg--top-6{
    margin-top: calc(1rem * 0.6);
}
.mrg--top-7{
    margin-top: calc(1rem * 0.7);
}
.mrg--top-8{
    margin-top: calc(1rem * 0.8);
}
.mrg--top-9{
    margin-top: calc(1rem * 0.9);
}
.mrg--top-10{
    margin-top: calc(1rem * 1);
}
.mrg--top-11{
    margin-top: calc(1rem * 1.1);
}
.mrg--top-12{
    margin-top: calc(1rem * 1.2);
}
.mrg--top-13{
    margin-top: calc(1rem * 1.3);
}
.mrg--top-14{
    margin-top: calc(1rem * 1.4);
}
.mrg--top-15{
    margin-top: calc(1rem * 1.5);
}
.mrg--top-16{
    margin-top: calc(1rem * 1.6);
}
.mrg--top-17{
    margin-top: calc(1rem * 1.7);
}
.mrg--top-18{
    margin-top: calc(1rem * 1.8);
}
.mrg--top-19{
    margin-top: calc(1rem * 1.9);
}
.mrg--top-20{
    margin-top: calc(1rem * 2);
}
.mrg--top-21{
    margin-top: calc(1rem * 2.1);
}
.mrg--top-22{
    margin-top: calc(1rem * 2.2);
}
.mrg--top-23{
    margin-top: calc(1rem * 2.3);
}
.mrg--top-24{
    margin-top: calc(1rem * 2.4);
}
.mrg--top-25{
    margin-top: calc(1rem * 2.5);
}
.mrg--top-26{
    margin-top: calc(1rem * 2.6);
}
.mrg--top-27{
    margin-top: calc(1rem * 2.7);
}
.mrg--top-28{
    margin-top: calc(1rem * 2.8);
}
.mrg--top-29{
    margin-top: calc(1rem * 2.9);
}
.mrg--top-30{
    margin-top: calc(1rem * 3);
}










.mrg--btm-1{
    margin-bottom: calc(1rem * 0.1);
}
.mrg--btm-2{
    margin-bottom: calc(1rem * 0.2);
}
.mrg--btm-3{
    margin-bottom: calc(1rem * 0.3);
}
.mrg--btm-4{
    margin-bottom: calc(1rem * 0.4);
}
.mrg--btm-5{
    margin-bottom: calc(1rem * 0.5);
}
.mrg--btm-6{
    margin-bottom: calc(1rem * 0.6);
}
.mrg--btm-7{
    margin-bottom: calc(1rem * 0.7);
}
.mrg--btm-8{
    margin-bottom: calc(1rem * 0.8);
}
.mrg--btm-9{
    margin-bottom: calc(1rem * 0.9);
}
.mrg--btm-10{
    margin-bottom: calc(1rem * 1);
}
.mrg--btm-11{
    margin-bottom: calc(1rem * 1.1);
}
.mrg--btm-12{
    margin-bottom: calc(1rem * 1.2);
}
.mrg--btm-13{
    margin-bottom: calc(1rem * 1.3);
}
.mrg--btm-14{
    margin-bottom: calc(1rem * 1.4);
}
.mrg--btm-15{
    margin-bottom: calc(1rem * 1.5);
}
.mrg--btm-16{
    margin-bottom: calc(1rem * 1.6);
}
.mrg--btm-17{
    margin-bottom: calc(1rem * 1.7);
}
.mrg--btm-18{
    margin-bottom: calc(1rem * 1.8);
}
.mrg--btm-19{
    margin-bottom: calc(1rem * 1.9);
}
.mrg--btm-20{
    margin-bottom: calc(1rem * 2);
}
.mrg--btm-21{
    margin-bottom: calc(1rem * 2.1);
}
.mrg--btm-22{
    margin-bottom: calc(1rem * 2.2);
}
.mrg--btm-23{
    margin-bottom: calc(1rem * 2.3);
}
.mrg--btm-24{
    margin-bottom: calc(1rem * 2.4);
}
.mrg--btm-25{
    margin-bottom: calc(1rem * 2.5);
}
.mrg--btm-26{
    margin-bottom: calc(1rem * 2.6);
}
.mrg--btm-27{
    margin-bottom: calc(1rem * 2.7);
}
.mrg--btm-28{
    margin-bottom: calc(1rem * 2.8);
}
.mrg--btm-29{
    margin-bottom: calc(1rem * 2.9);
}
.mrg--btm-30{
    margin-bottom: calc(1rem * 3);
}
div.menuCnt{

    --sizeMultiplier: 1;
    --transition-time: 0.3s;
    
    width: 100%;
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    max-height: calc(100dvh);    
    padding-left:0;
    padding-right:0;
    border-radius: 0;
}

div.menuCnt .menuCnt__body{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    max-height: calc(100dvh);
    position: relative;
}

.menuCnt__content{
    max-height: calc(100dvh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: stretch;
}

.menuNavCnt.row{
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}


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

    div.menuCnt.content-space{
        top: 1rem;
    }

    div.menuCnt__content{
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    div.menuCnt__body{
        margin-left: 1rem;
        margin-right: 1rem;
        overflow: hidden;
        border-radius: 1.5rem;
    }
}






.menuCnt__header{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: stretch;
}

.menuCnt__body{
    border-radius: 0;
    /* calc(1rem * var(--sizeMultiplier)); */
}



.menuCnt__right{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}




.menuCnt__menuBtn{
    height: 100%;
    
}

/* @media only screen and (min-width: 1024px) {
    .menuCnt__menuBtn{
        display: none;
    }
} */



.menuCnt .menuBtn{
    width: 35px;
    height:100%;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    margin-right: .4rem;
    border: none;
    outline: none;
    
}

@media only screen and (min-width: 428px) {
    .menuCnt .menuBtn{
        width: 2rem;
    }
}

@media only screen and (min-width: 550px) {
    .menuCnt .menuBtn{
        width: 2.5rem;
        margin-right: 1rem;
    }
}

@media (hover: hover) {
    .menuCnt .menuBtn:hover > div{
        top:calc(32% - 1px);
    }
    .menuCnt .menuBtn:hover > div:first-child{
        top:calc(67% - 1px);
    }
}




.menuCnt .menuBtn > div{
    position: absolute;
    background-color: var(--color-white);
    width: 100%;
    height:1pt;
    top:calc(42% - 1px);
    transition: top var(--transition-time) ease-in-out, transform var(--transition-time) ease-in-out
}

.menuCnt .menuBtn > div:first-child{
    top:calc(57% - 1px);
}





.instaLogo{
    display: none;
    position: relative;
    /* background-color: var(--color-white);
    border-radius: 1rem; */
}

@media only screen and (min-width: 375px) {
    .instaLogo{
        display: block;
    }
}



.instaLogo img{
    width: 1.4rem;
    height: 1.4rem;
    display: block;
    margin: 0.2rem 0.4rem;
}


@media only screen and (min-width: 425px) {
    .instaLogo img{
        width: 1.8rem;
        height: 1.8rem;
        display: block;
        margin: 0.2rem 0.5rem;
    }
}

@media only screen and (min-width: 550px) {
    .instaLogo img{
        width: 2.2rem;
        height: 2.2rem;
        display: block;
        margin: 0.2rem 1.2rem;
    }
}


div.menuCnt a {
    color: var(--color-white);
    font-size: 1.1rem;
    line-height: 1.2rem;
}

div.menuCnt a:link, div.menuCnt a:visited, div.menuCnt a:hover {
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1.2rem;
}








div.menuCnt.open .menuBtn > div{
    top:calc(50% - 1px) !important;
    transform: rotate(225deg);
    transition: top var(--transition-time) ease-in-out, transform var(--transition-time) ease-in-out
}

div.menuCnt.open .menuBtn > div:first-child{
    top:calc(50% - 1px) !important;
    transform: rotate(-225deg);
    transition: top var(--transition-time) ease-in-out, transform var(--transition-time) ease-in-out
}





.noMenuItems .menuCnt__menuBtn {
    display: none;
}




.menuNavCnt.row > div{
    flex: 1;
}


.menuNavCnt.row div.bannerPrnt{
    display: none;
    flex: 1 1 0;
    min-width: 0;
}


div.menuCnt .bannerContainer{
    display: none;
}

.menuNavCnt.row div.banner{
    margin-bottom: 2rem;
    margin-top: 1rem;
    background-color: #26262691;
    border-radius: 1rem;
    padding: .8rem;
    color: var(--color-white);
    flex: 1;
}

.menuNavCnt.row div.banner h3{
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.menuNavCnt.row div.banner p{
    font-size: 1rem;
    flex: 1;
}

@media only screen and (min-width: 600px) {
    .menuNavCnt.row div.bannerPrnt{
        display: flex;
        padding-right: 1rem;
    }

    .menuNavCnt.row div.bannerPrnt:last-child{
        display: none;
    }

    div.menuCnt .bannerContainer{
        display: flex;
    }
}



@media only screen and (min-width: 768px) {
    div.menuCnt .bannerContainer{
        flex: 1.5;
    }
}



@media only screen and (min-width: 1024px) {
    .menuNavCnt.row div.bannerPrnt{
        padding-right: 0rem;
    }

    .menuNavCnt.row div.bannerPrnt:last-child{
        display: flex;
    }

    .menuNavCnt.row div.banner{
        padding: 1.7rem;
    }

    div.menuCnt .bannerContainer{
        flex: 2;
    }
}



.menuNavCnt.row > div:last-child div.banner{
    margin-right: 1rem;
}



.menuNavCnt.row > div:last-child div.banner {
    display: flex;
    margin-right: 1rem;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
}
div.menuCnt .menuCnt__DesktopMenu{
    flex: 1;
    display: none;
}

@media only screen and (min-width: 1024px) {
    div.menuCnt .menuCnt__DesktopMenu{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    div.menuCnt .menuCnt__DesktopMenu li:not(:first-child){
        display: none;
    }
}

@media only screen and (min-width: 1100px) {
    div.menuCnt .menuCnt__DesktopMenu li:nth-child(2){
        display: block;
    }
}

@media only screen and (min-width: 1300px) {
    div.menuCnt .menuCnt__DesktopMenu li:nth-child(3){
        display: block;
    }
}

div.menuCnt .menuCnt__DesktopMenu ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

div.menuCnt .menuCnt__DesktopMenu li{
    display: inline-block;
}




div.menuCnt .menuCnt__DesktopMenu ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

div.menuCnt .menuCnt__DesktopMenu li{
    display: inline-block;
}
div.menuCnt{
    --permanentMenuHeight: 50px;
}

div.menuCnt .logo{
    width: 150px;
    height: 50px;
    margin-left: 0;

    background-image: url(../assets/images/logoMojaPravnickaLowProfile.069287ad.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    filter: brightness(0) invert(1);
}

@media only screen and (min-width: 375px) {
    div.menuCnt .logo{
        width: 170px;
        height: 60px;
    }

    div.menuCnt{
        --permanentMenuHeight: 60px;
    }
}

@media only screen and (min-width: 425px) {
    div.menuCnt .logo{
        width: 180px;
        height: 70px;
        margin-left: 0.25rem;
    }

    div.menuCnt{
        --permanentMenuHeight: 70px;
    }
}

@media only screen and (min-width: 500px) {
    div.menuCnt .logo{
        width: 200px;
        height: 80px;
        background-image: url(../assets/images/logoMojaPravnicka.c9e9d7a1.svg);
    }

    div.menuCnt{
        --permanentMenuHeight: 80px;
    }
}

@media only screen and (min-width: 1024px) {
    div.menuCnt .logo{
        width: 15rem;
        height: 5.7rem;
    }

    div.menuCnt{
        --permanentMenuHeight: 5.7rem;
    }
}
nav.menuCnt__nav ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

nav.menuCnt__nav ul > li{
    display: block;
}


.menuNavCnt.row nav{
    flex: 1;
    max-height: calc(100dvh - var(--permanentMenuHeight) - 4rem);
    overflow-y: auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
}


nav.menuCnt__nav ul > li:before{
    content: '⋅';
    margin-right: 0.3rem;
    color: var(--color-white);
    
}
.menuCnt__quickInfo{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    margin-right: 0.5rem;
    gap: 0.1rem;
}

@media only screen and (min-width: 375px) {
    .menuCnt__quickInfo{
        gap: 0.1rem;
        margin-right: 0rem;
    }   
}

.menuCnt__quickInfo .accessibleInfoCnt{
    font-size: 0.7rem;
    color: var(--color-white);
    line-height: 0.8rem;
    color: #68ffa4;
    margin-left: calc(0.2rem + 4px);
}


.menuCnt__quickInfo .telMenu{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}

.menuCnt__quickInfo .telMenu span{
    font-size: 0.9rem;
    line-height: 0.9rem;
}

.menuCnt__quickInfo a.telMenu span{
    line-height: 0.9rem;
}

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

    .menuCnt__quickInfo .accessibleInfoCnt{
        font-size: 0.8rem;
        color: var(--color-white);
        line-height: 0.9rem;
        color: #68ffa4;
        margin-left: calc(0.2rem + 4px);
    }


    .menuCnt__quickInfo .telMenu{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
    }

    .menuCnt__quickInfo .telMenu span{
        font-size: 0.9rem;
        line-height: 0.9rem;
    }

    .menuCnt__quickInfo a.telMenu span{
        line-height: 0.9rem;
    }
    
}



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

    .menuCnt__quickInfo .accessibleInfoCnt{
        font-size: 0.9rem;
        color: var(--color-white);
        line-height: 0.95rem;
        color: #68ffa4;
        margin-left: calc(0.6rem + 4px);
    }


    .menuCnt__quickInfo .telMenu{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
    }

    .menuCnt__quickInfo .telMenu span{
        font-size: 1rem;
        line-height: 1rem;
    }

    .menuCnt__quickInfo a.telMenu span{
        line-height: 1rem;
    }
    
}





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

    .menuCnt__quickInfo .accessibleInfoCnt{
        font-size: 0.9rem;
        color: var(--color-white);
        line-height: 0.95rem;
        color: #68ffa4;
        margin-left: calc(0.6rem + 4px);
    }


    .menuCnt__quickInfo .telMenu{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
    }

    .menuCnt__quickInfo .telMenu span{
        font-size: 1rem;
        line-height: 1rem;
    }

    .menuCnt__quickInfo a.telMenu span{
        line-height: 1rem;
    }
    
}


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

    .menuCnt__quickInfo .accessibleInfoCnt{
        font-size: 1em;
        color: var(--color-white);
        line-height: 1.2rem;
        color: #68ffa4;
        margin-left: calc(0.6rem + 4px);
    }


    .menuCnt__quickInfo .telMenu{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
    }

    .menuCnt__quickInfo .telMenu span{
        font-size: 1.1rem;
        line-height: 1.1rem;
    }

    .menuCnt__quickInfo a.telMenu span{
        line-height: 1.2rem;
    }
    
}



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

    .menuCnt__quickInfo .accessibleInfoCnt{
        font-size: 1rem;
        color: var(--color-white);
        line-height: 1.2rem;
        color: #68ffa4;
        margin-left: calc(0.6rem + 4px);
    }


    .menuCnt__quickInfo .telMenu{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
    }

    .menuCnt__quickInfo .telMenu span{
        font-size: 1.1rem;
        line-height: 1.1rem;
    }

    .menuCnt__quickInfo a.telMenu span{
        line-height: 1.2rem;
    }
    
}






.menuCnt__quickInfo a.telMenu span.dot{
    display: block;
    left: 0;
    background: #68ffa4;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 
    0 0 28px 10px #3cd581, 
    0 0 8px 4px #68ffa4,
    0 0 2px 1px #9be6b9,
    -1px -1px 1px 1px #ffffff,
    -1px 1px 1px 1px #ffffff;
    /* line-height: 1rem; */
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%); */
    /* margin-left: -10px; */

    

    transition: background 0.4s, box-shadow 0.5s;
}

.menuCnt__quickInfo a.telMenu span.dot.off{
    background: #5b5e5c;
    box-shadow: 
    0 0 0px 0px #1c653d, 
    0 0 0px 0px #368556,
    0 0 0px 0px #476955,
    0px 0px 0px 0px #929292,
    0px 0px 0px 0px #b1b1b1;
    transition: background 0.6s, box-shadow 0.5s;
}

.menuCnt__quickInfo a.telMenu span.dot.inactive{
    background: #c90025;
    box-shadow: 
    0 0 28px 10px #ac0423, 
    0 0 8px 4px #6c0336,
    0 0 2px 1px #6d1315;
}


@media only screen and (min-width: 425px) {
    .menuCnt__quickInfo a.telMenu span.dot{
        width: 4px;
        height: 4px;
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 1px;
        /* margin-left: -20px; */
    }
}
.pdg--top-1{
    padding-top: calc(1rem * 0.1);
}
.pdg--top-2{
    padding-top: calc(1rem * 0.2);
}
.pdg--top-3{
    padding-top: calc(1rem * 0.3);
}
.pdg--top-4{
    padding-top: calc(1rem * 0.4);
}
.pdg--top-5{
    padding-top: calc(1rem * 0.5);
}
.pdg--top-6{
    padding-top: calc(1rem * 0.6);
}
.pdg--top-7{
    padding-top: calc(1rem * 0.7);
}
.pdg--top-8{
    padding-top: calc(1rem * 0.8);
}
.pdg--top-9{
    padding-top: calc(1rem * 0.9);
}
.pdg--top-10{
    padding-top: calc(1rem * 1);
}
.pdg--top-11{
    padding-top: calc(1rem * 1.1);
}
.pdg--top-12{
    padding-top: calc(1rem * 1.2);
}
.pdg--top-13{
    padding-top: calc(1rem * 1.3);
}
.pdg--top-14{
    padding-top: calc(1rem * 1.4);
}
.pdg--top-15{
    padding-top: calc(1rem * 1.5);
}
.pdg--top-16{
    padding-top: calc(1rem * 1.6);
}
.pdg--top-17{
    padding-top: calc(1rem * 1.7);
}
.pdg--top-18{
    padding-top: calc(1rem * 1.8);
}
.pdg--top-19{
    padding-top: calc(1rem * 1.9);
}
.pdg--top-20{
    padding-top: calc(1rem * 2);
}
.pdg--top-21{
    padding-top: calc(1rem * 2.1);
}
.pdg--top-22{
    padding-top: calc(1rem * 2.2);
}
.pdg--top-23{
    padding-top: calc(1rem * 2.3);
}
.pdg--top-24{
    padding-top: calc(1rem * 2.4);
}
.pdg--top-25{
    padding-top: calc(1rem * 2.5);
}
.pdg--top-26{
    padding-top: calc(1rem * 2.6);
}
.pdg--top-27{
    padding-top: calc(1rem * 2.7);
}
.pdg--top-28{
    padding-top: calc(1rem * 2.8);
}
.pdg--top-29{
    padding-top: calc(1rem * 2.9);
}
.pdg--top-30{
    padding-top: calc(1rem * 3);
}
.pdg--top-31{
    padding-top: calc(1rem * 3.1);
}
.pdg--top-32{
    padding-top: calc(1rem * 3.2);
}
.pdg--top-33{
    padding-top: calc(1rem * 3.3);
}
.pdg--top-34{
    padding-top: calc(1rem * 3.4);
}
.pdg--top-35{
    padding-top: calc(1rem * 3.5);
}
.pdg--top-36{
    padding-top: calc(1rem * 3.6);
}
.pdg--top-37{
    padding-top: calc(1rem * 3.7);
}
.pdg--top-38{
    padding-top: calc(1rem * 3.8);
}
.pdg--top-39{
    padding-top: calc(1rem * 3.9);
}
.pdg--top-40{
    padding-top: calc(1rem * 4);
}
.pdg--top-41{
    padding-top: calc(1rem * 4.1);
}
.pdg--top-42{
    padding-top: calc(1rem * 4.2);
}
.pdg--top-43{
    padding-top: calc(1rem * 4.3);
}
.pdg--top-44{
    padding-top: calc(1rem * 4.4);
}
.pdg--top-45{
    padding-top: calc(1rem * 4.5);
}
.pdg--top-46{
    padding-top: calc(1rem * 4.6);
}
.pdg--top-47{
    padding-top: calc(1rem * 4.7);
}
.pdg--top-48{
    padding-top: calc(1rem * 4.8);
}
.pdg--top-49{
    padding-top: calc(1rem * 4.9);
}
.pdg--top-50{
    padding-top: calc(1rem * 5);
}

.pdg--top-51{
    padding-top: calc(1rem * 5.1);
}
.pdg--top-52{
    padding-top: calc(1rem * 5.2);
}
.pdg--top-53{
    padding-top: calc(1rem * 5.3);
}
.pdg--top-54{
    padding-top: calc(1rem * 5.4);
}
.pdg--top-55{
    padding-top: calc(1rem * 5.5);
}
.pdg--top-56{
    padding-top: calc(1rem * 5.6);
}
.pdg--top-57{
    padding-top: calc(1rem * 5.7);
}
.pdg--top-58{
    padding-top: calc(1rem * 5.8);
}
.pdg--top-59{
    padding-top: calc(1rem * 5.9);
}
.pdg--top-60{
    padding-top: calc(1rem * 6);
}
.pdg--top-61{
    padding-top: calc(1rem * 6.1);
}
.pdg--top-62{
    padding-top: calc(1rem * 6.2);
}
.pdg--top-63{
    padding-top: calc(1rem * 6.3);
}
.pdg--top-64{
    padding-top: calc(1rem * 6.4);
}
.pdg--top-65{
    padding-top: calc(1rem * 6.5);
}
.pdg--top-66{
    padding-top: calc(1rem * 6.6);
}
.pdg--top-67{
    padding-top: calc(1rem * 6.7);
}
.pdg--top-68{
    padding-top: calc(1rem * 6.8);
}
.pdg--top-69{
    padding-top: calc(1rem * 6.9);
}
.pdg--top-70{
    padding-top: calc(1rem * 7);
}
.pdg--top-71{
    padding-top: calc(1rem * 7.1);
}
.pdg--top-72{
    padding-top: calc(1rem * 7.2);
}
.pdg--top-73{
    padding-top: calc(1rem * 7.3);
}
.pdg--top-74{
    padding-top: calc(1rem * 7.4);
}
.pdg--top-75{
    padding-top: calc(1rem * 7.5);
}
.pdg--top-76{
    padding-top: calc(1rem * 7.6);
}
.pdg--top-77{
    padding-top: calc(1rem * 7.7);
}
.pdg--top-78{
    padding-top: calc(1rem * 7.8);
}
.pdg--top-79{
    padding-top: calc(1rem * 7.9);
}
.pdg--top-80{
    padding-top: calc(1rem * 8);
}
.pdg--top-81{
    padding-top: calc(1rem * 8.1);
}
.pdg--top-82{
    padding-top: calc(1rem * 8.2);
}
.pdg--top-83{
    padding-top: calc(1rem * 8.3);
}
.pdg--top-84{
    padding-top: calc(1rem * 8.4);
}
.pdg--top-85{
    padding-top: calc(1rem * 8.5);
}
.pdg--top-86{
    padding-top: calc(1rem * 8.6);
}
.pdg--top-87{
    padding-top: calc(1rem * 8.7);
}
.pdg--top-88{
    padding-top: calc(1rem * 8.8);
}
.pdg--top-89{
    padding-top: calc(1rem * 8.9);
}
.pdg--top-90{
    padding-top: calc(1rem * 9);
}
.pdg--top-91{
    padding-top: calc(1rem * 9.1);
}
.pdg--top-92{
    padding-top: calc(1rem * 9.2);
}
.pdg--top-93{
    padding-top: calc(1rem * 9.3);
}
.pdg--top-94{
    padding-top: calc(1rem * 9.4);
}
.pdg--top-95{
    padding-top: calc(1rem * 9.5);
}
.pdg--top-96{
    padding-top: calc(1rem * 9.6);
}
.pdg--top-97{
    padding-top: calc(1rem * 9.7);
}
.pdg--top-98{
    padding-top: calc(1rem * 9.8);
}
.pdg--top-99{
    padding-top: calc(1rem * 9.9);
}
.pdg--top-100{
    padding-top: calc(1rem * 10);
}











.pdg--btm-1{
    padding-bottom: calc(1rem * 0.1);
}
.pdg--btm-2{
    padding-bottom: calc(1rem * 0.2);
}
.pdg--btm-3{
    padding-bottom: calc(1rem * 0.3);
}
.pdg--btm-4{
    padding-bottom: calc(1rem * 0.4);
}
.pdg--btm-5{
    padding-bottom: calc(1rem * 0.5);
}
.pdg--btm-6{
    padding-bottom: calc(1rem * 0.6);
}
.pdg--btm-7{
    padding-bottom: calc(1rem * 0.7);
}
.pdg--btm-8{
    padding-bottom: calc(1rem * 0.8);
}
.pdg--btm-9{
    padding-bottom: calc(1rem * 0.9);
}
.pdg--btm-10{
    padding-bottom: calc(1rem * 1);
}
.pdg--btm-11{
    padding-bottom: calc(1rem * 1.1);
}
.pdg--btm-12{
    padding-bottom: calc(1rem * 1.2);
}
.pdg--btm-13{
    padding-bottom: calc(1rem * 1.3);
}
.pdg--btm-14{
    padding-bottom: calc(1rem * 1.4);
}
.pdg--btm-15{
    padding-bottom: calc(1rem * 1.5);
}
.pdg--btm-16{
    padding-bottom: calc(1rem * 1.6);
}
.pdg--btm-17{
    padding-bottom: calc(1rem * 1.7);
}
.pdg--btm-18{
    padding-bottom: calc(1rem * 1.8);
}
.pdg--btm-19{
    padding-bottom: calc(1rem * 1.9);
}
.pdg--btm-20{
    padding-bottom: calc(1rem * 2);
}
.pdg--btm-21{
    padding-bottom: calc(1rem * 2.1);
}
.pdg--btm-22{
    padding-bottom: calc(1rem * 2.2);
}
.pdg--btm-23{
    padding-bottom: calc(1rem * 2.3);
}
.pdg--btm-24{
    padding-bottom: calc(1rem * 2.4);
}
.pdg--btm-25{
    padding-bottom: calc(1rem * 2.5);
}
.pdg--btm-26{
    padding-bottom: calc(1rem * 2.6);
}
.pdg--btm-27{
    padding-bottom: calc(1rem * 2.7);
}
.pdg--btm-28{
    padding-bottom: calc(1rem * 2.8);
}
.pdg--btm-29{
    padding-bottom: calc(1rem * 2.9);
}
.pdg--btm-30{
    padding-bottom: calc(1rem * 3);
}

.pdg--btm-31{
    padding-bottom: calc(1rem * 3.1);
}
.pdg--btm-32{
    padding-bottom: calc(1rem * 3.2);
}
.pdg--btm-33{
    padding-bottom: calc(1rem * 3.3);
}
.pdg--btm-34{
    padding-bottom: calc(1rem * 3.4);
}
.pdg--btm-35{
    padding-bottom: calc(1rem * 3.5);
}
.pdg--btm-36{
    padding-bottom: calc(1rem * 3.6);
}
.pdg--btm-37{
    padding-bottom: calc(1rem * 3.7);
}
.pdg--btm-38{
    padding-bottom: calc(1rem * 3.8);
}
.pdg--btm-39{
    padding-bottom: calc(1rem * 3.9);
}
.pdg--btm-40{
    padding-bottom: calc(1rem * 4);
}
.pdg--btm-41{
    padding-bottom: calc(1rem * 4.1);
}
.pdg--btm-42{
    padding-bottom: calc(1rem * 4.2);
}
.pdg--btm-43{
    padding-bottom: calc(1rem * 4.3);
}
.pdg--btm-44{
    padding-bottom: calc(1rem * 4.4);
}
.pdg--btm-45{
    padding-bottom: calc(1rem * 4.5);
}
.pdg--btm-46{
    padding-bottom: calc(1rem * 4.6);
}
.pdg--btm-47{
    padding-bottom: calc(1rem * 4.7);
}
.pdg--btm-48{
    padding-bottom: calc(1rem * 4.8);
}
.pdg--btm-49{
    padding-bottom: calc(1rem * 4.9);
}
.pdg--btm-50{
    padding-bottom: calc(1rem * 5);
}
.pdg--btm-51{
    padding-bottom: calc(1rem * 5.1);
}
.pdg--btm-52{
    padding-bottom: calc(1rem * 5.2);
}
.pdg--btm-53{
    padding-bottom: calc(1rem * 5.3);
}
.pdg--btm-54{
    padding-bottom: calc(1rem * 5.4);
}
.pdg--btm-55{
    padding-bottom: calc(1rem * 5.5);
}
.pdg--btm-56{
    padding-bottom: calc(1rem * 5.6);
}
.pdg--btm-57{
    padding-bottom: calc(1rem * 5.7);
}
.pdg--btm-58{
    padding-bottom: calc(1rem * 5.8);
}
.pdg--btm-59{
    padding-bottom: calc(1rem * 5.9);
}
.pdg--btm-60{
    padding-bottom: calc(1rem * 6);
}
.pricetag{
    display: flex;
    width: auto;
    text-align: center;
    margin-top: 1rem;
    font-family: 'IBM Plex Sans', sans-serif;
}

.pricetag > div > div:first-child{
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.2;
    padding: 0.5rem 1rem
}

.pricetag > div > div:last-child{
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    background-color: var(--color-light-grey);
}


.pricetag > div > div:last-child span{
    font-size: 2rem;
    font-weight: normal;
}

.pricetag > div{
    transform: rotate(0deg);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
    border-top-right-radius: 15px;    overflow: hidden;
}
.scrollbar-white,
.scstCarrousel > .scstRow > .scstItem > .text{
    scrollbar-width: thin;
    scrollbar-color: var(--color-white) transparent;
}

.scrollbar-white::-webkit-scrollbar,
.scstCarrousel > .scstRow > .scstItem > .text::-webkit-scrollbar{
    width: 6px;
}

.scrollbar-white::-webkit-scrollbar-track,
.scstCarrousel > .scstRow > .scstItem > .text::-webkit-scrollbar-track{
    background: transparent;
}

.scrollbar-white::-webkit-scrollbar-thumb,
.scstCarrousel > .scstRow > .scstItem > .text::-webkit-scrollbar-thumb{
    background-color: var(--color-white);
    border-radius: 3px;
}

.scrollbar-white::-webkit-scrollbar-thumb:hover,
.scstCarrousel > .scstRow > .scstItem > .text::-webkit-scrollbar-thumb:hover{
    background-color: var(--color-light-grey);
}

#storageOverlay{
    position: fixed;
    bottom: 0;
    z-index: 1000;
    display: none;
}

.storageOverlay.content-space{
    padding-left: 0;
    padding-right: 0;
    left: 50%;
    transform: translate(-50%, 100%);
}

.storageOverlay.content-space > .storageOverlay__content{
    padding-left: 1rem;
    padding-right: 1rem;
}





.storageOverlay__content .buttons{
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}


@media (min-width: 375px) {
    .storageOverlay__content .buttons{
        flex-direction: row;
    }
}


@media (min-width: 425px) {

    .storageOverlay__content{
        border-top-left-radius: var(--borderRadius);
        border-top-right-radius: var(--borderRadius);
    }
}


@media (min-width: 600px) {
    .storageOverlay__content .buttons{
        justify-content: flex-start;
    }
}



@media (min-width: 1100px) {
    .storageOverlay.content-space > .storageOverlay__content{
        padding-left: 2rem;
        padding-right: 2rem;
        margin-left: 1rem;
        margin-right: 1rem;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
    }    
}
.subpage h2,
.subpage h3,
.subpage .buttons {
    margin-top: 2.5rem;
}

.subpage h4,
.subpage h5 {
    margin-top: 1.8rem;
}

.subpage p,
.subpage ul,
.subpage ol {
    margin-top: 0.8rem;
}

.subpage ul > li,
.subpage ol > li {
    margin-bottom: 0.3rem;
}

.subpage ul > li ul,
.subpage ol > li ul{
    margin-top: 0.1rem;
    list-style-type: circle;
}

.subpage ul > li ul > li,
.subpage ol > li ul > li{
    margin-bottom: 0;
    font-size: 0.9rem;
}

.subpage h4 + p {
  margin-top: 0.2rem;
}

.subpage h3{
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.2;
}


.subpage img{
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 2rem;
}

.subpage figcaption{
    margin-top: 0.3rem;
    font-size: 0.9rem;
    font-weight: 400;
    font-style: italic;
}



.subpage blockquote {
    margin: 2rem 0 0 0;
    padding: 1.75rem 2rem;
    background: #f8f7f5;
    border-left: 3px solid #7b7b7b;
    border-radius: 0 8px 8px 0;

    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: #333;
}

.subpage blockquote footer {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    color: #777;
}

.subpage blockquote footer::before {
    content: "— ";
}

@media (max-width: 600px) {
    .subpage blockquote {
        padding: 1.25rem 1.5rem;
        margin: 1.5rem 0;
    }
}





.subpage hr {
    margin-top: 2.5rem;
}




.subpage .content-space > h2:first-child,
.subpage .content-space > h3:first-child {
    margin-top: 0 !important;
}





.subpage #bookio {
    padding-top: 0 !important;
}

.subpage #bookio > .content-space {
    padding-top: 0 !important;
}


.subpage hr.bookio{
    margin-top: 0 !important;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt69lH_teZ-sa9D-I3cydbdeXxngzH&skey=b8dc2088854b122f&v=v362) format('woff2');
}

html, body {
    font-size: clamp(
        16px,
        1.5vmin,
        20px
    );
    font-family: 'IBM Plex Sans', sans-serif;
    line-height: 1.4;
    color: var(--primaryFontColor);
}

@media (min-width: 375px) {
    html, body {
    font-size: clamp(
        18px,
        1.5vmin,
        20px
    );
    }   
}

@media (min-width: 768px) {
    html, body {
    font-size: clamp(
        18px,
        1.3vmin,
        20px
    );
    }   
}

h1{
    font-family: 'IBM Plex Serif', serif;
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 300;
    font-variant: small-caps;
}

h2{
    font-family: 'IBM Plex Serif', serif;
    font-size: 2.3rem;
    line-height: 0.9;
    font-weight: 400;
    font-variant: small-caps;
    margin: 0;
}

h3{
    font-size: 1.2rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    line-height: 1.2;
}

h3.large{
    font-size: 1.2rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
}

@media (min-width: 600px) {

    h1{
        font-size: 3rem;
    }

    h2{
        font-size: 2.7rem;
    }

    h3{
        font-size: 1.5rem;
    }

    h3.large{
        font-size: 1.8rem;
    }
}

@media (min-width: 1200px) {

    h1{
        font-size: 3.65rem;
    }

    h2{
        font-size: 3.3rem;
    }
}



.textShadow {
    text-shadow: var(--color-dark-grey) 0px 0 30px, var(--color-dark-grey) 0px 0 20px, var(--color-dark-grey) 0px 0 10px, var(--color-dark-grey) 0px 0 5px;
}


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




h2 img{
    display: inline-block !important;
    height: 2.5rem !important;
    width: auto !important;
    margin-left: 0.1rem !important;
    margin-bottom: -0.4rem !important;
}

@media (min-width: 1200px) {
    h2 img{
        margin-bottom: -0.2rem !important;
    }
}




.whiteHeadline h1.mainHeadline,
.whiteHeadline h2.mainHeadline,
.whiteHeadline h3.mainHeadline,
.whiteHeadline h4.mainHeadline,
.whiteHeadline h5.mainHeadline,
.whiteHeadline h6.mainHeadline {
    color: var(--color-white) !important;
}
ul{
    padding-left: 1.5rem;
    list-style-type: disc;
}

ol{
    padding-left: 1.5rem;
    list-style-type: decimal;
}

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