@charset "UTF-8";
:root {
  --niebieski: black;
  --szary: #404040;  
  --bg-color: #ffffff; /* KOLOR TŁA SAJTA */
  --tx-color: #242424; /* KOLOR TEKSTU */
  --tx-mobis: 23px; /* WIELKOŚĆ MOBILNA TEKSTU*/
  --tx-mobim: 18px; /* WIELKOŚĆ MOBILNA TEKSTU tam gdzie pomniejszyć */
  --czcionka: 'Open Sans', sans-serif;
  --szerokosc: 1600px;
  --wielkosc: 16px;
  --wielkoscmobi: 16px;
  /* DO SUKIENEK BĘDZIE :) */
  --nietenniebieski: #0066cc;
  --nietenniebieskibcg: rgba(0,102,204,0.1);
  --tenniebieski: #363636;
  --tenniebieskibck: rgba(38,38,38,0.1); */
  --wagaczcionki: 300;
}

::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}

a {color: black; text-decoration: none;}
.produkt-nad-galeria {display: block; width:100%; height: auto; margin: 10px;}
.produkt-galeria {display: flex; flex-wrap: wrap; justify-content: flex-start;flex-direction: row; width: 100%;}
@media only screen and (min-width: 1200px) {
 .product-pix-div {display: block; max-width: 18%; height: 180px; margin: 5px;}
}
@media only screen and (max-width: 1200px) {
 .product-pix-div {display: block; max-width: 90%; height: 150px; margin: 5px;}	
}
.product-pix-div img {
 max-height: 100%;
 margin: 0px;
 border: solid 1px silver;
 border-radius: 8px;
 -webkit-box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.45);
 -moz-box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.45);
 box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.45);
}
.topson {display: block; width: 100%; height: 400px;
  background-image: url('/images/mosty-napedowe.jpg');
  background-color: black;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
 }
 
.blok {padding: 0px;}
.inblok {display:block; border-left:solid 0px silver; width: 100%; padding: 0px;}
@media only screen and (max-width: 899px) {
 .blokmenu {display: none; border-left: 0;}
}
@media only screen and (min-width: 900px) {
 .blokmenu {border-left: solid 1px silver;}
}

.bloktresc {width:100%;padding-right: 10px;}

/*MENU i MEGAMENU*/
.flex-headmenu {display: flex; flex-wrap: wrap; flex-direction: row;position: relative; top: 0;height: 40px;}
.head-basket {display: inline-block; width: 40px; height: 40px;}
.head-search {display: inline-block; width: 40px; height: 40px;}
.head-menu {display: inline-block; width: 40px; height: 40px;}
.cowkoszyku {display: inline-block; position: relative; right: -20px; top: -5px; height: 18px; width: 18px; border-radius: 9px; background: var(--tenniebieski); color: white; font-size: 12px; line-height: 13px; text-align: center;padding-top: 2px;}
.cowkoszyku a {color:white;}
.head-lubieto {display: inline-block; width: 40px; height: 40px;}
.menu {background: white; padding-left: 10px;}
.menu a {}
.menu a:hover {color:var(--tenniebieski);}
.menu-item {width:99%;margin-top: 8px;}
.menu-nagl {width:99%;margin-top: 8px;}
.menu-nagl-jasny {color:silver;}
.menu-item:hover {position:relative; left:2px;border-bottom: solid 0.5px var(--tenniebieski);text-decoration: none !important;;}
.menu-item-jasny {width:99%;margin-top: 8px;color: silver;}
.menu-item-jasny a {color:silver;}
.megamenu {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0;
}
.menulewecat {font-family: var(--czcionka); font-size: 17px; font-weight: 100; position: relative; left: 8px;}

 /* MEGAMENU ILOŚĆ KOLUMN SZMATO!!! :) */
 @media only screen and (max-width: 599px) {.grupka {display: inline-block; width: 47%; margin: 5px;height: auto;}}
 @media only screen and (min-width: 600px) and (max-width: 899px) {.grupka {display: inline-block; width: 31%; margin: 5px;height: auto;}}
 @media only screen and (min-width: 900px) and (max-width: 1439px) {.grupka {display: inline-block; width: 23%; margin: 5px;height: auto;}}
 @media only screen and (min-width: 1440px) {.grupka {display: inline-block; width: 19%; margin: 5px;height: auto;}}

.grupa {display: block; color: white; font-weight: 100; background: var(--tenniebieski); width: 100%; padding: 8px; border-radius: 5px 5px 5px 5px;}
.subgrupa {font-size: 13px;}
.subgrupa:hover {color:var(--tenniebieski); text-decoration: underline;}
kafel {min-height: 150px;margin-bottom: 30px;}


