@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
:root {
    /* zakladni barvy */
    --main-color: #29ABE2;
    --main-dark: #0090D8;
    --sec-color: #C724B1;
    --purple-color: #4B2E83;
    --dark-color: #1B1547;
    --dark-2-color: #241E56;
    --light-blue: #5FD0FF;
    --light-pink: #F0A6E4;
    /* texty */
    --text-color: #3B3663;
    --text-light: #4F4A75;
    --text-muted: #6B6690;
    /* texty na tmavem pozadi */
    --dark-text: #D5D1F0;
    --dark-text-2: #C4C0E6;
    --dark-text-3: #B9B4E0;
    --dark-text-muted: #8E89B8;
    /* ostatni */
    --transp-color: rgba(255, 255, 255, 0.55);
    --bila-linka: rgba(255, 255, 255, 0.14);
    --bila-plocha: rgba(255, 255, 255, 0.06);
    --box-shadow: 0 12px 28px rgba(41, 171, 226, 0.35);
    --box-shadow-hov: 0 16px 34px rgba(41, 171, 226, 0.45);
    --bor-radius: 18px;
    /* nastaveni sirky stranky */
    --page-size: 1500px;
    /* vyska horni listy */
    --top-bar: 97px;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, #ffffff 100%), linear-gradient(160deg, #EEF3FA 0%, #E6ECF8 26%, #DCE3F4 52%, #E8EDF7 80%, #E8EDF7 100%) no-repeat;
    background-size: 100% 2040px, 100% 2040px;
    background-color: #ffffff;
}

main {
    position: relative;
    width: 100%;
}

* {
    font-family: 'Kanit', system-ui, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: .2s;
    font-size: 16px;
    font-weight: 400;
    line-height: 165%;
    color: var(--text-color);
}

.cleaner {
    clear: both;
    height: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dark-color);
    font-weight: 700;
    line-height: 115%;
}

h1 {
    font-size: 60px;
    margin-bottom: 24px;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 23px;
    margin: 0 0 12px;
}

h4 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1 a,
h2 a,
h3 a,
h4 a {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: none;
}

h2 a:hover,
h3 a:hover {
    color: var(--main-color);
}

p {
    margin: 0 0 15px 0;
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 600;
}

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

a:hover {
    color: var(--sec-color);
}

ul,
ol {
    margin-left: 0;
    list-style: none;
}


/* -------- -TABULKA ---------------- */

table {
    margin: 15px 0;
    border-collapse: collapse;
}

table tr th {
    background: var(--dark-2-color);
    padding: 10px 15px;
    border: 1px solid #dfdfdf;
    color: white;
}

table tr th * {
    color: #ffffff;
}

table tr td {
    padding: 10px 15px;
    border: 1px solid #dfdfdf;
}


/*---------------------------- -SPOLECNE CLASSY -------------------------------*/

.page_size,
.stranka_subakce {
    width: 90%;
    max-width: var(--page-size);
    margin: 0 auto;
}

.no_active {
    display: none !important;
}

.body_noscroll {
    overflow: hidden;
}

.nadtitulek {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--purple-color);
    margin-bottom: 16px;
}

a.btn {
    display: inline-block;
    padding: 12px 22px;
    background: var(--main-color);
    color: white;
    font-weight: 600;
    font-size: 16px;
    line-height: 130%;
    border-radius: 999px;
    text-decoration: none;
}

a.btn:hover {
    background: var(--main-dark);
    color: white;
}

a.btn.velky {
    padding: 17px 34px;
    font-size: 17px;
    font-weight: 700;
    background: linear-gradient(100deg, var(--main-color), var(--main-dark));
    box-shadow: var(--box-shadow);
}

a.btn.velky:hover {
    box-shadow: var(--box-shadow-hov);
    transform: translate(0, -2px);
}

a.more {
    font-size: 16px;
    font-weight: 500;
    color: var(--main-color);
    text-decoration: none;
    white-space: nowrap;
}

a.more:hover {
    color: var(--sec-color);
}

.nadpis_sekce {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 44px;
}

.nadpis_sekce h2 {
    margin: 0;
}

.nadpis_sekce .popis_sekce {
    max-width: 400px;
    text-align: right;
}


/*  -ANIMACE */

.load {
    opacity: 1;
    animation-name: showUp;
    animation-duration: 550ms;
    animation-delay: 250ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

@keyframes showUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/*---------------------------- -HLAVICKA --------------------------------------*/

header {
    position: relative;
    height: var(--top-bar);
}

header .top_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    background: var(--transp-color);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid rgba(27, 21, 71, 0.06);
}

header .top_bar.odscrolovano {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 24px rgba(27, 21, 71, 0.08);
}

header .top_bar .obsah {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--top-bar);
}

header .top_bar a.logo {
    display: flex;
    align-items: center;
    margin: 0;
    height: 52px;
}

header .top_bar a.logo img {
    width: auto;
    height: 52px;
}

header nav.hlavni ul {
    display: flex;
    align-items: center;
    gap: 34px;
}

header nav.hlavni ul li.karta {
    margin: 0;
}

header nav.hlavni ul li.karta a {
    font-size: 16px;
    font-weight: 500;
    color: var(--dark-2-color);
    text-decoration: none;
}

header nav.hlavni ul li.karta a:hover {
    color: var(--main-color);
}

header nav.hlavni ul li.karta.zajem a {
    color: white;
}

