/* ----------RESET USTAWIEŃ PRZEGLĄDAREK ------------ */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 
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;
}

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; */
}

/* ----------KONIEC RESETU ------------ */


html {
	width: 100%;
	height: 100%;
	background-image:url('images/tlooo.png');
	
	/* 
	background: rgba(243,115,11,0.2);
	background: darkred;
	background: #FFF;*/
}


body	{
	color: #fff;
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 400;
	/*dorzucone 2 elementy aby przy małej tresci stopka u dołu strony.*/
	min-height: 100%;
    position:relative;
}

/*div page utrzymuje razem aside, content, nagłówek i stopkę
-przerzuciłam z body tło, bo inaczej tło pokrywało niemal cały obszar strony, również na dużych ekranach
-dodałam padding 1% - do sprawdzenia.
*/

#page { 
	margin: 0 auto;
	padding: 5px 1% 1%;
	background-position: center;
    background-attachment: fixed;
	background-color: rgba(0,0,0,0.3);
}


header#header {
	margin: 0;
	line-height: 0;
}


#header img {
	width:100%;
	border-radius: 5px;
	margin: 0 0 10px;
	height:200px; 
	object-fit: cover; 
	object-position: 100% 50%; /*wyrównanie obrazka do prawej, a pionowo do środka*/
}





/* ------------------pasek social media ------------------- */



#jezyk {
text-align: right;
padding: 0 5px 5px;
font-weight: 500;
font-size: 0.8em;
color: #F0F8FF;
letter-spacing: 0.03em;
}

#jezyk a {
	color: #fff;
	font-weight: 700;
}

#jezyk a:HOVER {
	text-decoration: none; 
	color: rgb(200, 0, 0);
}

#social {
	float: right;
	text-align: right;
		-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.5);
	padding: 3px 3px;
}

#social img {
	width: 28px;
	padding: 2px 1px 1px 0;
} /* bez skalowania jest 32 px */

#social img:hover {
	 opacity: 0.5;
}


/* ------------------------------------- */

nav {
	display: block;
	font-weight: 700;
	padding: 5px 0;
	margin: 0 0 5px;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.3);
	float: right; /*potrzebne*/
	width: 100%;
	height: auto;
}

nav ul {
	display: inline;
	list-style: none;
	float: left;
}

nav ul li {
	
	float: left; /*sprawia że jest poziome*/
	padding: 0;
	margin: 1px;
}

nav ul li a {
	display: block;

	text-align: center;
	text-decoration: none;
	background-color: rgba(0,0,0,0.5);
  	padding: 8px 5px;
	margin: 1px; /* odległość między przyciskami */
  	line-height: 1.2em;
	font-size: 1.1em;
  	border-radius: 4px;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  	transition: all 0.2s ease-out;
	
}


/* podświetlenie */
nav ul li a:HOVER, #szukaj_przycisk:HOVER, #menu0 dt:HOVER {
	background: rgba(200, 0, 0, 0.5);
	text-decoration: none;
	/* background: #600000; wcześniejsza opcja, nieprzezroczysta*/
}



/* niepotrzebne, to do rozwijanego*/
/* nav ul li ul {
	position: absolute;
	display: none;
	background: #000;
	padding-left: 0;
	margin-left: 0;
} */



/*================== MENU BOCZNE ===============*/


/* opis ogólny panelu bocznego - width jest w @media */
aside {
	float: left;
	margin: 0 0 10px;
	height: auto;
	/* background-color: rgba(178,34,34,0.5); */
	/*background-color: rgba(0,0,0,0.5); /* zastanowić się */
	padding: 0;
	text-align: center;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}


/* ------ description list - cały blok -----------*/
dl#menu0 {
	width: 100%;
	margin: 0 0 3px;
	padding: 0 0 5px;
	display: block;
	background: transparent;	
	color: #fff;
}

#menu0 dt {

	width: 100%;
	float: left;
	cursor: pointer;
	padding: 10px 0;
	margin: 0 0 5px;
	font-size: 1.1em; /* zastanowić się */
	line-height: 1.2em;
	background-color: rgba(0,0,0,0.5);
		-webkit-border-radius: 4px;
  	border-radius: 4px;
		-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-ms-transition: all 0.2s ease-out;
		-o-transition: all 0.2s ease-out;
  	transition: all 0.2s ease-out;
	font-weight: 700; 				
	text-align: center;

}




#menu0 dd {
	display: block;
	margin: 0; 
	padding: 0;
	width: 100%;
	cursor: pointer;
	background-color: transparent;
}

/* kiedy ktoś kliknie w taga z menu, w teorii menu się rozsuwa a tag jest wyróżniony NIE DZIAŁA do końca, może przez target blank? */
#menu0 dd.active {
	font-weight: 700;
}

/* div tagimenu0 - odpowiada za wygląd całego bloku! */
.tagimenu0 {
	padding: 0; 
	width: 100%;
	margin: 0;
	background-color: rgba(0,0,0,0.4);
}
/* odpowiada za wygląd każdego tagu w menu bocznym */
.tagimenu0 a {
	display: inline-block;
	margin: 2px;
	padding: 2px 4px;
	float: none;
	color: white;
	font-weight: 500;
	border-radius: 6px;
		-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-ms-transition: all 0.2s ease-out;
		-o-transition: all 0.2s ease-out;
  	transition: all 0.2s ease-out;
}

.tagimenu0 a:last-child {
	margin-bottom: 10px;
} /*po to by zrobić odstęp pod tagami */
 
.tagimenu0 a:hover {
	background-color: red; /*nie działa, czemu?*/
	text-decoration: none;
	color: rgba(0, 0, 0, 1);
}

/*-------------------------Szukanie blok - wklejone ---------------------*/

#szukaj_blok {
	float: left;
	text-align: center; 
	width: 100%; 
	padding: 0 0 5px; 
	overflow: hidden;
	display: inline-block;
}

#szukaj_przycisk {
	width: 31%;
	margin: 0;
	padding: 8px 0 10px;
	font-size: 1.1em;
	line-height: 1.1em;
	
	background-color: rgba(0,0,0,0.5);
    color: white; /*potrzebne*/
	font-family: sans-serif;
	font-weight: 700;
     	
	border: none;
  	border-radius: 0 4px 4px 0;
  	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  	transition: all 0.2s ease-out;
}



#szukaj_form {
	width: 68%;
	height: 36px; 
	margin: 0 1% 0 0;
	padding: 0;	
	background-color: #888; 
	border: none;
	border-top-left-radius: 4px 4px; 
	border-bottom-left-radius: 4px 4px;
	
}




