/**
 *  element for injecting white space (margin) between flow (block) elements along a vertical axis.
 *  Usage:
 *  <div class="stack">
 *     <div><!-- child --></div>
 *     <div><!-- child --></div>
 *     <div><!-- etc --></div>
 *  </div>
 * Using:
 *      .m-block-end:auto
*/

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

/* Space regular: 20px */

.stack > * + * {
  margin-block-start: var(--space, 1.25rem);
}

.stack-fullh > * + * {
  --space: max(100%, 100vh - (min(200px, 12vh) + var(--navbar-height) + 100%));
}

/* Space xxl: 150px */

.stack-landing > * + * {
  --space: var(--space-landing);
}

/* Space xxl: 80px */

.stack-xxlarge > * + * {
  --space: 5rem;
}

/* Space xl: 60px */

.stack-xlarge > * + * {
  --space: 3.75rem;
}

/* Space l: 40px */

.stack-large > * + * {
  --space: 2.5rem;
}

/* Space m: 30px */

.stack-medium > * + * {
  --space: 1.875rem;
}

/* Space 20: 20px */

.stack-20 > * + * {
  --space: 1.25rem;
}

/* Space 16: 16px */

.stack-rem > * + * {
  --space: 1rem;
}

/* Space s: 10px */

.stack-small > * + * {
  --space: 0.625rem;
}

/* Space xs: 5px */

.stack-xsmall > * + * {
  --space: 0.3125rem;
}

/* Space xs: 5px */

.stack-none > * + * {
  --space: 0;
}

.stack-0 {
  margin-top: 0 !important;
}

.stack:only-child {
  /* ↓ `height` in horizontal-tb writing mode */
  block-size: 100%;
}

.stack-middle {
  align-items: center;
}

.stack-right {
  align-items: flex-end;
}

/**
 * A custom element for generic boxes/containers
*/

.box {
    /* ↓ Padding set to the first point on the modular scale */
    padding: var(--space-2xs) var(--space-xs);
    /* ↓ Always apply the transparent outline, for high contrast mode */
    outline: var(--border-thin) transparent;
    outline-offset: calc(var(--border-thin) * -1);
}

.box * {
    /* ↓ Force colors to inherit from the parent
    and honor inversion (below) */
    color: inherit;
}

.box.invert {
    /* ↓ The color vars inverted */
    color: var(--color-light);
    background-color: var(--color-dark);
}

.box--shadow {
    border: 0;
    box-shadow: 0px var(--space-4xs) var(--space-m) rgba(0, 0, 0, 0.15);
}

/**
 * A custom element for centering a block-level element horizontally,
 * with a max-width value representing the typographic measure
 *  Usage:
 *  <div class="class="center">">
 *     <!-- centered content -->
 *  </div>
*/

.center {
    /* ↓ Remove padding from the width calculation */
    box-sizing: content-box;
    /* ↓ The maximum width is the maximum measure */
    max-inline-size: var(--measure, 48rem);
    /* ↓ Only affect horizontal margins */
    margin-inline: auto;
    /* ↓ Apply the minimum horizontal space */
    padding-inline-start: var(--space-xs);
    padding-inline-end: var(--space-xs);
    --center-width: clamp(48rem, 90vw, 120rem);
}

.center .center:not(.padding) {
        padding-inline: 0;
    }

.center--bigger {
    --measure: min(100vw, 1700px);
}

.center--fullw {
    --measure: 1600px;
}

.center--1500 {
    --measure: 1500px;
}

.center--medium {
    --measure: min(var(--center-width), 1400px);
}

.center--regular {
    --measure: min(var(--center-width), 1200px);
}

@media (orientation: portrait) or (max-width: 1100px) {
    .center--fullw,
    .center--bigger,
    .center--medium {
        --measure: min(100vw, 1600px);
        box-sizing: border-box;
    }

    .center {
        max-inline-size: min(100%, var(--measure));
        padding-inline-start: max(var(--space-2xs), 3vw);
        padding-inline-end: max(var(--space-2xs), 3vw);
    }
}

.center--intrinsic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.center--intrinsic .stack:only-child {
        block-size: auto;
    }

/**
 *  A custom element for grouping items, with control over the margin between them
 *  Usage:
 *  <ul class="cluster">
 *      <li><!-- child --></li>
 *      <li><!-- child --></li>
 *      <li><!-- etc --></li>
 *  </ul>
  *      .m-inline-end:auto

*/

.cluster {
    /* ↓ Set the Flexbox context */
    display: flex;
    /* ↓ Enable wrapping */
    flex-wrap: wrap;
    --v-space: var(--gap, 1.25rem);
    /* ↓ Set the space/gap */
    gap: var(--v-space);
    /* ↓ Choose your justification (flex-start is default) */
    justify-content: flex-start;
    /* ↓ Choose your alignment (flex-start is default) */
    align-items: flex-end;
}

.cluster--full {
    justify-content: space-between;
}

.cluster--end {
    justify-content: flex-end;
}

.cluster--center {
    justify-content: center;
}

.cluster--middle {
    align-items: center;
}

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

.cluster--nowrap {
    flex-wrap: nowrap;
}

.cluster--icon .icon,
    .cluster--icon svg {
        flex-shrink: 0;
    }

