body {
    font-family: Arial;
}

/* nagłówek*/
header {
    padding: 8px;
    font-size: xx-large;
    text-align: center;
    font-weight: bold;
    color: green;
    background-image: linear-gradient(to right top, #BFC9AF 0%, #FFFFFF 100%);
}

/*logo pttk nagłówka*/
#logo_pttk img {
    border-radius: 10px;
    box-shadow: 10px 10px 10px 0px gray;
}

/*stopka*/
footer {
    padding: 4px;
    font-size: medium;
    text-align: center;
    clear: both;
    background-color: silver;
}

/*lewy panel*/
nav {
    width: 340px;
    float: left;
    overflow: hidden;
    background: linear-gradient(to right bottom, #BFC9AF 0%, #FFFFFF 100%);
    margin-top: 16px;
    margin-bottom: 16px;
}

/*lewy panel*/
nav article {
    margin-left: 20px;
}

/*marginesy strony głównej prawego panelu*/
article {
    margin-left: 320px;
    margin-bottom: 32px;
}

/*odsyłacze (linki) lewego panelu i ich kolejność - (prawidłowa kolejność 3-6 musi być zachowana)*/
#menu_glowne {
    font-size: large;
}

#menu_glowne a {
    color: blueviolet;
    text-decoration: none;
}

#menu_glowne a:link {
    color: green;
}

#menu_glowne a:visited {
    color: darkgreen;
}

#menu_glowne a:hover {
    color: black;
}

#menu_glowne a:active {
    color: white;
}

/*chwilowe komunikaty lewego panelu*/
#pasek_left {
    width: 300px;
    color: #10658E;
    font-size: large;
    direction: left;
}

/*chwilowe komunikaty całego panelu*/
#pasek_center {
    width: 100%;
    color: #10658E;
    font-size: large;
    direction: left;
}


#komunikat {
    font-size: large;
    text-align: left;
    color: #10658E;
}

/*3xlogo lewego panelu*/
#logo {
    text-align: center;
}

#logo img {
    border-radius: 10px;
    box-shadow: 10px 10px 10px 0px gray;
    border: 0;
}

/*licznik lewego panelu*/
#licznik {
    font-size: large;
    text-align: center;
}

#licznik a {
    color: blueviolet;
    text-decoration: none;
}

#licznik a:link {
    color: green;
}

#licznik a:visited {
    color: darkgreen;
}

#licznik a:hover {
    color: black;
}

#licznik a:active {
    color: white;
}

#licznik img {
    border-radius: 5px;
    box-shadow: 10px 10px 10px 0px gray;
    border: 0;
}

/*foto zatrzymane w kadrze lewego panelu*/
#kadr {
    font-size: large;
    color: darkgreen;
    text-align: center;
}

#kadr img {
    border-radius: 10px;
    box-shadow: 10px 10px 10px 0px gray;
    border: 0;
}

/*widget pogoda lewego panelu*/
#pogoda iframe {
    box-shadow: 10px 10px 10px 0px gray;
}

/*widget pogoda lewego panelu*/
#pogoda {
    font-size: large;
    color: darkgreen;
    text-align: left;
}

/*telefony alarmowe lewego panelu*/
#telefon {
    font-size: medium;
    color: darkgreen;
    text-align: left;
    line-height: 8px;
}

/*akapit strony głównej prawego panelu*/
#akapit_glowny {
    font-size: x-large;
    text-align: center;
    line-height: 32px;
}

/*akapit tekst ogłoszenia w ramce zielonej strony głównej prawego panelu*/
#ramka_ogloszenia_green {
    border-width: 8px;
    border-style: double;
    border-color: green;
    border-radius: 20px;
    background-color: white;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 768px; width: 75%; height:;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/*akapit tekst ogłoszenia w ramce czarnej strony głównej prawego panelu*/
#ramka_ogloszenia_black {
    border-width: 8px;
    border-style: double;
    border-color: black;
    border-radius: 20px;
    background-color: white;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 768px; width: 75%; height:;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/*akapit tekst nekrologu razem ze zdjęciem w ramce strony głównej prawego panelu*/
#ramka_nekrologu {
    border-width: 8px;
    border-style: solid;
    border-color: black;
    border-radius: 20px;
    background-color: silver;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 768px; width: 75%; height:;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/*foto strony głównej prawego panelu*/
#obraz_glowny {
    font-size: large;
    text-align: center;
}

#obraz_glowny img {
    border-radius: 20px;
    box-shadow: 10px 10px 10px 0px gray;
}

img.p50 {
    width: 50%;
    height: "";
}

img.p80 {
    width: 80%;
    height: "";
}

/*foto strony pro memoria*/
#obraz_memoria {
    font-size: large;
    text-align: left;
    float: left;
    width: 35%;
    margin-right: 32px;
}

#obraz_memoria img {
    border-radius: 20px;
    box-shadow: 10px 10px 10px 0px gray;
    width: 100%;
}

img.p35 {
    width: 35%;
    height: "";
}

/*akapity na stronie pro memoria*/
#akapit_memoria {
    font-size: large;
    text-align: justify;
}