header nav.hlavni ul li.karta.prihlaseni a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
}

header nav.hlavni ul li.karta.prihlaseni a:hover {
    color: var(--main-color);
}

/* prihlaseny uzivatel - odkaz do administrace se jmenem */

header nav.hlavni ul li.karta.prihlaseni.je_prihlaseny a {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(41, 171, 226, 0.35);
    background: rgba(41, 171, 226, 0.08);
    color: var(--main-dark);
}

header nav.hlavni ul li.karta.prihlaseni.je_prihlaseny a:hover {
    border-color: var(--main-color);
    background: rgba(41, 171, 226, 0.16);
}

header nav.hlavni ul li.karta.prihlaseni .jmeno {
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid rgba(41, 171, 226, 0.35);
    font-size: 15px;
    font-weight: 400;
    color: var(--text-muted);
}

header nav.hlavni ul li.karta.prihlaseni svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

header nav.hlavni ul li.karta.prihlaseni span {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

header .mobile_menu {
    display: none;
    position: relative;
    width: 34px;
    height: 26px;
    margin: 0;
    cursor: pointer;
}

header .mobile_menu span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--dark-color);
}

header .mobile_menu span.top {
    top: 0;
}

header .mobile_menu span.mid {
    top: 50%;
    margin-top: -1.5px;
}

header .mobile_menu span.bot {
    bottom: 0;
}

header .mobile_menu.close span.top {
    top: 50%;
    margin-top: -1.5px;
    transform: rotate(45deg);
}

header .mobile_menu.close span.mid {
    opacity: 0;
}

header .mobile_menu.close span.bot {
    bottom: 50%;
    margin-bottom: -1.5px;
    transform: rotate(-45deg);
}


/*---------------------------- -TITULKA - HERO --------------------------------*/

.titulka section {
    position: relative;
}

section.hero {
    position: relative;
    display: flex;
    align-items: center;
    width: 90%;
    max-width: var(--page-size);
    margin: 0 auto;
    min-height: 850px;
    padding: 94px 0 110px;
}

/* drak presahuje sekci nahoru i dolu, aby zustal stejne velky
   i po snizeni hero sekce - dolni presah zakryje tmavy panel pod nim */

section.hero figure.drak {
    position: absolute;
    top: -200px;
    right: -2%;
    bottom: -280px;
    left: 30%;
    margin: 0;
    z-index: 1;
    pointer-events: none;
}

section.hero figure.drak img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}


/* svetly podklad pod textem, aby zustal citelny pres draka */

section.hero .info::before {
    position: absolute;
    display: block;
    content: "";
    top: -140px;
    right: -260px;
    bottom: -140px;
    left: -320px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 46% 48% at 42% 50%, rgba(238, 243, 250, 0.97) 0%, rgba(238, 243, 250, 0.9) 55%, rgba(238, 243, 250, 0) 100%);
}

section.hero .info {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 600px;
    margin: 0;
}

/* barevna cast nadpisu - v textu se vyznaci hvezdickami */