.cluster--icon .content {
        flex-grow: 1;
        flex-basis: var(--content-width, 14rem);
    }

@media screen and (min-width: 600px) {
    .nowrap {
        flex-wrap: nowrap;
    }
}

/**
 * A custom element for covering a block-level element horizontally,
 * with a max-width value representing the typographic measure
 *  Usage:
 *  <div class="class="cover">">
 *      <div><!-- first child --></div>
 *      <h1><!-- centered child --></h1>
 *      <div><!-- third child --></div>
 *  </div>
  *  Usage:
 *  <div class="class="cover">">
 *      <div class="cover__header"><!-- header child --></div>
 *      <div class="cover__mid"><!-- centered child --></div>
 *      <div class="cover__footer"><!-- footer child --></div>
 *  </div>
*/

.cover {
    --v-space: var(--s1);
    --h-space: var(--space-xs);
    /* ↓ Establish a columnal flex context */
    display: flex;
    flex-direction: column;
    /* ↓ Set a minimum height to match the viewport height
    (any minimum would be fine) */
    min-block-size: 100%;
    min-inline-size: 100%;
    /* Set a padding value */
    padding: var(--v-space) var(--h-space);
}

.cover--full {
    min-block-size: 100vh;
    min-block-size: 100dvh;
}

.cover > * {
    /* ↓ Give each child a top and bottom margin */
    margin-block: var(--s1);
}

.cover > :first-child:not(h1),
.cover > .cover__header {
    /* ↓ Remove the top margin from the first-child
    if it _doesn't_ match the centered element */
    margin-block-start: 0;
}

.cover > :last-child:not(h1),
.cover > .cover__footer {
    /* ↓ Remove the bottom margin from the last-child
    if it _doesn't_ match the centered element */
    margin-block-end: 0;
}

.cover > h1,
.cover > .cover__mid {
    /* ↓ Center the centered element (h1 here)
    in the available vertical space */
    margin-block: auto;
}

/**
 * A custom element for augmenting image ratios
 *  Usage:
 *  <div class="frame" style="--n = 16; --d = 9">
 *      <img src="/path/to/image" alt="description of the image here" />
 *  </div>
*/

.frame {
    --n: 16; /* numerator */
    --d: 9; /* denominator */
    aspect-ratio: var(--n) / var(--d);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.frame > img,
.frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

@media (orientation: portrait) {
    .frame {
        --p-n: 1;
        --p-d: 1;
        aspect-ratio: var(--p-n) / var(--p-d);
    }
}

/**
 * A custom element for creating a responsive grid using the CSS Grid module
 *  Usage:
 *  <div class="grid" style="--grid-gap = 1.5rem; --minimum = 20ch;">
 *      <div><!-- child element --></div>
 *      <div><!-- another child element --></div>
 *      <div><!-- etc --></div>
 *  </div>
*/

.grid {
    /* ↓ Establish a grid context */
    display: grid;
    /* ↓ Set a gap between grid items */
    grid-gap: var(--grid-gap, 1rem);
    /* ↓ Set the minimum column width */
    --minimum: 20ch;
}

.grid-col > * {
    grid-column: 1 / -1;
}

.grid--center {
    align-items: center;
}

.grid--inline {
    display: inline-grid;
    max-inline-size: 100vw;
}

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

@supports (width: min(var(--minimum), 100%)) {
    .grid {
        /* ↓ Enhance with the min() function into multiple columns */
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(var(--minimum), 100%), 1fr)
        );
    }
}

.full-row {
    grid-column: 1 / -1;
}

.align-end {
    align-self: flex-end;
}

.align-start {
    align-self: flex-start;
}

.grid--no-col-gap {
    column-gap: 0;
}

.grid--no-gap {
    gap: 0;
}

/**
 * A custom element for inline icon insertion
 *  Usage:
 *  <span class="with-icon">
 *      <svg class="icon">
 *          <use href="/path/to/icons.svg#cross"></use>
 *      </svg>
 *      Close
 *  </span>
 *  circle = /resources/svg/circle.svg or public/svg/circle.svg
 *  {{ svg src="circle" class="icon" }}
*/

.icon {
    height: 1em;
    height: 1.5cap;

    width: 1em;
    width: 1.5cap;
}

.icon--bigger {
    height: 2em;
    width: 2em;
}

.icon--only {
    height: 1em;
    width: 1em;
    vertical-align: -0.13em;
}

.icon--only.h4 {
    vertical-align: -0.18em;
}

.icon--big {
    height: 1.35em;
    width: 1.35em;
    margin-top: -0.1em;
    vertical-align: -0.3em;
}

.icon--big2 {
    height: 1.585em;
    width: 1.585em;
}

.icon--2x {
    height: 2.1875em;
    width: 2.1875em;
    margin-bottom: -0.3em;
}

.with-icon-float .icon {
    float: inline-start;
    margin-inline-end: var(--space, 0.2em);
    margin-top: 0;
}

.icon--button {
    height: 32px;
    width: 32px;
}

.with-icon {
    display: flex !important;
    gap: var(--icon-space, 0.2em);
    align-items: center;
}

.button--icon {
    --icon-space: 0.625rem;
}

.circle-icon {
    background-color: var(--color-accent-light);
    border-radius: 50%;
}