/* WYSZUKIWARKA */
.button-search {position: relative; top: 8px; height: 25px;}

/*KARTA PRODUKTU*/
 /*KURWA NAJLEPSZA FUNKCJA EVER - NASTĘPNA i POPRZEDNIA KARTA */
 /* WERSJA U DOŁU
 .podkciukiem {display: flex; flex-wrap: no-wrap;width: 100%; position: fixed; bottom:0; height: 50px;z-index: 5600;}
 .podkciukiem-lewa   {width: 40%; text-align: center;color: white;padding-top: 11px; background: rgba(0,0,0,0.85); border-radius: 0 0 0 0;}
 .podkciukiem-srodek {width: 20%; text-align: center;color: white;padding-top: 11px; background: rgba(0,0,0,0.85); border-radius: 0 0 0 0;}
 .podkciukiem-prawa  {width: 40%; text-align: center;color: white;padding-top: 11px; background: rgba(0,0,0,0.85); border-radius: 0 0 0 0;}
 .podkciukiem-lewa a {color:white;}
 .podkciukiem-prawa a {color:white;}
 .podkciukiem-lewa img {position: relative; top: 2px;}
 .podkciukiem-prawa img {position: relative; top: 2px;}
 */
 /* WERSJA USZY */
 
 @media only screen and (max-width: 899px) {
 .podkciukiem {display: flex; flex-wrap: no-wrap;width: 100%; position: fixed; bottom:0; height: 55px;z-index: 5600; justify-content: center; background: rgba(0,0,0,0.95);
	-webkit-box-shadow: 0px 6px 10px 6px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 6px 10px 6px rgba(0,0,0,0.15);
    box-shadow: 0px 6px 10px 6px rgba(0,0,0,0.15);
 }
 .podkciukiem-lubie {width: 32%; text-align: center;color: white;padding-top: 11px; border-radius: 0 0 0 0;font-family: var(--czcionka); font-weight: var(--wagaczcionki);}
 .podkciukiem-rozmiar {width: 32%; text-align: center;color: white;padding-top: 11px; border-radius: 0 0 0 0;font-family: var(--czcionka); font-weight: var(--wagaczcionki); text-align: right;}
 .podkciukiem-itemsize {width: 80px; background: none !important; color: white; border: 0; font-family: var(--czcionka); font-weight: 100; font-size: 15px;}
 .podkciukiem-kupuje {width: 36%; text-align: center;color: white;padding-top: 11px; border-radius: 0 0 0 0;font-family: var(--czcionka); font-weight: var(--wagaczcionki);}
 .podkciukiem-but {background: none !important; border: none !important; color: white;font-family: var(--czcionka); font-weight: var(--wagaczcionki);} 
 .uszy-lewa  {display: inline-block; position: fixed; top: 230px; left: 0;  width: 45px; height: 80px; text-align: center; color: white; padding-top: 11px; background: rgba(0,0,0,0.35); border-radius: 0 50px 50px 0;z-index: 8000;}
 .uszy-prawa {display: inline-block; position: fixed; top: 230px; right: 0; width: 45px; height: 80px; text-align: center; color: white; padding-top: 11px; background: rgba(0,0,0,0.35); border-radius: 50px 0 0 50px;z-index: 8000;}
 .uszy-lewa a,.uszy-prawa a {color:white;}
 .podkciukiem-lubie span, .podkciukiem-kupuje span {position: relative; bottom: 5px; margin-left: 5px;}
 .uszy-imicz  {margin-left: 10px ;margin-right: 10px; margin-top: 4px; height: 50px !important; width: 25px !important;}
 .uszy-lewa img {position: relative; left: -6px;}
 .uszy-prawa img {position: relative; right: -6px;}
 
 /*zamiana kolejnosci atrybutów*/
 .desktop-walor {display: none !important;}
 }
 @media only screen and (min-width: 900px) {
  .podkciukiem, .podkciukiem-lewa, .podkciukiem-prawa, .podkciukiem-srodek, .uszy-lewa, .uszy-prawa, .podkciukiem-lubie, .podkciukiem-kupuje,.podkciukiem-lubie span, .podkciukiem-kupuje span {display: none;}
  /*zamiana kolejnosci atrybutów*/
  .mobil-walor {display: none !important;}
  .lubieto button {border: 0 !important; background: none !important; cursor: pointer !important;}
  .lubieto button span {position: relative; bottom: 5px; margin-left: 5px;}
 }
 .totop {position: fixed; bottom:0; left: 0; z-index: 5600; width: 50px; height: 55px; background: rgba(0,0,0,0.85); border-radius: 0 25px 0 0; padding: 12px;}
 .totop img {width: 35px; height: 35px;position: relative; left: -5px; bottom: 5px;}
 /* KONIEC PODKCIUKIEM, ale sie jaram! :)*/
 
