* {padding:0;margin:0; font-family: Verdana, Arial, Helvetica, sans-serif;}

*, *::before, *::after {
	box-sizing: border-box;
}

html {width:100%;height:100%;}
body {
	margin: auto;
	line-height:1.7;
}

p {
 margin-bottom: 1rem ;
}

p.description_pytanie {
 	font-weight: bold;
}

p.description_pytanie + p:not(.description_pytanie) {
 	margin-left: 2rem;
}

i {
	font-style: normal;
}

hr {
  border-top: 1px solid LightCoral;
}

ul {
	list-style-position: inside;
}

.center {
	text-align: center;
}

a {
	color: Crimson;
	cursor: pointer;
	border: none;
	text-decoration:none;
}

a:hover, a:active {
	text-decoration: underline;
}

h1 {
	text-align: center;
	margin: 0 1rem 1rem 1rem;
}

h1::first-letter {
    text-transform: uppercase;
}

.container_p24 h1 {
	margin: 1rem;
}

h2 {
	margin: 2rem 0 1rem 0;
}


h1 + h2, 
.ramka > h2,
fieldset > h2,
form > h2 {
	margin: 0.2rem;
}


#label_firma, #label_nip {
	display: none;
}

.ptaszek::before {
  content: "\2714   ";
}

h1, h2, h3, h4 p:first-of-type {
	line-height:1.2;
	color: DarkRed;
}

.wybierakSrednica, .wybierakTylPrzypinki {
  display: flex;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  margin: 0.5rem 0;
  font-size: 1rem;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.wybierakSrednica::-webkit-scrollbar,
.wybierakTylPrzypinki::-webkit-scrollbar {
  display: none;
}

@media (max-width: 600px) {
.wybierakTylPrzypinki {
  justify-content: left;
}
}

.zw, h5 {
	display:inline;
	font-size: 150%;
}

.zmn, h6 {
	display:inline;
	font-size: 80%;
}

strong {
	color: DarkRed;
}

.projekt-box {
	text-align:	right;
}

.projekt-box button {
	margin: 0;
	padding:0;
	
}

ul.podkladka {
	display: flex;
	flex-wrap: wrap;
	justify-content:  center;
}

ul.podkladka li {
	list-style-type: none;
	min-width: 30%;
}

ul.podkladka h2 {
	margin: 0;
}

ul.podkladka p {
	margin: 0;
}

.grey {
	color: Grey;
}

object {
width: 100%;	
}

.prima, .grafikaWymiary {
	margin-top:1rem;
	margin-left:auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.prima li, .grafikaWymiary li {
	text-decoration:none;
	margin-bottom: 1rem;
	border: 1px solid LightGrey;
	border-radius: 0.25rem;
	list-style-type: none;
}

.grafikaWymiary li {
	padding: 0.5rem;
}

.prima img {position: relative; left: -8px; top: -8px; z-index: -10;}

.grafikaWymiary li div{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.grafikaWymiary li div a {
	color: Crimson;
	width: 48px;
	height: 48px;
	border: 1px solid LightPink;
	border-radius: 0.25rem;
	text-decoration: none;
	text-align:center;
	line-height: 48px;
}

.grafikaWymiary li div a:hover {
	color: DarkRed;
	border: 1px solid DarkRed;
}

.grafikaWymiary li div:first-of-type p:first-of-type {
	margin-bottom: 2rem;
}

.grafikaWymiary li div:first-of-type p:first-of-type:first-line {
	font-weight: bold;
	font-size: 140%;
	color: DarkRed;
}

.grafikaWymiary li div:first-of-type p:last-of-type{
	text-align:right;
}


.prima a {
	text-decoration:none;
	display:block;
	padding: 0.5rem;
}

.prima p {
	color: Black;
}

.prima a div:first-child {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.prima div.cena p {
	color: Crimson;
	text-align: right;
	line-height: 1.8rem;
	font-size: 1.8rem;
}

.prima div.cena p::before {
	content: "Już od";
	display:block;
}

.lista_prod_promo {
	color: Black;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.kalkulator_cen {
	list-style-type: none;
	color: Black;
}

.kalkulator_cen div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.kalkulator_cen label {
	flex: 0 5 30px;
	text-align:center;
	cursor:default;
}

.kalkulator_cen label.powieksz {
	font-size: 1.2rem;
}

.kalkulator_cen form {
	margin:auto;
	width: 100%;
	max-width: 600px;
	text-align:center;
	color: Black;
}

.kalkulator_cen #ilosc,
.kalkulator_cen #ilosc_js,
.kalkulator_cen .ilosc,
.kalkulator_cen .ilosc_js {
	width: 4.0rem;
	padding: 0.25rem;
	text-align: right;
	font-size: 1.1rem;
	height: 1.5rem;
}

span.minus, span.plus{
	cursor:pointer;
	width: 1.5rem;
	height: 1.5rem;
	background:#f2f2f2;
	border-radius:4px;
	padding: 8px 8px 8px 8px;
	border:1px solid #ddd;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

/* WYŁĄCZANIE STRZAŁEK W INPUT Chrome, Safari, Edge, Opera 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
*/
/* WYŁĄCZANIE STRZAŁEK W INPUT Firefox 
input[type=number] {
  -moz-appearance: textfield;
}
*/

.kalkulator_cen p {
font-size: 80%;
margin:0;
line-height:1.25;
}

#oszczedzasz, .oszczedzasz {
color: Green;	
}

#kalkulatorCena, .kalkulatorCena {
    min-width: 6rem;	
}

#kalkulatorWartosc, .kalkulatorWartosc {
    min-width: 7rem;
}

div.cena {
	margin:0;
}

div.cena p {
	text-align:right;
}

div.cena p::first-line,
#cena_myZakresIlosci span,
#myFiltrPokaz span {
	font-size: 1.5rem;
}

.cenaDoKoszyka {
font-size: 150%;
color: Black;
}

.banerGraficzny
{
	display: block;
    max-width: 100%;
    height: auto;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	margin-left:auto;
	margin-right:auto;
}

.polecamyRowniez, #infoPodkladka {
	padding:0;
	width: 100%;
}

.polecamyRowniez > h2 {font-size: 1.0rem; margin: 0.2rem;}


.polecamyRowniez > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
}

