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

html {font-size: 15px; background: #fff; }
body {font-family: 'Arial', sans-serif; }
input,select,textarea,button {font-family: 'Arial',sans-serif;font-size: 1rem;box-sizing:border-box;}

/*========= obecné =====================================================================*/
body { margin:0; background: url(/img/bg.webp) center top repeat-y var(--mainbarva); min-height: 100vh; color:#333; }
#container { min-height: 100%; }
img {max-width: 100%;}
a img {border:0;text-decoration: none;}
a {text-decoration: underline;}

h1 { text-transform: uppercase; font-size:2.25em; line-height: 1.2em; margin:1.25em 0; }
h2 { margin-bottom: .6em; font-size: 2em; line-height: 1.2em; }
h2.nomarginb {margin-bottom: 0;}
h3 {}
h2 a { text-decoration: none; }
h3 a { text-decoration: none; }
h4 a { text-decoration: none; }
#h1blok {display: grid; grid-template: auto / 1fr auto auto auto; grid-template-areas: 'h1 btn1 btn2 btn3'; column-gap: 2em; align-items: center;  }
#h1blok h1 {grid-area: h1; }
#h1blok .tlacitko:nth-of-type(1) {grid-area: btn1; }
#h1blok .tlacitko:nth-of-type(2) {grid-area: btn2; }
#h1blok .tlacitko:nth-of-type(3) {grid-area: btn3; }

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;  }

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%;}

.nedelit {white-space: nowrap;}

.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; }

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

