@font-face {font-family: 'Saira Condensed'; src: url('graphic/fonts/SairaCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap}
@font-face {font-family: 'Saira Condensed'; src: url('graphic/fonts/SairaCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap}

@font-face {font-family: 'Roboto'; src: url('graphic/fonts/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap}
@font-face {font-family: 'Roboto'; src: url('graphic/fonts/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap}

html {scroll-behavior: smooth}

body {margin: 0; padding: 0; font-size: 16px; font-family: 'Saira Condensed', sans-serif; cursor: default; color: var(--text-color); background-color: var(--background-color); background-size: 100% auto; background-image: var(--background-file); background-repeat: var(--background-repeat); background-position: var(--background-position); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none}

h1 {margin: 0; padding: 0}

a {color: #4040FF; text-decoration: none; outline: none}
a:hover {color: #0000FF}

p {margin: 0; padding: 0}

span.dzien {display: inline-block; width: 120px}

div.footer {display: flex; width: 100%; justify-content: center; align-items: center; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 10px; color: #cccccc}
div.footer a {color: #888; text-align: center}
div.footer a:hover {color: #666}

div.footer a img {vertical-align: middle; opacity: 0.5; margin-right: 4px}
div.footer a:hover img {opacity: 1.0}

div.hero-container {position: relative; width: 100%; display: flex; flex-direction: row; align-items: center; height: 680px; background-image: url('graphic/up-text.jpg'); background-repeat: no-repeat; background-position: center 0px; overflow: visible}
div.hero-container-wrapper {width: 100%; height: calc(100% - 50px); max-width: 990px; margin: 0 auto; z-index: 11}
div.hero-container-columns {display: flex; align-items: flex-start}
div.hero-container-left {width: 400px; padding-top: 20px}
div.hero-container-right {width: 495px; padding-top: 5px; text-align: right; float: right}
div.hero-container-fblogo {width: 95px; padding-top: 15px; text-align: right; float: right}
div.hero-container-right a {display: inline-flex; flex-direction: column; align-items: right; justify-content: flex-end; color: white; font-size: 20px; font-family: 'Saira Condensed'; background-color: #BA2F7E; border: 4px solid white; border-radius: 8px; padding: 20px 60px 20px 60px}
img.fblogo {width: 60px; height: 60px; padding: 0px; border: none}

div.hero-wave-background {position: absolute; bottom: -80px; left: 0; width: 100%; height: 395px; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 395'%3E%3Cpath fill='%23E00880' d='M1999 274.04l0 -271.97c-66,330.43 -1186.31,388.34 -1932.99,146.02 534.2,225.31 1311.18,285.43 1932.99,125.95z'/%3E%3Cpath fill='%23720460' d='M0 248.48c171.59,41.61 327.17,53.87 465.43,34.38l125 29.16c-189.12,62.23 -386.03,60.69 -590.43,-2.08l0 -61.46z'/%3E%3Cpath fill='%238B004D' d='M1999 274.04l0 61.02c-645.5,100.28 -1337.79,75.19 -1833.59,-147.95 552.35,191.51 1184.58,210.23 1833.59,86.93l0 61.02 0 -61.02z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center bottom; background-size: 2000px 395px}

div.menu {margin-top: 290px}
div.menu-inner {width: 100%; max-width: 990px; padding: 10px 0px 10px 0px; margin: 0 auto; text-align: center; align-items: center; justify-content: center; display: flex; z-index: 20; pointer-events: auto}
div.menu-inner div {display: inline-block; margin-left: 25px; margin-right: 25px}
div.menu-inner div a {color: white; font-family: 'Roboto'}
div.menu-inner div:nth-child(1) a {position: relative; top: -6px}
div.menu-inner div:nth-child(2) a {position: relative; top: 2px}
div.menu-inner div:nth-child(3) a {position: relative; top: 8px}
div.menu-inner div:nth-child(4) a {position: relative; top: 10px}

div.theme-onas {position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; background-image: url('graphic/theme-onas.jpg'); background-repeat: no-repeat; background-position: center 0px; z-index: 1; padding-top: 80px}
div.theme-onas h1 {margin-bottom: 20px}
div.theme-onas-wrapper {width: 100%; max-width: 990px}
div.theme-onas-text-only {display: block; text-align: left}
div.theme-onas-text-only p {max-width: 680px}
div.theme-onas-columns {display: flex; align-items: flex-start}
div.theme-onas-zdjecie {width: 208px; padding-top: 4px; flex-shrink: 0; justify-content: center; align-items: center}
div.theme-onas-zdjecie p {text-align: center}
div.theme-onas-zdjecie p:nth-child(3) {font-size: 12px}

div.theme-onas-tekst {width: 472px; padding-left: 20px}

div.theme-stomatologia {position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-image: url('graphic/theme-stomatologia.jpg'); background-repeat: no-repeat; background-position: center 0px; z-index: 1; margin-top: 30px}
div.theme-stomatologia-zdjecia {width: 990px; display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0px; padding: 20px 20px 40px 0px}
div.theme-stomatologia-zdjecie {display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box; flex: 0 0 calc(25% - 20px); padding-bottom: 100px}
div.theme-stomatologia-zdjecie img {max-width: 100%; height: auto; display: block}
div.theme-stomatologia-zdjecie p {margin-top: 10px; font-size: 14px}
div.theme-stomatologia-zdjecie p:nth-child(2) {color: #E20880; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)}

div.theme-stomatologia h1 {width: 990px; margin-top: 20px; text-align: left}
h1.stomatologia, h1.kontakt {color: #E20880}

div.theme-kontakt {position: relative; width: 100%; display: flex; flex-direction: column; align-items: left; justify-content: flex-start; background-image: url('graphic/theme-kontakt.jpg'); background-repeat: no-repeat; background-position: center 0px; z-index: 1; margin-top: 30px}
div.theme-kontakt h1 {margin-top: 20px}
div.theme-kontakt-wrapper {width: 100%; max-width: 990px; margin: 0 auto}
div.theme-kontakt-text-only {display: block; text-align: left}
div.theme-kontakt-columns {display: flex; align-items: flex-start}
div.theme-kontakt-tekst {width: 50%; flex-shrink: 0; justify-content: left; align-items: center}
div.theme-kontakt-formularz {width: 50%; flex-shrink: 0; justify-content: left; align-items: center}

div.theme-kontakt form {font-family: 'Saira Condensed'; font-size: 16px}
div.theme-kontakt form input {display: block; box-sizing: border-box; width: 370px; margin: 10px 0px; padding: 2px 2px; font-family: 'Saira Condensed'; font-size: 16px; border: 1px solid black}
div.theme-kontakt form input[type=submit] {background-color: #E20880; color: white; padding: 4px 2px; border: none; cursor: pointer}
div.theme-kontakt form textarea {resize: none; box-sizing: border-box; width: 370px; height: 100px; margin: 10px 0px; padding: 2px 2px; font-family: 'Saira Condensed'; font-size: 16px; border: 1px solid black}


@media (min-width: 1000px)
{
h1 {font-size: 40px}

div.hero-container {width: 100%; margin: 0 auto; background-size: 2000px 678px}
div.mobile-menu {display: none}

div.theme-stomatologia-zdjecie {width: 143px; margin: 0px}

div.footer {margin-top: 20px; margin-bottom: 20px}
}



@media (max-width: 999px)
{
div.hero-container {background-image: url('graphic/up.jpg'); background-size: contain; flex-direction: column; align-items: flex-start; aspect-ratio: 2000 / 678; height: auto}
div.hero-container-columns {flex-direction: column; align-items: flex-start}

div.hero-container-left img {width: 50%}
div.hero-container-right a {font-size: 15px; padding: 10px 30px 10px 30px; background-color: #ba2f7e44}

div.hero-wave-background {display: none}

div.mobile-menu {background-color: #BA2F7E}
div.mobile-menu-inner {flex-direction: column; padding-top: 85px; padding-bottom: 15px}
div.mobile-menu-inner div {display: block; text-align: center; width: 100%}

div.mobile-menu-inner div:nth-child(1) a {border-top: 1px solid #8B004D}
div.mobile-menu-inner div a {display: block; width: 80%; margin: 0 auto; border-bottom: 1px solid #8B004D; padding-top: 10px; padding-bottom: 10px; position: static !important; color: white; font-family: 'Roboto'}

div.theme-onas {padding-top: 0px; background-image: none}
div.theme-onas h1 {margin-top: 20px}

div.theme-onas-text-only h1, div.theme-onas-text-only p, div.theme-onas-tekst p, div.theme-onas-zdjecie p, div.theme-kontakt form {margin-left: 10px; margin-right: 10px}
div.theme-onas-zdjecie img {width: 100%}

div.hero-container-left, div.hero-container-right, div.hero-container-fblogo {width: 100%; text-align: center}
img.fblogo {margin-top: 20px; width: 40px; height: 40px}

div.theme-onas-columns {justify-content: center; align-items: start}
div.theme-onas-zdjecie {width: 30%}
div.theme-onas-zdjecie p {text-align: center; margin: 0}
div.theme-onas-zdjecie p:nth-child(2) {font-size: 12px}

div.theme-onas-tekst {width: 60%}

div.theme-stomatologia, div.theme-kontakt {width: 100%; display: block; margin: 0px; padding: 0px; background-size: auto 100%}
div.theme-stomatologia-zdjecia {width: 100%; display: block; margin: 0px; padding: 0px 0px 40px 0px}
div.theme-stomatologia-zdjecie {padding-bottom: 40px}

div.theme-stomatologia h1 {width: 80%; margin-left: 10px; margin-right: 10px; margin-bottom: 40px}

div.theme-kontakt {padding: 0px 0px 40px 0px}
div.theme-kontakt-text-only h1 {padding: 0px 0px 20px 0px}
div.theme-kontakt-text-only h1, div.theme-kontakt-text-only p, div.theme-kontakt-tekst p, div.theme-kontakt-formularz p {margin-left: 10px; margin-right: 10px}
div.theme-kontakt-columns {display: block}

div.footer {margin-top: 20px; margin-bottom: 10px}
div.footer a {padding-left: 10px; padding-right: 10px}
}