/* fonty */
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/lext400i.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/l400i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/lext600i.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/l600i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/lext800i.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/l800i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/lext400n.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/l400n.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/lext600n.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/l600n.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/lext800n.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/opensans/l800n.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Pridi';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/img/pridi/lext500n.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pridi';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/img/pridi/l500n.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Pridi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/img/pridi/lext600n.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pridi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/img/pridi/l600n.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Obecne elementy */
html, body { padding: 0;margin: 0; }
html { font-family: 'Open Sans',Arial, sans-serif; font-size: 15px; line-height: 2; color:#444; background: #fff; }

/* Vlastnosti */
.hid{ display: none; }
.valign-top{ vertical-align: top; }
.radkovani-vetsi{ line-height: 150%; }
.vlevo { float: left; }
.vpravo { float: right; }
.cleaner { clear: both; width: 100%; height: 0px;}
.text-vlevo { text-align: left; }
.text-vpravo { text-align: right; }
.text-na-stred { text-align: center; }
.text-do-bloku { text-align: justify; }
.bez-paddingu { padding: 0; }
.bez-marginu { margin: 0; }
.bez-ohraniceni { border: none; }
.pruhledny { background: transparent none; }
.max-sirka { width: 100%; }
.mensi-pismo { font-size: 80%; }
.tucny  { font-weight: bold;}
.normalni-pismo { font-size: 100%; }
.vetsi-pismo { font-size: 120%; }
.pismo2x { font-size: 200%; }
.posledni { margin-bottom: 0px; padding-bottom: 0px; }
.kurzor-sipka { cursor: default; }
.kurzor-otaznik { cursor: help; }
.kurzor-ruka { cursor: pointer; }
.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; }
.radius {border-radius: 10px ; -moz-border-radius: 10px ; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; -webkit-border-radius: 10px }
.preskrtnute {text-decoration: line-through }
.left{ float:left }
.right{ float:right }
.zvyrazneno {font-weight: bold;}
.italika {font-style: italic}