/* ------------- TAGI - używane do wszystkich tagów wyróżnionych, w odróżnieniu od tagimenu0 z menu */
.tagi {					/*używane jako span class tagi, wcześniej taże błędnie id*/
	padding: 2px;
}

.tagi a {
	display: inline-block;
	padding: 0 3px;
	margin: 1px;
	margin-bottom: 2px;
	background-color: #333;
	border-radius: 6px;
  	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  	transition: all 0.2s ease-out;
	color: #fff;
	font-weight: 500;
}


.tagi a:hover {
	background-color: black;
	color: #333;
	text-decoration: none;
}




/*-----------------------linki----------------------------*/
a {
	color: #fff;
}

a:LINK {
	text-decoration: none;
}


a:VISITED {
	color: #fff;
	text-decoration: none;
}

/* tu trzeba się zastanowić */
a:HOVER {
	text-decoration: none; 
}

a[href="#"] {
	cursor: default;

}
a [name] {

}

a.wewn {
	color: rgba(255,165,0 ,1); /* orange */
	text-decoration: none;
	font-weight: 500;}
	
a.wewn:HOVER {
	color: rgba(255, 140, 0, 0.9);
	/*rgba(255,130,0 ,1); /* darkorange */
}

a.zewn {
	color: rgba(255,165,0 ,1); /* orange */
	text-decoration: none;
	font-weight: 500;
}

a.zewn:HOVER {
	color: rgba(255, 140, 0, 0.9);
	/*rgba(255,130,0 ,1); /* darkorange */
}



/* div content po to, żeby artykuły utrzymać, główny div na podstronach z wpisami */

#content {
		float: right;
		width: 65%;
		margin: 0 0 15px;			
		}



footer {
	clear: both;   	/*eliminuje właściwości podziału str na kolumny*/
	overflow: hidden;
	width: auto;
	background-color: rgba(0,0,0,0.5);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 0.8em;
	text-align: center;
	padding: 15px 10px;
	line-height: 2em;
	font-weight: 600;
	
		}




/* ====================== MEDIA QUERIES ====================  */
/*RESPONSYWNOŚĆ  
co z czcionką? czy powinna się trochę skalować? w każdym razie nagłówek wygląda trochę dziwnie :/*/


@media (min-width: 1100px) {
	
	#page {width: 1050px;}
	aside {width: 20%;}
	#content {width: 79%;}
	.lewa_kolumna {width: 49.5%;}
	.prawa_kolumna {width: 49.5%;}

	.najnowsze { width: 22%; padding: 1.125%; height: 310px; margin: 0.5% 0 0.5% 1%;}   /*dodana orientacyjna wysokość bo przy nierównych się rozjeżdżało przy zmniejszaniu*/
	.najnowsze:nth-child(4n+1) {margin: 0.5% 0; }/*usuwa zewnętrzny margines w kazdej linii*/
	.podzialna2 { width: 45.5%;} /*bo padding article jest 2%*/
	
	/* === recenzje i zespoły ==== */
	article.podzialnatrzy { width: 29%; margin: 1% 0 0 2%;}  /*margin 2% zamiast 1%, bo zostało 2 i jest niepodzielne przez 3 */
	article.podzialnatrzy:nth-child(3n+1) { margin-left: 0;}
	img.podzialnatrzy {padding: 5% 5% 2%; width: 90%; height: 200px;}
	article.recenzje { height: 400px; }
	article.zespoly { height: 340px;}

	/* do artykułów z podsumowaniami - użyty wraz z .podzialna2 lub .podzialnatrzy !!!! */
	article.podzialnatrzy-podsumowania { height: 810px; } 
	article.podzialna2-podsumowania { height: 660px;}
	article.podzialnatrzy-podsumowania img { width: 90%; margin: 5%; }
	article.podzialna2-podsumowania img { width: 60%; margin: 2% 20%; }
	article.short  {height: 700px;}
	
	.data {width: 100%;}
	.fbtw {width: 175px; padding-left: 10px;}

	.obrazekright, .obrazekleft {max-width: 50%; margin: 2%;}  /* % pola tekstowego */
	.obrazekright {margin-right: 0;}
	.obrazekleft {margin-left: 0;}
	
	/* klasy użyte do podsumowań np. 2013 */
	.obrazekleftsmall, .obrazekrightsmall { max-width: 35%; overflow: hidden;}
	.obrazekleftsmall { float: left; margin: 1% 3% 2% 0;}
	.obrazekrightsmall { float: right; margin: 1% 0 2% 3%;}
	.tekst { margin-left: 38%;}
	
	/* galerie */
	img.galeria2x2 {width: 48%; padding: 0.5%;}
	img.galeria3x3 {width: 32%; height: 200px; overflow: hidden; padding: 1% 0 0 0; }
	.galeria-container a { padding-left: 1%; }
	.galeria-container a:nth-child(3n+1) { padding-left: 0;}
	
	.mobile-only {display: none;}
	
	table.zespoly {width: 46%;}


	.wideo-responsive-small { margin: 3% 0;}
	.wideo-responsive-small iframe{ height: 270px; width: 480px; }

	
}

