/* montserrat-alternates-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/montserrat-alternates-v17-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* work-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/work-sans-v19-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* work-sans-700 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/work-sans-v19-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  box-sizing: border-box;
	font-size: 12px;
	--color-primary: #3cf;
}

.colorblocks {
	width:200px;
	height:20px;
	display: flex;
}

.colorblocks > div {
	flex: 1;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
	border: 0;
  font-weight: normal;
}

/* Global defaults */

body {
	background: #FFFFFF;
  font-family: 'Work Sans';
  font-weight: 400;
	margin: 0px 0px 100px 0px;
}

body {
	padding: 0;
	border: 0;
	width: 100%;
}
body, input, select, textarea, table, td, div {
	color: #000;
}
form, h1, h2, h3, h4, h5, h6, ul, ol {
	margin: 0;
	padding: 10px;
}
img {
	border: 0;
}
a {
	color: #666666;
	text-decoration: none;
}

.release-nav {
	margin-bottom: 32px;
}

.release-nav a {
	background-color: #f8f8f8;
	border-bottom:2px solid #0099cc;
	font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
	font-size: 10px;
	padding:8px;
	line-height: 30px;
}

.title a {
	
	background-color: #f8f8f8;
	border-top:2px solid #0099cc;
	font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
	font-size: 10px;
	padding:8px;
	line-height:10px;
	
}

div .description  {
	margin:0 auto;
	
	
}

div.name {
	
	width:500px;
	color: #666666;
	text-decoration: none;
	background-color: #f8f8f8;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	padding:8px;
	line-height:10px;}

div.releases {width:500px;
	color: #666666;
	text-decoration: none;
	background-color: #f8f8f8;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	padding:8px;
	line-height:10px;}

	
div.link 	{
	width:500px;
	color: #666666;
	text-decoration: none;
	background-color: #f8f8f8;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	padding:8px;
	line-height:10px;
	
}
li {
	list-style-type: none;
}
label {
	cursor: hand;
}
.clear {
	clear:both;
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	font-size:1px;
}

/* Layout */
#page {
	display: flex;
	flex-wrap: wrap;
}

#columnOne {
	width: 200px;
}

#columnTwo { 
	flex: 1;
	min-width: 495px;
}

.column {
	margin-left: 20px;
	height: 100%;
}

.column .colorblock {
	width: 20px;
	height: 20px;
	float: left;
}

.primarycolor {
	background-color: var(--color-primary);
}
.date {
	color: var(--color-primary);
}

#logo {
	text-transform: uppercase;
}
#logo #titles {
	  font-family: 'Montserrat Alternates';
	font-style: normal;
	font-weight: 700;
	margin-top: 7px;
	font-size:20px;
	text-transform: lowercase;
}

h2 {
	
	font-family: 'Montserrat Alternates';
	font-style: normal;
	font-weight: 700;
	
	font-size:20px;
	text-transform: lowercase;
}

#logo #sub {
	font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
	margin-top: 5px;
	color: #666666;
	text-transform: lowercase;
	font-size:12px;
}


#sinwavebak {
	margin: 7px 0px 10px 0px;
	width: 200px;
	height: 28px;
	background: url(img/sin_waves.gif) 0px 0px no-repeat;
}


#sinwave {
	margin: 7px 0px 10px 0px;
	width: 200px;
	height: 28px;
	background: url(img/sin_waves.gif) 0px 0px no-repeat;
}

#primaryNav {
	margin: 2px 0px 50px 0px;
	line-height: 25px;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	text-transform: lowercase;
	
	
}

#primaryNav a {
	color: #666666;
font-size: 20px;
	text-decoration: none;
	background-color: #ffffff;
	border-bottom:2px solid #0099cc;
	
	
	padding: 0px 15px 0px 1px;
}


#rssLink {
	margin: 2px 0px 20px 0px;
}
#rssLink ul {
	width: 200px;
}
#rssLink li {
	font-size: 10px;
	color: #fff;
	padding-left: 20px;
	background: url(img/sopwith.gif) 0px 2px no-repeat;
}

