@font-face {
	font-family: "Special Elite";
	src: url("http://rockkompas.pl/wp-includes/fonts/SpecialElite.ttf");
	src: url("https://rockkompas.pl/wp-includes/fonts/SpecialElite.ttf");
	src: url("https://www.rockkompas.pl/wp-includes/fonts/SpecialElite.ttf");
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Special Elite', Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, rgba(0,0,0,1) 27%, rgba(255,255,255,1) 75%) fixed;
  flex-direction: column;
  margin:0;
}
#audio {
	
	margin: 1em 0 0 0 ;
}
#title {
	display: block;
    font-size: 1.5em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
#image{
	background:white;
}
#display {
	border-radius: 0 0 0 0;
	background: rgba(255,255,255,.5);
	backdrop-filter: blur(3em) hue-rotate(20deg);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;	
}

#art {
  box-shadow: 0 0 1em .5em rgb(255 255 255 / 78%);
  max-height: 15em;
  max-width: 15em;
}

#card {
	width: 100%;
	max-width:75em;
	display: flex;
	justify-content: center;
	align-items: stretch;
	border-radius: 0;
	box-shadow: 0 0 2em rgba(0,0,0,.5);
	/*background: rgba(255,255,255,0.5);*/
}

#www_radia{
	    
    vertical-align: middle;
    line-height: 2em;
    background: #000000de;
    padding: 0.65em;
    border-radius: 2em;
    text-decoration: none;
	color:white;
	margin-top:.5em;
	display:none;
}


.site-branding{
	text-align: center;
}


@media  screen and (orientation:portrait), 
		screen and (max-width: 40em), 
        screen and (max-height: 40em){
	
	.glide{
		display: none!important;	
	}
}
@media	(screen and (orientation:portrait)) and (screen and (max-height: 40em)){	
	
	.card { 
		height:80%!important;
	}
}

@media 	screen and (max-height: 35em){
	.container{		
		display: none!important;
	}
	.card { 
		height:100%!important;
	}
}






@media screen and (orientation:portrait) {
	.container{
		
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	#lists_container{
		display: flex;
		flex-direction: row;	
	}
	
	.scale {
		font-size:small;
	}
	
	.card{
		flex-direction: column;
	}

	.list {
		width:  100%;
		/*height: 600px;*/
	}
	
	.list2 {
		width:  0%;
		/*height: 600px;*/
	}
	
	.display {
		/*width:  100%;*/
		height: 30em;
		/*background:white!important;*/
		padding: 0;
	}
	
	.item.is-active {
		background: rgba(0,0,0,.25);
		backdrop-filter: blur(3em) hue-rotate(20deg);
		transition: all .3s ease;
	}
	
	.item:hover {
		cursor: pointer;
		background: rgba(255,255,255,.45);
		backdrop-filter: blur(3em) hue-rotate(20deg);
		transition: all .3s ease;
	}

	
	#audio {
		width:80%;
		margin: 1em 0 0 0 ;
	}
	
	@-webkit-keyframes animateListOpen {
	  0% {
		width: 0%;
	  }
	  100% {
		width: 100%;
	  }
	}

	@-webkit-keyframes animateListClose {
	  0% {
		width: 100%;
	  }
	  100% {
		width: 0%;
	  }
	}
}

@media screen and (orientation:landscape) {
	
	.container{		
		height:20%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.glide{
		height:20%;
	}
	
	#lists_container{
		width:55%;
		
		display: flex;
		flex-direction: row;	
	}
	
	.scale {
		font-size:small;
	}
	
	.card{
		height:55%;
		flex-direction: row;
	}

	.list {
		width:  100%;
		height:100%;
		/*max-height: 50em;*/
	}
	
	.list2 {
		width:  0%;
		height:100%;
		/*max-height: 50em;*/
	}

	.display {
		width:  45%;padding: 1em;
	}
	
	.item.is-active {
		background: rgba(255,255,255,.25);
		backdrop-filter: blur(3em) hue-rotate(20deg);
		transition: all .3s ease;
	}
	
	.item:hover {
		cursor: pointer;
		background: rgba(255,255,255,.45);
		backdrop-filter: blur(3em) hue-rotate(20deg);
		transition: all .3s ease;
	}

	
	@-webkit-keyframes animateListOpen {
	  0% {
		width: 0%;
	  }
	  100% {
		width: 100%;
	  }
	}

	@-webkit-keyframes animateListClose {
	  0% {
		width: 100%;
	  }
	  100% {
		width: 0%;
	  }
	}
}