@media (max-width: 1100px) and (min-width: 1000px) {

	#page {width:980px;}
	aside {width:20%;}
	#content {width:79%;}
	.lewa_kolumna {width: 49.5%;}
	.prawa_kolumna {width: 49.5%;}

	.najnowsze { width: 22%; padding: 1.125%; height: 310px; margin: 0.5% 0 0.5% 1%;}   /*dodana orientacyjna wysokość bo przy nierównych się rozjeżdżało przy zmniejszaniu*/
	.najnowsze:nth-child(4n+1) {margin: 0.5% 0; }/*usuwa zewnętrzny margines w kazdej linii*/
	.podzialna2 { 
	width: 45.5%;} /*bo padding article jest 2%*/
	article.podzialnatrzy { width: 29%; margin: 1% 0 0 2%;}
	article.podzialnatrzy:nth-child(3n+1){ margin-left: 0;}
	img.podzialnatrzy { padding: 5% 5% 2%; width: 90%; height: 200px;}
	article.recenzje { height: 410px; }
	article.zespoly { height: 340px;}
	
	article.podzialnatrzy-podsumowania { height: 810px; } 
	article.podzialna2-podsumowania { height: 650px;}
	article.podzialnatrzy-podsumowania img { width: 90%; margin: 5%; }
	article.podzialna2-podsumowania img { width: 60%; margin: 2% 20%; }
	article.short  {height: 700px;}
	
	.data { width: 100%; }
	.fbtw { width: 175px; padding-left: 10px;}

	.obrazekright, .obrazekleft { max-width: 45%; margin: 2%;}
	.obrazekright { margin-right: 0;}
	.obrazekleft { margin-left: 0;}
	
	/* klasy użyte do podsumowań np. 2013 */
	.obrazekleftsmall, .obrazekrightsmall { max-width: 35%; overflow: hidden;}
	.obrazekleftsmall { float: left; margin: 1% 3% 2% 0;}
	.obrazekrightsmall { float: right; margin: 1% 0 2% 3%;}
	.tekst { margin-left: 38%;}
	
	/* galerie */
	img.galeria2x2 {width: 48%; padding: 0.5%;}
	img.galeria3x3 {width: 32%; height: 200px; overflow: hidden; padding: 1% 0 0 0; }
	.galeria-container a { padding-left: 1%; }
	.galeria-container a:nth-child(3n+1) { padding-left: 0;}
	
	
	.mobile-only {display: none;}
	
	table.zespoly {max-width: 48%;}
	
	.wideo-responsive-small { margin: 3% 0; }
	.wideo-responsive-small iframe{ height: 270px; width: 480px; }
		
}

@media (max-width: 1000px) and (min-width: 801px) {

	#page {width:790px;}
	aside {width:100%;}
	#content {width:100%;}
	.lewa_kolumna {width: 49.5%;}
	.prawa_kolumna {width: 49.5%;}
	
	.najnowsze { width: 22%; padding: 1.125%; height: 310px; margin: 0.5% 0 0.5% 1%;}   /*dodana orientacyjna wysokość bo przy nierównych się rozjeżdżało przy zmniejszaniu*/
	.najnowsze:nth-child(4n+1) {margin: 0.5% 0; }/*usuwa zewnętrzny margines w kazdej linii*/
	.podzialna2 { 
	width: 45.5%;} /*bo padding article jest 2%*/
	article.podzialnatrzy { width: 29%; margin: 1% 0 0 2%;}
	article.podzialnatrzy:nth-child(3n+1){ margin-left: 0;}
	img.podzialnatrzy {padding: 5% 5% 2%; width: 90%; height: 200px;}
	article.recenzje { height: 405px; }
	article.zespoly { height: 340px;}
	
	article.podzialnatrzy-podsumowania { height: 810px; } 
	article.podzialna2-podsumowania { height: 650px;}
	article.podzialnatrzy-podsumowania img { width: 90%; margin: 5%; }
	article.podzialna2-podsumowania img { width: 60%; margin: 2% 20%; }
	article.short  {height: 710px;}
	
	
	.data {width: 100%;}
	.fbtw {width: 175px; padding-left: 10px;}
	
	.obrazekright, .obrazekleft {max-width: 45%; margin: 2%;}
	.obrazekright {margin-right: 0;}
	.obrazekleft { margin-left: 0;}
	
	/* klasy użyte do podsumowań np. 2013 */
	.obrazekleftsmall, .obrazekrightsmall { max-width: 35%; overflow: hidden;}
	.obrazekleftsmall { float: left; margin: 1% 3% 2% 0;}
	.obrazekrightsmall { float: right; margin: 1% 0 2% 3%;}
	.tekst { margin-left: 38%;}
	
	/* galerie */
	img.galeria2x2 {width: 48%; padding: 0.5%;}
	img.galeria3x3 {width: 32%; height: 200px; overflow: hidden; padding: 1% 0 0 0; }
	.galeria-container a { padding-left: 1%; }
	.galeria-container a:nth-child(3n+1) { padding-left: 0;}
	
	.mobile-only {display: none;}
	
	table.zespoly {max-width: 48%;}
	
	.wideo-responsive-small { margin: 3% 0;}

	.wideo-responsive-small iframe{       /* dodać do media */
    height: 270px;
    width: 480px; }
	

}

@media (max-width: 800px) and (min-width: 501px) {

	#page {width:500px;}
	aside{
		width:100%; 
		text-align: center} 
	#content {width:100%;} 
	.najnowsze {width: 45.5%; padding: 2%; margin: 0.5% 0 0.5% 1%; height: 290px; }  /*dodana orientacyjna wysokość bo przy nierównych się rozjeżdżało przy zmniejszaniu*/
	.najnowsze:nth-child(2n+1) {margin-left: 0;}
	
	.podzialna2 { width: 45.5%;} /*bo padding article jest 2%*/

	article.podzialnatrzy {width: 46.5%; margin: 1% 0 0 1%;} /*dzieli na 2*/
	article.podzialnatrzy:nth-child(2n+1) {margin-left: 0;}
	img.podzialnatrzy {padding: 5% 5% 2%; width: 90%; height: 200px;}
	article.recenzje { height: 410px; }
	article.zespoly { height: 320px;}
	
		article.podzialnatrzy-podsumowania { height: 810px; }
	article.podzialna2-podsumowania { height: 835px;}  /*potrzebne minimum ew skrócić Avida Dollars*/
	article.podzialnatrzy-podsumowania img { width: 90%; margin: 5%; }
	article.podzialna2-podsumowania img { width: 90%; margin: 2% 5%; }
	
	article.podzialnatrzy-podsumowania:nth-child(3) {width: 97%; height: auto; margin: 1% 0; padding: 2%; }
	article.podzialnatrzy-podsumowania:nth-child(3) img { width: 220px; margin: 2% 140px;}
	article.pojedynczy-podsumowania img { width: 300px; margin: 10px 100px;}
	article.short  {height: 720px;}
	
	.data {width: 100%;}
	.fbtw {width: 175px; padding-left: 10px;}
	

	.obrazekright, .obrazekleft {width: 96%; margin: 4% 2%;}
	.obrazekleftsmall, .obrazekrightsmall {width: 76%; margin: 4% 12%;}
	img.galeria2x2 {width: 99%; padding: 0.5% 1%;}
	img.galeria3x3 {width: 48%; padding: 1% 0 0 0; height: 190px; overflow: hidden;/* width: 99%; padding: 1% 0 0 0;  */}
	.galeria-container a { padding-left: 1%; }
	.galeria-container a:nth-child(2n+1) { padding-left: 0;}
	
	table.zespoly {width: 98%;}
	
	.wideo-responsive-small { 
	overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	text-align: center;
	margin: 4% 2%; 
	}

	.wideo-responsive-small iframe {    
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute; 
	}

}