.sectionTitle {
	margin-top:7px;
	
	text-transform: uppercase;
}
.sectionTitle .text {
	width:500px;
	font-family: 'Montserrat Alternates';
	font-style: normal;
	font-weight: 400;
	font-size:20px;
	text-transform: lowercase;
	color:#6b6b6b;
}
.divider {
	background: url(img/dotline_horizontal.gif) 0px 0px repeat-x;
	width: inherit;
	height: 1px;
	font-size: 1px;
	margin: 1px 0px 0px 0px;
	padding-bottom:7px;
	visibility:hidden;	

}



.listItem a{  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;line-height:20px;
}
.listItem .date{line-height:20px;
}

.listItem .description{line-height:20px;
}

.columnTwo p a {
	
	line-height:20px;
	
}

.member {line-height:20px;padding:5px;font-size:15px;}

.news {padding:10px;}

.column .releaseInfo .id {
	
	font-size:12px;
	padding:5px;	
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;}

	/* Design Tokens */

html {
  --color-orange: #F8BE41;
  --color-blue: #24ACE3;
  --color-gray: #6B6B6B;
  --color-light-gray: #F3F3F3;
  --color-white: #FFFFFF;

  --icon-play: url("img/play.svg");
  --icon-play-active: url("img/play-active.svg");
  --icon-download: url("img/download.svg");
}

/* Release */

.release {
  max-width: 592px;
  margin-bottom: 28px;
	line-height: 18px;
}

.release--play {
  background-image: var(--icon-play);
  font-size: 0;
  width: 47px;
  height: 47px;
  flex-shrink: 0;
  margin-right: 20px;
  cursor: pointer;
}

.release--download {
  background-image: var(--icon-download);
  font-size: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: end;
}

.release--header {
  border-top: solid 3px var(--color-blue);
  margin-bottom: 3px;
  background: #F2F2F2;
  padding: 20px;
}

.release--title {
  color: var(--color-gray);
  font-family: 'Montserrat Alternates';
  font-size: 20px;
  font-weight: 700;
}

.release--info {
  margin-top: 5px;
  font-size: 14px;
}

.release--by {
  font-weight: normal;
}

.release--artist {
  font-weight: 700;
}

.release--separator {
  color: var(--color-gray);
}

.release--date,
.release--style {
  font-weight: 700;
  color: var(--color-gray);
}

.release--notes {
  font-size: 14px;
  line-height: 23px;
  color: var(--color-gray);
  background: var(--color-light-gray);
  padding: 18px 29px;
}

.release--notes p:not(:last-child) {
  margin-bottom: 12px;
}

/* Player */

.player {
  color: var(--color-gray);
  font-size: 14px;

  cursor: pointer;
  user-select: none;

  opacity: 0;
  transition: all 150ms;
}

.player--time {
  color: var(--color-white);
  padding: 0 13px;
  font-size: 12px;
}

.player--row {
  position: relative;
  overflow: hidden;  
  background: var(--color-light-gray);
  height: 0px;
  transition: height 150ms;
}

.player--bar {
  height: 100%;
  background: var(--color-orange);
}

.player--track {
  margin: 0 58px;
  color: var(--color-gray);
}

.player--track-num {
  width: 29px;
  flex-shrink: 0;
}

.player--track-title {
  white-space: nowrap;
  overflow: hidden;
}

/* Player active state */

.release.is-active :where(.player) {
  opacity: 1;
}

.release.is-active :where(.release--play) {
  background-image: var(--icon-play-active);
}

.release.is-active :where(.player--row) {
  height: 28px;
}

/* Player row hover state */

.player--row:hover {
  background: var(--color-white);
}

.player--row:hover :where(.player--track) {
  color: var(--color-white);
}

/* Player row active state */

.player--bar,
.player--time {
  opacity: 0;
}

.player--bar,
.player--time,
.player--row {
  transition: all 300ms;
}

.player--row.is-active {
  background: var(--color-blue);
}

.player--row.is-active .player--track {
  color: var(--color-white);
}

.player--row.is-active .player--bar,
.player--row.is-active .player--time {
  opacity: 1;
}

/* Layout Utility Classes */

.flex {
  display: flex;
}

.flex\:1 {
  flex: 1;
}

.justify-content\:space-between {
  justify-content: space-between;
}

.align-items\:center {
  align-items: center;
}

.fill-parent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}