/* RESET CSS */

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,div#top,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}body{line-height:1}article,aside,details,figcaption,figure,footer,div#top,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:transparent;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 #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}article,aside,details,dialog,figcaption,figure,footer,header,main,nav,section{display:block}audio,canvas,embed,keygen,meter,progress,video{display:inline-block}[hidden]{display:none}

* { font-family: Trebuchet MS, sans-serif; font-weight: normal; }

:root
{
	--bg-color: #0a51ad;
	--txt-color: #032D58;
	--hl-color: #C5302A;
	--link-color: #0a51ad;
	--link-hover-color: #C5302A;
}

html, body { margin-top: 0px; font-size: 12pt; line-height: 1.5; }
body { background-color: var(--bg-color); color: white; position: relative; max-width: 1920px; margin: auto; }
div#body { margin: 0 0 0 0; }
div.clear { clear: both; float: none; }
a { color: white; }
b { font-weight: bold; }
strong { font-weight: bold; }

@media screen and (min-width: 851px)
{
	h1 { text-align: center; font-weight: bold; font-size: 14pt; margin-bottom: 12px; --s: 20px; padding-inline: calc(var(--s) + .3em) .3em; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--s) 50%); width: fit-content; background-color: var(--bg-color); color: white; padding: 10px 96px 10px 96px; }
	h2 { text-align: left; font-weight: bold; font-size: 12pt; margin-top: 24px; --s: 20px; padding-inline: calc(var(--s) + .3em) .3em; clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%); width: auto; background-color: var(--bg-color); color: white; padding: 6px 48px 6px 24px; }
	div.strona_wideo h2 { margin-top: 48px; }
	div.logo { text-align: center; padding: 20px; }
	div.logo img { width: 100%; max-width: 500px; height: auto; }
	div.logo img:hover { filter: drop-shadow(4px 4px 0 var(--hl-color)); }

	div.menu { display: flex !important; gap: 8px; text-align: center; flex-wrap: wrap; position: relative; text-align: center; padding-left: 36px; padding-right: 36px; }
	div.menu a { flex: 1; display: inline-block; position: relative; background-color: white; color: var(--txt-color); font-weight: bold; text-decoration: none; padding: 8px; transform: skewX(-25deg); }
	div.menu a span { display: block; font-weight: bold; transform: skewX(25deg); }
	div.menu a:hover { background-color: var(--hl-color); color: white; }
	div.menu a.active { background-color: var(--hl-color); color: white; cursor: default; pointer-events: none; }
	div.menu a.active_clickable { background-color: var(--hl-color); color: white; }
	
	a.button_menu img { display: none; }

	div.zdjecie_glowne img { display: block; width: 100%; height: auto; border-top: 4px solid white; border-bottom: 4px solid white; }

	div.content { background-color: white; color: var(--txt-color); padding: 32px 48px; margin: 0 256px; text-align: center; }
	div.content1 { background-color: white; color: var(--txt-color); padding: 0 48px; margin: 0 256px; text-align: center; }
	div.content p { margin: 24px auto; text-align: justify; }
	div.content a { color: var(--link-color); font-weight: bold; text-decoration: none; }
	div.content a:hover { color: var(--link-hover-color); }
	div.content ul, div.content ol { margin-left: 30px; }
	div.content li { text-align: justify; }
	div.content ol.listapiosenek li, div.content ul.listapiosenek li { margin-top: 16px; margin-bottom: 16px; }
	div.listapiosenek_tytul { font-weight: bold; }
	div.listapiosenek_autorzy { font-size: 11pt; }
	div.piosenka_wolosatki { font-size: 10pt; text-align: left; margin-top: 4px; }
	div.piosenka_autorzy { font-size: 10pt; text-align: left; margin-top: -8px; }

	div.content img, div.content1 img { max-width: 900px; width: 100%; border: 2px solid var(--link-color); margin: 12px auto; border-radius: 4px; }

	a.dyskografia_posluchaj_logo { display: inline-block; margin: 20px; }
	a.dyskografia_posluchaj_logo img { height: 32px; border: none; margin: 0; border-radius: 0; max-width: auto; }
	a.dyskografia_posluchaj_logo:hover img { filter: brightness(1.2); }
	div.streamingi { margin-top: 24px; margin-bottom: 24px; }
	
	div.wideo_lista { position: relative; }
	div.wideo_lista a { display: block; position: relative; color: var(--link-color); text-decoration: none !important; }
	div.wideo_lista a div.wideo { margin: 16px auto; text-align: left; height: 184px; }
	div.wideo_lista a div.wideo img { position: absolute; top: 0; left: 0; width: 320px; height: 180px; margin: 0; border: 2px solid var(--link-color); border-radius: 6px; }
	div.wideo_lista a div.wideo div.wideo_opis { position: relative; margin-left: 340px; }
	div.wideo_lista a div.wideo div.wideo_tytul { font-weight: bold; font-size: 14pt; }
	div.wideo_lista a div.wideo div.wideo_uwagi { margin-top: 8px; border-top: 1px dotted var(--txt-color); padding-top: 8px; }
	div.wideo_lista a:hover { color: var(--hl-color); }
	div.wideo_lista a:hover div.wideo img { filter: brightness(1.2); border: 2px solid var(--hl-color); }
	div.wideo_lista a:hover div.wideo div.wideo_uwagi { border-top: 1px dotted var(--hl-color); }

	div.link_wolosatkipl { text-align: center; font-size: 10pt; color: white; margin: 24px auto; }
	div.link_wolosatkipl img { margin-top: 12px; width: auto; max-width: 130px; }
	div.link_wolosatkipl img:hover { filter: drop-shadow(4px 4px 0 var(--hl-color)); }
	div.link_wolosatkipl a { text-decoration: none; }
	
	div.zdjecia_galeria { margin: 16px auto; }
	div.content1 div.zdjecia_galeria { margin: auto; }
	div.zdjecia_data { text-align: left; font-size: 10pt; margin-top: 4px; }
	div.zdjecia_autor { text-align: left; font-size: 10pt; }
	div.zdjecia_galeria a.miniaturka { display: inline-block; line-height: 0; vertical-align: top; margin: 20px; text-align: center; }
	div.zdjecia_galeria a.miniaturka img { display: block; height: 180px; width: auto; box-shadow: 5px 5px 10px 5px #AFAFAF; max-height: 180px; display: inline-block; }
	div.zdjecia_galeria a.miniaturka:hover img { filter: brightness(1.3); cursor: hand; cursor: pointer; border: 2px solid var(--link-hover-color); }

	@media screen and (max-width: 1800px)
	{
		div.content { margin: 0 200px; }
	}
	@media screen and (max-width: 1600px)
	{
		div.content { margin: 0 120px; }
	}
	@media screen and (max-width: 1400px)
	{
		div.content { margin: 0 100px; }
	}
	@media screen and (max-width: 1200px)
	{
		div.content { margin: 0 60px; }
	}
	@media screen and (max-width: 1000px)
	{
		div.content { margin: 0 30px; }
	}
}

