article, footer, header, main, nav, section { display: block;}
body, table, td, tr, img, h1, h2, h3, h4, p, div, form, main, nav  {margin: 0; padding: 0; text-indent:0; border:0} 

/* OGÓLNE */
body {position: relative; font-family: Arial, sans-serif; color: #444; background: #fff; font-size:16px; }
a {text-decoration:none;}
a:link,a:visited { color:#c00;}
a:hover,a:active { color: #4eabf0; }
.do_lewej {float:left; margin: 0 10px 0 0}
.do_prawej {float: right; margin: 0 0 0 10px}

.clear {clear:both; height:1px; width: 100%}
/* li {   text-indent:0;  padding:0px; margin: 0px 0px 7px 15px;text-align:left;font-size: 1.0em;  line-height:1.1em;	}
ul { padding:0px; margin: 0px 0px 5px 10px; list-style-type: square;} */
.cien { box-shadow: 2px 0px 12px #000; -webkit-box-shadow: 2px 0px 12px #000; -moz-box-shadow: 2px 0px 12px #000;}

/* ---  CZARNY NAGŁÓWEK  --- */
#TOP_ZEWN  {  background: #323232;  }
#TopWEWN  {  position: relative; height:40px; min-width: 320px; max-width:1170px; color:#fff; background: #323232;  margin: 0 auto; }
/* #TopWEWN .logo {float: left; display:inline-block; color:#5d9837; font-size: 20px; line-height:40px;} */
#TopWEWN span {font-weight: bold; color: #fff;}

									#miarka {background: #5d9837; font-size: 5px; line-height: 5px; height: 5px;}
#TopWEWN > a.tel {display:table-cell; color:#eee; font-size: 17px; line-height: 40px;}
#TopWEWN > a.fb {position: absolute; left:180px; top:4px; }
#TopWEWN img {vertical-align: middle;}
.logo {margin: 0}

/* ==  MENU GÓRNE - blok == */
#NAW_ZEWN  {}
#NawWEWN  {  position: relative; height:100px; min-width: 320px; max-width:1170px; color:#5d9837;background: #fff; margin: 0 auto; }
#NawWEWN .logo {float: left; display:inline-block; color: #5d9837;}
 
/* BANER */
#BANER_ZEWN  {}
#BanerWEWN  {min-width: 320px; max-width:1920px; margin: 0 auto}
#Baner  {position: relative; display:block;  width:100%; min-height:195px; vertical-align: middle; padding: 0}
#Baner  img{margin:0; max-width: 100%!important; min-height:195px; display:block; height: auto; width: auto } 

/* NAGLOWEK */
#NAGLOWEK_ZEWN  {clear:both;}
#NaglowekWEWN  {color: #777; background:  #fff; min-width: 300px; max-width:1170px; margin: 0 auto; text-align: center;  }
#NaglowekSrod  {display: block; width:50%; text-align:center; padding: 14px 14px 14px 14px;  margin: 30px auto 20px;	border-top: #4eabf0 1px solid; border-bottom: #4eabf0 1px solid;   font-family: Impact, sans-serif; font-size: 28px;  line-height: 36px;  }
#NaglowekSrod span {color: #4eabf0;  font-weight: normal; }
#NaglowekSrod i {color: #777; font-family:  'Comic Sans MS', serif;  font-weight: normal;font-size: 16px;  line-height: 16px;  }
/* BLOK 1  teksty*/
#BLOK1_ZEWN  {clear:both;}
#Blok1WEWN  {color: #323232; background:  #fff; min-width: 320px; max-width:1600px; min-height:170px; margin: 20px auto; font-family: Tahoma, sans-serif; font-size: 14px;  line-height: 20px; }
#Blok1WEWN h3 {color: #323232; text-align: center; font-size: 22px;  line-height:36px; font-weight: normal; }
#Blok1WEWN a {display:block; color: #777; }
#Blok1WEWN a:hover, #Blok1WEWN a:hover > h3 {color: #4eabf0; }
#Blok1Lewy  {display:table-cell; width:33%; vertical-align: text-top; vertical-align: top; text-align: center; padding: 42px 14px 0px 28px}
#Blok1Srod  {display:table-cell;  width:34%; width: 500px; vertical-align: text-top; vertical-align: top; text-align: center; padding: 42px 14px 14px 14px}
#Blok1Prawy {display:table-cell; width:33%; vertical-align: text-top; vertical-align: top; text-align: center;padding: 42px 28px 0px 14px}

/* BLOK 2 - obrazki */
#BLOK2_ZEWN  {clear:both;}
#Blok2WEWN  {color: #323232; background:  #fff; min-width: 300px; max-width:1600px; margin: 0 auto; text-align:center;}
#Blok2Lewy, #Blok2Srod, #Blok2Prawy  {display: inline-block; width:32.5%; padding:0; margin: 0;}

/* BLOK 3 - Najlepsze promocje - obrazki */
#BLOK3_ZEWN  {clear:both;}
#Blok3WEWN  {color: #323232; background:  #fff; min-width: 300px; max-width: 1600px; margin: 0 auto; text-align:center;}
#Blok3Lewy,#Blok3Prawy  {display: block; float: left; width:49.5%; padding:0 2px; margin: 0;}

/* BLOK 4 - Dział techniczny  - obrazki */
#BLOK4_ZEWN  {clear:both;}
#Blok4WEWN  {color: #323232; min-width: 320px; max-width:1600px; margin: 0 auto;  padding:0 0 4px 0; text-align:center;}
#Blok4LG, #Blok4PG, #Blok4LD, #Blok4PD, #Blok4SG, #Blok4SD  {display: inline-block; width:32.3%; padding: 0;  margin: 4px 0; text-align:center;}
#Blok4WEWN img {border: #aaa 1px solid;}
/* SKALOWANIE + PRZEXROCZYSTOŚĆ OBRAZKÓW */
#Blok2WEWN img, #Blok3WEWN img, #Blok4WEWN img, #ZawWEWN img  {display:inline-block; margin:0 auto; max-width: 100%!important; height: auto; width: auto }
#Blok2WEWN img:hover, #Blok3WEWN img:hover, #Blok4WEWN  img:hover  {opacity:0.7; filter: alpha(opacity=70);}

/* BLOK VIDEO */
#BLOK_V_ZEWN  {clear:both;}
#Blok_V_WEWN  { color: #323232; text-align:center;  min-width: 300px; max-width:1170px; margin: 0 auto;  padding:4px 0; text-align:center;}
#Blok_V_WEWN  img {display:block; margin:0 auto; max-width: 100%!important; height: auto; width: auto }
#Blok_V  {display: block; padding:0; margin: 0 auto;background: transparent;}
#Blok_V iframe, .BlokV2 iframe {max-width: 100%!important;}

.BlokFoto3 {display: inline-block; width:31%; padding:7px; margin: 7px 0; text-align:center;}
.BlokTxt2 {  padding: 21px 0; margin: 0; font-size: 16px;  line-height:21px;}
.BlokV2 { display: inline-block; float:left; margin: 7px 21px 21px 7px;}

#BLOK_filmy { text-align:center;}
#BLOK_filmy img {display: inline-block; width:295px; height: 166px;}
#BLOK_filmy a { display: inline-block; position: relative; margin:7px; color: #777; font-size: 14px;  line-height:20px;}
#BLOK_filmy a:hover { color:  #4eabf0;}
#BLOK_filmy> a > div {position: absolute; left:0; top:0; width:295px; height: 166px; background:url(grafiki/video_of.png) no-repeat center;}
#BLOK_filmy> a > div:hover {background:url(grafiki/video_on.png) no-repeat center;}
/* BLOK LOGA - Najlepsze promocje - obrazki */
#LOGA_ZEWN  {clear:both;}
#LOGA_Wewn  {color: #323232; background:  #fff; min-width: 300px; max-width: 1600px; margin: 0 auto; text-align:center;}
#loga_prod {display:table-cell; margin: 10px auto; vertical-align: middle; text-align:center; }
#loga_prod img {max-width:150px; max-height: 80px;vertical-align: middle; margin: 4px;opacity:0.5; filter: alpha(opacity=50); } 
#loga_prod  img:hover  {opacity:1; filter: alpha(opacity=100);}
.kreska {width: 70%; height:14px; margin: 14px auto 0; border-top: #ccc 1px solid;   }
/* BLOK INFO */
#INFO_ZEWN  {clear:both; background: #444; border-top: #777 3px solid;}
#InfoWEWN  { min-width: 320px; max-width:1170px;  min-height: 170px; margin: 0px auto; text-align: center;  font-size: 14px;  line-height: 24px; }
#InfoLZ, #InfoLW, #InfoPW, #InfoPZ  {display:table-cell; width: 25%; vertical-align: text-top; vertical-align: top; color: #aaa; text-align:left; padding: 14px 28px 14px 14px; margin: 0; font-family: Tahoma,  Verdana, Helvetica, sans-serif;}
#InfoWEWN h3 {color: #fff; text-align: left; font-family: Impact, sans-serif; font-weight: normal;  font-size: 22px;  line-height:36px; }
#InfoWEWN a {display: block; color: #aaa; font-size: 14px; line-height:36px;}
#InfoWEWN a:hover { color: #fff; }

/* ZAWARTOŚĆ */
#sciezka {padding: 0 7px; height: 50px; font-size: 13px; line-height: 36px;}
#ZAW_ZEWN   {clear:both; background:  #F5F5F5;}
#ZawWEWN,  #ZawWEWNglowna{ min-width: 320px; max-width:1170px;  min-height: 400px; margin: 0px auto; font-size: 16px;  line-height: 24px; }
#ZawWEWN h3 {color: #777; text-align: left; font-size: 24px;  line-height:48px; font-weight: normal; }

#ZawLewyPodstr  {display:inline-block; width: 15%;}
#ZawSrodPodstr    {display:inline-block; vertical-align: middle;  color: #444; text-align:left; padding: 0 0 14px 0; margin: 0 auto; width: 70%; }
#ZawSrodPodstr img {display:inline-block; max-width: 100%!important; height: auto;}
#ZawPrawyPodstr { display:inline-block; width: 10%; }

#dostawa_id,  #dostawa_id option { font-size: 13px;  line-height: 30px; height: 30px }
.in_block {display:inline-block;}
/* techniczne */
.big {font-size: 20px;line-height: 27px; margin:2px}
#roczniki { padding : 0 0 21px 0; margin:0 auto;}
#roczniki a {display:block; color: #333; background: #ddd;  padding : 0 0 0 4px;text-align:center; }
#roczniki a:hover {color: #fff; background: #777; } 
#roczniki td { border: #bbb 1px solid;  margin: 2px; text-align:center;  font-size: 14px;  line-height:24px;}
#roczniki td > a { text-align:left; padding : 0 4px 0 4px;}

#roczniki_lista { padding : 0 0 21px 0; margin:0 auto;width: 280px; text-align:center;}
#roczniki_lista a {display:block; color: #333; background: #ddd; padding: 4px 0 4px 4px; text-align:center; border: #777 1px solid; border-radius: 7px; 	-moz-border-radius: 7px; 	-webkit-border-radius: 7px; }
#roczniki_lista a:hover {color: #fff; background: #777; } 
#oleje {width:55%; text-align:left;}
#oleje a {display:block; color: #333; background: #ddd; padding: 4px 0 4px 14px; text-align:left; border: #777 1px solid;  }
#oleje a:hover {color: #fff; background: #777; } 
/* === TOWAR ========================= */
#Towar {display:inline-block; margin: 0 auto; width: 100%; min-width: 320px; color: #777; font-size: 14px;  line-height:20px;}
a.powrot {float:right; color: #4eabf0;  font-weight: bold; }
a.powrot:hover {color: #777;} 
a.usun { color: red; background: #ffd0d0; border: solid 1px red; padding: 4px 4px; text-decoration: none; 
			margin-left:5px; border-radius: 7px; 	-moz-border-radius: 7px; 	-webkit-border-radius: 7px; font-size: 11px; line-height: 24px;}
a.usun:hover { color: #fff; background: red; }

a.zapytaj {display:block; color: #fff;  background: #777; line-height: 40px; }
a.zapytaj:hover { color: #fff; background: #4eabf0; }

#OpisBox { display:inline-block; margin:7px 0; padding: 0 0 0 21px;  width: 60%; max-width: 600px;}
#OpisBox h1 {display:inline-block; color: #777;  font-size: 18px; line-height:24px; font-family: Roboto, lato, sans-serif;}
#OpisBox div.kreska {height: 21px; margin:  21px 0 0 0; border-top: #fff 1px solid;}
#OpisBox input.dokoszyka { display: inline-block; width: 100%; min-width: 40px; height: 40px;border: #eee 1px solid; margin:0; background: #fff url(grafiki/dokoszyka.png) no-repeat center;}
#OpisBox input.dokoszyka:hover {background: #ccc url(grafiki/dokoszyka.png) no-repeat center; cursor: hand  }
#OpisBox input {  text-align:center; }
#FotoBox {display:inline-block; float:left;  margin:7px 0; width: 37%; max-width: 320px;}
#FotoBox img {display:block; max-width: 100%!important; height: auto; border: solid 1px #ddd; }
/* #FotoBox img.m { display:block; max-width: 100%!important; height: auto;}  */
#FotoBox div { display:inline-block; float:left; width: 31%; max-width: 100px; padding: 7px 7px 0 0; }

.formularz {font-size: 13px; line-height: 18px; color: #565456; text-align:left}
.formularz_p {font-size: 12px; line-height: 15px; color: #565456; text-align:right}

.pole {font-family: Arial; font-size: 13px;  line-height: 20px; border: solid 1px #777;}
.pole1 {font-size:13px; background-color: #ddd; }

.tab_l {padding: 2px; background: #fff; color:#000; border: solid 1px #ccc; text-align:left; font-size: 12px; line-height: 16px;}
.tab_s {padding: 2px; background: #fff; color:#000; border: solid 1px #ccc;  text-align: center; font-size: 13px; line-height: 18px; height: 40px; }
.tab_p {padding: 2px 4px; background: #ddd; color:#000; border: solid 1px #ccc; text-align: center; font-weight: normal; font-size: 12px; line-height: 16px;}
.tab_c {padding: 2px 4px; background: #aaa; color:#fff; border: solid 1px #ccc; text-align:center; font-weight: normal; font-size: 14px; line-height: 18px;}

.us  { color:red; padding:1px 2px 1px 2px; margin: 0px ; border: solid 1px red; background: #FFD0D0;text-align:center;  font-size: 13px; line-height: 18px}
.dodaj {font-size: 12px;  line-height: 18px; border: #555 2px solid; background: #777; color:#fff}
.dod { padding:1px 2px 1px 2px; margin: 0px ; border: solid 1px green; background-color: #E0FFE0;text-align:center}
.ok {COLOR:green; FONT-WEIGHT: bold;}

input.zaplac { display:inline-block; color:#fff; background: #4eabf0;  font-size: 14px;  line-height: 16px;  padding: 7px 12px 7px 12px; border-radius: 20px; 	-moz-border-radius: 20px; 	-webkit-border-radius: 20px; }
input.zaplac:hover {color:#fff; background:#444 ; }

#PASEK_ZEWN  { height:30px; background: #323232 ; }
#PasekWEWN  {  min-width: 320px; max-width:1170px; color: #fff; margin: 0 auto; text-align:center; font-size: 14px;  line-height:30px;}
#PasekWEWN h3 {display:inline-block; color: #aaa; font-size: 14px;  line-height:30px;}

/* ===  PRODUKTY  LISTA ===== */
/* stronicowanie */
#stronicowanie {min-height:36px; border-top: #ccc 1px solid; margin: 14px 7px; text-align: right;  font-size: 13px;  line-height:24px; }
#stronicowanie input, #stronicowanie form {display: inline-block; border-radius: 3px; padding: 0;  margin: 0; }
#stronicowanie input.nr { width: 30px; height: 30px; background: #fff; border: #777 1px solid;  margin: 4px 0 0 0; font-size: 14px;  line-height:30px;}
#stronicowanie input.nr:hover { background: #4eabf0; border:#4eabf0 1px solid;}
#stronicowanie nav {/* text-align: right; */ display:inline-block;}
.str {display: inline-block; text-align:center;  width: 30px;  color: #4eabf0;  font-weight: bold; /* text-decoration:underline;  */}

/* wyświetlanie - klocki/ lista */
#uklad {padding: 0 0 0 14px;}
#uklad input, #uklad form  { display: inline-block; width: 35px; height: 35px; background: #000; border: 0; margin:0; }
#uklad input.klocki { background: #000 url(grafiki/klocki.gif) no-repeat center;}
#uklad input.klocki:hover, #uklad input.klocki_active {background: #4eabf0 url(grafiki/klocki.gif) no-repeat center;cursor: hand  }
#uklad input.lista { background: #000 url(grafiki/lista.gif) no-repeat center;}
#uklad input.lista:hover, #uklad input.lista_active {background: #4eabf0 url(grafiki/lista.gif) no-repeat center;cursor: hand  }

/*  układ klockowy */
#lista_ofer {display:block; width:100%;  margin: 0px auto;text-align: center; }
#lista_ofer a {display: inline-block; position: relative;  color: #444; vertical-align: text-top; vertical-align: top; border:  #ccc 1px solid;
 width:23.7%; min-width: 180px; min-height: 240px; text-align: center;  padding:21px 0 7px 0;  margin:0px 12px 12px 0px;   font-size: 14px;  line-height:18px;
  background: linear-gradient(#fff  67%, #eee); 	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } 
 #lista_ofer a:hover { color:  #4eabf0;  background: linear-gradient(#fff  67%,  #e5f4ff);   border: #4eabf0 1px solid;} 
#lista_ofer h3 {display:block; text-align:center; color: #777; width: 97%; height:44px;  font-weight: bold; font-size: 14px;  line-height:20px; }
#lista_ofer a:hover h3 {color: #4eabf0;}
#lista_ofer img {display: block; border: 1px solid #fff; margin: 14px auto;  max-width: 160px; max-height:110px;}
#lista_ofer p {text-align: center; color: #777; margin: 7px 12px 4px 12px;  font-size: 13px;  line-height:16px;}
#lista_ofer span.cena {display: inline;  color: #4eabf0;  text-align:center;line-height:32px; }
.cena { color: #4eabf0; white-space:nowrap;}
.old {color: #aaa; font-size: 15px; font-weight: bold; text-decoration: line-through; margin-left:1px}

/*  układ lista */
#lista_ofer_poz { width:97%;  margin: 0px auto; text-align:left; }
#lista_ofer_poz a {display: block; position: relative;  color: #444; vertical-align: text-top; vertical-align: top; border:  #ccc 1px solid;
 width:99%; min-width: 300px; min-height: 120px; text-align: left;  padding:14px 0 0 0;  margin:0px 14px 7px 7px;   font-size: 14px;  line-height:18px;
  background: linear-gradient(#fff  67%, #eee); 	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } 
 #lista_ofer_poz a:hover { color:  #4eabf0;  background: linear-gradient(#fff  67%,  #e5f4ff);   border: #4eabf0 1px solid;} 
#lista_ofer_poz p {text-align: left; color: #777; margin: 12px 12px 4px 12px;  font-size: 13px;  line-height:16px;}
#lista_ofer_poz img {display: inline-block; float:left; border: 1px solid #fff; margin: 3px 14px;  max-width: 160px; max-height:110px;}
#lista_ofer_poz h3 {display: table-cell; vertical-align: middle;  text-align:left; color: #777; width: 100%; height:44px; font-weight: bold; font-size: 14px;  line-height:20px; }
#lista_ofer_poz a:hover h3 {color: #4eabf0; text-align:center;}

.p24 {display:block; margin:0 auto; max-width: 100%!important; height: auto; width: auto }

.wstopce {width: 100%; position: absolute; bottom:10px; text-align:center;}
a.sgl {color: #777; font-size: 14px;}
a.sgl:hover {color: #aaa}

/* ---- 1070px ------------- */
 @media all and (max-width:1070px) 
{
#Blok4LG, #Blok4PG, #Blok4LD, #Blok4PD, #Blok4SG, #Blok4SD  {display: inline-block; width:49.5%; padding: 0;  margin: 4px 0; text-align:center;}
#lista_ofer a {width:31%;  }
#oleje {width:64%; text-align:left;}
} 

/* ---- 960px ------------- */
 @media all and (max-width:960px) 
{
#oleje {width:77%; text-align:left;}

#ZawLewyPodstr  {  width: 10%}
#ZawSrodPodstr  { }
#ZawPrawyPodstr { width: 10%}
} 

/* ---- 820px ------------- */
 @media all and (max-width:820px) 
{
 #miarka {background: blue;}
 #lista_ofer a {width:48%;  }
 #oleje {width:97%; text-align:left;}
} 

/* ---- 777px ------------- */
 @media all and (max-width:777px) 
{

#NawWEWN  { display:block; height:140px;  }
#NawWEWN .logo { position:absolute;  left: 0px; top: 40px; ;}
 /* Blok tekstowy */
#Blok1Lewy, #Blok1Srod, #Blok1Prawy    {display: block;  width: 90%; height: auto; min-width: 320px; padding: 0 14px 0 14px; margin: 14px 0;}
 /* Blok2 - 3 obrazki */
 
#Blok2Lewy, #Blok2Srod, #Blok2Prawy   {display: inline-block;  width: 90%; height: auto; min-width: 320px; padding: 0 14px 0 14px; margin: 7px auto }
 /* Blok3 - 2 obrazki */
#Blok3Lewy, #Blok3Prawy  {display: block;  width: 90%; height: auto; min-width: 320px; padding: 0 14px;  margin: 0 0 14px 0; }
 /* Blok4 - Dział techniczny2 obrazki */
#Blok4LG, #Blok4PG, #Blok4LD, #Blok4PD, #Blok4SG, #Blok4SD  {display: block;  width: 100%; height: auto; min-width: 320px; padding: 0; }

/* #ZawLewyPodstr  {display:inline-block; width: auto; min-width: 320px; max-width:460px; padding: 0 14px 0 14px; }
#ZawSrodPodstr  {display:inline-block; width: auto; min-width: 320px; max-width:460px; padding: 0 14px 0 14px;}
#ZawPrawyPodstr {display:inline-block; width: auto; min-width: 320px; max-width:460px; padding: 0 14px 0 14px; } */

#StopLewy  {display:inline-block; height: auto;  width: auto; min-width: 320px; max-width:460px; padding: 0 14px 0 14px; }
#StopSrod  {display:inline-block; height: auto;  width: auto; min-width: 320px; max-width:460px; padding: 0 14px 0 14px; }
#StopPrawy {display:inline-block; height: auto;  width: auto; min-width: 320px; max-width:460px; padding: 0 14px 0 14px; }

#PASEK_ZEWN{ height:auto; font-size: 14px; line-height:20px;  }

#ZawLewyPodstr, #ZawPrawyPodstr  {  display: none; }
#ZawSrodPodstr  { display: block; width:90%; margin: 0 auto }

#OpisBox { display: block; margin:7px auto; width: 97%; max-width: 600px;}
#FotoBox {display: block; float:none; margin:7px auto; width: 97%; max-width: 400px;}

.BlokFoto3 {display: block; float:none; margin:7px auto; width: 97%; max-width: 540px;}
.BlokTxt2 { display: block;  margin:7px auto; width: 97%;  }
.BlokV2 {display: block; float:none; margin:7px auto; width: 97%; max-width: 650px;;}
}

/* ---- 640px ------------- */
 @media all and (max-width:640px) 
{
 #oleje td {width:97%; display: block; text-align:left;}
 /* Blok INFO -  */
#InfoLZ, #InfoLW, #InfoPW, #InfoPZ   {display: inline-block;   height: auto; min-width: 140px; padding: 7px 7px }
}

/* ---- 600px ------------- */
 @media all and (max-width:600px) 
{
 #lista_ofer a {width:90%;  }
#ZawSrodPodstr    { width: 98%; }
}

/* ---- 500px ------------- */
 @media all and (max-width:500px) 
{
 #miarka {background: green;}
 #TopWEWN  {  position: relative; height:80px; }


}