.tlacitko {background: var(--mainbarva); color:#fff; font-weight: bold; border-radius: 5px; padding: .5em 1.25em; white-space: nowrap; text-decoration: none; font-size: 1rem; border:0; cursor: pointer;}
.tlacitko:hover { text-decoration: none; }

/* ============================ konkretne obecne elementy ============================ */
:root {--mainbarva: #77bd52; --secbarva:#68553E; }
body{ }
h1 { font-family: 'Pridi','Times new Roman',serif; font-size: 36px; font-weight: bold;color:var(--secbarva); line-height: 1.1; margin: .6em 0; }
h2 { font-family: 'Pridi','Times new Roman',serif; font-size: 30px; font-weight: normal; color:#578B3C; line-height: 1.2; }
h2.doublespace { margin-top: 1.5em }
h3 { font-family: 'Pridi','Times new Roman',serif; font-size: 22px; font-weight: normal; color:var(--secbarva); line-height: 1.3;  }
h1:first-letter,h2:first-letter {text-transform: uppercase}
h2 a { text-decoration: none; }
h3 a { text-decoration: none; }
h4 a { text-decoration: none;}
a { text-decoration: underline; color: var(--mainbarva); }
a:hover { text-decoration: underline; }
a img { border:0 }
hr { width: 100%; height: 1px; margin: 8px 0;  }
img{ max-width: 100%; }

#chyba { font-weight: bold; margin: 20px 0; }
#hlaska { padding: 10px 0; }
.max-sirka {margin: auto; width: 94%; max-width: 1370px; }

/* ============================ Hlavicka ============================ */
#hlavicka {
   grid-template: auto 20px auto / 160px 145px 1fr auto auto ;
   grid-template-areas: 'logo slogan hledani kontakt kos' 'logo . . . pvlajky' 'menu menu menu menu menu';
}
#hlogo {grid-area: logo;}
#hslogan {grid-area: slogan; line-height: 1.5; }
#hhledej {grid-area: hledani; padding: 0 15%;}
#hkontakt {grid-area: kontakt;}
#hkosik {grid-area: kos;}
#hmenu {grid-area: menu}
#pvlajky {grid-area: pvlajky}
#xhmenu {grid-area: xmenu}

#hlavicka {display: grid; row-gap: 1em; column-gap: 4%; padding-top: 1em; margin-bottom: -2em; background: #fff; align-items: center; }

#hkontakt { padding-left: 60px; background: url(/img/icon_phone.svg) left center no-repeat; line-height: 1.5; }
#hkontakt p {margin: 0;}
#hkontakt .otazka {color:#777; }
#hkontakt .cislo {color:var(--mainbarva); font-weight: bold; }

/* ========================= Košík ========================= */
#kosinfo {padding-left: 45px; min-height: 45px; display: flex; background: url(/img/icon_cart.svg) left center no-repeat; position: relative; text-decoration: none; }
#kosinfo .hider { align-self: center; padding-left: 1em; color:var(--secbarva); font-weight: bold; font-size: 18px; }
#kosinfo.full::after { display: block; position: absolute; width: 12px; height: 12px; background: var(--secbarva); border-radius: 6px; top:32px; left:32px; content: ' '; }
#kosinfo:not(.full) .hider { display:none; }

#pvlajky {display: flex; justify-content: space-between; justify-self: right; width: 65px; }

/* ========================= Vyhledávání ========================= */
#hhledej {justify-self: right;}
#vyhledavani { position: relative; height:42px; border-radius: 21px; padding:0 5%; background: #f2f2f2;  }
#vyhledavani .vyhledavani { border:0; height: 42px; padding: 0; padding-left: .33em; width: calc( 100% - 42px ); box-sizing: border-box; background: transparent;vertical-align: middle; font-size: 16px; }
#vyhledavani button { background: url(/img/icon_search.svg) center center no-repeat transparent; height:42px; width: 42px; padding: 0; font-size: 0; cursor:pointer; border:0; vertical-align: middle; }

#naseptavac { width:110%; position:absolute; top: 40px; left:-1px; height: 330px; background: #fff; border: 1px solid #cecece; z-index: 100}
#naseptavac a { padding:0; margin:0;  text-decoration: none; color:#3e3e3e; }
#naseptavac a.naseppolozka { display:block;padding: 0 5%;width:90%; overflow: hidden; clip: auto; text-align: left; overflow: hidden; white-space: nowrap; line-height:39px; border-bottom: 1px solid #e9e9e9; }
#naseptavac a.special {  color:#32940d; text-decoration: underline; margin-top: 1px; margin-bottom: 15px; border-bottom: 0; border-top: 1px solid #e9e9e9; }
#naseptavac a.naseppolozka:hover, #naseptavac a.naseppolozka:focus { background: #33930d; color: #fff; text-decoration: none;}
#naseptavac #nasepfoto { width:240px; text-align:center; position: absolute; top:-1px; left:99.5%; height:320px;  border: 1px solid #cecece; background: #fff;  padding:5px }
#naseptavac #nasepfoto .nadpis { height:38px; margin-top: 245px; width:240px; overflow: hidden;  }
#naseptavac #nasepfoto .innernasep { height:240px; line-height: 240px; position:absolute; width: 240px }
#naseptavac #nasepfoto img { vertical-align: middle; position: relative; left:0; top:0; }
#naseptavac .zdrc { width:90%; padding:0 5%;}
#naseptavac .skrt { display: inline-block; width: 5%; }
#naseptavac label { display: inline-block; width: 24%; }

/* ========================= Menu ========================= */
#hmenu {display: flex; align-content: stretch; width: 100%; border-radius:7px; background: var(--mainbarva);font-size: 19px;line-height: 1.2; }
#hmenu .radic { position: relative; }
#hmenu a { display: inline-flex; color:#fff; text-decoration: none; height: 100%; align-items: center; box-sizing: border-box; }
#hmenu .radic > a { text-transform: uppercase; }
#hmenu .radic.active > a { text-decoration: underline; }
#hmenu .radic:hover,#hmenu .radic.active { background: #578b3c; }
#hmenu .radic:first-of-type:hover,#hmenu .radic:first-of-type.active { border-radius: 7px 0 0 0; }
#hmenu .msp {display: block;}
#hmenu .msp.l1 {padding: 1em; text-align: center;}
#hmenu .roller .msp.l1 {padding-right: 1.5em; background: url(/img/icon_menu-arrow.svg) calc( 100% - .5em ) center no-repeat;}

#hmenu .podmenu { width:max-content; max-width: 250px; position: absolute; left:0; top:100%;background: #578b3c; padding: .5em 0; z-index: 20; font-size: .85em; }
#hmenu .radic:not(:hover) .podmenu { display: none; }
#hmenu .podmenu,#hmenu .podmenu a.active { text-decoration: underline; }
#hmenu .msp.l2 {padding: .5em 1.5em;}

#hmenu #vlajky { text-align: right; flex-grow: 1; white-space: nowrap; }
#hmenu #vlajky a { padding: 1em; font-weight: bold; border-left: 1px solid #fff; }
#hmenu #vlajky a.active { background: #578b3c; }

#xvlajky { text-align: center; }
#xvlajky a { padding: 1em; margin: 0 1em; font-weight: bold; }

#xhmenu {position: relative; z-index: 1000;}
#xhmenu .hdiv {height: 1px; background: #ccc; margin: 1em 0; }
#xhmenu .shower {cursor: pointer; position: relative; z-index: 1001;}
#xhmenu .menuwrap { background: rgba(255,255,255,.95); position: fixed; width: 100vw; height: 100vh; box-sizing: border-box; padding: 1em 18% 4em; left:0; top:0; overflow: auto; }

:root {--wastemenu-color: #000; --wastemenu-xcolor: #000; --wastemenu-lwidth: 9%; --wastemenu-border: 9%; }
#xhmenu .wasteofspace{  height: 2rem; min-width: 2rem; font-size: 0; display: inline-block; vertical-align: middle; overflow: hidden; padding: 0;
   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% 
      );
}
#xhmenu .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%
      );
}
/* ============================ Obsah ============================ */
#stranka {
   display: grid; grid-template: auto 1fr / 24% 1fr; 
   grid-template-areas: 'lnavi obsah' 'lsloup obsah'
}
#sidenav {grid-area: lnavi;}
#sloupec-levy {grid-area: lsloup;}
#telo {grid-area: obsah;}