.polecamyRowniez > div > a {
	line-height: 1rem;
	}
	
.lista_prod img {
width: 180px;
height: auto;
}

.podglad {
  position: relative;
  max-width: calc(100% - 2px);
  cursor:pointer;
}

img.lupka {
  position: absolute;
  opacity: 0.2;
  right: 0;
  bottom: 0;
  mix-blend-mode: multiply;
}

img.maxSzer {
	width: 100%;
	max-width: 1000px;
	height: auto;
}

img.maxSzer640px {
	width: 100%;
	max-width: 640px;
	height: auto;
}



#logoPrzypinkiPl{
	position:absolute;
	}
	
#logoPrzypinkiPl:hover{
	opacity:0.8;
}

div.headerKontakt  {
	text-align: right;
	color: Crimson;
}

form.kontakt input, form.kontakt textarea {
	display:block;
	width:100%;
	margin-bottom:0.5rem;
}

form.kontakt input {
	max-width: 20rem;	
}

.headerPrawy {
	max-width: 50vw;
	margin-top: 15px;
	float: right;
	display: flex;
	justify-content: right;
	flex-wrap: wrap;
}

#zakresy, #dodatkowy_napis, #myZakresIlosci, #myFiltrPokaz, #myDodatkowyNapis, #myPodkladkaMagnetyczna, #czy_podkladki_magnetyczne {
	width: 100%;
	background-color: DarkRed;
	color: white;
	font-size:1rem;
}

#myFiltrPokaz {
	width: 50%;	
}


select {
  background-color: transparent;
  background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
  border: none;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.75rem;
  cursor: pointer;
  text-align-last: center;
  margin: 0 0 0.2rem 0 ;
}

.wybrano, .personalizacja, .powtarzalny_napis, .bez_dodatkowego_napisu {
  background: linear-gradient(DarkGreen, Green 0.25rem, DarkGreen 1.0rem);	
}

@keyframes dimBackground {
    0%, 100% {
        filter: brightness(1.1); /* Pełna jasność */
    }
    50% {
        filter: brightness(0.9); /* Pełna jasność */
    }
}

.pulsowanie {
    animation: dimBackground 0.5s infinite; /* Animacja ściemniania */
//    font-weight: bold; /* Wytłuszczenie tekstu */
}


.cennik_wiersz_wyrozniony {
	background:LightYellow;
}

.buttonTwojKoszyk,
.buttonLogowanie {
	padding: 12px 12px 12px 50px;
	color: LightCoral;
	border-radius: 0.25rem;
	border: 1px solid LightPink;
	margin: 0 1rem 1rem 1rem;
	background-size: auto 50%;
	background-position: 0.5rem 45%;
	background-repeat: no-repeat;
	transition-duration:0.15s;
}

.buttonTwojKoszyk {background-image: url(../ikona_koszyk.svg);}
.buttonLogowanie {background-image: url(../ikona_logowanie.svg);}

.buttonTwojKoszyk a,
.buttonLogowanie a {
	color: LightCoral;
}

.buttonTwojKoszyk a:hover,
.buttonLogowanie a:hover {
	text-decoration: underline;
	color: Crimson;
}

aside {
	float:left;
	margin:0 0 25px;
	}

.menuMobilneIkonki {
	margin: 20px 0 10px 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	list-style-type: none;
}

.menuMobilneIkonki img{
	width: 25px;
	height: 25px;
}