.produktcaly {width: 100%; text-align: left;}
.breadcrumbs {display: block; color:gray; min-height: 30px; padding-top: 10px;}
.breadcrumb {color:#606060;; font-size: 14px; line-height: 24px; position: relative; top: -1px;text-transform: uppercase;text-decoration: underline solid 2px;; text-underline-offset: 5px;text-decoration-color: #C0C0C0;}
.breadcrumb:hover {color: var(--tenniebieski);text-decoration: underline solid 2px; text-underline-offset: 5px;text-decoration-color: var(--tenniebieski);}
.breadcrumbnejm {color:#c0c0c0; font-size: 14px;line-height: 24px; position: relative; top: -1px;text-transform: uppercase;}

.opis {margin-top: 40px;margin-bottom: 40px; line-height: 23px;}
.strajk {color: silver !important; font-size: var(--wielkosc) !important; text-decoration: line-through !important; wont-weight: normal !important;}
.funkcyjne {width: 100%;}
@media only screen and (max-width: 899px) {
 .produkt-handlowe {width: 100%;margin-top: 8px;}
 .produkt-obrazek {width: 100%;margin-top: 20px; text-align: center;}
}
@media only screen and (min-width: 900px) {
 .produkt-handlowe {width: 60%;margin-top: 20px;}
 .produkt-obrazek {width: 40%;margin-top: 20px;}
}
.itemsize {width: 40px; height: 25px; font-family: var(--czcionka); font-weight: 100; border: solid 1px silver; border-radius: 5px;}
.dokoszyka-mecha {width: 300px;}
.walor {margin-top: 7px;}
.walor-nazwa {display: inline-block; width:120px;}
.walor-wartosc {display: inline-block; width:160px;font-weight: var(--wagaczcionki);}
.produkt-cena-zlote {position: relative; top: 0px;font-size:41px; font-weight: bold; color:var(--tenniebieski);}
.produkt-cena-grosze {position: relative; top: 0px;font-size:21px; font-weight: bold; color:var(--tenniebieski);}
.produkt-cena-zlote-strajk {position: relative; top: 0px;font-size:35px; font-weight: normal; color:silver;text-decoration: line-through;font-style: italic;}
.produkt-cena-grosze-strajk {position: relative; top: 0px;font-size:18px; font-weight: normal; color:silver;text-decoration: line-through;font-style: italic;}
.produkt-obrazek img {
  border: solid 1px silver;
  border-radius: 8px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.45);
  box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.45);
}

.input-group-ilosc {border: solid 1px silver; border-radius: 3px;width:95px;margin-right: 16px;display:flex;flex-wrap: no-wrap;justify-content: space-between;}
.button-minus {height: 45px; width:20px;background: none;border:0;font-size: 26px;padding:0;}
.button-plus {height: 45px; width:20px;background: none;border:0;font-size: 26px;padding:0;}
.dokoszyka {margin-top: 20px;margin-bottom: 10px;}
.dokoszyka-ilosc {width: 45px; height: 45px; font-size: 26px; text-align: center;border:0; margin: 0;}
.dokoszyka-ilosc::-webkit-outer-spin-button,
.dokoszyka-ilosc::-webkit-inner-spin-button
{
 -webkit-appearance: none;
  margin: 0;
} 

.dokoszyka-button {width: 180px; height: 47px; font-size: 20px; border: solid 0px silver; margin-right: 10px; border-radius: 3px !important; background: var(--tenniebieski) !important; margin-top:0;color:white;padding:0;}
.dokoszyka-button:hover {opacity: 0.8;}

/*Koszyk*/
@media only screen and (max-width: 899px) {
 .paczkomaty-niewielki {width: 100%;}
 .tpay-niewielki {width: 100%;}
 .koszyk-image {height: 150px;}
}
@media only screen and (min-width: 900px) {
 .paczkomaty-niewielki {width: 100%;}
 .tpay-niewielki {width: 48%; align: center;margin: auto; max-width: 500px;}
 .koszyk-image {height: 80px;}
}
.koszyk-link {}
.koszyk-link:hover {color: var(--tenniebieski); text-decoration: underline;}

.koszyk-adresy {width:100%; display: flex; flex-wrap: wrap; }
.koszyk-adresy-lewa {text-align: left;padding: 8px;}
.koszyk-adresy-prawa {text-align: left;padding: 8px;}
.adr1 {width: 290px !important;}
.adr2 {width: 290px !important;}
.adr3 {width: 70px !important;}
.adr4 {width: 215px !important;}
.adr5 {width: 290px !important;}
.adr6 {width: 290px !important;}
input[type=radio] {border: solid 1px silver;margin: 5px;}
.transport {outline: none;font-family: var(--czcionka);font-weight: var(--wagaczcionki); font-size: var(--wielkosc);height: 30px;}
.transport span {position: relative; bottom: 0;left: 10px;}
.button-zapiszzam {display: inline-block; background: var(--tenniebieski); color: white; width: 290px; height: 40px; border: 0; border-radius: 5px;}
.button-zapiszzam:hover {opacity: 0.9;}

