@media(max-width: 800px){
html {margin: 0px; height: 100%;}
body {margin: 0px; padding: 0px; font-family: "Red Hat Display";}
header {margin: 0px; padding: 0px;}
.menu_mobilne_przycisk {
    z-index: 7;
    position: absolute;
    top: 25px;
    right: 10px;
    width: 25px;
    height: 25px;
    border: none;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
}
#menu_mobilne_show {
    background-image: url('grafika/mobile_menu_button.png');
    display: block;
}
#menu_mobilne_hide {
    background-image: url('grafika/close.png');
    display: none;
}
#menu_glowne {
    display: none;
    position: absolute;
    top: 0px;
    z-index: 6;
    margin: 15px 0px; 
    padding: 0px; 
    width: 100%;
    background-color: white;
    list-style-type: none; 
    list-style-position: inside;
    text-align: center;
}
#menu_glowne li {
    display: block; 
    margin: 0px auto;
    width: 150px; 
    padding: 5px; 
    text-align: center;}
#menu_glowne li a {font-size: 20px; color: #1D3469; text-decoration: none;}
#menu_glowne li.inna::after {content: ""; display: block; width: 100%; height: 3px; 
    background-color: white; transition: background 0.5s;}
#menu_glowne li.inna:hover::after {background-color: #64BBE8;}
#menu_glowne li.aktualna::after {content: ""; display: block; width: 100%; height: 5px; 
    background: linear-gradient(90deg, #1D3469 0%, #64BBE8 100%);}
h1 {font-size: 25px; color: black; text-align: center; font-weight: 700;
    margin-top: 20px; margin-bottom: 30px;}
#podtytul {font-size: 20px; color: black; text-align: center; 
    font-weight: 600; margin: 20px;}
footer {margin: 50px 0px; padding: 0px; text-align: center;}
.logotyp {height: 100px; display: block; margin: 0 auto;}
header.podkreslenie::after {content: ""; display: block; width: 100%; height: 15px; 
    background: linear-gradient(270deg, #1D3469 0%, #64BBE8 81.5%, #64BBE8 100%);}
#tresc_strony_div {
    margin: 0px;
    padding: 20px;
    width: calc(100%-40px);
    font-size: 19px; 
    color: #1D3469; 
    font-weight: 600;}
#tresc_strony_div h2 {
    text-align: center; 
    font-size: 25px; 
    color: #1D3469; 
    font-weight: 600;}
#tresc_strony_div p, li {margin: 10px 0px;}
#tresc_strony_div.gradient {
    color: white; 
    text-align: center;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);}
#pole_wyszukiwania {
    width: 90%; 
    margin: 0px auto; 
    display: grid;
    grid-template-rows: 50px 50px 50px auto;
    border-radius: 23px;}
.opcja_wyszukiwarki_ban a {width: 100%; text-decoration: none; color: black;}
.opcja_wyszukiwarki {
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 100%; 
    font-size: 20px; 
    text-decoration: none; 
    font-weight: 700; 
    }
#szukaj_osoba {
    border-radius: 23px 23px 0px 0px;
    grid-row: 1; 
    grid-column: 1;}
#szukaj_osoba  .opcja_wyszukiwarki 
    {border-radius: 23px 23px 0px 0px;}
#pole_wyszukiwania.osoba #szukaj_osoba  .opcja_wyszukiwarki 
    {background: rgba(29, 52, 105, 1); 
    color: white;}
#pole_wyszukiwania.utwor #szukaj_osoba  .opcja_wyszukiwarki, #pole_wyszukiwania.publikacja #szukaj_osoba  .opcja_wyszukiwarki 
    {background: linear-gradient(180deg, #D1EFFF 50%, #86B5CE 100%);
    color: grey;}
#szukaj_utwor  {
    grid-row: 2; 
    grid-column: 1;}
#pole_wyszukiwania.osoba #szukaj_utwor .opcja_wyszukiwarki, #pole_wyszukiwania.publikacja #szukaj_utwor .opcja_wyszukiwarki 
    {background: linear-gradient(180deg, #D1EFFF 50%, #86B5CE 100%);
    color: grey;}
#pole_wyszukiwania.utwor #szukaj_utwor  .opcja_wyszukiwarki 
    {background: rgba(29, 52, 105, 1); color: white;}
#szukaj_publikacja  {
    grid-row: 3; 
    grid-column: 1;}
