:root {
  /*--uibg: #302C2C;
  --ftrbg: #000;
  --uitxt: #C6BBBB;
  --mnbg:#767973;
  --accent:#63B1B4;*/

  	--notblack:#212020;
	
	--uibg: #D7DBDA;
	--artbg: rgba(215,219,218,0.6);
	--ftrbg: #b3b9b8;
	--uitxt: #606671;
	--mnbg: #717d6e;
	/*--accent: #565757;*/
	--accent: #606259;

	--shd1:rgba(73,43,136,0.21);
	--shd2:rgba(62,68,87,0.39);
	--shd3:rgba(124,164,155,0.18);

  --othermainpad:2rem 2rem 4rem 2rem;
  --mainpad:4rem 2rem;
  --menupad:1rem 2rem;
}

#tracklist{
	display: block;
	width:100%;
					display: none;
}
#playerTransport{
	mix-blend-mode: normal;
}
#playerProgress{
	background-color:#3D3B3E;
}

.release-synopsis{
	overflow: hidden;
	position: relative;
}

.release-synopsis picture,
.release-synopsis img
{
	display: block;
	overflow: hidden;
	width:100%;
	cursor:pointer;
}

.release-synopsis picture::before{
	content:"";
	display: block;
	width:100%;
	padding-top: 100%;
	background-color: var(--accent);
	box-shadow: 0px 1px 6px inset var(--shd2);
}

.release-synopsis picture.ratio-16x9::before{
	padding-top: 56.25%;

}

.release-synopsis img{

	position: absolute;

	top:0;
	left:0;
	right:0;
	bottom:0;

	-o-object-fit: cover;
	object-fit: cover;
}

#sort-releases{
	background-color: var(--mnbg);
	position: relative;
	padding:3rem 0 4.5rem 0;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;

	justify-content: space-between;
	align-content: center;

	padding-left: 0.5rem;
}

#sort-releases label,
#sort-releases button
{
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: inherit;
	font-size:0.76rem;
}

#sort-releases label{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;

	align-content: center;
	-ms-align-items: center;
	align-items: center;
}

#sort-releases label[for]{
	cursor:pointer;
	box-shadow:-1px 1px 3px var(--shd1), 1px 0px 8px var(--shd2);
	display: inline-block;
	border-radius: 1px;
	overflow: hidden;

	flex-grow: 10;
	/*width:25%;*/
	margin: 0 clamp( 0.15rem, 0.5rem, 1rem );
}
#sort-releases label[for]:not(:last-of-type){
	/*margin-right: clamp( 0.15rem, 0.5rem, 1rem );*/
	order:2;
}


#sort-releases label *{
	pointer-events: none;
}

#sort-releases button{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	outline:none;
	border:none;

	background-color: var(--uibg);
	padding:0.25rem 0.5rem;

	width: 100%;
	height: 100%;
}

#releases-nav{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	text-transform: none;
	letter-spacing: 0.05rem;
	font-weight: normal;

}

#releases-nav a{
	display: block;
	margin-bottom: 3rem;
	cursor: default;
	order:1000;

	-webkit-transition: -webkit-filter 0.5s ease-in-out, mix-blend-mode 1s ease-in-out;;
	-o-transition: -o-filter 0.5s ease-in-out, mix-blend-mode 1s ease-in-out;
	transition: filter 0.5s ease-in-out, mix-blend-mode 1s ease-in-out;
}

#releases-nav a:hover{
	-webkit-filter: contrast(0.8);
	-o-filter: contrast(0.8);
	filter: contrast(0.8);
	mix-blend-mode: luminosity;
	
}

.release-synopsis figcaption{

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;

	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	-o-flex-wrap: nowrap;
	flex-wrap: nowrap;

	justify-content: start;

	padding: 0.5rem 0;
	
	line-height: 1rem;

}

.release-synopsis h1{
	font-size:1.1rem;
	line-height: 1.8rem;
}
.release-synopsis h3{
	text-transform: uppercase;
	font-size:0.78rem;
	letter-spacing: 0.06rem
}

.release-synopsis span{
	background-color: var(--accent);
	display: inline;
	-webkit-box-decoration-break:clone;
	box-decoration-break: clone;
}

.release-synopsis h1,
.release-synopsis h3,
.release-synopsis h6
{
	
	display: inline-block;
	margin-right: auto;
	cursor:pointer;

	margin-bottom: 0.25rem;
	
}

.release-synopsis h1 span,	
.release-synopsis h3 span,	
.release-synopsis h6 span
{
	padding:0.15rem 0.5rem 0.25rem 0.5rem;
}


.release-synopsis p{
	margin-right: auto;
	margin-top: 0.1rem;
}
.release-synopsis p span{
	
	line-height: 1.4rem;
	padding:0.1rem 0.5rem;
	
}

.release-synopsis aside ul{

	list-style-type: none;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;

	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;

	justify-content: flex-start;

	-ms-align-items: stretch;
	align-items: stretch;

	align-content: flex-start;

/*	-webkit-filter: contrast(0.8);
	-o-filter: contrast(0.8);
	filter: contrast(0.8);*/

}

