html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}nav ul {list-style:none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after {content:"";content:none;}a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;} ins {background-color:#ff9;color:#000;text-decoration:none;}mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}table {border-collapse:collapse;border-spacing:0;}hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}

/*typografia*/

h1, h2, h3, h4, h5, h6, body, .projekt h3, .dzialy_foto li a {font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-weight:100; letter-spacing:1px;}
.projekt h3, .dzialy_foto li a{ letter-spacing:2px;}
span.nowrap {white-space: nowrap;}
h1, h2, h3, h4, h5, h6 {color:#c6c6c6;line-height:1.3em}
h1 {font-size: 1.6em;}
h2 {font-size:1.5em;}
h3 {font-size:1.4em;}
h4 {font-size:1.3em;}
h5 {font-size:1.2em;}
h6 {font-size:1.1em;}
blockquote {margin:1em 2em; font-style:italic; color:#c6c6c6}
strong {font-weight:bold;}
p {font-weight:lighter;}
/*.niefoto a {text-decoration:underline;}*/
	.niefoto a:hover {color:#ececec}
	.zewn, .email, .tel {padding-right:15px;}
	.zewn {background:url("/img/tekst_link.png") no-repeat center right;}
	.email {background:url("/img/tekst_koperta.png") no-repeat center right;}
	.tel {background:url("/img/tekst_telefon.png") no-repeat center right;}
.tekst h1, .tekst h2, .tekst h3, .tekst h4, .tekst h5, .tekst h6 {margin-bottom:-0.4em} 
.tekst li {margin:0.8em 1em}

a {text-decoration:none; color:#c6c6c6}

hr {border-top:1px solid #313131; border-bottom:1px solid #8c8c8c; height:0px}



body {font-size:1em; line-height:1.5em; color:#FFFFFF; background-color:#666666;}


/*tla*/


.tlo_glowne {width:100%; height:100%; position:fixed;background:url("/img/tlo_jasne.png") repeat left fixed;z-index:-1}
.rozjasnienie {width:100%; height:100%; position:fixed;background:url("/img/rozjasnienie.png") repeat-x center fixed; z-index:-1}

/*menu glowne*/
.sekcja_menu_gl, .sekcja_foto_gl {width:50%; min-height:100%; position:absolute;}
.sekcja_menu_gl {padding:13% 28px 0 0; background:url("/img/menu_gl_cien.png") repeat-y right top; text-align:right; left:0px}
	.sekcja_menu_gl h1 {display:block; background:url("/img/logo.png") no-repeat; width:370px; height:49px; text-indent:-9999em; text-align:left; float:right; margin-right:13px}
	.sekcja_menu_gl a {padding:4px 26px 7px 0;}

.dzialy_foto {width:100%; border-top:1px solid #3d3d3d; border-bottom:1px solid #8e8e8e; margin-top:73px; list-style:none}
	.dzialy_foto li a {width:inherit;display:block; border-top:1px solid #848484;border-bottom:1px solid #3d3d3d; text-decoration:none; font-size: 25px; color:#DCDCDC; background:url("/img/menu_gl_dzial_ciemny.png") repeat}
	.dzialy_foto li a:hover {color:#FFFFFF; background:url("/img/menu_gl_dzial_jasny.png") repeat; border-top-color:#AAAAAA}
	.dzialy_niefoto li {float:right;}
	.dzialy_niefoto {list-style:none; margin:15px 0 0 0}
	.dzialy_niefoto a:hover {color:#FFFFFF}
.jezyk {position:absolute; top:0.5em; right:1em; list-style:none;}
	.jezyk li {display:inline;padding:.1em;}
	.jez_wybrany {text-decoration:underline;}
        .jezyk li.kontakt {padding-right: 1.1em;}
.sekcja_foto_gl {right:0px;}
	.sekcja_foto_gl div {margin-top:13%;}
	.zdjecie_index {position:absolute;}
		.index_foto {margin: 0px 0 0 25px; border:3px solid #FFFFFF}
        .sekcja_foto_gl div p {position:absolute; margin:-29px 0 0 50px;}

.cleaner, .tlo_zdjecie hr, .niefoto hr {float:none; clear:both; display:block;}
.stopka {color:#c6c6c6; text-align:center; font-size:0.8em; width:100%}

/*dzialy fotograficzne*/
.linia_pocz {   border-bottom: 1px solid #FFFFFF;margin-top: 340px;position: absolute;width: 70px; }
.gorny, .dolny {white-space:nowrap; height:300px; }
.projekt {height:260px; display:inline-block;border-left:1px solid #FFFFFF; padding:20px;  margin-left:-4px;}
	.gorny .projekt {border-bottom:1px solid #FFFFFF;}
	.dolny .projekt {border-top:1px solid #FFFFFF;}
.gorny { margin-top:40px; padding-left:70px}
.gorny h3, .dolny h3 {border-bottom:1px solid #FFFFFF;position:absolute; margin:-45px 0 0 -20px; padding:0 10px 3px 10px}
.dolny h3 {bottom:79px}

.kropka {display:block; width: 6px;height:6px; position:absolute; background:url("/img/kropka.png") no-repeat center}
.dolny .kropka {margin:-24px 0 0 -23px;}
.gorny .kropka {margin:277px 0 0 -23px;}

.projekt h3 {line-height:22px; color:#FFFFFF}
.projekt a {display: inline-block;
    height: 100%;
    vertical-align: bottom;}
.dolny {padding-left:150px; margin-bottom:80px }
.dzial_foto {position:absolute; left:350px}
	.dzial_foto img, .opis img {border:1px solid #FFFFFF}
.opis {float: left;height: 640px;width: 315px;display: table; margin-left:100px;}
	.opis h1 {float:left; border-bottom:1px solid #ffffff; padding-right:20px; margin-top:314px; line-height:26px; color:#FFFFFF;width:230px;padding-left:1em;}
.stp_dzial {position:fixed;}

/*dzialy NIE fotograficzne*/

.niefoto { padding:6% 0}
	.niefoto h1 {width:960px; margin:0 auto; font-size:2.3em; color:#FFFFFF; line-height:0.9em}
	.niefoto hr {margin:10px 0;}
	.info {width:960px; margin:0 auto}
	.info .tekst p, .dane_kon {margin:0.8em 0;line-height:1.7em;}
        .info .tekst {padding-top:5px;}
.info_foto { float:left; margin:5px 28px 14px 0;}
	.info_foto img {border:3px solid #ffffff; float:left}
	.info_foto p {font-size:0.85em; float:left !important; width:auto !important; line-height:1em !important; margin:0.7em 0 1.4em !important; color:#C6C6C6 !important}
.linki {list-style:none; list-style-position:inside; float:left; clear:both; margin:1em 0}
	.linki li {margin:0.2em 0em; float:left; width:450px}
	.linki li a {text-decoration:none}
#etsy-shop {width:200px; height:345px; background:#003399}
.do_prawej {text-align:right}
/*do formatowania danych kontaktowych i ich nazw*/
.nazwa_kon {float:left; width:10%; clear:left}
.dane_kon {float:left; clear:right;}
.profile_fb {width:auto; margin-right:0.8em}
.kalendarzFb {height: 500px;position: relative;width: 100%; background:#0033CC}

/*zdjecie*/
.tlo_zdjecie {background:url("/img/tlo_ciemne.png") repeat left; padding:14px 14px}
.tlo_zdjecie hr {border-top:1px solid #111111; border-bottom:1px solid #252525}
.tlo_zdjecie h2, .tlo_zdjecie h1 {float:left}
/* do sprawdzenia!
.tlo_zdjecie a {text-align:center; display:block} */
.tlo_zdjecie img {display:block; margin:0 auto}
.zdjecie_powiekszone, .powiekszenie {border:3px solid #FFFFFF}
.zdjecie_powiekszone {width:min(calc(90vw - 6px), calc((100vh - 210px) * var(--photo-ratio))); height:auto}
.miniatury_zdjecie {width:90vw; margin:15px auto;padding:0 0 10px; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; box-sizing:border-box}
.miniatury_zdjecie img {float:none; margin:0;}
.navi {width:117px; height:32px;background:url("/img/sprite.png") no-repeat scroll 0px -32px; list-style:none; position:fixed !important; top:7px; right:10px; left:auto; z-index:10}
	.navi ul {display:flex; margin:0; padding:0; list-style:none}
	.navi li a {float:none; text-indent:-99999em; display:block;height:32px;}
	.poprzednie, .nastepne {width: 43px;}
	.do_gory {width:30px; }
.poprzednie:hover {background:url("/img/sprite.png") no-repeat scroll 0px 1px}
.do_gory:hover {background:url("/img/sprite.png") no-repeat scroll -43px 1px}
.nastepne:hover {background:url("/img/sprite.png") no-repeat scroll -73px 1px}
.menu_zdjecie {height:auto !important;position:relative !important; background:none !important}

@media screen and (max-width: 600px) {
	.tlo_zdjecie h1 {float:none; clear:both; padding-top:40px; text-align:right}
	.jezyk {position:absolute; top:8px; right:10px; left:10px; margin:0; text-align:right; z-index:1}
	.strona_glowna {display:flex; flex-direction:column; padding-top:42px}
	.sekcja_menu_gl, .sekcja_foto_gl {position:relative; left:auto; right:auto; width:100%; min-height:0; box-sizing:border-box}
	.sekcja_menu_gl {padding:20px 14px 24px; background:none}
	.sekcja_menu_gl h1 {float:none; width:min(370px, 100%); margin:0 0 0 auto; background-size:contain; background-position:right center}
	.dzialy_foto {margin-top:32px}
	.sekcja_foto_gl div {margin-top:0}
	.sekcja_foto_gl > div {position:relative}
	.sekcja_foto_gl {padding-left:14px}
	.sekcja_foto_gl img.index_foto {position:static; display:block; width:min(calc(90vw - 6px), 428px); height:auto; margin:0}
	.sekcja_foto_gl div p {position:absolute; left:50px; bottom:7px; margin:0; text-align:left}
	.niefoto h1, .niefoto .info {width:auto; margin-left:14px; margin-right:14px}
	.info_foto {float:none; width:fit-content; max-width:100%; margin:5px auto 14px}
	.info_foto img {float:none; display:block; max-width:100%; height:auto; box-sizing:border-box}
	.info_foto p {float:none !important; text-align:center; width:auto !important}
	.niefoto span.nowrap {white-space:normal}
	#menu_poziom {height:110px}
	#menu_poziom ul {display:flex; flex-wrap:wrap; justify-content:center; margin:12px 8px 0; padding:0}
	#menu_poziom li {display:block}
}

#menu_poziom {width:100%;position:fixed; bottom:0px; height:100px;background:url("/img/menu_tlo.png") repeat-x bottom center}
	#menu_poziom ul {margin:45px auto 0; text-align:center;font-size:0.9em}
	#menu_poziom li {display:inline; list-style:none; white-space:nowrap}
        #menu_poziom ul li a {padding:0 0.5em;}
	#menu_poziom a { padding:0 0.5em; }
	#menu_poziom a:hover {color:#ececec}
	.wybrany {font-size: 1.3em;color:#ececec}
	.logo_menu {width:23px; height:30px; display:inline-block; background:url("/img/logo_menu.png") no-repeat scroll -43px 0; text-indent:-9999em}
		.logo_menu:hover {background-position:0 0}
.miniatury_zdjecie a {flex:0 0 auto; margin:0; display:block; border:1px solid #FFFFFF; line-height:0; opacity:0.5}
	.miniatury_zdjecie a:hover, .miniatury_zdjecie a.selected {opacity:1}