.paczkomat-picker[$location!=""]:after {display: none;}
label {display:block; position: relative; left: 10px; top: 0px; font-size: small; width: 48%;}
.tpay-logo {height: 80px !important; width: 120px !important;}
.rowkoszyka {display: flex; width: 100%; flex-wrap: wrap; padding-top: 15px; padding-bottom: 5px;border-bottom: solid 0.5px silver;}
.rowkoszykasum {display: flex; justify-content: flex-end; width: 100%;}

.input-group-ilosc-koszyk {border: solid 1px silver; width: 50px; border-radius: 3px;margin-right: 6px;display:flex;flex-wrap: no-wrap;justify-content: space-between; align: right;}
.button-minus-koszyk {display: inline-block; height: 25px; width:10px;background: none;border:0;font-size: 16px;padding:0;}
.button-plus-koszyk  {display: inline-block; height: 25px; width:10px;background: none;border:0;font-size: 16px;padding:0;}

.dokoszyka-ilosc-koszyk {height: 25px; width: 25px; font-size: 16px; text-align: center;border:0; margin: 0;}
.dokoszyka-ilosc-koszyk::-webkit-outer-spin-button,
.dokoszyka-ilosc-koszyk::-webkit-inner-spin-button
{
 -webkit-appearance: none;
  margin: 0;
} 

@media only screen and (min-width: 900px) {
 .colkoszyka {display: inline-block; padding: 5px;height: 100%;position: relative; top: 15px;}
 .colk1 {width: 15%;}
 .colk2 {width: 5%;}
 .colk3 {width: 45%;}
 .colk4 {width: 15%; text-align: right;}
 .zapiszzmiane {position: relative; top: -27px;left: 20px; background: var(--tenniebieski); color: white; border:0; border-radius: 5px; height: 27px;padding-left: 7px; padding-right: 7px;font-size: 14px;}	 
 .colk5 {width: 10%; text-align: right;}
 .colk6 {width: 10%; text-align: right;padding-right: 9px;}
 .sumakoszyka {width: 15%;text-align: right; font-size: 35px;}
 .sumakoszyka-tytul {width: 20%;height: 100%; vertical-align: bottom; text-align: right; font-size: 15px;}
}

@media only screen and (max-width: 899px) {
 .colkoszyka {display: inline-block; padding: 5px;height: 100%;}
 .colk1 {width: 90%; text-align: center;}
 .colk2 {width: 10%;text-align: right; color: silver;}
 .colk3 {width: 100%;}
 .colk4 {width: 50%; text-align: left;}
 .zapiszzmiane {position: relative; top: -27px; left: 70px; background: var(--tenniebieski); color: white; border:0; border-radius: 5px; height: 27px;padding-left: 7px; padding-right: 7px;font-size: 14px;}	 
 .colk5 {width: 50%; text-align: right;}
 .colk6 {width: 100%; text-align: right;font-size: 25px;}
 .sumakoszyka {width: 40%;text-align: right; font-size: 35px;}
 .sumakoszyka-tytul {width: 60%; text-align: right; font-size: 15px;}
}
#searchWidget {background: var(--tenniebieski) !important;border-radius: 7px 7px 0 0 !important;}
.search-input {border-radius: 5px 0 0 5px !important;}
.btn-search {border-radius: 0 5px 5px 0 !important;}
.tpay-header-wrapper {background: var(--tenniebieski) !important;border-radius: 7px 7px 0 0 !important;}
.tpay-header-belt {background: var(--tenniebieski) !important;}

.tpay-podsuma-platnosc {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; width: 100%; margin-bottom: 20px; margin-top: 20px; max-width: 500px;}
.tpay-podsuma-tytul {display: inline-block; width: 50%;text-align: left;}
.tpay-podsuma-wartosc {display: inline-block; width: 50%;text-align: right;}
.tpay-podsuma-tytul-plus {display: inline-block; width: 50%;border-top: solid 1px var(--tenniebieski);text-align: left;}
.tpay-podsuma-wartosc-plus {display: inline-block; width: 50%;text-align: right;border-top: solid 1px var(--tenniebieski);}
.tpay-podsuma-wartosc-plus a {font-size: 22px;}
.tpay-pay-button {background: var(--tenniebieski) !important; border-radius: 8px !important;}