#pole_wyszukiwania.osoba #szukaj_publikacja .opcja_wyszukiwarki, #pole_wyszukiwania.utwor #szukaj_publikacja .opcja_wyszukiwarki 
    {background: linear-gradient(180deg, #D1EFFF 50%, #86B5CE 100%);
    color: grey;}
#pole_wyszukiwania.publikacja #szukaj_publikacja  .opcja_wyszukiwarki 
    {background: rgba(29, 52, 105, 1); color: white;}
#wyszukiwarka {
    grid-row: 4; 
    grid-column: 1;
    text-align: center;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);  
    border-radius: 0px 0px 23px 23px;}
#wyszukiwanie_proste {
    font-size: 15px; 
    height: 40px; 
    width: 90%; 
    border-radius: 30px; 
    border: 0px; 
    text-align: center;
    margin-top: 60px; 
    font-family: "Red Hat Display"; 
    color: #1D3469; 
    font-weight: 600;}
#wyszukaj {
    font-size: 20px; 
    height: 30px; 
    width: 150px; 
    text-align: center;
    border-radius: 30px; 
    border: 0px; 
    margin: 30px auto; 
    background: rgba(209, 239, 255, 0.4);
    color: white; 
    font-family: inherit; 
    font-weight: 600; 
    cursor: pointer; 
    outline: none;}
#wyszukaj:hover {background: rgba(29, 52, 105, 0.6);}
.opc_zaaw {
    text-align: center;
}
.opc_zaaw a {
    text-decoration: none; 
    font-size: 18px; 
    color: white; 
    font-weight: 600;}
#lista_warunkow {
    list-style-type: none; 
    list-style-position: inside; 
    margin-top: 10px; 
    padding: 0px;}
#lista_warunkow li {
    margin: 10px 0px 10px 0px; 
    padding: 0px;}
.select_ban {
    display: inline-grid; 
    grid-template-areas: "select"; 
    width: 250px; 
    margin: 5px;
    min-height: 40px; 
    border-radius: 20px; 
    padding: 0px; 
    background-color: white;}
.opcje {
    font-size: 18px; 
    min-height: 30px; 
    width: 100%;
    padding-left: 20px; 
    color: #1D3469; 
    font-weight: 600; 
    font-family: inherit;
    appearance: none; 
    outline: none; 
    grid-area: select; 
    position: relative; 
    background: transparent; 
    border: none; 
    text-wrap: wrap;}
.select_ban_i {display: inline-grid; grid-template-areas: "select"; width: 90px; margin: 5px;
        min-height: 40px; border-radius: 20px; padding: 0px; background-color: white;}
.opcje_i {font-size: 18px; min-height: 40px; width: 100%;
        padding-left: 20px; color: #1D3469; font-weight: 600; font-family: inherit;
        appearance: none; outline: none; grid-area: select; position: relative; 
        background: transparent; border: none; text-wrap: wrap;}
.select_ban::before {
    content: ""; width: 25px; height: 15px; background-color: #1D3469;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%); grid-area: select; justify-self: end;
    align-self: center; margin-right: 10px; border-radius: 3px;}
.select_ban_i::before {
        content: ""; width: 25px; height: 15px; background-color: #1D3469;
        clip-path: polygon(100% 0%, 0 0%, 50% 100%); grid-area: select; justify-self: end;
        align-self: center; margin-right: 10px; border-radius: 3px;}
/*.select_ban:focus-within::before {transform: rotate(180deg);}*/
#lista_warunkow input[type=text] {
    border-radius: 20px; 
    margin: 5px auto;
    width: 250px; 
    height: 40px;
    background-color: white; 
    padding: 0px; 
    text-align: center;
    display: inline;}
#dodaj_linie {font-size: 18px; color: #1D3469; font-weight: 600; font-family: inherit;
    width: 250px; height: 40px; border-radius: 20px; background-color: white; border: 0px;}