@media (max-width: 500px) {

	#page {width:96%; min-width: 300px;}
	aside{
		width:100%; 
		text-align: center}  
	#content {width:100%;} 
	.najnowsze {width: 45.5%; padding: 2%; margin: 0.5% 0 0.5% 1%; height: 290px;}  /*dodana orientacyjna wysokość bo przy nierównych się rozjeżdżało przy zmniejszaniu*/
	.najnowsze:nth-child(2n+1) {margin-left: 0;}
	.podzialna2 { width: 45.5%;} /*bo padding article jest 2%*/
	
	article.podzialnatrzy {width: 46.5%; margin: 1% 0 0 1%;} /*dzieli na 2*/
	article.podzialnatrzy:nth-child(2n+1) {margin-left: 0;}
	img.podzialnatrzy {padding: 2%; width: 96%; height: 160px;}
	
	article.recenzje { height: 400px; }
	article.zespoly { height: 340px;}
	
	article.podzialnatrzy-podsumowania { width: 97%; margin: 1% 0; padding: 2%; }
	article.podzialnatrzy-podsumowania:nth-child(2n+2) {margin-left: 0;}
	article.podzialna2-podsumowania { height: auto; width: 96%; margin: 1% 0; padding: 2%;}
	article.podzialnatrzy-podsumowania img { width: 80%; padding: 3% 10%; }
	article.podzialna2-podsumowania img { width: 80%; padding: 3% 10%; }
	article.pojedynczy-podsumowania img { width: 80%; padding: 3% 10%; }

	
	
	.data {width: 100%;}
	.fbtw {width: 100%;}
	
	header#header img {height: 180px; width: 100%; object-fit: cover; object-position: 96% 50%;}
	
	.obrazekright, .obrazekleft, .obrazekleftsmall, .obrazekrightsmall {width: 98%; margin: 4% 1% 6%;}
	img.galeria2x2 {width: 99%; padding: 0.5% 1%;} /* galeria2x2 z wywiadu ska-p 2x2 zdjęcia w divie galeria-container*/
	img.galeria3x3 {width: 99%; padding: 1% 0 0 0; max-width: 400px;}/*galeria zdjęć po 3, musi być datalightbox do paddingów!!! */
	.galeria-container a { padding-left: 1%; }
	.galeria-container a:nth-child(3n+1) { padding-left: 0;}
	
	table.zespoly {width: 98%;}
	
	
	.wideo-responsive-small { 
	 overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	text-align: center;
	margin: 4% 2%; 
	}

	.wideo-responsive-small iframe {     
     left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute; }
	
}



@media (max-width: 450px) and (min-width: 400px) {
	.najnowsze {height: 310px;} 
}

@media (max-width: 399px) {
	.najnowsze {height: 325px;} 
}

@media (max-width: 359px) {
	article.podzialnatrzy, .najnowsze, .podzialna2 {width: 96%; margin: 1%; padding: 4% 2%; height: auto;}
	article.podzialnatrzy:nth-child(2n+2), article.najnowsze:nth-child(2n+2){margin-left: 0;}		
	article.recenzje, article.zespoly { height: auto; padding-bottom: 5%;} /* ten padding nie działa !! */
	article.recenzje img, article.zespoly img { width: 90%; padding: 5% 5% 3%; height: auto;}
	
}  
@media (max-width: 339px) {
	.space {padding: 10px;} /* index.html niusy etc - odstęp na najmniejsze mobilne*/
}

/*===================== STYLE TEKSTU OGÓLNE ===================*/

h1 { 
	font-size: 2em; /*wartość z normalize był 2em */
	font-weight: 700;
	text-align: center;
	margin: 0.67em 0;  /*wartość z normalize  */
}

h1.h1-big { 
	font-size: 2.5em;
	text-transform: uppercase;
}


h2 { 
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
	margin: 0.5em 0; 
}

h2.podtytul {
	font-size: 1.3em;
	padding: 0.7em 1.5em 1em;
}

h3 { 
	font-size: 1.2em;
	font-weight: 700;
	margin: 0.4em 0; 
}

.h3-center { 
	font-size: 1.2em;
	text-align: center;
	font-weight: 700;
	margin: 0.3em 0; 
}


h4 { 
	font-size: 1.1em;
	font-weight: 700;
	margin: 0.5em 0;
}

h4.h4-center  { 
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
	margin: 0.4em 0;
}


h5 { 
	font-size: 1em;
	
}
p {
	text-align: left;
	padding: 0.5em 0;	
}

hr {
	margin: 1em 0 0;
	border: 1px dashed #303030;
}

/* ------- linia m.in przed tagami w panelach pionowych str główna ------*/
hr.dashed {
	margin: 1em 0 0;
	border: 1px dashed #303030;
}

b{ 
	font-weight: 700;
}

i {
	font-style: italic;
}

small {
	font-size: 0.9em;
}

/* Oniemiałem i wiele innych np recenzje*/

blockquote {
	font-size: 0.94em;
	padding: 1em 1.5em;
	font-weight: 300;
	color: #eee;
}

strong {
	font-weight: 600;
	letter-spacing: 0.03em;
}

/*========== STYLE PANELI ZE STR GŁÓWNEJ ===============*/

/* -----------STYLE OGÓLNE -------------- */

/* styl ogólny article - powinien działać na KAŻDEJ stronie, podstronie */

article {
	background-color: rgba(0,0,0,0.6);
	width: 96%;
	float:left;
	padding: 2%;
	margin: 0;
	-webkit-border-radius: 5px;
	border-radius: 5px;
		/* background-position: right; usunęłam i nie widzę różnicy */
}

/* ---- nagłówek = kategoria niusy, recenzje etc ----- */
article.categorybig {  
	width: 98%;
	padding: 0 1%;
	margin: 0 0 3px;
}

.categorybig h1 {
	font-size: 1.4em;
	margin: 0.4em;
}

h2.h2-categorybig {
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
	margin: 0.4em 0;
	text-transform: uppercase;
}

/* --- przycisk na dole pod każdym blokiem niusów etc. --- */

.zobaczwiecej {
	width: 100%;
	padding: 0;
	margin-top: -3px;
	margin-bottom: 15px;
	display: inline-table; /*dodane pod javascript*/
	text-align: center; /*dodane pod javascript*/
}

/* tekst */