/*OGÓLNE*/
html {scroll-behavior: smooth;}
.stopka {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between;}
.stopka-menu {display: block;text-align: left;margin-top: 30px; margin-bottom: 10px;color: white;text-decoration: none; min-width: 300px;}
.stopka-menu a {display: inline-block; color: white; height: 20px;margin-bottom: 10px;font-family: var(--czcionka) !important; font-weight: 300 !important;}
.stopka-menu a:hover {opacity: 0.8;text-decoration: none;margin-left: 2px;}
.stopka-partners {display:flex; max-width: 400px; flex-wrap: wrap; flex-direction: row; margin-top: 30px;}
.stopka-partners-opis {display: block; width: 100%; color:white; font-family: var(--czcionka); font-weight: var(--wagaczcionki);}
.partner_logo {width:60px;filter: grayscale(100%);}
.partner_logo:hover {filter: grayscale(0%);}
.partners_logo_wrap {width: 80px; height: 50px; background-color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; margin: 8px 12px 12px 0;}
.stopka-right {display: block;height: 100%; text-align: right;vertical-align: bottom; margin-top: 30px; margin-bottom: 10px;color: white;text-decoration: none; min-width: 300px; max-width: 100%; align: right; float: right;}
.stopka-right a {text-decoration: none; color:white;}
.social-links {position: fixed; top: 150px; right: 0; background: rgba(255,255,255, 0.7); width: 35px; height: auto;z-index: 20;border-radius: 0 4px 4px 0;}
.social-links  img {margin: 5px;}
@media only screen and (min-width: 900px) {
}
@media only screen and (max-width: 899px) {
 .stopka-right {margin-bottom: 50px;}
}

.fleks {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;}

/*WIDOK KATEGORII -ORAZ- PODOBNYCH -ORAZ- WAGONIK PROMEK*/
 /*Filtry*/
 #numID {border:0; width: 50px; padding-top: 7px; font-face: var(--czcionka); font-size: 18px; font-weight: var(--wagaczcionki);}
 .filtry {display:flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; width:100%; min-height: 50px; text-align: right;padding-top: 5px; padding-right: 22px;}
 .filtry-sortowanie {height: 35px; min-width: 10%; margin-right: 10px;}
 @media only screen and (min-width: 900px) {
  .filtry-cena {display: block; border: solid 1px silver; border-radius: 5px; height: 35px; width: auto; padding-top: 0; padding-left: 10px;  text-align: right; margin-right: 10px;} /* Zjebane na komórach */
 }
 @media only screen and (max-width: 899px) {
  .filtry-cena {display: none;}
 }
 .filtry-button {height: 40px; width: auto;}
 .filtry-button button {height: 34px; padding: 10px 10px 10px 10px; background: var(--tenniebieski); color: white; border:0; border-radius: 4px;}
 .filtry-button button:hover {opacity: 0.9;}
 .sortowanie {height: 35px; font-family: var(--czcionka); font-size: 19px; font-weight: var(--wagaczcionki); line-height: 22px; background: white; border-radius: 5px; border: solid 1px silver;}
 .sortowanie option {display: block; font-family: var(--czcionka); font-size: 19px; font-weight: var(--wagaczcionki); border-radius: 5px;}
 #rangeID {background-color: var(--tenniebieski);color: var(--tenniebieski)}
 /*Filtry koniec, ale jeszcze ten RANGE jest na końcu taki przesadzony ;) */ 
 
 /*PROMO*/
 #promo {
  color: white;
  width: auto;
  height: 36px;
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 200;
  padding-top: 7px;
  padding-left: 13px;
  padding-right: 13px;
  border-radius: 10px;
  margin-top: 0;
  margin-right: 0;
 }
 .promo {display: block; background: var(--tenniebieski); opacity: 0.9;font-face: var(--czcionka); font-weight: var(--wagaczcionki);}
 .nopromo {display: none;}
 .oznaczony {background: white !important;border: solid 1px var(--tenniebieski) !important;}
 /*KONIEC PROMO*/


.produkt-ticket {display:block; padding: 10px;text-align: center;border: solid 1px silver; background: white; border-radius: 10px; margin: 9px;}
.lubito {width: 100%; text-align: right; margin-right: 5px;font-family: var(--czcionka); font-weight: var(--wagaczcionki);}
.podobne-container {background: whitesmoke; border-top: solid 1px silver; border-bottom: solid 1px silver;padding-top: 15px; padding-bottom: 15px;justify-content: center !important;}
.promki-container {background: whitesmoke; border-top: solid 1px silver; border-bottom: solid 1px silver;padding-top: 15px; padding-bottom: 15px;justify-content: center !important;}
.start {justify-content: flex-start;}
.produkty-w-kategorii {justify-content: space-around;}
.pix {max-width: 90%; border: 0;}
.nazwa {height: 80px; font-size: 18px; line-height: 20px; vertical-align: middle; justify-content: center; align-items: center;font-family: var(--czcionka); font-weight: 100;}
.ilosc {color: silver;}
.cena {color: var(--tenniebieski); font-size: 22px;font-weight: 400;}

