* {
  box-sizing: border-box;
}

@media (max-width: 768px){
	

img{
	border:0px;
}
 #container {
	width: 100%;
	padding: 0 15px;
  }
  #header {
	width: 100%;
	padding: 10px 0;
	display: flex;
	justify-content: center; /* Ustawienie elementów na środku */
  }
#header div.menu-top {
	width: 100%;
	max-width: var(--max-width);
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  #header div.menu-top a{
	font-size: 18px;
  }  
  #header div.logo {
	width: 100%;
	text-align: center; /* Zmiana na wyśrodkowanie na mobilnych */
  }
 #header p{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #515151;
	font-variant: small-caps;
	margin: 10px auto;
	padding: 0px;
	
  }
 #content {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* Elementy mogą zawijać się do nowego wiersza, ale muszą być w linii */
  justify-content: center; 
  gap: 2px; /* Odstępy między elementami */

  
}
#content > div[style="overflow-x:auto;"] {
  display: flex;
  flex-wrap: wrap; /* Pozwól na zawijanie elementów */
  gap: 2px;       /* Odstępy między elementami */
  overflow-x: visible; /* Usuń wymuszenie przewijania w poziomie */
}

#content div.frame {
  display: flex;
  flex-wrap: wrap; /* Jeśli jest za mało miejsca, elementy przejdą do nowego wiersza */
  width: 100%; /* Dostosowanie szerokości */
  align-items: center;
  text-align:center;	
}
#content a .menu-position {
  max-width: 288px; /* Ustaw maksymalną szerokość dla responsywności */
  margin: 5px; /* Odstęp między kartami */
  text-align: center;
  border: 1px solid #aaa;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
#content div.menu-position {
  max-width: 288px; /* Maksymalna szerokość */
  height: auto; /* Usuń sztywne ustawienie wysokości, jeśli to możliwe */
  margin: 5px;
  text-align: center;
  border: 1px solid #aaa;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
#footer {
    flex-direction: column; /* Na mniejszych ekranach układ pionowy */
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px; /* Przestrzeń na dole */
  }
table {
	display: block;
	width: 100%;
	overflow-x: auto;
  }
td, th {
  white-space: nowrap;
  word-break: break-word; /* Pozwoli na zawijanie długich słów */
  }
}

/* Globalne style dla szerokości kontenera */
:root {
  --max-width: 1200px;
  --main-color: #0094c4;
  --secondary-color: #ddd;
  --font-family: 'Tahoma', sans-serif;
  --font-size-base: 14px;
  --font-size-large: 24px;
}
  
img{
	border:0px;
	max-width: var(--max-width);	
}
body{
	margin:0 auto;
	padding:0px;
	background-color:#fff;
	width:100%;
}
a, #header a, #footer a {
  text-decoration: none;
  font-family: tahoma;
  color: #0094c4;
}
/*#content a:hover, a:visited {
  background-color: #ddedf4;
}*/
#container{
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
}
#header{
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	margin-top:20px;
	display: flex;
	flex-wrap: wrap; /* Dzięki temu elementy nie będą się nakładać */
	justify-content: space-between;
	align-items: center;
	text-align:center;
}
#header div.logo{
	width: 100%;
	text-align: center;
}
#header div.menu-top{
	width: 100%;
	max-width: var(--max-width);	
	text-align: center;
	align-items: center;
}
#header p{
	display: inline-block;
	align-items: center;
	font-size: 24px;
	color: #515151;
	padding: 0px 20px;
	font-variant: small-caps;
}

#content {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  flex-wrap: wrap; /* Elementy mogą zawijać się do nowego wiersza, ale muszą być w linii */
  justify-content: flex-start; /* Ustawiamy elementy w jednym wierszu */
  gap: 2px; /* Odstępy między elementami */
}
#content > div[style="overflow-x:auto;"] {
  display: flex;
  flex-wrap: wrap; /* Pozwól na zawijanie elementów */
  gap: 2px;       /* Odstępy między elementami */
  overflow-x: visible; /* Usuń wymuszenie przewijania w poziomie */
}