section.hero h1 .zvyrazneni {
    display: inline;
    font: inherit;
    background: linear-gradient(100deg, var(--main-dark) 0%, var(--sec-color) 100%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

section.hero .info .text {
    max-width: 520px;
    margin: 0 0 36px 0;
    font-size: 19px;
    line-height: 160%;
}

section.hero .info .text * {
    font-size: inherit;
    line-height: inherit;
}


/*---------------------------- -TITULKA - TMAVY PANEL -------------------------*/

.tmavy_panel {
    position: relative;
    z-index: 2;
    margin-bottom: 96px;
    padding: 56px 56px 60px;
    border-radius: 26px;
    background: linear-gradient(150deg, #3A2A78 0%, var(--dark-2-color) 45%, #4A2570 100%);
    box-shadow: 0 30px 70px rgba(36, 30, 86, 0.35);
}

.tmavy_panel h2,
.tmavy_panel h3 {
    color: white;
}

.tmavy_panel .nadtitulek {
    color: var(--light-pink);
}

.tmavy_panel .popis_sekce {
    color: var(--dark-text-3);
}


/* -SLUZBY */

section.sluzby .vypis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

section.sluzby article.sluzba {
    padding: 26px;
    border-radius: 16px;
    background: var(--bila-plocha);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

section.sluzby article.sluzba:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

section.sluzby article.sluzba figure.ikona {
    width: 34px;
    height: 34px;
    margin: 0 0 18px;
}

section.sluzby article.sluzba figure.ikona svg,
section.sluzby article.sluzba figure.ikona img {
    display: block;
    width: 34px;
    height: 34px;
    fill: none;
}

section.sluzby article.sluzba figure.ikona.modra svg,
section.sluzby article.sluzba figure.ikona.modra svg * {
    stroke: var(--light-blue);
}

section.sluzby article.sluzba figure.ikona.modra svg [fill] {
    fill: var(--light-blue);
}

section.sluzby article.sluzba figure.ikona.ruzova svg,
section.sluzby article.sluzba figure.ikona.ruzova svg * {
    stroke: var(--light-pink);
}

section.sluzby article.sluzba figure.ikona.ruzova svg [fill] {
    fill: var(--light-pink);
}

section.sluzby article.sluzba h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

section.sluzby article.sluzba .text,
section.sluzby article.sluzba .text * {
    font-size: 15px;
    line-height: 155%;
    color: var(--dark-text-2);
}


/* -JONDU CMS */

section.cms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-top: 64px;
    padding-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

section.cms .info {
    margin: 0;
}

section.cms .info h2 {
    font-size: 46px;
    margin-bottom: 20px;
}

section.cms .info .text {
    margin-bottom: 30px;
}

section.cms .info .text,
section.cms .info .text * {
    font-size: 18px;
    line-height: 160%;
    color: var(--dark-text);
}

section.cms .info ul.body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

section.cms .info ul.body li {
    padding-left: 18px;
    font-size: 17px;
    line-height: 150%;
    color: white;
    border-left: 2px solid var(--light-blue);
}

section.cms .info ul.body li.ruzova {
    border-left-color: var(--sec-color);
}


/* -ANIMOVANA UKAZKA ADMINU */

.cms_ukazka {
    position: relative;
    margin: 0;
    padding: 20px;
    border-radius: 20px;
    background: rgba(10, 7, 30, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.cms_ukazka .zalozky {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cms_ukazka .zalozky img {
    width: auto;
    height: 26px;
    margin-right: auto;
}

.cms_ukazka .zalozky span {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 130%;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--bila-plocha);
    color: var(--dark-text-2);
    animation: zalozka 12s ease-in-out infinite both;
}

.cms_ukazka .zalozky span.z2 {
    animation-delay: 3s;
}

.cms_ukazka .zalozky span.z3 {
    animation-delay: 6s;
}

.cms_ukazka .zalozky span.z4 {
    animation-delay: 9s;
}

.cms_ukazka .nahledy {
    position: relative;
    height: 302px;
}

.cms_ukazka .nahled {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: nahled 12s ease-in-out infinite both;
}

.cms_ukazka .nahled.eshop {
    animation-delay: 3s;
}

.cms_ukazka .nahled.galerie {
    animation-delay: 6s;
}

.cms_ukazka .nahled.dochazka {
    animation-delay: 9s;
}

.cms_ukazka .nahled>*,
.cms_ukazka .nahled .karta,
.cms_ukazka .nahled .dlazdice {
    animation: prvek 12s ease-in-out infinite both;
}

.cms_ukazka .lista {
    display: block;
    height: 12px;
    width: 75%;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
}

.cms_ukazka .lista.uzka {
    height: 7px;
    width: 100%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
}

.cms_ukazka .lista.kratka {
    width: 80%;
}


/* nahled - web */

.cms_ukazka .nahled.web {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cms_ukazka .nahled.web .banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: 96px;
    padding: 0 18px;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(95, 208, 255, 0.28), rgba(199, 36, 177, 0.22));
}

.cms_ukazka .nahled.web .banner .lista {
    width: 45%;
    background: rgba(255, 255, 255, 0.75);
}

.cms_ukazka .nahled.web .banner .lista.uzka {
    width: 30%;
    background: rgba(255, 255, 255, 0.4);
}

.cms_ukazka .nahled.web .dvojice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cms_ukazka .nahled.web .dvojice .karta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 104px;
    padding: 14px;
    border-radius: 12px;
    background: var(--bila-plocha);
    border: 1px solid rgba(255, 255, 255, 0.14);
    animation-delay: 0.25s;
}

.cms_ukazka .nahled.web .dvojice .karta .lista {
    height: 9px;
    width: 60%;
    border-radius: 5px;
}

.cms_ukazka .nahled.web .dvojice .karta.ruzova {
    background: rgba(199, 36, 177, 0.14);
    border-color: rgba(199, 36, 177, 0.32);
    animation-delay: 0.5s;
}

.cms_ukazka .nahled.web .dvojice .karta.ruzova .lista {
    width: 50%;
    background: rgba(255, 255, 255, 0.55);
}

.cms_ukazka .nahled.web .dvojice .karta .plocha {
    display: block;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
}

.cms_ukazka .nahled.web .trojice {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cms_ukazka .nahled.web .trojice .karta {
    height: 66px;
    border-radius: 12px;
    background: var(--bila-plocha);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.cms_ukazka .nahled.web .trojice .karta:nth-child(1) {
    animation-delay: 0.75s;
}

.cms_ukazka .nahled.web .trojice .karta:nth-child(2) {
    animation-delay: 0.95s;
}

.cms_ukazka .nahled.web .trojice .karta:nth-child(3) {
    animation-delay: 1.15s;
}


/* nahled - e-shop */

.cms_ukazka .nahled.eshop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

.cms_ukazka .nahled.eshop .karta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: var(--bila-plocha);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.cms_ukazka .nahled.eshop .karta .foto {
    display: block;
    flex: 1;
    border-radius: 8px;
    background: linear-gradient(140deg, rgba(95, 208, 255, 0.35), rgba(255, 255, 255, 0.08));
}

.cms_ukazka .nahled.eshop .karta .lista.uzka {
    width: 70%;
    background: rgba(255, 255, 255, 0.4);
}

.cms_ukazka .nahled.eshop .karta .cenovka {
    display: block;
    width: 52px;
    height: 14px;
    border-radius: 999px;
    background: rgba(95, 208, 255, 0.3);
}

.cms_ukazka .nahled.eshop .karta:nth-child(2n) .foto {
    background: linear-gradient(140deg, rgba(199, 36, 177, 0.35), rgba(255, 255, 255, 0.08));
}

.cms_ukazka .nahled.eshop .karta:nth-child(2n) .cenovka {
    background: rgba(199, 36, 177, 0.32);
}

.cms_ukazka .nahled.eshop .karta:nth-child(4n) .foto {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(95, 208, 255, 0.22));
}

.cms_ukazka .nahled.eshop .karta:nth-child(4n) .cenovka {
    background: rgba(255, 255, 255, 0.22);
}

.cms_ukazka .nahled.eshop .karta:nth-child(1) {
    animation-delay: 3s;
}

.cms_ukazka .nahled.eshop .karta:nth-child(2) {
    animation-delay: 3.15s;
}

.cms_ukazka .nahled.eshop .karta:nth-child(3) {
    animation-delay: 3.3s;
}

.cms_ukazka .nahled.eshop .karta:nth-child(4) {
    animation-delay: 3.45s;
}

.cms_ukazka .nahled.eshop .karta:nth-child(5) {
    animation-delay: 3.6s;
}

.cms_ukazka .nahled.eshop .karta:nth-child(6) {
    animation-delay: 3.75s;
}

.cms_ukazka .nahled.eshop .karta:nth-child(7) {
    animation-delay: 3.9s;
}

.cms_ukazka .nahled.eshop .karta:nth-child(8) {
    animation-delay: 4.05s;
}


/* nahled - galerie */

.cms_ukazka .nahled.galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 10px;
}

.cms_ukazka .nahled.galerie .dlazdice {
    display: block;
    border-radius: 10px;
    background: linear-gradient(140deg, rgba(95, 208, 255, 0.34), rgba(255, 255, 255, 0.1));
}

.cms_ukazka .nahled.galerie .dlazdice.d1 {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
    background: linear-gradient(140deg, rgba(95, 208, 255, 0.4), rgba(199, 36, 177, 0.22));
    animation-delay: 6s;
}

.cms_ukazka .nahled.galerie .dlazdice.d2 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.22), rgba(95, 208, 255, 0.2));
    animation-delay: 6.15s;
}

.cms_ukazka .nahled.galerie .dlazdice.d3 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    background: linear-gradient(140deg, rgba(199, 36, 177, 0.34), rgba(255, 255, 255, 0.1));
    animation-delay: 6.3s;
}