.menuMobilneIkonki ol {
	list-style-type:none;
	display:none;
}

.menu-trigger, .submenu_grafika-trigger, .submenu_cenniki-trigger, .trigger {
	cursor:pointer;
}


div.gdzieJestem{
	color: Crimson;
	width: 100%;
	box-sizing:border-box;
	display: flex;
	padding:8px 0px;
	margin: 0 0 0.5rem 0;
}

div.gdzieJestem img {
width: 0.9rem;
height: auto;	
}

div.gdzieJestem a,
.mobileGdzieJestem a {
	color: lightcoral;
	font-weight: normal;
	text-decoration: none;
}

.lewyGdzieJestem li,
.mobileGdzieJestem li {
	color: Red;
	font-weight: bold;
	display:inline;
	font-size: 0.8rem;
	padding-left: 10px; /* Ustawienie odstępu z lewej strony */
}

.lewyGdzieJestem li::before,
.mobileGdzieJestem li::before {
  content: "\00BB"; /* Ustawienie znaku jako punktora */
  padding-right: 5px; /* Odstęp między znakiem a tekstem */
  color: lightcoral;
}

.lewyGdzieJestem li:first-child::before,
.mobileGdzieJestem li:first-child::before {
  content: none; /* Usunięcie punktora z pierwszego elementu */
}

.lewyGdzieJestem a:hover,
.mobileGdzieJestem a:hover {
 text-decoration: underline;
}

.lewyGdzieJestem a,
.mobileGdzieJestem {
	margin-top:0;
	text-decoration:none;
}

.wybierakSrednica input,  .wybierakSrednica p {
	color: Crimson;
	width: 45px;
	height: 45px;
	border: 1px solid LightPink;
	border-radius: 0.25rem;
	margin: 0.05rem;
	background-color: White;
}


.wybierakSrednica p {
	width: 45px;
	height: 43px;
	color: Crimson;
	line-height:43px;
	border: 1px solid Red;
	font-weight: bold;
}

.wybierakSrednica button {
	color: Crimson;
	background:none;
	padding:0;
	width: 45px;
	height: 45px;
	border: 1px solid LightPink;
	border-radius: 0.25rem;
	margin: 1px;
	text-align:center;
	font-size: 1rem;
}

/*
.wybierakSrednica button:hover:not[niedostepnyRozmiar] {
	border: 1px solid Crimson;
	filter: grayscale(0%);
}
*/

.wybierakSrednica button.niedostepnyRozmiar,
.wybierakSrednica button.klikniety {
  cursor: default;
}

.wybierakSrednica button.klikniety {
	border: 1px solid Crimson;
	filter: grayscale(0%);
	font-weight: bold;
	white-space:pre;
}

.mm button.klikniety::after {
  content: "\Amm";
}

.wybierakSrednica p.niedostepnyRozmiar,
button.niedostepnyRozmiar {
	color: DimGrey;
	border: 1px solid DimGrey;
	text-decoration: line-through;
	font-weight:normal;
}



.cennikPow500 {
  display:none;
}

#guzikPow500 {
  cursor: pointer;
}

.prawyGdzieJestem a {
	border: 1px solid LightPink;
	border-radius: 0.25rem;
	margin: 0.2rem;
	padding: 0.5rem;
	text-decoration: none;
}

.wybierakTylPrzypinki {
	margin-bottom: 0.25rem;
}

.wybierakTylPrzypinki a {
	opacity: 0.5;
}

.opacity_50proc{
	opacity: 0.5;
}

.wybierakTylPrzypinki a:hover{
	opacity: 1;
}

.prawyGdzieJestem a:hover, .wybierakSrednica a:hover {
	border: 1px solid DarkRed;
	color: DarkRed;
}

.prawyGdzieJestem a.wybrany {
	color: White;
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	border-radius: 0.25rem;
	border: 0;
	padding: calc(0.4rem + 1px) calc(0.6rem + 1px);
	margin: calc(0.2rem + 1px);
}

.wybierakSrednica a.wybrany{
	color: Crimson;
	border: 1px solid Red;
}

.wybierakSrednica a.niedostepny{
	color: LightGray;
	border: 1px solid LightGray;
	text-decoration: line-through;
}

.wybierakTylPrzypinki > img {
	width: 50px;
	height: 50px;
	border: 1px solid Red;
	border-radius: 0.25rem;
	opacity: 1;
}

.wybierakTylPrzypinki a>img {
	width: 50px;
	height: 50px;
}

.taStrona{
	color: White;
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	border-radius: 0.25rem;
	padding: calc(0.4rem + 1px) calc(0.6rem + 1px);
	margin: calc(0.2rem + 1px);
}

#main {
	width: 100%;
	float:right;
	margin:0 0 25px;
	}

