/* ============================ misto pro import webfontů ============================ */


/* ============================ obecne prvky ============================ */
html, body { padding: 0; margin: 0; }
body { font-size: 16px; font-family: 'Open Sans', sans-serif; text-align: center; background: #f0f0f2; min-height: 100vh;}

a {text-decoration: underline; color: #156029; }
a img { border:0 }
img{ max-width: 100%; height: auto;}
h1 { margin: 1em 0; font-size: 1.875em; color: var(--mainbarva); }
.uvodni h1 {padding: 0 3%; }
h2 { /*margin: .6em 0 ; line-height:1.1em;*/ color: var(--mainbarva);}
h2.nomarginb { margin-bottom:0;}
h3 { line-height:100%; }
h1:first-letter {text-transform: uppercase}
h2 a { text-decoration: none; }
h3 a { text-decoration: none; }
h4 a { text-decoration: none;}
p {font-size: 1em; line-height: 160%;}
ul{ padding:0 0 0 15px; margin: 0 0 0 15px; }
ul li{ padding:0; margin-bottom: .5em;}
blockquote { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid #DDDDDD; margin: 0 0 1.5em; padding: 10px 14px;}
blockquote p { font-size: 1.2em; margin: 0;}
table {}
table th {}
table td {}
hr { width: 100%; height: 1px; margin: 8px 0;  }

:root{--mainbarva: #008852;}

/* ============================ časté vlastnosti ============================ */
.hid{ display: none; }
.blok { display: block; }
.blokradek { display: inline-block; }
.table { display:table; }
.tr { display:table-row; }
.td { display:table-cell; }
.vlevo,.left { float: left; }
.vpravo,.right { float: right; }
.cleaner { clear: both; width: 100%; height: 0px; display: block;}

.nalevo { text-align: left; }
.napravo { text-align: right; }
.nastred { text-align: center; }
.dobloku { text-align: justify; }
.line-top{ vertical-align: top; }

.bez-paddingu { padding: 0; }
.bez-marginu { margin: 0; }
.bez-ohraniceni { border: none; }
.pruhledne-pozadi { background: transparent none; }
.pozadi1x { background-repeat: no-repeat; }
.pozadileft { background: left center no-repeat; }
.pozadiright { background: right center no-repeat; }
.pozaditop { background: center top no-repeat; }
.pozadibottom { background: center top no-repeat; }
.pozadistred { background: center center no-repeat; }
.transparent { width: 100%; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);
               -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

.tucny  { font-weight: bold;}
.hubeny { font-weight: normal; }
.italika { font-style: italic }
.narovnany { font-style: normal; }
.podtrzeny { text-decoration: underline; }
.necarnuty { text-decoration: none; }
.preskrtnute {text-decoration: line-through; }
.mensi-pismo { font-size: .8em; }
.vetsi-pismo { font-size: 1.2em;  }
.pismo2x { font-size: 2em; }
.pismoUp { text-transform: uppercase; }
.prvniUp:first-letter { text-transform: uppercase; }

.kurzor-sipka { cursor: default; }
.kurzor-otaznik { cursor: help; }
.kurzor-ruka { cursor: pointer; }
.radius-maly {border-radius: 3px;}
.radius-stredni {border-radius: 5px;}
.radius-velky {border-radius: 8px;}

.hoverline {text-decoration: none;}
.hoverline:hover {text-decoration: underline;}

.bublifuk {border-bottom:1px dashed;text-decoration: none;}

/* ============================ časté vlastnosti per web ============================ */
.mainbarva{color:#156029;}
.secbarva{}
.tercbarva{}
.gbarva{color:#eee;}
.gbarvatext{color:#888;}
.mainbg{background-color:#156029; }
.secbg{}
.tercbg{}
.gbg{background-color:#f3f3f3;}
.secfontsize{}
.tercfontsize{}

.chyba { font-weight: bold; margin: 20px 0; }
.hlaska { font-weight: bold; padding: 20px; background-color: #aaeeaa}
.tlacitko {border:0; display: inline-block; cursor:pointer; text-align: center; background: var(--mainbarva); color: white; font-size:1em; text-decoration: none; font-weight: 700; padding: 1em 1.3em; border-radius: 5px;  color:#fff; text-decoration: none;line-height: 1em; }
.tlacitko.plac {padding: 5px 10px 5px 10px; }
.tlacitko:hover,
.tlacitko:active { background: #008852; }

.obalka-stranky{ height: auto; margin: 0 auto; position: relative; width: 1300px; padding: 0 calc( 50% - 650px ) 0; }

/* ============================ styly identifikované ============================ */

#graphics-container { position: absolute; left:0; top:0; height: auto; min-height:100%; width:100%;overflow:hidden;}

/* ============================ Hlavicka ============================ */

#hlavicka { background: var(--mainbarva); display:grid; grid-template-columns: 180px 0 1fr auto auto 0; align-items: center; 
            grid-template-areas:  'logo . hledej hmenu kosik xmenu';
}
#hlogo { grid-area: logo; }
#vyhledavani { grid-area: hledej; }
#hmenu { grid-area: hmenu; }
#hkosik { grid-area: kosik; }
#hXopener {grid-area: xmenu;}

#hmenu {margin: 0 1em;}
#hmenu a {color:#fff; }
#hmenu a .msp { padding: 1em;}
#hmenu a.login .msp { padding-left: 2.5em; background: url(/img/user.svg) 1em center no-repeat; }
#xmenu a.login .msp { padding-left: 1.5em; background: url(/img/user.svg) left center no-repeat; }
#hmenu a:not(.active):not(:hover) {text-decoration: none;}

#hXopener {display: none;}

#hkosik { margin: 15px 0; padding: 1.5rem 25px 1.5rem 60px; background: url(/img/cart.svg) 25px center no-repeat #fff; min-height: 1em; line-height: 1em; white-space: nowrap; font-weight: bold; text-decoration: none; color:#008852; position: relative; }
#hkosik.empty { padding: 1.5rem 40px 1.5rem 40px; background-position: center center; }
#hkosik:not(.empty) .punk {background:#000; position: absolute; left: 4.2em; bottom:1.66em; width: 1.66em; height: 1.66em; border-radius: .85em; display: block; color:#fff; overflow: hidden; font-size: .6em}

/* ========================= Vyhledávání ========================= */
#vyhledavani { margin: 0 2em 0 4em; position: relative; }
#vyhledavani form {background: #fff; border-radius: 5px;height: 45px; padding: 0 1em; margin: 0; }
#vyhledavani .vyhledavani { border:0; height: inherit; width: calc( 100% - 25px ); vertical-align: top; box-sizing: border-box;}
#vyhledavani .hledat { width:25px; height: inherit; vertical-align: top; background: url(/img/lupa.svg) center center no-repeat; font-size:0; border:0; cursor: pointer; }

#naseptavac { width:125%; position:absolute; top: 40px; left:12px; height: 280px; background: #fff; border: 1px solid #ddd; z-index: 100}
#naseptavac a { padding:0; margin:0;  text-decoration: none; }
#naseptavac a.naseppolozka { display:block;padding:3px 0 2px 2%;width:98%; height: 18px; overflow: hidden; clip: auto; text-align: left; line-height:18px; }
#naseptavac a.naseppolozka:hover, #naseptavac a.naseppolozka:focus { }
#naseptavac #nasepfoto { width:200px; text-align:center; position: absolute; top:-1px; left:-212px; height:275px;  border: 1px solid #ddd; background: #fff;  padding:5px }
#naseptavac #nasepfoto .nadpis { height:38px; padding-top: 7px; width:200px; overflow: hidden;  }
#naseptavac #nasepfoto .innernasep { height:200px; line-height: 200px; position:absolute; width: 200px; white-space: nowrap; }
#naseptavac #nasepfoto img { vertical-align: middle; position: relative; left:0; top:0; }

/* ============================ Boxy a struktury ============================ */
#stranka {text-align: left; padding: 40px 0; display: grid; grid-template-rows: auto; grid-template-columns:300px 1fr; column-gap: 30px; 
   grid-template-areas: 'sloup telo';
}
#telo {grid-area: telo;}
#lsloup {grid-area: sloup;}

#telo { background: #fff; border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25); }
.neuvodni #telo {padding: 0 3% 40px; }

#stred{ line-height: 1.4; margin: 0; }
.uvodni #stred{ padding: 0 3% 40px;}
#stred .anotace {  }

#stred p{ margin-bottom:1.2em; }
#stred blockquote p:last-child{ margin-bottom: 0; }
#stred p,#stred td{  }
#stred img {margin: 0 auto 0 auto;}
#stred p img,#stred td img { margin:0; }
#stred p img.left,#stred td img.left { margin-right: 15px; }
#stred p img.right,#stred td img.right { margin-left: 15px; }

ul.podkat { list-style-type:none; padding: 0; margin:-7px 0 0 0; }
ul.podkat li { width:28%; margin: 2%; line-height:120%; list-style-position: inside; overflow: hidden; border: 1px solid #eee; border-radius: 5px; display: inline-block;vertical-align: top;}
ul.podkat .pkfoto {display:block; height:140px; text-align: left; padding:12px 7%; position:relative; }
ul.podkat .pkfoto img {max-width: 100%; max-height: 100px; vertical-align: middle; margin: 40px 0 5px; padding:15px 0 0;}
ul.podkat li:hover {border: 1px solid #ccc; }
ul.podkat .posunute{ display:block;height:140px; line-height: 140px; text-align: right; max-width: 100%;}
ul.podkat .prekryv{ position:absolute; max-width: 100%;  text-decoration: underline; font-size: 1em; line-height: 1.2em; }
ul.podkat.bezfoto li {padding: 0; background-color: #ffc;}
ul.podkat.bezfoto li { margin:.75%; margin-left:0; margin-right: 1.5%; width: 30%; }
ul.podkat.bezfoto li a { padding: .65em 0;  display: block; text-decoration: none;}
ul.podkat.bezfoto .prekryv{ margin:0 .9em; position: relative; display: block; }

.fradek{ width:100%; margin: 30px 0 30px; }
.fradek .fotka{ display:inline-block; text-align: center; width: 33%; vertical-align: top; margin:5px 0; padding-bottom: 6px; }
.fradek .fotka img{ margin: auto; padding:2%; border: 1px solid #fafafa; max-width: 94%; margin-bottom: 2px;}
.fradek .fotka a{ margin:0; width: 100%;}
.fradek.prod .fotka{ width: 50% }

.file-link {list-style-type: none; padding-left: 0; margin-left: 0; max-width:700px; }
.file-link li { line-height: 1.2em;clear:both;border-bottom: 1px solid #eee;}
.file-link li a {width: 100%; display: block; text-decoration: none;padding: .9em 0;}
.file-link li a .tail { text-align: right; float:right;}
.file-link li a:hover .pod {text-decoration: underline;}
.file-link li img {vertical-align: middle; margin-right: 8px }

/* Postranní sloupec */
.lbox {padding: .5em 20px 1em; background: #fff; border-radius: 5px; margin: 2em 0; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25); }
.lbox h2 { line-height: 1.3; }
.lbox.contentnomargin {padding: .5em 0 0;}
.lbox.contentnomargin h2 {padding: 0 20px;}

.lbox a.doc {padding-left: 1.25em; background: url(/img/file.svg) left center no-repeat; }

/* postranní menu */
#kategorie {background: var(--mainbarva); padding: 10px 0; border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25); }
#kategorie h2 {margin: .5em 20px 1em; color:#fff; }

.switcher {border-bottom: 1px solid #fff; padding: 0 20px; margin: 10px 0; display: flex; align-items:stretch; justify-content: space-evenly; column-gap: 5px; }
.switcher .swa { background: #006d42; color: #fff; display: block; padding: .75em 0; text-align: center; flex-grow: 1; flex-shrink: 1; font-weight: bold; border-radius: 5px 5px 0 0; text-decoration: none; }
.switcher .swa.pick { background: #fff; color: #000; }

.kat {margin:10px; padding: 0; position:relative;}
.kat li { list-style-type: none; margin:2px 0 0; padding:0; background: url(/img/btnmenu.png) repeat-x; background-size: auto 100%; border-radius: 2px; font-weight: 600}
.kat li.special {background: #ba0;}
.kat li:hover { background: #062c19; }
.kat li.special:hover {background: #650;}
.kat li.open,
.kat li.open ul li { background:#fff;}
.kat li.open a {color:#000; font-weight: 700;}
.kat li.special a {color:#110;}
.kat li.special:hover a {color:#fff;}
.kat ul { margin: 0; border-top: 1px solid #e7e7e7; padding: .5em 0 1em; font-weight: 600;}
.kat ul li{ margin: 0; }
.kat ul ul{ margin: 0; border-bottom: 1px solid #e7e7e7; padding: .25em 0 .75em 40px; font-weight: 400;}
.kat ul ul li{ margin: 0; }

/*dopl�ky*/
.kat a {display:block; line-height:1.25; text-decoration: none; color:#fff; }
.kat .rozklik { margin:0; padding: 10px 5px; width:20px; height:1.25em; display: inline-block; vertical-align: middle; background: url(/img/plus.png) center center no-repeat; }
.kat li.open .rozklik { background-image: url(/img/minus.png);}
.kat li.open ul .rozklik { background-image: url(/img/plus2.png); }
.kat li.open ul li.open .rozklik { background-image: url(/img/minus2.png);}
.kat .empty { visibility: hidden }
.kat .katlink {position: relative; padding: 10px 5px;  margin:0; display:inline-block; width: calc( 100% - 30px ); box-sizing: border-box; vertical-align: middle; }
.kat ul a { line-height:1.2; }
.kat ul .rozklik {padding: .4em 5px;}
.kat ul .katlink {padding: .4em 5px;}
.kat li ul li a:hover,
.kat li ul li.active a { color:#339966;}
.kat li ul li.active ul li a { color:#000;}
.kat ul ul a { font-size: .9em}
.kat ul ul .rozklik {padding: .4em 5px;}
.kat ul ul .katlink {padding: .4em 5px;}
.kat li ul li.active ul li a:hover,
.kat li ul li.active ul li.active a { color:#339966;}

/*viditelnosti*/
.kat li ul { display:none; }
.kat li.open ul { display: block; }
.kat li.open ul li ul { display:none; }
.kat li.open ul li.open ul { display:block; }

/* newsletter */
.lbox form .post{ display: none;}
.lbox input[type='text'] {width: calc( 100% - 40px ); border: 1px solid #acacac; border-right: 0; border-radius: 5px 0 0 5px; background: white; height: 40px; box-sizing: border-box; padding: 0 0 0 1em; vertical-align: middle;  }
.lbox form .tlacitko{ background:#777 url(/img/nwsipka.svg) center center no-repeat; width: 40px; border-radius: 0 5px 5px 0; vertical-align: middle; height: 40px; font-size: 0;box-sizing: border-box;  }

/* ============================ Modul novinky ============================ */
.novinky {  }
.novinky .datum{ font-size: .6em; font-weight: normal; }
.novinky .oddel{ margin-bottom:2em; }
.novinky .anotace{ margin-bottom: 1em; }

/* ============================ Modul slider ============================ */

.slider { width:100%; height: 350px; position:relative; padding: 0; margin: 0 0 44px; border-bottom: 1px solid #e5e5e5;  }

.slider .navigace {  width:100%; position:absolute; height: 5px; bottom:35px; display:block; text-align: center;}
.slider .navigace a { width: 24px; height: 5px; margin:0 5px; display: inline-block; background:#e6e6e6; }
.slider .navigace .aktualni {background:#66b797;}

.slider #slider1 { height:100%; position:relative; overflow: hidden}
.slider #slider1 .fotka {margin: 50px 0 50px 4%; width:36%; height:250px; line-height: 250px; display: inline-block; vertical-align: top; text-align: center; }
.slider #slider1 .fotka img { vertical-align: middle }
.slider #slider1 .informace {display: inline-block; vertical-align: top; text-align:left; position: relative; margin: 50px 4% 0 4%;width: 52%;}
.slider #slider1 .informace .h2 { line-height: 1.3; height: 3.9em; overflow: hidden; position: relative; display: table-cell; vertical-align: middle;}
.slider #slider1 .informace .h2 a { text-decoration: none; color:#000; font-size: 1.0em; font-weight: 300; }
.slider #slider1 .informace .h2 a:hover { text-decoration: underline }
.slider #slider1 .informace .informace-vnitrek  { overflow: hidden; margin-bottom: 3em; }
.slider #slider1 .informace .informace-vnitrek .h2 { font-size: 1.5em; font-weight: 300; }
.slider #slider1  .popis {font-size: 0.875em; margin: 10px 30px 0 0px; line-height: 140%; height: 4.2em; overflow: hidden;}
.slider #slider1  .popis * {font-size: 1em; padding: 0; margin: 0; line-height: 1.4em;}

.slider p { margin: 0px; padding: 0px; }

.slider #slider1 .apart { display: flex; align-items: start; justify-content: space-between;}
.slider #slider1 .ceny { font-size: 1.4em; display: inline-block; vertical-align: top;}
.slider #slider1 .ceny .cenadph {color: var(--mainbarva); font-size: 1.0em; font-weight: 700; line-height: 100%; }
.slider #slider1 .ceny .cenabez {color: #444444; font-size: 0.75em; font-weight: 300; line-height: 120%; margin: 5px 0 0 0; }
.slider #slider1 .tlacitko { background: #777; vertical-align: top; padding-top: .66em; padding-bottom: .66em; margin-right: 5%; }

/* ============================ Drobeckova navigace ============================ */

.drobeckova { line-height: 1.2em; color:#888; margin-top: 30px; }
.drobeckova a {color:#888; }
.drobeckova .odkaz { padding:0 ; margin:0 10px 0 0;}

/* ============================ E-shop / Produkty ============================ */

/* Produkty */
.produkty {margin: 15px 0 40px; display: flex; row-gap: 1em; column-gap: 1em; flex-wrap: wrap; align-items: stretch; }
.uvodni .produkty {padding: 0 3%;}
.produkty .produkt { position:relative; width: calc( 33% - .67em ); box-sizing: border-box; border:1px solid #e5e5e5; border-radius: 5px; text-align: center; }
.produkty .link {  margin: 1em 0; padding: 0 5%; font-size: 17px; }
.produkty .link a { overflow:hidden;padding: 0 10px; height: 4.8em; display: block; color:#000; }
.produkty .fotka { height: 250px; line-height: 250px; margin: auto; vertical-align: middle; width:100%; }
.produkty .fotka a { margin: auto; }
.produkty .fotka img { margin: auto; vertical-align: middle; }
.produkt .ceny {text-align: right; display: inline-block; vertical-align: top; width: 56%; box-sizing: border-box; padding: 0 4% 0 2%; }
.produkt .neceny {text-align: left; display: inline-block; vertical-align: top; width: 44%; box-sizing: border-box; padding: 4px 2% 0 4%; }
.produkt .ceny p {margin:0; display: block; }
.produkt .neceny p {margin:0; display: block; }
.produkt .cenadph {font-size: 1.2em; font-weight: 700; color: black;}
.produkt .cenabez {font-size: 0.95em; font-weight: 300; color: black;}
.produkt .tlacitko { margin: 1em 0 1.25em; }
.produkt .kod {font-weight: 300; }
.produkt .stav {color:#f00;}
.produkt .stav.ok {color:var(--mainbarva); font-weight: bold;}
.produkt .stav.xtra {text-transform: uppercase; color:#090; font-weight: bold; }
.stitky { position:absolute; top: 90px; width: 35%;}
.stitky p { background: white; border-right: 1px solid silver; border-top: 1px solid silver; border-bottom: 1px solid silver; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; width: 100%; font-weight: 600; font-size: 0.750em; padding: 5px 0 5px 0;}
.stitky .novinka { color: #eb4040; }
.stitky .akce { color: #3762cc; }

.filtrForm {height:auto; padding: 10px; padding-top:7px; margin-top: 16px; position:relative; }
.filtrForm h4 { padding-top: 6px; margin-top :0; }
.filtrForm div.cbox {display: inline-block; vertical-align: top; width: auto; margin-right: 3%; width: 22%;overflow: hidden; margin-top: 6px;white-space: nowrap;}
.filtrForm div.cbox a { display: inline-block; white-space: normal; vertical-align: text-top; max-width: 80%; }
.filtrForm div.cbox input { vertical-align: text-top;}
.filtrForm div.Z {width:30%}
.filtrForm .f1 {float:left; width: 11%; height :100%}
.filtrForm .f2 {float:left; width: 78%; }
.filtrForm .f3 {float:left; width: 11%; height:35px; margin: auto; vertical-align: middle; position: absolute; top:50%; margin-top:-17px; right:1%}
.filtrForm .f3 .tlacitko{padding-left: 1em; padding-right: 1em;}
.filtrForm .jslider { width:60%; top:.9em; margin-left: 2%; }
.filtrForm .jslider .jslider-value {font-size: 12px; background: none transparent;}

.paging {margin: 1em; text-align: right; font-size: 1.1em;}
.paging a,.paging .a{ margin: 0 .25em; }
.paging .curpage{ font-weight: bold; }

.radzalozky {  border-bottom: 1px solid #eee; }
.radzalozky .zalozka { float: left; border: 1px solid #eee; border-bottom: 0; border-radius: 2px 2px 0 0; line-height: 2em }
.radzalozky .zalozka * { display: block; padding: 0 20px; }
.radzalozky .hid { display:none}

/* Produkt */
#produkt { }
#produkt .fotosloupec {width: 58%; display: inline-block; vertical-align: top; position: relative; float: left;}
#produkt .fotosloupec .stitky {position: absolute; top:0; left:0; width: auto;}
#produkt .fotosloupec .stitky p {margin: 10px 0; padding-left: 1em; padding-right: 1em; width: auto; text-align: center;}
#produkt .fotka-hlavni { text-align: center; white-space: nowrap; line-height: 250px; height: 252px; }
#produkt .fotka-hlavni img { vertical-align: middle; max-height: 100%;}
#produkt .fotocontainer { position: relative; padding: 2px 5%; }
#produkt .fotoinner { position: relative; }
#produkt .fotoinner a { width: 23%; margin:0 1%; white-space: nowrap; display: inline-block; height: 77px; line-height: 75px; text-align: center; }
#produkt .fotoinner a img { vertical-align: middle; }
#produkt .fotoinner .borderer { border: 1px solid #eee; width: 100%; height: 75px; display: block;}
#produkt .fotoinner img { vertical-align: middle;}
#produkt .fotocontainer .bx-prev,#produkt .fotocontainer .bx-next{ position: absolute; left:-5%; top:0; display: block; text-align: center; line-height: 77px; height: 77px; width: 5%; white-space: nowrap; margin:0; }
#produkt .fotocontainer .bx-next{ left:auto; right:-5%; }
#produkt .fotocontainer .bx-prev img,#produkt .fotocontainer .bx-next img { vertical-align: middle; }
#produkt .fotocontainer .fragment { text-align: center; }
#produkt .vpravo { display: inline-block; width: 38.4615%; }
#produkt .vpravo .radek { border-bottom: 1px solid #eee; padding: 6px 2%; font-size: 14px; }
#produkt .vpravo fieldset .radek { padding: 6px 0; }
#produkt .vpravo .radek label { width: 42%; display: inline-block; vertical-align: middle; color:#777; }
#produkt .vpravo .radek span { width: 58%; display: inline-block; vertical-align: middle; }
#produkt .vpravo .cradek {width: 100%; text-align: right;}
#produkt .vpravo .hlavnirespocena {font-size: 1.2em; font-weight: bold;}
#produkt .vpravo #procentaDiv {float:left; padding: .5em 1em; width: auto; text-align: left; font-weight: bold; color:#fff}
#produkt .vpravo #staracenaDiv,#produkt .vpravo #bezDPHDiv{color:#777; margin-top:1.5em}
#produkt .vpravo #bezDPHDiv2 {color:#777; margin-top:1.5em;font-size: .8em;}
#produkt .vpravo #staracenaDiv {text-decoration: line-through;}
#produkt .vpravo #cenaDiv {margin-top: 1.25em}
#produkt .vpravo .zvyrazni,#produkt fieldset #summall {font-size: 2em; font-weight: bold; white-space: nowrap; vertical-align: middle; margin-left: 10px;}
#produkt .vpravo .zvyraznimene {font-size: 1em; font-weight: bold; white-space: nowrap; vertical-align: middle; margin-left: 10px;}
#produkt .vpravo #cenaDiv .mensi { font-size: .8em; color:#aaa; }
#produkt .vpravo #dostupnost { color:#f00; }
#produkt .vpravo #dostupnost.ok { color:#000; }
#produkt .vpravo .okce { color:#2a0; font-weight: bold; }
#produkt fieldset { border:0; padding: 18px 1%; margin: 1.5em 0 0; text-align: right}
#produkt fieldset.uzsi { padding: 18px 5%;}
#produkt fieldset .omezovac { width: 45%; display: inline-block; vertical-align: top; margin: 0 2.5%;}
#produkt fieldset .radek { margin-bottom: 15px; text-align: left }
#produkt fieldset .cradek { margin-bottom: 20px;}
#produkt fieldset label { width: 40%; display: inline-block; vertical-align: middle; color:#777; }
#produkt #bvarianta {vertical-align: middle; display: inline-block;}
#produkt fieldset .cradek span{ text-align: right; }
#produkt fieldset .cradek.mensi { color:#aaa; margin-top: -10px; }
#produkt fieldset select { width: 60%; display: inline-block; vertical-align: middle; padding: .5em 0; }
#produkt fieldset .input { width: 30%; display: inline-block; vertical-align: middle; text-align: left }
#produkt fieldset .input input { height: 2em; width: 100%;vertical-align: middle; background: #fff; border: 1px solid #aaa; box-sizing: border-box; padding: 0 .1em 0 .25em; font-size: 16px; text-align: right; }
#produkt fieldset .input .respospin { width: 2em; height: 2em; font-size: 1.5em; display: none; vertical-align: middle; text-align: center; background: #aaa; color:#000; cursor: pointer; font-weight: bold; }
#produkt fieldset .input .respospin::after { display: block; width: 100%; height: 100%; line-height: 1.75em; }
#produkt fieldset .input .respospin.plus::after { content: '+' }
#produkt fieldset .input .respospin.minus::after { content: '−' }
#produkt fieldset button { width: 65%; margin-left: 5%; display: inline-block; vertical-align: middle; }
#produkt fieldset button.pocetni { width: 95%; margin-top: 1em }
#produkt fieldset .mbal { width:58%; padding-left: 42%; text-align: left; font-size: .8em; }
#produkt .moznosti {margin: 10px 0; border: 1px solid #eee; border-bottom: 0; }
#produkt .moznost {  border-bottom: 1px solid #eee; display: table; width: 100%; height: 60px; cursor: pointer}
#produkt .moznost span, #produkt .moznost a { display:table-cell; vertical-align: middle }
#produkt .moznost .cena { width: 20%; text-align: center;}
#produkt .moznost a { width: 15%; text-align: center; }
#produkt .moznost .forimg { width: 14.5%; text-align: center; }
#produkt .moznost .forimg.b { width: 12%;  }
#produkt .moznost .forimg img { max-width: 80%; max-height: 60px; text-align: center; }
#produkt .moznost .pcast { display: table-cell; width: 9%; vertical-align: middle;text-align: center; border-left: 1px solid #eee; }
#produkt #zalozky {margin: 1.5em 0;}

a.more { margin:auto; display: block; width: 150px;}

/* Kosik */
#kos {  }
#kos .tabulka { width: 98%; padding-top: 10px; margin-bottom: 30px; }
#kos .tabulka thead th { height: 25px;  text-align: center; padding: 0 10px; background-color: #f8f8f8;}
#kos .tabulka thead th.p1 { text-align: left;}
#kos .tabulka td { height: 60px; vertical-align: middle; text-align: center }
#kos .tabulka .hajlajt td { background-color: #ff9; }
#kos .tabulka td.odkazova { text-align: left }
#kos .tabulka td.cenova { text-align: right; white-space: nowrap; }
#kos .tabulka td.inputovka { white-space: nowrap; padding: 0 1em; }
#kos .tabulka tr:nth-last-of-type(2) td {text-align: left; }
#kos .tabulka tr:nth-last-of-type(2) td:nth-child(2) {text-align: right; }
#kos .tabulka td img { max-height: 60px; max-width: 60px; }
#kos .odeslat { width: 169px; height: 35px; margin-left: 0px; margin-top: 0px; display: block; }
#kos form a.plusminus {background: #aaa; color:#000; display:inline-block; vertical-align: middle; text-decoration: none; font-weight: bold; }
#kos form a.plusminus:after { display: block;width:2em; height: 2em; line-height: 2em; text-align: center; }
#kos form a.plusminus.p:after { content: '+' }
#kos form a.plusminus.m:after { content: '−' }
#kos form input.mnozstevni { height: 2em; width: 4em;  vertical-align: middle;border: 1px solid #aaa;box-sizing: border-box; padding: 0 .1em 0 .25em;font-size: 16px; background: #fff; height: 2em;}
#kos .tlacitko { display:inline-block; vertical-align: middle; float:right;}
#kos .zpet { float:left; }

#kos.addrz .tabulka td{ border-bottom: 1px solid #eee; padding: .5em 0; height:auto;}

/* Objednavka */
#objednavka{ margin: 0;  }
#objednavka .tablike {display: table; width: 100%; }
#objednavka .tabhalf{ width: 50%; display: table-cell; vertical-align: top; }
#objednavka .tabhalf.grow{ width: 45%; }
#objednavka .tabhalf.shrink{ width: 55%; }
#objednavka .tabhalf label { width: 45%; display: inline-block; }
#objednavka .tabhalf label[for="fakt"] {width: 100%;}
#objednavka .tabhalf.grow label { width: 80%; display: inline-block; }
#objednavka .tabhalf input[type=text],
#objednavka .tabhalf select { width: 45%; }
#objednavka .cwarn {color:#f00; border: #f00 solid 1px; padding: 1em; margin: 0 5%;}
#objednavka .dodatky{ width: 100%; display: block;  }
#objednavka .dodatky label { width: 22.5%; display: inline-block; }
#objednavka .dodatky input[type=text],#objednavka .dodatky textarea { width: 40%; }
#objednavka .dodatky textarea { vertical-align: top; height: 6em; }
#objednavka .zpdp {display: block; padding-left: 25px; margin-bottom: .25em; position: relative;}
#objednavka .zpdp input { position: absolute; left:0; top:1px;}
#objednavka table.summary { width: 95%; padding-top: 10px; margin-bottom: 30px; }
#objednavka label[for="Podminky"] { padding-left: 30px; position: relative; display: block; }
#objednavka label[for="Podminky"] input {position: absolute; top:1em; left:0;}
#objednavka .tlacs { margin-top: 16px; }
#objednavka a.tlacitko { display: inline-block; }

#regtab p > label:first-child {width:170px; display:inline-block; vertical-align: middle; }
#regtab.mensilabel p > label:first-child {width:100px;}
#regtab p > input[type=text],#regtab p > input[type=password] {width: 300px; max-width: calc( 100% - 200px ); vertical-align: middle;}
#regtab p > input[type=checkbox] {vertical-align: middle;}
#regtab p > input[type=checkbox]+label {width: 60%;vertical-align: middle;}
#regtab p {margin: 6px 0;}
#regtab .post {display: none;}

#fakthid {border:0;padding: 0;}

.processbox { display: flex; padding: 0 20% 2.5em; justify-content: center; align-items: center; }
.processbox .step {flex-grow: 0; position: relative;  }
.processbox .step::before {font-size: 2em; font-weight: bold; line-height: 50px; text-align: center; width: 50px; display: block; border: 1px solid #004a2b; color:#004a2b; background: #fff; box-sizing: border-box; border-radius: 3px; }
.processbox .step.invert::before { background: #004a2b; color:#fff; }
.processbox .step.s1::before { content:'1'; }
.processbox .step.s2::before {content:'2'; }
.processbox .step::after {position: absolute; bottom:-1.75em; display: block; left:50%; transform: translateX(-50%); white-space: nowrap;}
.processbox .step.s1::after {content: 'Košík'}
.processbox .step.s2::after {content: 'Dodací údaje'}
.processbox .line {flex-grow: 1; border:1px solid #004a2b; box-sizing: border-box; height: 2px; margin: 24px 0;}

.roztaznik {min-width: 100%; overflow:auto;}
.roztaznik table {width: 100%;}
.roztaznik thead td,.roztaznik td {padding: .5em 1em; text-align: center; vertical-align: middle; border:1px solid #ddd; border-top: 0; border-left: 0;}
.roztaznik thead td {border-top: 1px solid #ddd;}
.roztaznik .info {text-align: left;border-left: 1px solid #ddd; background: #eee;}
.roztaznik .info,.roztaznik thead td {font-weight: bold;background: #eee;}
.roztaznik .info.center {text-align: center;}
.roztaznik tbody tr:nth-child(even) td{background: #f8f8f8;}
.roztaznik tbody tr:nth-child(even) td.info { background: #eee;}
.roztaznik .wpic { border:0; background: transparent; vertical-align: middle;}

/* ============================ Kontaktní formulář ============================ */
.kontaktform #mailform { padding: 20px; margin: 5px 0;}
.kontaktform #mailform input[type=text] {width: 100% }
.kontaktform #mailform input[type=submit] {margin-top:15px }
.kontaktform #mailform textarea { width: 100%}
.kontaktform #mailform label { width: 100%}
.kontaktform #mailform .post {display: none}
.kontaktform #mailform .frmhlaska { margin:0 0 15px 0; font-size: 1.3em; font-weight: bold}
.kontaktform #mailform .vlevo {width:45%;}
.kontaktform #mailform .vpravo {width:45%; }
.kontaktform { text-align: left; width: 80%}

.nwform .post{display:none;}

/* ============================ Paticka ============================ */

#paticka {  background: #fff; padding-top: 3em; padding-bottom: 3em; text-align: left; }


/*========= cookies ========================================================*/
@media (min-width: 689px){
   #cm {bottom:.75em;}
   #cm.cloud {max-width: 800px; padding: 1em; }
   .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; }

/* ============================ Responzivita ============================ */

#hXopener {display: none; }

@media (max-width: 1350px) {
   .obalka-stranky{ margin: 0 auto; width: 94%; padding: 0 3%; }
}

@media (max-width: 1299px) {
   #vyhledavani { margin: 0 0 0 2em; position: relative; }
}

@media (max-width: 1099px) {   
   #hlavicka { grid-template-columns: 120px 1fr auto 0 auto auto; column-gap: 10px; }
   #hmenu {display: none; }
   #hXopener { background: url(/img/3c.svg) center center no-repeat; width: 70px; height: 100%; display: block; color: transparent; }
   #hXopener.greyed { background-color: #777; }
   #hsubhead {position: absolute; top:100%; left:0; width: 100%; background: #777; z-index: 1000;padding: 1em 0 0; }
   #hsubhead h2 {display: none; }
   #xkat {text-align: left;}
   #xmenu {padding: 0 0 1em; background: var(--mainbarva); text-align: left;font-weight: 600;}
   #xmenu a {padding: 1em; display: block; text-decoration: none; color:#fff; }
}

@media (max-width: 999px) {
   #stranka { grid-template-areas: 'telo' 'sloup'; grid-template-rows: auto auto; grid-template-columns: 1fr; }
   #kategorie {display: none;}

   #stred .fradek .fotka{ width: 33% }
   
   #produkt .vpravo .radek label {width: 100%;}
   #produkt .vpravo .radek span {width: 100%; text-align: right;}
   #produkt fieldset { text-align: center;}
   #produkt fieldset .input {width: auto; display: block; margin-bottom: 1em;text-align: center;}
   #produkt fieldset .input input {width: calc(80% - 6em); padding:0 .75em; height: 3em;
                                   appearance: textfield;
                                   -moz-appearance: textfield;
                                   -webkit-appearance: textfield;  }
   #produkt fieldset .input .respospin {display: inline-block;}
   #produkt fieldset select {width: 80%; margin-right: .9em; height: 3em; padding: 0 2.75em 0 0; text-align: right;}
   #produkt fieldset .mbal {text-align: right; padding: 0; width: 90%;}
   #produkt fieldset button {width: 100%; margin-left: 0;}

   #objednavka .tablike {display: block;}
   #objednavka .tabhalf,#objednavka .tabhalf.shrink,#objednavka .tabhalf.grow {width: auto; display: block;}
   #objednavka .dodatky textarea {width: 75%}

   #kos .tabulka thead {display:none;}
   #kos .tabulka,#kos .tabulka tbody {display:block;}
   #kos .tabulka tr {display:flex; flex-wrap: wrap; border-bottom: 1px solid #aaa; align-items: stretch; }
   #kos .tabulka tr td {display: block; height: auto; padding: .5em 0;}
   #kos .tabulka tr td.resphide {display: none;}
   #kos .tabulka tr td.odkazova {order: 1; width: 90%;}
   #kos .tabulka tr td.mazaci {order: 2; width: 10%;}
   #kos .tabulka tr td.inputovka {order: 3; width: 47%; text-align: center; padding: .5em 3% .5em 0; }
   #kos .tabulka tr td.cenova {order: 4; width: 47%; padding: .5em 0 .5em 3%; }
   #kos .tabulka tr input.mnozstevni { text-align: right; width: calc(70% - 6em); height: 3em;padding: 0 .75em;
                                                 appearance: textfield;
                                                 -moz-appearance: textfield;
                                                 -webkit-appearance: textfield;}
   #kos form a.plusminus {font-size: 1.5em; height: 2em; width: 2em;}
   #kos .tabulka tr th { width: 50%; }
   #kos .tabulka tr:last-of-type {border-bottom: none; }
   #kos .tabulka tr:last-of-type th {width: 50%; }
   #kos .tabulka tr:nth-last-of-type(2) {border-bottom: none; }
   #kos .tabulka tr:nth-last-of-type(2) td {width: 50%; }
   #kos .tabulka tr:nth-last-of-type(3) {border-bottom: none; }
   #kos .tabulka tr:nth-last-of-type(3) td {width: 50%; }
   #kos .tabulka tr:nth-last-of-type(3) td.cenova {padding: .5em 0; }
   #kos .tabulka td {text-align: left; }
   #kos .tabulka td[align=right] {text-align: right; }
   #kos .tabulka th[align=right] {text-align: right; }
}

@media (max-width: 749px) {
   #hkosik,#hkosik.empty {background: #007949 url(/img/cart_w.svg) center center no-repeat; padding: 1rem 25px 1rem 25px; }
   #hkosik .cislo {display: none;}
   #hkosik:not(.empty) .punk {left: 2.7em; bottom:.7em; }

   #naseptavac { width:100%; left:0; height: auto; }
   #naseptavac .nasepsekce { border-bottom: 1px solid #ddd; }
   #naseptavac a.naseppolozka { padding:9px 1% 9px 1%;height: auto; }
   #naseptavac #nasepfoto { display: none; }

   #produkt .fotosloupec { width: 100%;}
   #produkt .vpravo { float:none;width: 100%;}
   #produkt .vpravo .radek label {width: 50%;}
   #produkt .vpravo .radek span {width: 50%;}
   #produkt .vpravo .respocena:not(.hid) {display:block;}
   #produkt .vpravo .cradek {display:none;}

   ul.podkat li,ul.podkat.bezfoto li { width:48%; }
   .kontaktform { width: 90%}
   .slider #slider1 .informace div a {font-size: 1em;}

   .hiderwrap{max-height: 0; overflow: hidden; position: relative;  }
   .hiderwrap.part{max-height: 80px;/* při řádku 25.6px, 3 řádky pro text + několik px na detekci nepotřebnosti */}
   .hiderwrap.part::after {content: '…'; display: block; position: absolute; right:0; bottom:4px;}
   .hiderwrap.open{max-height: none;}
   .hiderwrap.open.part::after {content: ''}
   .tlacitko.unhidebtn{display: block; width: 80%; margin: 1em auto; }
   .tlacitko.unhidebtn::before{content: 'Zobrazit'; display: inline-block; padding-right: .25em;}
   .tlacitko.unhidebtn.open::before{content: 'Skrýt'}
   .tlacitko.unhidebtn.part::before{content: 'Zobrazit více'; padding-right: 0;}
   .tlacitko.unhidebtn.open.part::before{content: 'Zobrazit méně'}
   #stred .hiderwrap :first-child {margin-top: 0;}
   #stred .hiderwrap :last-child {margin-bottom: 0;}
   .paging {text-align: center;}

   #objednavka .zpdp {margin-bottom: 1em; }

   .neuvodni .hider {display: none;}
   .uvodni .shower{display: none;}
   .shider {display:none;}
}

@media (min-width: 755px) {
   #produkt .vpravo .respocena {display:none;}
   .tlacitko.unhidebtn {display: none;}
}

@media (max-width: 680px) {
   .radzalozky .zalozka { float: none; display: inline-block; box-sizing: border-box; width: 50%; }
   .radzalozky .zalozka:nth-child(even) { text-align: right; }
   .produkty .produkt { width: calc( 50% - .67em ); }
}

@media (max-width: 620px) {
   .filtrForm .f1 { width: 15%; }
   .filtrForm .f2 { width: 74%; }
   .filtrForm div.cbox {width: 30%;}
   .filtrForm .jslider { width:70%;}
}

@media (max-width: 590px) {
   #kos .tabulka tr input.mnozstevni { width: calc(100% - 6em); }
   #objednavka #tab {display: block; }
   #objednavka .adresa{ width: 100%; display: block; }
   #objednavka .dodatky label { width: 45%; }
   #objednavka .dodatky input[type=text],#objednavka .dodatky textarea { width: 45%; }
   #zalozky .radzalozky .zalozka {width: 49%; text-align: center; border: 1px solid #eee;}
   #zalozky .radzalozky .zalozka * {padding:0;}
   #zalozky .radzalozky {border:0;}
   .kontaktform { width: 100%}
}

@media (max-width:530px) {
   .slider #slider1 .fotka,.slider #slider1 .informace {float:none; width: 96%; padding: 0 2%; margin:0 auto; }
   .slider,.slider #slider1 {height: 450px;}
   .slider .navigace { bottom: -10px; }
}

@media (max-width:499px) {
   #vyhledavani {min-width: 0; width: 40px; margin: 0; padding: 0; }
   #vyhledavani .vyhledavani {display: none;}
   #vyhledavani:not(.xsshow) form {padding: 0; background: #33a075; }
   #vyhledavani:not(.xsshow) .hledat {width: 100%;background-image: url(/img/lupa_w.svg);}
   #vyhledavani.xsshow { width: 95vw; position: fixed; top:17px; left: 2.5vw; z-index: 1000; background: #fff; }
   #vyhledavani.xsshow .vyhledavani {display: inline-block;}
}

@media (max-width:470px) {
   #stred .fradek .fotka{ width: 50% }
   ul.podkat .pkfoto {height: auto;}
   ul.podkat .pkfoto .prekryv {position: relative;}
   ul.podkat .pkfoto .posunute {display: none;}
   ul.podkat li,ul.podkat.bezfoto li { width:98%; text-align: left; }
   .filtrForm .f1 { width: 20%; }
   .filtrForm .f2 { width: 65%; }
   .filtrForm .f3 { width: 15%; }
   .filtrForm div.cbox {width: 47%;}
   .filtrForm .jslider { width:80%;}
   #zalozky .radzalozky .zalozka {width: 49%; text-align: center; border: 1px solid #eee;}
   #zalozky .radzalozky .zalozka * {padding:0;}
   #zalozky .radzalozky {border:0;}
   #kos .resphide {display: none;}
   #kos .prepocitat {margin-right: 0;}
   .kontaktform #mailform .vlevo { width:90%; }
   .kontaktform #mailform .vpravo { width:90%; float:left;}
   .slider .tlacitko {display: none;}
   .produkty .produkt { width: calc( 100% - .67em ); }
}

@media (max-width:399px) {
   #hlavicka { grid-template-columns: 95px 1fr auto 0 auto auto; }
   #objednavka .tabhalf label {width: 100%;}
   #objednavka .tabhalf input[type="text"], #objednavka .tabhalf select, #objednavka .dodatky textarea {width: 100%; box-sizing: border-box;}
   #objednavka .tlacitko { display: block; margin-bottom: 1em; float: none; width: 100%; box-sizing: border-box; }
   #regtab p > label:first-child {width:100%;  }
   #regtab.mensilabel p > label:first-child {width:100%;}
   #regtab p > input[type=text],#regtab p > input[type=password] {width: 100%; max-width: none; }
}