.cms_ukazka .nahled.galerie .dlazdice.d4 {
    grid-column: 4 / 5;
    grid-row: 2 / 4;
    background: linear-gradient(140deg, rgba(95, 208, 255, 0.3), rgba(255, 255, 255, 0.08));
    animation-delay: 6.45s;
}

.cms_ukazka .nahled.galerie .dlazdice.d5 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(199, 36, 177, 0.24));
    animation-delay: 6.6s;
}

.cms_ukazka .nahled.galerie .dlazdice.d6 {
    grid-column: 1 / 2;
    grid-row: 4 / 7;
    background: linear-gradient(140deg, rgba(199, 36, 177, 0.3), rgba(255, 255, 255, 0.08));
    animation-delay: 6.75s;
}

.cms_ukazka .nahled.galerie .dlazdice.d7 {
    grid-column: 2 / 4;
    grid-row: 4 / 6;
    animation-delay: 6.9s;
}

.cms_ukazka .nahled.galerie .dlazdice.d8 {
    grid-column: 4 / 5;
    grid-row: 4 / 7;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(95, 208, 255, 0.24));
    animation-delay: 7.05s;
}

.cms_ukazka .nahled.galerie .dlazdice.d9 {
    grid-column: 2 / 4;
    grid-row: 6 / 7;
    background: linear-gradient(140deg, rgba(199, 36, 177, 0.26), rgba(95, 208, 255, 0.22));
    animation-delay: 7.2s;
}


/* nahled - dochazka */

.cms_ukazka .nahled.dochazka {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cms_ukazka .nahled.dochazka .radek {
    display: grid;
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: 10px;
    align-items: center;
    animation: prvek 12s ease-in-out infinite both;
}

.cms_ukazka .nahled.dochazka .radek.hlavicka {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.cms_ukazka .nahled.dochazka .radek .jmeno {
    display: block;
    height: 10px;
    width: 75%;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.35);
}

.cms_ukazka .nahled.dochazka .radek.hlavicka .jmeno {
    height: 8px;
    width: 60%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.45);
}

.cms_ukazka .nahled.dochazka .radek .den {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
}

.cms_ukazka .nahled.dochazka .radek .smena {
    display: block;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.1);
}

.cms_ukazka .nahled.dochazka .radek .smena.s1 {
    background: rgba(95, 208, 255, 0.3);
}

.cms_ukazka .nahled.dochazka .radek .smena.s2 {
    background: rgba(199, 36, 177, 0.32);
}

.cms_ukazka .nahled.dochazka .radek:nth-child(1) {
    animation-delay: 9s;
}

.cms_ukazka .nahled.dochazka .radek:nth-child(2) {
    animation-delay: 9.2s;
}

.cms_ukazka .nahled.dochazka .radek:nth-child(3) {
    animation-delay: 9.4s;
}

.cms_ukazka .nahled.dochazka .radek:nth-child(4) {
    animation-delay: 9.6s;
}

.cms_ukazka .nahled.dochazka .radek:nth-child(5) {
    animation-delay: 9.8s;
}

.cms_ukazka .nahled.dochazka .radek:nth-child(6) {
    animation-delay: 10s;
}