/*sponsor strony głównej prawego panelu*/
#sponsor {
    font-size: large;
    text-align: center;
    color: green;
}

img.p20 {
    width: 20%;
    height: "";
}

/*marginesy na podstronach*/
#podstrona {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}

/*kalendarz wycieczek*/
#kalendarz {
    font-size: x-large;
    color: green;
}

#kalendarz a {
    color: blueviolet;
    text-decoration: none;
}

#kalendarz a:link {
    color: green;
}

#kalendarz a:visited {
    color: darkgreen;
}

#kalendarz a:hover {
    color: black;
}

#kalendarz a:active {
    color: white;
}

#kalendarz table {
    border-collapse: collapse;
    border: medium solid green;
}

#kalendarz th {
    border-collapse: collapse;
    border: thin solid green;
}

#kalendarz td {
    border-collapse: collapse;
    border: thin solid green;
}

/*foto na stronach wycieczek bez cieniowania*/
#foto_0 {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_0 img {
    border-radius: 15px;
    max-width: 768px; width: 100%; height:;
}

#foto_0_5 {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_0_5 img {
    border-radius: 15px;
    max-width: 768px; width: 50%; height:;
}

/*foto na stronach wycieczek*/
#foto {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto img {
    border-radius: 15px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 768px; width: 100%; height:;
}

/*2 foto w poziomie na stronach wycieczek*/
#foto_2_center {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_2_center img {
    border-radius: 15px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 440px; width: 100%; height:;
    vertical-align: middle;
    margin: 8px;
}

/*3 foto w poziomie na stronach wycieczek*/
#foto_3_top {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_3_top img {
    border-radius: 15px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 300px; width: 100%; height:;
    vertical-align: top;
    margin: 8px;
}

#foto_3_center {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_3_center img {
    border-radius: 15px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 300px; width: 100%; height:;
    vertical-align: middle;
    margin: 8px;
}

#foto_3_bottom {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_3_bottom img {
    border-radius: 15px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 300px; width: 100%; height:;
    vertical-align: bottom;
    margin: 8px;
}

/*mniejsze foto na stronach wycieczek*/
#foto_width400 {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_width400 img {
    border-radius: 15px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 400px; width: 100%; height:;
}

/*foto na stronach wycieczek*/
#foto_zaokr60 {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_zaokr60 img {
    border-radius: 60px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 768px; width: 100%; height:;
}

/*foto na stronach wycieczek*/
#foto_zaokr20 {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

#foto_zaokr20 img {
    border-radius: 20px;
    box-shadow: 10px 10px 10px 0px gray;
    max-width: 540px; width: 100%; height:;
}

/*program na stronach wycieczek*/
#tytul_podstrony {
    font-size: x-large;
    color: green;
    text-align: center;
    font-weight: bold;
}

/*wycieczka na stronach wycieczek*/
#tytul_wycieczki {
    font-size: x-large;
    text-align: center;
    font-weight: bold;
}

/*akapit górny na stronach wycieczek*/
#akapit_0 {
    font-size: x-large;
    color: red;
    text-align: left;
    font-weight: bold;
    font-style: normal;
}

/*akapity na stronach wycieczek*/
#akapit_1 {
    font-size: large;
    text-align: left;
    font-weight: bold;
}

/*akapity na stronach wycieczek*/
#akapit_2 {
    font-size: large;
    text-align: left;
}

/*mapki na stronach wycieczek*/
#mapki_left {
    font-size: large;
    text-align: left;
}

/*akapity na stronach wycieczek*/
#akapit_3 {
    font-size: large;
    text-align: center;
    font-weight: bold;
}

/*akapity na stronach wycieczek*/
#akapit_3a {
    font-size: large;
    text-align: center;
}

/*akapity na stronach wycieczek*/
#akapit_4 {
    font-size: large;
    text-align: right;
}

/*akapit telefonów alarmowych na stronach wycieczek*/
#telefony {
    font-size: large;
    text-align: left;
}

/*mapki dolne na stronach wycieczek*/
#mapki_center {
    font-size: large;
    text-align: center;
}

/*zdjęcia z wycieczek na stronach wycieczek*/
#gallery {
        text-align: center;
}

#gallery img {
        border: 0;
}

/*link powrotu do strony głównej na stronach wycieczek*/
#powrot {
    font-size: large;
    text-align: center;
}

#tabela table {
    border-collapse: collapse;
    border: medium solid green;
}

#tabela th {
    border-collapse: collapse;
    border: thin solid green;
}

#tabela td {
    border-collapse: collapse;
    border: thin solid green;
}

#tabela_got table {
    border-collapse: collapse;
    border: medium solid green;
}

#tabela_got th {
    border-collapse: collapse;
    border: thin solid green;
}

#tabela_got td {
    border-collapse: collapse;
    border: thin solid green;
    text-align: center;
}

/*wyskakujące okienko pop-up*/
.popup-hidden {
  display: none;
}

.popup-visible {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-image: linear-gradient(to right top, #BFC9AF 0%, #FFFFFF 100%);
  box-shadow: 10px 10px 10px 0px gray;
  border-radius: 20px;
  border-width: 8px;
  border-style: double;
  border-color: green;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}