#mainbg { background: linear-gradient(to bottom,#f7f5f0 0%,#fff 100%); padding-top: 3.5em; }
#stranka { border-radius: 7px; column-gap: 2%; }

#telo {background: #fff; padding: 1.5em 2%; box-sizing: border-box; }
#stred{ }
#stred p{ margin-bottom:20px; }
#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: .75em; }
#stred p img.right,#stred td img.right { margin-left: .75em; }
#stred a:hover{ }

#telo ul.podkat { list-style-type:none; padding: 0; margin: 0; display: flex; row-gap: 1.5em; column-gap: 3%; flex-wrap: wrap; align-items: stretch; font-size: 16px; font-weight:bold; }
#telo ul.podkat li { width: 22.75%; border-radius: 7px; overflow: hidden; position: relative; box-shadow: 0 2px 8px -4px #777; }
#telo ul.podkat a { color:#578b3c; display: block; height: 100%; width: 100%; }
#telo ul.podkat a:not(:hover) { text-decoration: none; }
#telo ul.podkat .text { display: block; padding: .5em 1em; }
#telo ul.podkat .image { display: block; }
#telo ul.podkat .image img { width: 100%; height: 100%; object-fit: none; }
#telo ul.podkat.sfoto a {display:grid; grid-template: 135px 1fr / 100%; grid-template-areas: 'image' 'text'; }
#telo ul.podkat.sfoto .text { grid-area: text; }
#telo ul.podkat.sfoto .image { grid-area: image; }

#telo .shora20 { margin-top: 20px  }
#telo .shora20 p { margin: 8px 0 0 0 }

#zelvyprodej table {width:100%; margin-top:10px;}
#zelvyprodej tr:last-child > * {border-bottom: 0}
#zelvyprodej th {border-bottom: 1px solid #b3946d; line-height: 35px; color:#68553e; font-weight:bold; text-align: left;}
#zelvyprodej td {border-bottom: 1px solid #b3946d; line-height: 35px;}
#zelvyprodej td:last-child {width: 20%; text-align: right; color:#e27100; font-weight: bold;}
#zelvyprodej td:first-child {width: 80%}
#zelvyprodej .prihlasbox { border:3px solid #fcf0e5; border-radius: 5px; padding: 1em 3% 1em calc( 27px + 6% ); background: url(/img/cites.png) 3% center no-repeat; font-size:14px; line-height: 1.4; font-weight: bold; color:#e27100; }
#zelvyprodej .prihlasbox p { margin:0; }

#uvodnovinky { margin: 3em 0;}
#uvodnovinky .novinky {display: flex; flex-wrap: wrap; column-gap: 3%;row-gap: 1.5em;align-items: stretch;  }
#uvodnovinky .novinka {width: 31%; padding: 1em; box-shadow: 0 0 8px -4px #777; box-sizing: border-box;}
#uvodnovinky .novinka a {font-size: 18px; font-weight: bold; }
#uvodnovinky .novinka .datum {color:#999; font-size: 13px; }
#uvodnovinky .morelink { color:var(--secbarva); margin-top: 1em; }

#uvodgalerie { margin: 3em 0; }
#uvodgalerie .gallerywrap { display: flex; row-gap: 1.5em; column-gap: 3%; flex-wrap: wrap; align-items: stretch; }
#uvodgalerie .gallerywrap a { width: 31%;  position: relative; color:#222; display:grid; grid-template: 160px 1fr / 100%; grid-template-areas: 'image' 'text'; }
#uvodgalerie .gallerywrap a:not(:hover) { text-decoration: none; }
#uvodgalerie .gallerywrap .text { grid-area: text; display: block; padding: 1em 0; }
#uvodgalerie .gallerywrap .image { grid-area: image; display: block; border-radius: 7px; overflow: hidden;}
#uvodgalerie .gallerywrap .image img { width: 100%; height: 100%; object-fit: none; }
#uvodgalerie .morelink { color:var(--secbarva); margin-top: 1em; }