#list {
overflow-x:hidden;
overflow-y:auto;
border-radius: 0 0 0 0;
background: transparent;
display: flex;
flex-direction: column;
}

#list2 {
overflow-x:hidden;
overflow-y:auto;
border-radius: 0 0 0 0;
background: transparent;
display: flex;
flex-direction: column;
}

.list-open{
  -webkit-animation: animateListOpen 0.35s ease-in;
  -webkit-animation-fill-mode: forwards;
}
.list-close{
  -webkit-animation: animateListClose 0.35s ease-in;
  -webkit-animation-fill-mode: forwards;
}


/* width */
#list::-webkit-scrollbar {
  width: 1em;
}

/* Track */
#list::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
#list::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
#list::-webkit-scrollbar-thumb:hover {
  background: #555; 

}


#list_plyta {
	
}

#list_polecane {
	
}

#list_pozostale

}

#list_pozostale h3 {	
	/*transform:scale(0.875);	*/
}

#list_pozostale p {	
	/*transform:scale(0.875);	*/
}

#list .note{
	color: brown;
    font-size: 1.5em;
	background: white;
	text-align: center;
	white-space: nowrap;
}
#list .note-2{
	/*color: brown;*/
    font-size: 1em;
	background: white;
	text-align: center;
    padding-block-start: 1em;
	white-space: nowrap;	
}

.item h3 {
	margin:0;
	/*padding-block-start: 1em;	*/
    /* text-align: center;*/
	line-height: 3em;
    vertical-align: middle;	
	white-space: nowrap;
	
}

.item img {
	max-width: 3em;
    max-height: 3em;
    padding-right: 1em;
    vertical-align: middle;
}

.item p {
	margin:0;	
	padding-block-start: 0;
    padding-block-end: 1em;	
	margin-left: 4em;
	color:brown;
    font-size: 1.1em;
}


.item {
  padding: 0 1em;
  background: white;
  transition: all .3s ease;

}



	.glide__slide{
		font-size:1em;
		text-align:center;
		color:brown;
		font-weight:bold;
		position: inherit;
		transition:height 0.2s ease-out;
	}
	.glide__slide a{
		font-size:1.5em;
		text-align:center;
		color:brown;
		font-weight:bold;
	}
	.glide__track{
		transition:height 0.2s ease-out;
	}
	#polecamy{
		font-size:1.3em;
		text-align:center;
		color:black;
		padding-top:1em;
	}
	#content p a{
		font-size:1.8em;
		text-align:center;
		color:brown;
		font-weight:bold;
	}
	#newsCarrousel{
		padding:1.5em;
		text-align:center;
		transform:scale(0.9);
	}
	.glide{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		margin-bottom: 2em;
		width: 50em!important;
		text-align: center;
	}
	.glide__arrow--left {
		left: -2.5em!important;
	}
	.glide__arrow--right {
		right: -2.5em!important;
	}
	.glide__bullets{
		bottom: -1em!important;
	}
	.glide__bullet {
		background-color: #c1c1c1;
		width:1em!important;
		height: 1em!important;
	}
	.glide__bullet--active {
		background-color: black!important;
	}
	.glide__arrow {
		color: #222;
		background-color: transparent;
		border-radius: 50%;
		font-size: 3.5em;
		border: none;
		box-shadow:none;
		text-shadow:none;
	}