article {
 clear: both;
 margin-bottom: 2rem;
}
article ul, 
article ol {
	padding: 0.5rem 0 0 3rem;
}


article ul li,
article ol li{
	padding: 0.1rem 0 0.1rem 0;
	list-style-position:outside;
}

section, .ramka {
	border-radius: 0.25rem;
	border: 1px solid LightPink;
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

section ul, ol {
	padding-left: 1.5rem;
}

footer {
	color: White;
	clear: both;
	padding: 2rem;
	background-color: DarkSlateGrey;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align:left;
}

footer h2, footer h3 {
	color: White;
	margin-bottom: 1.5rem;
}

footer h3 {
	margin:0;
}

footer div {
	margin-bottom: 5rem;
	}

footer a {
	color: White;
	text-decoration:none;
}

#czerwonaGwiazdka {
	font-weight: bold;
	color: Crimson;
}

.czerwonaGwiazdka {
	font-weight: bold;
	color: Crimson;
}

.zielony {
	color: Green;
}

label.gwiazdka::before {
  content: "* ";
}

#main > form {
	margin: 0;
}

form {
	color: DimGray;
	padding: 0px;
	margin: 0.5rem;
	display:block;
}

.formularz2023 {
	padding: 0.5rem;
	max-width: 600px;
	background: WhiteSmoke;
}

form.formularz2023 div {
	background: silver;
	display:flex;
	justify-content: space-between;
	width: 100%;
}

form.formularz2023 div label{
	background: white;
	padding-left: 0rem;
	padding-right: 1rem;
}

.formularz2023 input:required {
  border-color: Coral;
}

label:has(input[required])::before,
label:has(textarea[required])::before {
    content: "* ";
    color: red;
    font-weight: bold;
}


form.formularz2023 input[type="text"],
form.formularz2023 input[type="email"],
form.formularz2023 input[type="password"],
form.formularz2023 input[type="tel"] {
	width:inherit;
	display: block;
	line-height: 1.7rem;
}



button, a.guzik, #submit, #oblicz, .przelicz {
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	border-radius: 0.25rem;
	border: 0;
	text-decoration:none;
	color: White;
	cursor: pointer;
	margin: 0.5rem;
	padding: 0.85rem;
	transition-duration:0.15s;
}

#oblicz, .przelicz {
	font-size: 1.1rem;
	padding: 0.6rem 0.7rem;
}

.filtrRodzProd ul {
	border-radius: 0.25rem;
  	border: 1px solid LightCoral;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	list-style-type: none;
	margin-bottom: 1rem;
}

.filtrRodzProd ul>li,
.filtrRodzProd ul>li>form,
.filtrRodzProd ul>li>form>button {
	margin: 0 0.2rem;
}

	

.guzik2021, .guzik_p24, .wiedza ul>li>a, 
form.formularz2023 button, .noweTwojeProjekty input[type="submit"] {
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	border-radius: 0.25rem;
	border: 0;
	font-size: 1rem;
	text-decoration:none;
	color: White;
	cursor: pointer;
	padding: 1rem;
	transition-duration:0.15s;
	line-height: 4rem;
	white-space: nowrap;
}

.polecamyRowniez a {
	margin: 0.25rem;
}

form.formularz2023 button {
	line-height: 1.5rem;
}

.guzik_p24zielony, .guzik_rodzaje_zielony {
	background: linear-gradient(DarkGreen, Green 0.25rem, DarkGreen 1.0rem);
    padding: 1rem; /* Odstęp tła od tekstu z każdej strony */
    color: yellow; /* Ustawia kolor tekstu na żółty */
}

.wiedza ul {
	padding: 0;
	list-style-type: none;
}

.wiedza ul>li {
	text-align: center;

}

input.guzik2021, button.guzik2021 {
	line-height: 2rem;
}

.filtrRodzProd ul>li>form>button {
	margin: 0.35rem 0rem;
	line-height: 1.2rem;
}


#doKoszyka, #doKoszykaAlert {
	transition-duration:0.15s;
}

button:hover,
a.guzik:hover,
a.guzik2021:hover,
#oblicz:hover,
#doKoszyka:hover,
#doKoszykaAlert:hover,
#gotoweWzory ul li a:hover, #faqNav ul li a:hover {
	filter: grayscale(100%);
}







form p {
	width: 100%;
	text-align: right;
}

form.szukaj {
	margin-top: 0.65rem;
	max-width: 250px;
	padding: 0px;
}

form.szukaj p{
	font-size: 0.7rem;
	margin: 0;
}

form.szukaj input, form.szukaj textarea {
	width: 8rem;
	padding: 0.3rem;
	vertical-align:top;
}

form.szukajMobile input, form.szukaj textarea {
	width: 80%;
	padding: 0.3rem;
	vertical-align:top;
}