.zobaczwiecej p {     
	text-align: center;
	font-weight: 600;
	padding: 6px 0;
	font-variant: small-caps;
	vertical-align: middle;   /*dodane pod javascript*/
	display: table-cell;   /*dodane pod javascript*/
}

.zobaczwiecej a {
	text-decoration: none;
}

.zobaczwiecej a :hover {
	text-decoration: none;
	color: rgb(210, 210, 210);
	/* opacity: 0.5; */
}

/* -------- KOLUMNY PIONOWE ----- */

.lewa_kolumna {
	float: left;
	margin-right: 0.5%;
	min-height:300px;
}

.prawa_kolumna {
	float: left;
	margin-left: 0.5%;
	min-height:300px;
}


/* ---- wpis w panelach pionowych index ----- */
article.wpisindex {
	background-color: rgba(0,0,0,0.5);
	margin: 0 0 6px;     /* odstęp miedzy artykułami */
}


/* ---------- Tagi w panelach------- */

/* TAGI ukrywa tagi które wychodzą na drugą linijkę, dodawanie ... na końcu z użyciem {white-space: nowrap;text-overflow: ellipsis;} się nie udaje bo wtedy nie zawija też innych wierszy SPRÓBOWAĆ ZROBIĆ Z PHP*/



p.datatagi {
	overflow: hidden;
	font-size: 0.8em;
	text-align: center;
	padding: 8px 0 4px;
	letter-spacing: 0.05em;
	font-weight: 100;
}

p.datatagi-indeks {
	height: 2.3em;
}

p.datatagi-poziomy {
	height: 3.7em;
}



/* samo słowo "Tagi" */
.datatagi span {
	font-weight:700;
	text-transform: uppercase;
}


/*== ---- Style w art pionowych ---- ==*/

/* nagłówek niusa etc w pionowych*/
article.wpisindex h3 {
	margin: 25px 0 10px;
	font-size: 1.1em;
	font-weight: 600;
}

/*do obrazka w pionowych*/
img.miniatura {  			
	width: 160px;
	height: 160px;
	object-fit: cover;   
	float: left;
	margin: 0 10px 0 0;
}

/*style akapitu p class= indeks ze str głównej*/
p.pindeks {
	text-align: left;
	margin: 0;
	padding: 0;
	height: 9em;
	overflow: hidden;
	white-space: initial;
	font-size: 1em;

}


/* ----- czytaj dalej w pionowym  ------ */
p.czytajd {
	text-align: center; 
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.05em;
	
	width: 115px;
	float: right;
	margin: 4px 0;
	background-color: rgba(0,0,0,0.8);
	padding: 2px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
		
	text-decoration: none;
}


article.wpisindex a {
	text-decoration: none;
}

/* article.wpisindex:hover {
	opacity: 0.8;
}  */

p.czytajd:hover {
	color: rgba(255, 126, 0, 1);
	/* color: white; */
	/* background-color: rgba(200,0,0,0.5); */
}

/* ------------ PANEL POZIOMY:  NAJNOWSZE ------------------ */


div.newest { 						/*kontener używany w index, recenzje, zespoly*/
		float: right;
		width: 100%;
		background-color: transparent;
		margin: 0 0 6px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		
		}


/*article wewnątrz div - jego skalowanie i paddingi są w @media*/
article.najnowsze {

	background-color: rgba(0,0,0,0.5);
}


/* article.najnowsze:hover, .podzialna2:hover {
	opacity: 0.8;
}  */

/* nagłówek niusa etc w poziomych*/
article.najnowsze h3, .podzialna2 h3 {
	font-size: 1em;
	padding: 0;
	margin: 5px 0;
	font-weight: 600;
	}
	
article.najnowsze a:HOVER, .podzialna2 a:HOVER {
	text-decoration: none;
	color: rgb(210, 210, 210);
	/* color: rgba(255, 126, 0, 1); pomarańcz*/
	/* color: rgba(200,0,0,0.7); czerwień */
}


img.miniatura-poziomy { 
	text-align: center;
	padding: 1%;
	margin: 2px 0 0;
	width:100%;
	height: 170px;
	object-fit: cover;   
	
} 


/* panel poziomy z podziałem na 2 kolumny - np WYWIADY  */

.podzialna2 { 
	/*width w @media*/
	min-height: 330px;  /*duże pole dla wysokości, ale przy bardzo dużym zmniejszeniu rozjedzie się ale pokaże wszystkie tagi*/
	background-color: rgba(0,0,0,0.5);
}

.podzialna2:first-child {
	margin: 0 1% 0 0; 
}


/*-------------------------na zdjęciu: ze starej muzz--------------------------*/


.kategoria {
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background-color: rgba(0,0,0,0.8);
	position: absolute;
	margin-top: -4px;
	margin-left:-5px;
	padding: 4px;
	
}

/*----------KOLORY STYLÓW W ZALEŻNOŚCI OD KATEGORII ---------------*/

/* kategoria i czytaj dalej - kolor tekstu */
.kategoria-niusy {
	color: rgba(0,128,0 ,1);
}
.kategoria-recenzje {
	color: rgba(128,0,128 ,1);
}
.kategoria-artykuly {
	color: rgba(255,0,0 ,0.9 );
}
.kategoria-zespoly {
	color: rgba(7,88,255,1)/* rgba(0,0,205 ,0.9) */; /*mediumblue*/
}
.kategoria-wywiady {
	color: rgba(32,178,170 ,1);
}
.kategoria-piosenkownia {
	color: rgba(255,215,0 ,1 );
}
.kategoria-default {
	color: rgba(255,165,0 ,1); /*orange*/
}

/* nagłówek i pod spodem - kolor tła */
.panel-nowenastr {
	/* background-color: rgba(32,178,170 ,0.6); */
	background-color: rgba(112,128,144 ,0.5); /*szary*/
	/* background-color: rgba(255,140,0 ,0.6); */
}
.panel-niusy {
	background-color: rgba(0,128,0 ,0.4 );
}
.panel-recenzje {
	background-color: rgba(128,0,128 ,0.5)
}
.panel-artykuly {
	background-color: rgba(255,0,0 ,0.5 );
}
.panel-zespoly {
	background-color: rgba(0,0,205 ,0.3);
}
.panel-wywiady {
	background-color: rgba(32,178,170 ,0.6);
}
.panel-piosenkownia {
	background-color: rgba(255,215,0 ,0.6 );
}




