/*========= obecně písma a prvotní vzhled ==============================================*/

html { font-size: 15px; background: #fff; }
body { font-family: 'Arial', sans-serif; color:#4e4e4e; background: url(/img/bg.jpg) no-repeat center top #2e560f; }
input,select,textarea,button { font-family: 'Arial',sans-serif; font-size: 1rem; box-sizing:border-box; }

/*========= obecné =====================================================================*/
body { margin:0; padding-bottom: 1px; }
#container { min-height: 100%; }
img { max-width: 100%; }
a img { border:0; text-decoration: none; }
a { text-decoration: underline; }

h1 { font-size: 28px; line-height: 1em; margin: 1em 0; }
h2 { font-size: 20px; line-height: 1em; margin: .6em 0; }
h2.nomarginb { margin-bottom: 0; }
h3 { }
h2 a { text-decoration: none; }
h3 a { text-decoration: none; }
h4 a { text-decoration: none; }

ul{ padding: 0 0 0 2em; overflow: hidden; }
ul li{ padding:0; margin-bottom: .5em; }
blockquote { background: #eee; border: 1px solid #ddd; margin: 0 0 1.5em; padding: .25em 1em; }
blockquote p { font-size: 1.2em; margin: .5em; }
hr { width: 100%; height: 1px; margin:.75em 0; }

table { max-width:100%; border-collapse: collapse; }
table td,table th { padding-right: 1em; }
table.ramovana { border: 1px solid; }
table.ramovana td,table.ramovana th { border: 1px solid; padding-left: .5em; padding-right: .5em; }

template { display:none; }

/*========= globální třídy a modifikátory ==============================================*/
/* Případně doplněny s konkrétními identifikátory podstránek a sekcí */
.hid { display: none!important; }

.chyba,.msgOk { padding: .5em 1em .5em; border: 2px solid; margin-bottom: 2em; }
.chyba { font-size: 1.2em; background: #fdd; color:#d00; font-weight: bold; border-color: #eaa; }
.msgOk { background: #dfd; color:#242; border-color: #aea; }
.chyba p,.msgOk p { margin-bottom: .5em!important; margin-top: .5em!important; }

.left { float:left!important; }
.right { float:right!important; }
.cleaner { display: block; width: 100%; clear: both!important; }

.nalevo { text-align: left!important; }
.nastred { text-align: center!important; }
.napravo { text-align: right!important; }
.navse { text-align: justify!important; }

.tucny { font-weight: bold; }
.italika { font-style: italic }
.podtrzeny { text-decoration: underline!important; }
.preskrtnute { text-decoration: line-through!important; }

.mensi-pismo { font-size: .8em; }
.vetsi-pismo { font-size: 1.25em; }
.velke-pismo { font-size: 1.5em; }
.pismo2x { font-size: 2em; }

.kurzor-sipka { cursor: default; }
.kurzor-otaznik { cursor: help; }
.kurzor-ruka { cursor: pointer; }

.transparent { -moz-opacity:.5; opacity:.5; }
.full { width: 100%; }

.topMsg { background: #ecc; color:#f33; font-weight: bold; font-size: 1.1em; padding: .25em 10%; text-align: center; }
form .post { display: none!important; }
form .bblcntnr { }
form .bblcntnr .bubble { display: block; text-align: left; }
form .bblcntnr .bubble span { border:1px solid #eaa; background: #fdd; color:#d00; font-weight: bold; display: inline-block; padding: .1em .5em; margin: .1em; }
form .js_error_list { opacity:1; display: block; text-align: left; border:1px solid #eaa; background: #fdd; color:#d00; font-weight: bold; padding: .1em .5em; margin: .1em; }
form .js_error_list:empty { display: none; }
@keyframes fadeOut { from { opacity: 1; }
   to { opacity: .25; } }
form .js_error_list.diss { opacity: .25; animation: fadeOut 10s }

.tableboxwrap { overflow: auto; }

.max-sirka { width: 100%; max-width: 1300px; margin:auto; position: relative; }

.slflex {--mezery:calc( var(--sloupce) - 1 ); column-gap: var(--rozestup); row-gap: var(--rozestup); display: flex; flex-wrap: wrap; }
.slflex > * { display: block; flex: 0 0 calc( calc( 100% - var(--mezery) * var(--rozestup) ) / var(--sloupce) ); }

.tlacitko { background: url(/img/btn.jpg) repeat-x center top; border: 0; border-radius: 5px; color: #fff; cursor: pointer; display: inline-block; font-size: 14px; line-height: 1em; padding: 1em 2em; text-align: center; text-decoration: none; text-transform: uppercase; background-size: 100% 100%; }
button.tlacitko,input[type=submit].tlacitko { }
.tlacitko:hover { background-image: url(/img/btn-hover.jpg); }
button.tlacitko:hover,input[type=submit].tlacitko:hover { }

:root { --wastemenu-color: #000; --wastemenu-xcolor: #000; --wastemenu-lwidth: 9%; --wastemenu-border: 9%; }
span.wasteofspace{  height: 1.5rem; min-width: 1.5rem; font-size: 0; display: inline-block; vertical-align: middle; overflow: hidden; margin: .25rem; background: linear-gradient(to bottom,
   transparent 0% var(--wastemenu-border),
   var(--wastemenu-color) var(--wastemenu-border) calc( var(--wastemenu-border) + var(--wastemenu-lwidth) ),
   transparent calc( var(--wastemenu-border) + var(--wastemenu-lwidth) ) calc( 50% - var(--wastemenu-lwidth) / 2 ),
   var(--wastemenu-color) calc( 50% - var(--wastemenu-lwidth) / 2 ) calc( 50% + var(--wastemenu-lwidth) / 2 ),
   transparent calc( 50% + var(--wastemenu-lwidth) / 2 ) calc( 100% - var(--wastemenu-border) - var(--wastemenu-lwidth) ),
   var(--wastemenu-color) calc( 100% - var(--wastemenu-border) - var(--wastemenu-lwidth) ) calc( 100% - var(--wastemenu-border) ),
   transparent calc( 100% - var(--wastemenu-border) ) 100%
   ); }
span.wasteofspace.waste-x { background: linear-gradient(45deg,
   transparent 0% calc( 50% - var(--wastemenu-lwidth) / 2 ),
   var(--wastemenu-xcolor) calc( 50% - var(--wastemenu-lwidth) / 2 ) calc( 50% + var(--wastemenu-lwidth) / 2 ),
   transparent calc( 50% + var(--wastemenu-lwidth) / 2 ) 100%
   ), linear-gradient(-45deg,
   transparent 0% calc( 50% - var(--wastemenu-lwidth) / 2 ),
   var(--wastemenu-xcolor) calc( 50% - var(--wastemenu-lwidth) / 2 ) calc( 50% + var(--wastemenu-lwidth) / 2 ),
   transparent calc( 50% + var(--wastemenu-lwidth) / 2 ) 100%
   ); }

/*========= společné definice (barvy, chování apod.) ===================================*/
:root { --mainbarva:#609116; }
h1:first-letter,h2:first-letter,h3:first-letter,p.h2:first-letter,p.h3:first-letter { text-transform: uppercase }
a { color:var(--mainbarva); }
.mainbarva { color:#fff; }
h1,h2 { color:#284a29; }
#naseptavac .naseppolozka:focus { background: var(--mainbarva); }
.secbarva { color:var(--mainbarva); }
.gbg { background: #f3f3f3; }
.mainbg { background: var(--mainbarva); }
.secbg { background:#fff; }

.hoverline,.nohoverline,.hoverparent { text-decoration: none; }
.hoverline:hover,.hoverbase:hover .hoverparent { text-decoration: underline; }

/*========= prvky hlavičky =============================================================*/
#hpruh { padding-top: 30px; }
#hlavicka { background: url(/img/header.jpg) repeat-x center bottom #fff; border-radius: 15px 15px 0 0; padding: 15px 2% 0 2.5%; display:grid; grid-template-columns: 250px auto auto 25%; grid-template-rows: auto auto; }
#hlogo { display: block; margin: 15px 0 25px; grid-area: 1/1/3/2; justify-self: left; }
#nhmenu { grid-area: 1/2/2/4; justify-self: center; }
#login { grid-area: 1/4/2/5; justify-self: right; }
#hledatObal { grid-area: 2/2/3/4; justify-self: center; }
#kosinfo { grid-area: 2/4/3/5; justify-self: right; }
#hlogo img { max-height:75px; }

/*========= košík ======================================================================*/
#kosinfo { display: inline-block; text-decoration: none; color: #474747; padding-left: 55px; text-decoration: none; box-sizing: border-box; vertical-align: top; line-height: 22px; text-align: left; background: url(/img/icon_kosik.png) no-repeat left center; position: relative; height: 50px; }
#kosinfo > span { display: block; margin: 2px 0; }
#kosinfo .kosnadpis { color:#49ad33; font-size: 16px; text-transform: uppercase; font-weight: bold; }
#kosinfo:hover .kosnadpis { text-decoration: underline; }

#kosinfo .xkos { background: #49ad33; color:#fff; font-weight: bold; font-size: 14px; border-radius: .65em; position: absolute; bottom:0; right:0; display: block; width: 1.3em; line-height: 1.3em; text-align: center; }

/*========= přihlašování ===============================================================*/
#login { position: relative; font-size: 12px; line-height: 16px; white-space: nowrap; width: 100%; max-width: 250px; text-align: right; display: inline-block; vertical-align: middle; text-transform: uppercase; }
#login .uzivatel,#login .uzivatel2{ background: left center no-repeat; padding: 0.4em 5.5%; color:#7e7e7e; text-decoration: none; display: inline-block; vertical-align: middle; }
#login .uzivatel { background-image: url(/img/icon_user.png); width: 32%; }
#login.logout .uzivatel { text-transform: none; }
#login .uzivatel2 { background-image: url(/img/icon_reg.png); width: 42%; }
#login form { position: absolute; top: 100%; right: 0; width: 280px; padding: 1em; text-align: left; border:1px solid #eee; background: #fff; z-index: 200; white-space: normal; }
#login form .pwrap { width: 60%; float:left; }
#login form p { margin: .25em 0; }
#login form label { width: 34%; margin-right: 1%; display: inline-block; vertical-align: middle; text-align: right; }
#login form input { width: 65%; display: inline-block; vertical-align: middle; }
#login form button { width: 35%; float:right; margin: .25em 0 0; display: block; padding-left: 0; padding-right: 0; }
#login form > p { margin-bottom: 0; width: 100%; }
#login form > p label{ width: 21%; }

#xlogin .uzivatel,#xlogin .uzivatel2 { display: block; text-align: left; z-index: 1000; padding: 1em 0; height: auto; }

/*========= menu =======================================================================*/
.hmenu { display: inline-block; vertical-align: middle; text-transform: uppercase; text-align: center; font-size: 12px; }
.hmenu a { display: block; text-decoration: none; }
.hmenu .radic { position: relative; }
.hmenu .msp { display: grid; align-content: center; line-height: 1.25em; }
.hmenu .radic a:hover,.hmenu .radic.active > a { text-decoration: underline; }

#nhmenu { display: flex; }
#nhmenu a { color:#7e7e7e;}
#nhmenu .msp { min-height: 2.5em; padding: 0 1em; }
#nhmenu .oddelovac {width: 1px;}
#nhmenu .radic a:hover .msp,#nhmenu .radic.active > a > .msp{ }

#xhmenu {z-index: 1000; display: inline-block; }
#xhmenu a { color:#333; }
#xhmenu .extrawrap {display: block; background: rgba(255,255,255,.95); position: fixed; top:0; padding: 1em 12% 8em; left:0; width: 100vw; bottom: 0; overflow: auto; z-index: 999; box-sizing: border-box;}
#xhmenu .radic{ display: block; text-align: left; z-index: 1000; }
#xhmenu .msp { padding:1em 0; height: auto; }
#xhmenu .radic a:hover .msp,#xhmenu .radic.active > a > .msp{ }
#xhmenu .overline { border-top: 1px solid #ddd; padding: .5em 0; }

/*========= vyhledávání ================================================================*/
#hledatObal { min-width: 148px; position: relative; display: inline-block; vertical-align: top; max-width: 350px; width:100%; text-align: left; }
#hledatObal form { background-color: #fefefe; border: 1px solid #d2d2d2; border-radius: 10px; padding: 3px; box-sizing: border-box; width: 100%; }
#hledatObal .q{ width: 78%; margin-right: 2%; padding: 0 1em; border:0; background: #fff; text-align: left; color:#474747; vertical-align: top; height: 34px; border-radius: 10px 0 0 10px; font-size: 13px; }
#hledatObal .tlacitko { width: 20%; margin:0; padding: 0; background: url(/img/icon_search.png) no-repeat center center #f2bd00; border-radius: 0 10px 10px 0; height: 34px; vertical-align: top; font-size: 0; }
#hledatObal .q::placeholder { font-style: italic; opacity:1; }

#naseptavac { width: 270px; border: 1px solid #f3f3f3; background: #fff; height: 16.5em; z-index: 300; position: absolute; left: 0; top: 100%; }
#naseptavac .naseppolozka { display: block; background: #fff; }
#naseptavac .naseppolozka span { overflow: hidden; display: block; padding: 0 4%; height: 1.5em; line-height: 1.5em; }
#naseptavac .naseppolozka:focus { color:#fff; }
#nasepfoto { position: absolute; right: 100%; top:-1px; background: #fff; border: 1px solid #f3f3f3; width: 220px; height: 16.5em; text-align: center; }
#nasepfoto a { display: block; padding: .5em 5%; height: 100%; }
#nasepfoto .nadpis { display: block; line-height: 1.4em; height: 2.8em; overflow: hidden; }
#nasepfoto .fotoInside { display: block; height: 12.7em; line-height: 12.7em; white-space: nowrap; }
#nasepfoto .fotoInside img{ vertical-align: middle; max-height: 100%; }

/*========= prvky stránky ==============================================================*/
#stranka { padding: 20px 2% 1px; margin:0; background: #fff; }

/*========= obsah ======================================================================*/
#telo { padding: 0; margin:0; width: 73%; float: right; }

.obsah { line-height: 1.333em; position: relative; }
.obsah p { margin-top: 0; }
.obsah img.left,.obsah iframe.left,.obsah div.left { margin: .75em 1em; margin-left: 0; }
.obsah img.right,.obsah iframe.right,.obsah div.right { margin: .75em 1em; margin-right: 0; }
.obsah iframe { max-width: 100%; }

.obsah div.left,.obsah div.right, .obsah div.full { text-align: center; padding:1em; }
.obsah div.full{ margin: .75em 0; }
.obsah div.left > :last-child,.obsah div.right > :last-child,.obsah div.full > :last-child { margin-bottom:0; }

.anotacka { font-size: 1.1em; }

#text4 { position: relative; }
.text4inner { overflow: hidden; }
.text4link { position: absolute; bottom: -1.4em; right: 10%; }

.rozcestnik { text-align: center; margin:1em 0; }
.rozcestnik .box { display: inline-block; vertical-align: top; height: 180px; width: 23.5%; margin: 0 .75%; position: relative; color: #284a29; font-size: 14px; font-weight: bold; text-transform: uppercase; }
.rozcestnik .foto { height: 180px; }
.rozcestnik .text { margin-top: -50px; width: 100%; display: table; }
.rozcestnik .text span { padding: 0 5%; height: 40px; line-height: 20px; display: table-cell; vertical-align: middle; }

/*========= drobečková =================================================================*/
.drobnav { line-height: 1.3em; color:#888; margin: 0 0 1em; }
.drobnav a { color:#888; }
.drobnav span { padding:0; margin:0; display: inline-block; }
.drobnav span.odd { margin: 0 .75em; }

/*========= podstránky =================================================================*/
.podkat { margin: 2em 0; align-items: stretch; --sloupce:3; --rozestup:1em; }
.podkat a {font-size: 1.1em; border: 1px solid #ccc; padding: .33em 1%; position: relative; box-sizing: border-box; }
.podkat a:not(:hover) {border-color: #eee; text-decoration: none; }
.podkat a.wpix { display:grid; grid-template: 1fr auto / 1fr; grid-template-areas: 'text' 'pic'; }
.podkat .text { grid-area: text; }
.podkat .pic { grid-area: pic; margin-top: .5em; text-align: right; max-height: 100px; }
.podkat .pic img { max-height: 100%; object-fit: contain; }

/*========= fotky ======================================================================*/
.gallery { margin: 2em 0; align-items: stretch; --sloupce:4; --rozestup: 1em; }
.gallery.forkat { --sloupce:2; }
.uvodni .gallery { --sloupce:3; }
.gallery .box { vertical-align: top; }
.gallery .box a {display: grid; min-height: 150px; align-items: center; justify-content: center; }
.gallery img { padding:2%; border: 1px solid #fafafa; box-sizing: border-box; }
.gallery .text { display: block; padding: 0 2%; margin-top: .15em; text-align: center;  }

/*========= soubory ====================================================================*/
.files { display:table; max-width: 700px; width: 100%; margin-top: 1em; }
.files a { display: table-row; text-decoration: none }
.files span { display:table-cell; vertical-align: middle; text-align: left; padding: .5em 0; border-bottom: 1px solid #eee; }
.files img { float:left; margin: 0 .5em; }
.files .tail { text-align: right; }

/*========= články =====================================================================*/
.clanky { }
.clanky .clanek { margin-bottom: 2em; }
.clanky .h3 { font-weight: bold; font-size: 1.1em; margin-bottom: 0; }
.clanky .datum { font-size: .9em; color:#777; margin: 0 0 .5em; }

/*========= novinky ====================================================================*/
.novinky { }
.novinky .novinka { margin-bottom: 2em; }
.novinky .h3 { font-weight: bold; font-size: 1.1em; margin-bottom: 0; }
.novinky .datum { font-size: .9em; color:#777; margin: .5em 0 .75em; }

/*========= sloupce ====================================================================*/
.sloupec-levy { width: 24%; float: left; clear:left; }
.sl-box { border-radius: 10px; overflow: hidden; margin-bottom: 2em; padding: 0 5%; border: 1px solid #cccccc; }
.sl-box.horni { background-color: #247a00; text-transform: uppercase; padding: 0; border: 0; }
.sl-box.novy { margin-top: 2em; }
.sl-box.nw { border: 1px solid #cccccc; background: #eff4e7; }
.sl-box.txt { padding-top: 1em; }

.sl-box p { color: #3a3a3a; line-height: 22px; margin-top: 0; }
.sl-box.novy p { font-size: 14px; margin: 0 0 2em; }
.sl-box.nw p { color: #284a29; line-height: 20px; }
.sl-box p.h2 { background: no-repeat left center; color: #2a572c; font-size: 18px; font-weight: bold; line-height: 40px; margin: 10px 0; padding-left: 40px; }
.sl-box.novy p.h2 { background-image: url(/img/icon_novinky.png); }
.sl-box.nw p.h2 { background-image: url(/img/icon_nwl.png); }

.sl-box .h3 { font-weight: bold; }
.sl-box .polozka{ }
.sl-box p.datum { color: #338311; font-weight: bold; margin-bottom: 2px; }

/*========= šablony ====================================================================*/
.respgbg,.respgbg tbody { width: 100%; border-collapse: collapse; }
.respgbg tr td:first-of-type { background:#f3f3f3; }
.respgbg tr td { border-bottom: 1px solid #eee; border-top: 1px solid #eee; padding: 0 .5em; }

.flexcols { display: flex; width:100%; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; }
.flexcols.verticentr { align-items: center; }
.flexcols > div { padding: .5em; padding-left: 0; box-sizing: border-box; margin-bottom: 1em; }
.flexcols > div > p:last-child { margin-bottom: 0; }
.column2 > div { width: 50%; }
.column3 > div { width: 33.3%; }
.column4 > div { width: 25%; }
.column5 > div { width: 20%; }

/*========= slider =====================================================================*/
.slider2 { position: relative; margin-bottom: 4em; width: 100%; }
#slider2 { overflow: hidden; }

.slider2 .bx-pager { position: absolute; background: url(/img/predel.png) no-repeat center 30px; bottom: -30px; height: 50px; width: 100%; display: flex; column-gap: 5px; justify-content: center; }
.slider2 .bx-pager-item { margin-top: 15px; }
.slider2 .bx-pager-link { background:url(/img/prepinac.png) no-repeat center center; width: 30px; height: 30px; font-size: 0; display: block; }
.slider2 .bx-pager-link.active { background-image: url(/img/prepinac-aktivni.png); }

.slider2 .vnitrek { display: grid; row-gap: 1em; column-gap: 1em; padding: 0 1em; box-sizing: border-box; height: 280px; text-align: left; align-content: center; grid-template: auto 1fr auto / 45% 1fr auto; grid-template-areas:'foto nadpis nadpis' 'foto popis popis' 'foto cena tlac'; }
.slider2 .foto { grid-area: foto; text-align: center; }
.slider2 .foto img{ vertical-align: middle; aspect-ratio:1; object-fit:contain; height: 280px; }
.slider2 .nazev { grid-area: nadpis; line-height: 1.4em; font-size: 23px; font-weight: bold; margin-top: 2em; }
.slider2 .nazev a { color: #004127; }
.slider2 .popis { grid-area: popis; line-height: 1.25em; font-size: 13px; color: #004127; overflow: hidden; }
.slider2 .spodni { grid-area: cena; align-self: center; justify-self: left; margin-bottom: 2em; }
.slider2 .spodni .cena { font-weight: bold; color: #f17202; font-size: 28px; line-height: 26px; margin: 0; }
.slider2 .spodni .dph { color: #939393; font-size: 13px; text-align: right; font-weight: normal; display: block; }
.slider2 .stitky { top: 30px; }
.slider2 .tlacitko { grid-area: tlac; align-self: center; font-weight: bold; margin-bottom: 2em; }

/*========= kontaktní formulář =========================================================*/
.kform { text-align: left; width:50%; vertical-align: top; display: inline-block; }
.kform form { }
.kform p { margin: 0 0 1em; }
.kform .sloup { display: inline-block; vertical-align: top; width: 48%; }
.kform .l { padding-right: 2%; }
.kform .r { padding-left: 2%; }
.kform label { display: block; line-height: 1.5em; padding: 0; }
.kform label.readerhelp { width: 0; height: 0; overflow: hidden; display: block; }
.kform .stretch { width: 100%; padding: .5em; border:0; border: 1px solid #ccc; background:#fff; }
.kform textarea.stretch { height: 4.25em; }
.kform .tlacitko { }
.kform ::placeholder { font-style: italic; color:#777; opacity: 1; }
#telo .kform { padding-top: .5em; }

/*========= formulář newsletteru =======================================================*/
.nwform { text-align: left; max-width: 570px; background-color: #fefefe; border: 1px solid #d2d2d2; border-radius: 10px; margin: 0 auto 1em; overflow: hidden; }
.nwform form { }
.nwform p { margin: 0; }
.nwform label.readerhelp { width: 0; height: 0; overflow: hidden; display: block; }
.nwform .stretch { width: 86.5%; box-sizing: border-box; padding: 0 .5em; border-radius: 10px 0 0 10px; color:#474747; height: 40px; border: 0; }
.nwform .tlacitko { border-radius: 0 10px 10px 0; background: url(/img/icon_insert.png) no-repeat center center #f2bd00; height: 40px; vertical-align: middle; width: 13.5%; font-size: 0; }
.nwform ::placeholder { font-style: italic; opacity: 1; }

/*========= normální formuláře =========================================================*/
.simpleform { width: 100%; }
.simpleform p { margin: .5em 0; }
.simpleform p label { display: inline-block; vertical-align: middle; width: 22%; }
.simpleform p input,.simpleform p select { display: inline-block; vertical-align: middle; width: 45%; margin:0; padding: 0 .5em; }
.simpleform p input[type=checkbox],.simpleform p input[type=radio] { width: auto; margin: initial; }
.simpleform p .tlacitko { vertical-align: middle; }

/*========= eshop - postranní kategorie ================================================*/
#kat { }
.katmenu { list-style-type: none; padding:0; margin: 0; font-size: 14px; }
/* 1. úroveň */
#kat li { border-top: 1px solid #509533; }
.katmenu li { margin:0; line-height: 1.36em; }
.katmenu li a { margin:0; color:#fff; font-weight: bold; }
.katmenu li.prvy { border-top: 0; }
.katmenu li .rozklik { display: inline-block; width: 40px; vertical-align: middle; padding:.66em 0; background: center center no-repeat; cursor: pointer; text-align: center; color: transparent; background-image: url(/img/plus.png); }
#xkat li .rozklik { background-image: url(/img/xplus.png); }
.katmenu li .rozklik::after {content:'+'}
.katmenu li.open .rozklik { background-image: url(/img/minus.png); }
#xkat li.open .rozklik { background-image: url(/img/xminus.png); }
.katmenu li.open > a .rozklik::after {content:'-';}
.katmenu li .katlink { display: inline-block; vertical-align: middle; padding: .66em 1em .66em 0; width: calc(100% - 40px); text-decoration: none; font-weight: bold; color: #fff; box-sizing: border-box; }
:is(.katmenu li > a:hover,.katmenu li.open > a ) .katlink { text-decoration: underline;}
/*2. úroveň - rozdíly prvků od 1. úrovně */
#kat li ul { background: #eaf2e6; }
.katmenu li ul {list-style-type: none; padding:0; margin: 0;}
.katmenu li:not(.open) > ul {display: none;}
#kat li ul li { border-top:1px solid #bec4bc; }
.katmenu li ul li .katlink {padding: .25em 0; width: calc( 100% - 40px ); }
.katmenu li.open ul li .katlink { padding: 0.4em 1em 0.2em 0; text-decoration: none; color: #3a3a3a; font-size: 15px; font-weight: normal; }
.katmenu li.open ul li.active .katlink { font-weight: bold; }
#xkat li .katlink { color:#333; text-align: left; }
#xkat li ul li .katlink { width: 80%; }
#xkat li ul li .rozklik { width: 20%; }

.katmenu .empty { visibility: hidden; cursor: auto; }

/*========= eshop - spolecne ===========================================================*/
/* Globální, konkrétními identifikátory podstránek doplněny */
.stitky { position: absolute; left: 0; top: 0; text-decoration: none; color: #000; }
.stitky span{ margin:.5em 0; display: block; }
.stitky span.akce{ }
.stitky span.novinka{ }
.stitky span.darek{ }
.stitky span.procenta{ display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; border-radius: 30px; background: orange; color:#fff; font-weight: bold; white-space: nowrap; }

/*========= eshop - výpis produktů =====================================================*/
.produkty { clear:both; --sloupce:3; --rozestup: 0; margin-top: 1.5em; align-items: stretch; }
.produkt { position: relative; border: .5px solid #dadada; border-left: 0; border-right: 0; text-align: center; display: grid; row-gap: .5em; column-gap: .75em; padding: 1.5em 0 .5em; box-sizing: border-box; flex: 0 0 calc( calc( 100% - calc( var(--mezery) * 4% ) - calc( var(--mezery) * 1px ) ) / var(--sloupce) ); grid-template: minmax(2.2em,auto) 240px 1fr auto auto / 1fr auto; grid-template-areas: 'nazev nazev' 'foto foto' 'popis popis' 'leva prava'; }
.produkt .nazev { grid-area:nazev; color: #212121; font-size: 19px; font-weight: bold; display: block; }
.produkt .foto { grid-area: foto; }
.produkt .foto img { height: 100%; object-fit: contain; }
.produkt .topmid { grid-area:popis; line-height: 1.4em; color: #545454; font-size: 13px; }
.produkt .pleft { grid-area: leva; text-align: right; align-self: center; }
.produkt .pright { grid-area: prava; text-align: left; align-self: center; }
.produkt .cena { color: #f17202; font-size: 21px; font-weight: bold; line-height: 1.2em; margin: 0; }
.produkt .dph { color: #636363; font-size: 11px; margin: 0; }
.produkt .sklad { color:#ab4602; font-size: 13px; font-weight: bold; margin: 0; }
.produkt .sklad.ok { color:#693 }
.produkt .stitky { top: 70px; left:10px; }
.produkty .oddelovac { flex-basis: 1px; background: #dadada; margin: 3% 2%; }

.produkt.v2 { flex: 0 0 100%; align-items: center; padding-top: .5em; grid-template: auto / 75px 0 1fr auto minmax(6em,auto) auto; grid-template-areas: 'foto . nazev cena sklad pright'; }
.produkt.v2 .foto { aspect-ratio:1; height: 75px; }
.produkt.v2 .nazev { text-align: left; font-size: 16px }
.produkt.v2 .cena { grid-area: cena; font-size: 1em; }
.produkt.v2 .sklad { grid-area: sklad; }
.produkt.v2 .pright { grid-area: pright; }

.more.tlacitko { margin: .5em 0; }
.more.tlacitko img { vertical-align: bottom; }

/*========= eshop - detail produktu ====================================================*/
.produkt-det { }
.produkt-det p.oversizeMsg { background: #fff; border: 1px solid red; box-sizing: border-box; padding: .55em; margin: 1em 0 0; }
#prodpresent {display: grid; grid-template: auto / 1fr minmax(250px,40%); column-gap: 2%; }
.produkt-det .fotosloupec {position: relative;}
.produkt-det .fotosloupec img { vertical-align: middle; }
.produkt-det .fotka-hlavni { text-align: center; }
.produkt-det .fotocontainer { position: relative; padding: 2px 5%; }
.produkt-det .fotocontainer a { width: 23%; margin:0 1%; white-space: nowrap; display: inline-block; text-align: center; }
.produkt-det .fotocontainer .borderer { border: 1px solid #eee; height: 75px; display: block; line-height: 75px; }
.produkt-det .fragment { text-align: center; }
.produkt-det .vpravo .radek { border-bottom: 1px solid #eee; padding: .33em 2%; }
.produkt-det .vpravo fieldset .radek { padding: .33em 0; }
.produkt-det .vpravo .radek label { width: 40%; display: inline-block; vertical-align: middle; color:#777; }
.produkt-det .vpravo .radek span { width: 60%; display: inline-block; vertical-align: middle; }
.produkt-det .vpravo .cradek { width: 100%; text-align: right; }
.produkt-det .vpravo #procentaDiv { float:left; padding: .5em 1em; width: auto; text-align: left; font-weight: bold; color:#fff }
.produkt-det .vpravo #staracenaDiv,.produkt-det .vpravo #malacenaDiv { color:#777; margin-top:1.5em }
.produkt-det .vpravo #staracenaDiv { text-decoration: line-through; }
.produkt-det .vpravo #cenaDiv { margin-top: 1.25em }
.produkt-det .vpravo #cenaDiv .mensi { font-size: .8em; color:#aaa; }
.produkt-det .vpravo .bigspan,.produkt-det fieldset #summall { font-size: 2em; font-weight: bold; white-space: nowrap; vertical-align: middle; margin-left: .5%; }
.produkt-det fieldset { border:0; padding: 1em 1%; margin: 1.5em 0 0; text-align: right }
.produkt-det fieldset.uzsi { padding: 1em 5%; }
.produkt-det fieldset .omezovac { width: 45%; display: inline-block; vertical-align: top; margin: 0 2.5%; }
.produkt-det fieldset .radek { margin-bottom: 15px; text-align: left }
.produkt-det fieldset .cradek { margin-bottom: 20px; }
.produkt-det fieldset label { width: 40%; display: inline-block; vertical-align: middle; color:#777; }
.produkt-det .upozorni { padding: .75em; border: 1px solid #d77; font-weight: bold; }
.produkt-det #bvarianta { vertical-align: middle; display: inline-block; }
.produkt-det fieldset .cradek span{ text-align: right; }
.produkt-det fieldset .cradek.mensi { color:#aaa; margin-top: -10px; }
.produkt-det fieldset select { width: 60%; display: inline-block; vertical-align: middle; padding: .5em 0; }
.produkt-det fieldset .input { width: 30%; display: inline-block; vertical-align: middle; text-align: left; white-space: nowrap; }
.produkt-det fieldset .input input { height: 2em; width: 100%; text-align: center; }
.produkt-det fieldset button { width: 65%; margin-left: 5%; display: inline-block; vertical-align: middle; line-height: 1.2em; padding-left: .25em; padding-right: .25em; }
.produkt-det .moznosti { margin: 10px 0; border: 1px solid #eee; border-bottom: 0; }
.produkt-det .moznost { border-bottom: 1px solid #eee; display: table; width: 100%; height: 60px; cursor: pointer }
.produkt-det .moznost span, .produkt-det .moznost a { display:table-cell; vertical-align: middle }
.produkt-det .moznost .cena { width: 20%; text-align: center; }
.produkt-det .moznost a { width: 15%; text-align: center; }
.produkt-det .moznost .forimg { width: 14.5%; text-align: center; }
.produkt-det .moznost .forimg.b { width: 12%; }
.produkt-det .moznost .forimg img { max-width: 80%; max-height: 60px; text-align: center; }
.produkt-det .moznost .pcast { display: table-cell; width: 9%; vertical-align: middle; text-align: center; border-left: 1px solid #eee; }
.produkt-det .zalozky { margin: 1.5em 0; }
.produkt-det .zalObsah { margin: .5em 0; }
.produkt-det .paramtab { padding: 1em 5%; }
.produkt-det .paramtab label { display: inline-block; vertical-align: top; width: 30%; }
.produkt-det .paramtab span { display: inline-block; vertical-align: top; width: 70%; }

.produkt-det .fotocontainer .bx-prev,.produkt-det .fotocontainer .bx-next{ text-decoration: none; position: absolute; top:0; display: block; text-align: center; line-height: 79px; height: 79px; width: 5%; white-space: nowrap; margin:0; }
.produkt-det .fotocontainer .bx-prev{ left:0; }
.produkt-det .fotocontainer .bx-next{ right:0; }

/*========= eshop - filtrace kategorie ================================================*/
.prodFiltr { width: 96%; padding: .75em 2%; }
.prodFiltr > div,.prodFiltr .settings > * { display: inline-block; vertical-align: middle; margin: .5em 0 0; }
.prodFiltr .settings { width: 83%; }
.prodFiltr .sender { width: 17%; text-align: center }
.prodFiltr .sender .tlacitko{ padding-left: 0; padding-right: 0; width: 100%; }
.prodFiltr .settings > * { margin: 1em 0 0; }
.prodFiltr .h { width: 17%; vertical-align: top; font-weight: bold; margin-right: 1%; }
.prodFiltr .prvky { width: 82%; }
.prodFiltr .vyrbox { display: inline-block; vertical-align: top; width: 24%; margin-bottom: .25em; margin-right: 1%; }
.prodFiltr .vyrbox label { display: inline-block; vertical-align: top; max-width: 78%; }
.prodFiltr .vyrbox label a { display: block; }
.prodFiltr .vyrbox input { vertical-align: top; max-width: 22%; margin-left: 0; margin-right: 0; }

.filt4 { position: relative; }
.filt4inner { overflow: hidden; }
.filt4link { position: absolute; bottom: -1.75em; right: 0; }

#nouicenaplace.noUi-horizontal { height: 8px; margin-top: 10px; width: 70%;  }
#nouicenaplace .noUi-handle { height: 18px;width: 20px;  }
#nouicenaplace .noUi-handle::after,#nouicenaplace .noUi-handle::before{ display: none; }
#nouicenaplace .noUi-tooltip { font-size: .8rem; line-height: 1; }

/*========= eshop - přepínací záložky ==================================================*/
.radzalozky { width: 100%; border-bottom: 1px solid #eee; margin-top: .5em; position: relative; }
.radzalozky .zalozka { display: inline-block; vertical-align: bottom; border: 1px solid #eee; border-radius: 2px 2px 0 0; line-height: 2em; margin-bottom: -1px; }
.radzalozky .zalozka > * { display: block; padding: 0 .5em; }

.predprodzal { padding-right: 4.5em; box-sizing: border-box; }
.radzalozky.prod { text-align: right; }
.radzalozky.prod.posunute { margin: -2em 0; float: right; width: auto; }
.radzalozky.prod .zalozka { border: 0; text-align: center; }
.radzalozky.prod .zalozka > * { padding: 0; width: 26px; margin-left: .5em; }
.radzalozky.prod .zalozka img { vertical-align: middle; }

.produkt-det .radzalozky .zalozka > * { padding: 0 .75em; }

.text4 { position: relative; }
.text4inner { overflow: hidden; }
.text4link { position: absolute; bottom: -1.7em; right: 10%; }

/*========= eshop - stránkování ========================================================*/
.paging { margin: 1em; text-align: right; font-size: 1.1em; }
.paging a,.paging .a{ margin: 0 .25em; }
.paging .curpage{ font-weight: bold; }

/*========= eshop - košík ==============================================================*/
.kos { }
.kos table { width: 100%; padding-top: .75em; margin-bottom: 2em; text-align: center }
.kos table thead th { height: 1.5em; padding: 0 .5em; background-color: #f8f8f8; border:0; }
.kos table td { height: 60px; vertical-align: middle; border:0; }
.kos table td.odkazova,.kos table td.variantni { text-align: left }
.kos table td.inputova { white-space: nowrap; text-align: left; width: 120px;}
.kos table td.cenova { white-space: nowrap; text-align: right; }
.kos table td img { max-height: 60px; max-width: 60px; }
.kos table .plusminus { background-color: #f8f8f8; display:inline-block; vertical-align: middle; width:1.5em; height: 1.5em; line-height: 1.5em; text-decoration: none; color:#000; text-align: center; }
.kos table .mnozstevni { width: calc( 100% - 4em ); max-width: 5em; height: 1.5em; vertical-align: middle; text-align: center; }
.kos table .final td { font-weight: bold; }
.kos .linky { text-align: right; }
.kos .linkovy { background: none; border:0; display:inline-block; vertical-align: middle; text-decoration: underline; margin-left: 3.5em; margin-right: 1.5em; padding: 1em 0; margin-bottom: .5em; cursor:pointer; }
.kos .tlacitko { vertical-align: middle; margin-left:2em; padding: 1em 1.5em; margin-bottom: .5em; }
.kos .zpet { padding:1em 0; float: left; display: inline-block; }

.dzram { height: 10px; border:1px solid #000; margin: -.5em 0 1em; background: #ccc; }
.dzfill { height: 100%; background: #509533; }

/*========= eshop - objednávka =========================================================*/
.objednavka{ margin: 20px 0; }
.objednavka .tab { display: table; width: 100%; }
.objednavka .adresa{ width: 49%; display: inline-block; vertical-align: top; margin-right: 1%; }
.objednavka .adresa p { margin: .35em 0; line-height: 1.65em }
.objednavka .dodatky p { margin: .35em 0; line-height: 1.65em }
.objednavka .adresa label { width: 42%; display: inline-block; vertical-align: middle; }
.objednavka .adresa input,.objednavka .adresa select { width: 53%; vertical-align: middle; }
.objednavka .adresa input[type=checkbox],.objednavka .adresa input[type=radio] { width: auto; }
.objednavka .dodatky{ width: 100%; display: block; }
.objednavka .dodatky label { width: 20.58%; display: inline-block; vertical-align: top; }
.objednavka .dodatky label.wider { width: 35%; }
.objednavka .dodatky .cb label { width: 75%; }
.objednavka .dodatky input { width: 50%; }
.objednavka .dodatky input[type=checkbox],.objednavka .dodatky input[type=radio] { width: auto; }
.objednavka .dodatky textarea { vertical-align: top; width: 50%; }
.objednavka .separat{ margin:2.5em 0; }
.objednavka .radioobj .radia { margin:.5em 0; border-bottom: 1px solid #ddd; padding: .5em 0; }
.objednavka .radioobj label { width: 100%; display: flex; flex-wrap: wrap; align-content: stretch; margin: 0 0 .5em; }
.objednavka .radioobj label input { width: 30px; margin: 0; align-self: center; }
.objednavka .radioobj label .tab1 { width: 50%; }
.objednavka .radioobj label .tab2 { flex-grow: 1; flex-shrink: 1; }
.objednavka .radioobj label .tab3 { width: 20%; }
.objednavka .radioobj .specbr { padding: 0 2em; margin: 0.5em 0; }
.objednavka .summary { width: 95%; padding-top: 10px; margin-bottom: 30px; font-weight: bold; }
.objednavka .summary tr { height: 3em; }
.objednavka .summary td { text-align: right; }
.objednavka .summary td.sirsi { text-align: left; }
.objednavka .tlacitko { margin: 1em 0; }

.objednavka .orderbody table { width:100%; }

.objednavka .radia img { vertical-align: middle; }
.more26 { padding-left: 1.5em; display: block; }
.more26 label{ display: block; }

/*========= eshop - registrace =========================================================*/
.regform .cb label { width: auto; }

/*========= eshop - porovnávání ========================================================*/
.porovrel { position: relative }
.porovnatpopup { position: absolute; left:0; width:100%; bottom:100%; background: #fff; border: 1px solid #ccc; z-index: 9000; padding: .5em; text-align: left; }
.porovnatpopup p { margin:0; clear:both; }
.porovnatpopup img { float:right; margin: 0 0 .5em .5em; }
.porovnatpopup img:hover { cursor:pointer; }

.seznamporovnej { border: 1px solid #ccc; padding: .5em 0 .5em 1em; }
.seznamporovnej .porovnejbox { display: inline-block; vertical-align: middle; margin-right: 1em; }
.seznamporovnej .porovnejbox span,
.seznamporovnej .porovnejbox img { vertical-align: middle; display: inline-block; }
.seznamporovnej a.porovnejbox span { text-decoration: underline; }

.tableporovnej { text-align: center; border-collapse: collapse; width: 100%; margin: 1em 0; }
.tableporovnej td { border: 1px solid #eee; }
.tableporovnej th { background: #eee; }
.tableporovnej th,.tableporovnej td { padding:0 .5em; }
.tableporovnej tr th:first-of-type { text-align: left }

/*========= eshop - hlídací pes ========================================================*/
.dgform { padding: 2em 0 1em; }
.dgform p label { width: 40%; }
.dgform p label:first-child { width: 38%; padding-right: 2%; text-align: right; }
.dgform p input { width: 40%; }

/*========= prvky patičky ==============================================================*/
#paticka { background: #fff; padding: 1em 2%; background: #fff; border-radius: 0 0 15px 15px; }
#paticka .pbox { width: 47%; vertical-align: top; display: inline-block; margin-left: 3%; overflow: auto; }
#paticka .pbox table { min-width: 33%; }

#zakonceni { margin: 2.2em 0 5.5em; color: #fff; position: relative; font-size: 13px; }
#zakonceni a { color: #fff; }

/*========= pro výměnu odkazů ==========================================================*/
.xch p { border-bottom: 1px solid #ddd; margin: 0; padding: .5em; width: auto; }
#xchlink { }

/*========= ostatní zbytečnosti ========================================================*/
@media (min-width: 689px){
   #cm.cloud { max-width: 800px; padding: 2em; }
   .cc_div .cloud #c-inr { display: flex; }
   .cc_div .cloud #c-inr-i { width: auto; flex-shrink: 1; }
   .cc_div .cloud #c-bns { max-width: 225px; width: 40%; font-size: 1.25em; text-align: center; }
   #cm.cloud #c-bns button + button.c-bn { display: inline-block; font-size: .82em; margin: 1.5em auto; float:none; padding: 0; background: #fff; width: auto; }
   #cm.cloud #c-bns button + button:hover { text-decoration: underline; cursor:pointer; } 
}
@media (max-width: 689px){
   .cc_div .cloud #c-bns { display: flex; flex-direction:row; justify-content: space-between; }
   #cm.cloud .c-bn { width:auto; box-sizing: border-box; margin: 0; display: block; flex-basis: 45%; }
   #cm.cloud .c-bn:first-child { margin: 0; order:2
   }
   #cm.cloud #c-bns button + button.c-bn { background: #fff; order: 1; }
   #cm.cloud #c-bns button + button:hover { text-decoration: underline; cursor:pointer; } 
}
:root { --cc-btn-primary-bg:var(--mainbarva); --cc-btn-secondary-hover-bg:#fff; }

.babish { text-align: left; }

#modalbase { position: fixed; top:0; left:0; width: 100vw; bottom: 0; background: rgba(0,0,0,.6); z-index: 10000; }
#modaldialog { background: #fff; padding: 1.5em; box-sizing: border-box; position: absolute; width: 80vw; left: 0; right: 0; text-align: center; max-width: 500px; margin-left: auto; margin-right: auto; overflow:auto; }
#modaldialog .dialogclose { position: absolute; display: block; color:transparent; background: url(/img/ikona-smaz.png) center center no-repeat; right:0; top:0; width: 1.5em; height: 1.5em; }
#modaldialog .tlacitko { margin: 0 1.5em 1em; pointer-events: auto; }

#modaldialog.dialogkosik { top:20vh; }
#modaldialog.dialogDPD { top:5vh; height: 90vh; left:5vw; width: 90vw; right: auto; max-width: none; padding: .25em; }
#modaldialog.dialogDPD iframe{ width: 100%; height: 100%; border: 0; }

#modaldialog.dialogparcelshop { top:5vh; bottom:5vh; max-width: none; width: 90vw; }
#modaldialog.dialogparcelshop .pplmapcontain{ height: 100%; box-sizing: border-box; position: relative; }
#modaldialog.dialogparcelshop #ppl-parcel-shop-map { height:100%; }
#modaldialog.dialogparcelshop #ppl-parcelshop-map .ppl-parcelshop-map { height:100%; }
#modaldialog.dialogparcelshop #ppl-parcelshop-map .control-panel { padding-top: 0; }
#modaldialog.dialogparcelshop #ppl-parcelshop-map .control-panel__logo-holder { padding: 20px 0; margin:0; }

#modaldialog.dialogdpdpickup { top:5vh; bottom:5vh; max-width: none; width: 90vw; }
#modaldialog.dialogdpdpickup .iframecontain { position: relative; width: 100%; height: 100%; }
#modaldialog.dialogdpdpickup iframe { width: 100%; height: 100%; border:0; }

#modaldialog.dialogbalikovnapickup { top:5vh; bottom:5vh; max-width: none; width: 90vw; }
#modaldialog.dialogbalikovnapickup .iframecontain { position: relative; width: 100%; height: 100%; }
#modaldialog.dialogbalikovnapickup iframe { width: 100%; height: 100%; border:0; }

#modaldialog.dialogpaymentgateway { top:5vh; bottom:5vh; max-width: none; width: 90vw; }
#modaldialog.dialogpaymentgateway .iframecontain { position: relative; width: 100%; height: 100%; }
#modaldialog.dialogpaymentgateway iframe { width: 100%; height: 100%; border:0; }

/*========= responzivity ===============================================================*/

/* per-web header transformations */

@media (max-width:1099px) {
   .produkty{ --sloupce:2; } 
}

/* general CMS rules */
@media (max-width:1349px) { /* max-sirka + 50px */
   .max-sirka {width: 91%; }
}

@media (min-width:1100px) {
   .produkty .oddelovac:nth-child(6n) { display: none; } 
}

@media (max-width:999px) {
   .gallery { --sloupce:3; }
   .produkty { --sloupce:2; }
   #hpruh { padding-top: 5px; }
   #hlavicka { grid-template-columns: 160px auto 70px 70px; grid-template-rows: auto; align-items: center; padding-top: 0; }
   #hlogo { margin: 10px 0 10px; grid-area: 1/1/2/2; }
   #hledatObal { grid-area: 1/2/2/3; justify-self: right; }
   #kosinfo { grid-area: 1/3/2/4; }
   #xhmenu { grid-area: 1/4/2/5; justify-self: center; }
   #hlogo img { max-height:50px; }
   #xhmenu { margin-left: 3%; }
   .hmenu{ font-size: 14px; }
   #login{ display: none; }
   #kosinfo { width: 50px; }
   #kosinfo .kosnadpis,#kosinfo .hkos { display: none; }
   .prodFiltr .vyrbox { width: 32.3%; }
   #zakonceni { padding: 0 2%; }
   .drobnav { line-height: 2em; margin: 0 0 .75em; }
   .produkt { width: 48%; }
   .kos table thead { display:none; }
   .kos table tbody { border-top: 1px solid #ccc; display: block; }
   .kos table tr {border-bottom: 1px solid #ccc; margin: .5em 0; text-align: left; display: grid; grid-template: minmax(75px,auto) auto 1fr / 75px 45px 1fr auto; grid-template-areas: 'foto nazev nazev X' 'extra extra extra extra' 'input input cena cena'; align-items: center; row-gap: .5em; column-gap: .5em; }
   .kos table td {display: block; height: auto; box-sizing: border-box; padding-right: 0;}
   .kos table td.pix { grid-area: foto; }
   .kos table td.odkazova { grid-area: nazev; }
   .kos table td.variantni {grid-area: extra; margin-top: -.5em; }
   .kos table td.inputova {grid-area: input;  }
   .kos table td.cenova {grid-area: cena; }
   .kos table td.napravo {grid-area: X;}
   .kos table tr.final {grid-template: auto / 75px 45px 1fr auto; grid-template-areas: 'nazev nazev cena cena'; align-items: center; row-gap: .5em; column-gap: .5em; }
   .kos table tr.final td.cenova { }
   .kos table tr.final td:first-of-type {grid-area: nazev;}
   .kos table tr.final td.napravo {display: none;}
   table.adresni td.odkazova {width: 90%; }
   #nhmenu { display: none; }
   .hmenu .hider { display:none!important; } 
}

@media (min-width: 1000px) {
   .hmenu .shower { display:none!important; }
   #xhmenu { display: none; }
   #kosinfo .xkos { display: none; } 
}

@media (max-width:949px) {
   gallery,.gallery.forkat,.uvodni .gallery { --sloupce:2 }
}

@media (max-width:899px) {
}

@media (max-width:849px) {
   .podkat { --sloupce:2; }
}

@media (max-width:749px) {
   .kform,#telo,.sloupec-levy,.sloupec-pravy { width: 98%; margin: auto; float: none; }
   #kat { display: none; }
   #nouicenaplace.noUi-horizontal { width: 85%; }
   .neuvodni #kat,.neuvodni #telo .hider { display:none!important; }
   .uvodni #telo .shower { display:none!important; }
   #paticka .pbox { width: 100%; margin-left: 0; } 
}

@media (min-width: 750px) {
   #telo .shower { display:none!important; } 
}

@media (min-width:550px) and (max-width:1099px) {
   .produkty .oddelovac:nth-child(4n) { display: none; } 
}

@media (max-width:649px) {
   .produkt.v2 { 
      grid-template: 1fr auto / 75px 1fr minmax(4em,auto) auto; 
      grid-template-areas: 'foto nazev nazev nazev' 'sklad sklad cena pright'; }
   .produkt.v2 .sklad {text-align: left;}
}

@media (max-width:599px) {
   #prodpresent {display: block; }
   .produkt-det .resphid { display:none;}
   .produkt-det fieldset .omezovac {width: 95%;}
}
   
@media (max-width:549px) {
   .obsah .left,.obsah .right { margin:.5em 0!important; float:none!important; display: block; }
   #naseptavac { text-align: left; }
   #nasepfoto { display: none; }
   #hledatObal { min-width: 0; width: 40px; }
   #hledatObal .q { display: none; }
   #hledatObal:not(.xsshow) .tlacitko { width: 100%; border-radius: 10px; }
   #hledatObal.xsshow { width: 90vw; position: absolute; left:5vw; z-index: 2000; }
   #hledatObal.xsshow .q { display: inline-block; }
   .slider2 .vnitrek { height: 500px; grid-template: 200px auto 1fr auto / 1fr auto; grid-template-areas:'foto foto' 'nadpis nadpis' 'popis popis' 'cena tlac'; }
   .slider2 .foto { text-align: center; }
   .slider2 .nadpis { margin-top: 0; }
   .slider2 .tlacitko,.slider2 .spodni { margin-bottom: 0; }
   .produkty { --sloupce:1; }
   .produkty .oddelovac {display: none;}
   .rozcestnik .box { width: 48.5%; margin-bottom: 1em; }
   .simpleform p label { width: 42%; }
   .simpleform p.cb label { width: 75%; }
   .prodFiltr .vyrbox { width: 49%; }
   .objednavka .adresa { width: 99%;}
   .objednavka .dodatky textarea { width: 53%; }
   .objednavka .dodatky label { width: 42%; }
   .objednavka .dodatky .cb label { width: 75%; }
}

@media (max-width:469px) { 
   #hlavicka { grid-template-columns: 120px auto 70px 70px; }
   .podkat { --sloupce:1; }
   .prodFiltr > div,.prodFiltr .settings > * { display: block; }
   .prodFiltr .settings, .prodFiltr .h, .prodFiltr .prvky,.prodFiltr .sender { width: 100%; margin-left: 0; margin-right: 0; }
   .prodFiltr .sender { text-align: right }
   .objednavka .radioobj label .tab1 { width: 60%; }
   .objednavka .radioobj label .tab2 { display: none; }
   .objednavka .radioobj label .tab3 { width: auto; flex-grow: 1; flex-shrink: 1; text-align: right; } }

@media (max-width:459px) {
}

@media (max-width:399px) {
   #hw-87kwowifjjowiklsadh666left { display: none; }
   .gallery { --sloupce:1; }
   .slider2 .bx-pager { background: url(/img/predel.png) no-repeat center 24px; height: 44px; bottom:-40px; }
   .slider2 .bx-pager-link { width: 24px; height: 24px; }
   .kform .sloup { width: 100%; padding:0; }
   #login form { padding: .25em; box-sizing: border-box; text-align: center; }
   #login form .pwrap,#login form > p,#login form button,#login form label,#login form input { width: 100%; float:none; display: block; text-align: center; box-sizing: border-box; }
   #login form > p label { display: none; }
   .xchlink { position: relative; margin-top: 1.5em; left:0; } 
}

/* special block rules */
@media (max-width:849px) and (min-width:750px), (max-width:549px) {
   .respgbg,.respgbg tbody,.respgbg tr,.respgbg td { display: block; width: 100%; } 
}

@media (max-width: 999px) {
   .column5 > div {width: 33%; }
}
@media (max-width: 899px) {
   .column4 > div { width: 50%; } 
}
@media (max-width:599px) {
   .column3 > div { width: 50%; }
   .column5 > div { width: 50%; } 
}
@media (max-width:499px) {
   .column2 > div { width: 100%; } 
}