@keyframes zalozka {
    0% {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.18);
        color: #C4C0E6;
    }
    0.5%,
    16% {
        background: rgba(95, 208, 255, 0.22);
        border-color: rgba(95, 208, 255, 0.55);
        color: #ffffff;
    }
    24%,
    100% {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.18);
        color: #C4C0E6;
    }
}

@keyframes nahled {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    0.5%,
    23% {
        opacity: 1;
        visibility: visible;
    }
    26%,
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes prvek {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    5%,
    21% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    25%,
    100% {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
}


/*---------------------------- -TITULKA - REFERENCE ---------------------------*/

section.reference,
section.aktuality,
section.o_nas {
    width: 90%;
    max-width: var(--page-size);
    margin: 0 auto;
    padding-bottom: 96px;
}

.nadpis_sekce .nadpisy {
    margin: 0;
}

.nadpis_sekce .odkazy {
    margin: 0;
}

/* karusel - posouva se nativnim scrollem, sipky jsou jen doplnek */

section.reference .vypis.karusel {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* svisly prostor pro nadzvednuti karty pri hoveru - overflow-x jinak orizne */
    padding: 6px 2px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

section.reference .vypis.karusel::-webkit-scrollbar {
    display: none;
}

section.reference .vypis.karusel > article.reference_karta {
    flex: 0 0 calc((100% - 64px) / 3);
    scroll-snap-align: start;
}

.karusel_sipky {
    display: flex;
    gap: 8px;
}

.karusel_sipky button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(27, 21, 71, 0.16);
    border-radius: 999px;
    background: transparent;
    color: var(--dark-color);
    cursor: pointer;
}

.karusel_sipky button:hover {
    border-color: var(--main-color);
    color: var(--main-dark);
}

.karusel_sipky button.neaktivni {
    opacity: .3;
    pointer-events: none;
}

section.reference .nadpis_sekce .odkazy {
    display: flex;
    align-items: center;
    gap: 24px;
}

section.reference article.reference_karta {
    display: flex;
    flex-direction: column;
}

section.reference figure.obrazek {
    position: relative;
    height: 230px;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #EDF1F8;
}

section.reference figure.obrazek a {
    display: block;
    width: 100%;
    height: 100%;
}

section.reference figure.obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

section.reference figure.obrazek .bez_obrazku {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, #E7F4FC, #EFEBF8);
}

section.reference figure.obrazek .bez_obrazku img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    opacity: 0.5;
}

section.reference figure.obrazek:hover img {
    transform: scale(1.03);
}

/* stitek je pod fotkou u nazvu, at nerusi samotny screenshot */

.stitek {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sec-color);
}

.stitek.b2 {
    color: var(--purple-color);
}

.stitek.b3 {
    color: var(--main-dark);
}

section.reference .info {
    margin: 20px 0 0;
}

section.reference .info .stitek {
    margin-bottom: 8px;
}

section.reference .info h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

section.reference .info .text,
section.reference .info .text * {
    font-size: 15px;
    line-height: 160%;
    color: var(--text-light);
}

section.reference .info .text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/*---------------------------- -TITULKA - AKTUALITY ---------------------------*/

section.aktuality .nadpis_sekce {
    margin-bottom: 36px;
}

section.aktuality .vypis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

section.aktuality article.aktualita {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(27, 21, 71, 0.12);
    border-radius: 20px;
    overflow: hidden;
}

section.aktuality article.aktualita:hover {
    border-color: rgba(41, 171, 226, 0.4);
    box-shadow: 0 14px 34px rgba(27, 21, 71, 0.08);
}

section.aktuality .hlavicka_karty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 24px;
    background: #E7F4FC;
}

section.aktuality .hlavicka_karty .stitek {
    position: static;
    padding: 0;
    background: none;
    color: var(--main-dark);
    font-size: 12px;
}

section.aktuality .hlavicka_karty .datum {
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
}

section.aktuality article.aktualita.b2 .hlavicka_karty {
    background: #FBEAF7;
}

section.aktuality article.aktualita.b2 .hlavicka_karty .stitek {
    color: var(--sec-color);
}

section.aktuality article.aktualita.b3 .hlavicka_karty {
    background: #EFEBF8;
}

section.aktuality article.aktualita.b3 .hlavicka_karty .stitek {
    color: var(--purple-color);
}

section.aktuality article.aktualita .info {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
    padding: 26px 24px 28px;
}

section.aktuality article.aktualita .info h3 {
    font-size: 23px;
    line-height: 125%;
    margin-bottom: 12px;
}

section.aktuality article.aktualita .info .text {
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

section.aktuality article.aktualita .info .text,
section.aktuality article.aktualita .info .text * {
    font-size: 15px;
    line-height: 160%;
    color: var(--text-light);
}

section.aktuality article.aktualita .info a.more {
    margin-top: auto;
    margin-right: auto;
    margin-left: 0;
    font-size: 15px;
    color: var(--main-dark);
}

section.aktuality article.aktualita.b2 .info a.more {
    color: var(--sec-color);
}

section.aktuality article.aktualita.b3 .info a.more {
    color: var(--purple-color);
}


/*---------------------------- -TITULKA - O NAS -------------------------------*/

section.o_nas {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    padding-bottom: 110px;
}

section.o_nas .info {
    margin: 0;
}

section.o_nas .info h2 {
    margin-bottom: 20px;
}

section.o_nas .info .text,
section.o_nas .info .text * {
    font-size: 18px;
    line-height: 165%;
}

section.o_nas figure.obrazek {
    position: relative;
    height: 400px;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
}

section.o_nas figure.obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.o_nas figure.obrazek .bez_obrazku {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, #E7F4FC, #EFEBF8);
}

section.o_nas figure.obrazek .bez_obrazku img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    opacity: 0.5;
}


