@charset "utf-8";

/*  reset  */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;scroll-behavior: smooth;}
*, *:before, *:after {-webkit-box-sizing: inherit;-moz-box-sizing: inherit;box-sizing: inherit;font-display:fallback}


/* zmienne */

:root {
	--normal: 400;
	--bold: 700;
	--hnormal: 400;
	--hbold: 700;
	--hbolder: 700;
	--rozmiar-txt: 16px;
	--rozmiar-txt-md: 16px;
	--rozmiar-txt-sm: 15px;
	--rozmiar-txt-xs: 14px;
	--wazne-format: uppercase;
	--maxw: 1180px;

	--normal-font: 'Noto Sans', sans-serif;
	--header-font: 'Titillium Web', sans-serif;

	--kolor-txt: #303030;
	--kolor-txt-jasny: #fff;
	--kolor-link: #1d5495;
	--kolor-link-jasny: #e0f0ff;
	--kolor-naglowek: #707070;
	--kolor-naglowek-jasny: #fff;
	--kolor-hover: #b6aca5;
	--kolor-wazne: #e30014;
	--kolor-wazne2: #fd6b1c;

	--bg-light: #f7f7f7;
	--bg-light2: #e6e6e6;
	--bg-light3: #e0e0e0;
	--bg-dark: #4a2123;
	--bg-dark2: #1d2125;

	--t-linear: all 0.3s linear;
	--t-ease-out: all 0.3s ease-out;
	--t-ease-out-2: all 0.7s ease-out;
}


/* glowne */

html {min-height:100%;font-size:18px;font-size:var(--rozmiar-txt)}

body, table, div, input, textarea, select, button, option {font-family: 'Fira Sans', sans-serif;font-family:var(--normal-font);color:var(--kolor-txt);font-weight:400;font-weight:var(--normal);font-size:1rem}

sup {vertical-align:super;line-height:1em;font-size:0.6em}
sub {vertical-align:sub;line-height:1em;font-size:0.6em}

