/*========= obecně písma a prvotní vzhled ==============================================*/
@font-face {
   font-family: 'Open Sans';  font-style: normal;  font-weight: 400;
   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/img/OS_400.ttf) format('truetype');
}
@font-face {
   font-family: 'Open Sans';  font-style: normal;  font-weight: 600;
   src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/img/OS_600.ttf) format('truetype');
}
@font-face {
   font-family: 'Open Sans';  font-style: normal;  font-weight: 700;
   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/img/OS_700.ttf) format('truetype');
}

html {font-size: 15px; background: #fff; }
body {font-family: 'Open Sans', 'Arial', sans-serif; color:#6e6e6e; }
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: none;}
.obsah a:not(.tlacitko) { text-decoration: underline}

h1 {font-size: 30px; color:var(--mainbarva); }
.uvodni h1 {display: none;}
h2 { margin-bottom: .6em;color:var(--secbarva); font-size: 22px;}
.uvodni h2{ font-size: 30px; color:var(--mainbarva); margin: 20px 0 10px;display: flex; flex-direction: row; justify-content: center;}
.uvodni h2:after {flex-grow: 1; height: 1px; content: ''; background-color: #ddd; position: relative; top: 1.1em; margin-left: .5em}
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: 1111px; 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: 17px; padding: .8em 1.75em; line-height: 1em; font-weight: normal; text-transform: uppercase; text-decoration: none; cursor: pointer; display: inline-block;}
button.tlacitko,input[type=submit].tlacitko {}
.tlacitko:hover {}
button.tlacitko:hover,input[type=submit].tlacitko:hover {}

:root {--wastemenu-color: var(--mainbarva); --wastemenu-xcolor: var(--mainbarva); --wastemenu-lwidth: 11%; --wastemenu-border: 9%; }
span.wasteofspace{  height: 1.5rem; min-width: 1.5rem; font-size: 0; display: inline-block; vertical-align: middle; overflow: hidden; margin: .25rem;
   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%
      );
}
span span.wasteofspace.insloup { margin-right: .75rem; display: inline-block; vertical-align: middle; }
span span.wasteofspace:not(.insloup) { width: 30px; font-size:0; background-position: center center;  }