.bg-primary .circle-icon {
        background-color: var(--color-white);
    }

.bg-primary .circle-icon path {
            color: var(--color-black);
            fill: var(--color-black);
        }

.circle-outline {
    border-radius: 50%;
    border: 1px solid currentColor;
}

.separator {
    margin-top: -0.1em;
}

/**
 * A custom element to be positioned absolutely over any element
 *  Usage:
 *  <div style="position: relative">
 *      <p>Static content</p>
 *
 *      <div class="imposter" style="--positioning: fixed; --margin: 1rem;">
 *           <p>Superimposed content</p>
 *      </div>
 *
 *  </div>
*/

.imposter {
    /* ↓ Choose the positioning element */
    position: var(--positioning, absolute);
    /* ↓ Position the top left corner in the center */
    inset-block-start: 50%;
    inset-inline-start: 50%;
    /* ↓ Reposition so the center of the element
    is the center of the container */
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 28.1rem) {
        .imposter.modal {
            position: fixed;
            inset-block-start: 0;
            inset-inline-start: 0;
            transform: translate(0, 0);
            overflow: scroll;
            block-size: 100dvh;
        }
    }

.imposter.contain {
    /* ↓ Include a unit, or the calc function will be invalid */
    --margin: 0px;
    /* ↓ Provide scrollbars so content is not obscured */
    overflow: auto;
    /* ↓ Restrict the height and width, including optional
    spacing/margin between the element and positioning container */
    max-inline-size: calc(100% - (var(--margin) * 2));
    max-block-size: calc(100% - (var(--margin) * 2));
}

/**
 * A custom element for creating a responsive grid using the CSS Grid module
 *  Usage:
 *  <div class="reel">
 *      <div><!-- child element --></div>
 *      <div><!-- another child element --></div>
 *      <div><!-- etc --></div>
 *      <div><!-- etc --></div>
 *  </div>
*/

.reel {
    /* ↓ Custom properties for ease of adjustment */
    --space: 1rem;
    --color-light: #fff;
    --color-dark: #000;
    --reel-height: auto;
    --item-width: 25ch;
    display: flex;
    block-size: var(--reel-height);
    /* ↓ Overflow */
    overflow-x: auto;
    overflow-y: hidden;
    /* ↓ For Firefox */
    scrollbar-color: var(--color-light) var(--color-dark);
}

.reel::-webkit-scrollbar {
    /*
    ↓ Instead, you could make the scrollbar height
    a variable too. This is left as an exercise
    (be mindful of the linear-gradient!)
    */
    block-size: 1rem;
}

.reel::-webkit-scrollbar-track {
    background-color: var(--color-dark);
}

.reel::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
    /* ↓ Linear gradient ‘insets’ the white thumb within the black bar */
    background-image: linear-gradient(
        var(--color-dark) 0,
        var(--color-dark) 0.25rem,
        var(--color-light) 0.25rem,
        var(--color-light) 0.75rem,
        var(--color- dark) 0.75rem
    );
}

.reel > * {
    /*
    ↓ Just a `width` wouldn’t work because
    `flex-shrink: 1` (default) still applies
    */
    flex: 0 0 var(--item-width);
}

.reel > img {
    /* ↓ Reset for images */
    block-size: 100%;
    flex-basis: auto;
    width: auto;
}

.reel > * + * {
    margin-inline-start: var(--space);
}

.reel.overflowing:not(.no-bar) {
    /* ↓ Only apply if there is a scrollbar (see the JavaScript) */
    padding-block-end: var(--space);
}

/* ↓ Hide scrollbar with `no-bar` class */

.reel.no-bar {
    scrollbar-width: none;
}

.reel.no-bar::-webkit-scrollbar {
    display: none;
}

/**
 * A element for placing two elements side-by-side. If space permits, the sidebar element has a set width, and the companion takes up the rest of the available horizontal space. If not, the elements are collapsed into a single column, each taking up 100% of the horizontal space.
 *  Usage:
 *  <div class="with-sidebar">
 *      <div class="sidebar"><!-- sidebar --></div>
 *      <div class="content"><!-- non-sidebar --></div>
 *  </div>
*/

.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    /* ↓ The default value is the first point on the modular scale */
    gap: var(--gutter, var(--space-xs));
    justify-content: center;
}

.with-sidebar--no-stretch {
    align-items: flex-start;
}

.with-sidebar > .sidebar {
    /* ↓ The width when the sidebar _is_ a sidebar */
    flex-basis: var(--sidebar-size, 24.5rem);
    flex-grow: 1;
}

.with-sidebar > .content {
    /* ↓ Grow from nothing */
    flex-basis: 0;
    flex-grow: 999;
    /* ↓ Wrap when the elements are of equal width */
    min-inline-size: min(100%, var(--content-size, 50%));
}

/**
 * Switch directly between horizontal and vertical layouts at a given (container width-based) breakpoint or 'threshold'
 *  Usage:
 *  <div class="switcher">
 *      <div><!-- child element --></div>
 *      <div><!-- another child element --></div>
 *      <div><!-- etc --></div>
 *  </div>
*/