form input.lupka {
	width: 1.7rem;
	height: 1.7rem;
	background:
	url(../lupka1.svg) no-repeat, White;
	background-size: auto 95% , auto 100% ;
	border: 0.05rem solid LightPink;
	margin: 0;
	float:none;
	cursor: pointer;
}

li.brutto_netto {
	padding: 2px 15px 7px 15px;
	background: #600;
}

li.brutto_netto label {
	color: White;
	display:block; 
	float:none;
	font-size:1rem;
	cursor:pointer;
	background: #600;
}

li.brutto_netto:hover {
	filter: grayscale(100%);
}

li.brutto_netto input{
	float: right;
	position: relative;
	top: 0.5rem;
}

label {
	font-size: 0.9rem;
	float: right;
	width: 99%;
	margin: 0px;
	padding: 5px 0px 0px;
	cursor:pointer;
}

input::placeholder {
  color: #999;
  font-style: italic;
}

input.ukryj_placeholder::placeholder {
  color: transparent;
}


input, textarea {
	font-size: 0.9rem;
	border: 1px solid LightPink;
	border-radius: 0.2rem;
	margin: 0 0 0 0.3rem;
	padding: 0.18rem;
	display: inline;
}

textarea {
	width: 100%;
	display: block;
}

input.check {
 margin-top: 5px;
 padding: 0;
 border-width: 0px;
}

legend {
	font-size: 0.9rem;
	font-weight: bold;
	color: DarkRed;
	margin: 0;
}

form input.kontakt {
	width: 65%;
}


form textarea {
	height: 10rem;
	vertical-align: top;
}

form.tresc_dodatkowy_napis textarea,
#trescDodatkowyNapis {
	height: 3rem;
	margin: 0;
	width: calc(99% - 0.2rem);
	max-width: 40rem;
}



ul.elastyczneSety {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	list-style-type: none;
	padding: 0;
}

ul.elastyczneSety li {
	flex: 1 300px;
	padding: 0.5rem;
}

fieldset, .polecamyRowniez {
	border-radius: 0.5rem;
	border: 1px solid LightPink;
	margin: 0 0 1rem 0;
}

fieldset {
	padding: 1rem;
}

fieldset ol, fieldset ul {
	margin: 0 0 1rem 1rem;
}




#wybierz_rodzaj_platnosci label,
#wybierz_forme_dostawy label {
	margin: 0.5rem;
}

label:has(input:disabled) {
    color: lightgrey; /* Zmienia kolor tekstu labela, jeśli zawiera disabled input */
}

#wybierz_rodzaj_platnosci label:hover,
#wybierz_forme_dostawy label:hover {
	background: whitesmoke;
}

#wybierz_rodzaj_platnosci input[type="radio"],
#wybierz_forme_dostawy input[type="radio"] {
	margin-right: 1rem;
}

input[type="radio"] {
  accent-color: black;
}


.uwaga {
	background: linear-gradient(#FFE, #FF9);
}

#baner100proc, #baner50proc 
 {
	position:relative;
	width: auto;
	height:3.0rem;
	line-height:3.0rem;
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	overflow:hidden;
	color: White;
}

#baner100proc {
	width: 100%;
}

#baner50proc {
	width: 50%;
}

#baner100proc > p,
#baner50proc > p {
	font-size: 1rem;
	position:absolute;
	margin:0;
	white-space:nowrap;
 	animation:przesun 20s linear infinite;
}

.baner2021 {
	margin: 0 auto 2rem auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	text-decoration:none;
	border: 1px solid LightPink;
	border-radius: 0.5rem;
    overflow:hidden;
}

a.baner2021:hover{
	text-decoration:none;
}

.baner2021 img {
	width: 64%;
	max-width: 720px;
	height: auto;
}

.baner2021 div {
	margin: auto;
	padding: 0.5rem;
}

.baner2021 h2, .baner2021 h3 {
	color: White;
	text-align: center;
	margin: 0.25rem;
}

.baner2021 img {
	flex-grow: 2;
}

#rejestracja {
	margin-bottom: 1rem;
}


@keyframes przesun
{
 0% { transform:translateX(0); padding-left:105%; }
 100% { transform:translateX(-100%); padding-left:105%; }
}

.lista_prod {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
}