/*============== PODSTRONY (NIUSY, ARTYKUŁY, PIOSENKOWNIA, WYSZUKIWANIE)=================*/



article.wpis-podstrony {
	margin: 4px 0;
}

img.miniatura-podstrony { 

	width: 200px;
	height: 200px;
	max-width: 50%;
	max-height: 50%;
	object-fit: cover;
	float: left;	
	padding: 1%;
	margin: 0 1% 0 0;
}

.wpis-podstrony h3.h3-center {
	margin: 1em;
	
}

p.p-wpis-podstrony {
	padding: 1% 1% 0 1%;
	height: auto;
	max-height: 11.7em;
	min-height: 11em;
	margin: 0;
	overflow: hidden;
	white-space: initial;
	font-size: 1em;

}

/* .wpis-podstrony p.czytajd {
	float: right;
	margin: 2px 0;
	
} */

.wpis-podstrony hr {
	margin-top: 2.5em;
}


.wpis-podstrony p.datatagi {
	max-height: none;
}

.categorybig h3{ 
	font-size: 1em;
	text-align: center;
	font-weight: 600;
	margin: 0.5em;
	font-variant: small-caps;
	
}


/*============== PODZIAŁ NA 3 - RECENZJE i ZESPOŁY oraz podsumowania=================*/


article.podzialnatrzy {	
	padding: 1.5%; 
	overflow: hidden;  
}


article.podzialnatrzy:hover {
	background-color: rgba(110,110,110 ,0.6);
}

article.podzialnatrzy a:hover {
	text-decoration: none;
	color: black;
	/* color: rgb(220,220,220) szary*/
}



img.podzialnatrzy {
	text-align: center;
	margin: 0;
	object-fit: cover;
}

p.datatagi-podzialnatrzy {
	max-height: 6.12em;
}

/*--szczególne do stron: zespoły, recenzje - przeniesione do @media --*/




img.zespoly {
	padding: 2%;
	width: 96%;
	height: 160px;	
}



/*------------SZCZEGÓLNE DO STRONY PODSUMOWANIA w artykułach ---------------------
article.podzialnatrzy-podsumowania; article.podzialna2-podsumowania oraz style do img są w media--*/



article.podzialna2-podsumowania h3, article.podzialnatrzy-podsumowania h3, article.pojedynczy-podsumowania h3, article.podsumowanie-wyroznienia h3 {
	font-size: 1.2em;
}

article.podzialna2-podsumowania:hover, article.pojedynczy-podsumowania:hover, article.podzialnatrzy-podsumowania:hover {
	background-color: rgba(192,192,192 ,0.6)
}

article.podzialna2-podsumowania a:hover, article.pojedynczy-podsumowania a:hover, article.podzialnatrzy-podsumowania a:hover  {
	text-decoration: none;
	color: black;
}

div.tekst-podsumowania2, div.tekst-podsumowania3, div.tekst-podsumowania1 {
	font-size: 0.95em;
}


/*użyć wraz z klasą .czytajd oraz .kategoria-default dla orange*/
p.czytajd-podsumowania {
	text-align: center; 
	width: auto;
	margin: 6px auto;
	float: none;
}

p.czytajd-podsumowania:HOVER {
	color: white;
	background-color: rgba(139,0,0 ,1);
}

article.podsumowanie-wyroznienia {
	height: 350px;
}


/*==============================================================================*/

/*====================== STRONY ZE WPISAMI - STYLE ============================*/


#wpisy	{
	width: 90%;
	padding: 5%;
	height: auto;
	min-height: 500px;
	background-color: rgba(0,0,0,0.6);
	border-radius: 5px;
	line-height: 1.4;
	font-size: 1em;
	letter-spacing: 0.02em;	
}


p.justified {
	text-align: justify;
}	

/*section?? jeśli tak to wewnątrz artykułu | aside??*/
.general-info {
	min-height: 100px;
	/* background-color: rgba(200,0,0,0.3); */
	border-bottom: 1px dashed grey;
	margin-bottom: 50px;
	padding-bottom: 10px;
	font-size: 0.95em;
}

	/* panel fb i tw */
	.fbtw {
		float: right;
		margin-bottom: 5px;
		display: inline-block;
	/* 	width: 175px; */	
	}

		.fb-like {
			padding: 3px 3px 3px 0;
			}

		.twitter-share { 
			margin: 10px 10px 0 0; 
			}

	.data-art {
		padding-top: 7px;
/* 		line-height: 1.6em; */
		
	}

		.tagi-top{
			text-align: left;
			/* padding-top: 8px; */
		/* 	width: 70%;   */ /*w @media dać 100% na małe ekrany*/
		}

		.data-autor {
			margin: 0 0 5px 3px;	
		}


		.data-art span {
			font-weight:700;
			/* text-transform: uppercase; */
			font-variant: small-caps;
		}


/*---------------------- NAGŁÓWEK z H1 --------------------------------*/
header#articleheader {
	
}



/*=======================================================================================*/

/*======================= STYLE WEWNĘTRZNE ARTYKUŁÓW!!!!! ===============================*/
/* powinnam dodać header artictle section aside nav też do wszystkich artykułów !!!! */



/*---------------------- SEKCJA OGÓLNA TEKST Z OBRAZKAMI --------------------------------*/


.text-wpisu {   /*ew go nie dawać tylko ma być wewnątrz article pod headerem*/
	
}

/*-------------------- obrazki - są w media -  problem z width oraz responsywnością. --------------------------*/

/* max-width: 50%; */
.obrazekright{ 	
			float: right;
			padding-right: 0;
			
}

.obrazekleft{ 	
			float: left;
			padding-left: 0;	
}

.obrazekcenter {
	width: 100%;
	margin: 3% 0;
	text-align: center;
}

/* div - użyć wraz z klasą obrazekright lub left */
.podpisobraz {
	display: block-inline;
}

.podpisobraz img{
	width: 100%;
}
p.podpis{
	font-size: 0.9em;
	padding: 0.5em 1em;
	letter-spacing: 0.05em;
	line-height: 1.2em;
	text-align: center;
}

/*---------------------- SEKCJA NA YOUTUBE, SPOTIFY, BANDCAMP ETC. --------------------------------*/
section.zobaczmedia {
	margin: 5% 0;
	padding-bottom: 1em;
	padding-top: 0;
	
}

/*------------wideo--------------*/




.wideo, .wideo-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	text-align: center;
	margin: 4% 2%;
}

.wideo, .wideo-responsive iframe{       /* dodać do media */
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
	
}