.switcher {
    display: flex;
    flex-wrap: wrap;
    /* ↓ The default value is the first point on the modular scale */
    gap: var(--gutter, var(--s1));
    /* ↓ The width at which the layout “breaks” */
    --threshold: 30rem;
}

.switcher > * {
    /* ↓ Allow children to grow */
    flex-grow: 1;
    /* ↓ Switch the layout at the --threshold */
    flex-basis: calc((var(--threshold) - 100%) * 999);
    max-inline-size: 100%;
}

.switcher > :nth-last-child(n + 5),
.switcher > :nth-last-child(n + 5) ~ * {
    /* ↓ Switch to a vertical configuration if
    there are more than 4 child elements */
    flex-basis: 100%;
}

:root {
  --font-special: Arial, sans-serif;
  --font-plain: Arial, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, Courier, Courier New, Andale Mono, monospace;

  --ratio: 1.5;

  --h-4: clamp(1.125rem, 0.754rem + 1vw, 1.40625rem);
  --h-3: clamp(1.4063rem, 1.0676rem + 1.4451vw, 2.1875rem);
  --h-2: clamp(1.7578rem, 1.3344rem + 1.8064vw, 2.7344rem);
  --h-1: clamp(2.1973rem, 1.6681rem + 2.2579vw, 3.418rem);

  /* 20px -> 22.5px */
  --lead: clamp(1.25rem, 1.1823rem + 0.289vw, 1.4063rem);
  --normal: 1.125rem;
  --small: 0.9375rem;
  --xsmall: 0.875rem;
  --xxsmall: 0.75rem;

  --measure-ch: 65ch;
  --navbar-height: 90px;
  --mobile-menu-height: 60px;

  --line-height: 1.5;
  --line-height-small: 1.3;

  --border-radius: var(--space-3xs);
  --border-radius-xs: 4px;
  --border-thin: 5px;
  --border-normal: 7px;
  --border-thick: 10px;

  /* @link https://utopia.fyi/space/calculator?c=375,60,1.2,1240,80,1.25,5,2,&s=0.75|0.5|0.25|0.15,1.6|2|3|4|6,s-l&g=s,l,xl,12 */

  /* Space 4xs: 9px → 12px */
  /* TODO: Premenuj na tvar --space-4xs-9-12 nech je vo variabilke vidiet aj pixle */
  --space-4xs: clamp(0.5625rem, 0.4812rem + 0.3468vw, 0.75rem);
  /* Space 3xs: 15px → 20px */
  --space-3xs: clamp(0.9375rem, 0.802rem + 0.578vw, 1.25rem);
  /* Space 25-30: 25px → 30px */
  --space-25-30: clamp(1.5625rem, 1.433rem + 0.5525vw, 1.875rem);
  /* Space 30-50: 25px → 30px */
  --space-30-50: clamp(1.875rem, 1.3331rem + 2.3121vw, 3.125rem);
  /* Space 2xs: 30px → 40px */
  --space-2xs: clamp(1.875rem, 1.604rem + 1.1561vw, 2.5rem);
  /* Space s: 38px → 50px */
  --space-50: clamp(2.375rem, 2.0499rem + 1.3873vw, 3.125rem);
  /* Space xs: 45px → 60px */
  --space-xs: clamp(2.8125rem, 2.4061rem + 1.7341vw, 3.75rem);
  /* Space s: 60px → 80px */
  --space-s: clamp(3.75rem, 3.2081rem + 2.3121vw, 5rem);
  /* Space m: 96px → 128px */
  --space-m: clamp(6rem, 5.1329rem + 3.6994vw, 8rem);
  /* Space landing: 113px → 150px */
  --space-landing: clamp(7.0625rem, 6.06rem + 4.2775vw, 9.375rem);
  /* Space l: 120px → 160px */
  --space-l: clamp(7.5rem, 6.4162rem + 4.6243vw, 10rem);
  /* Space xl: 180px → 240px */
  --space-xl: clamp(11.25rem, 9.6243rem + 6.9364vw, 15rem);
  /* Space 2xl: 240px → 320px */
  --space-2xl: clamp(15rem, 12.8324rem + 9.2486vw, 20rem);
  /* Space 3xl: 360px → 480px */
  --space-3xl: clamp(22.5rem, 19.2486rem + 13.8728vw, 30rem);

  /* Step -6: 3.2px → 5.12px */
  --s-6: clamp(0.2rem, calc(0.15rem + 0.31vw), 0.32rem);
  /* Step -5: 4.43px → 7.23px */
  --s-5: clamp(0.28rem, calc(0.21rem + 0.32vw), 0.45rem);
  /* Step -4: 5.91px → 8.68px */
  --s-4: clamp(0.37rem, calc(0.3rem + 0.31vw), 0.54rem);
  /* Step -3: 7.88px → 10.42px */
  --s-3: clamp(0.49rem, calc(0.43rem + 0.29vw), 0.65rem);
  /* Step -2: 10.50px → 12.50px */
  --s-2: clamp(0.66rem, calc(0.61rem + 0.23vw), 0.78rem);
  /* Step -1: 12.00px → 15.00px */
  --s-1: clamp(0.75rem, calc(0.67rem + 0.34vw), 0.94rem);
  /* Step 0: 16.00px → 18.00px */
  --s0: clamp(1rem, calc(0.95rem + 0.23vw), 1.13rem);
  /* Step 1: 18px → 22px */
  --s1: clamp(1.13rem, calc(1.02rem + 0.45vw), 1.38rem);
  /* Step 2: 20px → 30px */
  --s2: clamp(1.25rem, calc(0.99rem + 1.14vw), 1.88rem);
  /* Step 3: 22px → 35px */
  --s3: clamp(1.38rem, calc(1.04rem + 1.48vw), 2.19rem);
  /* Step 4: 25px → 44px */
  --s4: clamp(1.56rem, calc(1.08rem + 2.16vw), 2.75rem);
  /* Step 5: 28px → 55px */
  --s5: clamp(1.75rem, calc(1.06rem + 3.07vw), 3.44rem);

  --fluid-50-170: clamp(3.125rem, -4.375rem + 12.5vw, 10.625rem);
  --fluid-280-390: clamp(17.5rem, 10.625rem + 11.4583vw, 24.375rem);

  /* Desktop 1200px - 1920px */
  --fluid-10-30: clamp(0.625rem, -1.4583rem + 2.7778vw, 1.875rem);
  --fluid-0-30: clamp(0rem, -3.125rem + 4.1667vw, 1.875rem);

  --color-primary: var(--color-red);
  --color-primary-darker: var(--color-red-darker);

  --color-sand: #f3dfbd;
  --color-black: #000;
  --color-white: #ffffff;
  --color-grey: #cccccc;
  --color-grey-light: #f1f2f4;

  --color-red: #f21c0a;
  --color-red-darker: #971106;
  --color-bg-light: #fff;

  --form-control-selected: var(--color-primary);
  --form-control-color: var(--color-primary-darker);
  --form-control-disabled: var(--color-grey);
}

