/*========= obecně písma a prvotní vzhled ==============================================*/
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/img/dmsans/ilext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/img/dmsans/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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/img/dmsans/nlext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/img/dmsans/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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/archivo/ilext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/archivo/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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/archivo/nlext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/img/archivo/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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html {font-size: 18px; line-height: 1.75; background: #3a3a3a; }
body {font-family: 'DM Sans','Arial', sans-serif; color:#fff; }
input,select,textarea,button {font-family: 'DM Sans','Arial',sans-serif;font-size: 1rem;box-sizing:border-box;}
input,select,textarea {background: #4a4a4a; color:#fff;border:0; }
textarea { resize: none; }

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

h1 {font-family: 'Archivo',Arial,sans-serif; font-size:40px; font-weight: 900; line-height: 1.4;}
.uvodni h1 {display: none;}
h2 { margin-bottom: .6em; font-size: 30px; font-family: 'Archivo',Arial,sans-serif;line-height: 1.4;}
h2.nomarginb {margin-bottom: 0;}
h3 {font-family: 'Archivo',Arial,sans-serif;}
h2 a { text-decoration: none; }
h3 a { text-decoration: none; }
h4 a { text-decoration: none; }

ul{ padding: 0 0 0 1.25em; overflow: hidden; list-style-type: square; }
ul li{ padding:0; margin-bottom: .1em; }
ul li::marker { color: var(--mainbarva); }
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;  }

summary { cursor: pointer; }

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

.notice {border-left:3px solid; padding: 1em; border-radius: 5px; background: #444; margin: .5em 0; font-size: unset; }
.notice-mild {border-left-color: #2aa638; color: #2aa638; }
.notice-important {border-left-color: #f9cf07; color:#f9cf07; }
.notice-critical {border-left-color: #f61c0b; color:#f61c0b; }

.w2ui-reset {font-family: inherit;}
.w2ui-tabs {background: none;}
.w2ui-tabs .w2ui-tabs-line {background: none;}
.w2ui-tabs .w2ui-scroll-wrapper .w2ui-tab {color:inherit; padding: .5em .8em; font-size: 1.1rem; height: 1em; box-sizing: content-box; line-height: 1em; cursor: pointer; }
.w2ui-tabs .w2ui-scroll-wrapper .w2ui-tab.active {color:var(--mainbarva); border-bottom-color: var(--mainbarva); font-weight: bold;}
.w2ui-scroll-left, .w2ui-scroll-right {width: 30px;}

.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 label::after { color:var(--mainbarva); content:' *'; }
form .dstar { color:var(--mainbarva); ; }
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: 1400px; 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 {}

:root {--wastemenu-color: #777; --wastemenu-xcolor: #777; --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:#2aa638; }
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,h3 { color:var(--mainbarva) }
#naseptavac .naseppolozka:focus { background: var(--mainbarva);}
.gbg {background: #222;}
.mainbg {background: var(--mainbarva); color:#fff;}
.mainbg a {color:#fff;}

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

/*========= prvky hlavičky =============================================================*/
#hlavickabg {background: #3a3a3a; padding: .5em 0 1em; position: relative; }
#hlavicka {display: grid; row-gap: 1.5em; column-gap: 5%; align-items: center; grid-template: auto auto / 310px 1fr 300px auto auto; grid-template-areas: 
              'logo . hledej login vlajky'
              'logo menu menu menu menu';
}
.uvodni #hlavicka {padding-bottom: 300px;}
#hlogo { display: block; grid-area: logo; }
#hlogo img { vertical-align: middle; }
#login,
#xlogin { grid-area: login; }
#vlajky { grid-area: vlajky; }
#hledatObal { grid-area: hledej; }
#nhmenu { grid-area: menu; justify-self: end; }
#xhmenu { grid-area: menu; }

#bgillusion { background: linear-gradient(to right,#3b3b3b 50%,#2e2e2e 100%); width:100%; height:60px; position: absolute; left:0; top:0; }

/*========= přihlašování ===============================================================*/
#login {position: relative; line-height: 1.25em; white-space: nowrap;}
#login.logout {}
#login > a:not(:hover) { text-decoration: none; }
#login .uzivatel { color: #fff; display: inline-block; padding-left: 25px; background: url(/img/ic_panak.svg) left center no-repeat; margin-right: 30px; }
#login .uzivatel2 { color: #fff; display: inline-block; padding-left: 25px; background: url(/img/ic_zamek.svg) left center no-repeat; }
#login form { position: absolute; top: 100%; right: 0; width: 400px; max-width: 90vw; padding: 1em;text-align: left; border:1px solid #eee; background: #2e2e2e; z-index: 750}
#login form .pwrap { width: 60%; float:left; }
#login form p { margin: .25em 0; }
#login form input { width: 100%; display: inline-block; vertical-align: middle; }
#login form input::placeholder { opacity: 1; color:#fff; font-style: italic; }
#login form button { width: 35%; float:right; margin: .75em 0 0; display: block; }
#login form > p { margin-bottom: 0; }
#login form > p label{ width: 24%; }

#xlogin {text-align: center;}
#xlogin a img {width: 30px; vertical-align: middle;}

.uVIP {display: inline-block; vertical-align: middle; font-size: .7em; padding: 0 .5em; border-radius: 5px; background: var(--mainbarva); color:#fff; margin-left: .5em; }
#login .uVIP { }
#xlogin .uVIP { display: block; margin-bottom: -1em; }

/*========= menu =======================================================================*/
.hmenu {font-size: 20px;}
.hmenu a {text-decoration: none; display: table; width: 100%; color:#fff; }
.hmenu .radic { display: inline-block; vertical-align: middle; position: relative; }
.hmenu .msp { display: table-cell; vertical-align: middle; padding: 0 1em; line-height: 1.25em; height: 2.5em; border-bottom: 2px solid transparent; }
.hmenu .radic:hover .msp,
.hmenu .active .msp{ border-bottom-color: var(--mainbarva); }
.hmenu .active .msp{ background: #2e3a2f; }
.hmenu .oddelovac {width: 1px;}

.hmenu .podmenu {position: absolute; top:100%; right:0; display: none; background: #333; border:1px solid #444; white-space: nowrap; width: auto; min-width: 100%;z-index: 100; font-size: .85em;}
.hmenu .radic:hover .podmenu, .hmenu .radic .podmenu.shown { display: block; }
.hmenu .podmenu .radic { display: block; }
.hmenu .podmenu .msp.l2  { border: 0; background: none; display: block; height: auto; padding: .5em 1em; border-left: 2px solid transparent; }
.hmenu .podmenu .radic:hover .msp.l2,
.hmenu .podmenu .active .msp.l2 { border-left-color: var(--mainbarva); }
.hmenu .podmenu .active .msp.l2 { background: #2e3a2f; }

#xhmenu {z-index: 1000; padding: 10px; }
#xhmenu.blacken{ background: #272727; }
#xhmenu .extrawrap {display: block; background: #333; position: fixed; top:60px; left:0; width: 100vw; height: calc(100vh - 60px); overflow: auto; z-index: 999; box-sizing: border-box;}
#xhmenu .radic{ display: block; text-align: left; z-index: 1000; }
#xhmenu .extrawrap .radic{ border-bottom: 2px solid #303030; background: #272727; }
#xhmenu .msp { padding:.75em 5%; height: auto;}
#xhmenu .overline { }

#xhmenu .podmenu {display: block; position: static; }
#xhmenu .podmenu .msp.l2 { padding: .75em 5% .75em 10% }

/*========= jazyky =====================================================================*/
#vlajky { position: relative; }
#vlajky a { text-transform: uppercase; margin: 1em 0;}
#vlajky > a { padding-right: 25px; background: transparent url(/img/ic_langzob.svg) right center no-repeat; }
#vlajky a img { vertical-align: middle;}
#vlajky_inside {position: absolute; top:100%; z-index: 5000; width: 100%; background: #303030; padding: 0 10px 1em; left: -10px; }
#vlajky:hover #vlajky_inside.hid {display: block!important; }
#vlajky_inside a { display: block}

#xvlajky { display: block; margin: 1.5em 0 1em;text-align: center; text-transform: uppercase; }
#xvlajky a {display: inline-block; width: auto; margin: 0 .66em; }

/*========= vyhledávání ================================================================*/
#hledatObal {min-width: 200px; position: relative; background: #4a4a4a; }
#hledatObal form { border-radius: 5px;height: 40px; }
#hledatObal .q{ width: calc( 100% - 50px ); box-sizing: border-box; padding: 10px 3% 10px 3%; border:0; line-height: 20px; background: transparent; vertical-align: middle; }
#hledatObal .q::placeholder { font-style: italic; color:#fff; opacity: 1; }
#hledatObal .tlacitko { width: 50px; padding: 0; height: 40px; color:transparent; font-size: 0; background: transparent url(/img/ic_lupa.svg) center center no-repeat;vertical-align: middle; }

#naseptavac {width: 100%; border: 1px solid #f3f3f3; background: #fff; height: 16.5em; z-index: 700; position: absolute; left: 0; top: 100%; }
#naseptavac .naseppolozka { display: block; background: #fff; }
#naseptavac .naseppolozka span { overflow: hidden; display: block; padding: 0 4%; height: 1.5em; line-height: 1.5em; }
#naseptavac .naseppolozka:focus { color:#fff; }
#nasepfoto {position: absolute; right: 100%; top:-1px; background: #fff; border: 1px solid #f3f3f3; width: 220px; height: 16.5em; text-align: center; }
#nasepfoto a {display: block; padding: .5em 5%; height: 100%;}
#nasepfoto .nadpis {display: block; line-height: 1.4em; height: 2.8em; overflow: hidden; }
#nasepfoto .fotoInside {display: block; height: 12.7em; line-height: 12.7em; white-space: nowrap; }
#nasepfoto .fotoInside img{vertical-align: middle; max-height: 100%; }

/*========= prvky stránky ==============================================================*/
#strankabg {background: #2e2e2e; padding: 1em 0 2em; }
.uvodni #strankabg {background: #2e2e2e url(/img/bg_uvod.png) center bottom no-repeat; background-size: 100% auto; padding: 1em 0 2em; }
#stranka { }
#stranka.shoppage { display: grid; grid-template: auto / 1fr 75%; column-gap: 5%; 
                    grid-template-areas: 'kategorie telo';  
}
#kat { grid-area: kategorie; }
#telo {grid-area: telo;}

.uvodni #stranka .vedlefoto {display: grid; align-items: center; margin-top: 3em; }
.uvodni #stranka .vedlefoto .pix { grid-area: pix; overflow: hidden; border-radius: 10px; }
.uvodni #stranka .vedlefoto .pix img { box-shadow: 0 2px 2px 0 rgba(0,0,0,.5); }
.uvodni #stranka .vedlefoto .txt { grid-area: text; padding: 0 15%; }
.uvodni #stranka .vedlefoto .txt ul { list-style-image: url(/img/ic_check.svg); }
.uvodni #stranka .vedlefoto h2 {font-weight: 900; position: relative; font-size: 40px; margin-bottom: 1.5em; margin-top: 0; }
.uvodni #stranka .vedlefoto h2::after {position: absolute; bottom:-.5em; left:0; width: 100px; height: 5px; border-radius: 2px; background: var(--mainbarva); content: ' '; display: block; }
.uvodni #stranka .vedlefoto .tlacitko {border:1px solid var(--mainbarva); background: transparent; color:var(--mainbarva); }
.uvodni #stranka .vedlefoto.l {grid-template: auto / 49% 1fr; grid-template-areas: 'pix text'; }
.uvodni #stranka .vedlefoto.r {grid-template: auto / 1fr 49%; grid-template-areas: 'text pix'; }

#cislabg { background: var(--mainbarva); padding: 2em 0 6em; }
#cisla {}
#cisla h2 {color:#fff; font-size: 50px; text-align: center; margin-bottom: 2em; }
#cislacontainer {display: flex; column-gap: 5%; row-gap: 1em; }
#cisla .cbox {flex-basis: 30%; display: grid; grid-template: minmax(150px,auto) / 150px 1fr; column-gap: 20px; align-items: center; }
#cisla .circ {width:150px; height: 150px; border-radius: 75px; box-shadow: 0 5px 0 0 rgba(0,0,0,.25); text-align: center; font-weight: bold; font-size: 20px; }
#cisla .circ span { line-height: 1; }
#cisla .circ .num { display: inline-block; vertical-align: bottom; font-size: 50px; margin-top: 35px; }
#cisla .circ .unit {display: inline-block; vertical-align: bottom; margin-bottom: 5px; }
#cisla .circ .extra { display: block;  }
#cisla .cbox.t1004 .circ .unit { text-transform: uppercase; }
#cisla .desc p { margin: 0; }

#skolenibg { background: url(/img/bg_skol.png) center center no-repeat; background-size: cover; padding: 2em 0 4em;}
#skoleni {}
#skoleni h2 {color:#fff; font-size: 50px; text-align: center; }
#skolenicontainer { display: flex; column-gap: 6%; row-gap: 1.5em; flex-wrap: wrap; align-items: stretch; margin: 3em 0; }
#skolenicontainer .termbox { flex: 0 0 47%; border-radius: 10px; border-left: 5px solid var(--mainbarva); box-sizing: border-box; padding: 1.5em; background: #3f3f3f; }
#skolenicontainer .termbox span { display: block; color: #999; font-size: .95em; }
#skolenicontainer .termbox span.highlight { color: #fff; font-size: 1em; font-weight: bold; margin: .75em 0; }
#skolenicontainer .termbox a { font-weight: bold; font-size: 1.05em; }
#skolenicontainer .termbox a:not(:hover) { text-decoration: none; }

#certbg { padding: 2em 0 4em;}
#cert {}
#cert h2 { color:#fff; font-size: 50px; text-align: center; }

:root { --dist_sloupce:3; --dist_mezery:calc( var(--dist_sloupce) - 1 ); --dist_sloupce_mezera:3%;}
#distflex {width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; column-gap: var(--dist_sloupce_mezera); row-gap: 2em; margin: 1em 0; }
#distflex .dist { align-items: stretch; background: #222; padding: 1em; box-sizing: border-box;
   flex: 0 0 calc( calc( 100% - calc( var(--dist_mezery) * var(--dist_sloupce_mezera) ) ) / var(--dist_sloupce) );}
#distflex .dist h3 {margin-top: 0; margin-bottom: .25em;}
#distflex .dist p:last-of-type {margin-bottom: 0;}
#distflex .dist p.img {text-align: center; }
#distflex .dist p.img img {max-height: 150px;}

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

.zakobsah {display: grid; grid-template: auto / 20% 1fr; column-gap: 3%; }
.zaknav { background: #1f1f1f; padding: .5em; border-radius: 10px; }
.zaknav:empty {background: transparent; padding: 0; }
.zaknav a { background: #333; display: block; color:#fff; border-radius: 10px; padding: .25em .5em; text-decoration: none; margin-bottom: .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: .33em 1%; display: inline-block; vertical-align: top; border: 1px solid #3a3a3a; padding: .33em 1%; position: relative; box-sizing: border-box; }
.podkat a:hover {border: 1px solid #555; }
.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%; box-sizing: border-box; }
.gallery .text { display: block; padding: 0 2%; margin-top: .1em; }

/*========= soubory ====================================================================*/
.files {margin-top: 1em;}
.files .qbox {padding: 0 .5em;}
.files h3 { display: inline-block; margin: 0; color:#fff; font-size: 1em;}
.files a { color:#fff; display: grid; grid-template: auto / 1fr auto; align-items: center; padding: .25em 0 .5em; margin: .5em 0; text-decoration: none; }
.files a:not(:last-child) { border-bottom: 1px solid #555; }
.files span {display: block; }
.files a:hover .filename { text-decoration: underline; }
.files img { margin: 0 .5em; vertical-align: middle;}
.files details[open] summary { margin-bottom: .5em;}

/*========= č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-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:#222;}
.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: 500px; }

.slider1 { position: relative; margin-top:-300px; margin-bottom: 2em; border-radius: 10px; overflow: hidden; }
#slider1 { overflow: hidden; }

.slider1 .bx-pager {position: absolute; bottom: 30px; left: 6%;}
.slider1 .bx-pager-item { margin-right: 10px; display: inline-block }
.slider1 .bx-pager-link { background: #777; width: 12px; height: 12px; font-size: 0; display: block; border-radius: 6px; }
.slider1 .bx-pager-link.active {background: var(--mainbarva); }

.slider1 .vnitrek {position: relative;overflow: hidden}
.slider1 .vnitrek .content {display: block; }
.slider1 .vnitrek img {width: 100%; height: 500px; object-fit: cover;}
.slider1 .bcover {position: absolute; left:0; top:0; right:0; bottom:0; background: linear-gradient(to right,rgba(0,0,0,.9),transparent); }
.slider1 .text {position: absolute; display: block; bottom:120px; left: 6%; max-width: 650px; }
.slider1 .textbig {display: block; font-size:50px; font-weight: 900; line-height: 1.1; margin-bottom: .5em; }
.slider1 .textsmol {display: block; font-size:22px; font-weight: bold; margin-bottom: 1em; }
.slider1 .tlacitko { }

/*========= kontaktní formulář =========================================================*/
.kform { text-align: left; }
.kform form { background: #222; padding: 1em; max-width: 600px;  }
.kform fieldset { background: #2e2e2e; }
.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;}
.kform textarea.stretch { height: 4.25em;}
.kform .tlacitko {}
.kform ::placeholder { font-style: italic; color:#fff; opacity: 1;}
#telo .kform {padding-top: .5em;}

/*========= k přihláškám školení =======================================================*/
.prskform { width: 100%; max-width: none; }
.prskform form { max-width: none; }
.prskform fieldset { box-sizing: border-box; border: 1px solid #4a4a4a; width: 33%; display: inline-block; margin: 0;  }
.prskform fieldset:first-of-type { width:50%; min-width: 280px; display: block; margin-bottom: .5em; }
.prskform .fieldmark {margin-top: 1em;}

/*========= 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:#fff; opacity: 1;}

/*========= normální formuláře =========================================================*/
.simpleform { padding: 1em 0; }
.simpleform fieldset {background: #2e2e2e; }
.simpleform p {margin: 1em 0;}
.simpleform p.polovy {margin: 1px 0; box-shadow: 0 0 7px #111; background: #333; border-radius: 5px; overflow: hidden; display: grid; grid-template: auto / 35% 1fr; align-items: baseline; }
.simpleform label {display: inline-block; vertical-align: middle; width: 22%; }
.simpleform p.polovy label {display: block; width: auto; padding: .5em 1em; }
.simpleform input,.simpleform select,.simpleform textarea {display: inline-block; vertical-align: middle; width: 45%; margin:0; padding: .5em; background: #444; }
.simpleform p.polovy input,.simpleform select,.simpleform textarea {display: block; width: auto; border-left: 1px solid var(--mainbarva); background: #444; }
.simpleform input[type=checkbox],.simpleform input[type=radio] {width: auto; margin: initial; border-left: initial; justify-self: left; }
.simpleform textarea {resize: vertical; }
.simpleform .tlacitko {vertical-align: middle; }

/*========= test formuláře =============================================================*/
.wtestform {width: 100%;}
.wtestform fieldset {border:0; margin:0 0 1.5em;}
.wtestform label {display: block; }
.wtestform label:first-of-type {font-weight: bold;}

#wtesttimer {height:10px; background: var(--mainbarva); position: relative; margin-bottom: 1em;}
#wtesttimer div {height:10px; background: grey; position: absolute; right:0; top:0;}

/*========= projektový formulář ========================================================*/
#telo .projektform { max-width: none;}
.projektform fieldset {border:0; margin:0 0 .5em; padding: 0;}
.projektform .piece {display: grid; grid-template: auto / 1fr 5em auto auto; row-gap: 1em; column-gap: 1em; align-items:center;margin: 1px 0; box-shadow: 0 0 7px #111; background: #333; }
.projektform .piece input {width:100%;}
.projektform .piece select {width: auto; }
.projektform .piece .w2ui-input {color:#fff!important; background-color:#4a4a4a!important; border:none!important; }
.projektform .piece .w2ui-select { background-image: url(/img/ic_lupa.svg); background-size: auto 60%; background-position: calc( 100% - 1em ) center; background-repeat: no-repeat; }

#projectformpart {font-weight: bold; font-size: 1.75em; color:var(--mainbarva);}

.projekt {border-radius: 5px; padding: 1.5em; margin-top: 1em; background: #222; position: relative;}
.projekt h3 {margin: 0 0 1em; font-size: 1.45em;}
.projekt h3::before {content:' '; display: inline-block; float:right; width: 255px; height: 2em; }
.projekt .status {position: absolute; right:1.5em; top:1.5em; border: 1px solid; border-radius: 3px; font-weight: bold; font-size: .8em; letter-spacing: 0.05em; text-transform: uppercase; display: inline-block; padding: .35em .85em;}
.projekt .status.s0 {border-color: #aa2;color:#aa2;background: rgba(170, 170, 34, 0.1);}
.projekt .status.s1 {border-color: var(--mainbarva);color: var(--mainbarva);background: rgba(var(--mainbarva-rgb, 100, 100, 100), 0.1);}
.projekt .status.s2 {border-color: #a22;color:#a22;background: rgba(170, 34, 34, 0.1);}
.projekt .status.s3 {border-color: #777;color:#777;background: rgba(119, 119, 119, 0.1);}
.projekt p {margin: 0.4em 0; font-size: 0.9em;}
.projekt table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin-top: 1.25em; }
.projekt th { padding: 0.6em 0.75em; border-bottom: 1px solid #444; }
.projekt tr:hover { background-color: rgba(255, 255, 255, 0.05); }
.projekt td { padding: 0.6em 0.75em; border-bottom: 1px solid #333; }
.projekt tr:last-child td { border-bottom: 2px solid #555; }
.projekt tfoot td { padding: 0.75em 0.75em; font-weight: bold; }
.projekt td,.projekt th { text-align: center; }
.projekt td:first-child,.projekt th:last-child { text-align: left; }
.projekt td:last-child,.projekt th:last-child { text-align: right; }

/*========= reklamační formulář ========================================================*/
.reklamform { width: 100%; max-width: none; }
.reklamform form { max-width: none; }
.reklamform fieldset { margin-bottom: 1em; border:0; }
.reklamform .pieces {display: flex; flex-wrap: wrap; column-gap: 1%; row-gap: .5em }
.reklamform .piece { flex: 0 0 49%; border: 1px solid #555; box-sizing: border-box; }

/*========= školení ====================================================================*/
.termline { border-radius: 5px; padding: 1.5em; margin-top: 1em; background: #222; }
.termline h2 {margin-top: 0; font-weight: normal; font-size: 1.4em;}
.termline .trig {display: grid; row-gap: .5em; column-gap: 2.5em; grid-template: auto 1fr / auto auto auto auto 1fr auto auto;
   grid-template-areas: 'cas trvani jazyk volno . o p' 
                        'misto misto misto misto misto o p'; 
}
.termline .iconed::before { display: inline-block; vertical-align: middle; width: 16px; height: 1.5em; content: ' '; background: left center no-repeat; margin-right: .5em; }
.termline .tempor {grid-area: cas; }
.termline .tempor:before { background-image: url(/img/ic_cal.svg) }
.termline .templn {grid-area: trvani; }
.termline .templn:before { background-image: url(/img/ic_clk.svg) }
.termline .geogrp {grid-area: misto;}
.termline .geogrp:before { background-image: url(/img/ic_loc.svg) }
.termline .compre {grid-area: jazyk; }
.termline .compre:before { background-image: url(/img/ic_spk.svg) }
.termline .dimens {grid-area: volno; }
.termline .dimens:before { background-image: url(/img/ic_ppl.svg) }
.termline .broll span {display: inline-block }
.termline .broll.about {grid-area: o; align-self: center; }
.termline .broll.about span {border: 1px solid #fff; padding: .5em 1em .5em 1em; border-radius: 5px; white-space: nowrap;}
.termline .broll.about span::after { width: 16px; height:16px; content: ' '; background: url(/img/ic_about.svg) center center no-repeat; display: inline-block; vertical-align: middle; margin-left: .75em; }
.termline.about .broll.about span::after { transform: scale(1,-1); }
.termline .broll.form {grid-area: p; align-self: center;}
.termline > .form {margin-top: 1em;}
.termline > .about {margin-top: 1em;}
.termline .broll {cursor: pointer;}
.termline:not(.form) > .form {display: none;}
.termline:not(.about) > .about {display: none;}

.termline .simpleform {margin-top: 0;}
.termline h3 {margin-top: 0;}

/*========= eshop - postranní kategorie ================================================*/
#kat { background:#3a3a3a; padding: 15px 20px; }
#xkat {padding: 0 5%; background: #272727; border-bottom: 1px solid #303030; }
.katmenu { list-style-type: none; padding:0; margin: 0; }
/* 1. úroveň */
.katmenu li { margin:0; font-weight: bold; }
.katmenu li>span:hover
.katmenu li.active {}
.katmenu li .rozklik {display: inline-block; vertical-align: middle; padding:.5em 0; width: 20px; margin-right: 10px; background: center center no-repeat; cursor: pointer; text-align: center; color:transparent;}
.katmenu li .rozklik.plus {background-image: url(/img/plus.svg);}
.katmenu li .rozklik.minus {background-image: url(/img/minus.svg);}
.katmenu li>span:hover .rozklik.plus,
.katmenu li.active .rozklik.plus {}
.katmenu li>span:hover .rozklik.minus,
.katmenu li.active .rozklik.minus {}
.katmenu li .katlink {display: inline-block; vertical-align: middle; padding: .5em 0; width: calc( 100% - 30px ); text-decoration: none; color:#fff; }
.katmenu li>span:hover .katlink,
.katmenu li.active .katlink {  }
/*2. úroveň - rozdíly prvků od 1. úrovně */
.katmenu li ul {display: none;list-style-type: none; padding:0; margin: 0 0 .5em;}
.katmenu li.active ul {display: block;}
.katmenu li ul li {font-weight: normal; }
.katmenu li ul li.active,
.katmenu li.active ul li.active {}
.katmenu li ul li .rozklik { padding: .25em 0; width: 30px; margin-right: 0; }
.katmenu li ul li .rozklik.plus {background-image: url(/img/plus2.png);}
.katmenu li ul li .rozklik.minus {background-image: url(/img/minus2.png);}
.katmenu li ul li>span:hover .rozklik.plus,
.katmenu li ul li.active .rozklik.plus {}
.katmenu li ul li>span:hover .rozklik.minus,
.katmenu li ul li.active .rozklik.minus {}
.katmenu li ul li .katlink,
.katmenu li.active ul li .katlink {padding: .25em 0; text-decoration: none; color:#bbb; }
.katmenu li ul li>span:hover .katlink,
.katmenu li ul li.active .katlink,
.katmenu li.active ul li>span:hover .katlink,
.katmenu li.active ul li.active .katlink { text-decoration: none; color:var(--mainbarva); font-weight: bold; }
/*3. úroveň - rozdíly prvků od 2. (a 1.) úrovně */
.katmenu li.active ul li ul {display: none;}
.katmenu li.active ul li.active ul {display: block;}
.katmenu li ul li ul li {}
.katmenu li ul li ul li.active,
.katmenu li.active ul li.active ul li.active {}
.katmenu li ul li ul li .rozklik { width: 20%; }
.katmenu li ul li ul li .katlink,
.katmenu li.active ul li.active ul li .katlink { width: 80%; text-decoration: none;}
.katmenu li ul li ul li>span:hover .katlink,
.katmenu li ul li ul li.active .katlink,
.katmenu li.active ul li.active ul li>span:hover .katlink,
.katmenu li.active ul li.active ul li.active .katlink { text-decoration: underline;}

.katmenu .empty {visibility: hidden;cursor: auto;}

/*========= eshop - spolecne ===========================================================*/
/* Globální, konkrétními identifikátory podstránek doplněny */
.stitky { position: absolute; left: 0; top: 0; text-decoration: none; color: #000; }
.stitky span{ margin:.5em 0; display: block;}
.stitky span.akce{ }
.stitky span.novinka{ }
.stitky span.darek{ }
.stitky span.procenta{ }

/*========= eshop - výpis produktů =====================================================*/
.produkty {clear:both; margin-top: 1.5em; display: flex; flex-wrap: wrap; column-gap: 3%; row-gap: 1em; }
.produkt {flex-basis: 31%; padding: 1em; position: relative; box-sizing: border-box; background:#3a3a3a; border-radius: 5px; box-shadow: 0 0 9px -3px #000; display: grid;
   grid-template: 220px auto minmax(2.2em,1fr) / 100%; row-gap: .5em;          
   grid-template-areas: 'foto' 'nadpis' 'popis'; }
.produkt .nazev { line-height: 1.1em; font-size: 1.25em; margin: 0; padding: .25em 0; font-weight: bold; display: block; grid-area: nadpis;}
.produkt .foto { white-space: nowrap; text-align: center; grid-area: foto; align-self: center; }
.produkt .foto img { vertical-align: middle; }
.produkt .popis {line-height: 1.1em; min-height: 2.2em; margin: 0; padding: .75em 0; grid-area: popis; align-self: start; font-size: .85em; border-top: 1px solid #555; }
.produkt .stitky { top: 10px;}

.more.tlacitko {margin: .5em 0;}
.more.tlacitko img {vertical-align: bottom; }

/*========= eshop - detail produktu ====================================================*/
.produkt-det {}
.produkt-det .odsad20 {margin-top: 1em; }
.produkt-det .fotosloupec {width: 41%; margin-right: 4%; display: inline-block; vertical-align: top; position: relative; margin-bottom: 1em;}
.produkt-det .fotosloupec img { vertical-align: middle;}
.produkt-det .fotka-hlavni { text-align: center; white-space: nowrap; line-height: 350px; height: 350px; }
.produkt-det .fotocontainer { position: relative; padding: 2px 5%; }
.produkt-det .fotocontainer a { width: 23%; margin:0 1%; white-space: nowrap; display: inline-block; text-align: center; }
.produkt-det .fotocontainer .borderer { height: 75px; display: block; line-height: 75px;}
.produkt-det .fragment { text-align: center; }
.produkt-det .vpravo { display: inline-block; width:55%; }
.produkt-det .infotab { margin-top: 1em; }
.produkt-det .infotab .tabswitch { padding-top: .5em; border-bottom: 1px solid #555; }
.produkt-det .infotab .tab { margin-top: 1em;}

.produkt-det .model { padding: .25em 1em .5em; border-radius: 10px; margin: 1em 0; background: #3a3a3a; box-shadow: 0 0 9px -3px #000; }
.produkt-det .lesspspace { margin-bottom: .75em; }
.produkt-det .lesspspace p { margin: 0 0 .25em; }

.produkt-det .fotocontainer .bx-prev,.produkt-det .fotocontainer .bx-next{ text-decoration: none; position: absolute; top:0; display: block; text-align: center; line-height: 79px; height: 79px; width: 5%; white-space: nowrap; margin:0; color:#fff; }
.produkt-det .fotocontainer .bx-prev{ left:0; }
.produkt-det .fotocontainer .bx-next{ right:0; }

.produkt-det .paramtab {margin-bottom: 1em; width: 100%; background: #353535; border-radius: 6px; overflow: hidden;}
.produkt-det .paramtab th,.produkt-det .paramtab td { padding: .33em .75em; }
.produkt-det .paramtab th { text-align: left; border:0; color:var(--mainbarva); background:#344135; }
.produkt-det .paramtab tr:not(:last-child) td { border-color: #444; border: solid #444; border-width: 0 0 1px; }
.produkt-det .paramtab td:first-child { width: 35%; }
.produkt-det .paramtab.na3 td:first-child { width: 25%; }
.produkt-det .paramtab.na3 td:last-child { width: 60%; }
.produkt-det .produkt-popis-pismo > *:not(.notice) { font-size: .9em }

.scsgrid .scshead {display: grid; column-gap: 2em; row-gap: 1em; grid-template: auto / auto auto auto 1fr; align-items: center; }

.dlicon { display: inline-block; padding: .25em 1.5em .25em 2em; font-weight: normal; color:#fff; font-size: .88em; border:1px solid var(--mainbarva); border-radius: 5px; white-space: nowrap; width:min-content; text-decoration: none; background: #2e3a2f; }
.dlicon::before {vertical-align: middle; display: inline-block; content:' '; position: relative; left:-.75em; text-decoration: none; background: url(/img/ic_dlpdf.png) center center no-repeat; width: 14px; height: 17px; }

.qwrap { margin: .5em 0; background: #222; padding: .5em; padding-bottom: 1px; border-radius: 3px; font-size: .9em; }
.qwrap summary { font-weight: bold; margin-bottom: .5em; }
.qwrap ::marker { color:var(--mainbarva); }

/*========= eshop - filtrace  kategorie ================================================*/
.prodFiltr { padding: 1.25em 0 .25em; }
.prodFiltr .tlacitko.close{ border: 1px solid #fff; background: none; }
.prodFiltr .tlacitko.reset { border: 1px solid #fff; background: none; margin-left: 1em}
.prodFiltr .tlacitko.reset::before { content:'×'; font-size: 2em;  line-height: .33em; height: .5em; vertical-align: middle; display: inline-block; margin-right: .33em; }
.prodFiltr .settings { width: 83%; padding: .5em 1em; box-sizing: border-box; background: #3a3a3a; box-shadow: 0 2px 5px -6px #000; }
.prodFiltr .sender { width: 17%; text-align: center }
.prodFiltr .sender .tlacitko{  padding-left: 0; padding-right: 0; width: 100%; }
.prodFiltr .h { font-weight: bold; margin: 1em 0 0; }
.prodFiltr .prvky { }
.prodFiltr .vyrbox {  display: inline-block; vertical-align: top; width: 19%; margin-bottom: .25em; margin-right: 1%;}
.prodFiltr .vyrbox input { vertical-align: middle; width: 15%; margin-left: 0; margin-right: 0; }
.prodFiltr .vyrbox span { display: inline-block;vertical-align: top; width: 80%;  }
.prodFiltr .vyrbox span label { display: inline-block; vertical-align: middle;}
.prodFiltr .vyrbox .after { border: 1px solid var(--mainbarva); font-size: .9em; width: 1em; height: 1em; line-height: 1em; border-radius: .5em; text-align: center; color:var(--mainbarva); margin-left: .5em; cursor: pointer; vertical-align: middle; position: relative; }
.prodFiltr .vyrbox .after .qbox { position: absolute; display: block; z-index: 10; right:0; top:100%; color:#fff; padding: .33em; background: #000; width: max-content; max-width: 250px; font-size: .85em; line-height: 1.1; border-radius: .5em;  }

.prodFiltr .noUi-horizontal {width: 70%; height: 6px; margin-top: 1.25em; }
.prodFiltr .noUi-horizontal .noUi-handle {width: 24px; height: 14px; }
.prodFiltr .noUi-handle::before, .prodFiltr .noUi-handle::after {top:2px; height: 10px; }
.prodFiltr .noUi-handle::before {left: 10px;}
.prodFiltr .noUi-handle::after {left:14px; }
.prodFiltr .noUi-horizontal .noUi-tooltip {font-size: .7em; padding: 2px; line-height: 1; }

.prodFiltr > .tlacitko span::after { width: 16px; height:16px; content: ' '; background: url(/img/ic_fltr.svg) center center no-repeat; display: inline-block; vertical-align: middle; margin-left: .5em; }

.filt4 { position: relative;}
.filt4inner {overflow: hidden; }
.filt4link {position: absolute; bottom: -1.75em; right: 0;}

/*========= eshop - přepínací záložky ==================================================*/
.radzalozky { width: 100%; border-bottom: 1px solid #eee; margin-top: .5em; position: relative; }
.radzalozky .zalozka { display: inline-block; vertical-align: bottom; border: 1px solid #eee; border-radius: 2px 2px 0 0; line-height: 2em; margin-bottom: -1px; }
.radzalozky .zalozka > * { display: block; padding: 0 .5em; }

.predprodzal { padding-right: 4.5em; box-sizing: border-box; }
.radzalozky.prod { text-align: right; }
.radzalozky.prod.posunute {margin: -2em 0; float: right; width: auto;}
.radzalozky.prod .zalozka  { border: 0; text-align: center;  }
.radzalozky.prod .zalozka > * { padding: 0; width: 26px; margin-left: .5em; }
.radzalozky.prod .zalozka img { vertical-align: middle; }

.produkt-det .radzalozky .zalozka > * { padding: 0 .75em; }

.text4 { position: relative;}
.text4inner {overflow: hidden; }
.text4link {position: absolute; bottom: -1.7em; right: 10%;}

/*========= eshop - stránkování ========================================================*/
.paging {margin: 1em; text-align: right; font-size: 1.1em;}
.paging a,.paging .a{ margin: 0 .25em; }
.paging .curpage{ font-weight: bold; }

/*========= prvky patičky ==============================================================*/
#patickabg {background: #1f1f1f; padding: 3em 0 4em; }
#zakoncenibg {background: #3a3a3a; border-top: 12px solid #2aa638;padding: 2em 0;  }
#paticka {display: grid; grid-template: auto / auto 1fr 1fr 1fr; column-gap: 7%; row-gap: 1em;
     grid-template-areas: 'box1 box2 box3 box4'
}
#paticka .box.b1 {grid-area: box1}
#paticka .box.b2 {grid-area: box2}
#paticka .box.b3 {grid-area: box3}
#paticka .box.b4 {grid-area: box4}
#paticka h2 { color:#fff; font-size:22px; }
#paticka .box p:first-child {margin-top: 0;}
#paticka .box.b1 table { font-size: 1.1em; }
#paticka .box table a:not(:hover) {text-decoration: none; }
#paticka .box table td { padding-bottom: .75em;}
#paticka .box table img,
#paticka .box img {vertical-align: middle;}
#zakonceni { position: relative; font-size: .8em;}
#zakonceni a { color:#aaa; }

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

/*========= responzivity ===============================================================*/

@media (max-width:1449px) { /* max-sirka + 50px */
   .max-sirka {width: 94%; margin: auto 3%;}
   .scsgrid .scshead {grid-template: 1fr auto / 1fr auto; grid-template-areas: 'scsh3 btn1' 'scsh3 btn2'; }
   .scsgrid .scshead .scsh3 { grid-area: scsh3; }
   .scsgrid .scshead .pscs { grid-area: btn1; }
   .scsgrid .scshead .pconf { grid-area: btn2; }
}

@media (max-width:1299px) {
   .produkt { flex-basis: 48.5%; }
}

@media (min-width:1200px) {
   #xlogin {display: none; }
}

@media (max-width:1199px) {
   #login {display: none; }
   #xlogin a {display: inline-block;}
   .uVIP { margin-left: 0; margin-top: -.5em; z-index: 2; position: relative}
}

@media (max-width:1099px) {
   #bgillusion {display: none;}
   #hlavickabg {padding-top: 1px; padding-bottom: .25em;}
   #hlavicka {grid-template: auto / 150px 1fr 75px 200px 50px 50px; justify-items: center; column-gap: 3%; grid-template-areas: 
              'logo . vlajky hledej login menu';
   }
   #nhmenu {display:none;}
   .hmenu .hider { display:none!important; }
   .termline .trig { grid-template: auto auto 1fr / auto auto 1fr auto auto;
      grid-template-areas: 'cas jazyk . o p'
                           'trvani volno . o p' 
                           'misto misto . o p'; 
   }
   #paticka {grid-template: 1fr auto / 50% 1fr; grid-template-areas: 
          'box1 box4'
          'box2 box3'
   }
}

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

@media (max-width:999px) {
   .prodFiltr .vyrbox { width: 32.3%; }
   #stranka.shoppage { display: block; }
   #kat {display:none;}
   #stranka { grid-template: auto auto / auto; grid-template-areas: 'telo' 'sloupecL'}
   #skoleni h2,
   #cert h2 {font-size: 35px; }
   #cislabg {padding: 2em 0;}
   #cisla h2 {display:none; }
   #cislacontainer { flex-wrap: wrap; }
   #cisla .cbox {flex-basis: 100%;grid-template: minmax(110px,auto) / 110px 1fr; }
   #cisla .circ { color:#fff; border: 4px solid #fff; box-shadow: none; width: 110px; height: 110px; border-radius: 55px; }
   #cisla .circ .num { font-size: 40px; margin-top: 25px; }
   #cisla .circ .extra { font-size: 15px; }   
   .produkt { grid-template-rows: 220px auto minmax(2.2em,1fr); }
   .scsgrid {grid-template: 1fr auto auto / 100%; margin-bottom: 1em; }
   .scsgrid h3 {margin-bottom: 0; }
}

@media (min-width:1000px) {
   #mobile-categories { display: none!important; }
   #cisla .cbox.t1004 .circ { background: #222; color: #fff; }
   #cisla .cbox.t1005 .circ { background: #fff; color: #333; }
   #cisla .cbox.t1006 .circ { background: #777; color: #fff; }
   #cisla .cbox.t1006 .circ .unit { font-size: 50px; margin-bottom: 0; }
}

@media (max-width:849px) {
   .termline .trig { grid-template: auto auto 1fr auto / auto auto;
      grid-template-areas: 'cas jazyk'
                           'trvani volno' 
                           'misto misto'
                           'o p'; 
   }
}

@media (max-width:799px) {
   .uvodni .gallery .box,.gallery .box {width: 50%; }
   .podkat a {width: 47%;  }
   .zakobsah { grid-template: auto 1fr / 100%; row-gap: 1em; }
   .zaknav { display: flex; flex-wrap: wrap; column-gap: 3%; align-items: stretch; }
   .zaknav a { flex-basis: calc( calc( 94% / 3 ) - 1em ); }
}

@media (max-width:749px) {
   #hlavicka {grid-template-columns: 150px 1fr 75px 50px 50px 50px; }
   .uvodni #stranka { grid-template: auto auto auto auto / auto; grid-template-areas: 'rozcestnik' 'uvodnik' 'telo' 'sloupecL'}
   .kform {width: auto; margin: auto; float: none;}
   .prodFiltr .jslider { width: 85%; }
   .uvodni #stranka .vedlefoto .txt {padding: 0;}
   .uvodni #stranka .vedlefoto h2 {font-size: 30px;}
   .uvodni #stranka .vedlefoto.l,
   .uvodni #stranka .vedlefoto.r {grid-template: auto 1fr / 100%; grid-template-areas: 'pix' 'text'; row-gap: 1em; }
   #hledatObal {min-width: 0; width: 40px; }
   #hledatObal .q {display: none;}
   #hledatObal:not(.xsshow) .tlacitko {width: 100%;}
   #hledatObal.xsshow { width: 95vw; position: fixed; top:70px; left: 2.5vw; z-index: 1000; padding: .5em 0; }
   #hledatObal.xsshow .q {display: inline-block;}
   .prskform fieldset { width: 49%; }
   .projektform .piece { grid-template: auto 1fr / 5em 1fr auto; }
   .projektform .piece > :first-child {grid-area: 1/1/1/4; }
}

@media (max-width:649px) {
   .simpleform p.polovy { grid-template: 1fr auto / 100%; }
   .simpleform p.polovy.cb { grid-template: auto / auto 100%; }
   .simpleform p.polovy.cb > input { order: 1; margin-left: 1em; }
   .simpleform p.polovy.cb > label { order: 2; }
}

@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%; }
   .produkt-det .fotosloupec { width: 100%;}
   .produkt-det .vpravo { float:none;width: 100%;}
   .produkt-det .resphid { display:none;}
   .produkt-det fieldset .omezovac {width: 95%;}
   .prodFiltr .vyrbox { width: 49%; }
   .scsgrid .scshead {grid-template: 1fr auto auto / 100%; grid-template-areas: 'scsh3' 'btn1' 'btn2'; }
   .slider1 .text { bottom:50px; left: 6%; width: 88%; }
   .slider1 .bcover { background: linear-gradient(to top,rgba(0,0,0,.9),transparent); }
   .slider1 .bx-pager {position: absolute; bottom: 15px; left: 0%; width: 100%; text-align: center;}
   .slider1 .bx-pager-item { margin: 0 5px; }
   #paticka {display: block; }
   #skolenicontainer .termbox { flex: 0 0 100%; }
   .reklamform .piece { flex: 0 0 100%; }
}

@media (max-width:549px) and (min-width:450px)
{
   .produkt { flex-basis: 100%; grid-template: auto minmax(2.2em,1fr) / minmax(150px,.75fr) 1fr; column-gap: .75em;
   grid-template-areas: 'foto nadpis' 'foto popis'; }
}

@media (max-width:499px) {
   #hlavickabg { border-top: 3px solid var(--mainbarva); }
   #hlavicka {grid-template-columns: 150px 1fr 50px 50px 50px; column-gap: 2%; grid-template-areas: 
              'logo . hledej login menu';
   }
   #vlajky {display: none;}
   .projekt {padding: 1em .75em;}
}

@media (min-width:500px) {
   #xvlajky {display: none;}
}

@media (max-width:469px) {
   .podkat a {width: 97%; margin: .5em 1.5%; padding: .66em 1%; }
   .podkat.sfoto a { min-height: 0; }
   .podkat.sfoto .pic { display: none; }
   .slider2 .foto {width: 95%; height: 100px; line-height: 100px; margin: 5px 2.5%;}
   .slider2 .foto img {max-height: 100%;}
   .slider2 .prodText {width: 95%; margin: 5px 2.5%; }
   .slider2 .stitky {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 }   
   .termline .trig { grid-template: auto auto auto auto 1fr auto auto / 100%;
      grid-template-areas: 'cas'
                           'trvani'
                           'jazyk' 
                           'volno' 
                           'misto'
                           'o'
                           'p'; 
   }
   .projekt tr { display: grid; grid-template: auto 1fr / 33% 67%; grid-template-areas: 'first first' 'second third'; align-items: stretch; }
   .projekt th,.projekt td {display: grid; align-content: center; }
   .projekt th,.projekt td {text-align: left; }
   .projekt th:first-child,.projekt td:first-child { border-bottom: 0; grid-area: first; }
}

@media (max-width:449px) {
   .produkt {flex-basis: 100%; }
   .zaknav a { flex-basis: calc( calc( 97% - 2em ) / 2 ); }
}

@media (max-width:399px) {
   .kform .sloup {width: 100%;padding:0; }
   #login form { width: 150px; padding: .25em; box-sizing: border-box; text-align: center;}
   #login form .pwrap,#login form > p,#login form button,#login form label,#login form input {width: 100%; float:none; display: block;text-align: center; box-sizing: border-box; }
   #login form > p label {display: none;}
   .prskform fieldset { width: 99%; }
}

@media (max-width:369px) {
   #hlavicka {grid-template-columns: 1fr 50px 50px 50px; grid-template-areas: 
              'logo hledej login menu';
   }
   .zaknav a { flex-basis: 100%; }
}


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