body {margin: 0px; padding: 0px; font-family: 'Lato', Arial; font-size: var(--font); line-height: var(--line-height); cursor: default; color: var(--text-color); background-color: var(--background-color); 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; user-drag: none; -webkit-touch-callout: none}

#dark {margin-top: 40px; background-color: #222222; border-radius: 15px}

ul.oferta {margin: 0px 20px 60px 20px; font-weight: bold}
ul.oferta li {margin: 5px 20px 5px 20px}
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: #AAAAAA; text-decoration: none}
A:hover, #go:hover {color: #CCCCCC; 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}

#footer {text-align: center}
#footer .wrapper-cell {height: 90px; margin-left: auto; margin-right: auto; margin-bottom: 40px; padding: 4px 4px 4px 4px; vertical-align: middle}
#footer .wrapper-cell img {margin-right: 4px; vertical-align: middle}
#footer .wrapper-cell a {color: #AAAAAA; line-height: 12px; text-align: center}
#footer .wrapper-cell a:hover {font: normal 10px Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; line-height: 12px; text-align: center}

#logotop {height: 102px}
#logotop .wrapper-cell {text-align: left; vertical-align: top; font-family: 'Lato'}
#logotop .wrapper-cell:nth-child(1) img {margin-top: 8px; vertical-align: middle}
#logotop .wrapper-cell:nth-child(4) img {margin-right: 2px; vertical-align: middle}

#menu {text-align: center; font-family: var(--font-name-menu); padding-top: 10px}
#menu a {margin-left: var(--odstepwmenu); margin-right: var(--odstepwmenu); color: var(--text-color-menu); font-weight: var(--fontmenubold); text-shadow: 4px 4px 4px rgba(0,0,0,0.4)}
#menu a:hover {text-shadow: 4px 4px 4px rgba(0,0,0,1)}
#wysokoscmenu {display: block; background-color: var(--back-color-menu)}

#logo-fb img {vertical-align: middle;}
#logo-fb img {-webkit-filter: drop-shadow(1px 1px 1px #222);}
#logo-fb img:hover {-webkit-filter: drop-shadow(2px 2px 2px #222);}

h1.o_firmie, h1.kontakt, h1.oferta, h1.wspolpraca, h1.polityka_cookies {margin-top: 30px; margin-bottom: 40px; font-family: 'poppinsregular'; text-align: left; vertical-align: middle; color: #FFFFFF; line-height: 50px}

#logotopa .wrapper-cell:nth-child(1) {position: relative; background-color: #222222; z-index: 0; overflow: hidden; background-position: center top; background-size: cover; background-repeat: no-repeat; z-index: -2}
#logotopa .wrapper-cell:nth-child(1)::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(32, 32, 32, 0.6); z-index: -1}

#logotop .wrapper-cell .background-layer {position: absolute; top: 0; left: 0; width: 100%; background-size: cover; background-position: center top; background-repeat: no-repeat; opacity: 0; z-index: -1; transition: opacity 1s ease-in-out; background-color: rgba(32, 32, 32, 0.6); background-blend-mode: multiply}
#logotop .wrapper-cell .background-layer.active {opacity: 1}
#logotop .wrapper-cell .content-wrapper {position: relative; z-index: 2; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center}

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}

#picturesall {margin-top: -100px; display: block; padding-top: 0px; height: 280px}
#pictures {position: relative; height: 380px; padding-bottom: 0px; margin-left: auto; margin-right: auto; margin-bottom: 20px; overflow: hidden; white-space: nowrap}
.odstep {display: block; margin-bottom: 100px; width: 160px; height: 2px; text-align: left; vertical-align: top}
.lp1 {position: relative; top: 0px; margin: 0px; padding: 0px; width: 160px; height: 1px}
.lp2 {position: relative; top: -1px; margin: 0px; padding: 0px; width: 160px; height: 1px}

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

