@import url("https://fonts.googleapis.com/css?family=lato&display=swap");
div.ng {
	background-color: #8B4513;
	border-bottom: 2px solid #800000;
	color: #F6FFD4;
	font-size: 1.3rem;
	font-style: normal;
	font-weight: bold;
	text-align: center;
}

div.tresc {
	background-color: #FAFAD2;
	border: 1px solid #696969;
	padding: 3px;
}

h1{ color: #3D3D3D; font-size: 2.1rem; text-align: center; }

h2 { font-size: 2rem; margin-bottom: 8px; margin-top: 8px; }

h3 {
	color: #660000;
	font-size: 1rem;
	font-style: normal;
	font-weight: bold;
	text-align: center;
}

img{ height: auto; max-width: 100%; margin: 0 auto; }

p.inicial:first-letter {
	color: Maroon;
	float: left;
	font-size: 3rem;
	font-weight: bold;
}

p.opis {
	font-size: 0.8rem;
	font-style: normal;
	margin-bottom: 4px;
	margin-left: 19px;
	margin-top: 0px;
}

p.wiersz { margin-bottom: 0; margin-top: 0; }

span.dat_czer { color: #FF0000; font-size: 0.9rem; font-weight: bold; }

.czerw { color: #FF0000; font-weight: bold; }

.data_kal {
	font-size: 0.8rem;
	font-weight: bold;
	margin: 10px;
	text-align: center;
	word-spacing: 0;
}

.just { text-align: justify; text-indent: 22px; }

.muszt {
	color: #808000;
	font-size: 18px;
	font-style: italic;
	font-weight: bold;
	line-height: 150%;
	text-align: center;
}

#tyt-str {
	color: #8B0000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}

/*   przyciski głównego menu NOWY */
ul.menu-g { list-style: none; margin-left: -30px;}

ul.menu-g li a {
	display: inline-block;
	text-decoration: none;
	background-color: #b58800;
	border-color: #fdfaee #987f49 #987f49 #fdfaee;
	border-style: solid;
	border-radius: 12px 0;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	padding: 0 10px;
	margin: 2px 0px;
}
ul.menu-g li a:link { color: #fff; }
 
ul.menu-g li a:visited { color: #fff; }

ul.menu-g li a:hover { 
	background-color: #fc0;
	color: #000;
}
ul.menu-g li a:active {
	border-color: #987f49 #fdfaee #fdfaee #987f49;
	background: #630; 
	color: red; 
}

/*  odnośniki z bajerem rozwijanej linii */

a:link.mc, a:visited.mc {
	background-image: url(link-a.jpg);
	color: Black;
	font-size: 1rem;
	font-weight: bold;
	height: 22px;
	text-decoration: none;
	width: 100px;
}

a:hover.mc {
	background-image: url(link-h.jpg);
	border-bottom-color: #4B0082;
	border-bottom-style: double;
	color: #000000;
	font-size: 1rem;
	font-weight: bold;
	height: 22px;
	text-decoration: none;
	width: 100px;
}

a:active.mc {
	background-image: url(link-a.jpg);
	border-bottom-color: #C3AE83;
	border-bottom-style: solid;
	color: Black;
	font-size: 1rem;
	font-weight: bold;
	height: 22px;
	text-decoration: none;
	width: 100px;
}

body {
	background-color: #F5F5DC;
	background-image: url(tlo.jpg);
	color: black;
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	text-decoration: none;
	padding: 6px;
	margin: 0;
}

article, aside, header, nav, footer {
	border: 1px solid #000;
	border-radius: 9px;
	padding: 5px;
}

header, footer, nav { background-color: rgba(110, 252, 89, 1);
background-image: linear-gradient(39deg, rgba(110, 252, 89, 1) 26%, rgba(223, 248, 45, 1) 100%);}
 /* background:linear-gradient(135deg, #f6e6b4 0%, #e2ae02 28%, #ed9017 50%); */
aside { background: #ffffd4; }

aside +div {
	background: #fff;
	border: 1px solid #000;
	border-radius: 9px;
	padding: 5px;
}

/*  lista elementów  */
.listing h2 {
	background-color: #f08c00;
	color: #fff;
	text-align: center;
	margin: 0;
	padding: 5px;
	font-size: 22px;
}
.listing p {
	color: black;
	margin: 0;
	padding: 1px 3px;
	font-size: 18px;
}
.listing p a { color: #a08000 }

.listing {
	list-style: none;
	margin: 0 0 0 -30px;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
	border: #cff solid 1px;
}

.listing li {
	display: flex;
	flex-direction: column;
	background: white;
	border: #c60 solid 1px;
}

.listing .cta {
	margin-top: auto;
	border-top: 1px solid #ffe066;
	padding: 10px;
	text-align: center;
}

.listing .body { padding: 8px; }

/*   === układ siatki ===  */

.main-head { grid-area: header; }

.content { grid-area: content; }

.main-nav { grid-area: nav; }

.side { grid-area: sidebar; }

.ad { grid-area: ad; }

.main-footer { grid-area: footer; }

.wrapper {
	display: grid;
	grid-gap: 20px;
	grid-template-areas: "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}

@media (min-width: 800px) {
  .wrapper {
	grid-template-columns: 3fr 1fr;
	grid-template-areas: "header  header"
      "nav         nav"
      "content sidebar"
      "footer       ad";
}

  nav ul { display: flex; justify-content: space-between; }

}

@media (min-width: 1400px) {
  .wrapper {
	grid-template-columns: 1fr 4fr 1fr;
	grid-template-areas: "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer";
}
   nav ul { flex-direction: column; }

}