*,
:after,
:before {
    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
    overflow-wrap: break-word;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

:root {
  line-height: var(--ratio);
  font-family: var(--font-plain);
  color: var(--color-dark);
}

/* *,
::before,
::after {
    outline: 1px solid lime;
} */

[x-cloak] {
  display: none !important;
}

body {
  background-color: var(--color-bg-light);
}

body:has(div.preventScroll) {
  overflow: hidden;
  height: 100vh;
}

[hidden] {
  display: none;
}

[hidden]+* {
  margin-top: 0 !important;
}

html {
  scroll-padding-top: var(--navbar-height);
  font-optical-sizing: auto;
  hanging-punctuation: first last;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }

  :has(:target) {
    scroll-behavior: smooth;
  }
}

:focus-visible {
  outline: var(--border-thin) solid var(--color-accent-dark);
  outline-offset: var(--border-thin);
}

p {
  text-wrap: pretty;
  max-width: 70ch;
}

strong {
  font-weight: 600;
}

input {
  font-size: inherit;
}

button,
pre {
  outline: var(--border-thin) solid transparent;
  outline-offset: calc(var(--border-thin) * -1);
}

footer,
header,
main,
nav {
  display: block;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
  background-color: transparent;
}

svg {
  background-color: transparent;
}

a {
  text-decoration: none;
  color: var(--color-primary);
}

a:focus-visible {
    opacity: 1;
    outline: 2px solid var(--color-primary-darker);
  }

hr {
  padding: 0;
  border-left-width: 0;
  border-bottom-width: 1px;
  border-right-width: 0;
  border-top-width: 0;
}

aside>ol,
aside>ul,
main>ol,
main>ul {
  padding-left: 2em;
}

kbd {
  line-height: 1;
  font-size: var(--small);
  color: var(--color-grey);
  background-color: var(--color-primary-darker);
  padding: 0.125em 0.5em;
  border-radius: 0.125em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  border-width: var(--border-thin);
  border-color: var(--color-bg-light);
  border-inline: 0;
  text-align: left;
}

