/* ver. 1.1 */

:root {
  --kolor-jasny: #bf6637;
  --kolor-ciemniejszy: #9f5630;
  --kolor-szary: #1c201f;
  --kolor-ciemny: #2d2321;
}

.tlo-ciemniejsze {
	background-color: var(--kolor-ciemniejszy); 
}

.tlo-jasne {
	background-color: var(--kolor-jasny); 
	color: black;
}

.tlo-szare {
	background-color: var(--kolor-szary); 
	color: white;
}

div img {
  height: 100%;
  width: 100%;
}


/*-------------------------------BODY------------------------*/

.body_desktop {
  	background-color: var(--kolor-ciemny); 
  	background-color: var(--kolor-ciemny);
 	margin: 0;
	margin-top: 0px;
	position: relative;

}


/*-------------------------------CONTAINER------------------------*/

.container {	
  	font-family: "Calibri", sans-serif;
	font-size: 21px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 0px;
	width: 80%;
	position: relative;
	margin-left: auto;
	margin-right: auto;


}

.item {
	width: 100%;
}

/*-------------------------------MENU------------------------*/
.menu {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: raw;
	height: 50px;
	padding-top: 5px;
	padding-left: 1px;
	padding-right: 1px;
	z-index: 10;

}

.menu-img {
	width: 100%;
	height: 100%;

}

.active-img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(0px, 2px) rotate(0deg); }
}

/*-------------------------------HEADER------------------------*/

.header {
}

/*-------------------------------BIO------------------------*/

.biodegradacja {

}

.biodegradacja-text {
	padding-left: 30px;
	padding-right: 30px;
	height: 200px;
	overflow-y: auto;
	font-size: 1vw;
}

/*-------------------------------#JASNY------------------------*/

.hash_jasny {
	height: 50px;
	width: 100%;
	background-color: var(--kolor-jasny); 
}


/*-------------------------------#WYDWNICTWA------------------------*/

.wydawnictwa {
}

.wydawnictwa-text {
	display: flex;
	justify-content: center;
	align-items: top;
	flex-direction: raw;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
	text-align: justify;
  	text-justify: inter-word;
}

.covers-text {
	font-size: 1vi;
	padding-left: 0px;
	padding-right: 0px;	
	width: 50%;
}

.covers-img {
	padding-left: 0px;
	padding-right: 0px;
	width: 50%;
	position: relative;	
	z-index 1;

}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 80%;
  position: relative;
  margin: auto;
` z-index: 1;

}

/* Hide the images by default */
.mySlides {
  display: None;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*-------------------------------#SZARY------------------------*/
.hash_szary {
	height: 50px;
	width: 100%;
	background-color: var(--kolor-szary); 
}

/*-------------------------------KONCERTY------------------------*/

.koncerty {
  width: 50%;
  height: clamp(450px, 60vh, 700px);
}

/*-------------------------------MUZYKA------------------------*/

.loga {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
}

.loga_wiersze {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: raw;
	padding-left: 30px;
	padding-right: 30px;
}

.logo {
	width: 30%;
	padding-left: 30px;
	padding-right: 30px;
	display: relative;
	z-index: 1;
}


/*-------------------------------TEKSTY------------------------*/

.spiewnik {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: raw;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
}


.akordy_pdf {
	width: 80%;
}

/*-------------------------------KONTAKT------------------------*/

.kontakt {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;

}

.email {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: raw;
	width: 80%;

}

.male {
	width: 10%;
}
.duze {
	width: 70%;
}


.subskrypcja {
    	width: 80%;

}

.przerwa {
	height: 3vh;
}



#layout-desktop {
  width: 100%;
}


#layout-desktop {
  display: block;
}

#layout-mobile {
  display: none;
}

.body_desktop #layout-desktop {
  display: block;
}

.body_mobile #layout-mobile {
  display: block;
}

.body_mobile #layout-desktop {
  display: none;
}

.pre-desktop body {
  display: block;
}

.pre-desktop #layout-desktop {
  display: block;
}

.pre-desktop #layout-mobile {
  display: none;
}

.pre-mobile #layout-mobile {
  display: block;
}

.pre-mobile #layout-desktop {
  display: none;
}