.sortowanie_ban {
    font-size: 21px; color: white; font-weight: 600; margin-top: 15px;
}
#wyniki_h {
    text-align: center;
    font-size: 18px; 
    font-weight: 600; 
    color: white;
}
#wyniki_wyszukiwania {
    width: 100%; display: flex; flex-direction: column;
    list-style-type: none; list-style-position: inside; margin: 0px; padding: 0px;
    justify-content: center; margin-bottom: 20px; font-size: 18px; font-weight: 600;
}
#drukuj_liste {
    display: block;
    color: #1D3469;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
}
#wyniki_wyszukiwania li {
    display: block; margin: 10px; padding: 5px; background-color: white; 
    font-size: 20px; border-radius: 18px;
}
.wynik_wyszukiwania_osoba {
    width: 90%;
}
.wynik_wyszukiwania_utwor {
    width: 90%;
}
#wyniki_wyszukiwania li a {
    text-decoration: none; color: #1D3469; display: block; width: 100%; height: 100%;
    font-weight: 600;
}
#wyswietlanie_info {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
}
#wyswietlanie_naglowek {
    width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; 
    align-items: center;
}
#wyswietlanie_naglowek h2 {
    color: #1D3469; margin: 0px 10px; font-weight: 600; font-size: 25px;
}
#wyswietlanie_naglowek #publikacja_kategorie {
    color: #1D3469; font-size: 20px; margin: 10px;
}
#utwor_autorzy {
    margin: 0px 10px; color: #64BBE8; font-size: 20px; text-align: center;
}
#utwor_autorzy a{
    color: #64BBE8
}
#utwor_tytuly {
    margin: 0px 10px; color:#1D3469; font-size: 20px;
}
#utwor_tytuly li{
    margin: 0px;
}
#utwor_podtytul {
    color: #1D3469; font-size: 20px; margin: 10px;
}
#osoba_kategorie {
    margin: 10px; color: #64BBE8; font-size: 20px; color: #64BBE8; text-align: center;
}
#wyswietlanie_info .kafelek_ban {
    height: 300px; overflow: visible;
}
#wyswietlanie_info .kafelek {
    width: 250px; min-height: 250px; max-height: fit-content; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; 
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);
    font-size: 19px; color: white; text-align: center; border-radius: 30px; 
    margin: 5px; padding: 10px; position: relative; border: 15px solid white;
    transition: height 1s;
}
#wyswietlanie_info .kafelek_overflow {
    justify-content: start; overflow: hidden;
}
#wyswietlanie_info .kafelek_overflow_max {
    z-index: 1;
}
#wyswietlanie_info .kafelek_overflow::after {
    content: url(grafika/arrow_white.png); width: 100%;
    display: flex; align-items: end; justify-content: center; border-radius: 0px 0px 15px 15px;
}
#wyswietlanie_info .kafelek_overflow_min::after {
    position: absolute; top: 160px; height: 100px; padding-bottom: 10px;
    background: linear-gradient(transparent, #64BBE8);
}
.kafelek_overflow_max::after {
    position: static; transform: rotate(180deg); background: transparent; margin: 10px;
}
#wyswietlanie_info .kafelek_obsada {
    width: 565px;
}
.kafelek_obsada_in {
    width: 100%; height: 100%; margin: 0px 15px; display: flex; flex-direction: column; 
    justify-content: start; align-items: center; border-radius: 15px;
    background-color: transparent; padding-top: 20px; transition: background-color 1s;
}
#wyswietlanie_info .kafelek_obsada.kafelek_overflow_max::after {
    height: 100px; margin-bottom: 0px; align-items: center;
}
#wyswietlanie_info .kafelek_biogram {
    width: 565px;
}
#wyswietlanie_info .kafelek a {
    color: white; display: inline;
}
#wyswietlanie_info .kafelek ul {
    list-style-type: none; list-style-position: inside; padding: 0px; margin: 0px;
}
#wyswietlanie_info .kafelek_obsada ul {
    list-style-type: disc;
    text-align: left;
    list-style-position: outside;
    padding-left: 20px;
}
a.druk {
    display: block;
    margin: 20px;
    font-size: 20px;
    color:rgba(29, 52, 105, 1);
    text-align: center;
}
#logowanie_ban {
    display: grid; 
    grid-template-rows: 30px 40px 300px 70px;
    width: 90%; 
    margin: 0px auto;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);
    font-size: 20px; 
    font-weight: 600; 
    border-radius: 15px;
}
#formlog {
    grid-row: 3;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