th {
  font-weight: 700;
  color: #000;
  background-color: var(--color-bg-light);
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {

  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  line-height: var(--line-height-small);
  font-family: var(--font-special);
  font-weight: 400;
  text-wrap: balance;
}

.h1,
h1 {
  font-size: var(--h-1);
  line-height: 1.35;
}

.h2,
h2 {
  font-size: var(--h-2);
}

.h3,
h3 {
  font-size: var(--h-3);
  line-height: 1.3;
}

@media screen and (min-width: 41rem) {
  .desktop-small\:h3,
  .h3-desktop {
    font-size: var(--h-3);
  }
}

.h4,
h4 {
  font-size: var(--h-4);
}

.lead {
  font-size: var(--lead) !important;
  font-family: var(--font-plain);
  font-weight: normal;
}

.strong {
  font-weight: 700;
}

.normal,
body {
  font-family: var(--font-plain);
  font-size: var(--normal);
}

.font-1rem {
  font-size: 1rem !important;
}

.font-small {
  font-size: var(--small);
}

.font-xsmall {
  font-size: var(--xsmall);
}

.font-xxsmall {
  font-size: var(--xxsmall);
}

.figcaption,
figcaption {
  margin-top: 0.9375rem;
  font-size: 1rem;
}

.display\:block {
  display: block !important;
}

.filter\:invert {
  filter: invert(100%) !important;
}

.text-align\:center {
  text-align: center !important;
}

.text-align\:left {
  text-align: left !important;
}

.text-align\:right {
  text-align: right !important;
}

.height\:100\% {
  height: 100%;
}

.measure\:short {
  max-width: 40ch;
}

.relative {
  position: relative;
}

.maxw-750 {
  max-width: 47rem;
  margin-inline: auto;
}

.underline {
  text-decoration: underline;
}

.uppercase {
  text-transform: uppercase;
}

.opacity-100 {
  opacity: 1;
}

.opacity-0 {
  opacity: 0.1;
}

.font-bold {
  font-weight: 600;
}

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

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

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

.color-black svg path {
    fill: var(--color-black);
  }

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

.color-white svg path {
    fill: var(--color-white);
  }

a:hover svg.hover-black {
    background-color: var(--color-white);
  }

a:hover svg.hover-black path {
      fill: var(--color-black);
    }

@media screen and (max-width: 45rem) {

.desktop {
    display: none !important
}
  }

@media screen and (min-width: 45rem) {

.desktop\:block {
    display: block !important
}
  }

@media screen and (min-width: 45.01rem) {

.mobile {
    display: none !important
}
  }

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

.color-accent-light {
  color: var(--color-grey-light) !important;
}

.bg-white {
  background: #fff !important;
}

.bg-light {
  background: var(--color-bg-light);
}

.bg-accent-light {
  background: var(--color-grey-light);
}

.bg-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.min-w-6rem {
  min-width: 6rem;
}

.overflow-hidden {
  overflow: hidden;
}

.rounded {
  border-radius: 4px;
  overflow: hidden;
}

.rounded--primary {
  border-radius: var(--border-radius);
}

.rounded-xl {
  border-radius: 1.25rem;
  overflow: hidden;
}

.rounded-circle {
  border-radius: 50%;
  overflow: hidden;
}

span.rounded {
  display: block;
}

.transition {
  transition: all ease-in-out 300ms;
}

.translate-100 {
  translate: 0 100%;
}

.translate-0 {
  translate: 0;
}

.translate-x-100 {
  translate: 100% 0;
}

.vh {
  clip-path: inset(100%) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.pointer {
  cursor: pointer;
}

.white-icon {
  filter: invert(100%) sepia(0%) saturate(1861%) hue-rotate(297deg)
    brightness(110%) contrast(101%);
  background: transparent;
}

.blue-icon {
  filter: invert(17%) sepia(32%) saturate(5009%) hue-rotate(188deg)
    brightness(90%) contrast(102%);
  background: transparent;
}

.sticky {
  position: sticky;
  top: var(--navbar-height);
  block-size: auto !important;
}

.sticky.sticky--padding {
    top: calc(var(--navbar-height) + var(--space-2xs));
  }

.mt-auto {
  margin-top: auto;
}

.mt-50 {
  margin-top: var(--space-50);
}

.mt-120 {
  margin-top: var(--space-m);
}

.mb-20 {
  margin-bottom: var(--space-3xs);
}

.m-landing {
  margin-block: var(--space-landing);
}

header {
  display: flex;
  justify-content: flex-end;
  max-width: 1920px;
  margin-inline: auto;
}

@media screen and (max-width: 920px) {

header {
    flex-direction: column;
    justify-content: center
}
  }

header .right {
    position: relative;
  }

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

header .right {
      flex-basis: min(calc(53.6% + max(1920px - 100vw, 0)), 69%);
      flex-grow: 1;
      max-width: 1030px;
      height: 550px;
      overflow: hidden;
      margin-top: -70px
  }
      @media screen and (max-width: 1200px) {

header .right {
        margin-top: 0px;
        height: 420px
  }
      }

      @media screen and (max-width: 1023px) {

header .right {
        order: 0;
        flex-basis: auto;
        width: 100%
  }
      }

      @media screen and (max-width: 920px) {

header .right {
        margin-top: -75px;
        height: 420px
  }
      }
    }

header .right .desktop {
      max-width: 1030px;
      width: 100%;
      object-position: center;
      object-fit: cover;
    }

header .left {
    flex-basis: 39%;
    flex-grow: 1;
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
  }

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

header .left {
      max-width: 750px;
      min-height: 540px;
      justify-content: end
  }

      header .left .content {
        max-height: calc(
          350px + 2 * clamp(2.8125rem, 2.4061rem + 1.7341vw, 3.75rem)
        );
        align-self: flex-end;
      }

      header .left p {
        margin-top: auto;
      }
    }

@media screen and (max-width: 920px) {

header .left {
      order: 1;
      flex-basis: auto;
      justify-content: center
  }
    }

header #logo {
    width: 324px;
    margin-bottom: 20px;
    max-width: 70vw;
  }

header .content {
    max-width: calc(440px + 2 * clamp(3.75rem, 3.2081rem + 2.3121vw, 5rem));
    padding: var(--space-xs) var(--space-s);
  }

@media screen and (max-width: 920px) {

header .content {
      padding-inline: 20px;
      padding-bottom: var(--space-s)
  }
    }

.main-content {
  max-width: 1180px;
  padding-inline: 20px;

  margin-inline: auto;
  --sidebar-size: 240px;
  gap: 100px;
  margin-top: 90px;
  margin-bottom: 100px;
}