.lista_prod a {
	width: 185px;
	text-align: center;
	box-shadow: 2px 2px 10px Silver;
	border-radius: 0.25rem;
	font-size: 0.8rem;
	color: DimGrey;
	padding: 0.75rem 0.3rem;
	margin: 0.2rem;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.lista_prod h2 {
	color: Black;
	font-size:0.9rem;
	min-height: 35px;
	margin: 0;
	font-weight: normal;
}

.lista_prod img {
	float: none;
	margin: 0.25rem 0;

}

@media (max-width: 460px) {
	.lista_prod li {width: calc(50% - 1.25rem);}
	.lista_prod img {width: calc(100% - 2px);}
}

.productKontenerek {
	display: flex;
	flex-direction: column;
}

.productKontenerekObrazICennik {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
   justify-content: space-between; /* Rozmieszczenie elementów na krawędziach */
}

.productKontenerekObraz {
	text-align: center;
	margin-bottom: 10px;
	flex-grow: 1;
}

.archiwum > h1, .archiwum > h2 {
	color: Black;	
}

.productKontenerekObraz h1 {
	font-size: 1.5rem;
	margin:0;
}

.productKontenerekObraz > h2 {
	font-size: 0.9rem;
	font-weight: normal;
}

.productKontenerekObraz > img {
  max-width: 100%;
  height: auto;
}

.productKontenerekObraz form {
	margin: 0;
	max-width:none;
}

.productKontenerekCennik {
	max-width: 100%;
	text-align: center;
	margin-bottom: 10px;
	flex-grow: 1;
}

.productKontenerek li {
	padding: 2px;
}

table.cennik, table.koszyk, table.suma_koszyk  {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 3rem;
}

table.cennik div {
	margin:0;
}

table.cennik tr.niewidoczny{
	display:none;
}

table.cennik tr.promo td:nth-child(2),
td.promo,
label.promo {
	color: Crimson;
}

table.cennik tr.promo td:nth-child(3),
td.promo + td,
del {
	color: DimGrey;
	text-decoration: line-through;
}

table.cennik input[type="text"],  table.koszyk input[type="text"]{
	text-align: right;
	width: 3.5em;
}

table.cennik input[type="submit"], table.koszyk input[type="submit"] {
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	color: White;
	border: none;
	cursor:pointer;
	margin: 0.5rem;
}

table.cennik caption, table.koszyk caption {
	margin-top: 1.5rem;
	color: #8E0401;
	font-weight: bold;
	font-size: 1rem;
}

#main table.cennik:first-child caption {
	margin-top: 0;
}

table.cennik td {
	min-width: 5rem;
	text-align: center;
	padding: 4px;
}

table.cennik th {
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	color: White;
	padding: 5px 2px;
}

table.cennik th.bezGradientu {
	background: DarkRed;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #BB2F00;
}

table.cennik th.bezGradientu a {
 color:#FF0;
}

table.cennik th.bezBorderu {
	border:none;
}


table.cennik tfoot {
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
}

table.cennik tr{
	border-bottom: 1px solid LightCoral;
}

table.historiaZakupow tr {
	border: none;
}

table.historiaZakupow tr:nth-child(6n) {
	border-bottom: 1px solid LightCoral;
}

table.historiaZakupow td {
	text-align:right;
}

table.historiaZakupow td:nth-child(2n) {
	text-align:left;
}

table.historiaZakupowProdukty {
	border: 1px solid LightCoral;
}

.doPrawej{
	text-align: right;	
}

.doSrodka{
	text-align: center;
}

.doLewej{
	text-align: left;	
}

.bezPogrub{
	font-weight: normal;
}

table.koszyk, table.suma_koszyk {
	margin-left:auto;
	margin-right: auto;
	max-width: 35rem;
	vertical-align: middle;
	border: none;
}


table.suma_koszyk {
	text-align: right;
}

table.suma_koszyk td:nth-child(2n){
	width: 6rem;
}

table.koszyk tbody {
	border-bottom: solid 1px MistyRose;
}

table.koszyk tbody  tr:first-child td {
	padding-top: 2rem;
}

table.koszyk tbody  tr:last-child td {
	padding-bottom: 2rem;
}


table.suma_koszyk #doZaplaty {
	font-weight: bold;
}

.uwagi, #uwagi{
	background-color: MistyRose;
}

table.cennik td.noBorder{
	border: 0px;
}

table.koszyk td {
  text-align: center;
}

table.cennik a, table.koszyk a {
	color: DarkRed;
	text-decoration:none;
}

table.cennik tfoot a {
	margin: 1rem;
	line-height: 1.5rem;
}

table.cennik a:hover, table.cennik a:active, table.koszyk a:hover, table.koszyk a:active {
	color: DarkRed;
	text-decoration:underline;
}

#platnosc_i_wysylka { 
	color:Black;
}

#platnosc_i_wysylka label {

	margin-bottom: 0.5rem;
}

#platnosc_i_wysylka span{
    display: inline-block;
    margin-left: 2rem;
}

#platnosc_i_wysylka label:first-line {
	padding-left: 13rem;
}

form.wyborZakresu table {
	min-width: 10rem;
	border-collapse: collapse;
	margin-bottom: 1rem;
}

form.wyborZakresu td {
  text-align: left;
}

form.wyborZakresu td:first-child {
  width: 1rem;
}

div.staraCena {
	color: Grey;
	text-decoration: line-through;
}

div.staraCena + div {
	color: Crimson;
}

#srednice {
	color: yellow;
	padding: 0.5rem;
}