/*========= společné definice (barvy, chování apod.) ===================================*/
:root {--mainbarva:#122153; --secbarva:#f29512 }
h1:first-letter,h2:first-letter,h3:first-letter,p.h2:first-letter,p.h3:first-letter {text-transform: uppercase}
a,.mainbarva { color:var(--secbarva) }
a:not(.tlacitko):hover { color:var(--mainbarva); text-decoration: underline; }
#naseptavac .naseppolozka:focus { background: var(--mainbarva);}
.gbg {background: #f3f3f3;}
.mainbg {background: var(--mainbarva); color:#fff;}
.mainbg a:hover {color:#fff;}

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

/*========= prvky hlavičky =============================================================*/
#hlavicka {padding-top: 25px;position: relative;}
#hlogo {display: block; float: left; }
#hlogo img {display: block;}
#hslogan {font-weight: 600;}
#htop {float: right; text-align: right;}

#hslogan2 {float: right; color:var(--mainbarva); font-size: 18px; font-weight: bold; margin-right: 2em; margin-top: .25em;}

/*========= jazyky =====================================================================*/
#vlajky { margin-left: 1em; display: inline-block; vertical-align: middle;}
#vlajky a {margin-left: 1em;}

#xvlajky {border-top:2px solid #fff; display: block; text-align: center; }
#xvlajky a {display: inline-block; width: auto; padding: 1em 0; color:#fff; }

/*========= menu =======================================================================*/
.hmenu { clear: right; float:right; margin-top: .5em; }
.hmenu a { display: block; text-decoration: none; }
.hmenu .radic { position: relative; }
.hmenu .msp { display: grid; align-content: center; line-height: 1.25em; }

#nhmenu { display: flex; column-gap: 2em; }
#nhmenu a {}
#nhmenu .msp { min-height: 2.5em; padding: 0 1em; }
#nhmenu .oddelovac {width: 1px;}
#nhmenu .radic.active > a > .msp{ font-weight: 600; color:var(--mainbarva) }

#xhmenu {z-index: 1000; position: absolute; margin-top:0; top:9px; right:0; width: auto; }
#xhmenu .extrawrap {position: fixed; display: block; background: var(--mainbarva); font-weight: bold; top: 75px; left: 5vw; width: 90vw; max-height: 75vh; overflow-y: auto;}
#xhmenu .radic{ display: block; text-align: center; margin: 0; border-bottom: 1px solid #fff;}
#xhmenu .msp { padding:1em 0; height: auto; color: #fff;}
#xhmenu .radic.active > a > .msp{ text-decoration: underline; }
#xhmenu .overline { border-top: 1px solid #ddd; padding: .5em 0; }

/*========= vyhledávání ================================================================*/
#hledatObal {width: 135px; box-sizing: border-box; border: 1px solid #e5e5e5; position: relative; display: inline-block; vertical-align: middle; background: #fff; }
#hledatObal form {padding: .33em 2%; }
#hledatObal .q{ width: 76%; margin-right: 2%; padding: .25em 2%; border:0; background: #fff; color:#112253; font-size: 12px; }
#hledatObal .q::placeholder{ color:#6e6e6e; }
#hledatObal .tlacitko { width: 18%; margin:0; padding: .25em 0; background: url(/img/lupa.png) center center no-repeat #fff; color: transparent; overflow: hidden; }

/*========= prvky stránky ==============================================================*/
#stranka { padding: .5em 0 2em; margin:0;}

.uvodnik {position: relative;padding-top: 28.17%; overflow: hidden; }
.uvodnik span { display: block; position: absolute; left: 50%; top:50%; width: 100%; }
.uvodnik span img { transform: translateX(-50%) translateY(-50%);}
.uvodnik .prekryv { padding-top: 28.17%; width: 66.17%; background: url(/img/slide_kryti_opq.png) left center no-repeat; background-size: contain; position: absolute; top:0; left:0;}
.uvodnik .textplace {color:#fff; font-size: 20px; line-height: 1.7em; position: absolute; bottom: 110px; left:6%; max-width: 60%; }
.uvodnik .textplace.resp { display: none; }
.uvodnik .textplace ul {list-style-type: square; margin-left: 0; }
.uvodnik .textplace ul li {margin-top: 0; margin-bottom: 0; }
.uvodnik .textplace p {margin: 0; }
.uvodnik a {color:#fff; text-decoration: none; border:1px solid #fff; position: absolute; bottom:2.5em; left:6%; font-size: 17px; padding: .8em; line-height: 1em; }
.uvodnik .xtlacitko {background: none; text-transform: none; }

.rozcestnik {display: flex; justify-content: space-between; flex-wrap:wrap; }
.rozcestnik .polozka { margin-top:1em; display: block; }
.rozcestnik .polozka .pozicir {position: relative; height:143px; width: 100%; overflow: hidden; display: block; }
.rozcestnik .polozka .pozicir img {position: absolute; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.rozcestnik .polozka .link { color:var(--secbarva); text-decoration: none; display: block; font-size: 18px; line-height: 1.2em; margin-bottom: .75em; font-weight: bold; }
.rozcestnik .polozka:hover .pozicir:after { display:block; width: 100%; height: 100%; box-sizing: border-box; line-height:235px; background: left center no-repeat; background-size: contain; position: absolute; top:0; left:0; padding-left: 1em; color:#fff; font-size: 17px; content:'Více informací'; font-weight: 600; }
.rozcestnik .polozka:hover .link { color:var(--mainbarva); text-decoration: underline; }

.rozcestnik.r1 {margin-top:20px; }
.rozcestnik.r1 .polozka {width: 198px;text-decoration: none;}
.rozcestnik.r1 .polozka .link { min-height: 2.4em; }
.rozcestnik.r1 .polozka .textplace { color:#6e6e6e; margin-top: 1em;}
.rozcestnik.r1 .polozka .textplace .li {margin-left: 1em; list-style-type: square; display: list-item; }
.rozcestnik.r1 .polozka:hover .textplace { color:var(--mainbarva); }
.rozcestnik.r1 .polozka:hover .pozicir:after { background-image: url(/img/kryti_r1_opq.png)}

.rozcestnik.r2 {margin-top:20px; }
.rozcestnik.r2 .polozka {width: 198px;text-decoration: none;}
.rozcestnik.r2 .polozka .link { min-height: 2.4em; }
.rozcestnik.r2 .polozka .textplace { color:#6e6e6e; margin-top: 1em;}
.rozcestnik.r2 .polozka .textplace .li {margin-left: 1em; list-style-type: square; display: list-item; }
.rozcestnik.r2 .polozka .pozicir img {max-width: 200%; }
.rozcestnik.r2 .polozka:hover .textplace { color:var(--mainbarva); }
.rozcestnik.r2 .polozka:hover .pozicir:after { background-image: url(/img/kryti_r1_opq.png)}

.rozcestnik.r3 {display: block; }
.rozcestnik.r3 .polozka { margin:2em 0; text-decoration: none;}
.rozcestnik.r3 .polozka .pozicir { display: inline-block; width: 120px; height: 81px; vertical-align: bottom; }
.rozcestnik.r3 .polozka .link { margin-bottom: .25em; }
.rozcestnik.r3 .polozka .textplace { display: inline-block; vertical-align: bottom; margin-left: 24px; max-width: 200px; color:#6e6e6e;}
.rozcestnik.r3 .polozka:hover .textplace { color:var(--mainbarva);}
.rozcestnik.r3 .polozka:hover .pozicir:after { background-image: url(/img/kryti_r3_opq.png);line-height:normal; padding-top: 1.25em; padding-left:.5em; }

.roz1alt ul,.roz2alt ul {margin-top: .5em;}

.neuvodni .rozcestnik {justify-content: space-around; margin-bottom: 1.5em;}
.neuvodni .rozcestnik .polozka {margin:1em;}

/*========= obsah ======================================================================*/
#telo {padding: 0; margin:0 0 2em; }
#telo.uzsi { float: left; width:73%; box-sizing: border-box; border-right: 1px solid #ddd; margin-top: 30px; padding-right: 10%; }
#telo.uzsi h1 {margin-top: 0;}

.obsah { line-height: 1.4em; 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; }

.obsah .spectable {width: 100%; margin: 1em 0; border-spacing: 0;}
.obsah .spectable thead th { border: 0; background: var(--secbarva); color:#000; font-weight:600; padding: .33em 0; vertical-align: middle;text-align: center;}
.obsah .spectable td { border: 0; border-top: 1px solid #ddd;padding: .15em 0;vertical-align: middle; text-align: center;}
.obsah .spectable tr:first-of-type td {border-top: 0;}
.obsah .spectable tr:hover td {background: #f0f0f0;}

.obsah .spec_thlike {background: var(--secbarva); color:#000; font-weight:600;vertical-align: middle;text-align: center;}

.anotacka { font-size: 1.1em; }

.tablewrap {overflow: auto; max-width: 100%;}

.h_del_l{width: 65.7%;float:left;margin-top: 40px}
.h_del_r{width: 31.5%;float:right;margin-top: 40px}

.nnadpis {font-weight: bold; color:#000; font-size: 18px; margin-top: 1.5em }
.nzdrc {width: 82%;}

.pozice {margin: 2em 0;}
.pozice a {text-decoration: none }
.pozice a:hover { text-decoration: underline;}

.pozice h3,.nzdrc h3 {font-size: 18px; font-weight: bold; margin: 1em 0 0; }
.pozice p,.nzdrc p {margin-top: 0;}

/*========= drobečková =================================================================*/
.drobnav {line-height: 1.75em; font-size: 0.92857em; line-height:1.25em; background: #f7f7f7; font-weight: 600; color:var(--secbarva); padding-left: 1em; }
.drobnav a,.drobnav .a {display: block; padding: .75em; text-decoration: none;}
.drobnav a:hover { text-decoration: underline;}
.drobnav span { padding:0; margin:0; display: inline-block; vertical-align: middle;}
.drobnav span:last-of-type { display: inline-block; padding: .75em}
.drobnav span.odd {margin: 0 .75em;}

#upozorneni { font-weight: bold; color: var(--mainbarva); }

/*========= podstránky =================================================================*/
.podkat { margin: 2em 0; align-items: stretch; --sloupce:3; --rozestup:1em; }
.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; }

/*========= 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: .15em; text-align: center;  }

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

/*========= sloupce ====================================================================*/
.sloupec-pravy { width: 27%; float: right; border-left:1px solid #ddd; margin: 30px 1px 0 -1px; box-sizing: border-box;}
.sloupec-pravy .sl-box { margin-bottom: 2em; margin-left: 3.5em;}
.sloupec-pravy ul {list-style: none; margin: 0; padding: 0;}
.sloupec-pravy li { margin: 0; padding: 0;}
.sloupec-pravy ul a { display: block; font-size: 30px; font-weight: bold; line-height: 1.44444em;color: var(--mainbarva); padding-bottom: .2em; }
.sloupec-pravy ul ul a { color: var(--secbarva); font-weight: 600; padding: .33em 0; font-size: 1.2em; line-height: normal;border-bottom: 1px solid #e5e5e5;}
.sloupec-pravy ul ul ul a { color: #666; font-weight: normal; font-size: 1em; padding: .5em 0; padding-left: .625em; }
.sloupec-pravy ul a:hover,
.sloupec-pravy ul ul a:hover,
.sloupec-pravy ul ul ul a:hover {color:var(--mainbarva); }
.sloupec-pravy ul a.active {text-decoration: underline; font-weight: bold;}

/*========= š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; }
.kform h2 {color:#000; margin-bottom: 0;}
.kform form { padding: 1.5em 3% .5em; position: relative; }
.kform p {margin: 0 0 .75em; }
.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 0 .5em; }
.kform label.readerhelp {width: 0; height: 0; overflow: hidden; display: block; }
.kform .stretch {width: 100%; padding: .75em; border:1px solid #ddd; background: #fff; color:var(--mainbarva);}
.kform textarea.stretch { height: 4.25em;}
.kform .tlacitko {}
.kform ::placeholder { font-style: italic; color:#777; opacity: 1;}
.kform p.napravo {margin: -3.25em 0 2.25em;}
.kform .letaci {position: absolute; top:1.5em; right:3%;}
#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; }

/*========= mapa =======================================================================*/
.mapa {margin-right: 2%;}
.mapa-white{background: #fff; position: relative;}
.mapa-white > img {margin:38px 0; }
.mapa .r-top { margin: 0; padding: 0; width: 24%; position: absolute; top:30px; right:4%; text-align: right; color:#3787d2; box-sizing: border-box;}
.mapa .r-top p {margin:0;}
.mapa .r-top span {background: url(/img/mpin.jpg) left top no-repeat; display: inline-block; width: 20px; height: 14px;}
.mapa .r-bot { display: block; width: 24%; padding-left:4%; background: url(/img/icon_zarovka.png) left top no-repeat; background-size:8.33333% auto; position: absolute; bottom:15px; right: 2%; font-size: 11px }
.mapa .r-bot p {margin:0;}
.mapa .mapbublina {background: #fff; border: 1px solid #3787d2; display: none; padding: .6em 2%; position: absolute; width:96%; max-width: 380px; z-index: 1;}
.mapa .mapbublina .closer {position: absolute; display: block; right: 4px; top:4px; margin:0;}
.mapa .mapbublina h3 {margin: 1em 0;}
#bub1 {left:60px;top:42px;}
#bub2 {left:29px;top:91px;}
#bub3 {left:178px;top:85px;}
#bub4 {left:196px;top:40px;}
#bub5 {left:242px;top:186px;}
#bub6 {left:310px;top:94px;}
#bub7 {left:333px;top:178px;}
#bub8 {left:174px;top:119px;}
#bub9 {left:180px;top:20px;}
#bub10 {left:300px;top:160px;}

/*========= prvky patičky ==============================================================*/
#paticka {background: url(/img/bg_vzorek.png); color:#fff; padding: 50px 0 90px;}
#paticka a {color:#fff;}
#paticka a:hover {color:#fff;}
#paticka .linkz .sekce {float:left; width: 18%; margin-right: 2%; font-size:18px; font-weight: 600; line-height: 1.8em; }
#paticka .linkz .sekce a {margin-bottom: .5em; display: block;}
#paticka .linkz .sekce .respsekce {font-size: 13px; font-weight: normal; line-height: 1.8em;}
#paticka .linkz .sekce .respsekce a { margin: 0;}

#zakonceni { padding-top: 3em ;position: relative;font-size: 13px; clear: both; margin-right: 2%; text-align: right; }

/*========= 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(--secbarva); --cc-btn-secondary-hover-bg:#fff; }

.shyblock {background: #ffa; border:0;}

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

/* per-web header transformations */
@media (max-width:1110px) {
   .max-sirka {width: 90%; margin: auto 5%;}
   .uvodnik .textplace {font-size: 14px; bottom:80px; }
   .uvodnik a {bottom:1.5em; font-size: 15px;}
   .rozcestnik {justify-content: space-around; }
   .rozcestnik.r1 .polozka,.rozcestnik.r2 .polozka {margin-left: 2.5%; margin-right: 2.5%; }
   #telo,.uvodni #telo, #telo.uzsi,.sloupec-pravy{width: auto; margin: auto; float: none; border:0; padding-right: 0;}
   #telo.uzsi h1 {margin-top: revert;}
   .drobnav img {max-height: 35px; }
   .sloupec-pravy .sl-box {margin-left: 0;}
   .sloupec-pravy .sl-box > li:not(.shower) > a {display: none;}
   #paticka .linkz .sekce {display: block;width: 29%; margin: .25em 2%; line-height: 1.4em; }
   #paticka .linkz .sekce .respsekce {display: none;}
   #eu-cookies .listittlacitko { margin: 0 .5em; }
   .mapa .r-bot { width: auto; margin: -2.25em 4% 0; padding-bottom: 1em; position: static; background-size: auto; }
   .mapa .r-top { top:15px; }
   #htop {position: relative;}
   #hslogan {display: none;}
   #hslogan2 { margin-right: 13em; margin-top: .5em;}
   #hledatObal {position: absolute; top:5px; right: 50px; }
   #xhmenu .hider {display: none;}
   #xhmenu a {margin-right: 0;}
   #nhmenu {display: none;}
   #vlajky {display: none;}
   .sloupec-pravy .hider {display: none;}
}

@media (min-width: 1111px) {
   .drobnav .prvek:first-child a { padding-left: 2em; }
   .drobnav .prvek:last-of-type { padding-left: 1.2em;}
   #xhmenu {display:none;}
   .sloupec-pravy .shower {display: none;}
}

@media (max-width:999px) {
   .gallery { --sloupce:3; }
}

@media (max-width:849px) {
   .rozcestnik.r2 .polozka {margin: 1em 3% 0; width: 44%; max-width: 320px; }
   .rozcestnik.r2 .pozicir {height: 16vw;}
   .mapa-white > img {margin-right: 10%; max-width: 90%;}
}

@media (max-width:799px) {
   .uvodnik { padding: 0; text-align: center; }
   .uvodnik .prekryv { position: relative; top:0; left: 0; z-index: 101; background: rgba(18,33,83,.9); width: 100%; padding: 1px 0; }
   .uvodnik .textplace { display: none; }
   .uvodnik .textplace.resp { display: block; position: static; width: auto; max-width: none; padding: 1em 5% 1.5em; font-size: 18px; }
   .uvodnik a {position: static; display: inline-block; margin-bottom: 1.5em; }
   .rozcestnik.r1 {margin-top: 5px;}
   .podkat { --sloupce:2; }
   .gallery { --sloupce:2; }
   .mapa .mapbublina {width:96%; max-width: 280px; z-index: 1;}
   #bub1 {left:0;top:91px;}
   #bub2 {left:0;top:91px;}
   #bub3 {left:0;top:91px;}
   #bub4 {left:0;top:91px;}
   #bub5 {left:0;top:91px;}
   #bub6 {left:0;top:91px;}
   #bub7 {left:0;top:91px;}
   #bub8 {left:0;top:91px;}
   #bub9 {left:0;top:91px;}
   #bub10 {left:0;top:91px;}
}
@media (max-width:749px) {
   #hslogan2 { display: none; }
}

@media (min-width:600px) and (max-width:1110px) {
   .rozcestnik.r3 .polozka .pozicir {display: block; }
   .rozcestnik.r3 .polozka .textplace {margin-left: 0em; margin-top: .5em; }
}

@media (max-width:599px) {
   .h_del_l,.h_del_r{width: auto;float:none; margin-top: 15px;}
   .rozcestnik.r3 .polozka .textplace { margin-left: 12px; font-size: 14px;}
   .nzdrc {width: auto;}
}

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

@media (max-width:499px) {
   #hledatObal {min-width: 0; width: 40px;}
   #hledatObal .q {display: none;}
   #hledatObal:not(.xsshow) .tlacitko {width: 100%;}
   #hledatObal.xsshow { width: 180px;}
   #hledatObal.xsshow .q {display: inline-block;}
   .uvodni .rozcestnik.r1,.uvodni .rozcestnik.r2 {display: none;}
   #paticka .zakonceni { margin-right: 0; }
}

@media (min-width:500px) {
   .roz1alt,.roz2alt {display: none;}
}

@media (max-width:469px) {
   .podkat { --sloupce:1; }
   .kform p.napravo {margin: 0 0 1em;}
   .objednavka .radioobj label .tab1 { width: 60%; }
   .objednavka .radioobj label .tab2 { display: none; }
   .objednavka .radioobj label .tab3 { width: auto; flex-grow: 1; flex-shrink: 1; text-align: right; }
}

@media (max-width:399px) {
   #hlavicka {position: fixed; top:0; left:0; width: 94%; margin: 0 3%; z-index: 1933; background: #fff; border-bottom: 1px solid #f7f7f7; z-index: 1000; }
   #hlavicka > div {margin:0 5%;}
   #stranka {margin-top:75px;}
   h1,#telo.uzsi h1 {margin-top: .75em;}
   .uvodni h2 {margin-bottom: -5px;}
   .pozice:first-of-type,.nnadpis {margin-top: 1em;}
   .rozcestnik.r2 img {max-width: none; }
   .rozcestnik.r2 .polozka:hover .pozicir:after { background-position: right top; background-size: auto;}
   .drobnav a,.drobnav .a,
   .drobnav .prvek:last-of-type {padding-top:.75em; padding-bottom: .75em;}
   .drobnav img {height:38px}
   .kform .sloup {width: 100%;padding:0; }
   .mapa {position: relative; margin-top: 1.5em;}
   .mapa .r-top { width: auto; position: absolute; top:0px; right:auto; left: 0; text-align: left; }
}

@media (min-width: 400px) {
   .h400show {display: none!important;}
}

@media (max-width:349px) {
   .rozcestnik.r3 .polozka .pozicir {display: block; }
   .rozcestnik.r3 .polozka .textplace {margin-left: 0em; margin-top: .5em; }
   #paticka .linkz .sekce {display: block;width: 46%; margin: 0 2%;}
   .kform form {padding-top:3em;}
}

/* special block rules */
@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: 899px) {
   .column4 > div {width: 50%; }
}
@media (max-width:599px) {
   .column3 > div {width: 50%; }
   .column5 > div {width: 50%; }
}
@media (max-width:499px) {
   .column2 > div {width: 100%; }
}