.player {
	margin: 5%;
	}

.player iframe {
	max-width: 90%;
}

.post-embed {
	margin: 5% 0;
}

.post-embed iframe {
	width: 100%;
}


/*----------------------linki zewnętrzne--------------------------------*/

section.linkizewn {
	margin-top: 1em;
	padding: 1em 0 1em 1.5em;
	border-top: 1px dashed #303030;

}

/* span z opisem linku, np. "Strona oficjalna" "Facebook" etc */
.linkizewn_label {
	font-weight: 600;
}

.linkizewn_label:after {
	content: ':';
}

.linkizewn a {
	color: orange;
	font-weight: 500;
}

.linkizewn a:HOVER {
	text-decoration: none;
	color: rgba(255, 140, 0, 0.9);
	
	/* color: rgba(139,0,0 ,1); darkred*/
}

.linkizewn a:AFTER {
		content: '»';
		padding-left: 0.1rem;
	}
	
.linkizewn ul {
		text-indent: -1.5em;
}

.linkizewn ul li {
	list-style-type: none;
	padding-left: 0;
}

.linkizewn li:before {
  content: "➤";
  padding-right: 0.4rem;

}



/*----------------------zobacz też - inne artykuły z muzz --------------------------------*/

section.zobacztez {
	margin-top: 1rem;
	padding: 1rem 0;
	border-top: 1px dashed #303030;
	padding-left: 1.5rem;
	line-height: 1.5rem;
}

	.kategoria-zobacztez {
		font-size: 0.95rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.zobacztez a {
		text-decoration: none;
		color: rgba(239,239,239,1);
		font-weight: 500;
	}

	.zobacztez a:HOVER {
		text-decoration: none;
		color: rgb(189, 189, 189);
		/* rgba(255,228,181 ,1)  */
		/* rgb(204, 196, 176) szary!
			rgb(210, 210, 210)		*/
		/*rgba(255,250,205 ,1)/* rgba(255,235,205 ,1) *//* rgba(178,34,34 ,1) */;
		/* rgba(139,0,0 ,1); */
		/* font-weight: 600; */
	}
	
	.zobacztez a:AFTER {
		content: '»';
		padding-left: 0.1rem;
	}

	.zobacztez ul {
		text-indent: -1.5rem;
	}

	.zobacztez ul li {
		list-style-type: none;
		padding-left: 0;
	}

	.zobacztez ul li:before {
	  content: "➤";
	  padding-right: 0.4rem;

	}

/*=============================== Koniec edytowalnych ======================================*/



/*=============================== Koniec edytowalnych ======================================*/


/*----------------------Div Polecamy--------------------------------*/

#polecamy {
	margin: 10px 0 0;
	border-radius: 5px;
	float: left;
	width: 100%;
}

/*------------------------- Div Komentarze---------------------*/


/* cały panel */
#komentarze {
	margin: 10px 0;
	background-color: rgba(0,0,0,0.5);
	border-radius: 5px;
	float: left;
	width: 100%;
}

/* pojedynczy komentarz dodany */

.komentarz {
	width: 90%;
	height: auto;
	background: rgba(145, 144, 144, 0.4);
	margin: 2% 5% 0;
	box-shadow: 5px 5px #000;
	border-radius: 10px;
	float:left;
	
}

.komentarz:first-child {
	margin-top: 5%;
}

.komentarz-nagl {
	background: rgba(17, 17, 17, 0.7);
	text-align: left;
	padding: 1px 10px 2px;
	border-top-right-radius: 10px;
    border-top-left-radius: 10px;
	font-size: 0.9em;
	letter-spacing: 0.05em;
}

.tekst-koment {
	padding: 0 10px 2px;
	font-size: 0.97em;
}

/* ----- formularz ------ */
.komentarze-form {
	width: 90%;
	height: auto;
	padding: 0 5%;
	float: left;
	margin: 5% 0;
}

/* pole tekstowe komentarz */
textarea {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  box-sizing: border-box;
/*   border: 2px solid #ccc; */
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

/* autor */
input[type=text] {
	background-color: #f8f8f8;
	border-radius: 5px;
	width: 150px;
}

input[type=submit] {
	font-weight: 500;
	border-radius: 5px;
	padding: 1px 10px 2px;
	cursor: pointer;
	margin-top: 5px;
}

input[type=submit]:hover {
	font-weight: 600;
}

label {
	font-weight: 600;
	font-size: 0.9em;
}


/*-----------przyciski do niusów PRZEKOPIOWANE i edytowane-------------------------*/

#nastpoprz {
	margin: 10px 0;
	background-color: rgba(0,0,0,0.5);
	border-radius: 5px;
	float: left;
	width: 100%;
}

#nast, #poprz {
	background-color: rgba(112,128,144 ,0.5);
    font-size: 1.1em;
    padding: 6px;
    margin: 5px;
  	border-radius: 4px;
  	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  	transition: all 0.2s ease-out;
}

#nast {
	float: right;
}

#poprz {
	float: left;
}

#nast a, #poprz a {
	text-decoration: none;
}

#nast:HOVER, #poprz:HOVER {
	background: #555;
}







/*-------------------------facebook likebox--------------------------*/
div#fb-root{
padding: 5px 0 0 5px;

}

#facebook-likebox {
    height: 550px;
    width: 300px;
    position: fixed;
    right: -305px;
    top: 50%;
    margin-top: -246px;
    background-color: #101010;
	color: #fff;
    padding: 5px;
    z-index: 1000;
}
 
#facebook-likebox-button {
    position: absolute;
    left: -43px;
    top: -1px;
    display: block;
    padding: 14px 18px;
    background-color: #335F9D;
    border-radius: 5px 0px 0px 5px;
}


/*--------------------- PIOSENKOWNIA STYLE ------------------------------*/


/* section teksty i tłumaczenie*/

section.teksty-tlum {
	padding: 1em 0;
	border-top: 1px dashed #303030;
		
}

/* div w którym jest tabelka, odpowiada za przesuwanie; overflow doda suwaczek na komórkach */
div.teksty-tlum-suwak {
	width: 100%; 
	overflow-x: auto;
}

/* table piosenkownia - z podziałem na 2 kolumny*/
.piosenkownia {
	width: 100%; 
	min-width:550px;
	margin: 10px 0;
	font-size: 0.92em;	
}

.piosenkownia th, .piosenkownia td {
	width: 48%;
	padding-right: 2%;
}

