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

/* latin */
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/img/epilogue/nlat.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/img/epilogue/nlext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Epilogue';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/img/epilogue/ilat.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Epilogue';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/img/epilogue/ilext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html {font-size: 17px; background: #fff; }
body {font-family: 'Epilogue','Arial',sans-serif; }
input,select,textarea,button {font-family: 'Arial',sans-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: 36px; line-height: 1.3;}
h1::after { display: block; content: ' '; height: 9px; max-width: 150px; background: var(--mainbarva); margin-top: .4em; }
h2 { margin-bottom: .6em; font-size: 30px; line-height: 1; }
h2.uvodflek { text-align: center; padding: 0 .5em; }
h2.uvodflek span { display: inline-block; position: relative; }
h2.uvodflek span::before { display: block; content: ' '; height: 9px; background: #FBEE54; position: absolute; bottom:3px;left:-.5em; padding: 0 .5em; width: 100%; z-index: -1; }
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: 1420px; margin:auto;position: relative;}

.tlacitko {color:#fff; background:var(--mainbarva); border: 0; border-radius: 5px; font-size: 1rem; padding: .75em 1.5em; line-height: 1em; font-weight: bold; text-decoration: none; cursor: pointer; display: inline-block;}
button.tlacitko,input[type=submit].tlacitko {}
.tlacitko:hover {}
button.tlacitko:hover,input[type=submit].tlacitko:hover {}

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

: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:#61AF42; }
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 { color:#FBEE54; }
h2 { color:#00502D; }
#naseptavac .naseppolozka:focus { background: var(--mainbarva);}
.gbg {background: #f3f3f3;}
.mainbg {background: var(--mainbarva); color:#000;}
.mainbg a {color:#fff;}

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

/*========= prvky hlavičky =============================================================*/
#hlavickabg { padding: .5em 0; }
#hlavicka {display: grid; column-gap: 3%; align-items: center; grid-template: auto auto / 259px 1fr; grid-template-areas: 
              'logo hmenu'
              'logo jmenu';
}
#hlogo { display: block; grid-area: logo; }
#nhmenu { grid-area: hmenu; }
#jhmenu { grid-area: jmenu; }
#xhmenu { grid-area: xmenu; }

/*========= menu =======================================================================*/
.hmenu { display: flex; justify-content: right; align-items: stretch; column-gap: 2em; }
.hmenu a {text-decoration: none; display: block; height: 100%; color: #333;}
.hmenu .msp { display: grid; align-content: center; line-height: 1.25em; height: 100%; min-height: 2.5em;}
.hmenu .tlacitko { display: grid; color: #fff; box-sizing: border-box; margin-left: 1em }
.hmenu .tlacitko .msp{ padding: 0; min-height: 0; line-height: unset; }
.hmenu a:hover:not(.tlacitko) .msp,
.hmenu .active :not(.tlacitko) .msp{ text-decoration: underline; }

#xhmenu {z-index: 1000; }
#xhmenu .extrawrap {display: block; background: #EFF7EC; position: fixed; top:0; padding: 1em 18% 14em; 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:.25em 0 .25em 10%; height: auto;font-weight: bold;}
#xhmenu .radic:hover .podmenu, #xhmenu .podmenu.shown { display: none; }
#xhmenu .overline { border-top: 1px solid #ddd; padding: .5em 0; }

#jhmenu { display: flex; justify-content: right; align-items: stretch; font-weight: bold; font-size: 18px; column-gap: 1.5em; margin-top: .75em; padding-top: .75em; border-top: 1px solid #E6E6E6; }
#jhmenu a { color: #00502D; display: block;  }
#jhmenu .radic > a { padding-left: 45px; background: left center no-repeat; height: 100%; background-size: 35px auto; }
#jhmenu .radic > a[href='/zemedelska-technika-siroky'] { background-image: url(/img/tech_zem.png); }
#jhmenu .radic > a[href='/komunalni-technika-siroky'] { background-image: url(/img/tech_kom.png); }
#jhmenu .radic > a[href='/lesni-technika-siroky'] { background-image: url(/img/tech_les.png); }
#jhmenu .radic > a[href='/zahradni-technika-siroky'] { background-image: url(/img/tech_zahr.png); }
#jhmenu .msp.l1 { display: grid; align-content: center; line-height: 1.25em; height: 100%; min-height: 2.5em;}
#jhmenu .radic:not(:hover) .podmenu {display:none;}
#jhmenu .radic { position: relative;}
#jhmenu .podmenu { position: absolute; top:100%; width: 100%; height: 26px; background:url(/img/menupoint.svg) center top no-repeat; z-index: 10; }
#jhmenu .podbox_pos { position: absolute; top:26px; z-index: 11; }
#jhmenu .podbox { border-radius: 5px; border-top: 10px solid #FBEE54; background: #fff; padding: 1em; box-shadow: 0 5px 5px #00000077;}

#jxmenu .radic:not(.open) ul { display: none; }
#jxmenu .radic > a { font-weight: bold; }
#jxmenu a { text-decoration: none; }
#jxmenu ul a { padding: .75em 0 .75em 10%; }
#jxmenu .radic:hover .katlink,#jxmenu .radic.active .katlink,
#jxmenu ul a:hover,#jxmenu ul a.active { text-decoration: underline; }
#jxmenu ul { margin:0; padding: 0; list-style: none; }
#jxmenu li { margin:0; padding: 0; }
#jxmenu .rozklik {display: inline-block; vertical-align: baseline; padding: .75em 0; width: 10%; background: center center no-repeat; cursor: pointer; text-align: center}
#jxmenu .rozklik::before {content:'⏵';}
#jxmenu .open .rozklik::before { content: '⏷'; }
#jxmenu .katlink {display: inline-block; vertical-align: baseline; padding: .75em 0; width: 90%; }
#jxmenu .empty { visibility: hidden; }

/*========= prvky stránky ==============================================================*/
.uvodni #strankabg {background: #61AF4219; padding-top: calc( 150px + 2em ) }
#strankabg {padding: 1em 0 3em; }
#stranka { }
.uvodni #stranka { display: grid; grid-template: auto / 50% 45%; column-gap: 5%; grid-template-areas:  'telo sloupecR'; }
#telo {grid-area: telo;}
#sloupec-pravy { grid-area: sloupecR; }

.uvodni #uvodnikbg { background: url(/img/triamgl.svg) bottom center no-repeat,url(/img/uvodnik.webp) center top no-repeat; background-size:calc(100%+10px) auto,auto 100%; height: 643px;  }
.uvodni #uvodnik { height: 100%; }
#uvodniktext {background:#00502D; padding: .5em 2em 1em; color:#fff; border-radius: 10px; line-height: 1.5 }
.uvodni #uvodniktext { position: absolute; left:0; bottom:-100px; box-shadow: 0 5px 5px 5px #00000044; z-index: 10; max-width: 50%; box-sizing: border-box; }

#rozcestnikbg { background: url(/img/triamglvisici.svg) top center no-repeat; background-size: calc(100%+10px) auto; margin-top: 0; padding-top: calc( 65px + 2em ); }
#rozflex { --sloupce:2; --rozestup:3em; font-size: 23px; }
#rozcestnik a { color:#fff; font-weight: bold; background: #00502D; border-radius: 10px; }
#rozcestnik a:not(:hover) { text-decoration: none; }
#rozcestnik .pix { display: block; aspect-ratio: 2; }
#rozcestnik .pix img { display: block; object-fit: cover; aspect-ratio: 2; }
#rozcestnik .text { padding: 1em; display: block; }
#rozcestnik .writing::before {content:' '; display: inline-block; vertical-align: middle; width:12%; height: 11px; margin-right: .75em; margin-left: -1em; background: #FBEE54; }

#heslabg { background: url(/img/triamglsedy.svg) center bottom no-repeat; background-size: calc(100%+10px) auto; margin-bottom: 0; padding-bottom: 5em; min-height: calc( 223px - 4em ); margin-top: 5em; }
#heslaflex { --sloupce:5; --rozestup:2em; margin: 0; padding: 0; overflow: unset; }
#heslaflex li { padding: 130px 1em 3em; margin: 0; box-shadow: 0 0 5px #00000025; border-radius: 10px; list-style: none; position: relative; box-sizing: border-box; background: #fff; text-align: center;}
#heslaflex li::before { display: block; content: ' '; position: absolute; left:0; right:0; margin-inline: auto; top:30px; width: 80px; height: 80px; border-radius: 50%; background: #00502D center center no-repeat; background-image: var(--bgimg); }

#rozcestnikbg h2,#heslabg h2{ margin-bottom: 2em; }

/*========= obsah ======================================================================*/
#telo {padding: 0; margin:0;}

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

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

.anotacka { font-size: 1.1em; }

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

/*========= podstránky =================================================================*/
:root { --podkat_sloupce:3; --podkat_mezery:calc( var(--podkat_sloupce) - 1 ); --podkat_sloupce_mezera:3%;}
.podkat {width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; column-gap: var(--podkat_sloupce_mezera); row-gap: 1em; margin: 1em 0; }
.podkat a {font-size: 1.1em;align-items: stretch; border: 1px solid #eee; padding: .33em 1%; position: relative; box-sizing: border-box;
   flex: 0 0 calc( calc( 100% - calc( var(--podkat_mezery) * var(--podkat_sloupce_mezera) ) ) / var(--podkat_sloupce) );}
.podkat a:hover {border: 1px solid #ccc; }
.podkat.sfoto a { min-height: 125px; }
.podkat.sfoto .pic { display: block; height: 100px; line-height: 100px; width: auto; max-width: 100%; white-space: nowrap; text-align: right; }
.podkat.sfoto img {vertical-align: middle;}

/*========= fotky ======================================================================*/
.gallery {width: 100%; margin-top: 1em;}
.gallery .box {width: 25%; display: inline-block; text-align: center; vertical-align: top; margin: .75em 0;}
.uvodni .gallery .box {width: 33%; }
.gallery .box a {display: block; white-space: nowrap; line-height: 150px;}
.gallery .box img {vertical-align: middle; }
.gallery img { padding:2%; border: 1px solid #fafafa; box-sizing: border-box; }
.gallery .text { display: block; padding: 0 2%; margin-top: .1em; }

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

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

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

/*========= sloupce ====================================================================*/
#sloupec-pravy { --sloupce:2; --rozestup:.75em; }
#sloupec-pravy .fotoflex { background: #fff; border-radius: 10px; display: grid; align-content: center; justify-content: center; box-shadow: 0 0 5px 0 #00000010; }

/*========= š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; width: 100% }
.kform form { }
.kform p {margin: 0 0 1em; }
.kform .sloup {display: inline-block; vertical-align: top; width: 48%; }
.kform .l { padding-right: 2%; }
.kform .r { padding-left: 2%; }
.kform label {display: block; line-height: 1.5em; padding: 0;}
.kform label.readerhelp {width: 0; height: 0; overflow: hidden; display: block; }
.kform .stretch {width: 100%; padding: .5em; border:0; background: #fff;}
.kform textarea.stretch { height: 4.25em;}
.kform .tlacitko {}
.kform .kfgrupa { display: grid; row-gap: .25em; column-gap: 1.5em; font-size: 13px; grid-template: 1fr auto / 1fr auto; text-align: right; }
.kform .kfgrupa .tl { grid-area: 1/2/3/3; }
.kform ::placeholder { font-style: italic; color:#777; 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 ==============================================================*/
#patickabg {background: #61AF4233; margin-top: 0; padding: 3em 0;}
#paticka { display: grid; row-gap: 2em; column-gap: 15%; grid-template: auto / 40% 1fr; }
#paticka a { color:#00502D; }
#paticka h2 { font-size: 22px; margin-bottom: 1.5em; }
#paticka h2::after { display: block; content: ' '; height: 5px; max-width: 60px; background: #61AF42; margin-top: .4em; }
#zakoncenibg {background: #fff;}
#zakonceni { padding: 2em 0 4em; position: relative; font-size: 16px; color: #000;}
#zakonceni a { color: #000; }

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

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

.babish { text-align: left;}

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

#modaldialog.dialogkosik { top:20vh; }

#modaldialog.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:1469px) { /* max-sirka + 50px */
   .max-sirka {width: 94%; margin: auto 3%;}
}

@media (max-width:1149px) {
   #hlavicka {grid-template-columns: 175px 1fr;  }
}

@media (max-width:999px) {
   #hlavicka {grid-template: auto / 150px 1fr; grid-template-areas: 'logo xmenu'; }
   #nhmenu,#jhmenu {display:none;}
   .hmenu .hider { display:none!important; }
}

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

@media (max-width:999px) {
   #uvodnik.max-sirka {margin: auto; width: 100%;}
   .uvodni #uvodnikbg {height: auto; padding-top: 1px; background-size: 100% auto,125% auto }
   .uvodni #uvodniktext { max-width: none; position: static; margin-top: 40dvw; }
   #strankabg { padding: 2em 0; }
   .uvodni #strankabg { padding-top: 2em; }
   #rozcestnikbg { padding-top: 1em; background: none; }
   #heslabg { padding-bottom: 3em; margin-top: 3em; }
   #rozcestnikbg h2, #heslabg h2 { margin-bottom: 1em; }
   #heslaflex { --sloupce: 3; justify-content: space-evenly; }
}

@media (max-width:849px) {
  .uvodni #stranka { grid-template: 1fr auto / 100%; grid-template-areas:  'telo' 'sloupecR'; }
} 

@media (max-width:799px) {
   :root { --podkat_sloupce:2; }
   #rozflex { --sloupce:1; --rozestup: 1.5em; }
   .uvodni .gallery .box,.gallery .box {width: 50%; }
}

@media (max-width:749px) {
   h1 {font-size: 24px;}
   #paticka { grid-template: auto 1fr / 100%; }
}

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

@media (max-width:599px) {
   #heslaflex { --sloupce: 2; }
   #rozflex { font-size: 20px; }
}

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

@media (max-width:469px) {
   :root{ --prod_sloupce:1; --podkat_sloupce:1; }
   .podkat a { padding: .66em 1%; }
   .podkat.sfoto a { min-height: 0; }
   .podkat.sfoto .pic { display: none; }
   .prodFiltr > div,.prodFiltr .settings > * {display: block;  }
   .prodFiltr .settings, .prodFiltr .h, .prodFiltr .prvky,.prodFiltr .sender { width: 100%; margin-left: 0; margin-right: 0;}
   .prodFiltr .sender { text-align: right }
   .prodFiltr .sender .tlacitko { padding-right: 1.5em; padding-left: 1.5em; width: auto }
}

@media (max-width:399px) {
   #heslaflex { --sloupce: 1; }
   .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%; }
}