@media screen and (max-width: 850px)
{
	h1 { text-align: center; font-weight: bold; font-size: 14pt; margin-bottom: 12px; --s: 12px; padding-inline: calc(var(--s) + .3em) .3em; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--s) 50%); width: fit-content; background-color: var(--bg-color); color: white; padding: 10px 24px 10px 24px; }
	h2 { text-align: left; font-weight: bold; font-size: 12pt; margin-top: 24px; --s: 20px; padding-inline: calc(var(--s) + .3em) .3em; clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%); width: auto; background-color: var(--bg-color); color: white; padding: 6px 48px 6px 24px; }
	div.strona_wideo h2 { margin-top: 48px; }
	
	div.logo { text-align: left; padding: 20px; }
	div.logo img.logo { width: auto; height: 110px; margin-left: 6px; }
	div.logo img:hover { filter: drop-shadow(4px 4px 0 var(--hl-color)); }
	
	a.button_menu img { float: right; width: auto; margin-top: 32px; margin-right: 10px; padding: 10px; height: 40px; filter: brightness(100); }
	a.button_menu.active img { filter: brightness(1); }

	div.menu { display: none; text-align: center; flex-wrap: wrap; text-align: center; margin-left: 24px; margin-right: 24px; }
	div.menu a { display: block; background-color: white; color: var(--txt-color); font-weight: bold; text-decoration: none; margin: 16px; padding: 6px 16px; transform: skewX(-25deg); }
	div.menu a span { display: block; font-weight: bold; transform: skewX(25deg); }
	div.menu a:hover { background-color: var(--hl-color); color: white; }
	div.menu a.active { background-color: var(--hl-color); color: white; cursor: default; pointer-events: none; }
	div.menu a.active_clickable { background-color: var(--hl-color); color: white; }

	div.zdjecie_glowne img { display: block; width: 100%; height: auto; border-top: 4px solid white; border-bottom: 4px solid white; }

	div.content { background-color: white; color: var(--txt-color); padding: 12px 16px 8px; margin: 0 12px; text-align: center; }
	div.content1 { background-color: white; color: var(--txt-color); padding: 12px 16px 12px; margin: 0 12px; text-align: center; }
	div.content p { margin: 24px auto; text-align: justify; }
	div.content a { color: var(--link-color); font-weight: bold; text-decoration: none; }
	div.content a:hover { text-decoration: underline; }
	div.content ul, div.content ol { margin-left: 30px; }
	div.content li { text-align: justify; }
	div.content ol.listapiosenek li, div.content ul.listapiosenek li { margin-top: 16px; margin-bottom: 16px; }
	div.listapiosenek_tytul { font-weight: bold; }
	div.listapiosenek_autorzy { font-size: 11pt; }

	div.piosenka_wolosatki { font-size: 10pt; text-align: left; margin-top: 4px; }
	div.piosenka_autorzy { font-size: 10pt; text-align: left; margin-top: -8px; }

	div.content img, div.content1 img { width: 100%; border: 2px solid var(--link-color); margin: 12px auto; border-radius: 4px; box-sizing: border-box; }

	a.dyskografia_posluchaj_logo { display: inline-block; margin: 10px; }
	a.dyskografia_posluchaj_logo img { height: 32px; border: none; margin: 0; border-radius: 0; max-width: auto; }
	a.dyskografia_posluchaj_logo:hover img { filter: brightness(1.2); }
	div.streamingi { margin-top: 24px; margin-bottom: 24px; }

	div.wideo_lista a { display: block; color: var(--link-color); text-decoration: none !important; }
	div.wideo_lista a:not(:first-child) { margin-top: 12px; border-top: 1px dotted var(--txt-color); padding-top: 12px; }
	div.wideo_lista a div.wideo { margin: 16px auto; text-align: center; }
	div.wideo_lista a div.wideo img { width: 100%; height: 100%; max-width: 320px; max-height: 180px; margin: 0; border: 2px solid var(--link-color); border-radius: 6px; }
	div.wideo_lista a div.wideo div.wideo_tytul { font-weight: bold; font-size: 14pt; }
	div.wideo_lista a div.wideo div.wideo_uwagi { margin-top: 4px; }
	div.wideo_lista a:hover { color: var(--hl-color); }
	div.wideo_lista a:hover div.wideo img { filter: brightness(1.2); border: 2px solid var(--hl-color); }
	
	div.link_wolosatkipl { text-align: center; font-size: 10pt; color: white; margin: 24px auto; }
	div.link_wolosatkipl img { margin-top: 12px; filter: width: auto; max-width: 130px; }
	div.link_wolosatkipl img:hover { filter: drop-shadow(4px 4px 0 var(--hl-color)); }
	div.link_wolosatkipl a { text-decoration: none; }
	div.link_wolosatkipl a:hover { color: red; }

	div.zdjecia_galeria { margin: 16px auto; }
	div.content1 div.zdjecia_galeria { margin: auto; }
	div.zdjecia_data { text-align: left; font-size: 10pt; margin-top: 4px; }
	div.zdjecia_autor { text-align: left; font-size: 10pt; }
	div.zdjecia_galeria a.miniaturka { display: inline-block; line-height: 0; vertical-align: top; margin: 10px; text-align: center; }
	div.zdjecia_galeria a.miniaturka img { display: block; height: 100px; width: auto; box-shadow: 5px 5px 10px 5px #AFAFAF; max-height: 180px; display: inline-block; }
	div.zdjecia_galeria a.miniaturka:hover img { filter: brightness(1.3); cursor: hand; cursor: pointer; border: 2px solid var(--link-hover-color); }
	
	@media screen and (max-width: 650px)
	{
		div.logo img.logo { height: 90px; }
		a.button_menu img { margin-top: 22px; }
	}
	@media screen and (max-width: 550px)
	{
		div.logo { padding: 20px 10px; }
		div.logo img.logo { height: 70px; }
		a.button_menu img { margin-top: 12px; margin-right: 0; padding: 10px; }
	}
}