/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100..900&display=swap");
/* Most of these styles could be removed but are for the demo to look better */
:root { --kolorOFB: #bf4800; --kolor1: #aaa; }

html { font-size: 17px; line-height: 1.6; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: none; }

.tytul { font-size: 33px; font-weight: 600; line-height: 1; }
.tytul span { font-weight: 400; }

.podtytul { font-size: 10px; text-transform: uppercase; font-weight: 500; letter-spacing: 3px; }

.wrapper { max-width: 1140px; margin-inline: auto; }

.button { width: fit-content; min-width: 150px; min-height: 36px; display: flex; padding: 0.5em 2em; text-transform: uppercase; font-size: 11px; font-weight: 700; justify-content: center; align-items: center; color: #fff; background: var(--kolorOFB); border-radius: 50px; }

#Header { --kh: #aaa; position: fixed; z-index: 9; top: 10px; right: 10px; left: 10px; display: grid; width: auto; height: auto; transition: all 0.5s ease-in-out; }
#Header .content { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(180%) blur(20px); border-radius: 24px; padding: 0 16px; }
#Header .content .items-header-nawigacja { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 56px; }
#Header .content .items-header-nawigacja .logo { margin: 0; display: block; }
#Header .content .items-header-nawigacja .logo img { display: block; height: 20px; }
#Header .content .items-header-nawigacja .mieszkania { display: inline-block; text-transform: uppercase; font-size: 13px; line-height: 1.2; margin: auto 0 auto auto; color: var(--kolorOFB); border: 1px solid var(--kh); border-radius: 30px; padding: 0.6em 1.4em; font-weight: 500; background: #fff; transition: background 0.3s ease, color 0.3s ease; }
#Header .content .items-header-nawigacja .btn-header { width: 40px; height: 40px; border-radius: 50%; display: flex; color: var(--kolorOFB); border: 1px solid var(--kh); background: #fff; cursor: pointer; transition: all 0.3s ease-in-out; }
#Header .content .items-header-nawigacja .btn-header i { display: block; margin: auto; }
#Header .content .items-header-nawigacja .btn-header .off { display: none; }
#Header .content .items-header-nawigacja .btn-header:hover { background: var(--kolorOFB); color: #fff; }
#Header .content .items-content-nawigacja { display: block; }
#Header .content .items-content-nawigacja .menu-glowne-container { width: 100%; }
#Header .content .items-content-nawigacja .menu-glowne-container ul { list-style: none; border-top: 1px solid var(--kh); border-bottom: 1px solid var(--kh); padding: 20px; display: grid; width: 100%; font-size: 18px; gap: 12px; justify-items: center; justify-content: center; }
#Header .content .item-hidden { opacity: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
#Header .content .items-footer-nawigacja address { padding: 20px; font-size: 12px; font-weight: 300; }
#Header .content .items-footer-nawigacja address strong { font-weight: 700; margin-bottom: 0.75em; display: block; }
#Header .btn-form { color: #fff; text-decoration: none; font-weight: 400; text-align: right; font-size: 10px; cursor: pointer; z-index: 1; padding: 0.75em 20px 0.5em; text-transform: uppercase; }
#Header::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); border-radius: 28px; }
#Header.on .content .items-header-nawigacja .btn-header.btn-menu { background: #000; color: #fff; }
#Header.on .content .items-header-nawigacja .btn-header .off { display: block; }
#Header.on .content .items-header-nawigacja .btn-header .on { display: none; }
#Header.on .content .item-hidden { max-height: 100dvh; opacity: 1; }
#Header.on .btn-form { display: none; }

#hero { position: relative; width: 100vw; height: 100dvh; overflow: hidden; color: #fff; /* warstwa z trescia */ }
#hero .tlo { position: absolute; inset: 0; z-index: 0; }
#hero .hero-media, #hero .hero-video { width: 100%; height: 100%; object-fit: cover; }
#hero .hero-media.desktop, #hero .hero-video.desktop { display: none; }
#hero .hero-media.mobile, #hero .hero-video.mobile { display: block; }
#hero .hero-video-wrapper { width: 100%; height: 100%; position: relative; }
#hero .content { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-inline: 20px; }

.kwadrat .content { display: grid; grid-template-columns: 1fr; max-width: 1400px; margin: auto; }
.kwadrat .content .foto img { width: 100%; height: 100%; object-fit: cover; }
.kwadrat .content .txt { font-size: 16px; line-height: 1.7; font-weight: 400; margin: 0; display: flex; }
.kwadrat .content .txt strong { font-weight: 700; }
.kwadrat .content .txt > div { margin: auto 0; }
.kwadrat .content .txt .button { margin-top: 30px; }
.kwadrat .content .txt h2 { font-size: min(7.5vw,36px); font-weight: 600; line-height: 1.1; margin-bottom: 25px; }
.kwadrat .content .txt h2 span { font-weight: 400; }
.kwadrat .content .txt.background { background: #000; color: #fff; }

.galeria { margin-bottom: 80px; }
.galeria img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; overflow: hidden; }

#cechy .gcechy { gap: 70px 10px; }
#cechy .gcechy div div { font-size: 10px; text-transform: uppercase; font-weight: 300; line-height: 1; }

.full-panel { position: relative; }
.full-panel .tlo { overflow: hidden; }
.full-panel .tlo img { width: 100%; }
.full-panel .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; }
.full-panel .content .haslo { margin: auto; color: #fff; text-align: center; line-height: 1; }
.full-panel .content .haslo h3 { font-size: 11px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.full-panel .content .haslo h1 { font-size: min(7vw, 50px); font-weight: 600; white-space: pre-line; margin-bottom: 30px; }
.full-panel .content .haslo h2 { font-size: min(3vw, 18px); font-weight: 400; white-space: pre-line; line-height: 1.3; }

#lokalizacja { position: relative; }
#lokalizacja .tlo { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
#lokalizacja .tlo img { width: 100%; height: 100%; object-fit: cover; }
#lokalizacja .wrapper > div { max-width: 620px; padding-block: 80px; }
#lokalizacja .txt-msc { margin-left: auto; }
#lokalizacja .txt-msc .opis { font-size: 11px; line-height: 1; white-space: pre-line; text-transform: uppercase; }

#finansowanie { position: relative; }
#finansowanie .tlo { width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; }
#finansowanie .tlo img { width: 100%; height: 100%; object-fit: cover; }
#finansowanie .wrapper { position: relative; }
#finansowanie .content { margin-left: auto; padding-block: 80px; max-width: 430px; }
#finansowanie .content .header { display: flex; justify-content: space-between; align-items: flex-start; }
#finansowanie .content .header img { height: 30px; }
#finansowanie .content h1 { font-size: 36px; font-weight: 600; line-height: 1; white-space: pre-line; margin-bottom: 20px; }
#finansowanie .content h1 span { font-weight: 400; }

form .inputy { margin-bottom: 10px; }
form .inputy .input { position: relative; height: 48px; background: #fff; border-radius: 10px; color: #000; overflow: hidden; border: 1px solid #bbb; }
form .inputy .input label { position: absolute; top: 50%; transform: translateY(-50%); margin: 0 auto 0 40px; font-size: 16px; font-weight: 400; text-align: left; display: block; transition: 0.5s; }
form .inputy .input .iko { position: absolute; top: 0; height: 100%; font-size: 16px; padding: 0 10px; display: flex; }
form .inputy .input .iko:before { margin: auto 0; }
form .inputy .input input { margin: 0 0 0 40px; width: calc(100% - 40px); font-size: 15px; outline: none; text-align: left; height: 100%; border-radius: 10px; border: none; }
form .inputy .input.err { border-color: #f00; }
form .inputy .input.err .iko { color: #f00; }
form .inputy .input.ttxt label { top: 16%; font-size: 11px; line-height: 1; }
form .inputs { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px 30px; }
form .inputs .input label { position: relative; margin: 0 auto 0 0; font-size: 12px; font-weight: 300; text-align: left; display: block; }
form .inputs .input input { margin-top: 5px; border: 1px solid #bbb; padding: 0 1em; width: 100%; font-size: 12px; border-radius: 10px; outline: none; color: var(--kolor1); background: none; font-family: Lato; text-align: left; line-height: 45px; }
form .inputs .input.err label { color: #F00; }
form .inputs .input:first-child { grid-column: 1 / 3; }
form .textarea { margin: 10px auto 5px; display: grid; grid-template-columns: 1fr; grid-gap: 0; padding: 0; width: 100%; position: relative; }
form .textarea textarea { margin-top: 5px; border: 1px solid #bbb; padding: 20px 10px 10px; width: 100%; font-size: 12px; font-family: Poppins; outline: none; color: #000; border-radius: 10px; height: 7em; background: #fff; }
form .textarea label { position: absolute; top: 10px; left: 10px; font-size: 15px; font-weight: 400; text-align: left; display: block; color: #000; }
form .textarea.err legend { color: #F00; }
form a:hover { text-decoration: underline; }
form .zgoda { margin: 12px 0 0 0; font-size: 10px; font-weight: 300; padding: 0; text-align: left; display: flex; flex-wrap: nowrap; }
form .zgoda.trzgodaK { color: #fff; font-weight: 700; }
form .zgoda .dymek { margin: 0 auto 0 0; }
form .zgoda .zgoda-check { margin: 4px 10px auto 0; float: none; }
form .zgoda .zgoda-check:before { content: '\f0c8'; font: var(--fa-font-regular); font-size: 16px; }
form .zgoda.err .zgoda-check:before { color: #900 !important; }
form .zgoda.check .zgoda-check:before { content: '\f14a'; }
form .infRodo { padding: 10px 0; font-size: 10px; opacity: 0.8; }
form .akcja { padding: 0 5%; }
form .akcja input { border: none; min-width: 193px; padding: 0.6em 3em; height: 50px; display: block; text-align: center; background: #fff; border-radius: 10px; margin: 10px 0; text-transform: none; font-size: 20px; font-weight: 700; width: 100%; color: var(--kolorOFB); cursor: pointer; transition: 0.5s; }
form .akcja input:hover { background: rgba(255, 255, 255, 0.8); }

#kontakt { background-image: linear-gradient(#fafafa calc(100% - 210px), #000000 calc(100% - 210px)); padding: 80px 0; }
#kontakt .wrapper { max-width: 945px; }
#kontakt .txt { margin: 4% 5%; width: 70%; }
#kontakt .header { line-height: 1; }
#kontakt .header h1 { font-size: 30px; font-weight: 600; }
#kontakt .header h2 { font-size: 30px; font-weight: 400; }
#kontakt .items-kontakt { margin: 5%; }
#kontakt .items-kontakt .ittm { display: flex; gap: 30px; }
#kontakt .items-kontakt .item-tel { font-size: 35px; font-weight: 700; color: var(--kolorOFB); }
#kontakt .items-kontakt .item-bs .itms { font-size: 12px; line-height: 1.5; margin: 5% 0; gap: 20px; }
#kontakt .items-kontakt .item-bs .itms .itm-p { text-align: right; }
#kontakt .formularz { border: 1px solid var(--kolorOFB); border-radius: 10px; position: relative; background: #fafafa; }
#kontakt .formularz h2 { font-size: 22px; line-height: 1.2; }
#kontakt .formularz h2 span { display: block; }
#kontakt .formularz .lub { position: absolute; top: 0; transform: translateY(-50%); left: 30px; background: #fafafa; color: var(--kolorOFB); padding: 0 1em; }
#kontakt .formularz form { margin: 5% 5% 0; }
#kontakt .formularz form .inputs .input input { font-size: 17px; background: #fff; }
#kontakt .formularz form .zgody { padding: 0 5%; }

#deweloper { margin-top: -1px; background: #000; color: #000; }
#deweloper .wrapper { margin: auto; }
#deweloper .logo-vd img { max-width: none; width: 232px; }
#deweloper .txt { font-size: 15px; line-height: 1.6; font-weight: 300; }
#deweloper .txt strong { font-weight: 700; }
#deweloper .ukryj [data-href="czytaj-wiecej"] { font-weight: 600; color: var(--kolorOFB); display: flex; justify-content: flex-start; align-items: center; gap: 5px; text-transform: uppercase; cursor: pointer; }
#deweloper .ukryj .txtukryj { display: none; overflow: hidden; }
#deweloper .ukryj .txtukryj.is-visible { display: block; }

#Footer .footer-vd { background: #F3F5F4; border-radius: 10px; padding: 5% 10%; }
#Footer .footer-vd .logotypy { mix-blend-mode: multiply; }
#Footer .footer-vd .logotypy img { width: 120px; height: auto; max-width: none; filter: grayscale(1); }
#Footer .footer-vd .logotypy img.pzfd { height: 65px; width: auto; }
#Footer .footer-vd .items { flex-wrap: nowrap; }
#Footer .footer-vd .items .logo-vd { height: 80px; }
#Footer .footer-vd .items .logo-vd img { display: block; height: 100%; }
#Footer .footer-vd .items .item-1 { width: 60%; }
#Footer .footer-vd .items .item-1 .txt { font-size: 13px; line-height: 1.3; margin-top: 20px; }
#Footer .footer-vd .items .item-tel { font-size: 22px; font-weight: 500; align-self: flex-start; padding-top: 20px; }
#Footer .footer-vd .items-menu ul { list-style: none; display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; font-size: 12px; font-weight: 400; white-space: nowrap; }
#Footer .footer-copy { padding: 15px 0 30px; }
#Footer .footer-copy .txt { font-size: 10px; font-weight: 300; }
#Footer .footer-copy .items { font-size: 11px; margin-top: 15px; font-weight: 300; }
#Footer .footer-copy .items .item-copy { width: 60%; display: flex; line-height: 1; }
#Footer .footer-copy .items .item-copy a { display: block; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--kolor1); }

#logo_VD { position: fixed; left: 0; top: 0; transition: 0.5s; width: 120px; height: 81px; display: flex; background: #000; z-index: 99999; display: none; }
#logo_VD a { display: block; margin: auto; }
#logo_VD a img { display: block; width: 73px; }

/* formularz telefon */
.formTel { --k1: #fff; --k2: #bbb; /*#d47c52;*/ --k3: #000; --wForm: 450px; position: fixed; top: 150px; right: 0; width: var(--wForm); color: #FFF; background: #000; z-index: 999999999; transition: right 1s; }
.formTel .srodek { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }
.formTel .zamknij { position: absolute; right: 15px; top: 17px; cursor: pointer; color: var(--k3); z-index: 9; }
.formTel .zamknij:before { font: var(--fa-font-regular); content: '\f00d'; font-size: 25px; font-weight: 300; }
.formTel .click { background: var(--k3); color: var(--k1); position: absolute; width: auto; height: auto; padding: 6px 1.5em 10px; transform: rotate(90deg); transform-origin: left top; z-index: 0; opacity: 0; cursor: pointer; box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2); transition: 1s; display: flex; border-top: 5px solid var(--k2); }
.formTel .click .tytul { white-space: nowrap; margin: auto; }
.formTel .click .tytul span { display: block; }
.formTel .click .tytul span:first-child { font-weight: 300; font-size: 12px; line-height: 1; text-align: center; }
.formTel .click .tytul span:last-child { font-weight: 700; font-size: 13px; }
.formTel .wrap { background: var(--k1); border-left: 20px solid var(--k2); padding: 20px; position: relative; z-index: 1; font-size: 16px; text-align: left; color: var(--k3); }
.formTel .wrap h3 { font-size: 25px; font-weight: 700; margin: 0 0 15px; }
.formTel .wrap h3 span { display: inline; }
.formTel .wrap .telefonNr { display: inline-block; font-size: 30px; font-weight: 300; margin-bottom: 10px; padding: 0; }
.formTel .wrap h4 { font-size: 12px; font-weight: 500; margin: 0; line-height: 1.2em; }
.formTel .wrap h4 span { display: inline; }
.formTel .wrap form { margin: 20px 0 0; }
.formTel .wrap form .inputy { grid-template-columns: 1fr; }
.formTel .wrap form .inputy .input { grid-column: auto; }
.formTel .wrap form .inputs { grid-template-columns: 1fr; grid-gap: 0; }
.formTel .wrap form .inputs .input { width: 100%; margin: 0 0 10px !important; border: none; border-bottom: 2px solid var(--k2); border-radius: 0; position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 10px; }
.formTel .wrap form .inputs .input:first-child { grid-column: auto; }
.formTel .wrap form .inputs .input.telefon:before { color: var(--k1); }
.formTel .wrap form .inputs .input.email:before { color: var(--k1); }
.formTel .wrap form .inputs .input label { position: relative; }
.formTel .wrap form .inputs .input input { color: var(--k3); font-family: 'Lato'; border: none; font-size: 15px; line-height: 1.5; padding: 0 0 0.5em 0; margin: 0; }
.formTel .wrap form .inputs .input.err.telefon:before, .formTel .wrap form .inputs .input.err.email:before { color: #F00 !important; }
.formTel .wrap form .zgody .tr.zgoda { color: var(--k3); font-size: 9px; line-height: 1.2em; margin: 0 auto 10px; }
.formTel .wrap form .zgody .tr.zgoda .check-zgoda:before { color: var(--k3); }
.formTel .wrap form .zgody .tr.zgoda.err .check-zgoda:before { color: #F00; }
.formTel .wrap form .infRodo { color: var(--k3); font-size: 9px; line-height: 1.1em; margin: 3px 0; }
.formTel .wrap form .akcja { text-align: center; margin: 25px auto 0; }
.formTel .wrap form .akcja .wyslij { background: var(--k3); border: 2px solid var(--k3); font-size: 14px; text-transform: uppercase; margin: 0 auto; line-height: 40px; color: var(--k1); }
.formTel .wrap form .akcja .wyslij:hover { text-decoration: none; }
.formTel .wrap form ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); }
.formTel .wrap form :-moz-placeholder { /* Firefox 18- */ color: rgba(255, 255, 255, 0.5); }
.formTel .wrap form ::-moz-placeholder { /* Firefox 19+ */ color: rgba(255, 255, 255, 0.5); }
.formTel .wrap form :-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }
.formTel.off { right: calc(-1 * var(--wForm)); }
.formTel.off .srodek { box-shadow: none; }
.formTel.off .click { opacity: 1; }
.formTel.formTelMakieta .click, .formTel.formTelMakietaFrontPage .click { display: none; }
.formTel.formTelMakieta .mieszkanie:first-letter, .formTel.formTelMakietaFrontPage .mieszkanie:first-letter { text-transform: uppercase; }

#tloFormTel { display: none; }
#tloFormTel.on { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; opacity: 0.7; display: block; z-index: 9; }

/* TABLET: od 768px */
@media (min-width: 768px) { .tytul { font-size: 50px; }
  .podtytul { font-size: 13px; }
  #Header { top: 20px; right: 5%; left: auto; }
  #Header .content { border-radius: 28px; padding: 0 20px; }
  #Header .content .items-header-nawigacja { gap: 10px; height: 64px; }
  #Header .content .items-header-nawigacja .logo img { height: 22px; }
  #Header .content .items-header-nawigacja .mieszkania { /*display: inline-block;
text-transform: uppercase;
font-size: 13px;
line-height: 1.2;
margin: auto 0 auto 20px;
color: var(--kolorOFB);
border: 1px solid var(--kh);
border-radius: 30px;
padding: 0.6em 1.4em;
font-weight: 500;
background: #fff;
transition: background 0.3s ease, color 0.3s ease;*/ }
  #Header .content .items-header-nawigacja .mieszkania:hover { background: var(--kolorOFB); color: #fff; }
  #Header .content .items-header-nawigacja .btn-header { width: 42px; height: 42px; }
  #Header .content .items-content-nawigacja .menu-glowne-container ul { padding: 24px; font-size: 20px; }
  #Header::before { border-radius: 32px; }
  #hero { height: calc(100dvh - 110px); }
  #hero .hero-media.desktop, #hero .hero-video.desktop { display: block; }
  #hero .hero-media.mobile, #hero .hero-video.mobile { display: none; }
  .kwadrat .content { grid-template-columns: 1fr 1fr; }
  #cechy .gcechy div div { font-size: 12px; }
  .full-panel .content .haslo h3 { font-size: 12px; }
  #Footer .footer-vd .items-menu ul { flex-direction: row; } }
/* DESKTOP: od 1024px */
@media (min-width: 1024px) { #Header { top: 20px; right: 5%; left: auto; }
  #Header .content { border-radius: 31px; padding: 0 24px; }
  #Header .content .items-header-nawigacja { justify-content: flex-end; height: 64px; }
  #Header .content .items-header-nawigacja .logo { margin: auto; }
  #Header .content .items-header-nawigacja .logo img { height: 23px; }
  #Header .content .items-header-nawigacja .mieszkania { margin: auto 0 auto 30px; font-size: 14px; }
  #Header .content .items-content-nawigacja .menu-glowne-container ul { padding: 30px; font-size: 24px; gap: 15px; }
  #Header .btn-form { font-size: 11px; padding: 1em 25px 0.5em; }
  #Header::before { border-radius: 34px; } }