strong,b {font-weight:var(--bold)}
em,i {font-style:italic}
a {color:var(--kolor-link);text-decoration:none;transition:var(--t-linear)}
a:hover {color:#000;text-decoration:none}

p {margin:0 0 1.6em 0;}
label {cursor:pointer}

.content {line-height:1.8em}

.hidden {display:none}
.aleft {text-align:left}
.aright {text-align:right}
.acenter {text-align:center}
.ajustify {text-align:justify}
.fleft {float:left;display:inline}
.fright {float:right;display:inline}
.fcenter {margin:0 auto;display:block}
.iblock {display:inline-block;vertical-align:top;margin-bottom:10px}
.galeria {margin:0;display:block}
.cright {clear:right}
.cboth {clear:both}
.cleft {clear:left}
.ileft {margin:0px 30px 12px 0px}
.iright {margin:0px 0px 12px 30px}
.upper {text-transform:uppercase}
.lower {text-transform:lowercase}
.shadow {text-shadow:0 1px 2px rgba(0,0,0,0.4)}
.lshadow {text-shadow:0 1px 1px rgba(255,255,255,0.5)}
.menuvert {display:block}
.inline {display:inline}
.oneline {white-space: nowrap}
.rclear {display:none}
.cclear {display:block;clear:both}
.max-w100 {max-width:100vw}
.max-h100 {max-height:100vh}
.inactive {color:#a0a0a0}
.smallertext {font-size:0.8em}
.smalltext {font-size:0.9em}
.medtext {font-size:1em}
.bigtext {font-size:1.3em}
.biggertext {font-size:1.6em}
.important {color:var(--kolor-wazne)}

.page .content ul { list-style:disc;margin:5px 0 1em 32px}
.page .content ol { list-style:decimal;margin:5px 0 1em 32px}

.flex-row {display:flex;flex-flow:row wrap;}
.flex-col {display:flex;flex-flow:column nowrap;}
.flex-row-col {display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:space-around}
.flex-row-col .flex-between {flex:0 0 auto;padding-left:2%;border-right:1px dotted #c0c0c0;margin-right:2%}
.flex-row-f {display:flex;flex-flow:row nowrap;}
.flex-ac {align-items:center;}
.flex-at {align-items:flex-start;}
.flex-ab {align-items:flex-end;}
.flex-as {align-items:stretch;}
.flex-jb {justify-content: space-between}
.flex-ja {justify-content: space-around}
.flex-jc {justify-content: center}
.flex-jl {justify-content: flex-start}
.flex-jr {justify-content: flex-end}

h1 {margin:0 0 1em;clear:both;font-size:4rem;font-weight:var(--hnormal);color:var(--kolor-naglowek);font-family: var(--header-font);line-height:1em}
h2 {margin:0 0 0.8em;clear:both;font-size:3rem;font-weight:var(--hnormal);color:var(--kolor-naglowek);font-family:var(--header-font);line-height:1em}
h3 {margin:0 0 0.6em;clear:both;font-size:2.2rem;font-weight:var(--hnormal);color:var(--kolor-naglowek);font-family:var(--header-font);line-height:1em}
h4 {margin:0 0 0.5em;clear:both;font-size:1.6rem;font-weight:var(--hnormal);color:var(--kolor-naglowek);font-family:var(--header-font);line-height:1em}
h5 {margin:0 0 0.3em;clear:both;font-size:1.2rem;font-weight:var(--hnormal);;line-height:1em}
h6 {margin:0 0 0.3em;clear:both;font-size:1rem;font-weight:var(--hnormal);;line-height:1em}

html {min-height:100%}
html,body {min-height:100%;background:#fff;margin:0;padding:0;}
body {margin:0;padding:0;text-align:center;min-height:100%;background:#fff;}
.page {max-width:var(--maxw);margin:0 auto;padding:0;position:relative}

.nav a {
	display: inline;
	font-size: 24px !important;
	left: -9000em;
	padding: 5px 10px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 250px;
	z-index: 1;
}

.nav a:hover,
.nav a:focus,
.nav a:active {
	z-index:10000;
	background: #4B4B4B;
	border: 2px solid #FFFFFF;
	color: #FFFFFF;
	left: 0;
	top: 40px;
	position: absolute;
}

/* wyglad */
#all {background:#fff;}

header {border-bottom:10px solid var(--bg-light);position:sticky;top:-60px;z-index:10;background:#fff}
#top1 {z-index:7;position:relative;border-bottom:1px solid var(--bg-light2);height:60px}
#top1 .page {display:flex;flex-flow:row wrap;padding:15px}
#contacts {display:flex;flex-flow:row wrap;flex:1 0 auto;gap:2em}
#contacts i {margin-right:0.5em;color:var(--kolor-wazne)}
#contacts a {color:var(--kolor-txt)}
#contacts a:hover {color:var(--kolor-link)}
#langs {width:40px;height:30px;overflow:hidden}
#langs *:hover {background:#f5f5f5}
#langs span {display:flex;flex-flow:row wrap;align-items:center;justify-content:center;height:30px;cursor:pointer;transition:var(--t-linear);border:1px solid var(--bg-light2);}
#langs a {display:flex;flex-flow:row wrap;align-items:center;justify-content:center;height:30px;cursor:pointer;border-bottom:1px solid #f0f0f0;width:100%;background:#fff;border-left:1px solid #f0f0f0;border-right:1px solid #f0f0f0}
#langs:hover {overflow:visible}

#top2 {z-index:6;position:relative}
#top2 .page {display:flex;flex-flow:row wrap;align-items:center;justify-content: space-between;padding:15px}
#home {padding:10px 30px;transition:all 0.1s ease-out}
#home img {width:208px;transition:all 0.1s ease-out}

#searchbox {position:relative}
#search button {  height: 44px;;border-radius:0 5px 5px 0 }
#searchbox {position: relative;  height:44px;display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:5px 0 0 5px}
#searchbox input:focus {outline:none}
#fraza {	width: 280px;	height: 42px;border:0;;border-radius:5px}
#searchhint {	position: absolute;  top: 44px;  background: #fff;  width: 400px;  max-width: 80vw;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)  }
#searchhint > div {  border: 1px solid #d0d0d0;  padding: 0px  }
#searchhint > div a {  display: flex;  flex-flow: row nowrap;  align-items: center;  justify-content: flex-start;  padding: 5px 8px  }
#searchhint > div a:hover {background:var(--bg-light)}
#searchhint > div a:nth-of-type(n+2) {  border-top: 1px solid #f0f0f0  }
#searchhint > div a span {  width: 40px;  display: block;  height: 30px;  margin-right: 10px;  flex: 0 0 auto  ;display:flex;flex-flow:row wrap;align-items:center;justify-content: center}
#searchhint > div a strong {  font-size: 10pt;  flex: 0 1 auto;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden  }
#searchhint > div a span img {  max-width: 100%;  max-height: 100%;  mix-blend-mode: darken}

nav {height:70px;background:url(gfx/nav.png) no-repeat center center var(--bg-dark2);position:relative;z-index:5}
nav ul {display:flex;flex-flow:row wrap;align-items:stretch;height:70px;justify-content: flex-start;gap:0em}
nav>.page>ul>li {;line-height:70px;display:flex;align-items: stretch;position:relative;text-transform: uppercase;}
nav ul a {color:var(--kolor-txt-jasny);padding:0 1.6em;font-weight:var(--bold);font-size:1.2rem;display:block}
nav ul a:hover {color:var(--kolor-txt-jasny);background:var(--kolor-wazne)}
nav ul ul {display:none;background:#303030;height:auto;width:250px}
nav ul ul li {line-height:1.6em;text-transform: none}
nav ul ul li a {padding:0.5em 1em;text-align:left;font-size:1rem;}
nav li:hover>ul {display:block;position:absolute;top:70px}

header.on-top {box-shadow:0 4px 12px rgba(0,0,0,0.2);border-bottom:0}
header.on-top #top2 {height:60px}
header.on-top #top2 .page {padding:5px}
header.on-top #home {padding:0px 30px}
header.on-top #home img {width:108px}
header.on-top #langs {position:absolute;top:75px;right:0}
header.on-top #search {padding-right:50px}
header.on-top nav {height:50px}
header.on-top nav>ul {height:50px;}
header.on-top nav>.page>ul>li {line-height:50px}
header.on-top nav>.page>ul>li>a {line-height:50px;height:50px}
header.on-top nav li:hover>ul {display:block;position:absolute;top:50px}

#banery .page {display:grid;padding:2em 0;gap:1em;grid-template-columns: 5fr 2fr;grid-template-rows:1fr 1fr;align-items: stretch}
#banery .page>div {background:#202020}
#baner {grid-row:1 / 3;position:relative;overflow:hidden}
.baner {position:absolute;top:0;left:0;right:-5%;bottom:0;background:no-repeat center center;background-size:cover;display:grid;grid-template-columns: 1fr 1fr;align-items:center;
opacity:0;transform:translateX(-5%) scale(1);transform-origin:center center;transition:transform 4s ease-out 3.5s, opacity 4s ease-out 3.5s;z-index:3}
.baner.animated {transform:translateX(0%) scale(1) !important;opacity:1;transition:opacity 3s linear 0s,transform 6s ease-out 0s;z-index:4}
.baner>div {padding-left:5em;text-align:left;;opacity:0;transition:opacity 2s linear 6s, transform 1s linear 8s;}
.baner.animated>div {opacity:1;transition:opacity 1s linear 0.5s,transform 1s ease-out 0.5s;}
.baner>div>* {color:#fff;text-shadow:2px 3px 6px rgba(0,0,0,0.6)}
.baner>div>h2 {font-weight:var(--hbold);font-size:2.6rem;text-transform: uppercase;margin:0 0 0.5em 0}
.baner>div>h3 {font-size:1.8rem;line-height:1.2em;margin:0}

.mbaner {grid-column:2;aspect-ratio:5/3;display:grid;grid-template-columns: 1fr;grid-template-rows: 3fr 2fr;overflow:hidden}
.mbaner * {;position:relative}
.mbaner img {grid-row:1 / 3;grid-column: 1 / 2;object-fit:cover;min-width:100%;min-height:100%;transition:var(--t-ease-out)}
.mbaner h3 {grid-row:1;grid-column: 1 / 2;color:#fff;font-size:1.6rem;align-self:center;font-weight:var(--hbold);text-align:right;margin-right:1.5rem;text-shadow:0 1px 3px rgba(0,0,0,0.6)}
.mbaner:nth-of-type(2) h3 {color:#000;text-shadow:0 1px 3px rgba(255,255,255,0.9) }
.mbaner div {grid-row:2;grid-column: 1 / 2;align-self:flex-end;text-align:right;margin-right:1.5rem;margin-bottom:1.5rem}
.mbaner div span {background:var(--kolor-wazne)}
.mbaner:hover img {transform:scale(1.05)}

#kategorie {display:grid;gap:2em;align-items:stretch;justify-content: flex-start;grid-template-columns:1fr 1fr 1fr 1fr;;margin:0 auto 2em}
.kategoria {border:2px solid var(--bg-light2);display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr}
.kategoria div {grid-column: 1 / 7;grid-row:1;position:relative;padding:10px;display:flex;align-items:center;justify-content: flex-start}
.kategoria div img {max-width:100%;max-height:120px;object-fit:contain;transform-origin: left center;mix-blend-mode: darken}
.kategoria h4 {grid-column: 3 / 8;grid-row:1;position:relative;z-index:2;text-align:right;padding:0.8rem 1rem;color:var(--kolor-txt);font-weight:var(--hbold);font-size:1.2rem;text-shadow:0 1px 3px rgba(255,255,255,0.9)}
.kategoria:hover {border-color:var(--kolor-wazne);background:var(--bg-light)}

#produkty {display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:2em;margin:0 auto 2em}
.produkt {border:2px solid var(--bg-light2);padding:1em;position:relative;overflow:hidden}
.produkt:hover {border-color:var(--kolor-wazne);background:var(--bg-light)}
.produkt h4 {padding:0.5em 0.5em 0;font-weight:var(--hbold);color:var(--kolor-txt);font-size:1.2rem;line-height:1.2em;margin:0}
.produkt .prod-tag {  position: absolute;  top: 30px;  left: -30px;  color: #fff;  font-size:0.9rem;  font-weight:var(--bold);  display: inline-block;  padding: 4px 10px;  width: 140px;  text-transform: uppercase;  transform: rotate(-45deg);  transform-origin: center center;  }
.tag-nowosc {background: #55aa22;  }
.tag-promocja { background: #ddbb00; }
.tag-wyprzedaz { background: #bb2200; }
.prodpic {  mix-blend-mode: darken;  aspect-ratio:4/3;  width: 100%;  transition: all 0.2s linear;  margin: 0 auto;  overflow: hidden;  position: relative; display:flex;align-items: center;justify-content: center }
.wymiary-foto {position:relative;display:inline-block;border:1px solid #d0d0d0;transform: translateY(0px)}
.prodpic .wymiary-foto-container {position:absolute;top:0%;left:0%;width:100%;height:100%;}
.prodpic .wymiary-foto {display:flex;align-items:center;justify-content:center;border:0px solid #d0d0d0;width:100%;height:100%}
.prodpic .wymiary-foto img {display:block;border:0px solid #d0d0d0;max-width:100% !important;max-height:100%}
.wymiary-foto img {display:block;margin:0;padding:0}
.wymiary-foto svg {top: 0;left: 0;width: 100%;height: 100%;position: absolute;			}
.wymiary-foto svg marker {stroke: #707070;stroke-width: 0.5;stroke-linecap: none;}
.wymiary-foto svg g {display: inline;stroke: #707070;stroke-width: 0.5;stroke-linecap: none;}
.wymiary-text {color:#000;background:#fff;stroke: #fff;stroke-width:0;stroke-linecap: none;font-weight:var(--bold)}

#mapadojazd {aspect-ratio:4/3;max-width:960px;margin:0 auto;border:1px solid var(--bg-light2);padding:2px}
#mapadojazd iframe {height:100%;line-height:1;padding:0;margin:0;display:block}

.towar-header {display:grid;grid-template-columns: 2fr 3fr;gap:2em;margin:0 0 2em 0}
.towarpic {display:flex;align-items:center;justify-content: center;padding:1em;background:var(--bg-light)}
.towarpic img {mix-blend-mode: darken}
.towardane h2 {font-size:2rem;font-weight:var(--hbold);border-bottom:2px solid var(--bg-light2);padding:0 0 0.5em 0}
.towardane .prod-tag {display: inline-block;  padding: 0px 10px;  text-transform: uppercase;margin:0 10px 10px 0;color:#fff;font-weight:var(--bold);font-size:0.9rem}
.prodopis {display:flex;flex-flow:row wrap;justify-content:center}
.prodopis>div {flex:0 1 auto}

#content {padding:2em 0 3em}
#title {padding:0 0 2em 0;text-align:left}
#title h1 {;font-size:2.5rem;color:var(--kolor-link);margin:0;position:relative;display:inline-block;padding:0 0 1rem 0;font-weight:var(--hbold)}
#title h1::after {content:"";position:absolute;bottom:0;left:0;width:30%;height:3px;background:var(--kolor-wazne)}
#content>.content {max-width:960px}
#content>.page>.content {text-align:left}

#uslugi {max-width:var(--maxw);background:url(gfx/uslugi.jpg) no-repeat right center;background-size:cover;aspect-ratio:15/4;margin:0 auto 2em;  display:grid;grid-template-columns: 1fr 1fr;align-items:center;  }
#uslugi>div {text-align:left;padding:0 0 2em 2em;line-height:1.6em;text-shadow:0 1px 3px rgba(255,255,255,0.9)}
#uslugi h2 {color:var(--kolor-txt)}

#polecane {max-width:var(--maxw);margin:0 auto;background:var(--bg-light);padding:1em;display:grid;grid-template-columns: 1fr 1fr 1fr;gap:1em;}
#polecane a {background:var(--bg-light2);display:grid;grid-template-columns: 1fr 2fr 1fr 2fr;grid-template-rows: 1fr;text-align:right;justify-content: flex-end}
#polecane a:hover {background:var(--bg-light3)}
#polecane a div:nth-of-type(1) {grid-column: 2 / 5;grid-row:1 / 2;mix-blend-mode:darken}
#polecane a div:nth-of-type(2) {grid-column: 1 / 4;grid-row:1 / 2;text-align:left;padding:1.5em;line-height:1.4em;font-size:0.9rem}
#polecane a img {object-fit:cover;height:100%;object-position: left center}
#polecane h3 {color:var(--kolor-txt);font-size:1.4rem;font-weight:var(--bold)}

#cards {background:var(--bg-light);padding:3em 0em;margin-bottom:2em}
#cards .page {background:#fff;padding:2em 1em;display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:0;transition:var(--t-ease-out) }
#cards .page:hover {box-shadow:0 2px 40px rgba(0,0,0,0.09)}
.card {display:flex;flex-flow:row nowrap;align-items:center;text-align:left;justify-content: flex-start;font-size:1.4rem;padding:0 1em;border-left:1px solid var(--bg-light2)}
.card:nth-of-type(1) {border-left:0}
.card div {font-size:0.8rem;line-height:1.6em;}
.card div strong {font-size:1rem;}
.card i {flex:0 0 auto;margin-right:0.6rem}

#mapa {width:100%;height: clamp(350px,60vh,640px);}
#mapa iframe {width:100%;height:100%}

footer {background:url(gfx/footer.png) no-repeat center top var(--bg-dark2)}
footer div {color:var(--kolor-txt-jasny);line-height:1.6em}
footer>div {padding:2em}
footer a {color:var(--kolor-txt-jasny)}
footer a:hover {color:var(--kolor-hover)}
#contacts2 {padding-top:4em;padding-bottom:3em;display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:3em}
#contacts2 div {text-align:left}

#menumobile {display:none;position:fixed;right:0px;top:0px;width:240px;z-index:10001}
#menumobilebox {transform:translateX(248px);width:240px;background:#fff;transition:0.4s ease;top:60px;position:absolute;max-height:calc(100vh - 100px);overflow-y:auto;text-align:left;padding:10px 10px 10px;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
#menumobile.show #menumobilebox {transform:translateX(0px)}
#togglemenu {width:60px;height:60px;position:absolute;right:0px;top:0px;line-height:60px;border-left:0px solid #f0f0f0;border-right:0px solid #f0f0f0;padding:8px;transition:all 0.3s ease;;background:#f5f5f5;font-size:10pt}
#menumobile.show #togglemenu {background:#2e2e2e;color:#fff;}
#menumobilebox {line-height:20px}
#menumobilebox img {max-height:40px}
#menumobilebox>ul>li {border-bottom:1px solid #fff;font-size:1rem;padding-bottom:5px}
#menumobilebox>ul>li>a {padding:6px 30px 6px 5px;display:block;position:relative;font-weight:var(--bold);}
#menumobilebox>ul>li a i {position:absolute;right:0;top:4px;color:#808080;display:inline-block;background:#f0f0f0;height:24px;width:24px;line-height:24px;text-align:center;transition:0.3s}
#menumobilebox>ul>li >a>i.rotate {transform:rotate(180deg)}
#menumobilebox li div {overflow:hidden;transition:0.3s ease-out;opacity:0;transform:translateY(0.9);transition-delay:0.2s}
#menumobilebox>ul>li div.show {opacity:1;transform-origin: center top;transform:translateY(1);height:auto}
#menumobilebox>ul>li div>ul {/*margin-top:-100%;*/max-height:0;transition:0.3s ease-out/*;transition:max-height 0.5s cubic-bezier(0, 1.05, 0, 1);*/}
#menumobilebox>ul>li div ul ul {padding-bottom:5px}
#menumobilebox>ul>li div.show>ul {margin-top:0;max-height:2500px}
#menumobilebox ul ul>li>a {padding:5px 5px 5px 12px;display:block;position:relative;font-weight:var(--bold);font-size:1rem;color:#505050;line-height:1.2em}
#menumobilebox ul ul ul>li>a {padding:4px 5px 4px 25px;display:block;position:relative;font-weight:var(--bold);font-size:0.9rem;color:#505050;line-height:1.2em}


#admlogininfo {position:fixed;top:65px;left:-3px;background:#fff;border-radius:0 8px 8px 0;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:1000;min-width:150px;padding:5px 12px;font-size:10pt;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;line-height:1.3em;
background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(236,245,249,0.92) 52%, rgba(235,240,243,0.92) 60%, rgba(236,245,249,0.92) 65%, rgba(255,255,255,0.92) 100%);
}
#admlogininfo span {display:flex;flex-flow:column nowrap;margin-right:15px;}
#admlogininfo strong {font-size:11pt}
#admlogininfo-return {padding:5px 0 1px 25px;background:url(administrator/images/klodka.png) no-repeat left center;background-size:22px 22px;text-align:left}
#admlogininfo-logout {padding-top:20px;background:url(administrator/images/logout.png) no-repeat center -5px;font-size:9pt;font-weight:700}

	/* inne */

#tothetop {position:fixed;bottom:10px;right:10px;z-index:1000;mix-blend-mode: difference;background:#000;border-radius:30px;color:#dd9955}

.showpopup {;cursor:pointer}
#popupbackground {position:fixed;z-index:1000000;background:rgba(0,0,0,0.8);top:0;left:0;right:0;bottom:0;display:flex;flex-flow:row wrap;align-items:center;justify-content:center;cursor:pointer}
#popup {background:#fff;border-radius:10px;width:600px;height:400px;max-width:90vw;max-height:90vh;padding:30px 20px 30px 30px;line-height:1.4em;cursor:pointer;}
#popup>div {overflow-y:auto;height:100%;padding-right:10px}
.fadein {;opacity:0;transition:all 0.5s ease-out;}
#popup.fadein {transform:translateY(-30px)}
#popup.show {transform:translateY(0px)}
.fadein.show {opacity:1;transition:all 0.5s ease-out;}

.ikona-zalacznik {vertical-align:middle;display:inline-block;margin-right:8px;color:#b02000}

	.galeria {display:inline-block;vertical-align:middle;overflow:hidden;width:200px;margin:0 20px 40px;text-align:center;border:1px solid #e0e0e0;background:#fff;padding:4px;transition:all 0.2s linear;border-radius:3px}
	.galeria:hover {border:1px solid #fff;box-shadow:0 1px 7px rgba(0,0,0,0.5)}
	.galeria img {max-width:100%;display:block;box-sizing:border-box;max-height:250px;margin:auto auto}

	.galerialista {vertical-align: top;}
	.galerialista .galeriapic {height:120px;overflow:hidden;width:180px}
	.galerialista img {vertical-align: top;background:none;box-shadow:none;max-height: none}
	.galeriainfo {font-size:14pt;padding:5px;background:#fff;height:auto}

.bokfotki {float:right;margin-left:20px}
.bokfotki>a {flex:0 0 auto;width:clamp(140px,42vw,210px);margin:0 0 20px;display:flex;flex-flow:row wrap;align-items:center;justify-content: center;min-height:140px;}
#content .bokfotki>a>img {object-fit:contain;object-position:center top;height:100%;width:100%;display:block;margin:0;max-width:none}

.galeriafotki {display:flex;flex-flow: row wrap;align-items:stretch;justify-content: center;margin-bottom:1em}
.galeriafotki>a {flex:0 0 auto;width:clamp(140px,25vw,210px);margin:10px;display:flex;flex-flow:row wrap;align-items:center;justify-content: center;min-height:140px}
#content .galeriafotki>a>img {object-fit:contain;object-position:center top;height:100%;width:100%;display:block;margin:0;max-width:none}

    .imgzoom {text-align:center;border:1px solid #e0e0e0;background:#fff;padding:4px;transition:all 0.2s linear;border-radius:3px;display:inline-block;vertical-align:middle;overflow:hidden;}
    .imgzoom:hover {border:1px solid #fff;box-shadow:0 1px 7px rgba(0,0,0,0.5)}
    .imgzoom img {display:block}

	#content img.iblockpic {display:inline-block;vertical-align:middle;max-height:115px;max-width:230px;width:auto;height:auto}

	.podpis {clear:both;display:block;color:#404040;font-size:10pt;text-align:center;line-height:1.2em;padding:3px 0;margin:0 auto}

.pager {margin:0px 0 10px;display:inline;float:right;padding:0px 10px 0 10px;text-align:right;clear:both;font-weight:var(--bold)}
.pager a {padding:2px 7px;border-radius:0px;margin:0 0 0 6px;background:#e0e0e0;color:var(--bg-dark2)}
.pager a:hover {background:var(--kolor-naglowek);text-decoration:none;color:#fff}
.pager a.selected {background:var(--kolor-wazne2);color:#ffffff}

.more {margin:0 auto;text-align:center;display:inline-block;padding:0.4em 1.5em;border-radius:4px;cursor:pointer;font-size:1rem;background:var(--kolor-wazne);z-index:2;position:relative;color:#fff;font-weight:var(--hbolder);font-family:var(--header-font);text-transform:uppercase;transition:var(--t-linear);}
.more:hover {background:#000;color:#fff}
.more i {opacity:0;font-size:0.8rem;position:relative;top:-3px;display:inline-block}
.more.loading i {opacity:1}

.more2 {display:inline-block;cursor:pointer;font-size:1.2rem;background:var(--kolor-wazne2);border-radius:0px;padding:5px 25px 5px 25px;z-index:2;position:relative;color:var(--kolor-naglowek-jasny);font-weight:var(--hbold);font-family:var(--header-font);text-transform:uppercase;transition:var(--t-linear);}
.more2:hover {background:var(--bg-dark2);color:#fff}

.contactform {max-width:100%;width:100%;;margin:0 auto;display:flex;flex-flow:row wrap;justify-content: flex-start;align-items:flex-start}
.forminline {display:inline-block;text-align:left;flex:0 1 auto;padding:0 15px}
.input_form {width:320px;max-width:100%;box-sizing: border-box}
.input_form2 {max-width:100%;box-sizing: border-box}
.input_textarea {width:380px;max-width:100%;box-sizing: border-box}
label.label {margin-bottom:0.2em;display:inline-block}

input,textarea,select {border:1px solid #d8d8d8;background:#fff;padding:5px 10px;color:#202020;font-size:1rem;max-width:100%;}
option {font-size:1rem}
input:focus,textarea:focus {;border:1px solid #999693;background:#f8f8f8}
.button {cursor:pointer;font-size:1.2rem;background:var(--kolor-wazne);border:0;border-radius:4px;padding:.4em 1.5em;z-index:2;position:relative;color:var(--kolor-naglowek-jasny);font-family:var(--header-font);font-weight:var(--bold);display:inline-block;text-transform:uppercase;transition:var(--t-linear)}
.button:hover {background:var(--bg-dark2);color:#fff;border:0}
.button:focus {background:var(--bg-dark2);color:#fff;border:0}
input[type=submit]:focus {background:var(--bg-dark2);color:#fff;border:0}
input,textarea,button,select {}
input[type=submit],button {cursor:pointer}

.bigbutton {border:0;color:var(--kolor-wazne2);background:var(--bg-light3);padding:1em 1.5em;text-transform: uppercase;font-weight:var(--bold);font-size:1.1rem;transition:var(--t-linear);letter-spacing:1px}
.bigbutton:hover {background:var(--bg-dark2);;color:#fff}

.content table {  margin:10px auto;}
#content .content table {margin:10px auto;border-bottom:1px solid #d7d6d5;background:#fff;}
#content .content table th {border-bottom:1px solid #a0a0a0;background:#d7d6d5;padding:0.3em 0.8em;font-weight:var(--normal);color:var(--kolor-naglowek);font-size:1.2rem}
#content .content table tr td {border:0px solid #a0a0a0;padding:0.3em 0.8em;background:#E7E6E6;}
#content .content table tr:nth-of-type(2n) td {border:0px solid #a0a0a0;padding:0.3em 0.8em;background:#fff;}

#content iframe {max-width:100%;margin:0 auto;width:100%}
#content img {max-width:100%;object-fit:contain;object-position:center top;height:auto }
#content input,#content textarea {max-width:100%}

.container {width:100%;padding:250px 0 0 0;position:relative;height:0}
.container21 {width:100%;padding:50% 0 0 0;position:relative;height:0}
.container169 {width:100%;padding:56.25% 0 0 0;position:relative;height:0}
.container1610 {width:100%;padding:60% 0 0 0;position:relative;height:0}
.container43 {width:100%;padding:75% 0 0 0;position:relative;height:0}
.container iframe {position:absolute;top:0;left:0;width:100%;height:100%}

.embeddedContent {max-width:640px;max-height:480px;margin:0 auto}

.tablewrapper {overflow:auto}
.tablewrapper .tablewrapper {overflow:auto}

.imgl {display:block;margin:0;border:0}
.hr {clear:both;border-bottom:1px solid #e0e0e0;padding-top:0.5em;margin-bottom:0.5em}
.hr2 {clear:both;padding-top:0.5em;margin-bottom:0.5em}

.load * {
	transition:none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
}

img.lazy {background:url(gfx/ajax-loader.gif) no-repeat center center;background-size:16px 16px;}
img.lazyloading {opacity:0;transition:0s}
img.lazyloaded {
	/*animation:lazyload 0.6s ease-in 0s 1 normal forwards;*/
	opacity:1;transition:1s;transition-delay: 0s
}
@keyframes lazyload {
	10% {opacity:0}
	80% {opacity:1}
}

#cookieinfobox {z-index:1000000;position:fixed;bottom:0px;left:0;right:0;border-top:1px solid #000;background:rgba(0,0,0,0.7);max-width:100vw;}
#cookieinfobox>div {display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;margin:0 auto;border-radius:8px;text-align:left;line-height:20px;max-width:100vw;font-size:0.8rem;color:#fff;position:relative;width:430px;box-sizing:border-box;padding:12px 12px 12px 12px}
#cookieinfobox a {color:#88ccee}
#cookieinfobox>div span {padding-right:10px}
#cookieinfobox a:hover {color:#5599bb}
#zrobcookielink {font-size:20px;font-weight:var(--bold);color:#eee;text-transform:lowercase;line-height:18px;text-align:center;height:24px;width:24px;display:block;border:1px solid rgba(255,255,255,0.2);border-radius:12px;background:#000}
#zrobcookielink:hover {color:#fff}

.shownext:checked ~ .hiddentext {height:auto;transition:height 0.2s ease-out}
.shownext:checked ~ .hiddentext>div {transition:opacity 0.3s linear 0.1s, transform 0.1s ease-out 0s;opacity:1;transform:scaleY(1)}
.hiddentext {height:0;transition:height 0.2s ease-out}
.hiddentext>div {opacity:0;transition:opacity 0.05s linear 0s, transform 0.1s ease-out 0.3s;transform:scaleY(0)}

/* media q. */

@media
only screen  and (max-width:1340px) {
}

@media
only screen  and (max-width:1260px) {
}

@media
only screen  and (max-width:1220px) {
	#banery .page {padding:1em;}
	#content {padding:1em 1em 2em;}
	#contacts2 {padding-left:2em;padding-right:2em;}
	#cards {padding:1em;}
}

@media
only screen  and (max-width:1080px) {
	#menumobile {display:block}
    nav {display:none}
    #togglemenu {border-bottom:1px solid var(--bg-light2);border-left:1px solid var(--bg-light2);}
    #top1 {padding-right:59px}
	header.on-top #langs {right:15px}
	header.on-top #search {padding-right:120px}
	#searchhint {;left:auto;right:-120px}
	.mbaner h3 {font-size:1.4rem}
}

@media
only screen  and (max-width:960px) {
	html {font-size:18px;font-size:var(--rozmiar-txt-md)}
    h1 {font-size:3rem;}
    h2 {font-size:2.5rem;}
    h3 {font-size:2rem;}
    h4 {font-size:1.6rem;}
	#langs {position:absolute;top:15px;right:10px}
	header {position:fixed;top:0;left:0;right:0;border-bottom:0}
	#banery {padding-top:60px}
	#top1 {height:0;border:0}
	#top1 .page {padding:0}
	#top2 {height:60px;padding-right:115px}
	header #top2 {height:60px;border-bottom:1px solid var(--bg-light2)}
	header #top2 .page {padding:5px;height:60px}
	header #home {padding:0px}
	header #home img {width:108px}
	#searchbox {height:30px}
	#fraza {height:28px;width:170px;padding:0 0.5em}
	#fraza::placeholder {font-size:0.8rem}
	#searchhint {	position: absolute;  top: 32px;}
	#search button {padding:0 0.5em;height:30px;font-size:1rem}
	#banery .page {grid-template-columns:1fr 1fr;grid-template-rows:1fr auto}
	#baner {grid-row:1/2;grid-column: 1/3;aspect-ratio:2/1}
	.baner {grid-template-columns: 2fr 1fr}
	.baner>div {padding-left:3em}
	.baner>div h2 {font-size:2.1rem}
	.baner>div h3 {font-size:1.5rem}
	.baner>div h4 {font-size:1.3rem}
	.mbaner {grid-row:2/3;grid-column:auto}
	#kategorie {grid-template-columns: 1fr 1fr 1fr;;gap:1.5em}
	#produkty {grid-template-columns: 1fr 1fr 1fr;;gap:1.5em}
	#contacts {display:none}
	#uslugi {aspect-ratio:12/4;background-position:left center;grid-template-columns: 2fr 1fr}
	#uslugi > div {padding-bottom:0}
	#polecane {grid-template-columns: 1fr}
	#polecane a {max-width:600px;justify-self: center;width:100%}
	#polecane a div:nth-of-type(2) {align-self:center}
	#contacts2 {grid-template-columns: 1fr 1fr;gap:2em}
	#contacts2 div {justify-self:center;width:280px}

}

@media
only screen  and (max-width:820px) {
	#cards .page {grid-template-columns: 1fr 1fr;gap:2em;padding:2em}
	.card {  border-left: 0; padding:0;}
}

@media
only screen  and (max-width:720px) {
	#kategorie {grid-template-columns: 1fr 1fr;padding:0}
	#produkty {grid-template-columns: 1fr 1fr;padding:0}
	.towar-header {display:grid;grid-template-columns: 1fr}
	.contactform {flex-flow:row wrap}
	.forminline {padding:5px 5px}
	.input_form,.input_form2,.input_textarea {width:320px}
}

@media
only screen  and (max-width:640px) {
	html {font-size:17px;font-size:var(--rozmiar-txt-sm)}
	#uslugi {aspect-ratio:auto;grid-template-columns: 3fr 1fr}
	#uslugi > div {padding:2em}
	#contacts2 {grid-template-columns: 1fr}
}

@media
only screen  and (max-width:560px) {
	.input_form,.input_form2,.input_textarea {width:304px}
	.forminline {padding:5px 0}
    h1 {font-size:2.5rem;}
    h2 {font-size:2rem;}
    h3 {font-size:1.8rem;}
    h4 {font-size:1.4rem;}
	#banery .page {grid-template-columns:1fr;}
	#baner {grid-row:auto;grid-column: auto;aspect-ratio:3/2}
	.baner {grid-template-columns: 1fr}
	.baner>div {padding:1em 2em}
	.mbaner {grid-row:auto;aspect-ratio:3/1}
	#kategorie {;padding:0 !important}
	#produkty {;padding:0 !important}
	.galeria {width:calc(45vw - 30px);margin:0px 10px 20px}
	#mapadojazd {aspect-ratio:2/3}
}

@media
only screen  and (max-width:480px) {
	html {font-size:16px;font-size:var(--rozmiar-txt-xs)}
	#fraza {width:100px}
	#fraza::placeholder {color:#fff;}

	.bokfotki {order:2;flex:1 0 100%;display:flex;flex-flow:row wrap;justify-content:space-around;float:none;margin:0;padding-top:20px}
	#kategorie {grid-template-columns: 1fr}
	#produkty {grid-template-columns: 1fr}
	.prodpic {  aspect-ratio:4/2;}
	#cards .page {grid-template-columns: 1fr;gap:1em}
	.card {width:280px;justify-self:center;}
	.card:nth-of-type(n+2) {border-top:1px solid var(--bg-light);padding-top:1em}
	#uslugi {grid-template-columns: 1fr}
}

@media
only screen  and (max-width:479px) {
}

@media
only screen  and (max-width:400px) {
	header #home img {width:80px}
	#fraza {width:80px}
}

@media
only screen  and (max-width:359px) {
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

}

#myVideo::-webkit-media-controls {
  display: none !important;
}