body, html { margin: 0; padding: 0; overflow-x: hidden; }

@font-face { font-family: Montserrat; src: url('https://hardbeans.com/files/feb3f172-a144-4c5b-ae7f-bca76c347ead'); font-style: normal; font-weight: 100 500; }
@font-face { font-family: Montserrat; src: url('https://hardbeans.com/files/fc9beecf-0bca-4fee-93a0-9c1687cc24b8'); font-style: normal; font-weight: 600 1000; }
@font-face { font-family: MyriadPro; src: url('https://hardbeans.com/files/feed731c-bf83-460e-a2db-f91734e153b1'); font-style: normal; font-weight: 100 500; }
@font-face { font-family: MyriadPro; src: url('https://hardbeans.com/files/12fcfb56-b765-45fe-a4e4-49f0bbb8ba25'); font-style: normal; font-weight: 600 1000; }
@font-face { font-family: GT-Sectra; src: url('https://hardbeans.com/files/18554b89-70dc-4ed0-97f5-50629342bfc2'); font-style: normal; font-weight: 100 400; }
@font-face { font-family: GT-Sectra; src: url('https://hardbeans.com/files/dbbb93de-09b9-4862-8200-09bdf4c5906a'); font-style: normal; font-weight: 500 700; }
@font-face { font-family: GT-Sectra; src: url('https://hardbeans.com/files/e0614aed-02cb-4a83-b5be-f6521c66352a'); font-style: normal; font-weight: 800 1000; }

.page-container { padding: 0; margin: 0 auto; width: 100vw; max-width: unset !important; }
.page-container > div { padding: 0; margin: 0; }
.page-container p { display: contents; }
.page-container section p { display: block; font-family: Montserrat; }
.page-container summary { display: block; }
.page-container section p, .page-container h2, .page-container h3, .page-container h4, .page-container div { font-size: 1.2vw; line-height: 1.3em; }
.page-container br, .page-container h1 { display: none; }
.page-container section { position: relative; margin: 0; padding: 0; }
.page-container section * { margin: 0; padding: 0; }
.page-container + div > div:first-child { display: none; }
.page-container input { background-image: none !important; }
.page-container li { list-style-type: none; }

.page-container h2, .page-container h3 { background-color: #964b2d; color: #f3e4bf; font-family: GT-Sectra; letter-spacing: 0.06em; text-transform: uppercase; }
.page-container h2 { font-weight: 900; font-size: 3vw; text-align: center; padding: 1em 5vw; }
.page-container h3 { font-weight: 400; font-family: Montserrat; font-size: 2vw; text-align: center; margin-left: auto; padding: 1em 5vw; }
.page-container h4 { color: #964b2d; font-size: 3vw; font-family: GT-Sectra; } 
.page-container h5 { color: black; font-size: 1.5vw; font-family: Montserrat; } 

@media (width < 720px) {
.page-container h2 { font-size: 4.4vw; padding: 1em 0; }
.page-container h3 { font-size: 2.8vw; }
.page-container section p { font-size: 0.875rem; }
}

.header h2 { padding-bottom: 0; }
.header p { margin: 2vw 5vw; }

.produkty { padding-bottom: 2vw !important; background-image: url('https://hardbeans.com/picture/files/opolanka-wizka-swieta.png'); background-size: auto 400vw; background-attachment: fixed; background-position: center right; }
.produkty div { background-color: rgba(255,255,255,0.8); }

@media (width >= 720px) {
.produkty div { display: flex; justify-content: space-between; margin: 0 4vw; padding: 0 4vw; align-items: center; gap: 5vw;}
.produkty div:nth-of-type(odd) { flex-direction: row; background-position: right; }
.produkty div:nth-of-type(even) { flex-direction: row-reverse; background-position: left; }
.produkty p { position: relative; text-align: center; padding: 2vw 0; }
.produkty p span { position: relative; z-index: 3; }
.produkty p::before { content: " "; display: block; background-color: #f9f2d7; position: absolute; z-index: 1; width: 90vw; height: 100%; top: 0; }
.produkty div:nth-of-type(odd) p::before { right: -3vw; }
.produkty div:nth-of-type(even) p::before { left: -3vw; }
.produkty div img { position: relative; z-index: 3; width: 45vw; height: 30vw;}
.produkty div:last-of-type img { height: 45vw; }
.produkty h4 { display: block; position: relative; top: 6vw; margin: 0 4vw; background-color: white; }
.produkty h5 { display: block; position: relative; top: 6vw; margin: 0 4vw; background-color: white; }
.produkty h4:nth-of-type(odd) { text-align: right; padding-right: 4vw; }
.produkty h4:nth-of-type(even) { text-align: left; padding-left: 4vw; }
.produkty h5:nth-of-type(odd) { text-align: right; padding-right: 4vw; }
.produkty h5:nth-of-type(even) { text-align: left; padding-left: 4vw; }
}

@media (width < 720px) {
.produkty div { display: flex; flex-direction: column; margin: 0 3vw; }
.produkty p { position: relative; background-color: #f9f2d7; padding: 2em; }
.produkty div img { width: 60vw; height: 40vw; position: relative; }
.produkty div:nth-of-type(odd) img { margin-right: auto; }
.produkty div:nth-of-type(even) img { margin-left: auto; }
.produkty div:last-of-type img { height: 60vw; }
.produkty > h4 { font-size: 4.5vw; }
.produkty > h5 { font-size: 2.5vw; }
.produkty h4 { display: block; position: relative; top: 8.5vw; margin: 0 3vw; background-color: white; }
.produkty h5 { display: block; position: relative; top: 8.5vw; margin: 0 3vw; background-color: white; }
.produkty h4:nth-of-type(odd) { text-align: right; padding-right: 3vw; }
.produkty h4:nth-of-type(even) { text-align: left; padding-left: 3vw; }
.produkty h5:nth-of-type(odd) { text-align: right; padding-right: 3vw; }
.produkty h5:nth-of-type(even) { text-align: left; padding-left: 3vw; }
}

.skontaktuj { background-color: #f3e4bf; }
.skontaktuj h3 { text-align: left; }
.skontaktuj .email a, .skontaktuj .tel a { font-weight: 200; color: #303030; }
.skontaktuj .email, .skontaktuj .tel { font-size: 2vw; }
.skontaktuj figure { display: flex; justify-content: right; align-items: center; height: stretch; flex-direction: row-reverse; }
.skontaktuj img { position: relative; width: 24vw; margin-top: -10vw; z-index: 2; }
.skontaktuj figcaption { font-family: Montserrat; padding-bottom: 4vw; }
.skontaktuj h4 { margin-bottom: 1vw; font-size: 2vw; }
.skontaktuj .tel::before { margin-right: 0.6em; display: inline-block; width: 0.8em; height: 0.8em; content: ' '; background-size: 100%; background-image: url('https://hardbeans.com/files/02c6b3ff-dd9b-408c-b83e-8586a6a658ac'); }
.skontaktuj .email::before { margin-right: 0.6em; display: inline-block; width: 0.8em; height: 0.8em; content: ' '; background-size: 100%; background-image: url('https://hardbeans.com/files/a067adc6-48b6-4684-b593-4326c188b21b'); }

@media ( width < 720px ) {
.skontaktuj h3 { padding-right: 30vw; }
.skontaktuj img { width: 32vw; margin-top: -18vw; }
.skontaktuj h4 { font-size: 1rem; }
.skontaktuj .email, .skontaktuj .tel { font-size: 0.875rem; }
}