/*---------------------------- -PATICKA --------------------------------------*/

footer {
    position: relative;
    display: block;
    padding: 96px 0 40px;
    background: var(--dark-color);
    overflow: hidden;
}

footer figure.drak_paticka {
    position: absolute;
    right: -140px;
    bottom: -160px;
    width: 680px;
    height: 730px;
    margin: 0;
    opacity: 0.12;
    pointer-events: none;
}

footer figure.drak_paticka img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
}

footer .obsah {
    position: relative;
    z-index: 2;
}

footer h2,
footer h3,
footer h4 {
    color: white;
}

footer h4 {
    margin-bottom: 18px;
    color: var(--light-pink);
}

footer p,
footer span,
footer li {
    font-size: 15px;
    line-height: 170%;
    color: var(--dark-text);
}

footer a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

footer a:hover {
    color: var(--light-blue);
    border-bottom-color: var(--light-blue);
}


/* -VYZVA */

footer section.vyzva {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: end;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--bila-linka);
}

footer section.vyzva .info {
    margin: 0;
}

footer section.vyzva h2 {
    max-width: 520px;
    font-size: 44px;
    line-height: 110%;
    margin: 0 0 18px;
}

footer section.vyzva p,
footer section.vyzva .text,
footer section.vyzva .text * {
    max-width: 470px;
    font-size: 17px;
    line-height: 160%;
    color: var(--dark-text-3);
}

footer section.vyzva .text a {
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

footer section.vyzva .cisla {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 44px;
    margin: 0;
}

footer section.vyzva .cisla .cislo {
    margin: 0;
}

footer section.vyzva .cisla .cislo.hlavni {
    width: 100%;
}

footer section.vyzva .cisla .cislo .hodnota {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 100%;
    color: white;
}

footer section.vyzva .cisla .cislo.hlavni .hodnota {
    font-size: 52px;
}

footer section.vyzva .cisla .cislo.modra .hodnota {
    color: var(--light-blue);
}

footer section.vyzva .cisla .cislo.ruzova .hodnota {
    color: var(--light-pink);
}

footer section.vyzva .cisla .cislo .popis {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 140%;
    color: var(--dark-text-muted);
}

footer section.vyzva .cisla .cislo.hlavni .popis {
    margin-top: 6px;
    font-size: 15px;
    color: var(--dark-text-3);
}


/* -BLOKY ODKAZU */

footer .bloky {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 56px 0;
}

footer .bloky .blok {
    margin: 0;
}

footer .bloky .blok p {
    max-width: 280px;
    color: var(--dark-text-muted);
}

footer .bloky .blok.logo a {
    display: block;
    margin: 0 0 18px;
    border: 0;
}

footer .bloky .blok.logo img {
    display: block;
    width: auto;
    height: 34px;
    margin: 0;
}

footer .bloky .blok ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

footer .bloky .blok ul li {
    margin: 0;
}

footer .bloky .blok ul li a {
    display: inline-block;
}

footer .bloky .blok.kontakt ul li span {
    color: var(--dark-text-muted);
}

footer .bloky .blok.jondu_cms h4 {
    color: var(--light-blue);
}


/* -COPYRIGHT */

footer .jondu_copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--bila-linka);
}

footer .jondu_copyright span,
footer .jondu_copyright a {
    font-size: 14px;
    color: var(--dark-text-muted);
}

footer .jondu_copyright .odkazy {
    display: flex;
    gap: 28px;
    margin: 0;
}

footer .jondu_copyright a {
    border: 0;
}

footer .jondu_copyright a:hover {
    color: white;
}




/*---------------------------- -PODSTRANKY -----------------------------------*/

main.main_subakce {
    padding: 50px 0 110px;
}

.main_obsah.aside_cont {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.main_obsah.aside_cont #leve_menu_cont {
    flex: 0 0 270px;
}

.main_obsah.aside_cont>article.right_side {
    flex: 1 1 0;
    min-width: 0;
}




/* -LEVE MENU */

#leve_menu_cont h3.nadpis {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--purple-color);
}

#leve_menu_cont ul.navigace ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#leve_menu_cont ul.navigace ul.subkategorie {
    padding-left: 16px;
}

#leve_menu_cont ul.navigace li a {
    display: block;
    padding: 8px 14px;
    font-size: 15px;
    border-radius: 10px;
    color: var(--text-color);
    text-decoration: none;
}

#leve_menu_cont ul.navigace li a:hover {
    background: #E7F4FC;
    color: var(--main-dark);
}

#leve_menu_cont ul.navigace li.aktivni>a {
    background: #E7F4FC;
    color: var(--main-dark);
    font-weight: 500;
}


/* -DROBECKOVA NAVIGACE */

.drobeckova_navigace {
    margin-bottom: 26px;
}

.drobeckova_navigace ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.drobeckova_navigace * {
    font-size: 14px;
    color: var(--text-muted);
}

.drobeckova_navigace a:hover {
    color: var(--main-color);
}

.drobeckova_navigace li.separator {
    opacity: .5;
}