#formlog div {margin: 20px;}
#formlog label {
    font-size: 20px; 
    color: white;
}
#formlog input[type=text], #formlog input[type=password] {
    color: black; 
    padding: 18px; 
    background-color: white; 
    font-size: 20px;
    border-radius: 30px; 
    border: none; 
    width: 200px;  
    margin-left: 10px;
}
#formlog input[type=submit] {
    color: white; 
    padding: 8px; 
    background: rgba(209, 239, 255, 0.4); 
    border-radius: 20px; 
    border: none; 
    width: 160px; 
    font-size: 20px; 
    margin: 30px;
}
#logowanie_ban #zaloz_konto {
    grid-row: 4; 
    text-align: center;
    text-decoration: none; 
    color: white; 
}
#logowanie_ban .blad {
    grid-row: 2; color: white; width: 100%; text-align: center; margin: 0px; padding: 0px;
}
#zaloz_konto_ban {
    display: grid; 
    grid-template-rows: 40px auto 40px 20px;
    width: 90%; 
    margin: 0px auto;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);
    font-size: 20px; 
    font-weight: 600; 
    border-radius: 15px; 
    color: white;
}
#zaloz_konto_ban form {
    grid-row: 2; 
    text-align: center;
    position: relative;
}
#zaloz_konto_ban form input[type=text]{
    color: black; 
    padding: 18px; 
    background-color: white; 
    font-size: 18px;
    border-radius: 30px; 
    border: none; 
    width: 90%; 
    margin: 10px 0px;
}
#zaloz_konto_ban form label {
    display: block; 
    position: relative;
}
#zaloz_konto_ban form .sublabel{
    font-size: 16px; 
    display: block;
}
#zaloz_konto_ban form label.check {
    display: flex; 
    flex-direction: row; 
    justify-content: right;
    width: 90%;
}
#zaloz_konto_ban form input[type=checkbox]{
    width: 20px; 
    height: 20px; 
    margin: 5px 20px;
}
#zaloz_konto_ban form label.check div {
    text-align: left;
    width: 80%;
}
#zaloz_konto_ban form label.check a {
    color: white;
}
#zaloz_konto_ban form #submit_ban {
    margin: 0 auto; 
    width: auto; 
    text-align: center;
}
#zaloz_konto_ban form input[type=submit] {
    color: white; 
    padding: 8px; 
    background: rgba(209, 239, 255, 0.4); 
    border-radius: 20px; 
    border: none; 
    width: 160px; 
    font-size: 20px; 
    margin: 30px auto;
}
#zaloz_konto_ban #blad_form {
    display: none;
    grid-row: 3; 
    color: white; 
    width: 90%; 
    text-align: center; 
    margin: 0px; 
    padding: 0px;
}
/* CMS */
h2 {margin: 10px; text-align: center; font-size: 30px;}
#opis_kompozytora {margin-bottom: 100px; padding-left: 30px; padding-right: 30px; font-size: 20px;}
#opis_kompozytora a {color: #1e2b62; text-decoration: none;}
#opis_kompozytora ul {list-style-type: none;}
#opis_utworu {margin-bottom: 100px; padding-left: 30px; padding-right: 30px; font-size: 20px;}
#opis_utworu a {color: #1e2b62; text-decoration: none;}
#opis_utworu ul {list-style-type: none;}
#opis_utworu ul.wew {list-style-type: disc;}
#opis_utworu ul.wew2 {list-style-type: square;}
#opis_utworu ul.wew3 {list-style-type: disc;}
#edycja input {font-size: 20px; width: 500px; margin-top: 10px;}
#edycja input[type=checkbox] {width: 20px; height: 20px;}
#edycja input[type=radio] {width: fit-content; margin: 15px; font-size: 20px;}
#edycja input[type=submit] {display: block; width: 150px;}
#edycja textarea {height:25px; width: 700px; font-size: 20px; margin-top: 10px; margin-bottom: 0px;}
table.edycja {border: 1px solid black; margin: 15px; font-size: 20px;}
table.edycja th, td {border: 1px solid black; text-align: center; width: 300px;}
table.edycja tr.naglowek {font-weight: bold}
table.edycja tr.naglowek2 {font-weight: bold}
table.edycja tr.naglowek td {border: 3px solid black;}
table.edycja tr.naglowek2 td {border: 3px dotted black;}
#usun_kompozytora, #anuluj, #usun_utwor {float: right; margin: 10px; font-size: 20px;}
#zakoncz_edycje {float: left; margin: 10px; font-size: 20px;}
#edycja {margin: 10px; font-size: 20px;}
a.cms_opcja {font-size: 20px; color: #1e2b62; display: block; margin: 10px; text-align: center;}
#wydruk_listy {
    margin: 20px 50px;
    font-size: 20px;
}
#wydruk_listy input[type=checkbox]{
    height: 15px;
    width: 15px;
    margin: 5px;
}
#wydruk_listy input[type=submit]{
    font-size: 20px;
    margin: 10px 0px;
}
.cms_info {
    font-size: 20px;
    margin: 20px 50px;
}
#lista_ban {
    margin: 50px;
    font-size: 20px;
}
#wyszukiwarka_cms {text-align: center; font-size: 20px;}
#wyszukiwarka_cms input {font-size: 20px;}
#wyniki {margin: 30px auto;}
}