@import 'boxmodel.css';
@import 'mainHeader.css';
@import 'aside.css';
@import 'footer.css';
@import 'facebookFrames.css';
@import 'gallery.css';
@import 'projects.css';
@import 'multimedia.css';
@import 'bpmCounter.css';
@import 'discography.css';
@import 'notransitions.css';

P {
	hyphens:auto;
}

MAIN .ramka .spanek {
	background-color:#ffffff45;
	border-radius:15px;
	box-shadow:0 0 35px #ffffff80;
/*	color:black;*/
}

MAIN .ramka {
	border: 2px inset #eee;
	margin: 50px auto;
	padding: 30px 50px;
	width: 80%;
	box-shadow: inset 5px 5px 10px #7777;
	border-radius: 5px;
	position:relative;
	overflow:hidden;
	background: linear-gradient(55deg, #f5deb320 0%, #ebe2d1f2 55%), url(../images/grandpianostave.png);
	background-repeat: no-repeat;
	background-size:100%, 4304px;
	background-position:0, calc(90% + 3700px) -90px;
}

MAIN .wazne {
	/*background-color: #FFFF8080;*/
	background: linear-gradient(55deg, #ffff8080 0%, #fbf2d1f2 55%), url(../images/grandpianostave.png);
	background-repeat: no-repeat;
	background-size:100%, 4304px;
	background-position:0, calc(90% + 3700px) -90px;
	color: black;
}

.monospace {
	font-family: monospace;
}

.textalignleft {
	text-align: left;
}


.belowArticleLinks {
	text-align: right;
}

.belowArticleLinks BUTTON {
	background-color: transparent;
	border: none;
	border-bottom: 1px dotted #808080;
	padding: 1px;
}

.belowArticleLinks BUTTON:HOVER {
	border-bottom: 1px solid #808080;
}

.belowArticleJumpToTop A:LINK, A:VISITED {
	border-bottom: none;
}

.belowArticleJumpToTop A:HOVER IMG {
	transform: translateX(3px) translateY(3px) rotate(0deg);
	box-shadow: 2px 2px 4px #333a;
	filter: contrast(1);
}

.belowArticleJumpToTop {
	display:none;
	/*position: sticky;*/
	/*right: 40px;
	bottom: 50px;
	width: 40px;
	margin: 10px 10px 0px auto;*/
	margin-top:8px;
	bottom: 3px;
	float: right;
	margin-right: 10px;
}

.belowArticleJumpToTop IMG {
	width:40px;
	box-shadow: 5px 5px 5px #3338;
	transition: 0.2s;
	transform: rotate(-10deg);
	filter: contrast(0.7);
	border: 4px solid white !important;
	border-radius: 50%;
}

DIV.hr {
	border: 0;
	/* border-bottom:			1px dashed #FF8C00; */
	border-bottom: 1px dashed #904040;
	width: 700px;
	margin: 0 0 30px 0;
}

.clear {
	clear: both;
	width: 0px;
	height: 0px;
	margin: 0px;
	padding: 0px;
}

body {
	cursor: default;
	background: linear-gradient(180deg, black, black, #707070, black);
	color: #301010;
	/* 503030 */
	margin: -1px 0 0 0;
	/*font-family:		 'Didact Gothic', 'Andada', sans-serif;*/
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	line-height: 170%;
	font-size: 16px;
	z-index: -5;
	position: relative;
}

H1 {
	font-family: 'Andada', sans-serif;
	text-align: center;
	text-shadow: 0.02em 0.02em 7px rgba(0, 0, 0, 0.3), 0.01em 0.01em 10px white;
	padding: 0 10px 0 10px;
	z-index: 5;
	font-size: 310%;
	color: #900000;
	margin: 30px auto 0 auto;
	background: rgba(245, 222, 179, 0.2);
	border-radius: 20px;
	box-shadow: 0px 0px 40px rgba(245, 222, 179, 0.4);
	line-height: 70%;
	display: inline-block;
	width: max-content;
	font-weight: bold;
}

A:LINK.tytulStrony, A:VISITED.tytulStrony, .prawieh1 A:LINK, .prawieh1 A:VISITED {
	color: #900000;
}

DIV.wszystkiewiadomosci {
	text-align: right;
	font-size: 70%;
	margin-top: -10px;
	margin-bottom: 15px;
}

H2 {
	font-family: 'Andada', serif;
	margin: 0 0 30px 0;
	font-size: 34px;
	/*			background:linear-gradient(90deg, rgba(245,222,179,1) 0%, rgba(245,245,245,1) 100%);	*/
	text-shadow: 3px 3px rgba(255, 255, 255, 0.7);
	/*			line-height: 44px;		*/
	/*			font-size:			35pt;	*/
	/*			background-color:		black;	*/
	/*			color:				rgba(255,238,231,1);			/* FF9C50 */
	color: #100e17;
	/*			border-top:			1px dashed #f59c2d; 		*/
	border-bottom: 1px dashed #f59c2d;
	text-align: left;
	/* box-shadow: 0px 0px 2px #f59c2d;	*/
	width: calc(100% + 42px);
	padding: 15px 0px;
	background: linear-gradient(90deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
	box-shadow: 0px 10px 10px rgba(200, 200, 200, 0.7);
	border-top: 2px dotted white;
	border-right: 1px dotted #500000;
	position:relative;
}

MAIN H2 {
	/* border-top-right-radius:20px; */
	position: relative;
	left: -20px;
	padding-right: -40px;
	padding-left: 40px;
	/* text-align:center; */
}

H2::AFTER, H3::AFTER {
	content: ' ';
	background-color:white;
	background-repeat: no-repeat;
	background-size: contain;
	background-position:right;
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	height:100%;
	filter: opacity(0.2);
}

H2::AFTER {
	background-image: linear-gradient(to right, white calc(100% - 800px), transparent), url(../images/nutki.png);
}
H3::AFTER {
	background-image: linear-gradient(to right, white calc(100% - 300px), transparent), url(../images/keyboard.png);
}


H3 {
	/* 
	
			a może lepiej "H3, który nie jest w UL" :D 


	*/
	/*	background:linear-gradient(90deg, rgba(190, 190, 150,0.5) 30%, rgba(245,245,245,1) 100%);
			border-top:			1px dashed rgb(190,190,150); 
		*/
	background: linear-gradient(90deg, rgba(240, 240, 240, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
	box-shadow: 0px 10px 10px rgba(200, 200, 200, 0.7);
	position: relative;
	border-bottom: 1px dashed rgb(190, 190, 150);
	border-right: 1px dotted #500000;
	left: -20px;
	padding: 0px 30px 0px 10px;
	width: calc(100% + 42px);
	font-size: 150%;
	font-family: 'Andada', serif;
	text-align: left;
	border-top: 2px dotted white;
	position:relative;
}


H3.downloadfile::BEFORE {
	background-image: url(images/downloadicon.png);
	width: 20px;
	height: 20px;
	background-size: 100% 100%;
	display: inline-block;
	margin-right: 10px;
	content: '';
	margin-left: -25px;
}

MAIN H3 {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 40px;
	padding-right: 0px;
	/* text-align:center; */
}

UL H3 {
	padding: 0px;
	padding-left: 10px;
}

UL H3 A:link, UL H3 A:visited, UL H3 A:hover {
	background: none;
	border-bottom: 0px;
	font-weight: bold;
}

UL H3 A:link::AFTER {
	/*background-color: red;*/
	/*width: 20px;
	height:20px;
	display:inline-block;*/
	font-size: 50%;
	padding-left: 0.5em;
	vertical-align: top;
	/*background-image: url(images/external.svg);
	object-fit: cover;*/
	content: '⤴';
}

#container {
	margin: auto;
	position: relative;
	display: grid;
	min-width: 700px;
	grid-template-columns: auto minmax(100px, 400px) 40px;
	grid-template-rows: minmax(200px, auto) auto;
	grid-gap: 0rem;
	z-index: -2;
}

MAIN {
	/*background: linear-gradient(225deg, #eceff0 0%, white 100%);*/
	background: linear-gradient(262deg, rgba(255,255,255,0.98) 0%, rgba(236,239,240,0.98) 12%, rgba(255,255,255,0.98) 100%), url(../images/grandpianostave.png);
	background-repeat: no-repeat, repeat-y;
	background-size: 101%, 1550px;
	/*background-position-x: 0px, calc(100% + 1400px);*/
	background-position-x: 0px, calc(50% + 700px);
	/* #eceff0 do white */
	/* border-top-right-radius: 20px; */
	padding: 0px 20px;
	position: relative;
	text-align: justify;
	border-right: 1px dotted #500000;
	box-shadow: inset 8px 0px 10px rgba(140, 140, 140, 0.6);
	font-size: 120%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 0;
}


/* MAIN::AFTER {
	content: '';
	position:absolute;
	display:inline-block;
	top:80px;
	right:0%;
	width:10%;
	height:100%;
	background: url(../images/grandpianostave.png);
	background-repeat: repeat-y;
	background-size: 1700px;
	background-position-x: 0px;
	filter: opacity(0.05);
	z-index: -1;
}
*/

.mainContainer {
/*	overflow: hidden;*/
grid-column-start: 1;
grid-column-end: 2;
background:white;
}

ARTICLE {}

@media (max-width: 1400px) {
	#headernapisy {
		grid-template-columns: 1fr;
		grid-gap: 0;
		position: initial;
	}
	ASIDE {
		/* display:none; */
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 3;
		overflow-x: hidden;
		overflow-y: hidden;
	}
	.mainContainer {
		grid-column-end: 3;
	}
	.asideImgGallery {
		left: -20px;
		text-align: left;
		width: calc(80px * 20);
		z-index: 2;
	}
	.asideImgGallery IMG {
		box-shadow: none;
	}
	#nazwastrony, NAV#menu {
		background: linear-gradient(270deg, rgba(245, 222, 179, 1) 0%, rgba(255, 255, 255, 1) 100%);
		border-radius:2px;
	}
	UL H3 {
		width: calc(100% + 22px) !important;
	}
}

#gradient {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 5;
	background: linear-gradient(180deg, black, black, #707070, black);
	z-index: -4;
}

A:link, A:visited, A[onclick] {
	color: #401010;
	text-decoration: none;
}

MAIN A:link, MAIN A:visited, MAIN A[onclick] {
	/* background-color:#F4E8D8; */
	border-bottom: 1px dotted #808080;
	font-weight: 400;
}

MAIN A:link IMG, MAIN A:visited IMG, MAIN A:hover IMG, MAIN .galeria A:link, MAIN .galeria A:visited, MAIN .galeria A:hover {
	border-bottom: inherit;
}

MAIN A:hover {
	border-bottom-style: solid;
}

.rightalign {
	text-align: right;
}

MAIN UL {
	line-height: 160%;
}

UL.bez, UL.listaBezKropki {
	list-style-type: none;
}

.ramkaobrazka {
	border: 1px solid #e0e0e0;
	padding: 10px;
	box-shadow: 2px 2px 2px #a0a0a0;
}

.center {
	text-align: center;
}

TEXTAREA.pre {
	background: linear-gradient(270deg, rgba(220, 220, 220, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
	text-align: left;
	padding: 10px;
	line-height: 110%;
	box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2);
	border-bottom: 1px dotted white;
	border-right: 1px dotted #e8e8e8;
	/* border-left: 3px solid #e0e0e0;
	border-top: 3px solid #e0e0e0; */
	font-family: monospace;
	white-space: pre;
	width: 100%;
	/* overflow: scroll;
	max-width:calc(100%-20px); */
}

TT {
	background-color: rgba(220, 220, 220, 0.5);
	font-size: 110%;
	padding: 0px 3px;
}

.galeriathumbnail {
	width: 280px;
	height: 280px;
	display: inline-block;
	margin: 10px;
}

/*UL.filmyWDziale {
	display:grid;
	grid-template-columns: repeat(auto-fill, 800px);
	grid-gap: 0.5em;
	padding-left:0px;
}
*/

[style*="--aspect-ratio"]> :first-child {
	width: 100%;
}

[style*="--aspect-ratio"]>img {
	height: auto;
}

@supports (--custom:property) {
	[style*="--aspect-ratio"] {
		position: relative;
	}
	[style*="--aspect-ratio"]::before {
		content: "";
		display: block;
		padding-bottom: calc(100% / (var(--aspect-ratio)));
	}
	[style*="--aspect-ratio"]> :first-child {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
}

.archiwumnewsow OBJECT {
	display: block;
	margin: auto;
}

A.kropka {
	text-decoration: none;
	cursor: default;
	border-bottom: none;
}

.asideImgGallery IMG {
	object-fit: cover;
	width: 80px;
	height: 80px;
	box-shadow: 2px 2px 4px rgba(160, 160, 160, 0.7);
	/* border: 1px solid rgba(160, 160, 160, 0.4); */
	background-color: white;
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
}

.asideImgGallery {
	position: relative;
}

#wydarzenia #searchForm {
	position: absolute;
	top: 15px;
	right: 15px;
}

#wydarzenia #searchForm INPUT, #wydarzenia #searchForm SELECT, #wydarzenia #searchForm BUTTON {
	margin-left: 5px;
}

#wydarzenia #searchForm LABEL {
	box-shadow: 0px 0px 20px rgba(255,255,255,1);
	background-color: rgba(255,255,255,0.5);
}

INPUT {
	padding: 1px 3px;
}

BUTTON {
	padding: 1px 10px;
}

INPUT, SELECT {
	background: #fff;
	color: #525865;
	border-radius: 4px;
	border: 1px solid #d1d1d1;
	box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
	outline: none;
	-webkit-transition: .18s ease-out;
	-moz-transition: .18s ease-out;
	-o-transition: .18s ease-out;
	transition: .18s ease-out;
}

input:hover, select:hover {
	box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}

input:focus, select:focus {
	border: 1px solid #B8B6B6;
	box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}

.hidden {
	display: none !important;
}

.hiddenList UL {
	display: none;
	max-height:0px;
}

.rozwijamy {
	display: block;
	overflow: hidden;
	animation: pokazujemyAnimacja 0.2s;
}
.zwijamy {
	overflow: hidden;
	animation: pokazujemyAnimacja 0.2s;
	animation-direction: reverse;
	max-height:0px;
}

@keyframes pokazujemyAnimacja {
	from {
		display:none;
		max-height: 0px;
	}
	0.0001% {
		display:block;
	}
	99.9999% {
		max-height: 500px;
	}
	to {
		max-height: unset;
	}
}


.collapseList H3::BEFORE {
	content: '>';
	transform: rotate(90deg);
	display: block;
	width: 1em;
	position: absolute;
	margin-left: -25px;
	margin-top: 5px;
	transition: 0.5s;
}

.collapseList.hiddenList H3::BEFORE, .collapseList .hiddenList H3::BEFORE {
	transform: rotate(0deg);
	margin-top: -2px;
	transition: 0.5s;
}

#multimedia .dzial H3 {
	padding-left: 30px;
}

@media (max-width: 855px) {
	LABEL#onlyConcertsLabel {
		display: none;
	}
}

#wydarzenia #searchForm select {
	text-align: center;
}

#kontakt {
	text-align:left;
}

.wiecejNewsowFB {
	vertical-align: middle;
	width: 22px;
	border-bottom: none;
}

.fbnewsContentsReady>DIV, #newsLoadingAndLoadMoreButton {
	margin:10px;
}

#newsLoadingAndLoadMoreButton {
	margin: auto;
	display: block;
	background: none;
	border: none;
}

.fb-post iframe {
	box-shadow: 0px 0px 8px #aaaa;
}

.fbnewsContentsReady {
	padding:10px;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
}

q {
	font-style: italic;
}

q::before, q::after {
	content: '';
}

.dq::before {
	content: '„';
}

.dq::after {
	content: '”';
}

.articleList blockquote {
	font-weight: 300;
}