.drobeckova_navigace li.aktualni {
    color: var(--text-color);
}


/* -CLANEK */



article.right_side .nadpis_clanku {
    display: block;
    margin-bottom: 28px;
}

article.right_side .nadpis_clanku h1,
article.right_side .nadpis_clanku h2 {
    font-size: 42px;
    margin-bottom: 0;
}

article.right_side .popis_clanku {
    margin-top: 16px;
    font-size: 19px;
    line-height: 160%;
}

article.right_side .popis_clanku * {
    font-size: inherit;
    line-height: inherit;
}

article.right_side section.clanek {
    margin-bottom: 40px;
}

article.right_side section.clanek ul,
article.right_side section.clanek ol {
    margin: 0 0 15px 20px;
    list-style: initial;
}

article.right_side section.clanek img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

article.right_side figure.primarni_obrazek {
    margin: 0 0 30px;
    border-radius: var(--bor-radius);
    overflow: hidden;
}

article.right_side figure.primarni_obrazek img {
    display: block;
    width: 100%;
    height: auto;
}

article.right_side section.fotogalerie h3.nadpis_fotogalerie {
    margin-bottom: 14px;
    font-size: 19px;
}

article.right_side section.fotogalerie .vypis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

article.right_side section.fotogalerie figure.obrazek {
    border-radius: 12px;
    overflow: hidden;
}

article.right_side section.fotogalerie figure.obrazek img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}


/* -VYPIS CLANKU V RUBRICE */

article.right_side section.vypis_clanku_sekce {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 6px;
}

article.right_side section.vypis_clanku_sekce > article.clanek {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid rgba(27, 21, 71, 0.12);
    border-radius: 20px;
    overflow: hidden;
}

article.right_side section.vypis_clanku_sekce > article.clanek:hover {
    border-color: rgba(41, 171, 226, 0.4);
    box-shadow: 0 14px 34px rgba(27, 21, 71, 0.08);
    transform: translate(0, -2px);
}

/* clanek bez titulniho obrazku dostane misto fotky barevny prouzek,
   at je mrizka vyrovnana (obrazek odstranuje jondu.js) */

article.right_side section.vypis_clanku_sekce > article.clanek.bez_obrazku::before {
    display: block;
    content: "";
    height: 5px;
    background: linear-gradient(100deg, var(--main-dark), var(--sec-color));
}

article.right_side section.vypis_clanku_sekce figure.obrazek {
    aspect-ratio: 16 / 9;
    margin: 0;
    background: #EDF1F8;
    overflow: hidden;
}

article.right_side section.vypis_clanku_sekce figure.obrazek a {
    display: block;
    width: 100%;
    height: 100%;
}

article.right_side section.vypis_clanku_sekce figure.obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

article.right_side section.vypis_clanku_sekce .info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 24px;
}

article.right_side section.vypis_clanku_sekce .info .datum {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

article.right_side section.vypis_clanku_sekce .info h3 {
    font-size: 21px;
    margin: 0 0 10px;
}

article.right_side section.vypis_clanku_sekce .info p,
article.right_side section.vypis_clanku_sekce .info p * {
    font-size: 15px;
    line-height: 160%;
    color: var(--text-light);
}

article.right_side section.vypis_clanku_sekce .info > p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* -DETAIL CLANKU - text vlevo, titulni obrazek vedle nej */

article.right_side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 44px;
    align-items: start;
}

/* dva sloupce jen kdyz je vedle textu co ukazat; bez :has se to
   zobrazi jednosloupcove pod sebou, coz taky vypada dobre */
article.right_side:has(> .right_side figure.primarni_obrazek) {
    grid-template-columns: minmax(0, 1fr) 340px;
}

article.right_side > .drobeckova_navigace,
article.right_side > .nadpis_clanku,
article.right_side > section.vypis_clanku_sekce,
article.right_side > .nenalezeno {
    grid-column: 1 / -1;
}

article.right_side > .left_side {
    grid-column: 1;
    min-width: 0;
}

article.right_side > .right_side {
    grid-column: -2;
    min-width: 0;
}


/* -404 */

article.right_side .nenalezeno h1 {
    font-size: 42px;
    margin-bottom: 20px;
}

article.right_side .nenalezeno .odkazy {
    margin-top: 30px;
}


/*---------------------------- -RESPONSIVE -----------------------------------*/

@media screen and (max-width: 1400px) {
    h1 {
        font-size: 50px;
    }
    h2 {
        font-size: 34px;
    }
    section.cms .info h2 {
        font-size: 38px;
    }
    footer section.vyzva h2 {
        font-size: 38px;
    }
    .tmavy_panel {
        padding: 44px 40px 48px;
    }
}