.tlacitko {color:#fff; background:var(--mainbarva); border: 0; font-size: 1rem; padding: .75em 2em; 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 {}
.tlacitko.blu {background:#009fe3; }
.tlacitko.styleswitch.gry {font-weight: normal; background: none; border: 1px solid #aaa; color:#009fe3;  }
.tlacitko.styleswitch.gry::before { content:'● '}

:root {--wastemenu-color: #fff; --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:#e2251d; }
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:var(--mainbarva) }
.uvodni h1 {display: none; }
#naseptavac .naseppolozka:focus { background: var(--mainbarva);}
.gbg, .kform form {background: #f3f3f3;}
.mainbg {background: var(--mainbarva); color:#000;}
.mainbg a {color:#fff;}

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

/*========= prvky hlavičky =============================================================*/
#hlavicka {display: grid; grid-template: auto auto / 50% 1fr; grid-template-areas: 'menu menu' 'logo text'; align-items: center; color:#fff;}
.uvodni #hlavicka {grid-template: auto auto minmax(500px, auto) / 150px 250px 1fr 500px; grid-template-areas: 'menu menu menu menu' 'logo logo _ text' 'anotace anotace navigace navigace'; column-gap: 2%; }
#hlogo {display: block; grid-area: logo; margin: 1.5em 0;}
#hlogo img {max-height: 72px; }
#hslogan {grid-area: text; text-align: right; font-size: 23px; font-weight:bold; }
#hslogan .antibreak{ white-space: nowrap; }
.uvodni #hslogan { font-size: 40px; font-weight:normal; }
#hstred { grid-area: anotace; font-size: 1.2em; line-height: 1.2em; align-self: start; }
#hrozcestnik { grid-area: navigace; position: relative; height: 100%; margin-left: 10%; margin-right: 5%; }

#hrozcestnik .hoverlink { text-decoration: none; position: absolute;  background:center center no-repeat transparent; background-size: contain; }
#hrozcestnik .arrowed { background: #fff; color:#323240; text-transform: uppercase; font-size: 18px; font-weight: bold; text-decoration: none; line-height: 1.25em; padding: 1em calc( 2.75em - 26px ) 1em 2em; position: relative; }
#hrozcestnik .arrowed::after { background: #fff; content:' '; position: absolute; top:0; bottom:0; left:100%; width: 26px; background: url(/img/linkarrowwhite.png) no-repeat transparent; background-size: 100% 100%; }
#hrozcestnik .hoverlink:hover .arrowed { background: #e2251d; color:#fff;}
#hrozcestnik .hoverlink:hover .arrowed::after { background-image: url(/img/linkarrowred.png); }

#hrozcestnik .gfx1005.hoverlink { left:100px; top:-150px; width: 262px; height: 206px; background-image:url(/img/link1005.png); }
#hrozcestnik .gfx1005 .arrowed { left:-70px; top:100px; }
#hrozcestnik .gfx1006.hoverlink { right:70px; top:0px; width: 255px; height: 253px; background-image:url(/img/link1006.png); }
#hrozcestnik .gfx1006 .arrowed { left:auto; right:-180px; top:120px; padding: 1em 2em 1em calc( 2.75em - 26px ); }
#hrozcestnik .gfx1006 .arrowed::after {left:auto; right:100%;transform: rotate(180deg); }
#hrozcestnik .gfx1007.hoverlink { left:100px; top:130px; width: 257px; height: 231px; background-image:url(/img/link1008.png); }
#hrozcestnik .gfx1007 .arrowed { left:-70px; top:100px; }
#hrozcestnik .gfx1008.hoverlink { right:70px; top:340px; width: 255px; height: 211px; background-image:url(/img/link1007.png); }
#hrozcestnik .gfx1008 .arrowed { left:-70px; top:100px; }

/*========= menu =======================================================================*/
.hmenu {grid-area: menu; text-transform: uppercase; width: 100%; }
.hmenu a {text-decoration: none; display: table; color:#fff; width: 100%; }
.hmenu .extrawrap { display: flex; align-items: stretch; justify-items: stretch; }
.hmenu .radic { position: relative; text-align: center; flex-grow: 1; }
.hmenu .msp { display: table-cell; vertical-align: middle; padding: 1em 0; line-height: 1.25em; height: 2.5em;}
.hmenu .radic:hover .msp,
.hmenu .active .msp{ font-weight: bold; color:var(--mainbarva); background: #fff; }

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

#programfiltr { padding: 2em 0 0; }
#by_type { display: flex; column-gap: 3em; flex-wrap: wrap; row-gap: 1em; }
#by_date { display: flex; column-gap: 3em; flex-wrap: wrap; row-gap: 1em; margin: 1.5em 0; border: 1px solid #ddd; border-left: 0; border-right: 0; padding: 2em 0;  }
#by_locn { padding: .5em 0 1em; }
#programfiltr .cblike { display: block; color:#333; position: relative; padding: .5em 0; padding-left: 3em; text-decoration: none; line-height: 1.25em; }
#programfiltr .cblike::before { display: block; content:' '; color:var(--mainbarva); border:3px solid #777; position: absolute; left:0; top:calc( 50% - 16px ); box-sizing: border-box; width: 32px; height: 32px; text-align: center; line-height: 28px; font-size: 2.25em; }
#programfiltr .cblike.active::before { content:'✓'; border-color: var(--mainbarva); }
select.ftrselect { width: 100%; max-width: 200px; padding: .75em; background: #fff; border: 1px solid #ddd; border-bottom-width: 2px; border-radius: 2px; }

#programVypis {margin: 2em 0 0; }
#programVypis h2 {border-bottom:1px solid #ddd; padding: .5em 0; margin: 1em 0 0; }
#programVypis h3 {border-bottom:1px solid #ddd; padding: .5em 0; margin: 1em 0 0; color:var(--mainbarva); font-size: 1.3em; }
#programVypis .akce-oversight {border-bottom:1px solid #ddd; padding: 1.25em; }
#programVypis .akce-vypis {display: grid; grid-template: auto auto auto auto/17% minmax(auto,15%) minmax(auto,12%) minmax(auto,15%) 1fr 120px; row-gap: 1em; column-gap: 1.25em; align-items: center;
            grid-template-areas: 'foto nadpis nadpis nadpis nadpis skupina' 
                                 'foto popis popis popis popis tlacitko'
                                 'foto datum cas misto typ tlacitko'
                                 'foto nominace nominace nominace nominace tlacitko'
}
#programVypis .akce-vypis .toplink { grid-area: foto; }
#programVypis .akce-vypis .toplink img { width: 100%; height: 100%; max-height: 150px; object-fit: cover; }
#programVypis .akce-vypis .h2 { grid-area: nadpis;font-weight: bold; font-size: 1.33em; color:#333; }
#programVypis .akce-vypis .popisek { grid-area: popis; font-size: 1.13em; }
#programVypis .akce-vypis .datumn  { grid-area: datum;color:#888; }
#programVypis .akce-vypis .casn    { grid-area: cas;  color:#888; }
#programVypis .akce-vypis .locn    { grid-area: misto;color:#888; }
#programVypis .akce-vypis .typn    { grid-area: typ;  color:#888; }
#programVypis .akce-vypis .btns {grid-area: tlacitko; display: flex; justify-content: space-between; flex-direction: row-reverse; }
#programVypis .akce-vypis .nomi {grid-area: nominace; color:#888;}
#programVypis .akce-vypis .ubtns {grid-area: skupina; color:#888; text-align: right;}
#programVypis .akce-vypis .tlacitko {background: #323240; height: 40px; line-height: 40px; width: 40px; padding: .5em; text-transform: uppercase; font-weight: normal; text-align: center;}
#programVypis .akce-vypis .bzwiget { width: 100%; white-space: nowrap; }

#programVypisSem {margin: 2em 0 2em; }
#programVypisSem h2 {border-bottom:1px solid #ddd; padding: .5em 0; margin: 2em 0 0; }
#programVypisSem .akce-vypis {border-bottom:1px solid #ddd; padding: 1.25em; display: grid; grid-template: auto auto/minmax(175px,18%) 1fr 120px; row-gap: 1em; column-gap: 1.25em; align-items: center;
            grid-template-areas: 'foto nadpis tlacitko' 
                                 'foto popis popis'
}
#programVypisSem .akce-vypis .toplink { grid-area: foto; }
#programVypisSem .akce-vypis .toplink img { width: 100%; height: 100%; max-height: 150px; object-fit: cover; }
#programVypisSem .akce-vypis .h2 { grid-area: nadpis;font-weight: bold; font-size: 1.33em; color:#333; }
#programVypisSem .akce-vypis .popisek { grid-area: popis; font-size: 1.13em; }
#programVypisSem .akce-vypis .btns {grid-area: tlacitko; display: flex; justify-content: space-between; flex-direction: row-reverse; }
#programVypisSem .akce-vypis .tlacitko {background: #323240; height: 40px; line-height: 40px; width: 40px; padding: .5em; text-transform: uppercase; font-weight: normal; text-align: center;}

#proggrid {}
#proglegend {display: flex; flex-wrap: wrap; column-gap: 1em; row-gap: .5em; margin: 0 0 .5em; }
#proglegend p { white-space: nowrap; margin: 0; padding: .1em .5em; }
#proglegend p span { display: inline-block; width: 1em; height: 1em; vertical-align: middle; background: var(--prog_line_free) }
#progsched {display: flex; flex-direction:column; overflow-x: auto; position: relative; }
#progsched .lines {width: 100%; height: 100%; left:0; top:0; position: absolute; white-space: nowrap;}
#progsched .line {height: calC( 100% - 15px ); width:149px; border-left: 1px solid #ddd; position: relative; top:0; display: inline-block; }
#progsched .line:first-of-type {margin-left:calc( var(--prog-place-label-width) - 1px ); }
#progsched .row { display: grid; align-items:stretch; position: relative; border-bottom: 1px solid #ddd; }
#progsched.allday .row { grid-template-columns: var(--prog-place-label-width) repeat(18,var(--prog-hour-width)); width:calc( var(--prog-place-label-width) + 18 * var(--prog-hour-width) ); }
#progsched.afternoon .row { grid-template-columns: var(--prog-place-label-width) repeat(12,var(--prog-hour-width)); width:calc( var(--prog-place-label-width) + 12 * var(--prog-hour-width) ); }
#progsched .row:last-of-type { margin-bottom: 15px; }
#progsched .header{ padding: .25em .25em; text-align: center; }
#progsched .infobox { padding: .5em .25em .5em 0; display: grid; align-items: center; background: #fff; position: sticky; left:0; border-right: 1px solid #ddd; z-index: 1; }
#progsched .akce-time { padding: 0 .125em; word-break: break-word; }
#progsched .akce-oversight {border-bottom:1px solid #999;}
#progsched .akce-time.past { opacity:.5; }
#progsched .tlacitko.kosikove { width: calc( 100% - .5em ); padding: .1em 0; margin: .5em .25em .25em; text-align: center; background: #000; }
#progsched .tlacitko.kosikove img { max-height: 20px; }
:root { --prog-hour-width:150px; --prog-place-label-width:100px; --prog_line_free:#fcb; --prog_line_A:#7f7; --prog_line_B:#8ff; --prog_line_C:#fe2; --prog_line_D:#2cf; --prog_line_other:#bcc; }
#proggrid .barva { }
#proggrid .barva a { color:#000; }
#proggrid .barva.bp { background: var(--prog_line_free); }
#proggrid .barva.bp a {  }
#proggrid .barva.bpA { background: var(--prog_line_A); }
#proggrid .barva.bpA a { }
#proggrid .barva.bpB { background: var(--prog_line_B); }
#proggrid .barva.bpB a { }
#proggrid .barva.bpC { background: var(--prog_line_C); }
#proggrid .barva.bpC a { }
#proggrid .barva.bpD { background: var(--prog_line_D);  }
#proggrid .barva.bbpD a { }
#proggrid .barva.bpX { background: var(--prog_line_other); }
#proggrid .barva.bpX a { }
#proggrid .barva.bpA×C { background: linear-gradient(to right top,var(--prog_line_A) 45%,var(--prog_line_C) 55%); }
#proggrid .barva.bpA×C a { }
#proggrid .barva.bpB×D { background: linear-gradient(to right top,var(--prog_line_B) 45%,var(--prog_line_D) 55%); }
#proggrid .barva.bpB×D a { }
#p_timeline {display: block; height: calc( 100% - 15px ); width: 1px; background: var(--mainbarva); position: absolute; top:0; left:0; }

#dualvideo {display: flex; column-gap: 8%; margin:4em 0; }
#dualvideo .vid { width: 46%; }
#dualvideo .vid iframe { width: 100%; }

#videolink { margin:4em 0; text-align: center; }
#videolink a { display: inline-block; text-transform: uppercase; padding: 1.25em 2.5em; background: #323240; color:#fff; font-size: 18px; text-decoration: none; }

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

.obsah { line-height: 1.5em; position: relative; }
.obsah p { margin-top: 0;}
.obsah table {max-width:100%; border-collapse: collapse; }
.obsah table.ramovana { border: 1px solid;}
.obsah table.ramovana td,.obsah table.ramovana th { border: 1px solid;}
.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; }

.obsah.prelogovateno img { margin:1.5em; vertical-align: middle; max-width: calc( 100% - 3em ); }
.obsah p.novinkadatum { margin: -2em 0 2em;}

.anotacka { font-size: 1.1em; }

.akceobsah .mainfoto {position: relative;min-height: 50px; }
.akceobsah .mainfoto img {min-height: 50px; object-fit: cover;}
.akceobsah .belowfoto { margin: 1em 0; }
.akceobsah .belowfoto .dat {display: grid; grid-template-columns: 300px 1fr; column-gap: 1em; justify-items: start; align-items: center; border: 1px solid #eee; border-left: 0; border-right: 0; margin-bottom: -1px; padding: .25em 0; }
.akceobsah .belowfoto .loc {margin: 0;padding: .25em 0; }
.akceobsah .belowfoto .rozsah {grid-area: 1/1/2/2; margin: 0; }
.akceobsah .belowfoto .vstup {grid-area: 1/2/2/3; margin: 0; }

.akceobsah .nakupradek {display: inline-block; white-space: nowrap }

.akceobsah .stitek { position: absolute; left:0; bottom: 15px; background: #fff; padding: 1em; font-weight: bold; }

#special_hlidani {position: absolute; right:0; top:0;}

#mapareaWrap {overflow: auto; width: 100%; background: #fff; padding:0; border: 2px solid #ddd;}
#mapareaWrap img {min-width: 800px; }

.bzuco-widget-ticket > span { display: inline-block; width: 11em; vertical-align: middle; white-space: normal; }
#progsched .bzuco-widget-ticket > span { white-space: nowrap; width: auto; }
#progsched .bzuco-widget-ticket > button { width: 100%; padding: .1em 0; text-align: center; background: #000; }
#progsched .bzuco-widget-ticket > button img { max-height: 20px; }
.bzuco-widget-ticket button {color:#fff; background:var(--mainbarva); border: 0; font-size: 1rem; padding: .75em 2em; line-height: 1em; font-weight: bold; text-decoration: none; cursor: pointer; display: inline-block; }
.bzuco-widget-ticket input {font-size: 1rem; padding: .5em; line-height: 1em; display: inline-block; width: 5em;}

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

/*========= podstránky =================================================================*/
.podkat {width: 100%; margin-top: 1em; }
.podkat a {width: 30.3%; margin: 1em 1.5%; font-size: 1.1em; display: inline-block; vertical-align: top; border: 1px solid #eee; padding: .33em 1%; position: relative; box-sizing: border-box; }
.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 ====================================================================*/
#novinkysekce { line-height: 2.5em; margin:2em 0 4em;}
#novinkysekce .novitlacitko { background: #323240; color: #fff; display: inline-block; text-transform: uppercase; padding: .25em 1em; line-height: 1.5em; text-decoration: none; border-radius: 5px; margin-right: .25em; font-size: 14px; }
#novinkysekce .novitlacitko:hover,
#novinkysekce .novitlacitko.active { background: #fff; color: #323240; }

#novinkyvypis {display: flex; flex-wrap: wrap; column-gap: 8%; row-gap: 3em; margin:4em 0; }
#novinkyvypis .polozka { width: 28%; display:grid; grid-template: 330px auto 1fr 60px / 60px 1fr; 
          grid-template-areas: 'foto foto' 'link link' 'text text' 'btn datum'
}
#novinkyvypis .imglink { grid-area: foto; margin-bottom: 2.5em; }
#novinkyvypis .imglink img { width:100%; height: 100%; object-fit: cover; }
#novinkyvypis .textlink { grid-area: link; font-size: 29px; line-height: 1.2em; }
#novinkyvypis .textlink:not(:hover) { text-decoration: none; }
#novinkyvypis .nmiddle { grid-area: text;  margin: 1.5em 0 1em; font-size: 18px; }
#novinkyvypis .squarelink { grid-area: btn; text-transform: uppercase; text-decoration: none; background: #323240; color:#fff;  text-align: center; line-height: 60px; font-size: 14px; display: block; }
#novinkyvypis .datumn { grid-area: datum; font-size: 14px; text-align: right; margin:0; line-height: 60px; }

#novinkylink { margin:4em 0; text-align: center; }
#novinkylink a { display: inline-block; text-transform: uppercase; padding: 1.25em 2.5em; background: #323240; color:#fff; font-size: 18px; text-decoration: none; }

/*========= sloupce ====================================================================*/
#sloupec-levy {}
#sloupec-pravy {}

.sl-box { margin-bottom: 2em;}
.sl-box p {}
.sl-box p.h2 { font-weight: bold; font-size: 1.1em; }

.sl-box.novy {}
.sl-box.novy .polozka{ }
.sl-box.novy p{ }
.sl-box.novy p.h2 { font-weight: bold; font-size: 1.1em; }
.sl-box.novy p.datum { font-size: .9em; color:#777; margin: 0 0 .5em;}
.sl-box.novy .link { display: block; font-size: 1.1em; margin: 1em 0 1em; }

.sl-box.nltr {}
.sl-box.nltr p {}
.sl-box.nltr p.h2 {}

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

/*========= slider =====================================================================*/
#slider1, .slider1, .slider1 .vnitrek .content {max-height: 270px; overflow: hidden;}
.slider1 .vnitrek .content {height:auto; padding-top: 39.13%; }

.slider1 { position: relative; margin-bottom: 2em; }
#slider1 { overflow: hidden; }

.slider1 .bx-pager {position: absolute; bottom: 0; right: 0;}
.slider1 .bx-pager-item { margin-left: 10px; display: inline-block }
.slider1 .bx-pager-link { background: #777; width: 20px; height: 20px; font-size: 0; display: block; }
.slider1 .bx-pager-link.active {background: #000; }
.slider1 .bx-prev,.slider1 .bx-next {position: absolute; bottom: 45%; }
.slider1 .bx-prev {left: 0;}
.slider1 .bx-next {right: 0;}

.slider1 .vnitrek {position: relative;overflow: hidden}
.slider1 .vnitrek .content {display: block; text-align: center; }
.slider1 .vnitrek .img {width: 100%; text-align: center; position: absolute; left: 0;/*left:50%;*/  top:50%; /*bottom:0; top:0;*/ }
.slider1 .vnitrek .img img {position: relative;
                            -webkit-transform:translateY(-50%)/* translateX(-50%)*/;
                            -moz-transform:translateY(-50%)/* translateX(-50%)*/;
                            -ms-transform:translateY(-50%)/* translateX(-50%)*/;
                            transform: translateY(-50%)/* translateX(-50%)*/;
}
.slider1 .text {position: absolute; display: block; top:20%; left: 0;}
.slider1 .text2 {display: block}

/*========= kontaktní formulář =========================================================*/
.kform { text-align: left; max-width: 570px;}
.kform form { padding: 1.5em 3% .5em; }
.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 ::placeholder { font-style: italic; color:#777; opacity: 1;}
#telo .kform {padding-top: .5em;}

/*========= formulář newsletteru =======================================================*/
.nwform { text-align: left; max-width: 570px;}
.nwform form { padding: .5em 3%; }
.nwform p {margin: 0 0 1em; }
.nwform label {display: block; line-height: 1.5em;}
.nwform label.readerhelp {width: 0; height: 0; overflow: hidden; display: block; }
.nwform .stretch {width: 100%; padding: .5em; background: #fff; }
.nwform .tlacitko {}
.nwform ::placeholder { font-style: italic; color:#777; opacity: 1;}

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

/*========= prvky patičky ==============================================================*/
#paticka { background: #fff; padding: 2rem 6% 1rem;font-size: 0;  }
#paticka a { color:#999; }
#paticka img { margin-right: 2em }
#paticka .kboxl {white-space: normal;font-size: .9rem; }
#zakonceni { background: #fff; padding: 1em 6% 4em; position: relative; clear: both; color:#999;;font-size: .9rem; line-height: 2em; }
#zakonceni a { color:#999; white-space: nowrap; }

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

#bzucokoslink {position: fixed; top:2em; right:2em; }
#bzucokoslink .tlacitko { background: #323240 url(/img/icon_kosik.png) center top no-repeat; padding: .5em; padding-top: 40px; font-weight: normal; text-align: center; box-shadow: 1px 1px 8px -4px #323240; min-width: 50px; }


#modalbase {position: fixed; top:0; left:0; width: 100vw; height: 100vh; 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 > div {overflow: auto; width: 100%; height: 100%; }
#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; height: 90vh; 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; height: 90vh; 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; height: 90vh; 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; height: 90vh; max-width: none; width: 90vw; }
#modaldialog.dialogpaymentgateway .iframecontain {position: relative; width: 100%; height: 100%;}
#modaldialog.dialogpaymentgateway iframe { width: 100%; height: 100%; border:0; }

#modaldialog.bzucoshop { top:5vh; height: 90vh; width: 90vw; max-width: none; }
#modaldialog.programDL { top:5vh; height: 90vh; width: 90vw; max-width: 550px; padding: .75em; }

/*========= responzivity ===============================================================*/
@media (max-width:1400px)
{
   #hlavicka {grid-template: auto / 46% 4% 1fr 70px; grid-template-areas: 'logo _ text menu'; padding-top: 20px; }
   .uvodni #hlavicka {grid-template: 120px minmax(450px, auto) / 120px 10% 1fr 70px; grid-template-areas: 'logo logo text menu' 'anotace anotace navigace navigace'; column-gap: 2%; }
   .uvodni #hslogan { font-size: 24px;}
   .uvodni #hslogan .duplpart {display: none;}
   #hrozcestnik { height: 100%; margin-left: 0; }   
   #hrozcestnik .hoverlink { transform: scale(.8); }
   #hrozcestnik .gfx1005.hoverlink { left:70px; top:-50px; }
   #hrozcestnik .gfx1006.hoverlink { right:0; top:0px; }
   #hrozcestnik .gfx1007.hoverlink { left:70px; top:160px; }
   #hrozcestnik .gfx1008.hoverlink { right:0; top:300px;  }
   .max-sirka {width: 93%; margin: auto 3.5%;}
   #xhmenu {width: auto; justify-self: right;}
   #xhmenu a {color:var(--mainbarva); }
   #xhmenu .extrawrap {display: block; background: rgba(255,255,255,.95); position: fixed; top:0; padding: 3em 18% 0; left:0; width: 100vw; height: 100vh; overflow: auto; z-index: 999; box-sizing: border-box; font-size: 1.25rem; font-weight: bold; }
   #xhmenu .radic{ display: block; text-align: center;z-index: 1000;}
   #xhmenu .msp { padding:1em 0; height: auto;}
   #xhmenu .shower a { width: auto; }
   #xhmenu .radic:hover .podmenu, #xhmenu .podmenu.shown { display: none; }
   .hmenu .hider { display:none!important; }
}

@media (min-width: 1399px) {
   .hmenu .shower {display:none!important;}
}
@media (max-width:1400px)
{
   :root {--prog_dt_line: 5; --prog_dt_gap: 1.5em; --prog_dt_sizecorr: 1.2em; }
}

@media (max-width:999px) {
   #hslogan {font-size: 18px;}
   #hslogan .duplpart {font-size: 18px; display: none;}
   #programVypis .akce-vypis {grid-template: auto auto auto auto auto / 25% auto 120px; row-gap: .75em;
            grid-template-areas: 'foto nadpis nadpis' 
                                 'foto popis popis'
                                 'datum misto skupina'
                                 'cas typ tlacitko'
                                 'nominace nominace tlacitko'
   }
   #dualvideo { flex-wrap: wrap; }
   #dualvideo .vid { width: 100%; }
   #h1blok {display: block; margin: 2.5em 0; }
   #h1blok .tlacitko { margin-bottom: .75em; margin-right: 1em; }
}

@media (max-width: 889px){   
   .uvodni #hlavicka {grid-template: 120px 420px auto / 180px 1fr 70px; grid-template-areas: 'logo text menu' 'navigace navigace navigace' 'anotace anotace anotace'; }
   #hlogo img { max-height: 50px; }
   #hrozcestnik .gfx1005.hoverlink { left:20px; top:0px; }
   #hrozcestnik .gfx1006.hoverlink { right:0; top:0px; }
   #hrozcestnik .gfx1007.hoverlink { left:20px; top:200px; }
   #hrozcestnik .gfx1008.hoverlink { right:-50px; top:230px;  }
   #novinkyvypis .polozka { width: 46%; } 
}

@media (max-width:799px) {
   .uvodni .gallery .box,.gallery .box {width: 50%; }
   .akceobsah .belowfoto .dat {display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; row-gap: .25em; }
   .akceobsah .belowfoto .rozsah {grid-area: 1/1/2/2; margin: 0; }
   .akceobsah .belowfoto .vstup {grid-area: 2/1/3/2; margin: 0; }
}

@media (max-width:749px) {
   .kform {width: auto; margin: auto; }
   #telo {width: auto; margin: auto; }
   #special_hlidani {position: static;}
   #paticka {font-size: inherit; white-space: normal;}
   #paticka .kboxl, #paticka .kboxr {display: block; width: 100%; font-size: .9em; margin:1em 0; }
   #paticka .kboxr table { float:none; }
}

@media (max-width:599px) {
   #programVypis .akce-vypis {padding-left: 0; padding-right: 0; grid-template: auto auto auto auto auto auto / auto 1fr; row-gap: .33em;
            grid-template-areas: 'nadpis nadpis'
                                 'popis popis'
                                 'misto misto'
                                 'cas typ'
                                 'skupina skupina'
                                 'tlacitko tlacitko'
   }
   #programVypis .akce-oversight {padding: .75em;}
   #programVypis #progsched .akce-oversight {padding: 0 .25em;}
   #programVypis .akce-vypis .toplink { display: none; }
   #programVypis .akce-vypis .datumn { display: none; }
   #programVypis .akce-vypis .nomi { display: none; }
   #programVypis .akce-vypis .btns .tlacitko:only-child { display: none; }
   #programVypis .akce-vypis .ubtns { text-align: left; }
   #programVypisSem .akce-vypis {grid-template: auto auto auto auto / 100%; 
            grid-template-areas: 'foto' 
                                 'nadpis'
                                 'popis'
                                 'tlacitko'
   }
   #programVypisSem .akce-vypis .toplink img { max-height: 50vw; }
   :root { --prog-place-label-width:70px; }
   #progsched {width: 110%; left:-5%; }
}

@media (max-width:549px) {
   #hlavicka {padding-top: 1px;}
   .uvodni #hlavicka {grid-template-rows: 120px auto auto; grid-template-columns: 180px 1fr 70px;}
   #hrozcestnik { margin-right: 0; }
   #hrozcestnik .hoverlink { display: inline-block; position: static; height:auto!important; width: 49%!important; background-position: center top; padding-top: 55%; vertical-align: top; }
   #hrozcestnik .arrowed {position: static; display: block; font-weight: bold; color: #fff; background: transparent; width: 100%; text-align: center; padding: 0!important; font-size: 24px; }
   #hrozcestnik .arrowed:after {display: none; }
   #hrozcestnik .hoverlink.gfx1005 {background-position-y: 20px; }
   .obsah .left,.obsah .right { margin:.5em 0!important; float:none!important; display: block;}
   .simpleform p label {width: 42%;}
   .simpleform p.cb label { width: 75%; }
   .bzwiget .bzuco-widget-ticket > span {display: block; width: auto;}
   :root {--prog_dt_line: 3; --prog_dt_gap: 1em; --prog_dt_sizecorr: .7em; }
}

@media (max-width:499px) {
   #novinkyvypis .polozka { width: 100%; } 
   #hslogan {font-size: 15px;}
}
   
@media (max-width:469px) {
   #hlavicka {grid-template: auto / 1fr 70px; grid-template-areas: 'logo menu'; }
   #hslogan {display: none;}
   .akceobsah .belowfoto {grid-template-columns: auto; grid-template-rows: auto auto auto; }
   .akceobsah .belowfoto .vstup {grid-area: 3/1/4/2; margin: 0;}
   .akceobsah .bzuco-widget-ticket > span { display: block; width: auto; white-space: normal; }
}

@media (max-width:399px) {
   .kform .sloup {width: 100%;padding:0; }
   #h1blok .tlacitko {display: block; text-align: center;margin-right: 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,
   .column3 > div,
   .column4 > div,
   .column5 > div {width: 100%; }
}