div.picture {width: 150px; height: 115px; background-color: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 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(0,0,0,0.8)}

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 {margin-top: 120px}
#leftright img {margin: 0px 20px 40px 20px; filter: drop-shadow(0px 0px 2px #000000); cursor: pointer; opacity: 0.9}
#leftright img:hover {filter: drop-shadow(0px 0px 4px #000000); opacity: 1}

div.napisy {font-family: 'poppinsregular', Arial; color: white; text-align: left}

hr {margin: 8px 0px 0px 0px; padding: 0px; border: 0px; width: 100%; height: 1px; color: #FFBC00; background-color: #FFBC00}
hr.line  {margin: 0px 0px 8px 0px; padding: 0px; border: 0px; width: 11%; height: 2px; color: #FFBC00; background-color: #FFBC00; animation: expandLineOnly 4s forwards ease-out} 
@keyframes expandLineOnly {0% {width: 1%} 100% {width: 100%}}

@media screen and (min-width: 1000px) {
div.wrapper-init {width: 1000px}

#dark {padding: 20px 60px 20px 60px}

#logotop .wrapper-cell .background-layer {height: 690px}

img.theme_image {margin-left: 20px; margin-top: 5px; float: right}

h1 {font-size: 50px}
h1:after {font-size: 50px; width: 100%}

#alltheme {height: 345px}
#alltheme {z-index: 3}

#wysokoscmenu {height: var(--wysokoscmenu); z-index: 30}
#menu {line-height: 24px; font-size: var(--fontmenu); z-index: 30}

#logo-fb img {margin-left: 200px}

hr.odstepshort {display: inline-block; margin: -6px 0px 0px 0px; padding: 0px; width: 1px; height: 15px; background-color: #FFFFFF; vertical-align: middle}

#footer .wrapper-cell a {font: normal 10px Verdana, Arial, Helvetica, sans-serif}

#logotop {width: 100%}
#logotop .wrapper-cell:nth-child(1) {width: 100%; height: 690px; text-align: center}
#logotop .wrapper-cell:nth-child(1) img {width: 20%; margin: 20px}

#themekontakt .wrapper-init {width: 1000px}
#tehemkontakt .wrapper-cell:nth-child(1) {width: 350px; vertical-align: top}
#themekontakt .wrapper-cell:nth-child(2) {width: 650px; vertical-align: top}
iframe {width: 100%}

div.napisy {margin-left: auto; margin-right: auto; width: 1000px}
div.napisy p.naglowek, div.napisy p.opis {font-size: 13px}
div.napisy h1.label {margin: 0px; padding: 0px; font-size: 72px; line-height: 72px; font-weight: 100}
}


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

#dark {padding: 10px 20px 10px 20px}

div.beforenapisy {display: block; min-height: 150px; height: 150px; z-index: 30}
#logotop .wrapper-cell .background-layer {min-height: 590px}

img.theme_image {display: block; margin: -20px auto 20px auto; width: 80%}

h1 {font-size: 30px}
h1:after {font-size: 30px; width: 80%}

#footer .wrapper-cell a {font: normal 12px Verdana, Arial, Helvetica, sans-serif}

#logotop .wrapper-cell:nth-child(1) {width: 100%; margin-top: 0px; margin-bottom: 20px; text-align: center}
#logotop .wrapper-cell:nth-child(1) img {width: 80%; margin: 20px}

#wysokoscmenu {height: 240px}
#menu {font-size: 30px; line-height: 38px}
#menu a {display: block}

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

h1.o_firmie, h1.kontakt, h1.oferta, h1.wspolpraca {margin-top: 10px; margin-bottom: 20px}

#themekontakt .wrapper-cell {text-align: center; vertical-align: top}

div.o_firmie, div.oferta, div.wspolpraca, div.kontakt {margin-left: 10px; margin-right: 10px}
div.polityka_cookies {padding-left: 20px; padding-right: 20px}

div.napisy {margin-left: auto; margin-right: auto; width: 90%}
div.napisy p.naglowek, div.napisy p.opis {font-size: 13px}
div.napisy h1.label {margin: 0px; padding: 0px; font-size: 22px; line-height: 25px; font-weight: 100}
}