

/* kolor tla strony, tekstu na stronie oraz rozmiaru marginesu */
BODY { font-size:1.4em; font-family:'DM Sans', fallback-font, Arial; margin:0; font-weight:normal; color:#fff; background-color: #000; background-image: url("/images/bg-kola-zebate-1.webp") ; background-repeat: no-repeat; background-position: center; background-size: cover;}



/* definiowanie wygladu szablonu */
#Strona, .Strona { margin:0 auto; overflow:visible; position:relative; max-width:100%; }

/* szerokosc strony oraz ilosc kolumn w listingach */  
@media only screen and (max-width:479px) { 
  #Strona, .Strona { width:95% !important; } 
 img { max-inline-size: 80%; block-size: auto; object-fit: cover; object-position: top center;} 
}
@media only screen and (min-width:480px) and (max-width:1023px) { 
  #Strona, .Strona { width:95% !important; } 
}  
@media only screen and (min-width:1024px) and (max-width:1279px) { 
  #Strona, .Strona { width:1000px; } 
}  
@media only screen and (min-width:1280px) { 
  #Strona, .Strona { width:1200px; }
}
@media only screen and (min-width:1600px) { 
  #Strona, .Strona { width:1200px; }
}

/* kontener calej strony */
.CalaStrona { position:relative; overflow:hidden; width:100% !important; margin-top: 35%); transform: translateY(55%); }
/*
.CalaStronaTlo::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; display:block; background-color:#000; z-index:102;  background-image: url("images/bg-kola-zebate-1.webp") ;
 background-repeat: no-repeat;
background-position: top center;
background-size: cover;} 

*/

.Strona .Strona { width:auto; }

/* naglowek sklepu */
.Naglowek { position:relative; overflow:visible; text-align: center; flex:0 0 auto ; position:relative; max-width:100%;}

/* szybkie linki naglowka */
.SzybkieLinki ul { list-style-type:none; padding:5px 0 5px 0; margin:0; } 
.SzybkieLinki li { display:inline-block; vertical-align:top; }
.SzybkieLinki li a { display:inline-block; margin:5px 20px 5px 0; }
@media only screen and (max-width:799px) {
  .SzybkieLinki ul { text-align:center; }
  .SzybkieLinki li a { margin:5px 10px 5px 10px; }
}

/*** elementy wspolne ***/

/* ogolny wyglad linkow */
a { text-decoration:none; color:var(--kolor-glowny-czcionki-tk-1); font-weight:normal; transition:all 0.30s ease-in-out; }
a:hover { text-decoration:none; color:var(--kolor-szablonu-tk-1); }




/* ikonki przesuwania strony gora - dol */
#doGory { position:fixed; right:20px; bottom:140px; z-index:10; cursor:pointer; width:35px; height:35px; background:url('../szablony/tk-shop.rwd.v2/obrazki/szablon/strzalka_w_kolku_gora.svg') no-repeat; background-size:35px 35px; opacity:0.4; display:none; }
#doDolu { position:fixed; right:20px; bottom:100px; z-index:10; cursor:pointer; width:35px; height:35px; background:url('../szablony/tk-shop.rwd.v2/obrazki/szablon/strzalka_w_kolku_dol.svg') no-repeat; background-size:35px 35px; opacity:0.4; display:none; }

/*** wyglad czesci srodkowej ***/

/* preloader strony */
#Preload { display:none; position:fixed; width:100%; height:100%; top:0; left:0; z-index:99999; background:var(--kolor-szary-ciemny-2); opacity:0.5; }
#StatusTlo { display:none; position:absolute; left:50%; top:50%; background:var(--kolor-szary-ciemny-2); margin:-64px 0 0 -64px; }
#IkonaLoader { background:url('../szablony/tk-shop.rwd.v2/obrazki/nawigacja/loader_strony.gif') no-repeat center center; width:128px; height:128px; }