@media screen and (max-width: 860px) {

.main-content {
    margin-top: 64px;
    margin-bottom: 80px;
    gap: 50px
}
  }

.main-content .content {
    max-width: 760px;
  }

.main-content hr.first, .main-content .menu-anchor.first {
      visibility: hidden;
    }

.main-content hr,
  .main-content .menu-anchor {
    width: 180px;
    height: 3px;
    color: var(--color-grey);
    background-color: var(--color-grey);
    pointer-events: none;
}

.main-content .box {
    position: relative;
    background-color: var(--color-grey-light);
  }

.main-content .box:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      border-bottom: 40px solid var(--color-white);
      border-left: 40px solid var(--color-grey-light);
      width: 0;
    }

.main-content .box:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-top: 40px solid var(--color-white);
      border-right: 40px solid var(--color-grey-light);
      width: 0;
    }

.main-content .table {
    width: 100%;
  }

.main-content .table .row {
      width: 100%;
      gap: 0 15px;
      display: flex;
      flex-wrap: wrap;
    }

.main-content .table .th {
      flex-basis: 35%;
    }

@media screen and (max-width: 1140px) {

.main-content .table .th {
        flex-basis: 43%
    }
      }

.main-content .table.kontakt-table .th {
        flex-basis: 40%;
      }

.main-content .table .td {
      font-weight: 700;
    }

@media screen and (max-width: 950px) {
        .main-content .table.kontakt-table .th,
        .main-content .table.kontakt-table .td {
          width: 100%;
          flex-basis: 100%;
        }
    }

@media screen and (max-width: 1050px) and (min-width: 991px) {
        .main-content .table.side-table .row {
          flex-direction: column;
          gap: 0;
        }
        .main-content .table.side-table .th {
          font-size: 1.125rem;
        }
        .main-content .table.side-table .td {
          font-weight: 1rem;
          width: 100%;
          flex-basis: auto;
          text-align: left !important;
        }
    }

@media screen and (max-width: 480px) {
        .main-content .table.side-table .row {
          flex-direction: column;
          gap: 0;
        }
        .main-content .table.side-table .th {
          font-size: 1.125rem;
        }
        .main-content .table.side-table .td {
          font-weight: 1rem;
          width: 100%;
          flex-basis: auto;
          text-align: left !important;
        }
    }

.main-content .with-side-title.konatelia {
      width: 1060px;
    }

@media screen and (max-width: 1770px) {

.main-content .with-side-title.konatelia {
        width: 100%
    }
      }

.main-content .with-side-title {
    display: flex;
}

@media screen and (max-width: 990px) {

.main-content .with-side-title {
      flex-wrap: wrap
  }
    }

.main-content .with-side-title {

    gap: 40px;
}

.main-content .with-side-title h2 {
      flex-basis: 200px;
      width: 200px;
      flex-shrink: 0;
      display: block;
      padding-right: 20px;
    }

@media screen and (max-width: 990px) {

.main-content .with-side-title h2 {
        width: 100%;
        flex-basis: 100%
    }
      }

.main-content .with-side-title .side {
      display: flex;
      flex-grow: 1;
      gap: 20px;
      flex-wrap: wrap;
    }

.main-content .with-side-title .side .image {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-weight: 700;
      }

@media screen and (max-width: 1770px) {

.main-content .with-side-title .side .image {
          width: 250px
      }
        }

@media screen and (max-width: 1140px) {

.main-content .with-side-title .side .image {
          width: calc((100% - 20px) / 2)
      }
        }

@media screen and (max-width: 58rem) {

.main-content .with-side-title .side .image {
          width: 45%
      }
        }

.main-content .with-side-title .side .table {
        gap: 0;
      }

.main-content .with-side-title .side .table .row {
          min-height: 27px;
          padding-block: 15px;
          box-sizing: content-box;
          border-bottom: 1px solid var(--color-grey);
        }

.main-content .with-side-title .side .table .row:last-child {
            border-bottom: 0;
          }

.main-content .with-side-title .side .table .row .th {
            font-weight: 700;
          }

.main-content .with-side-title .side .table .row .td {
            text-align: right;
            font-weight: 400;
            flex-grow: 1;
          }

.accordeon {
  overflow: hidden;
  border: 1px solid var(--color-grey);
}

.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.acc-header:hover {
  color: var(--color-primary);
}

.acc-header h4 {
  margin: 0;
  font-weight: 700;
}

.acc-header img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.acc-header img.open {
    transform: rotate(45deg);
  }

.acc-content {
  padding: 0px 20px 0px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease-out,
    padding 0.4s ease-out,
    opacity 0.4s ease-out;
}

.acc-content.open {
  max-height: 260px;
  opacity: 1;
  padding: 0 20px 20px;
}

.acc-content p {
  margin: 0 0 35px 0;
  color: #666;
  line-height: 1.6;
}

.pdfs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pdf {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: underline;
  color: var(--color-black);
  transition: background-color 0.2s;
}

.pdf:hover {
    color: var(--color-primary);
  }

.pdf img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.pdf span {
  line-height: 1.5;
}

[x-cloak] {
  display: none !important;
}

footer a:hover {
    color: var(--color-primary);
  }

footer .mt-10 {
    margin-top: 15px;
  }