#content div.frame {
  display: flex;
  flex-wrap: wrap; /* Jeśli jest za mało miejsca, elementy przejdą do nowego wiersza */
  justify-content: flex-start;
  width: 100%; /* Dostosowanie szerokości */
}



#content a .menu-position {
  flex: 1 1 calc(33.33% - 20px); /* Każdy element zajmuje około 33% szerokości */
  max-width: 288px; /* Ustaw maksymalną szerokość dla responsywności */
  margin: 5px; /* Odstęp między kartami */
  text-align: center;
  border: 1px solid #aaa;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
#content div.menu-position {
  flex: 1 1 calc(33.33% - 20px); /* Elastyczna szerokość 33%, z uwzględnieniem odstępu */
  max-width: 288px; /* Maksymalna szerokość */
  height: auto; /* Usuń sztywne ustawienie wysokości, jeśli to możliwe */
  margin: 5px;
  text-align: center;
  border: 1px solid #aaa;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
/* Wyłączenie zmiany koloru po najechaniu na link w menu-position */
#content .menu-position a:hover {
  background-color: transparent !important;
  color: #0094c4 !important; /* Ustawienie koloru tekstu na domyślny kolor */
  text-decoration: none !important; /* Usuwa podkreślenie */
}
#content div.menu-foto {
  width: 100%;
  height: auto; /* Ustawienie zdjęcia w 100% szerokości */
  padding: 5px;
}
.menu-foto img {
  max-width: 100%; /* Obraz dopasowuje się do kontenera */
  height: auto;    /* Zachowuje proporcje */
}
#content h1.menu-podpis {
  width: 286px; 
  height: 40px;
  text-align: center;
  font-size: 14px;
  background-color: #fff;
  font-family: tahoma;
  color: #515151;
}
.menu-podpis {
  font-size: 1.2rem;
  color: #333;
  margin-top: 10px;
}
#content div.text {
  width: 100%;
  padding: 20px;
  font-family: tahoma;
  font-size: 16px;
  line-height: 25px;
  color: #333;
  text-align: left;
}
#content div.list{
	width: 100%;
	text-align:center;
}
#content div.mapa-big{
	margin:10px auto;
	text-align:center;
}
#content div.tabela{
	width:100%;
	padding:0px;
	text-align:center;
	font-family:tahoma;
	font-size:14px;
	color:#333;

}
iframe{
	margin: 5px auto; 	
	
}
table{
	width:100%;
	background-color:#fff;
	border-collapse: collapse;
	margin: 5px auto; 
	overflow-x: auto; /* Pozwala na przewijanie tabeli na małych ekranach */
}

table, td, th {
  border: 1px solid #ccc;
}
tr{
	text-align: center;
}
tr:hover {
	background-color: #ddedf4;
}
tr.main{
	background-color:#eee;
}
td.main{
	background-color:#eee;
}
td{
	border-spacing:0px;
	padding:5px;
}
h1.title{
	font-family:tahoma;
	color:#0094c4;
	font-size:20px;
	font-weight:600;
	margin:0px;
	padding:10px;
	text-align:center;
}
ol{
	list-style-type: decimal;
	text-align:left;
}
ul > li{
	list-style-type: circle;
}
	
#footer {
  width: 100%;
  max-width: var(--max-width); /* Zapewnia, że stopka nie przekroczy szerokości kontenera */
  margin: 0 auto;
  padding: 20px 15px;
  border-top: 1px solid #ccc;
  background-color: #fff;
  text-align: center;
  font-variant: small-caps;
  display: flex;
  flex-wrap: wrap; /* Pozwala na zawijanie elementów */
  justify-content: space-between; /* Rozstawienie elementów */
  align-items: center; /* Wyśrodkowanie elementów w osi pionowej */
}

#footer div.left{
  text-align: left;
  width: 48%; /* Kontrolujemy szerokość elementów w stopce */
}

#footer div.right {
  text-align: right;
}


div.clear{
	clear:both;
}