@media only screen and (max-width: 899px) {
 .produkt-ticket {width: 95%; max-width: 370px;}
 .produkt-promki-container {width: 90%;}
 .subkat-butson {display: inline-block; border: solid 1px silver; margin: 3px; padding: 10px; border-radius: 10px; background: white; width: 47%; font-size: 14px;min-width: 19%;}
}

@media only screen and (min-width: 900px) {
 .produkt-ticket {max-width: 300px; width: 21%; margin-bottom: 15px !important;}
 .produkt-promki-container {min-width: 200px; max-width: 17%;margin-bottom: 15px !important;}
.subkat-butson {display: inline-block; border: solid 1px silver; margin: 3px; padding: 10px; border-radius: 10px; background: white; min-width: 160px; font-size: 14px;min-width: 19%;}
}


.butson {display: inline-block; border: solid 1px silver; margin: 5px; padding: 9px 9px 9px 9px; border-radius: 10px; background: white;}
.subkaty {justify-content: start;}

.butson:hover,.subkat-butson:hover {background: var(--tenniebieski); color:white;}
.butson-ten {background: var(--tenniebieski); color:white;}

input[type=text], input[type=email], input[type=phone], textarea {height: 40px; border: solid 1px silver;border-radius: 5px;padding: 10px; width: 250px; margin-bottom: 5px; outline: none;font-family: var(--czcionka);font-weight: var(--wagaczcionki); font-size: var(--wielkosc);}
textarea {height: 80px; width: 250px}
input[type=submit] {color: white;}
input[type=submit]:hover {opacity: 0.8;}
.red {color: red !important;}

body {
  font-family: 'Open Sans', sans-serif;
  background:  var(--bg-color);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  overflow: auto;
}

@media only screen and (max-width: 899px) {
 .in-homebox {font-size: var(--wielkoscmobi);}
 .row {font-size: var(--wielkocmobi);}
 .stopkowo {font-size: var(--wielkocmobi); padding: 0;}
 .camera_caption_title {padding-top: 30px;}
}

@media only screen and (min-width: 900px) {
 .in-homebox {font-size: var(--wielkosc);}
 .row {font-size: var(--wielkosc);}
 .stopkowo {font-size: var(--wielkosc); padding: 0;}
 .camera_caption_title {padding-top: 70px;} 
}

.header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	width: 100%;
	top: 0;
	background: rgba(255,255,255,0.8);
	min-height: 70px;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 5000;
	-webkit-box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.15);
    box-shadow: 0px 10px 10px -6px rgba(0,0,0,0.15);
}
.footer {
   /* position: -webkit-sticky;
    position: sticky; */
    bottom: 0;
	width: 100%;	
	top: 0;
	background: black;
	min-height: 60px;
	padding-left: 15px;
	padding-right: 15px;
	opacity: 1;
	z-index: 10;
}

.topper {display: flex; max-width: var(--szerokosc);margin: auto; padding:0; justify-content: space-between !important;}
.topper-left {float: left;max-width: 40%;}
.logosek {display: inline-block; position: relative; top: 13px; left: 0px; background-image: url('/ico/arrowright.svg'); background-repeat: no-repeat; background-size: cover; filter: invert(20%) sepia(1%) saturate(982%) hue-rotate(314deg) brightness(84%) contrast(87%);}
.title {display: inline-block; max-width: 170px; color: black; font-family: 'Roboto', sans-serif; font-weight: 100;}

@media only screen and (min-width: 900px) {
 .logosek{width: 40px; height: 40px;}
 .title {font-size: 33px; line-height: 45px; position: relative; top: 6px; left: 10px;}
}
@media only screen and (max-width: 899px) {
 .logosek{width: 30px; height: 30px; margin-top: 0;}
 .title {font-size: 25px; line-height: 40px; padding-top: 8px; position: relative; top: 8px; left: 6px;}
}
.title a {text-decoration: none !important;}
.title a:hover {text-decoration: none !important;}
.topper-right {margin-top: 27px;padding-right: 5px;}
.topikona {width: 25px;margin-left: 15px;}
H1 {color: var(--tenniebieski); font-size: 31px;line-height: 33px !important;font-family: var(--czcionka); font-weight: 400 !important;padding: 0 !important;margin-top: 0;}
H2 {color: var(--tenniebieski); font-size: 27px;line-height: 40px !important;font-family: var(--czcionka); font-weight: 400 !important;padding: 0 !important;}
H3 {margin-top: 20px; font-size: 22px;font-family: 'Roboto', sans-serif; font-weight: 300 !important; margin-bottom: 0 !important;}
H5 {color: var(--hx-color);font-size: 40px;margin-top: 50px; margin-bottom: 25px;font-family: 'Roboto', sans-serif; font-weight: normal !important; width: 100%; border-bottom: solid 1px silver;z-index: 1;}
p {margin: 0 !important; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: var(--wagaczcionki);}
.container {max-width: 100vw; align: center; padding: 0; margin: 0;min-height: 300px;}
.row {max-width: var(--szerokosc); align: center;margin: auto; padding:0;}
.kontent {padding: 15px;}

