@font-face {font-family: 'Roboto';font-style: normal;font-weight: 400;src: local('Roboto'),url('roboto.woff2') format('woff2');font-display: swap}
@font-face {font-family: 'Montserrat';font-style: bold;font-weight: 900; src: local('Montserrat Black'), url('montserrat.woff2') format('woff2');font-display: swap}
body {background-color:#FFFFFF;font-family: 'Roboto';font-size:19px;text-align:left;color:#1f2937;line-height:1.5; margin:0}

img {aspect-ratio: attr(width) / attr(height)}

 h1 {text-align: left; font-size:180%; color: #003952; font-family: 'Montserrat', sans-serif; font-weight: 900}
 h2 {text-align: left; font-size:120%;   color: #003952;  font-family: 'Montserrat', sans-serif; font-weight: 900}
 h3,h4 {text-align: left; font-size:100%;   color: #003952; font-family: 'Montserrat', sans-serif; font-weight: 900} 
 h5,h6 {text-align: left; font-size:90%;   color: #003952; font-family: 'Montserrat', sans-serif; font-weight: 900} 
 .dwa {background-color: #003046; color: #FFFFFF}
  span.h3 {color: #ff7a00}
  
  h1.dzieki {text-align: center; font-size:200%}
 .dzieki {text-align: center}
  


  img.logos  {width:230px; height:65px}
  img.mode  {width:65px; height:33px}
  img.pdf  {width:50px; height:50px; padding: 8px}
  img.menu {width:33px; height:33px; padding: 5px}
  img.menur {width:33px; height:33px; padding: 5px}


 ul.r {border: 1px solid #999999;border-radius: 5px;padding: 5px; margin:0; box-shadow: 2px 2px 5px; list-style-type: none; width:85%}
 ul.p {margin-left: auto;margin-right: auto}
 li.tlo {background-color: #605B0E; color: #FFFFFF}
 li.cena {border-top: #757106 solid 1px; margin:0}
 

 .gallery {display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; margin-bottom:50px}
.lewa-kolumna {width: 50%;display: flex; flex-direction: column;}
.prawa-kolumna {width: 50%; display: flex; flex-direction: column;margin-top:80px; margin-right:40px}
.lewa-kolumna img, .prawa-kolumna img {max-width: 500px; height: auto; display: block; border: 0;padding: 5px;}

.lewa-kolumna2 {width: 50%;display: flex; flex-direction: column; margin-top:80px; margin-left:40px}
.prawa-kolumna2 {width: 50%; display: flex; flex-direction: column}
.lewa-kolumna2 img {max-width: 500px; height: auto; display: block; border: 0;padding: 5px;}
.prawa-kolumna2 img {max-width: 500px; height: auto; display: block; border: 0;padding: 5px; align-self: flex-end}

 footer {position: static; bottom: 0; text-align: center; width: 100%; border-top: #000000 solid 1px; background-color: #003046; color: #FFFFFF; font-size:65%}
 footer a {display: inline-flex; text-align: center; padding: 10px 10px; text-decoration: none; color: #FFFFFF; line-height: 1,5; align-items: center; font-size:70%}
 footer a:visited {text-decoration:none; color:#FFFFFF}
 footer a:hover {text-decoration:none; color:#ff7a00}
 footer a:active {text-decoration:none}

 nav.hamburger-menu {position: fixed !important; z-index: 9999; background-color: #FFFFFF; width: 100% !important; top: 0 !important; left:0 !important; border-bottom: #003046 solid 1px;  display: flex; justify-content: space-evenly; align-items: center; padding: 5px 5px; box-sizing: border-box;}
.nav-logo {display: flex; align-items: center; background-color: #FFFFFF; justify-content: center}
.menu-toggle {display: none}
.menu-icon {display: flex; flex-direction: column; justify-content: space-between; width: 50px; height: 28px; cursor: pointer; margin-top: 20px}
.menu-icon span {display: block;height: 3px; width: 100%; background-color: #000000}
.menu-list {display: none;list-style: none;padding: 10px 0;margin: 10px 0 0 0;background: #FFFFFF;border: 1px solid #000000;width: 98%;position: absolute;top: 100%;left: 0;box-shadow: 2px 2px 4px}
.menu-list li a {display: flex;align-items: center;padding: 10px 10px;color: #000000;text-decoration: none;font-size: 17px}
.menu-list li a:hover {background-color: #FFFFFF}
.menu-img {width: 30px; height: 30px; margin-right: 15px; object-fit: contain}
.menu-toggle:checked ~ .menu-list {display: block} 

 nav.komputer {position: fixed; z-index: 9999; background-color: #FFFFFF; width: 100%; top: 0; left:0; text-align: center; align-items: center;border-bottom: #003046 solid 1px}
 .ko {display: flex; align-items: center; background-color: #FFFFFF; justify-content: center}
 .ko a {display: inline-block; text-align: center; align-items: center;  padding: 1px 12px; text-decoration: none; color: #003046;  font-size: 15px}
 .ko a:visited {text-decoration:none; color:#003046}
 .ko a:hover {text-decoration:none; color:#ff7a00}
 .ko a:active {text-decoration:none}


 strong.m {color:#846b00; font-size:100%}
 strong.cytat {color:#757106; font-size:65%; font-style: italic}
 strong.aa {color:#757106}

 main {background-color: #FFFFFF;  text-align: left; margin: 140px 5px 90px 5px}
 main a {color:#000000}
 
 p {margin-top: 0; margin-bottom: 20px}
 p.pod {margin-top: 20px; margin-bottom: 0} 
 span.k {display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none}
 
 #menu1 {position: fixed; top: 50%; right: 2%}
 #menu2 {position: fixed; top: 45%; right: 2%} 
 
 .pakiety {display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: 10px;justify-content: center; margin-bottom:50px}
 .karta {background: #eaeae; display: flex;flex-direction: column; border: 1px solid #003046;border-radius: 5px;padding: 5px; text-align: center}
 .karta-c {background: #eaeae; display: flex;flex-direction: column; border: 1px solid #003046;border-radius: 5px;padding: 5px; text-align: center;box-shadow: 2px 2px 3px #ff7a00}
 .info {flex-grow: 1;display: flex;flex-direction: column; justify-content: space-between; font-size:80%; line-height:2.0} 

 div.a { background-color: #ededed; padding: 6px}
 div.b { background-color: #c0c0c0; padding: 6px}
 div.c { background-color: #003046; color: #FFFFFF; padding: 6px}
 div.cc { background-color: #003046; color: #FFFFFF}
 div.d {padding: 6px}
 div.tytul { font-size:120%}
 div.cennik { background-color: #ff7a00; color: #FFFFFF; font-size:140%; padding: 10px}
 div.cennik2 { background-color: #ff7a00; color: #FFFFFF; font-size:70%; padding: 2px}
a.zamow {background-color: #FFFFFF; padding: 10px 10px; color: #ff7a00; border:1px solid #000000; border-radius: 4px;margin: 0; text-decoration: none; text-align: center; cursor: pointer}
a.zamow:hover {background-color: #ff7a00; color: #FFFFFF}
a.zamowc {background-color: #ff7a00; padding: 10px 10px; color: #FFFFFF; border:1px solid #FFFFFF; border-radius: 4px;margin: 0; text-decoration: none; text-align: center; cursor: pointer}
a.zamowc:hover {background-color: #FFFFFF; color: #ff7a00}

 form {text-align: center; align-content: center}  
 input {width:100%; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px; padding: 10px 10px; height: 40px;} 
 label  {text-align: left !important; color: #003952; align-self: flex-start; display: block;}
 textarea {width:100%; min-height: 150px; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px; padding: 10px 10px;} 
 .szukaj {background: #ff7a00;color: white;border: none; font-size: 17px; border-radius: 5px; padding: 15px 15px; cursor : pointer}
 .szukaj::file-selector-button {background: #ff7a00;color: white; border: none; font-size: 17px;border-radius: 5px;padding: 15px 15px; cursor: pointer}
 button.dark {background: #FFFFFF; border: none; border-radius: 5px; padding: 15px 15px; cursor : pointer}
 button.szukaj:hover {background: #846b00} 
  
 .pole2 {display: none !important;visibility: hidden !important}
 
 body.dark-mode  div.a { color: #000000}
 body.dark-mode div.b {  color: #000000}
 body.dark-mode  a.zamow {background-color: #000000; color: #FFFFFF; border: 1px solid #FFFFFF}
 body.dark-mode  a.zamow:hover {background-color: #ff7a00; color: #FFFFFF}
 body.dark-mode {background-color:#000000; color:#E0E0E0}
 body.dark-mode button.dark {background: #000000}
 body.dark-mode img.pdf {filter:  saturate(1.2) hue-rotate(187deg) invert(1)}
 body.dark-mode img.foot {filter: invert(1)}
 body.dark-mode img.menu {filter: brightness(0.36) saturate(3) hue-rotate(193deg) invert(1)}
 body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {color: #E6C319}
 body.dark-mode nav {background-color: #000000; color: #E6C319}
 body.dark-mode nav a {color: #E6C319}
 body.dark-mode nav a:hover {color:#EDE351}
  body.dark-mode .nav-logo {background-color: #000000}
 body.dark-mode strong.m {color:#FFDF5D}
 body.dark-mode strong.aa {color:#E6C319}
 body.dark-mode strong.cytat {color:#E6C319}
 body.dark-mode main {background-color: #000000}
 body.dark-mode main a {color:#FFFFFF}
  body.dark-mode .szukaj {background: #E6C319; color: #000000}
  body.dark-mode .szukaj::file-selector-button {background: #E6C319; color: #000000}
 body.dark-mode input {background-color: #000000; color: #FFFFFF; border: 1px solid #444444}
 body.dark-mode textarea {background-color: #000000; color: #FFFFFF; border: 1px solid #444444}
 body.dark-mode #div_box, body.dark-mode #div_box2 {background-color: #000000}
 body.dark-mode .hamburger-menu {background-color: #000000;}
 body.dark-mode .menu-icon span {background-color: #FFFFFF}
 body.dark-mode .menu-list {background: #000000;border: 1px solid #FFFFFF}
 body.dark-mode .menu-list li a {color: #E0E0E0}
 body.dark-mode .menu-list li a:hover {background-color: #000000}
 body.dark-mode li.tlo {background-color: #E6C319; color: #000000}
  body.dark-mode nav.komputer {background-color: #000000}
 body.dark-mode .ko {background-color: #000000}
 body.dark-mode .ko a {color: #FFFFFF}
 body.dark-mode .ko a:visited {text-decoration:none; color:#FFFFFF}
 body.dark-mode .ko a:hover {text-decoration:none; color:#ff7a00}
 
 @media (max-width: 1700px) {textarea {min-width: 700px}}
 @media (min-width: 1000px)  {nav.hamburger-menu {display:none}} 
 @media (max-width: 1000px) {textarea {min-width: 500px} main {line-height:1.6; font-size:17px} main {margin: 80px 5px 50px 5px} nav.komputer,span.k {display:none}}
 @media (min-width: 850px)  { .gallery {flex-direction: row; justify-content: space-between} .lewa-kolumna, .prawa-kolumna {width: 47%} .lewa-kolumna2, .prawa-kolumna2 {width: 47%}}
 @media (max-width: 850px) { h1 {font-size:120%} textarea {min-width: 400px} main {line-height:1.8; font-size:17px} .gallery {display: flex; flex-direction: column;gap: 20px;width: 95%; box-sizing: border-box} .lewa-kolumna, .lewa-kolumna2, .prawa-kolumna,  .prawa-kolumna2 {width: 100%;display: flex; flex-direction: column; row-gap: 20px; margin-top:0px; margin-right:0px; margin-left: 0px} .lewa-kolumna img, .lewa-kolumna2 img, .prawa-kolumna img,  .prawa-kolumna2 img {max-width: 500px; height: auto; display: block; border: 0;padding: 5px;box-sizing: border-box; margin-top:0px; margin-right:0px; margin-left: 0px}
 @media (max-width: 575px)  {textarea {min-width: 300px} .jedna-kolumna-poziom img {width: 95%; max-height: 250px} .jedna-kolumna-pion img {max-width: 300px; height: auto} img.mode {width:60px; height:auto}  .lewa-kolumna img, .lewa-kolumna2 img, .prawa-kolumna img,  .prawa-kolumna2 img {max-width: 400px}}
 @media (max-width: 400px)  {h1 {font-size:105%} img.logos  {width:165px; height:33px} img.mode {width:50px; height:auto} img.menu {width:30px; height:auto} .lewa-kolumna img, .lewa-kolumna2 img, .prawa-kolumna img,  .prawa-kolumna2 img {max-width: 340px}}