/* ============================ Sloupce ============================ */
#kat { padding: 1em 7%; background: #EEEBE1; border-radius: 7px; line-height: 1.4; margin-bottom: 2em; }
#pages { padding: 1em 7%; background: #e9f3e3; border-radius: 7px; line-height: 1.4; margin-bottom: 2em; }
/*l1*/
.katmenu {list-style-type: none; padding:0; margin: 0;}
.katmenu li { margin-bottom: .75em;}
.katmenu li a { color:#2a2826; text-decoration: none; }
.katmenu li a:hover { text-decoration: none; }
.katmenu li .rozklik { background: url(/img/icon_plus.svg) left center no-repeat; display: inline-block; vertical-align: middle; width: 20px; min-height: 1em; color:transparent; }
.katmenu li.open .rozklik { background-image: url(/img/icon_minus.svg); }
.katmenu li .rozklik.empty { background: none; }
.katmenu li .link { display: inline-block; vertical-align: middle; width: calc( 100% - 20px ); }
.katmenu li.active > a > .link { color:var(--secbarva); font-weight: bold; }
.katmenu li.active > a > .link { color:var(--mainbarva); }
/*l2*/
.katmenu li ul {list-style-type: none; padding:0; margin: 0; font-size: 14px; margin-top: .75em;}
.katmenu li:not(.open) ul {display: none;}
.katmenu li ul li {margin-bottom: .75em;}
.katmenu li ul li .link:before{content: '- '; color:var(--mainbarva);}

#sloupec-levy .box {padding: 1em 7%; background: #EEEBE1; border-radius: 7px; line-height: 1.4; margin-bottom: 2em;}
#sloupec-levy .box h2 {font-size: 22px; color:var(--secbarva); margin-top: .5em;  }
#sloupec-levy img.left { margin-right: .75em; }
#sloupec-levy img.right { margin-left: .75em; }

/* ============================ Rozvozy ============================ */
#stred .rozopt { border-bottom: 2px solid #555; }
#stred .rozopt .red {color:#e27100; font-weight: bold; font-size: 1.2em;}
#stred .rozopt .h2 { font-size: 19px; color:#2f1600; font-weight: bold; }
#stred span.rozopt {border:0;}

div.trabal {padding:1px;}
div.trabal:hover {padding:0;border: 1px solid rgba(175, 193, 94, 0.8);}
div.trabal.active {background: rgba(175, 193, 94, 0.2);}
div.trabal p {padding-left: 30px;}
div.trabal p.vyberova {padding-left: 0;}
div.trabal p.vyberova label { font-weight: bold; color:#e27100;}
div.trabal .thirty {width: 30px; display: inline-block; vertical-align: baseline;}

div.trable {padding:1px;}
div.trable p { font-size: 19px; color:#2f1600; font-weight: bold;}

p.termfin {font-weight: bold; margin-top: -.5em; }
span.termfin {font-weight: bold;}

.pulka {width: 50%; float: left; text-align:center;}

/* ============================ Modul novinky ============================ */
.novinky {  }
.novinky .datum{ }
.novinky .nadpis{  }
.novinky .anotace{ margin-bottom: 10px; }

/* ============================== Profily =============================== */
#profilpg .fradek, #stred .fradek{ width:100%; clear:both; margin: 10px 0; text-align: left; }
#profilpg .fradek .fotka, #stred .fradek .fotka{ text-align: center; width: 23%; display: inline-block; vertical-align: top; margin: 10px 1%; }
#profilpg .fradek .fotka img,#stred .fradek .fotka img{ margin: auto; vertical-align: middle; }
#profilpg .fradek .fotka a,#stred .fradek .fotka a{ margin:auto }
#profilpg .fradek .fotka.prod,#stred .fradek .fotka.prod{ width: 48% }

.profilodkaz { clear:both; margin-bottom: 8px}
.profilodkaz .foto img {vertical-align: middle; border: 4px solid #3f260b; margin-right: 12px}
#profilradek{ margin-bottom: 16px; }
#profilradek .profilodkaz { float: left; line-height: 56px }
#profilradek .zaprofilem {float: right}
#profilradek .zaprofilem div {float: left; text-align: center; margin:17px 12px; line-height:initial;}
#profilpg {position: relative; }
#profilpg .prolink {float: right; margin-top: 20px; margin-right: 12px; color:#fff; border:0; text-align: center;}
#profilpg .profoto {height: 110px; width: 110px; margin: 20px 8px 20px 0; float: left; line-height: 100px; white-space: nowrap;}
#profilpg .profoto img {border: 4px solid #3f260b; vertical-align: middle}
#profilpg #stred {clear:both; margin: 10px 0 16px;}
#profilpg #stred p { margin:0; }
#telo #profilpg ul.podkat .pkfoto img {margin: 40px 0 0 }
#telo #profilpg ul.podkat .posunute{ text-align: center; }
#profilpg h1,
#profilpg h2 {float: left}
#profilpg .zah1,
#profilpg .zah2 {float: left; margin-left: 30px; margin-top: 4px;}
#profilpg .zah1 {margin-top:21px}
#profilpg form label { min-width: 110px; display: inline-block; text-align: right; margin: 0 4px 0 0; }
#profilpg form.msgform label { min-width: 71px; text-align: left;}
#profilpg form input[type=submit] { color:#fff; border:0; background: url('/img/btn-base.png') center center no-repeat; width: 70px; cursor:pointer; height: 35px;}
#profilpg form input[type=submit].wider {width:200px; background-image:url('/img/btn-base-superwide.png');}
#profilpg form label.sirsi { min-width: 250px; }
#profilpg form label.okrajovy { min-width: 0; }
#profilpg input { margin-top:5px; }
#profilpg form br { clear:both;  }
#profilpg table { width:100%; margin: 16px 0;}
#profilpg span.mceEditor,#profilpg .mceEditor table { margin:0; width: 100%!important;}
#profilpg .mceEditor table.mceToolbar {  margin:0;width: auto!important;}
#profilpg .mceEditor iframe table { max-width: 80%!important;}
.mceEditor iframe {width: 100% !important;}
#profilpg table .posunute { padding-left: 64px}
#profilpg .szmsg  { margin-bottom: 16px }
#profilpg .szmsg p { margin:0 }
#profilpg .breaker {clear:both;}
h1 img,h2 img { vertical-align: middle;}
h1.profilovka {line-height: 110px}
#telo .pulka .wide {display: inline-block;}
#fotoform,#nazevform {display:none}
#telo #profilpg th {line-height: 20px;}

#profilpg .nasiteodkazy { float:right; }
#profilpg .nasiteodkazy form{ display: none; }
#profilpg .nasiteodkazy form .post{ display: none; }

.pprihlas label { width: 10%; display:inline-block; text-align: right;}

#telo iframe {max-width: 100%;}
#telo .tablewrap {max-width: 100%; overflow: auto; padding-bottom: 5px;}

/* ============================ Modul stránky ============================ */

/* Drobeckova navigace */
.drobeckova { line-height: 14px; color:#876; font-size: 13px; margin: 10px 0; padding-bottom: 4px}
#telo .drobeckova a { color:#876; text-decoration: none;}
#telo .drobeckova a:hover { text-decoration: underline;}
.drobeckova .prvni { margin-left: -2px; padding-left: 16px; background: url(/img/domek.png) left center no-repeat; }
/*.drobeckova .polozka { padding-left: 17px; float: left; }*/
.drobeckova .odkaz { padding:0 ; margin:0 2px; white-space: nowrap; }


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

#frm- .post {display:none;}

/* Produkty */
.produkty { margin-top:15px; display: flex; flex-wrap: wrap; column-gap: 3%; row-gap: 1.5em;  }
.produkty .produkt { position:relative; width: 31%; height:365px; text-align: center; box-shadow: 0 2px 8px -4px #777; }
.produkty h3 {height: 45px; line-height: 22px; overflow: hidden; padding: 30px 10px; font-size: 16px; margin:0;}
.produkty h3 a {color:#68553e; }
.produkty h3 a:not(:hover) { text-decoration: none; }
.produkty .bez-marginr { margin-right: 0px; }
.produkty .produkt-vnitrek { height: 255px; }
.produkty .fotka { height: 190px; line-height: 190px; margin: auto; vertical-align: middle; width:90%; text-align: center; display: block; }
.produkty .fotka a { margin: auto; }
.produkty .fotka img { margin: auto; vertical-align: middle; }
.produkty .popis { padding: 5px 15px; line-height: 18px; height:50px; overflow: hidden;  text-align: left; display: block;}
.produkty .popis p { padding:0; margin:0; }
.produkty .nalevo { float: left; width:45%; position:relative; text-align: left; margin-left:5%; margin-top: 20px; line-height: 1.25; display: block; }
.produkty .nalevo .sklad {}
.produkty .nalevo .sleva {font-size: 11px; position:absolute; top: 15px;  text-decoration: line-through; }
.produkty .nalevo .cena {position:relative; margin:0; padding:0; font-size: 22px; color:var(--mainbarva); font-weight: bold;  display: block;}
.produkty .nalevo .cena .mensicena {position:absolute; bottom:100%; font-size: 13px; color:#aaa; font-weight: normal;  display: block;}
.produkty .produkt .tlacitko { float: right; margin-right: 5%; max-width: 45%; margin-top: 5px; }
.produkty .produkt .stitky { position:absolute; width: 0; left:-5px; top:95px }

.produkty label.encompass {display:block; height:460px;}
.produkty label.encompass.envy {background: #e9f3e3;}
.produkty label.encompass .h3 {height: 45px; line-height: 22px; overflow: hidden; padding: 30px 10px; font-size: 16px; margin:0; display: block; font-weight: bold}
#telo .produkty label.encompass .h3 a {color:#2d1702; text-decoration: none; }
#telo .produkty label.encompass .h3 a:hover {text-decoration: underline; }
.produkty .napravo {  display: block; }

.produkty label.extrachoice {border-top:1px solid #ddd; display: block;}

.special .produkt {height: 460px;}
.special .napravo {text-align: right; margin-right: 5%; max-width: 45%; float:right; }
.special .napravo input{vertical-align: middle;}
.special .popis { height:70px; padding: 0; margin: 5px 15px 20px; }
.special h3 {color:#2d1702; text-decoration: none; }
.special .fullwide { display: block;color:#2d1702; font-weight: bold; text-align: left; padding: .5em 5% 0; }
.special .splitwide { display: block; padding: 0 5% 1em; }
.special .extrachoice:last-of-type .splitwide { padding-bottom: 0; }
.special .splitwide .napravo { margin-right: 0; max-width: 50%; }
.special .splitwide .nalevo { margin-left: 0; max-width: 50%; }
.special .varname { font-size: 22px; padding-top: 0; }
.special .cleaner {display: block;}
.rozvozform .text-na-stred a {float:left; display: inline-block;}
.rozvoznotifikace {display: block; margin: 1.5em; padding: 1em; border: 1px solid #186107; background: #afc15e; font-weight: bold;}
#spsc {width: 5em;}

.produkty.variableh .produkt { height: auto; padding-bottom: 1em; }
.produkty.variableh label.encompass { height: calc( 100% + 1em ); }
.special.variableh .popis { height:auto; }

.filtrForm {width:97%; height:auto; padding:10px 1.5%; padding-top:7px; margin-top: 16px; position:relative; }
.filtrForm h4 { padding-top: 3px; margin-top :0; }
.filtrForm div.cbox {float:left; width: auto; margin-right: 3%; width: 22%;overflow: hidden; height: 20px; line-height: 20px; margin-top: 3px}
.filtrForm div.Z {width:30%}
.filtrForm .submit {width:100px; height: 35px;  background-image:url('/img/btn-base-wide.png'); border:0; color:#fff;}
.filtrForm .f1 {margin-top: 3px; float:left; width: 15%; height :100%}
.filtrForm .f2 {float:left; width: 85%; }
.filtrForm .f3 {float:left; width: 100px; height:35px; margin: auto; vertical-align: middle; position: absolute; top:50%; margin-top:-17px; right:10px}
.filtrForm .jslider { width:60%; top:1.2em; }
.filtrForm .jslider .jslider-value {font-size: 13px; background: none transparent;}


/* Produkt */
#produkt {  }
#produkt .nahore{ height: auto; }
#produkt .nahore .fotka-hlavni{ width: 62%;height: 250px; line-height: 250px; float: left; text-align: center; vertical-align: middle; position: relative; overflow: hidden;}
#produkt .nahore .fotka-hlavni a{ margin: auto; }
#produkt .nahore .fotka-hlavni img{ vertical-align: middle; }
#produkt .nahore .akce{ position: absolute; top:0; left: 0; }
#produkt .nahore .akce img{ margin-bottom:-10px;}
#produkt .nahore .vpravo { width: 37%; float: right; }
#produkt .nahore .vpravo form { height:auto; position: relative; }
#produkt .nahore .vpravo .radek { padding:5px 0; }
#produkt .nahore .vpravo label { min-width: 100px; width: 55%; display: inline-block; vertical-align: top; }
#produkt .nahore .vpravo label+span,
#produkt .nahore .vpravo #cenatext { width: 45%; display: inline-block; vertical-align: top;  }
#produkt .nahore .vpravo label.radio { cursor: pointer }
#produkt .nahore .vpravo .parametry{ margin-top: 0px; }
#produkt .nahore .vpravo .stav{ padding-left: 0px; }
#produkt .nahore .vpravo .cena{ }
#produkt .nahore .vpravo #staracena { text-decoration: line-through}
#produkt .nahore .vpravo .cenatext{ margin:0 0 10px 0; font-size: 150%; font-weight: bold; line-height: normal; }
#produkt .nahore .vpravo input { width:40px }
#produkt .nahore .vpravo .obalka { border:1px solid #f8f8f8;  }
#produkt .nahore .vpravo .obalka div:first-child { background:#f8f8f8; padding:7px; height:auto;}
#produkt .nahore .vpravo .zaskrtavatka { height: auto }
#produkt .nahore .vpravo .zaskrtavatka input { float:left; }
#produkt .nahore .vpravo .zaskrtavatka a { margin-left:50px;  }
#produkt .nahore .vpravo input.submit {  width: 70px; cursor: pointer; margin: 20px 0; background: url(/img/btn-base.png); line-height: 30px; border:0; color:#fff}
#produkt .nahore .vpravo input.radio {  width: auto; height:auto; cursor: pointer; margin:0 0 0 40px;}
#produkt .podfoto {width: 56%; float:left;}
#produkt #dalsifoto { height: 80px; }
#produkt #dalsifoto a { display: block; float: left; margin-left: 10px; }

a.more { background: url('/img/btn-base-superwide.png'); width:200px; height:35px; line-height: 35px; display:block; text-decoration: none;text-align: center; cursor:pointer; margin:auto; border:0; color:#fff;}

/* Kosik */
#kosik {  }
#kosik .tabulka { width: 100%; padding-top: 10px; margin-bottom: 30px; }
#kosik .tabulka thead th { height: 25px;  text-align: center; padding: 0 10px; background-color: transparent; background-color: rgba(250,250,250,.2);}
#kosik .tabulka thead th.p1 { text-align: left;}
#kosik .tabulka td { height: 60px;  vertical-align: middle; text-align: center; line-height: 1.2em; padding: 5px 0; }
#kosik .tabulka th {  line-height: 1.2em; }
#kosik .tabulka td.odkazova { text-align: left }
#kosik .tabulka td.cenova { text-align: right }
#kosik .tabulka td img { max-height: 60px; max-width: 60px; }
#kosik .odeslat { width: 169px; height: 35px; margin-left: 0px; margin-top: 0px; display: block; }
#kosik form { margin-left: 0; }
#kosik form .radek{ height: 30px; }
#kosik form label{ text-align: left; margin-right: 5px; }
#kosik form .checkbox{ margin-left: 135px; float: left; }
#kosik form .labelcheck{ width: auto; line-height: 1.2em;}
#kosik form .vespod {  }
#kosik form a.plusminus {float:left; background-color: #f8f8f8; display:block; width:20px; height: 20px; line-height: 20px; text-decoration: none; color:#000; background-color: transparent; background-color: rgba(250,250,250,.2); }
#kosik form input.mnozstevni { float:left; }
#kosik.obj .tabulka tr {height:35px;}
#kosik .flexinav {display: grid; grid-template-columns: 1fr auto auto; justify-content: right; column-gap: 2em;  align-items: center; }
#kosik .flexinav .zpet { justify-self: left; }

#kosik .obtab {width: 49%; margin-right: 1%; display: inline-block; vertical-align: top;}
#kosik .obtab .trow label{ width: 41%; margin-right: 1%; display: inline-block; vertical-align: middle; }
#kosik .obtab .trow span {width: 58%; display: inline-block; vertical-align: middle; }
#kosik .obtab .trow span input {width: 100%; box-sizing: border-box}
#kosik .obtab .trow span textarea {width: 100%; box-sizing: border-box}
#kosik .obtab .trow.TA { width: 150%; }
#kosik .obtab .trow.TA label { vertical-align: top; width: 27%; }
#kosik .obtab .trow.TA span { vertical-align: top; width: 70%; }
#kosik .obtab .trow.CB label {width: 100%; text-align: right; }

/* Objednavka */
#objednavka{ width: 660px; margin-top: 20px; }
.box { padding: 20px 20px; }
#objednavka form{  }
#objednavka form #fotka{ float: right; width: 250px; height: 83px; }
#objednavka form #fotka img{  }
#objednavka form .radek{ clear: both; height: 30px; padding-top: 10px;}
#objednavka form label { width: 220px; height: 36px; line-height: 36px; padding-right: 8px; text-align: right; display: block; float: left; }
#objednavka form label span { width: 10px; height: 12px; display: block; float: right; margin: 0px; padding: 0px; }
#objednavka form .oddo { width: 25px; padding-right: 6px; }
#objednavka form .vybertevuz { margin: 30px 0; }
#objednavka form input, #objednavka form textarea, #objednavka form select { display: block; float: left; padding: 8px;   }
#objednavka form .oddoinput { width: 120px; }
#objednavka form .radio { width: 14px; margin-top: 10px; padding-top: 0px; padding-right: 6px;  }
#objednavka form .radiolabel { width: 25px; padding-right: 10px; text-align: left; }
#objednavka form textarea{ height: 70px; }
#objednavka form table td{ padding-bottom: 1px; width:85%}
#objednavka form .required, #objednavka form th { }
#objednavka form #frm-send { width: 155px; height: 40px;  padding-top: 4px; }
#objednavka form #frm-send:hover {   }


/* ============================ Kontaktní formulář ============================ */
#mailform { padding: 20px; margin: 5px 0; background:#eeebe1; border-radius: 7px;}
#mailform input[type=text] {width: 100%; border:0; height: 2em; }
#mailform button {margin-top:15px; }
#mailform textarea { width: 100%; height: 6em; border:0;}
#mailform label { width: 100%}
#mailform .post {display: none}
#mailform .frmhlaska { margin:0 0 15px 0; font-size: 1.3em; font-weight: bold}
#mailform .vlevo {width:45%; height:60px; float:left;}
#mailform .vpravo {width:45%; height:60px; float:right;}
.kontaktform { text-align: left; max-width: 500px; }

#nwsltr { width: 100%; border-radius: 7px; overflow: hidden; margin-bottom: 2em; }
#nwsltr input { width: calc( 100% - 50px ); background: #fff; border:0; height: 45px; padding: 0 1em; box-sizing: border-box; vertical-align: middle; }
#nwsltr input::placeholder { font-style: italic; }
#nwsltr button { width: 50px; height: 45px; background: url(/img/icon_arrow.svg) center center no-repeat var(--mainbarva); vertical-align: middle; border:0; font-size: 0;;  }

/* ============================ Paticka ============================ */
#paticka {padding: 1em; box-sizing: border-box; color:#777; padding-left: calc( 360px + 1em ); }
#paticka .sublink {display: inline-block; vertical-align: middle; white-space: nowrap; padding: 0 1em; margin: 1em 0;}
#paticka a { color:#777; }
#paticka a:not(:hover) { text-decoration: none; }

/* ============================ Lišta ============================ */
#cm {bottom:0;}
@media (min-width: 689px){
   #cm.cloud {max-width: 1000px; padding: .75em 1.5em; }
   .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; margin-top: 0; }
   #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; }

/* ============================ Media Queries ============================ */
@media (max-width: 1369px)
{
   #paticka {padding-left: calc( 24.75% + 1em ); }
}

@media(max-width:1199px) {
   #hlavicka {
      grid-template: auto 20px auto / 160px 145px 1fr auto ;
      grid-template-areas: 'logo slogan hledani kos' 'logo . . pvlajky' 'menu menu menu menu';
   }
   #hkontakt {display:none;}
   #profilpg .fradek .fotka, #stred .fradek .fotka{ width: 31%;  }
}

@media(min-width:1000px) {
   #xhmenu {display: none;}
}

@media(max-width:999px) {
   #hlavicka { margin-bottom: 0; padding-top: .5em;
      grid-template: auto auto / 160px 1fr auto auto;
      grid-template-areas: 'logo hledani kos xmenu' 'logo . pvlajky pvlajky';
   }
   #hmenu,#hslogan,#hkontakt {display: none;}
   #hhledej {padding: 0;}
   #hkosik .hider {display: none;}
   #xhmenu .hider {display: none;}
   #mainbg {padding-top: 1.5em;}
   .produkty .produkt { width: 48.5%; }
}

@media(max-width:799px) {
   #stranka {
      grid-template: auto auto / 100%; 
      grid-template-areas: 'obsah' 'lsloup';     
   }
   #paticka { padding-left: 1em; }
   #telo {margin-bottom: 2em;}
   #sidenav {display: none;}
}

@media(max-width:599px) {
   #hlavicka { grid-template-columns: 100px 1fr auto auto; }
   #telo {padding-top: .75em; }
   #telo ul.podkat li { width: 48.5%; }
   #produkt .nahore .fotka-hlavni{ width: 100%; float: none;}
   #produkt .nahore .vpravo { width: 100%; float: none; }
   #kosik .obtab {width: 99%;}
   #kosik .obtab .trow.TA {width: 100%;}
   #kosik .obtab .trow.TA label {width: 41%;}
   #kosik .obtab .trow.TA span {width: 58%;}
   #profilpg .fradek .fotka, #stred .fradek .fotka{ width: 48%;  }
}

@media(max-width:499px) {
   #zelvyprodej td:last-child {width: 100%; display: block; }
   #zelvyprodej td:first-child {width: 100%; border-bottom: 0; display: block; }
   #uvodnovinky .novinka {width: 100%; }
   #uvodgalerie .gallerywrap a { width: 100%; }
   .produkty .produkt { width: 100%; }
   #vyhledavani { width:42px; height:42px; }
   #vyhledavani:not(.xsshow) .vyhledavani { display: none; }
   #vyhledavani.xsshow { position: fixed; width: 90vw; left: 5vw; top:5rem; z-index: 1010; box-sizing: border-box; border:1px solid #444; }
   #kosik .flexinav { grid-template: auto auto / auto auto; row-gap: 1em; justify-content:space-between; }
   #kosik .flexinav .zpet { grid-area: 2 / 1 / 3 / 3;  }
}

@media(max-width:449px) {
   .filtrForm .f1 {width: 25%}
   .filtrForm .f2 {width: 75%}
   .filtrForm .jslider {width: 100%}
}

@media(max-width:399px) {
   #kosik .tabulka th:first-of-type,
   #kosik .tabulka td:first-of-type { display: none; }
   #kosik.obj .tabulka tr {height:auto;}
   #kosik.obj .tabulka tr,
   #kosik.obj .tabulka th:first-of-type,
   #kosik.obj .tabulka td:first-of-type,
   #kosik.obj .tabulka th,
   #kosik.obj .tabulka td,
   #kosik.obj .tabulka tbody,
   #kosik.obj .tabulka { display: block; }
   #kosik form { overflow-x: scroll}
   #mailform .vlevo,#mailform .vpravo {float:none; width: auto; height: auto;}
}