/*MESSO z góry*/
.tresc {
 position: relative;
 top: -20px;
 font-family: 'Open Sans', sans-serif;
 text-align: left;
 font-size: var(--wielkosc);
 line-height: 25px;
 color: grey;
}

.alert-message  {
 position: relative;
 width: 300px;
 margin: auto;
 height: 200px;
 z-index: 12;
 border-radius: 5px;
 background-color: white;
 border: 1px solid silver;
 color: black;
 padding: 30px 0 0 0;
 font-family: 'Open Sans', sans-serif;
 text-align: center;
 font-size: var(--wielkosc);
 -webkit-animation: cssAnimation 5s forwards; 
 animation: cssAnimation 5s forwards;
 -webkit-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75);
 box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75); 
}
.close {display: none;}
.alert-heading {display: none;}

@keyframes cssAnimation {
    0%   {opacity: 1;position: fixed; top: -450px;}
    50%  {opacity: 1;position: fixed; top: 30px;}
	90%  {opacity: 1;position: fixed; top: 30px;}
    100% {opacity: 1;position: fixed; top: -530px;}
}

@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;position: fixed; top: -450px;}
	50%  {opacity: 1;position: fixed; top: 30px;}
    90%  {opacity: 1;position: fixed; top: 30px;}
    100% {opacity: 1;position: fixed; top: -530px;}
}
/* koniec MESSO z góry*/

/*KORMORAN*/
figure {
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
	border-radius: 7px;		
}

.produkt-ticket figure img, .pikczer figure img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.produkt-ticket figure:hover img, .pikczer figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
/*KONIEC KORMORANA*/

/* HARMONICA */
#harmo-content {
  margin: 0 0 0;
  * {
    box-sizing: border-box;
  }
}
.harmo-tab {
  position: relative;
  width: 100%;
  margin: 0 auto 0;
  opacity: 1;
}
.harmo-input {
  display: none;
}
.harmo-label:hover {
 cursor: pointer !important;
}
.harmo-input:checked ~ .harmo-content + .harmo-tab-content {
  height: 100%;
  max-height: 1000px;
}

.harmo-input:checked ~ .harmo-content:after {
  transform: rotate(0);
}
.harmo-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-height: 80px;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  z-index: 1;
  /*border-bottom: solid 0.5px var(--tenniebieski);*/
}
.harmo-label:after {
	  border-bottom: 0 !important;
}
.harmo-name {
  min-height: 30px;
  display: inline-block;
  text-align: left;
  padding: 0;
  width: 100%;
  color: var(--tenfiolet) !important;
}

.harmo-name H4 {
 color: var(--tenfiolet) !important;
}
.harmo-name img {
 position: relative !important;
 bottom: 2px !important;
}

.harmo-content + .harmo-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

.harmo-content > div,
.harmo-stat > div {
  display: inline-block;
  width: 100%;
  padding-top: 15px;
}
.harmo-tab-content-open {display: block !important;min-height: 200px !important;}

.sentiment-wrapper {margin-bottom: 20px;}
/* Harmonica koniec */

