@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Rubik:ital,wght@0,400;0,700;1,400&display=swap');

/* reset CSS v2.0 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; 	font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;}

/*style ogólne*/

/*czcionki i ułożenie elementów na stronie*/
* {box-sizing: border-box;}
body {font-family: 'Rubik', sans-serif; font-size: 10px; color: #eee; background-color: #333; background: url('img/m/tlom.jpg') left top /cover no-repeat fixed;}
h1, h2, h3 {margin: 1% 0;}
p {margin: 1% 0; line-height: 120%;}
b {font-weight: bold;}
a {color: #fc3; text-decoration: none;}
hr {width: 90%; height: 8px; margin: 100px auto; background-color: #333; border: 0;}

/*szerokości elementów, strony, itp*/
/**/.element {width: 100%; height: 100px;}
.ramka {float: left; width: 100%; overflow: hidden;} .ramka:after {display: block; content: ''; clear:both;} /*najmniejszy blok*/
.ramka-h {float: left; width: 100%; overflow: hidden;} .ramka-h:after {display: block; content: ''; clear:both;} /*szerszy blok*/
.panel {float: left; width: 100%; text-align: center;} .panel:after {display: block; content: ''; clear:both;} /*pośredni blok*/
.blok {width: 100%; text-align: center;} .blok:after {display: block; content: ''; clear:both;} /*duży blok*/
.galeria {width: 100%;} .galeria:after {display: block; content: ''; clear:both;} /*największy blok*/
.obraz {} .obraz:after {display: block; content: ''; clear:both;}
.pierwszy {margin-bottom: 80px;} /*margines w układzie pojedyńczym*/
.obraz img {width: 100%;}
.detal {width: 100%; padding: 0 3% 1%; text-align: center;} .detal:after {display: block; content: ''; clear:both;}
.detal img {width: 90%; margin: 2%;}
.foto {width: 96%; margin: 2%;}
.buton {padding: 10px 20px; background-color: rgba(0, 0, 0, 0.5); border-radius: 20px;}
.alter {width: 100%;} .alter:after {display: block; content: ''; clear:both;}
.fader {animation: duch 1s linear;} @keyframes duch {from {opacity: 0;} to {opacity: 1;}}
.kadr {position: relative; padding: 3%;} /*kadr komiksowy*/
.kadr img {position: relative; width: 100%; border: 6px solid #111;}
.kadr span {position: absolute; z-index: 5; display: block;}
.dymek {position: relative; padding: 1.5% 2% .4%; font: bold 40px /110% 'Kalam', cursive; text-align: center; color: #111; background-color: #eee; border: 4px solid #111; border-radius: 20px;} /*info*/ .info {padding: 2% 3% 1%; color: #fc3; background-color: #333;} /*opis, narracja*/ .stan {color: #ccc; background-color: #333; border-radius: 0px;} /*myśl*/ .mysl {border-style: dashed;}
.podpis {position: relative; bottom: -10px; right: 3%; font-size: 36px; font-style: italic; color: #eee;} /*podpis pod kadrem*/
.brx {bottom: 10%; right: 10%;} /*podpis w kadrze*/
.tr {top: 3%; right: 3%;} .bl {bottom: 3.5%; left: 3%;} .br {bottom: 3.5%; right: 3%;} /*pozycja względem kadru: t-top, b-bottom, l-left, r-right*/
.tl {top: 3%; left: 3%;} .tl2 {top: 3%; left: 20%;} .tl4 {top: 3%; left: 40%;} .tl6 {top: 3%; left: 60%;}
.t2l {top: 20%; left: 3%;} .t2l2 {top: 20%; left: 20%;} .t2l4 {top: 20%; left: 40%;} .t2l6 {top: 20%; left: 60%;}
.t4l {top: 40%; left: 3%;} .t4l2 {top: 40%; left: 20%;} .t4l4 {top: 40%; left: 40%;} .t4l6 {top: 40%; left: 60%;}
.t6l {top: 60%; left: 3%;} .t6l2 {top: 60%; left: 20%;} .t6l4 {top: 60%; left: 40%;} .t6l6 {top: 60%; left: 60%;}
.t8l {top: 80%; left: 3%;} .t8l2 {top: 80%; left: 20%;} .t8l4 {top: 80%; left: 40%;} .t8l6 {top: 80%; left: 60%;}
.doprawej {text-align: right;} .centruj {text-align: center;} .polowa {display:flex; align-items:center;}
.big {font-size: 120%;} .smal {font-size: 80%;}
.mtb {margin-top: 100px;} .mtm {margin-top: 50px;} .mts {margin-top: 30px;} .end {margin-bottom: 60px;} /*marginesy góra, dół*/

/*nagłówek*/
#tytul {position: fixed; top: 0; right: 0; z-index: 9; width: 100%; padding: 15px; font-size: 50px; font-weight: bold; background-color: rgba(0, 0, 0, 0.8);} #tytul:after {display: block; content: ''; clear:both;}
#tytul .gora {position: fixed; bottom: 120px; right: 30px; z-index: 9; display: block; padding: 20px 40px; background-color: rgba(0, 0, 0, 0.5); border-radius: 20px;}
#tytul .gora:hover {color:#000; background-color:#fc3;}
#menum {width: 100%;} #mmenu:after {display: block; content: ''; clear:both;}
#menum span {position: fixed; top: 0; right: 0; padding: 20px 40px; background-color: transparent;}
/*część rozwijana*/
#menum > span > ul {width:100%; display: none; position: absolute; z-index: 1; list-style-type: none;}/* wygląd elementów - ul */
#menum > span:hover > ul {display:block;}/* wygląd - ul - pod kursorem nad - li */
#menum > span > ul > li {position: fixed; width: 100px;}/* wygląd - li */
#menum > span > ul > li:nth-child(1) {top: 120px; right: 20px;}/* wygląd - li 1 */
#menum > span > ul > li:nth-child(2) {top: 240px; right: 20px;}/* wygląd - li 2 */
#menum > span > ul > li:nth-child(3) {top: 360px; right: 20px;}/* wygląd - li 3 */
#menum > span > ul > li:nth-child(4) {top: 480px; right: 2px;}/* wygląd - li 4 */
#menum > span > ul > li > a.buton {float: right; padding: 20px 40px; background-color: rgba(0, 0, 0, 0.5);}/* wygląd elementów - a */
#menum > span > ul > li:hover > a.buton {color:#000; background-color:#fc3;}/* wygląd - a - pod kursorem nad - li */
#slider {display: none;}

/*zawartość strony*/
#strona {width: 98%; margin: 0 auto; padding: 10px; background-color: #666;} #strona:after {display: block; content: ''; clear:both;}
#strona h1, #strona h2 {font-size: 40px;}
#strona p {font-size: 30px;}
#strona .opis {margin: 0 10%; font-style: italic; text-align: right;}
#strona .tekst {padding: 5% 3% 1%; text-align: right;}
#strona .zoomin img:hover {transform: scale(1.05); transition-duration: .2s; z-index: 0;}

/*stopka*/
#stopka {width: 100%; padding: 20px 15px 60px; font-size: 36px; background-color: #111; opacity: .8;} #stopka:after {display: block; content: ''; clear:both;}
#stopka span img {width: 60px;}
#stopka .design {text-align: right; color: #666;}

/*reguły media*/
@media only screen and (min-width:1000px) {
hr {margin: 80px auto;}
.ramka {width: 50%;}
.detal img {width: 400px; margin: 0 10px;}
.buton {border-radius: 8px;}
.alter img {float: right; width: 50%;}
.kadr img {border-width: 4px;}
.dymek {font-size: 20px; border-width: 2px; border-radius: 8px;} .opis {border-radius: 0;}
.podpis {bottom: 10px; font-size: 18px;}
.mtb {margin-top: 80px;} .mtm {margin-top: 30px;} .mts {margin-top: 10px;} /*.end {margin-bottom: 60px;}*/
#tytul {padding: 10px 30px 5px; font-size: 22px;}
#tytul .gora {bottom: 80px; right: 35px; padding: 10px 20px; border-radius: 8px;}
#menum span {padding: 20px 30px;}
#menum > span > ul > li {padding: 10px 5px; font-size: 20px;}
#menum > span > ul > li:nth-child(1) {top: 60px; right: 20px;}
#menum > span > ul > li:nth-child(2) {top: 110px; right: 20px;}
#menum > span > ul > li:nth-child(3) {top: 160px; right: 20px;}
#menum > span > ul > li:nth-child(4) {top: 210px; right: 20px;}
#menum > span > ul > li > a.buton {padding: 10px 20px;}
#strona {width: 95%;}
#strona h1, #strona h2 {font-size: 24px;}
#strona p {font-size: 18px;}
#strona .tekst {padding: 12% 2% 0;}
#stopka {padding: 10px 30px 30px; font-size: 16px;}
#stopka span img {width: 22px;}
}
@media only screen and (min-width:1200px) {
body {background: url('img/m/tlo.jpg') left top /cover no-repeat fixed;}
.ramka {width: 25%;}
.ramka-h {width: 37.5%;}
.galeria {display: flex; align-items: center;}
.panel {width: 50%;}
.pierwszy {margin-bottom: 0;}
.ml {margin-left: 5%;} .mr {margin-right: 5%;}
.obraz img {width: 90%;}
.detal img {width: 330px;}
.alter {display: none;}
.dymek {font-size: 15px;}
.podpis {bottom: 15px; font-size: 16px;}
#tytul {padding: 6px 40px 2px; font-size: 20px;}
#menum span {right: 10px; padding: 15px 30px;}
#menum > span > ul > li {font-size: 18px;}
#menum > span > ul > li:nth-child(1) {top: 50px; right: 30px;}
#menum > span > ul > li:nth-child(2) {top: 90px; right: 30px;}
#menum > span > ul > li:nth-child(3) {top: 130px; right: 30px;}
#menum > span > ul > li:nth-child(4) {top: 170px; right: 30px;}
#menum > span > ul > li > a.buton {padding: 6px 10px;}
#slider {display: block; width: 1200px; height: 300px; margin: 55px auto 0;}
#slider .slajd {display: none;}
#strona {width: 1200px;}
#strona h1, #strona h2 {margin-left: 30px; font-size: 20px;}
#strona p {font-size: 16px;}
#strona .tekst {padding: 0 1%;}
#stopka .design {padding: 0 10px;}
}
@media only screen and (min-width: 1400px) {
.obraz img {width: inherit;}
.detal img {width: 400px;}
.podpis {bottom: 20px;}
#tytul .gora {right: 10px;}
#slider {width: 1400px;}
#slider .centrum {margin-left: 100px;}
#slider .prawy {margin-left: 200px;}
#strona {width: 1400px;}
#strona .tekst {padding-top: 3%;}
}
@media only screen and (min-width: 1600px) {
.blok {width: 90%; margin: 0 auto;}
#slider {width: 1600px; margin-top: 60px;}
#slider .centrum {margin-left: 200px;}
#slider .prawy {margin-left: 400px;}
#strona {width: 1600px;}
#strona .tekst {padding-top: 70px;}
}
@media only screen and (min-width: 1900px) {
.blok {width: 80%;}
#tytul {padding: 0 155px;}
#tytul .gora {right: 60px;}
#menum span {right: 140px; padding: 15px 30px;}
#menum > span > ul > li {font-size: 18px;}
#menum > span > ul > li:nth-child(1) {right: 150px;}
#menum > span > ul > li:nth-child(2) {top: 85px; right: 150px;}
#menum > span > ul > li:nth-child(3) {top: 120px; right: 150px;}
#menum > span > ul > li:nth-child(4) {top: 155px; right: 150px;}
#slider {width: 1600px;}
#slider .centrum {margin-left: 200px;}
#slider .prawy {margin-left: 400px;}
#strona {width: 1600px;}
#strona .tekst {padding-top: 80px;}
#stopka .kontakt {margin: 20px 120px 0;}
}

@media only screen and (min-width:2000px) {
hr {margin: 6% auto;}
.detal img {width: 25%;}
.kadr img {border-width: 8px}
.dymek {font-size: 250%; border-width: 4px; border-radius: 12px;} .opis {border-radius: 0px;}
.podpis {bottom: 1%; font-size: 250%;}
.mtb {margin-top: 6%;} .mtm {margin-top: 3%;} .mts {margin-top: 2%;} .end {margin-bottom: 4%;}
#tytul {padding: 0 6%; font-size: 400%;}
#tytul .gora {bottom: 8%; right: 1%;}
#menum span {right: 5%; padding: 1% 2%;}
#menum > span > ul > li {padding: .5% .5%; font-size: 80%;}
#menum > span > ul > li:nth-child(1) {top: 6%; right: 5%;}
#menum > span > ul > li:nth-child(2) {top: 10%; right: 5%;}
#menum > span > ul > li:nth-child(3) {top: 14%; right: 5%;}
#menum > span > ul > li:nth-child(4) {top: 18%; right: 5%;}
#slider {width: 90%; height: 10%; margin-top: 4%;}
#slider img {width: 80%;}
#slider .centrum {margin-left: 10%;}
#slider .prawy {margin-left: 20%;}
#strona {width: 90%;}
#strona h1, #strona h2 {font-size: 350%;}
#strona p {font-size: 300%;}
#strona .tekst {padding-top: 6%; font-size: 80%;}
#stopka {padding: 1% 6% 2%; font-size: 250%;}
#stopka .kontakt {margin: 0;}
#stopka span img {width: 1.8%;}
}