#srednice ul {
	margin-top: 1rem;
	width: 100%;
	list-style-type: none;
	display: flex;
	flex: 1 300px;
	flex-wrap: wrap;
	justify-content: center;
}

#srednice li{
	min-width: 48px;
	min-height: 48px;
}

#srednice li a:link, #srednice li a:visited{
	min-width: 158px;
	min-height: 158px;
	font-weight: bold;
	color: White;
	text-decoration: none;
}

#srednice li a:hover, #srednice li a:active {
	text-decoration: underline;
	color: Yellow;
}


div.box {
	border: 1px solid Red;
	margin: 1rem 0;
	box-sizing:border-box;
	padding: 0;
}

div.box h2 {
	background: linear-gradient(DarkRed, Red 0.25rem, DarkRed 1.0rem);
	padding: 0.3rem;
	font-size: 0.9rem;
	color: White;
	font-weight: bold;
	margin: 0;
}

div.box div {
	display: flex;
	justify-content: space-between;;
	flex-wrap: wrap;
	padding: 0.3rem;
}

.regulamin {
	border:none;
	column-gap: 3rem;
	column-width: 30rem;
	text-align:justify;
}


.regulamin ul li, .regulamin ol li{
	margin-left: 1rem;
}

.error, .komunikat {
	font-size: 1rem;
	background: LightYellow;
	border-radius: 0.5rem;
	padding: 2rem;
}

.LightYellow {
	background: LightYellow;
}

.error a, .komunikat a {
	color: DarkRed;
}

nav a, nav div {
background: #A00;
}

nav em { /*cyferki*/
	font-size: 70%;
	padding-left: 0.5rem;
	font-style: normal;
}

.bezRamki {
  border:none;
}

.ukryty,
p + q {  /* ceny brutto i netto*/
  display:none;	
}

#gotoweWzory ul li ul {display:none;}
#gotoweWzory ul li ul.menuRozwiniete {display:block;}

#gotoweWzory ul li ul li ul {display:none;}
#gotoweWzory ul li ul li ul.menuRozwiniete {display:block;}

