body {
	background: #cccccc;
	text-align: center;
	color: #404040;
	font-family: Arial, sans-serif;
	font-size: 11pt;
}
div#page {
	max-width: 990px;
	width: 100%;
	margin: auto;
	text-align: left;
	background: #ffffff;
}
div#h {
	background: url(1.jpg);
	height: 150px;
	background-size: cover;
	background-position: left center;
}
div#p2 {
	height: 50px;
	background: url(2.jpg);
	background-size: cover;
}
div#p4 {
	height: 40px;
	background: url(4.jpg);
	background-size: cover;
	clear: both;
}
div#p6 {
	height: 20px;
	background: url(6.jpg);
	background-size: cover;
	clear: both;
}
div#m {
	height: 60px;
	background: url(3.jpg);
	background-size: auto 60px;
	background-repeat: repeat-x;
	clear: both;
}
div#c {
	
}

div#ci {
	height: 250px;
	background: url(5.jpg);
	background-size: cover;
	background-position: center;
}
div#s {
	min-height: 20px;
}
div#cont {
	width: 840px;
	margin: 10px 50px 10px 50px;
}
div#l {
	width: 280px;
	float: left;
	margin: 10px 0px 10px 0px;
}
div#r {
	width: 500px;
	float: left;
	margin: 0px;
	margin: 10px 0px 10px 60px;
}
div#both {
	clear: both;
	height: 1px;
}

img {border: 0px; vertical-align: middle;}
div#r img {
	max-width: 240px;
}
a {
	text-decoration: none;
	color: #404040;
}
a:hover {
	color: #ff0000;
}

h1 {
	text-align: right;
	margin-right: 10px;
	color: #132555;
	font-size: 14pt;
}

/* Etykieta "Produkty ···" w lewej kolumnie (dawny h1) */
div#l p.label {
	text-align: right;
	margin-right: 10px;
	color: #132555;
	font-size: 14pt;
	font-weight: bold;
	padding: 5px;
}

/* Tytuł produktu/kategorii w prawej kolumnie (dawny h6) */
div#r h1 {
	text-align: center;
	color: #0000ff;
	font-size: 14pt;
	font-family: ARIAL;
	margin: 5px 0;
}

/* Nagłówki sekcji w prawej kolumnie: "Dokumenty do pobrania" itp. (dawny h6) */
div#r h2 {
	text-align: center;
	color: #0000ff;
	font-size: 12pt;
	font-family: ARIAL;
	margin: 5px 0;
}

/* Linki do produktów i podtytuły w prawej kolumnie (dawny h4) */
div#r h3 {
	font-size: 11pt;
	font-weight: bold;
	margin: 3px 0;
}

h6 {
	text-align: center;
	
	color: #0000ff;
	font-size: 14pt;
	font-family: ARIAL; 

}

p.h7 {
	text-align: center;
	color: #0000ff;
	font-size: 12pt;
	font-family: ARIAL;
}
p.h8 {
	text-align: left;
	color: #0000ff;
	font-size: 10pt;
	font-family: ARIAL;
}
h3.c {
	text-align: center;
}

div#h h5 {
	font-family: VERDANA; 
	font-size: 12pt;
	padding: 10px;
}
div#h h5 a {
	color: #003399;
}
div#h h5 a:hover {
	color: #ff0000;
}



div#h h2 {
	font-size: 11pt;
	padding: 10px;
}
div#h h2 a {
	color: #132555;
}
div#h h2 a:hover {
	color: #ff0000;
}
div#h span {
	margin-left: 100px;
}

div#m h2 {
	margin: 0px;
	padding: 0px;
	height: 60px;
}
div#m h2, div#m img {
	float: left;
}
div#m span {
	display: none;
}
a h2#o {
	background: url(kontakt_n1.gif);
	width: 140px;
}
a:hover h2#o {
	background: url(kontakt_n2.gif);
}
a h2#p {
	background: url(produkty_n1.gif);
	width: 140px;
}
a:hover h2#p {
	background: url(produkty_n2.gif);
}
a h2#r {
	background: url(co_nowego1.gif);
	width: 100px;
	height: 0px;
}
a:hover h2#r {
	background: url(co_nowego2.gif);
}
a h2#pr {
	background: url(firma_n1.gif);
	width: 140px;
}
a:hover h2#pr {
	background: url(firma_n2.gif);
}