.release-synopsis li{
	
	line-height: 1.1rem;
	padding:0.1rem 0.5rem;
	color: #7C7E74;
	background-color:#3E3C3F;

	-webkit-box-decoration-break:clone;
	box-decoration-break: clone;

	margin-bottom: 0.3rem;

	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%,0 100% );
	-o-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%,0 100% );
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%,0 100% );

}

.release-synopsis li:not(:last-of-type){
	margin-right: 0.3rem;
}


input[type="radio"]:nth-of-type(1):checked ~ #sort-releases label:nth-of-type(2) button{
	background-color:var(--notblack);
	color:var(--uibg);
}
input[type="radio"]:nth-of-type(2):checked ~ #sort-releases label:nth-of-type(3) button{
	background-color:var(--notblack);
	color:var(--uibg);
}
input[type="radio"]:nth-of-type(3):checked ~ #sort-releases label:nth-of-type(4) button{
	background-color:var(--notblack);
	color:var(--uibg);
}

/* sort by title */
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-17-golden-greats{
	order:1;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-between-the-desert-and-the-sea{
	order:20;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-bride-of-the-zar{
	order:30;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-calm-abiding{
	order:40;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-coffee-time{
	order:45;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-dawn-till-dusk{
	order:50;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-dessy-lemon{
	order:60;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-dessy-lemon-rfd{
	order:61;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-friends-of-bamboute{
	order:70;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-lil-baladina{
	order:80;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-pussy-riot{
	order:90;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-renaissance-unchained{
	order:100;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-rococo{
	order:110;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-smash-and-grab{
	order:120;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-sudani-voodoo-ep{
	order:130;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-tall-tales-from-the-blue-nile{
	order:140;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-tashi-ringtones{
	order:145;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-the-september-dossier{
	order:150;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-time-of-the-skeleton-lords{
	order:160;
}
input[type="radio"]:nth-of-type(1):checked ~ #releases-nav #release-wisdom-and-insight{
	order:170;
}


/* sort by artist */
/*bjb*/
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-coffee-time{
	order:5;
}
/* et */
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-between-the-desert-and-the-sea{
	order:10;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-friends-of-bamboute{
	order:20;
}

/* nuba nour*/
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-lil-baladina{
	order:30;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-tall-tales-from-the-blue-nile{
	order:40;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-dessy-lemon{
	order:50;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-dessy-lemon-rfd{
	order:51;
}

/* rango */
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-bride-of-the-zar{
	order:60;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-sudani-voodoo-ep{
	order:70;
}

/* srm */
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-pussy-riot{
	order:80;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-renaissance-unchained{
	order:90;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-rococo{
	order:100;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-smash-and-grab{
	order:110;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-the-september-dossier{
	order:120;
}

/* tlm */
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-17-golden-greats{
	order:130;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-calm-abiding{
	order:140;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-dawn-till-dusk{
	order:150;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-tashi-ringtones{
	order:155;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-time-of-the-skeleton-lords{
	order:160;
}
input[type="radio"]:nth-of-type(2):checked ~ #releases-nav #release-wisdom-and-insight{
	order:170;
}

/* release date */

input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-the-september-dossier{
	order:10;
}
/* 2020-08*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-calm-abiding{
	order:20;
}
/* 2016 03-04 */
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-renaissance-unchained{
	order:30;
}
/* 2014-12-01 */
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-pussy-riot{
	order:40;
}
/*2014-12-1*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-smash-and-grab{
	order:50;
}
/* 2014-9-1*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-17-golden-greats{
	order:60;
}
/* 2014-04-09*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-dessy-lemon{
	order:70;
}
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-dessy-lemon-rfd{
	order:71;
}

/* 2014-01-13 */
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-rococo{
	order:80;
}

/*2012-06*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-tall-tales-from-the-blue-nile{
	order:110;
}

/* 2013-06-03 */
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-lil-baladina{
	order:120;
}

/* 2011*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-tashi-ringtones{
	order:125;
}

/*2012-5-28*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-wisdom-and-insight{
	order:130;
}

/* 2010-04-26 */
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-bride-of-the-zar{
	order:140;
}
/* 2010-8-6*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-time-of-the-skeleton-lords{
	order:150;
}
/* 2009-09-28*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-sudani-voodoo-ep{
	order:160;
}
/*2012-11-23*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-friends-of-bamboute{
	order:165;
}
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-coffee-time{
	order:170;
}
/* 2008-05-12*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-dawn-till-dusk{
	order:180;
}
/*2012-11-23*/
input[type="radio"]:nth-of-type(3):checked ~ #releases-nav #release-between-the-desert-and-the-sea{
	order:190;
}




@media all and (max-width:640px){
	
	#releases-nav{

		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;

		-webkit-flex-wrap: nowrap;
		-moz-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		-o-flex-wrap: nowrap;
		flex-wrap: nowrap;

		justify-content: stretch;
		align-content: stretch;

	}

}


@media all and (min-width:641px){

	#playerui{
		margin-bottom: 1.5rem;
	}

	#releases-nav{

		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		flex-direction: row;

		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;

		justify-content: space-between;

		align-content: stretch;
		/*align-items: flex-start;*/

	}



}

@media all and (min-width:641px) and (max-width:959px){

	#releases-nav a{
		width:calc( 50% - 0.75rem );
	}

}


@media all and (min-width:960px){

	#releases-nav a{
		width:calc( 33.3% - 1.25rem );

	}

}