.dziobek {background: url(/_skiny/default_pl/dziobek.svg) no-repeat 95% 50%, #A00;}
.dziobek_info {background: url(/_skiny/default_pl/dziobek.svg) no-repeat 95% 50%, #600;}
.dziobek_str_glowna {background: url(/_skiny/default_pl/dziobek_l.svg) no-repeat 95% 50%, #600;}

#cenniki a, 
#grafika a,
nav > ul> li:nth-last-of-type(-n+6) a {
	display:block;
	text-decoration:none;
	background: #600;
}

nav > ul > li > ul > li > a,
nav > ul > li > ul > li > div {padding-left: 2rem; filter: brightness(130%);}
nav > ul > li > ul > li > ul > li > a,
nav > ul > li > ul > li > ul > li > div {padding-left: 3rem; filter: brightness(160%);}
nav > ul > li > ul > li > ul > li > ul > li > a,
nav > ul > li > ul > li > ul > li > ul > li > div {padding-left: 4rem;}
nav a.klikniety {font-size: calc(115%);}
nav a, nav div {color: White;}

.container_p24 {width: 800px; margin: auto;}

@media (min-width: 800px) {
	header {width: 100%; height: 120px;}
	ul.mobNaglowek  {display: none;}
	.container {max-width: 1470px; margin: 0 10px;}
	aside {width: 300px; }
	#main {width: calc(100% - 350px);}
	.menu-trigger,.menuMobilneIkonki {display:none;}
	#gotoweWzory, #faqNav {display:block !important;}
	#faq01, #faq02, #faq03, #faq04, #faq05, #faq06, #faq07, #faq08, #faq09, #faq10, #faq11, #faq12, #faq13, #faq14, #faq15, #faq16, #faq17, #faq18, #faq19, #faq20, #faq21, #faq22, #faq23, #faq24, #faq25, #faq26, #faq27, #faq28, #faq29, #faq30, #faq31, #faq32, #faq33, #faq34, #faq35, #faq36, #faq37, #faq38, #faq39, #faq40, #faq41, #faq42, #faq43, #faq44, #faq45, #faq46, #faq47, #faq48, #faq49, #faq50, #faq51, #faq52, #faq53, #faq54, #faq55, #faq56, #faq57, #faq58, #faq59, #faq60, #faq61, #faq62, #faq63, #faq64, #faq65, #faq66, #faq67, #faq68, #faq69, #faq70, #faq71, #faq72, #faq73, #faq74, #faq75, #faq76, #faq77, #faq78, #faq79, #faq80, #faq81, #faq82, #faq83, #faq84, #faq85, #faq86, #faq87, #faq88, #faq89, #faq90, #faq91, #faq92, #faq93, #faq94, #faq95, #faq96, #faq97, #faq98, #faq99 {display:none;}
	nav ul {list-style:none;}
	nav ul li {margin-bottom:1px;}
	nav a, nav div {display:block; padding:7px 15px;}
	nav a:hover {text-decoration:none;}
	.mobileGdzieJestem {display:none;}
	div.gdzieJestem{justify-content: space-between;}
	form.szukajMobile {display:none;}
	.prima li, .grafikaWymiary li {width: calc(50% - 1.6rem); min-width:400px;}
	.prima img{width: 300px; height: 300px;}
	footer div{max-width: 30%;}
}

@media (min-width: 1510px) {
	.container {max-width: 1470px; margin: 0 auto;}
	.productKontenerekObraz {max-width: 55%;}
	.productKontenerekCennik {max-width: 40%;}
}

@media (max-width: 1230px) {
	.prima li, .grafikaWymiary li {width: 100%; border-radius: 0; border:none; border-top: 1px solid LightGrey;}
	.prima li:last-child, .grafikaWymiary li:last-child {width: 100%; border-radius: 0; border:none; border-top: 1px solid LightGrey; border-bottom: 1px solid LightGrey;}
	.guzik_p24, .guzik_p24zielony {font-size: 250%; line-height:5rem;}
	.container_p24 {width: calc(100vw - 50px); line-height: 3rem; margin:auto;}
}

@media (max-width: 800px) {
	#main > h1, #main > h2, #main > h3, #main > h4,
	#main > p,
	#main > ul,
	#main > li,
	.mrg
	{width:92%; margin-left:auto; margin-right:auto;}
	ul.mobNaglowek {padding-top: 0; width: 100%; display: flex; justify-content: space-between;}
	ul.mobNaglowek li{list-style-type:none;}
	ul.mobNaglowek li:nth-of-type(2) {margin-right: 0.7rem; margin-top: 0.5rem;}
	ul.mobNaglowek li a{text-decoration: none; 	color: Green; 	font-weight: bold; font-size: 125%; letter-spacing: -0.8px;}
	div.headerKontakt  {display: none;}
	header {width: 100%; margin: 0%;}
	.container {width: 100%;}
	aside {width:100%; }
	img.prod_cart { max-width: 70%;}
	.polecamyRowniez > a > img {width: 30%; height:auto;}
	.lista_prod img { width: 90%; }
	.menu-trigger {display:block;}
	form.szukaj {display:none;}
	#gotoweWzory, #grafika, #cenniki {display:none;}
#faq01, #faq02, #faq03, #faq04, #faq05, #faq06, #faq07, #faq08, #faq09, #faq10, #faq11, #faq12, #faq13, #faq14, #faq15, #faq16, #faq17, #faq18, #faq19, #faq20, #faq21, #faq22, #faq23, #faq24, #faq25, #faq26, #faq27, #faq28, #faq29, #faq30, #faq31, #faq32, #faq33, #faq34, #faq35, #faq36, #faq37, #faq38, #faq39, #faq40, #faq41, #faq42, #faq43, #faq44, #faq45, #faq46, #faq47, #faq48, #faq49, #faq50, #faq51, #faq52, #faq53, #faq54, #faq55, #faq56, #faq57, #faq58, #faq59, #faq60, #faq61, #faq62, #faq63, #faq64, #faq65, #faq66, #faq67, #faq68, #faq69, #faq70, #faq71, #faq72, #faq73, #faq74, #faq75, #faq76, #faq77, #faq78, #faq79, #faq80, #faq81, #faq82, #faq83, #faq84, #faq85, #faq86, #faq87, #faq88, #faq89, #faq90, #faq91, #faq92, #faq93, #faq94, #faq95, #faq96, #faq97, #faq98, #faq99 {display:none;}

	nav ul {list-style:none;}
	nav ul li {margin-bottom:1px;}
	nav a, nav div {display:block;font-size:14px;font-weight:700; padding:12px 20px;}
	nav a:hover {text-decoration:none;}
	#logoPrzypinkiPl {display: none;}
	.buttonTwojKoszyk {display: none;}
	.headerPrawy {max-width:none;}
	.buttonLogowanie {	background:none;	margin: 0;}

.buttonLogowanie a {
	text-decoration: none;
	color: LightCoral;
}
	div.gdzieJestem{justify-content: center;}
	.lewyGdzieJestem {display:none;}
	.prima a img{max-width: calc(100% - 5rem); height: auto;}
	.productKontenerekObraz>img { max-width: 250px; height:auto;}
	.baner2021, 
	section, 
	.ramka {border-radius: 0; border-left:none; border-right:none;}
	footer {display: block;}
	footer a {line-height: 3;}
	.pc {display:none;}
	.scrolling-wrapper, .wybierakTylPrzypinki {max-width: 100vw;}
}

@media (max-width: 400px) {
body {font-size:14px;}
}