body {
	color: #000;
	font-family: 'Bitter', sans-serif;
	font-size: 13px;
/*  tło strony - pattern --------------- */
background:
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
/*  ----------------------------- */

background-size:40px 60px;
}

header, nav, section, footer {
	margin-left: 5%;
	margin-right: 5%;
	max-width: 1920px;
	width: 90%;
}

.logo{ float: right; padding: 4px 8px; }

aside > p { column-count: 1; font-size: 9px; text-align: justify; }

a.bu {
	border-width: 6px;
	border-style: double;
	border-color: #D0B4A0 #53290B #53290B #D0B4A0;
	color: #FFFFFF;
	background-color: #8B4513;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	font-family: arial;
	font-size: 14px;
	line-height: 38px;
	white-space: nowrap;
	margin: 0 3px;
}

 
a.bu:link, a.btn658:visited { color: #FFFFFF; }

 
a.bu:hover { color: #53290B; }

 
a.bu:active {
	color: #53290B;
	border-color: #53290B #D0B4A0 #D0B4A0 #53290B;
}

h1 {
	color: maroon;
	font-size: 24px;
	text-align: center;
	text-shadow: 2px 3px 1px #fff;
}

header {
	background: #d9c6a5;
	border: #dba46c 1px solid;
	border-radius: 10px;
	margin-bottom: 5px;
}

nav {
	background: #e7d7b6;
	border: #dba46c 1px solid;
	border-radius: 10px;
	margin-bottom: 5px;
	text-align: center;
}

aside {
	background: #d9c6a5;
	border: #dba46c 1px solid;
	border-radius: 10px;
	box-shadow: 5px 5px 4px #888;
	float: right;
	margin: 6px;
	padding: 4px;
	width: 150px;
}

section {
	background: #fff;
	border: #dba46c 1px solid;
	border-radius: 10px;
	margin-bottom: 5px;
}

article {
	background: url(bg-art1.jpg), url(bg-art3.jpg);
	background-color: #F8EED5;
	background-position: top left, top right;
	background-repeat: repeat-y;
	border-radius: 10px;
	margin: 4px;
	padding: 5px;
	text-align: justify;
}

figure {
	background: #fff;
	box-shadow: 5px 5px 4px #888;
	float: right;
	margin: 6px 0 2px 3px;
	padding: 4px 0 2px;
	text-align: center;
}

figcaption {
	font-size: 11px;
	font-style: italic;
	margin: 1px;
	max-width: 218px;
}

ol, ul, li { text-align: left; }

table, td, tr, th {
	background-color: #fff;
	;
	border: #d9c6a5 2px solid;
	border-collapse: collapse;
	margin: 10px;
	padding: 10px;
}

table {
	max-width: 900px;
	box-shadow: 5px 5px 4px #888;
}

th { text-align: center; }

footer {
	background: #d9c6a5;
	border: 1px solid #bbb;
	border-radius: 10px;
	margin-bottom: 5px;
	text-align: center;
}

footer > div { padding: 10px; }

/*  Dymek w CSS*/
.dymek span {
        display: none;
                }
.dymek:hover span {
        display: block;
        position: absolute;
        text-decoration: none;
        font-size: 13px;
        margin: 5px 5px 0 140px;
        padding: 5px;
        border: 1px solid #777;
        width: 250px;
        background-color: #fdfdfd;
        text-align: justify;
        color: #000;
        border-radius: 3px;
        box-shadow: 3px 3px 3px #999;
        }

/* ----------------------------*/

@media only screen and (min-width: 1921px) and (max-width: 3840px) {
	body { max-width: 3840px; }

header, nav, section, footer {
	margin-left: 5%;
	margin-right: 5%;
	max-width: 2900px;
	width: 90%;
}

article > div {
	column-count: 4;
	column-gap: 1em;
	column-rule: 1px solid #ccc;
	margin: 0;
	padding: 4px;
}

}

@media only screen and (min-width: 1201px) and (max-width: 1920px) {
	body { max-width: 1920px; }

header, nav, section, footer {
	margin-left: 5%;
	margin-right: 5%;
	max-width: 1700px;
	width: 90%;
}

article > div {
	column-count: 3;
	column-gap: 1em;
	column-rule: 1px solid #ccc;
	margin: 0;
	padding: 4px;
}

}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
	body { max-width: 1200px; }

header, nav, section, footer { margin-left: 4%; margin-right: 4%; width: 92%; }

	article > div {
	column-count: 2;
	column-gap: 1em;
	column-rule: 1px solid #eee;
	margin: 0;
	padding: 4px;
}

}
@media only screen and (max-width: 767px) {
	body { max-width: 767px; }

header, nav, section, footer { margin-left: 2%; margin-right: 2%; width: 92%; }

	article > div {
	column-count: 1;
	margin: 0;
	padding: 4px;
}

}
@media only screen and (min-width: 280px) and (max-width: 767px) {
	body { max-width: 767px; }

header, nav, section, footer { margin-left: 1%; margin-right: 1%; width: 98%; }

	article > div {
	column-count: 1;
	margin: 0;
	padding: 3px;
}

}