footer .mt-10 a {
      color: var(--color-black);
      text-decoration: underline;
    }

footer .mt-10 a:hover {
      color: var(--color-primary);
    }

footer {
  background-color: var(--color-grey-light);
  padding: 70px 20px;
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

@media screen and (max-width: 913px) {

footer {
    justify-content: space-between
}
      footer .col:last-child {
        padding-top: var(--space-2xs);
        border-top: 1px solid var(--color-grey);
        width: 100%;
        justify-self: center;
        align-self: center;
        text-align: center;
      }
  }

@media screen and (max-width: 624px) {
    footer div {
      width: 100%;
    }
  }

@media screen and (max-width: 624px) {

footer {
    justify-content: left;
    gap: var(--space-2xs)
}
  }

@media screen and (max-width: 624px) {

footer .col {
      padding-top: var(--space-2xs);
      border-top: 1px solid var(--color-grey);
      width: 100%;
      text-align: left
  }
      footer .col:first-child {
        border: none;
      }
      footer .col:last-child {
        text-align: left;
      }
    }

.footer-logo {
  width: 220px;
}

.footer-menu {
  list-style: none;
}

.footer-menu a {
    color: var(--color-black);
    text-decoration: underline;
  }

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebar-menu a {
    font-weight: 700;
    color: var(--color-black);
    height: 60px;
    display: flex;
    align-items: center;
  }

.sidebar-menu a::before {
      content: "";
      background: url("/img/icon/dot.png");
      height: 100%;
      aspect-ratio: 1;
      background-position: center;
      background-repeat: no-repeat;
    }

.sidebar-menu a:hover {
      background-color: #f21c0a12;
    }

.sidebar-menu a.active {
      color: var(--color-red);
      background-color: #f21c0a12;
    }

.sidebar-menu a.active::before {
        background-image: url("/img/icon/dot-active.png");
      }

.button {
  border: 1px solid var(--color-white);
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55px;
  font-weight: 700;
  width: 164px;
  gap: 10px;
  box-sizing: content-box;
  padding-inline: 25px;
  align-self: flex-end;
  justify-self: end;
}

.open-menu {
  display: none;
}

.sidebar {
  z-index: 10;
}

@media screen and (max-width: 63rem) {

.sidebar {
    --sidebar-size: 15rem
}
  }

@media screen and (max-width: 53.875rem) {

.sidebar {
    --sidebar-size: 13.5rem
}
  }

.open-menu {
  color: var(--color-black);
  background-color: var(--color-sand);
  color: var(--brand-black, #000);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 150%; /* 1.6875rem */
  align-items: center;
  gap: 10px;
  z-index: 10;
  padding: 0 20px;
}

.open-menu img {
    width: 22px;
  }

.menu-mobile {
  display: none;
}

.backdrop {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 43rem) {
  .backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    inset: 0;
    z-index: 50;
    transition: all 0.4s;
  }

  .backdrop.opened {
    pointer-events: all;
    opacity: 1;
  }

  .open-menu.top-menu {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 54px;
  }
  .menu-mobile {
    z-index: 100;
    position: fixed;
    display: flex;
    width: 100%;
    color: var(--color-black);
    background-color: var(--color-sand);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 30px 20px 60px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.3);
    bottom: -100vh;
    transition: all 0.5s;
  }

    .menu-mobile .button {
      align-self: center;
      border-color: var(--color-black);
      color: var(--color-black);
    }
    .menu-mobile ul {
      list-style: none;
    }
    .menu-mobile li {
      text-align: center;
    }

      .menu-mobile li a {
        color: var(--color-black);
        text-align: center;
        display: block;
        padding-block: 10px;
      }

    .menu-mobile.opened {
      bottom: 0;
    }

  .sidebar {
    --inline-padding: max(var(--space-2xs), 3vw);
    --sidebar-size: 20rem;
    --menu-height: 54px;
    position: fixed;
    width: 100%;
    top: -60px;
    margin-inline: calc(-1 * var(--inline-padding));
    transition: all 0.4s;
    opacity: 0;
    pointer-events: none;
  }
    .sidebar.visible {
      opacity: 1;
      pointer-events: all;
      top: 0;
    }

    .sidebar .open-menu {
      position: absolute;
      display: flex;
      right: 0;
      height: var(--menu-height);

      top: 0;
    }

    .sidebar .sidebar-menu-box > div {
      margin-top: 0;
    }
    .sidebar .lead {
      display: none;
    }
    .sidebar .sidebar-menu {
      background-color: var(--color-white);
      box-shadow: 0 2px 5px 0 #bfa49240;
      display: block;
      height: var(--menu-height);
    }

      .sidebar .sidebar-menu a {
        display: none;
        padding-left: var(--inline-padding);
        padding-right: calc(var(--inline-padding) + 3rem);
        font-weight: 700;
        color: var(--color-black);
        border: 0;
        height: var(--menu-height);
        justify-content: start;
        align-items: center;
      }
        .sidebar .sidebar-menu a::before {
          display: none;
        }
        .sidebar .sidebar-menu a.active {
          display: flex;
          background-color: transparent;
        }
}

.vyrocne-spravy h2 {
  margin-bottom: -10px;
}


/*# sourceMappingURL=app.b536e8b41c976f0efd0f.css.map*/