a h2#os {
	background: url(oferta1r.gif);
	width: 140px;
}
a:hover h2#os {
	background: url(oferta2r.gif);
}
a h2#ps {
	background: url(co_nowego1.gif);
	
}
a:hover h2#ps {
	background: url(co_nowego2.gif);
}
a h2#rs {
	background: url(realizacje1.gif);
	width: 140px;
}
a:hover h2#rs {
	background: url(realizacje2.gif);
}
a h2#prs {
	background: url(kontakt1r.gif);
	width: 140px;
}
a:hover h2#prs {
	background: url(kontakt2r.gif);
}





a h2#ou {
	background: url(oferta1u.gif);
	width: 140px;
}
a:hover h2#ou {
	background: url(oferta2u.gif);
}
a h2#pu {
	background: url(produkty1u.gif);
	width: 140px;
}
a:hover h2#pu {
	background: url(produkty2u.gif);
}
a h2#ru {
	background: url(realizacjeu.gif);
	width: 140px;
}
a:hover h2#ru {
	background: url(realizacjeu.gif);
}
a h2#pru {
	background: url(kontakt1u.gif);
	width: 140px;
}
a:hover h2#pru {
	background: url(kontakt2u.gif);
}





a h2#oa {
	background: url(oferta1a.gif);
	width: 140px;
}
a:hover h2#oa {
	background: url(oferta2a.gif);
}
a h2#pa {
	background: url(produkty1a.gif);
	width: 140px;
}
a:hover h2#pa {
	background: url(produkty2a.gif);
}
a h2#ra {
	background: url(realizacjeu.gif);
	width: 140px;
}
a:hover h2#ra {
	background: url(realizacjeu.gif);
}
a h2#pra {
	background: url(kontakt1a.gif);
	width: 140px;
}
a:hover h2#pra {
	background: url(kontakt2a.gif);
}







p {
	padding: 5px;
	text-align: justify;
}
p#b {
	font-weight: bold;
}
p#s {
	font-size: 8pt;
}
p#s1 {
	font-size: 11pt;
}
p#sb {
	font-size: 8pt;
	font-weight: bold;
}
p#sr {
	text-align: right;
	margin-right: 10px;
	font-size: 8pt;
}
p#sr1 {
	text-align: right;
	margin-right: 10px;
	font-size: 11pt;
}
p#r {
	text-align: right;
	margin-right: 10px;
}
p#rb {
	text-align: right;
	font-weight: bold;
	margin-right: 10px;
}
p#c {
	text-align: center;
}
p#sc {
	font-size: 8pt;
	text-align: center;
}
p#red {
	color: #ff0000;
}
p#m {
	clear: both;
	font-size: 1px;
	padding: 0px;
	margin: 0px;
}

/* ===== RESPONSYWNOŚĆ MOBILE ===== */

@media (max-width: 768px) {

	body {
		font-size: 10pt;
	}

	div#page {
		width: 100%;
		overflow-x: hidden;
	}

	/* --- Nagłówek --- */
	div#h {
		height: auto;
		min-height: 70px;
		background-position: left top;
	}

	div#h h5 {
		font-size: 9pt;
		padding: 5px;
	}

	div#h span {
		margin-left: 0;
		display: block;
		text-align: center;
		padding: 4px 0;
	}

	div#h span img {
		max-width: 48%;
		height: auto;
		width: auto;
	}

	/* --- Pasek ozdobny --- */
	div#p2 {
		height: 30px;
	}

	/* --- Nawigacja --- */
	div#m {
		height: auto;
		min-height: 60px;
		padding: 5px 0;
		text-align: center;
	}

	div#m h2 {
		float: none;
		display: inline-block;
		margin: 2px;
	}

	div#m img {
		display: none;
	}

	/* --- Paski ozdobne --- */
	div#p4 {
		height: 25px;
	}

	div#p6 {
		height: 12px;
	}

	/* --- Główny obraz na stronie startowej --- */
	div#ci {
		height: 150px;
	}

	/* --- Kontener treści --- */
	div#cont {
		width: 100%;
		margin: 10px 0;
		padding: 0 12px;
		box-sizing: border-box;
	}

	/* --- Kolumny lewa/prawa → jedna kolumna --- */
	div#l {
		width: 100%;
		float: none;
		text-align: center;
		margin: 10px 0;
	}

	div#l img {
		max-width: 90%;
		height: auto;
	}

	div#r {
		width: 100%;
		float: none;
		margin: 10px 0;
	}

	div#r img {
		max-width: 90%;
		height: auto;
	}

	/* --- Obrazki ogólne --- */
	img {
		max-width: 100%;
		height: auto;
	}

	/* --- Typografia --- */
	h1 {
		text-align: center;
		margin-right: 0;
		font-size: 12pt;
	}

	h6 {
		font-size: 12pt;
	}

	div#cont table {
		width: 100%;
		overflow-x: auto;
		display: block;
	}
}