@media screen and (max-width: 1100px) {
    /* v hlavicce je sedm polozek, tak se zmensi logo i mezery, at se vejdou */
    header .top_bar a.logo,
    header .top_bar a.logo img {
        height: 44px;
    }
    header nav.hlavni ul {
        gap: 18px;
    }
    header nav.hlavni ul li.karta a {
        font-size: 15px;
    }
    section.hero {
        min-height: 660px;
    }
    section.hero figure.drak {
        top: -70px;
        right: -8%;
        bottom: -110px;
        left: 16%;
    }
    /* uzsi okno - vejde se cely obrazek, drak tak nelezl do nadpisu */
    section.hero figure.drak img {
        object-fit: contain;
    }
    section.sluzby .vypis {
        grid-template-columns: repeat(2, 1fr);
    }
    section.cms {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    section.aktuality .vypis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    section.reference .vypis.karusel > article.reference_karta {
        flex-basis: calc((100% - 32px) / 2);
    }
    section.o_nas {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    footer .bloky {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media screen and (max-width: 960px) {
    :root {
        --top-bar: 74px;
    }
    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 29px;
    }
    header .top_bar a.logo,
    header .top_bar a.logo img {
        height: 40px;
    }
    header .mobile_menu {
        display: block;
    }
    header nav.hlavni {
        display: none;
        position: fixed;
        top: var(--top-bar);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--top-bar));
        overflow-y: auto;
        padding: 24px 5%;
        background: white;
        box-shadow: 0 10px 30px rgba(27, 21, 71, 0.12);
    }
    header nav.hlavni.active {
        display: block;
    }
    header nav.hlavni ul {
        display: block;
    }
    header nav.hlavni ul li.karta {
        border-bottom: 1px solid rgba(27, 21, 71, 0.08);
    }
    header nav.hlavni ul li.karta a {
        display: block;
        padding: 14px 0;
        font-size: 18px;
    }
    header nav.hlavni ul li.karta.prihlaseni a {
        padding: 14px 0;
        font-size: 18px;
    }
    header nav.hlavni ul li.karta.prihlaseni svg {
        width: 19px;
        height: 19px;
    }
    header nav.hlavni ul li.karta.zajem {
        border: 0;
        margin-top: 18px;
    }
    header nav.hlavni ul li.karta.zajem a {
        display: inline-block;
        padding: 12px 26px;
    }
    section.hero {
        display: block;
        min-height: 0;
        padding: 40px 0 60px;
    }
    section.hero figure.drak {
        position: relative;
        top: 0;
        right: auto;
        bottom: 0;
        left: auto;
        height: 380px;
        margin-bottom: 24px;
        opacity: 1;
    }
    section.hero figure.drak img {
        object-fit: contain;
        object-position: center;
    }
    section.hero .info::before {
        display: none;
    }
    section.hero .info {
        max-width: none;
    }
    section.hero .info .text {
        font-size: 17px;
    }
    .tmavy_panel {
        margin-bottom: 70px;
        padding: 36px 26px 40px;
        border-radius: 20px;
    }
    .nadpis_sekce {
        display: block;
        margin-bottom: 30px;
    }
    .nadpis_sekce .popis_sekce {
        max-width: none;
        margin-top: 14px;
        text-align: left;
    }
    .nadpis_sekce .odkazy {
        margin-top: 14px;
    }
    section.cms {
        margin-top: 44px;
        padding-top: 40px;
    }
    section.cms .info h2 {
        font-size: 32px;
    }
    section.cms .info .text,
    section.cms .info .text * {
        font-size: 16px;
    }
    section.reference,
    section.aktuality,
    section.o_nas {
        padding-bottom: 70px;
    }
    section.o_nas .info .text,
    section.o_nas .info .text * {
        font-size: 16px;
    }
    section.o_nas figure.obrazek {
        height: 280px;
    }
    footer {
        padding: 70px 0 30px;
    }
    footer section.vyzva {
        display: block;
    }
    footer section.vyzva h2 {
        font-size: 30px;
    }
    footer section.vyzva .cisla {
        margin-top: 36px;
    }
    footer .bloky {
        padding: 40px 0;
    }
    main.main_subakce {
        padding: 30px 0 70px;
    }
    .main_obsah.aside_cont {
        display: block;
    }
    #tematicka_navigace #leve_menu_cont {
        margin-bottom: 20px;
    }
    /* detail clanku na uzsim okne pod sebe, bocni sloupec uz se nevejde */
    article.right_side:has(> .right_side figure.primarni_obrazek) {
        grid-template-columns: minmax(0, 1fr);
    }
    article.right_side > .right_side {
        grid-column: 1;
        margin-top: 30px;
    }
}

@media screen and (max-width: 700px) {
    h1 {
        font-size: 32px;
    }
    h2 {
        font-size: 25px;
    }
    section.sluzby .vypis {
        grid-template-columns: 1fr;
    }
    section.aktuality .vypis {
        grid-template-columns: 1fr;
    }
    section.reference .vypis.karusel {
        gap: 18px;
    }
    /* kousek dalsi karty koukajici zprava napovi, ze se da listovat */
    section.reference .vypis.karusel > article.reference_karta {
        flex-basis: 86%;
    }
    section.reference .nadpis_sekce .odkazy {
        gap: 16px;
    }
    .cms_ukazka {
        padding: 14px;
    }
    .cms_ukazka .zalozky {
        flex-wrap: wrap;
    }
    .cms_ukazka .zalozky img {
        width: 100%;
        margin-bottom: 8px;
    }
    .cms_ukazka .nahledy {
        height: 240px;
    }
    .cms_ukazka .nahled.eshop {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .cms_ukazka .nahled.eshop .karta:nth-child(n+5) {
        display: none;
    }
    footer .bloky {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    footer .jondu_copyright {
        display: block;
        text-align: center;
    }
    footer .jondu_copyright .odkazy {
        justify-content: center;
        margin-top: 12px;
    }
    article.right_side section.fotogalerie .vypis {
        grid-template-columns: repeat(2, 1fr);
    }
    article.right_side section.vypis_clanku_sekce {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}