html {scroll-behavior: smooth}

body {margin: 0px; padding: 0px; font-family: 'Montserrat', Arial; font-size: var(--font); line-height: var(--line-height); cursor: default; color: var(--text-color); background-color: var(--background-color); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none}

p {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px}

sup {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 9px}

ul, ol {margin: 0px 20px 0px 20px; padding: 0px; text-indent: 0px; text-align: left}
li {margin: 0px 20px 0px 20px; padding: 0px; text-indent: 0px}

ol ul li {list-style-type: lower-alpha} 

A:link, A:visited {color: #333333; text-decoration: none}
A:hover, #go:hover {color: #111111; text-decoration: none}

form, input, textarea {font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); margin: 0px; padding: 0px}
input, select, option {font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); height: calc(var(--font) + 4)}

.wrapper-init {display: table; margin: 0px auto}
.wrapper-row {display: table-row}
.wrapper-body	{display: table-row-group}
.wrapper-cell {display: table-cell}

h1 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); color: var(--text-color)}
h2 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); color: var(--text-color)}

hr {margin: 8px 0px 8px 0px; padding: 0px; border: 0px; width: 100%; height: 1px; color: #000000; background-color: #000000}

#logo {vertical-align: middle}

#menuall1 {width: 100%; display: block; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0px; z-index: -1}
#menuall1 .wrapper-cell {height: 83px}
#menuall1 .wrapper-cell img {margin-right: 4px; vertical-align: middle}
#menuall1 .wrapper-cell:nth-child(1) {width: 395px}
#menuall1 .wrapper-cell:nth-child(3) {width: 36px; vertical-align: middle}
#menuall1 .wrapper-cell:nth-child(2) {width: 255px; text-align: left; color: #FFF906; text-shadow: 2px 2px 2px rgba(0,0,0,1); font-size: 16px; line-height: 24px; font-weight: 600; vertical-align: middle}
#menuall1 .wrapper-cell:nth-child(4) {width: 294px; text-align: left; color: #FFF906; text-shadow: 2px 2px 2px rgba(0,0,0,1); font-size: 16px; line-height: 24px; font-weight: 600; vertical-align: middle}
#menuall2 {width: 100%; height: 60px; display: block; background-color: var(--back-color-menu); box-shadow: 4px 4px 10px 6px rgba(0, 0, 0, 0.35); position: absolute; top: 83px; z-index: -1}

#logotop {width: 100%; display: block}
#logotop .wrapper-cell {text-align: right; vertical-align: top}
#logotop .wrapper-cell img {margin-top: 8px; vertical-align: top}

div.odstep {width: 100%; display: block; min-height: 18px; background-image: url('data/images/line.png'); background-repeat: repeat-x}

#menu {margin-top: 0px; text-align: center; font-family: var(--font-name-menu); padding-top: 0px}
#menu a {margin-left: var(--odstepwmenu); margin-right: var(--odstepwmenu); color: var(--text-color-menu); font-weight: var(--fontmenubold); padding-top: 4px; padding-bottom: 4px; padding-left: 14px; padding-right: 14px}
#menu a:hover {background-color: black; color: #FFE709}
#menu a:nth-child(1):hover {background-color: #FFE709}
#wysokoscmenu {display: block}

h1.o_firmie, h1.oferta, h1.galeria, h1.polityka_cookies {background: #FFE709; color: #000000; margin: 0px; text-align: center; text-transform: uppercase; font-family: 'Montserrat'; font-weight: 900; vertical-align: middle; width: 100%; display: block; line-height: 48px; height: 48px}
h1.kontakt {color: #000000; text-align: center; text-transform: uppercase; font-family: 'Montserrat'; font-weight: 900; vertical-align: middle; width: 100%; display: block; margin: 0px; line-height: 48px; height: 48px}
h1.galeria {box-shadow: inset 0px 5px 10px 0px rgba(0,0,0,0.5)}

div.back_o_firmie {background: #FFFFFF url('data/images/back-o_firmie.jpg') center top; background-size: cover; background-repeat: no-repeat; min-height: 200px; font-weight: 600; text-shadow: 2px 2px 2px rgba(255,255,255,1)}
div.back_oferta {background: #FFFFFF url('data/images/back-oferta.jpg') center top; background-size: cover; background-repeat: no-repeat; font-weight: 600}
div.back_galeria {min-height: 300px; background-color: rgba(0, 0, 0, 0.7)}
div.galeria {min-height: 200px; text-align: center}
div.back_kontakt {background: #FFFFFF url('data/images/back-kontakt.jpg') center top; background-size: cover; background-repeat: no-repeat}
div.kontakt {width: 100%}
div.polityka_cookies {background: #FFFFFF}
div.shadow {background: url('data/images/shadow.png'); background-repeat: repeat-x; height: 16px; width: 100%}

div.panel, div.wrapper-init {margin: 0px auto 0px auto}

#preview {display: none; position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); font: bold 10px Verdana, Arial, Helvetica; color: #888888; text-align: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; z-index: 1}
#content {position: fixed; width: 100%; height: 80%; left: 50%; top: 50%; border: 0px solid white; transform: translate(-50%, -50%)}
img.preview {cursor: pointer}
#image {border: 2px solid white; box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.5); cursor: pointer}

div.oferta ul li {list-style-type: none; margin: 8px 0px 8px 0px; vertical-align: middle; padding-left: 20px}
div.oferta ul li:before {content: ""; display: inline-block; width: 25px; height: 22px; margin-left: -30px; margin-right: 5px; background-image: url("data/images/icon-triangle.png"); vertical-align: middle}

div.oferta_rest {width: 100%; margin-bottom: 8px; background-color: #D80100; text-align: center; vertical-align: middle}
div.oferta_rest img {margin-top: 8px; margin-bottom: 8px; vertical-align: middle}

#footer {text-align: center; width: 100%; min-height: 90px; background-color: black}
#footer .wrapper-cell {margin: auto; padding: 20px 4px 20px 4px; vertical-align: middle}
#footer .wrapper-cell img {margin-right: 4px; vertical-align: middle}
#footer .wrapper-cell a {color: white; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; color: #EEEEEE; line-height: 12px; text-align: center}

#maps1, #maps2 {width: 100%}
#kontakt1, #kontakt2 {position: absolute; background-color: rgba(255, 231, 10, 0.7); width: 100%}

#picturesall {margin-top: 40px; display: block}
#pictures {position: relative; height: 280px; margin-left: auto; margin-right: auto; margin-bottom: 20px; overflow: hidden; white-space: nowrap}

div.picturecolumn {width: 160px; height: 280px; display: inline-block}

div.picture {width: 150px; height: 115px; background-color: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); border-radius: 3px; margin: 5px; display: inline-block}
div.picture {font: normal 11px Arial, Helvetica, sans-serif; color: #FFFFFF; line-height: 16px; text-align: center; text-shadow: 1px 1px 1px #000000}
div.picture:hover {box-shadow: 0px 0px 10px 0px rgba(255,255,255,1)}

div.pip {position: relative; max-width: 140px; max-height: 105px; margin-top: 5px; margin-left: 5px; overflow: hidden; margin-bottom: 7px}
div.picture img {vertical-align: middle; max-width: initial; max-height: initial; float: none}

#leftright img {margin: 0px 20px 40px 20px; filter: drop-shadow(2px 2px 2px #000000); cursor: pointer; opacity: 0.9}
#leftright img:hover {filter: drop-shadow(5px 5px 5px #000000); opacity: 1}



@media screen and (min-width: 1000px) {
body {background-image: url('data/images/banner.jpg'); background-repeat: var(--background-repeat); background-position: var(--background-position); background-size: contain}
div.wrapper-init {width: 1000px}

h1 {font-size: 34px}

#wysokoscmenu {min-height: var(--wysokoscmenu); vertical-align: middle}
#menu {font-size: var(--fontmenu); vertical-align: middle}

hr.odstep {display: inline-block; margin: 0px 0px 0px 0px; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5); padding: 0px; width: 3px; height: 48px; background-color: #FFF923; vertical-align: middle}

hr.odstepshort {display: inline-block; margin: 0px 1px 0px 1px; padding: 0px; width: 3px; height: 38px; background-color: black; vertical-align: middle}

#logotop {margin-top: -100px}
#logotop .wrapper-cell:nth-child(1) {width: 100%; vertical-align: middle}
#logotop .wrapper-cell:nth-child(1) img {width: 20vw; float: right}

div.logo-pd {display: block}
div.tel {display: none}

#image {width: auto; height: 80vh}

div.o_firmie .wrapper-cell:nth-child(1) {width: 240px}
div.o_firmie .wrapper-cell:nth-child(2) {width: 400px; vertical-align: middle}
div.o_firmie .wrapper-cell:nth-child(3) {width: 360px; vertical-align: middle}
div.o_firmie .wrapper-cell:nth-child(3) img {margin-left: 20px; margin-top: 30px; margin-bottom: 30px; border: 2px solid white; box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.5)}  

div.oferta .wrapper-cell:nth-child(1) {width: 400px; vertical-align: middle}
div.oferta .wrapper-cell:nth-child(2) {padding-top: 30px; padding-bottom: 30px; width: 600px; vertical-align: middle}
div.oferta .wrapper-cell:nth-child(1) img {margin-top: 10px; width: 380px; vertical-align: middle}

#maps1, #maps1 iframe {height: 450px}
#maps2, #maps2 iframe {height: 225px}
#kontakt1 {margin-top: -450px; height: 225px}
#kontakt2 {margin-top: -225px; height: 40px}

#kon1 {width: 1000px; font-size: 16px; line-height: 24px; font-weight: 600}
#kon1 .wrapper-cell {width: 300px; vertical-align: top; padding-top: 10px}
#kon1 .wrapper-cell:nth-child(1) img {width: 240px; height: 160px}
#kon1 .wrapper-cell:nth-child(2) {width: 300px; vertical-align: top; padding-top: 40px}
#kon1 .wrapper-cell:nth-child(2) img {margin-right: 4px; vertical-align: middle}
#kon1 .wrapper-cell:nth-child(3) {width: 400px; vertical-align: top; padding-top: 40px}
#kon1 .wrapper-cell:nth-child(3) img {margin-right: 4px; vertical-align: middle}
#kon1 .wrapper-cell:nth-child(3) a {color: #111111}
#kon1 .wrapper-cell:nth-child(3) a:hover {color: #000000}

#kon2 {width: 1000px; font-size: 16px; line-height: 24px; font-weight: 600}
#kon2 .wrapper-cell:nth-child(1) {width: 1000px; text-align: center} 
#kon2 .wrapper-cell:nth-child(1) hr {margin: 8px 0px 8px 0px; padding: 0px; border: 0px; width: 100%; height: 3px; color: #000000; background-color: #000000}

#kon3 {width: 1000px; height: 40px; font-size: 16px; line-height: 24px; font-weight: 600}
#kon3 .wrapper-cell:nth-child(1) {width: 1000px; height: 40px; text-align: center; vertical-align: middle}

#footer .wrapper-cell a {font-size: 10px}

#picturesall {width: 1000px; margin-left: auto; margin-right: auto}
}



@media screen and (max-width: 1000px) {
body {font-size: 20px; line-height: 28px}
.wrapper-cell {display: block}
div.wrapper-init {width: 100%}

h1 {font-size: 30px}

#logo {width: 70%}

#logotop {margin-top: 0px}
#logotop .wrapper-cell:nth-child(1) {width: 100%; padding-top: 20px; padding-bottom: 20px; text-align: center; font-weight: 800; color #FFE70A; letter-spacing: 2px; background-image: url('data/images/banner.jpg'); background-repeat: var(--background-repeat); background-position: center center; background-size: cover; box-shadow: inset 0px 4px 10px 0px rgba(0,0,0,0.5)}

div.tel p:nth-child(1) {border-top-left-radius: 10px; border-top-right-radius: 10px}
div.tel p:nth-child(1) {margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 10px 10px 0px 10px; font-size: 20px; line-height: 24px; color: #FFE70A; text-shadow: 4px 4px 6px rgba(0,0,0,1); text-align: center; width: 90%; background-color: rgba(0, 0, 0, 0.3)}
div.tel p:nth-child(2) {margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 10px; padding: 40px 10px 10px 10px; font-size: 34px; line-height: 38px; color: #FFE70A; text-shadow: 4px 4px 6px rgba(0,0,0,1); width: 90%; background-color: rgba(0, 0, 0, 0.3)}
div.tel p:nth-child(2) {border-bottom-left-radius: 10px; border-bottom-right-radius: 10px}
div.tel p:nth-child(2) a {color: #FFFF00}
div.tel p:nth-child(2) img {margin-right: 10px; vertical-align: middle; filter: drop-shadow(5px 5px 5px #000000)}
span.bigger {font-size: 32px}
 
div.logo-pd {display: none}
div.tel {display: block; vertical-align: middle}

#wysokoscmenu {background-color: var(--back-color-menu); padding-bottom: 5px}
#menu {font-size: 30px; line-height: 38px}
#menu a {display: block}

#menuall1 {display: none}
#menuall2 {display: none}

hr.odstepshort {display: block; margin: 2px auto 2px auto; padding: 0px; width: 80%; height: 2px; background-color: black; vertical-align: middle}

div.o_firmie, div.oferta, div.galeria, div.kontakt {padding-left: 20px; padding-right: 20px; font-size: var(--fontmobile); line-height: var(--line-height-mobile)}
div.kontakt, div.galeria {padding: 0px}
div.polityka_cookies {padding-left: 20px; padding-right: 20px; font-size: var(--fontmobile); line-height: var(--line-height-mobile)}

div.o_firmie .wrapper-cell:nth-child(3) {padding-bottom: 20px}
div.oferta .wrapper-cell:nth-child(2) {padding-bottom: 30px}

#image {width: 80vw; height: auto}

div.o_firmie .wrapper-cell:nth-child(3) {text-align: center}
div.o_firmie .wrapper-cell:nth-child(3) img {margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; width: 70%; border: 2px solid white; box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3)}  

div.o_firmie img {display: block; margin-bottom: 20px; width: 50%}
div.oferta img {display: block; border: 2px solid white; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 0px; width: 70%}

div.oferta_rest img {width: 95%}

#maps1, #maps1 iframe {height: 650px}
#maps2, #maps2 iframe {height: 225px}
#kontakt1 {margin-top: -650px; height: 445px}
#kontakt2 {margin-top: -225px; height: 40px}

#kon1 {width: 100%; font-size: 16px; line-height: 24px; font-weight: 600}
#kon1 .wrapper-cell {text-align: center; vertical-align: top}
#kon1 .wrapper-cell:nth-child(1) {min-height: 160px; padding-top: 6px}
#kon1 .wrapper-cell:nth-child(1) img {width: 240px; height: 160px}
#kon1 .wrapper-cell:nth-child(2) {vertical-align: top}
#kon1 .wrapper-cell:nth-child(2) img {vertical-align: middle; margin-right: 4px}
#kon1 .wrapper-cell:nth-child(3) {vertical-align: top}
#kon1 .wrapper-cell:nth-child(3) img {vertical-align: middle; margin-right: 4px}
#kon1 .wrapper-cell:nth-child(3) a {color: #111111}
#kon1 .wrapper-cell:nth-child(3) a:hover {color: #000000}

#kon2 {width: 100%; font-size: 16px; line-height: 24px; font-weight: 600}
#kon2 .wrapper-cell:nth-child(1) {text-align: center} 
#kon2 .wrapper-cell:nth-child(1) hr {padding: 0px; border: 0px; width: 100%; height: 3px; color: #000000; background-color: #000000}

#kon3 {width: 100%; min-height: 40px; font-size: 16px; line-height: 40px; font-weight: 600; vertical-align: middle}
#kon3 .wrapper-cell:nth-child(1) {min-height: 40px; text-align: center; vertical-align: middle}

#footer .wrapper-cell a {font-size: 10px}

#pictures {width: 90vw; position: relative}
#picturesall {width: 100%}
}