/* FILTRY SVG */
 .icongreen {filter: invert(62%) sepia(21%) saturate(1963%) hue-rotate(47deg) brightness(99%) contrast(106%);}
 .iconyello {filter: invert(94%) sepia(95%) saturate(2670%) hue-rotate(359deg) brightness(108%) contrast(101%);}
 .iconbeige {filter: invert(84%) sepia(77%) saturate(3751%) hue-rotate(328deg) brightness(98%) contrast(97%);}
 .iconbluey {filter: invert(33%) sepia(80%) saturate(2556%) hue-rotate(196deg) brightness(100%) contrast(110%);}
 .iconredis {filter: invert(15%) sepia(96%) saturate(7482%) hue-rotate(360deg) brightness(100%) contrast(106%);}
 .iconsalmo {filter: invert(51%) sepia(66%) saturate(2208%) hue-rotate(0deg) brightness(102%) contrast(106%);}
 .iconorang {filter: invert(47%) sepia(71%) saturate(1410%) hue-rotate(0deg) brightness(103%) contrast(104%);}
 .iconmagen {filter: invert(18%) sepia(86%) saturate(7489%) hue-rotate(325deg) brightness(105%) contrast(105%);}
 .icokermit {filter: invert(76%) sepia(40%) saturate(1158%) hue-rotate(38deg) brightness(104%) contrast(109%);}
 .iconnavy {filter: invert(19%) sepia(77%) saturate(2190%) hue-rotate(196deg) brightness(92%) contrast(101%);}
 .iconbleki {filter: invert(76%) sepia(4%) saturate(5589%) hue-rotate(183deg) brightness(103%) contrast(101%);}
 .iconlilak {filter: invert(49%) sepia(57%) saturate(3116%) hue-rotate(235deg) brightness(99%) contrast(106%);}
 .icongrayl {filter: invert(100%) sepia(0%) saturate(7476%) hue-rotate(230deg) brightness(72%) contrast(120%);}
 .icongraym {filter: invert(53%) sepia(0%) saturate(0%) hue-rotate(166deg) brightness(94%) contrast(80%);}
 .icongrayd {filter: invert(18%) sepia(11%) saturate(22%) hue-rotate(348deg) brightness(103%) contrast(80%);}
 .iconblack {filter: invert(0%) sepia(100%) saturate(1%) hue-rotate(313deg) brightness(100%) contrast(101%);}
 .iconwhite {filter: invert(100%) sepia(0%) saturate(7498%) hue-rotate(196deg) brightness(101%) contrast(88%);}
 .iconviole {filter: invert(15%) sepia(79%) saturate(5968%) hue-rotate(271deg) brightness(59%) contrast(118%);}
 .iconpizam {filter: invert(81%) sepia(36%) saturate(7450%) hue-rotate(150deg) brightness(99%) contrast(108%);}
 .tenfiolet {filter: invert(22%) sepia(59%) saturate(1520%) hue-rotate(219deg) brightness(99%) contrast(94%);}
 .tenbluuuu {filter: invert(31%) sepia(75%) saturate(6127%) hue-rotate(198deg) brightness(91%) contrast(101%);}
 .estabien {filter: invert(20%) sepia(1%) saturate(982%) hue-rotate(314deg) brightness(84%) contrast(87%);}
/* FILTRY SVG KONIEC */

/*RANGE ale chyba przesada ;D hahahaha :) */
input[type=range] {
  position: relative;
  top: -5px;
  margin: 0px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: rgba(121, 4, 85, 0.7);
  border: 0;
  border-radius: 1.3px;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -5px;
  width: 5px;
  height: 12px;
  background: #790455;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #920566;
}
input[type=range]::-moz-range-track {
  background: rgba(121, 4, 85, 0.7);
  border: 0;
  border-radius: 1.3px;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 5px;
  height: 12px;
  background: #790455;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  color: transparent;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #600344;
  border: 0;
  border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
  background: rgba(121, 4, 85, 0.7);
  border: 0;
  border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
  width: 1px;
  height: 12px;
  background: #790455;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(121, 4, 85, 0.7);
}
input[type=range]:focus::-ms-fill-upper {
  background: #920566;
}

/*TABSY DO WYSYŁEK */

.contentzakladki{
  width: 100%;
  min-height: 200px;
  margin: 0 auto;
  padding: 0px;
  margin-top: 20px;
}
.nav-pills{
  width: 100%;
}
.nav-item{
  width: calc(100% / 3);
}
.nav-pills .nav-link{
  font-weight: var(--wagaczcionki);
  padding-top: 12px;
  text-align: center;
  background: #E8e8e8;
  border-bottom: solid 0.5px silver;
  border-left: solid 0.5px silver;
  border-right: solid 0.5px silver;  
  color: gray;
  border-radius: 8px;
  height: 100px;
}
.nav-pills .nav-link.active{
  background: #fff;
  color: #000;
  border: solid var(--tenniebieski) 1px;
}
.tab-content{
  position: relative;
  width: 100%;
  height: auto;
  max-height: 900px;
  margin-top: -30px;
  background: #fff;
  color: #000;
  border-radius: 0 0 5px 5px;
  border-bottom: solid 1px var(--tenniebieski);
  border-left: solid 1px var(--tenniebieski);
  border-right: solid 1px var(--tenniebieski);
  z-index: 1000;
  padding: 15px;
  padding-bottom: 30px;
  margin-bottom: 20px;
  text-align: center;
}
/*TABSY DO WYSYŁEK - KONIEC */