.piosenkownia th:nth-child(even), .piosenkownia td:nth-child(even) {	
	padding-right: 0;
	padding-left: 2%;
}

.piosenkownia th, .piosenkownia3 th {
	font-weight: 600;
	font-size: 0.98rem;
	padding: 1em 0;
	text-align: left;
}


/* table piosenkownia - z podziałem na 3 kolumny*/
table.piosenkownia3 {
	width: 100%; 
	min-width: 700px;
	margin: 10px 0;
	font-size: 0.9em;	
}

/* lewa kolumna */
.piosenkownia3 th, .piosenkownia3 td {
	width: 32%;
}

/* lewa kolumna */
.piosenkownia3 th:nth-child(1), .piosenkownia3 td:nth-child(3n +1) {	
	padding-right: 1%;
	padding-left: 0;
}

/* prawa kolumna */
.piosenkownia3 th:nth-child(3), .piosenkownia3 td:nth-child(3n +3) {	
	padding-right: 0;
	padding-left: 1%;
}

/* środkowa kolumna */
.piosenkownia3 th:nth-child(2), .piosenkownia3 td:nth-child(3n +2) {	
	padding-right: 1%;
	padding-left: 1%; /*teraz ta kolumna ma o jeden padding więcej niż inne*/
}



/* style do tekstów p --> w piosenkowni tekst który wyświetla się na mniejszych ekranach w tabelce */
.przewin {
	font-weight: 600; 
	font-size:0.85em;
	text-align: center;
	color: rgba(255,228,181 ,1);
	padding: 10px 0 15px;
	font-variant: small-caps;
}
	
	
	/* żródło informacji - styl do ustalenia - p */
.zrodlo {
	text-align: right;
	padding: 10px 0;
	font-size: 0.95em;
}

p.right {
	text-align: right;
}

/* Style do wywiadów - na razie zostawiłam <b> do pytań*/

.pytanie {
	
}

.odpowiedz {
	
}

/* div z numerami stron na które podzielony jest długi artykuł w wywiadach */

.strony {
	text-align: center;
	font-weight: 600;
	padding: 5% 0;
	color: RGB(100,100,100);
}

/* .strony a:HOVER {
	text-decoration: none;
	color: rgba(200,0,0,0.7);
} */

h3.wywiad {
	font-size:1.1em; 
	margin-top: 30px;
	font-weight: 700; 

	}

p.pytanie {
	font-weight: 700;
	padding: 5px 0;	
}

p.wstepniak {
	font-weight: 600;
	padding: 3% 0;
	font-size: 1.05em;
	letter-spacing: 0.04em;
}


/* -------- GALERIA ZDJĘĆ DIV + img.galeria2x2 lub img.galeria3x3 (są w @media)---------------- */

section.galeria-zdjec {
	margin: 5% 0;
	padding-bottom: 1em;
	
}

.galeria-container {
	width: 100%;
	margin: 5% 0 0;
}

img.galeria2x2, img.galeria3x3 {
	object-fit: cover;
}

img.galeria-container a {
	padding: 0;
}

/* ------------------------ */

ol {
	list-style-position: inside;
}

ol li {
	padding: 0.1em;
}

/* ----------ARTYKUŁY PODSUMOWANIA  img.obrazekleftsmall w media-------------- */

div.artykuly-container {
	width: 100%;
	margin: 5% 0 0;
}

section.album {
	margin-top: 1rem;
	padding: 1rem 0;
	border-top: 1px dashed #303030;
}

/* h2 lub h3 */
.tytul-albumu {
	text-align: center;
	color: rgb(255,224,11);
	font-size: 1.5em;/*yellow*/
}

/*div z img oraz tekstem ma za zadanie trzymać kreskę od section wystarczająco na dole; div z samym tekstem w @media*/
.okladka-tekst {
	padding-top: 1em;
	min-height: 260px;
}


/* p opisujący gatunek zespołu w podsumowaniach */
.gatunek { 
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.05em;
}

p.czytaj {
	font-size: 0.95em;
}

/* header wewnątrz section bez klasy z h2 np. ROCK .*/
.header-podsumowanie-kategoria {
	margin-top: 2rem;
	border-top: 1px dashed #303030;
}

.h2-podsumowanie-kategoria {
	text-align: center; 
	color: rgb(232,4,4);/*red*/
	font-size: 1.7em;
}
/* ------------------------ */

/* Ramka z jakąś dodatkową treścią; użyta np. w Legado*/

.ramka-tresc {
	width: 96%; 
	margin: 2em 0; 
	border: 2px solid orange; 
	border-radius: 6px; 
	background-color: RGBA(20,20,20,0.5); 
	padding: 2%; 
	font-size: 0.9em;
}

/* ====================STYLE ZESPOŁY============================ */

section.dyskografia {
	margin-top: 1em;
	padding: 1em 0;
	border-top: 1px dashed #303030;
}

.dyskografia ul {
	list-style-position: inside;
	list-style-type: disc;
	padding: 0.5em 1em 1em;
}


/* ---- TABELA + FOTO div / section -------- */
.bio-zespoly {
	margin: 2rem 0;
	float: inline-end;
}

/* width - responsive w @media */
table.zespoly  {
	border-collapse: separate;
	table-layout: auto;
	padding: 1em 0;
	margin: 2% 1%;
		border-radius: 8px;
		-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
	background: #101010;
}

/* tabelka na całą szerokość*/
table.zespoly-center {
	width: 90%;
	margin: 5%;
	border-collapse: separate;
	table-layout: auto;
	padding: 1em 0;
		border-radius: 8px;
		-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
	background: #101010;
}

	/*--- wszystkie w tym pierwsza kolumna ----*/
table.zespoly td, table.zespoly-center td {
	border: 1px;
	background: #303030;
}

td.kolumna1 {
	font-weight: 700;
	padding: 0.1em 0.5em;
}

		/*--- pierwsza kolumna skład ----*/
td.sklad {
	font-size: 0.95em;
	font-weight: 600;
	padding: 0.1em 0.5em 0.1em 1.5em;
}
					/*--- druga kolumna ----*/
td.kolumna2{
	font-size: 0.95em;
	padding: 0.1em 0.5em;
}

/*dodatkowa klasa do wycentrowania, użyta w Ekhymosis*/
td.center{
	text-align: center;
	vertical-align: middle;
}



/* --------------------------------------------- */


section {
	padding: 0.5em 0;
}


section.ozespole {
	padding: 0.5em 0;
	display: inline-block;
}