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

@font-face {
   font-family: 'Martel';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: local('Martel'), local('Martel-Regular'), url(/img/martel-r.ttf) format('truetype');
}
@font-face {
   font-family: 'Martel';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: local('Martel Bold'), local('Martel-Bold'), url(/img/martel-b.ttf) format('truetype');
}

@keyframes zoomeffect
{
   100% {transform: scale(1.1);}
}
html {font-size: 16px; background: #fff; }
body {font-family: 'Martel','Times new Roman', serif; }
input,select,textarea,button {font-family: 'Martel','Times new Roman', serif; font-size: 1rem;box-sizing:border-box;}

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

h1 {font-size: 3.125em; margin-top: .25em;}
.uvodni h1 {display: none;}
.noh1 h1 {display: none;}
h2 { margin-bottom: .6em;font-size: 2.5em; line-height: 1.25em;}
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}

.max-sirka {width: 100%; max-width: 1170px; 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 {color:#fff; background:var(--mainbarva); border: 0; font-size: 1rem; padding: 1.1em 1.1em .9em; line-height: 1em; font-weight: bold; text-decoration: none; cursor: pointer; display: inline-block;}
button.tlacitko,input[type=submit].tlacitko {}
.tlacitko:hover{background: #a11;}
button.tlacitko:hover,input[type=submit].tlacitko:hover {}

:root {--wastemenu-color: #000; --wastemenu-xcolor: #000; --wastemenu-lwidth: 9%; --wastemenu-border: 9%; }
span.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% 
      );
}
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:#c22; }
h1:first-letter,h2:first-letter,h3:first-letter,p.h2:first-letter,p.h3:first-letter {text-transform: uppercase}
a,.mainbarva { color:var(--mainbarva) }
h1,h2 { color:#222 }
.gbg {background: #f3f3f3;}
.mainbg {background: var(--mainbarva); color:#fff;}
.mainbg a {color:#fff;}

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

/*========= prvky hlavičky =============================================================*/
#hlavicka { position: relative; overflow: hidden;width: 100%; background: url(/img/bg_let.webp) center top no-repeat #fff;}
#hlavicka.sneachta { background-image: url(/img/bg_zim.webp);}
.neuvodni #hlavicka {background-size: cover;}
#hlavicka .max-sirka {z-index: 2;}

#hgraphics {position: absolute; width: 100%; left:0; top:0; bottom:0; background: url(/img/bg_let.webp) center top no-repeat #fff; z-index: 1; }
.sneachta #hgraphics { background-image: url(/img/bg_zim.webp); }
.neuvodni #hgraphics {background-size: cover;}
#hgraphics::before {content: ' ';width: 100%; position: absolute; left:0; top:0; bottom:0; z-index: 0; display: block;
                    background: linear-gradient(rgba(255,255,255,1) 0, rgba(255,255,255,0) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,.75) 100%);}
#hgraphics.image { animation:zoomeffect 5s 1; animation-fill-mode:forwards; }
#hgraphics .vidplace {width: 100%; position: absolute; left:0; right: 0; top: 0; bottom: 0; overflow: hidden; }
#hgraphics .vidplace::before{display: block; position: absolute;left:0; right:0; top:0; bottom:0; z-index: 1; display: block; content: ' '; z-index: 1;
       background: linear-gradient(rgba(255,255,255,1) 0, rgba(255,255,255,1) 70%, rgba(0,0,0,1) 100%);}
#hgraphics .vidplace::after{display: block; position: absolute;left:0; right:0; top:0; bottom:0; z-index: 1; display: block; content: ' '; z-index: 3;}
#vidflek { object-fit: cover; display: block; position: relative; z-index: 2; }

#hpruh {width: 100%; display: flex; align-items: center; justify-content: space-between; }
#hlogo {margin-top: 10px;}
#hlogo img {max-height:105px}

#overit-skokmenu {}
#hpruhbaseplace .tlacitko,#hpruhmoveplace:not(.whbg) .tlacitko {font-size: 1.2rem; white-space: nowrap; text-align: center;}

#hslogan { padding: 140px 20% 0 0; position: relative; height: 520px; font-size:40px; color:#fff; line-height: 1.25em; text-shadow:0 0 4px #000;}
#hslogan p{ margin: 0; }
#hslogan .big{ font-size:100px; font-weight: bold; line-height: 1em; margin-bottom: .1em; }
.neuvodni #hslogan { height: 660px; padding: 0; position: relative;}
.neuvodni #hslogan p {font-weight: bold;font-size:70px; line-height: 1.25em;}
.neuvodni #hslogan .heavydrop { position: absolute; bottom:100px; left:0; text-align: left; padding-right: 20%;}
.neuvodni #hslogan .smol{ font-size:30px; font-weight: bold; line-height: 1em; margin-bottom: .1em; margin-top: 1em;}
#hslogan.lower { height: auto;}
.neuvodni #hslogan.lower p { line-height: 1.1em; margin: .75em 0px .5em; }

#hstred {position: absolute; right:0; bottom:20px;}
#hstred iframe { border:0;}
#hstred .overrev { width:147px; height:123px; display: inline-block; position: absolute; left: 0; top:0;}

#hbottom { padding-bottom: 90px; }
#hbottom form {display: flex;align-items: center; justify-content: space-between; background: var(--mainbarva); padding:3.3%; font-weight: bold; }
#hbottom form .field{ margin: 0 5px;}
#hbottom form .field.sec{flex-shrink: 1;}
#hbottom form .field label{display: block; color: #fff; margin:-1em 0 1.5em;}
#hbottom form .field input{display: block; background: #a11; border: 0; padding: 1em; height: 1em; box-sizing: content-box; color:#fff; }
#hbottom form .field input:focus {background-color: #fff; color:#222; }
#hbottom form .field input.dat { background-image: url(/img/ic_calendar.png); background-position: right center; background-repeat: no-repeat; padding: .75em 3.5em 1.25em 1em; width: calc(100% - 4.5em); }
#hbottom form .field input[type=number] { -moz-appearance: textfield; appearance: textfield; margin: 0;width: 3em; }
#hbottom form .field input[type=number]::-webkit-inner-spin-button,
#hbottom form .field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#hbottom form .field input[type=date] {-moz-appearance: textfield; appearance: textfield; }
#hbottom form .field input[type=date]::-webkit-clear-button {display: none;}
#hbottom form .field input[type=date]::-webkit-inner-spin-button { display: none;}

#hbottom form .tlacitko{ color:#222; background: #fff;}
#hbottom form .tlacitko:hover{ background: #ddd;}

/*========= menu =======================================================================*/
.hmenu { font-weight: bold; }
.hmenu a { display: block; text-decoration: none;color:#222; text-shadow:0 0 8px #fff; }
.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; }
.hmenu a:hover,.hmenu .active a{ color:var(--mainbarva); }
.uvodni #hpruhmoveplace:not(.prekazejici) .hmenu a:not(.tlacitko) {color:#fff;text-shadow:0 0 8px #000; }
.uvodni #hpruhmoveplace:not(.prekazejici) .hmenu .extrawrap a:not(.tlacitko) {color:#222;text-shadow:0 0 8px #fff; }

#nhmenu { display: flex; }
#nhmenu a {}
#nhmenu .msp { min-height: 2.5em; padding: 0 1em; }
#nhmenu .oddelovac {width: 1px; height: 1.5em; border-left: 1px dotted #555; margin-left: -1px; }

#xhmenu {z-index: 1000; display: inline-block; }
#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; }
#xhmenu .tlacitko {color:#fff; text-shadow:none;}
#xhmenu .overline { border-top: 1px solid #ddd; padding: .5em 0; }
#xhmenu .shower { padding: 0 .15em;}
.whbg #xhmenu .shower {background: none; padding: 0;}

/*========= vyhledávání ================================================================*/
#hledatObal {min-width: 200px; position: relative; }
#hledatObal form {border: 1px solid #f3f3f3; padding: .33em 2%; border: 1px solid #f3f3f3; }
#hledatObal .q{ width: 70%; padding: .25em 3% .25em 3%; border:0; background: #fff; }
#hledatObal .q::placeholder { font-style: italic; color:#777; opacity: 1; }
#hledatObal .tlacitko { width: 30%; margin:0; padding: .25em 0; }

#naseptavac {width: 100%; border: 1px solid #f3f3f3; background: #fff; height: 16.5em; z-index: 700; 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: 80px 0 2em; margin:0; background: url(/img/bg_wood.webp) center top no-repeat; }
.neuvodni #stranka { background-image: url(/img/bg_wood_m.webp); }

#rozcestnik {display: flex;align-items: flex-start; justify-content: space-between; text-align: center; font-size: 1.25em; line-height: 1.25em; margin-bottom: 65px;}
#rozcestnik a {display: block; width: 180px; text-decoration: none; color:#222; font-weight: bold; }
#rozcestnik a:hover {color:var(--mainbarva);}
#rozcestnik a .pix {display: block; position: relative; height: 140px; margin: 0 20px 20px; overflow: hidden; }
#rozcestnik a .pix img {display: block; position: absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); }
#rozcestnik a .txt {display: block; }
#rozcestnik a .ltxt {display: block; font-size: .75em; }

.subsekce { padding: 70px 0; }
.subsekce .flexer { display: flex;align-items: center; justify-content: space-between; }
.subsekce:nth-of-type(odd) { background: #f4f1ec; }
.subsekce.lobr .content {order: 2;padding-left:6%;}
.subsekce.lobr .contpix {order: 1;}
.subsekce.robr .content {padding-right:6%; }
.subsekce .content.webframe {max-width: 555px;  }
.subsekce .content.webframe * {display: block; }
.subsekce .content.webframe *:not(h3) {display: block; border:1px solid #222; }
.subsekce .contpix {flex-shrink: 0; max-width: 50%; }
.subsekce iframe {border:0;}
.subsekce ul {list-style-image:url(/img/fajfka.png); margin-left:-6px; padding-left: 26px; }

#origprodukt {display:none;position: absolute; left:-290px; top:200px; width: 260px; height: 255px; background: url(/img/vedleznak.png);  }

/*========= obsah ======================================================================*/
#telo {padding: 0; margin:0; }
.uvodni #telo {width: 46%; float: left;}

.obsah { line-height: 2em; position: relative; }
.obsah.blog {max-width: 750px;}
.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.25em; line-height: 1.5em; }
.uvodni .anotacka { font-size: 2em; line-height: 1.5em; }

table.nalomena2 td {height: auto;}
table.nalomena2 td:last-child { padding-left: 1em; }

/*========= drobečková =================================================================*/
.drobnav {line-height: 1.75em;  color:#777; margin: 0; }
.drobnav a {color:#777; font-weight: bold; }
.drobnav span { padding:0; margin:0; display: inline-block;}
.drobnav span.odd {margin: 0 .75em;}
.noh1 .drobnav {margin-bottom: 1.5em;}

/*========= podstránky =================================================================*/
.podkat { margin: 2em 0; align-items: stretch; --sloupce:3; --rozestup:2em;}
.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; }
.podkat.reversfoto a.wpix { font-size: 1em; grid-template-areas: 'pic' 'text'; padding: 0; border:0; }
.podkat.reversfoto .pic { text-align: center; margin-top: 0; }
.podkat.reversfoto .text {display: block; padding: .6em 1.5em .4em; font-weight: bold; background: #d3f0fd; }
.podkat.reversfoto img { width: 100%; height: 100%; object-fit: cover; }

/*========= fotky ======================================================================*/
.gallery { margin: 2em 0; align-items: stretch; --sloupce:4; --rozestup: 1em; }
.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: .1em; text-align: center;  }

/*========= fotky - centr ===============================================================*/
.gallery.cengallery {}
.gallery.cengallery .box a { height: 170px; position: relative; overflow: hidden;}
.gallery.cengallery img {position: absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); max-width: none; }

/*========= 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;}

.clFaq {}
.clFaq .clanek { margin-bottom: 1.5em; }
.clFaq .h3 { font-weight: bold; font-size: 1.1em; margin-bottom: 0;}
.clFaq .h3 a { padding:.5em; background: #f0f7ff; color:#000; display: block; }
.clFaq .h3 a::before { content:'+ '; }
.clFaq .cltext { padding: .5em 1em 0; }

/*========= 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; float:left; margin: 0 1em 0 0;}

/*========= sloupce ====================================================================*/
.sloupec-pravy { width: 47%; float: right; }

.sl-rodina { padding: 9.5%; background: #f4f1ec; line-height: 2em; position: relative; margin-bottom: 2em;}
.sl-rodina h3 {color:#222; font-size:25px; }
.sl-rodina p { }
.sl-rodina .ilust { position: absolute; right:11%; top: -30px; border-radius: 50%; overflow: hidden; }
.sl-rodina .ilust img { max-width: 125px; max-height: 125px; display: block; }

.sl-rec { padding: 1em 9.5%; background: #f4f1ec; line-height: 2em; margin-bottom: 2em;}
.sl-rec .polozka { margin: 0 0 1.5em; }
.sl-rec .img { margin: 0; }
.sl-rec h4 { margin-bottom: -.5em; margin-top: 0; }
.sl-rec .datumn { font-size: .85em; font-weight: normal; float:left; margin: 0 1em 0 0; }

.sl-rec.sl-cam { padding: 0; }
.sl-rec.sl-cam h3 { padding: 1em 9.5%; margin-bottom: 0; }

.sl-ffff { margin-bottom: 2em;}

.sl-link { margin-bottom: 2em; display: flex; align-items: center; justify-content: space-between; }
.sl-link span { font-size: 20px; display: block; flex-grow: 2; }
.sl-link a { flex-grow: 0; margin-left: 2em; }

/*========= š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; 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%; }

/*========= kontaktní formulář =========================================================*/
.kform { text-align: left; max-width: 570px; margin-bottom: 4em;}
.kform h2 {color: #fff; margin-top: .5em;}
.kform a {color:#fff;}
.kform form { }
.kform p {margin: 0 0 1em; }
.kform .sloup {display: inline-block; vertical-align: top; width: 48%; }
.kform .sloup.tl {vertical-align: middle; }
.kform .l { padding-right: 2%; }
.kform .r { padding-left: 2%; }
.kform .l.tl { width: 38%; }
.kform .r.tl { width: 58%; }
.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; background: #a11; color: #fff;}
.kform .stretch:focus {background-color: #fff; color:#222; }
.kform textarea.stretch { height: 2.75em;}
.kform .tlacitko {color:#222; background: #fff;}
.kform .tlacitko:hover {background: #ddd;}
.kform .stretch::placeholder { font-style: italic; color: #fff; opacity: 1; }
#telo .kform {padding-top: .5em;}

/*========= 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; }

/*========= prvky patičky ==============================================================*/
#paticka {background: var(--mainbarva); padding: 60px 0; }
#paticka h2 {font-size: 2em; color:#fff; }
#paticka .pat {display: inline-block; vertical-align: top; }
#paticka .patl { width: 36%; margin-right: 4%; color:#fff; }
#paticka .patl img { margin-right: 2em; }
#paticka .patr {width: 60%; background: #fff; position: relative; }

#paticka .split { display: inline-block; vertical-align: top;}
#paticka .split.spl1 { width: 55%; padding: 5.5% 5.5% 150px; min-height: 555px; position: relative; box-sizing: border-box; }
#paticka .split.spl1 h2{ margin: .5em 0 1em; color:#222; }
#paticka .split.spl2 { width: 45%; position: relative; overflow: hidden; height: 555px; }
#paticka .split.spl2 img { position: absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); max-width: none; }

#paticka .patasekce {background: left top no-repeat; padding-left: 40px; min-height: 40px; }
#paticka .patasekce.loc {background-image: url(/img/i_pin.png);}
#paticka .patasekce.tel {background-image: url(/img/i_phone.png);}
#paticka .patasekce.pst {background-image: url(/img/i_mail.png);}

#paticka .patalink { display: flex; align-items: center; justify-content: space-between; position: absolute; bottom:50px; left:10%; width: 80%; flex-wrap: wrap; }
#paticka .patalink a { flex-grow: 0; margin-right: 2em; margin-bottom: 1em; }

#paticka .fotokolo {position: absolute; width:110px; height: 110px; border:5px solid #fff; border-radius: 60px; overflow: hidden; left: calc( 55% - 60px ); bottom: 120px; }
#paticka .fotokolo img {position: absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%);}

#paticka .tlacitko {color:#222; background: #fff;}
#paticka .tlacitko:hover {background: #ddd;}
.nwform input:not([type=checkbox]) {width: 100%; padding: .5em; border:0; background: #a11; color: #fff;}
.nwform input:focus {background-color: #fff; color:#222; }
.nwform input::placeholder {color: #fff; font-style: italic; opacity: 1;}
.nwform a {color:#fff; }

#zakonceni { display: none; padding: 1em 0 4em; position: relative;}
#zakonceni a { }

/*========= 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;}
a.ffff { background: url(/img/soc_ffff.png) left center no-repeat; display: block;min-height: 2em; padding-left: 2.5em; }
a.igrm { background: url(/img/soc_igrm.png) left center no-repeat; display: block;min-height: 2em; padding-left: 2.5em; }
a.ytub { background: url(/img/soc_ytub.png) left center no-repeat; display: block;min-height: 2em; padding-left: 2.5em; }

#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.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 ===============================================================*/

@media (max-width:1169px) {
   .max-sirka {width: 92%; margin: auto 4%;}
   .uvodni #hgraphics { background-position: 70% top;}
   #hbottom form .field.sec input{ max-width: 120px;}
   #overit-skokmenu {display: none;}
   .subsekce.nobr .flexer {flex-wrap: wrap;}
   .subsekce .content.webframe { margin-bottom: 1em; }
   .obsah .quadbutton {display: flex; width: 100%; clear: both; align-items: center; justify-content: space-around; flex-wrap: wrap; }
   .obsah .quadbutton .tlacitko {min-width: 40%; text-align: center; margin: 1em 0; }
   #paticka .patl { width: 100%; margin-right: 0; }
   #paticka .patr { width: 100%; }
   #paticka .split.spl1 { min-height: 0; }
   .kform .r.tl { width: 54%; margin-left: 4% }
}

@media (max-width:999px) {
   .gallery { --sloupce:3; }
   #hslogan { padding:15px 0; height: auto; font-size: 25px;}
   #hslogan .big{ font-size:60px; line-height: 1.25em; }
   .neuvodni #hslogan {padding: 0; height: auto;}
   .neuvodni #hslogan p {font-size:40px;}
   .neuvodni #hslogan .heavydrop { position: static; padding: 120px 0 60px;}
   .neuvodni #hslogan .smol { font-size: 25px }
   .overpic #hgraphics {height: 650px; }
   #hstred {display: none;}
   #hbottom { padding-bottom: 30px; }
   #hbottom form {flex-wrap: wrap; }
   #hbottom form .field{ margin: 1em 0 0;}
   #hbottom form .field label {margin:0;}
   #hbottom form .field input,
   #hbottom form .field input[type="number"] {width: calc(100% - 2em); }
   #hbottom form .field.sec input { max-width: 160px;}
   #hbottom form .field.st1{ width: 45%;}
   #hbottom form .field.sline{ width: 22%;}
   #nhmenu {display: none;}
   #stranka { background-image: url(/img/bg_wood_m.webp); }
   #rozcestnik {flex-wrap: wrap;}
   #rozcestnik a {width: 46%; text-align: left; margin: 20px 4% 0 0;}
   #rozcestnik a .pix {display: inline-block; vertical-align: middle; width: 100px; height: 100px; margin:0 20px 0 0;}
   #rozcestnik a .txt {display: inline-block; vertical-align: middle; width: calc(90% - 120px);}
   .hmenu .hider { display:none!important; }
}

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

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

@media (min-width:750px) {
   #hbottom form .field.skokmale {display: none;}
}
@media (max-width:749px) {
   .uvodni #hgraphics { background-size: 750px auto; background-position: center top;}
   h1 {font-size: 28px;}
   h2 {font-size: 25px;}
   #hlogo img {max-height:90px }
   #hbottom { padding-bottom: 30px;}
   #hbottom form .field{ width: 100%;}
   #hbottom form .field.st1{ width: 100%;}
   #hbottom form .field.sline{ width: 45%;}
   #hbottom form .field input{ height: .85em;  }
   #hbottom form .field.sec input { max-width: none;}
   #hbottom form .field.skokstred {display: none;}
   #hbottom form .tlacitko { width: 100%;}
   #stranka {padding-top: 30px;}
   #rozcestnik {margin-bottom: 30px;}
   .sl-ffff { max-width: 90%; }
   .uvodni .anotacka {font-size: 1.25em;}
   .kform,.sloupec-pravy {width: auto; margin: auto; float: none;}
   .sloupec-pravy {margin-top: 1.5em;}
   .subsekce { padding: 30px 0; }
   .subsekce .flexer { flex-wrap: wrap; }
   .subsekce .content { margin-bottom: 1em; max-width: 100%;}
   .subsekce .contpix {max-width: 100%; }
   .subsekce.lobr .content {order: 1;padding-left:0;}
   .subsekce.lobr .contpix {order: 2;}
   .subsekce.robr .content {padding-right:0; }
   .subsekce iframe {max-width: 100%;}
   #telo,.uvodni #telo{width: auto; margin: auto; float: none;}
}

@media (max-width:699px) {
   #paticka .split.spl1 { width: 100%; min-height: 0; }
   #paticka .split.spl2 { width: 100%; height:260px; padding-top: 0; }
   #paticka .fotokolo {bottom:200px; left: calc(50% - 60px);}
   #paticka .patalink { left:5%; width: 90%;}
   #paticka .patalink a {margin-left:0; margin-right: 0; }
}

@media (max-width:649px) {
   #rozcestnik a {width: 100%; margin: 20px 0 0;}
   #rozcestnik a .pix {width: 60px; height: 60px; }
   #rozcestnik a .txt {width: calc(90% - 80px);}
}

@media (max-width:599px) {
   table.nalomena2 td {display: block;}
   table.nalomena2 td:last-child { text-align: right; margin: -.5em 0 .75em; padding: 0; }
}

@media (max-width:549px) {
   .obsah .left,.obsah .right { margin:.5em 0!important; float:none!important; display: block;}
}

@media (max-width:499px) {
   .uvodni #hgraphics { background-size: 550px auto; }
   #hslogan { font-size: 20px;}
   #hslogan .big{ font-size:35px; }
   .neuvodni #hslogan p {font-weight: bold;font-size:30px;}
   .neuvodni #hslogan .smol { font-size: 20px }
   .overpic #hgraphics {height: 650px; }
}

@media (max-width:469px) {
   .podkat { --sloupce:1; }
   .gallery { --sloupce:1; }
   .sl-rodina .ilust {top:-10px;}
   .sl-rodina .ilust img {width: 80px; height: 80px; }
   .sl-link {justify-content:space-around}
   .sl-link a { margin-left: 0; }
   .sl-link span {display: none;}
   .obsah .quadbutton .tlacitko {min-width: 85%; }
   .produkty { --sloupce:1; }
}

@media (max-width:399px) {
   .kform .sloup {width: 100%;padding:0; }
}


@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: 849px) {
   .column4 > div {width: 50%; }
}
@media (max-width:549px) {
   .column3 > div {width: 50%; }
   .column5 > div {width: 50%; }
}
@media (max-width:469px) {
   .column2 > div {width: 100%; }
}