@font-face {
    font-family: 'allerregular';
	src:
		url('./fonts/aller_rg-webfont.ttf') format('truetype'),
		url('./fonts/aller_rg-webfont.eot'),
		url('./fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
		url('./fonts/aller_rg-webfont.woff2') format('woff2'),
		url('./fonts/aller_rg-webfont.woff') format('woff'),
		url('./fonts/aller_rg-webfont.svg#allerregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}

* {
  margin: 0;
  box-sizing: border-box;
	}

body {
  background-color: #E4DFD6; font-family: allerregular, sans-serif; line-height: 1.2; font-size: 15px; color:#454545; margin: 0px;padding: 0px;
	}	

.mapa {
	background-image: url("../img/mapa.webp");
	background-repeat: no-repeat;
	}

.first-logo {
	display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin-left: 40%;
margin-top: 15%;
height: 300px;
	}

.top {
	background-color:#F1EDE5;
	background-image: url("../img/bg-top.png");
	background-repeat: repeat-x;
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
	-webkit-box-shadow: 0px 7px 9px -9px rgba(120, 68,33, 0.21);
	-moz-box-shadow: 0px 7px 9px -9px rgba(120, 68,33, 0.21);
	box-shadow: 0px 7px 9px -9px rgba(120, 68,33, 0.21);
	}

img.fam {
	width: 100%;
	height: auto;
	object-fit: contain;
	margin-bottom:10px;
	}

img.flag {
	height:28px;
	margin-left:3px;
	}

img.akt {
	padding: 8px;
	background-color:#C4BBB1;
	margin-bottom:10px;
	}
	

.l-flagi {
	text-align:right;
	margin-top: 30px;
	margin-right: 50px;
	}

img.logo {
	width:270px;
	 height: auto;
	margin-top: 8px;
	margin-left:40px;
	z-index:999;
	}

.logo-small {
	width:28px;
	height:28px;
	vertical-align:middle;
	margin-top:-5px;
	margin-left:10px;
	}
	
h2.naglowek {
	font-family: 'allerregular', sans-serif;
	font-weight: 600;
	font-style: normal;
	line-height: 26px;
	color: #1E75B5;
	text-align:center;
	}

.right {
	text-align: right;
	}

.tekst1 {text-align: justify;
	text-justify: inter-character;
	text-indent: 15px;
	hyphens: auto;
	color: #454540;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-right: 10px;
	}

.tekst2 {
	hyphens: auto;
	color: #454540;
	margin-top: 15px;
	margin-bottom: 15px;
	}

div.tytul {
	text-align: center;
	margin-top: -110px;
	font-size:22px;
	
	}

.pion {
	margin-right: 30px;
	}

.ident20 {
	padding-left: 20px;
	}

.middle {
	text-align: center;
	}

.right {
	text-align: right;
	}

.tlumacz {
	color: #243D69;
	}

.pad20b {
padding-bottom: 20px;
	}

a.pal 			{ color: #29753F; text-decoration: none; }
a.pal:hover 	{ color: #784321; text-decoration: underline; }
a.pal:visited 	{ color: #752975; text-decoration: none; }
a.pal:active 	{ color: #009d4e; text-decoration: none; }

hr{
	border-top: 0;
	border-bottom: dotted 2px #784421;
	width: 99%;

	}

h1{
	letter-spacing: 3px;
	color: #1E75B5;
	text-align:center;
	}

span {
	font-style: normal;
	color: #1E75B5;
	}
	
span.dwokropek {
	color: #784421;
	}

.brown {
	color: #1E75B5;
	font-size: 14px;
	font-weight: 600;
	background-color: #BEB7AA;
	padding-left: 3px;
	padding-right: 3px;
	}

h3, h4 {
	color: #784421;
	margin-bottom: -10px;
	}

.r-site {
	text-align: justify;
	padding-top: 20px;
	color: #784421;
	line-height: 1.2;
	}

.alfabet {
	float: left; 
	margin-right: 3px;
	}

pre.drzewo {font-family:allerregular; font-size:15px;}

table {
	border-collapse: collapse;
	width:auto;
	}

.center {
	margin-left: auto;
	margin-right: auto;
	}

th {
	font-size: 14px;
	color: #4B311F;
	padding-left: 6px;
	padding-right: 6px;
	}

td {
	text-align: center;
	padding: 6px;
	font-weight: 600;
	border: solid 1px #C2C4BA;
	font-size: 14px;
	}

span {
	margin: 5px;
	}

.r-c {
	font-style: oblique;
	font-style: italic;
	}

.rlit {
	margin-right: 2.5px;
	margin-left: 2.5px;
	margin-top: 3px;margin-bottom: 2px;
	vertical-align: middle;
	}

.biel:hover {
	background-color: #fafafa;
	}


.zawartosc {
  max-width: 100%;
  margin: 200px auto;
  padding-left: 20px;
  padding-right: 20px
	}

.kol-1 {
  color: #444;
  width: 50%;
	}

.kol-2 {
  color: #444;
  width: 50%;
	}

.stopka {
	position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 13px;
  background: #4B311F;
  color: #fff;
  height: 42px;
  padding-top: 12px;
  padding-bottom: 14px;
  }

/* @media większe niż */
@media screen and (width >= 760px) {
  .zawartosc {
    display: flex;
  }

  .kol-1 {
    flex: 2;
    margin-right: 0;
    padding: 10px;
    border-right: dotted 2px #8B6914;
  }

  .kol-2 {
    flex: 2;
    padding: 10px;
  }
}

/* @media mniejsze lub równe niż */
@media screen and (width <= 1024px) {

	.top {
		height: 88px;
		background-color: #F1EDE5;
		background-image: url("../img/bg-top-small.png");
		background-repeat: repeat-x;
		
	}

		.kol-1 {
			width: 100%;
			margin-right: 0;
			margin-top:-70px;
			padding: 10px;
			width: 100%;
			border-bottom: dotted 2px #8B6914;
		}

		.kol-2 {
			 padding: 10px;
			 width: 100%;
		}
		
		img.logo {
		height: 60px;
		margin-top: 14px;
		margin-left:-40px;
		z-index: 999;
		}
		
		.l-flagi {
		text-align: right;
		margin-top: -22px;
		margin-right: 30px;
		}

		div.tytul {
			text-align: right;
			margin-top: -70px;
			font-size: 14px;
			font-weight: 600;
			margin-right: 25px;
		}

		.r-site {
		margin-right:15px;
		}
}



/* @media mniejsze lub równe niż */
@media screen and (width <= 560px) {

		div.tytul > span {
			display: none;
		}


		.l-flagi {
		text-align: right;
		margin-top: -22px;
		margin-right: 30px;
		}

}

/* @media większe lub równe niż (np. Kindle) */
@media screen and (width >= 800px) and (max-device-width: 1024px) {

		.l-flagi {
		text-align: right;
		margin-top: 14px;
		margin-right: 30px;
		}
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Wymuszanie, aby tabela nie wyświetlała się już jak zwykła tabela */
	table, thead, tbody, th, td, tr {
		display: block; 
	}
	
	/* Ukrywanie nagłówków tabeli bez „display: none;”, w celu zapewnienia dostępności*/
	/*thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}*/
	
	tr {
	border: 1px solid #CAC6BC;
	}
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #BCAE8A; 
		position: relative;
		padding-left: 10%; 
	}
	
	td:before {
		/* Teraz jak nagłówek tabel */
		position: absolute;
		/* Top/left wartości imitują wypełnienie */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}