/* @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200italic,400,400italic"); */
/* @import url("ILGlyphsEx.css"); */

@keyframes spin
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes bounce
{
	0%   {transform: scale(1);}
	50%  {transform: scale(1.05);}
	100% {transform: scale(1);}
}

@keyframes angry
{
	0%   {transform: translateY(0px);}
	10%  {transform: translateY(1px);}
	20%  {transform: translateY(0px);}
	30%  {transform: translateY(2px);}
	40%  {transform: translateY(0px);}
	50%  {transform: translateY(2.3px);}
	60%  {transform: translateY(0px);}
	70%  {transform: translateY(1.3px);}
	80%  {transform: translateY(0px);}
	90%  {transform: translateY(1px);}
	100% {transform: translateY(0px);}
}

@keyframes bouncenote
{
	0%   {transform: translateY(0);}
	50%  {transform: translateY(-5px);}
	100% {transform: translateY(0);}
}

*
{
	box-sizing: border-box;
	font-family : "Source Sans Pro", sans-serif;
	letter-spacing: 0.1em;
	font-weight: 300;
	/* user-drag: none;
	-webkit-user-drag: none; */
	/* outline: 1px solid #ff000080; */
}
input, button
{
	font-family : "Source Sans Pro", sans-serif;
	padding: 8px;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	border-radius: 5px;
	border: none;
	font-size: 0.9em;
}
input:focus, textarea:focus
{
	outline: 2px solid #915b62;
}
button
{
	background-color: #363c40;
	color: #fff;
	text-transform: uppercase;
	cursor: pointer;
}
button.primary
{
	background-color:#7e494f;
	color: #eee;
	font-weight: 400;
}
button.primary:hover
{
	background-color: #915b62;
}
button:hover, button:focus
{
	outline: 2px solid #d9b27bcc;
}
a
{
	color: #aaa;
	text-decoration: none;
}
a:hover
{
	text-decoration: none;
}
a
{
	cursor: pointer;
}
strong
{
	font-weight: 500;
	color: #fff;
}
i.fa-solid
{
	padding-left:  4px;
	padding-right: 4px;
}
.hidden
{
	display: none !important;
}
.busy
{
	cursor: wait;
	pointer-events: none;
	user-select: none;
	opacity: 0.33;
	transition: opacity 0.5s ease;
}
form:not(.busy) .spinner{display: none;}
form.busy {position: relative;}

.spinning {animation: spin 2s linear infinite;}
form .spinner
{
	color: #d9b27b;
	position: absolute;
	left: calc(50% - 20px);
	top: 50%;
	transform: translate(-70%, -70%);
	z-index: 4000;
	animation: spin 2s linear infinite;
}

html, body
{
	min-height: 100%;
}

body
{
	background-color: #242628;
	color: #aaa;
	margin-bottom: 60px;
	overflow-y: scroll;
	overflow-x: hidden;
}

/*Nice dark mode scrollbars*/
::-webkit-scrollbar
{
	width: 8px;
}
::-webkit-scrollbar-thumb
{
	/*background-color: hsl(352, 49%, 39%);*/
	background-color: #404447;
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover
{
	background-color: #3e4144;
}
::-webkit-scrollbar-track
{
	background-color: #242628;
}


header
{
	/* border-top: 1px solid #00000020; */
	background-color: #1f2224;
	position: fixed;
	width: 100vw;
	left: 0px;
	bottom: 0px;
	z-index: 2000;
	transform: translateY(0);
	transition: transform 0.5s ease;
	user-select: none;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
body.loading header
{
	transform: translateY(4em);
}

body.prerelease header nav.account .profile   	{display: none;}
body.prerelease header nav.account .register   	{display: none;}
body:not(.prerelease) header nav.account .soon	{display: none;}

	header nav
	{
		/* outline: 1px solid red; */
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	header nav h1>a
	{
		/* padding-left: 20px; */
		animation: hideicon_pad 1s ease;
	}
	header nav h1>a>img
	{
		position: absolute;
		left: 0px;
		top:  24px;
		width: 24px;
		height: 24px;
		transform: translateY(7px);
		line-height: 0;
		margin: 0;
		padding: 0;
		filter: grayscale(100%);
	}

	header nav h1>a>img
	{
		display: none;
	}

	@media screen and (max-width: 1320px)
	{
		header nav h1>a
		{
			padding-left: 0px;
		}
	}

	header nav h1>a,
	header nav h3>a
	{
		text-transform: uppercase;
		font-size: 0.9em;
		font-weight: 300;
		padding-top: 20px;
		padding-bottom: 20px;
		white-space: nowrap;
	}

	header nav>*
	{
		height: 80px;
		padding-left:  0.5em;
		padding-right: 0.5em;
		margin: 0;
		margin-left: 1em;
		vertical-align: baseline;
		display: flex;
		align-items: center;
		position: relative;
	}

	header nav>.active
	{
		color: #fff;
		background-color: #242628;
	}

	header nav:last-of-type
	{
		margin-inline-start: 0;
		margin-left: auto;
		margin-right: 10px;
	}
	header nav:last-of-type>*:first-child
	{
		margin-inline-start: 0;
	}

	body:not(.loggedin) header .profile
	{
		display: none;
	}
	body.loggedin header .profile
	{
		animation: bouncenote 1s ease;
	}
	body.loggedin header .register
	{
		display: none;
	}

	header nav.search
	{
		/* border: 1px solid red; */
		background-color: #242628;
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		margin-right: 1em;
	}
	body:not(.searching) header nav.search
	{
		display: none;
	}
		header nav.search input
		{
			background-color: #2e3033;
			color: #aaa;
			border: 1px solid #2e3033;
			padding-right: 20px;
			height: 40px;
			border-radius: 10px;
			font-size: 1em;
			flex-grow: 1;
		}
		header nav.search button
		{
			flex-shrink: 0;
			height: 40px;
			/* min-width: 80px; */
			justify-content: center;
			margin-right: 20px;
			/* margin-right: 3em; */
		}
		header nav.search.loading button
		{
			opacity: 0.5;
			pointer-events: none;
		}
			header nav.search.loading button>i:nth-of-type(1)
			{
				display: none;
			}
			header nav.search:not(.loading) button>i:nth-of-type(2)
			{
				display: none;
			}

	header nav.pagination
	{
		/* border: 1px solid red; */
		flex-grow: 1;
		justify-content: center;
		flex-wrap: nowrap;
	}

	/* body.prerelease header nav.pagination {justify-content: flex-end; padding-right: 2em;} */

	body.searching header nav.pagination
	{
		display: none;
	}

	header nav.pagination.loading
	{
		opacity: 0.2;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

		header nav.pagination a
		{
			margin-left: 0px;
			padding-left:  6px;
			padding-right: 6px;
		}
		header nav.pagination>a.current span
		{
			font-weight: 600;
		}

		header nav.pagination.shortnav a:nth-child(1),
		/* header nav.pagination.shortnav a:nth-child(2), */
		header nav.pagination.shortnav a:nth-last-child(1),
		/* header nav.pagination.shortnav a:nth-last-child(2), */
		header nav.pagination.shortnav a:nth-last-child(3)
		{
			display: none;
		}

	header nav.pagination .goto
	{
		position: absolute;
		padding: 10px;
		background-color: #2e3033;
		bottom: 60px;
		left: 0px;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		border-radius: 8px;
	}

	header nav.pagination .goto input
	{
		width: 70px;
		margin-right: 0.5em;
		text-align: center;
		/* limit to numbers */
	}
	header nav.pagination .goto input::-webkit-outer-spin-button,
	header nav.pagination .goto input::-webkit-inner-spin-button
	{
		/* display: none; <- Crashes Chrome on hover */
		-webkit-appearance: none;
		appearance: none;
		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
	}
	header nav.pagination .goto input[type=number]
	{
		-moz-appearance:textfield; /* Firefox */
		appearance: textfield; /* Chrome */
	}



	header nav section.signupmenu,
	header nav section.usermenu
	{
		background-color: #242628;
		position: absolute;
		right: 0px;
		bottom: 80px;
		width: 100%;
		min-width: 300px;
		padding: 20px;
		transform: translateY(calc(100% + 80px));
		opacity: 0.1;
		transition: opacity, transform 0.25s;
		/* overflow: hidden; */
		z-index: 1000;
	}

	header nav section.usermenu
	{
		min-width: 250px;
	}

	header nav section.usermenu form ul
	{
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
	}

		header nav section.usermenu form .hint i
		{
			font-size: 1em;
			margin-left: auto;
			margin-top: 4px;
		}
		header nav section.usermenu form .hint
		{
			white-space: nowrap;
			display: flex;
			flex-direction: row;
		}

		/* header nav section.usermenu form .hint */


	header nav h1.active section.signupmenu,
	header nav h1.active section.usermenu
	{
		transform: translateY(0%);
		opacity: 1;
		transition: opacity, transform 0.25s;
	}
		header nav section.signupmenu form
		{
			display: flex;
			flex-direction: column;
			display: none;
		}
		header nav section.signupmenu.stage1 form:nth-of-type(1)
		{
			display: flex;
		}
		header nav section.signupmenu.stage2 form:nth-of-type(2)
		{
			display: flex;
		}
		header nav section.signupmenu.stage3 form:nth-of-type(3)
		{
			display: flex;
		}
			header nav section.signupmenu form button:first-of-type
			{
				margin-top: 1em;
			}

		header nav h1 section.signupmenu h5,
		header nav h1 section.usermenu h5
		{
			text-transform: uppercase;
			margin: 0;
			padding: 0;
			padding-bottom: 1em;
			text-align: center;
		}

		header nav h1.active section.signupmenu .hint,
		header nav h1.active section.signupmenu .error,
		header nav h1 section.usermenu .hint,
		header nav h1 section.usermenu .error
		{
			text-align: center;
			margin-top: 1em;
			margin-bottom: 0px;
			text-transform: uppercase;
			font-size: 0.8em;
			color: #aaa;
		}
		header nav h1.active section.signupmenu form:not(.errored) .error,
		header nav h1        section.usermenu   form:not(.errored) .error {display: none;}
		header nav h1.active section.signupmenu .error strong{color: #ca6572;}

sidebar
{
	background-color: #25262a;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 340px;
	height: 100vh;
	z-index: 1900;
	display: flex;
}

section.browser
{
	display: flex;
	flex-direction: column;
}
section.browser.loading
{
	pointer-events: none;
}

	section.browser .entries
	{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		justify-content: space-between;
	}

	section.browser.left .entries
	{
		transform: translateX( 100%);
		transition: transform 0.5s ease;
	}
	section.browser.right .entries
	{
		transform: translateX(-100%);
		transition: transform 0.5s ease;
	}

	section.browser.loading article
	{
		opacity: 0.2;
		transition: opacity 1s ease;
	}

	section.browser .entries>.spacer
	{
		width: 350px;
		height: 0px;
		/* outline: 1px solid red; */
	}
	section.browser .entries>error
	{
		position: absolute;
		left: 50%;
		top: 50vh;
		transform: translate(-50%, -70%);
		border-radius: 8px;
		padding: 20px;
		text-transform: uppercase;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	section.browser article h2 strong
	{
		flex-grow: 1;
		user-select: text;
	}
	section.browser article .contains
	{
		position: absolute;
		justify-content: flex-end;
		right: 0;
		bottom: 0;
		margin: 1em;
		padding: 0;
		margin-top: 10px;
		list-style: none;
		/* border: 1px solid red; */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		opacity: 0.8;
	}

	section.browser article .contains li
	{
		background-repeat: no-repeat;
		background-position: middle center;
		width:  0.85em;
		height: 0.85em;
	}
	section.browser article .contains li:not(.present) {display: none; opacity: 0.2;}
	section.browser article .contains li.articulations {background-image: url('../images/type_articulation.svg');}
	section.browser article .contains li.pianoroll     {background-image: url('../images/type_pianoroll.svg');}
	section.browser article .contains li.controllers   {background-image: url('../images/type_controllers.svg');}
	section.browser article .contains li.settings      {background-image: url('../images/type_settings.svg');}

	section.browser article .author
	{
		position: absolute;
		justify-content: flex-end;
		left: 0;
		bottom: 0;
		margin: 1.5em;
		margin-bottom: 1.2em;
		font-size: 0.8em;
		text-transform: uppercase;
	}

	section.browser article .author::before
	{
		content: "By ";
	}

	section.browser .entries>article
	{
		cursor: pointer;
		position: relative;
		/* background-image: url('https://i1.sndcdn.com/artworks-UutIiGoNlcYAA4MS-Assayw-t500x500.jpg'); */
		width: 350px;
		height: 350px;
		box-shadow: 0px 5px 10px #00000030;
		border-radius: 3px;
		overflow: hidden;
		user-select: none;
	}

	section.browser .entries>article.deleted
	{
		opacity: 0;
		transform: scaleX(0) scaleY(0);
		transition: opacity 0.5s ease, transform 0.5s ease-in-out;
	}

	/* Inactive should be dim and grey */
	section.browser .entries>article.inactive
	{
		opacity: 0.5;
		filter: grayscale(100%);
	}

		section.browser .entries>article>div
		{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
		}
		section.browser .entries>article .artwork
		{
			background-size: 400%;
			filter: blur(15px);
			opacity: 0.5;
			transition: filter 0.25s ease, opacity 0.25s ease;
		}
		section.browser .entries>article:hover .artwork
		{
			opacity: 0.5;
			transition: filter 0.25s ease, opacity 0.25s ease;
		}
		section.browser .entries>article .dim
		{
			background-color: #2e3033;
			opacity: 0.33;
		}

		section.browser .entries>article .contents
		{
			padding: 20px;
			display: flex;
			flex-direction: column;
			z-index: 500;
			max-height: 100%;
			flex-grow: 1;
			z-index: 5;
		}

		section.browser .entries>article .preview
		{
			position: absolute;
			/* right: -20px;
			bottom: -180px; */
			background-size: cover;
			transform: skew(.212rad) rotate(0.035turn) translateX(130px) scale(0.8) translateY(210px);
			transition: transform 0.5s ease, opacity 0.25s ease, -webkit-mask-image 0.25s ease;
			/* opacity: 0.6; */
			-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0.8)), color-stop(50%, rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0)));
			mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0.8)), color-stop(50%, rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0)));
			-webkit-user-drag: none;
			z-index: 0;
			text-transform: uppercase;
			box-shadow: 5px 5px 15px #000000f0;
		}

		section.browser .entries>article:hover .preview
		{
			z-index: 10;
			opacity: 1.0;
			transform: skew(.112rad) rotate(0.035turn) translateX(110px) scale(1) translateY(110px);
			transition: transform 0.25s ease, opacity 0.25s ease, -webkit-mask-image 0.25s ease;
			-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,1)));
			mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,1)));
		}

		/* scroll them up slowly to -200%, then back down */
		section.browser .entries>article:hover .preview.rows3 .ArticulateNote {animation: showallnotes3 3s infinite;}
		section.browser .entries>article:hover .preview.rows4 .ArticulateNote {animation: showallnotes4 5s infinite;}
		section.browser .entries>article:hover .preview.rows5 .ArticulateNote {animation: showallnotes5 8s infinite;}
		section.browser .entries>article:hover .preview.rows6 .ArticulateNote {animation: showallnotes6 12s infinite;}
		section.browser .entries>article:hover .preview.rows7 .ArticulateNote {animation: showallnotes7 12s infinite;}
		section.browser .entries>article:hover .preview.rows8 .ArticulateNote {animation: showallnotes8 12s infinite;}
		@keyframes showallnotes3
		{
			0% {transform: translateY(0%);}
			50% {transform: translateY(-130%);}
			100% {transform: translateY(0%);}
		}
		@keyframes showallnotes4
		{
			0% {transform: translateY(0%);}
			50% {transform: translateY(-280%);}
			100% {transform: translateY(0%);}
		}
		@keyframes showallnotes5
		{
			0% {transform: translateY(0%);}
			50% {transform: translateY(-410%);}
			100% {transform: translateY(0%);}
		}
		@keyframes showallnotes6
		{
			0% {transform: translateY(0%);}
			50% {transform: translateY(-530%);}
			100% {transform: translateY(0%);}
		}
		@keyframes showallnotes7
		{
			0% {transform: translateY(0%);}
			50% {transform: translateY(-680%);}
			100% {transform: translateY(0%);}
		}
		@keyframes showallnotes8
		{
			0% {transform: translateY(0%);}
			50% {transform: translateY(-780%);}
			100% {transform: translateY(0%);}
		}

		/* section.browser .entries>article .present
		{
			font-family: "IL Glyphs";
			font-size: 3em;
		} */

			section.browser .entries>article h2
			{
				padding: 0px;
				margin: 0px;
				padding-bottom: 0.5em;
				border-bottom: 1px solid #ffffff30;
				min-height: 2.8em;
				max-height: 2.8em;
				overflow: hidden;
				text-overflow: ellipsis;
			}

				section.browser .entries>article:not(.inactive) h2 i
				{
					display : none;
				}
				section.browser .entries>article h2 i
				{
					font-size: 0.75em;
				}

			section.browser .entries>article span.rating
			{
				position: absolute;
				left: 16px;
				bottom: 20px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
				section.browser .entries>article span.rating i
				{
					font-size: 0.6em;
					/* margin-right: 0.25em; */
				}
				section.browser .entries>article:not(:hover) span.rating
				{
					opacity: 0;
					pointer-events: none;
					transform: translateY(4em);
					transition: transform 0.3s ease, opacity 0.3s ease;
				}
				section.browser .entries>article:hover span.rating
				{
					opacity: 1;
					pointer-events: all;
					transform: translateY(0);
					transition: transform 0.3s ease, opacity 0.3s ease;
					z-index: 20;
				}
				section.browser .entries>article:hover span.author
				{
					opacity: 0;
					transition: opacity 0.3s ease;
				}

				section.browser .entries>article span.rating.none i           {color: #aaaaaa40;}
				section.browser .entries>article span.rating:not(.none) i.off {color: #aaa;}
				section.browser .entries>article span.rating:not(.none) i.on  {color: #ffb555;}
				/* half shaded */
				section.browser .entries>article span.rating:not(.none) i.half
				{
					background: linear-gradient(to right, #ffb555 50%, #aaa 50%);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
				}


	section.browser .spinner
	{
		color: #d9b27b;
		position: fixed;
		left: calc(50% - 20px);
		top: 50vh;
		/* transform: translate(-70%, -70%); */
		z-index: 4000;
		animation: spin 2s linear infinite;
		z-index: 1000;
		font-size: 2em;
		opacity: 0.25;
	}
	section.browser:not(.loading) .spinner
	{
		display: none;
	}



body.popup:not(.soft), body.dropping, body.menu {overflow: hidden; margin-right: 16px;}
body:not(.popup):not(.dropping):not(.loading) .overlay{display: none;}
/* body.overlay{display: flex; pointer-events: none;} */
/* body.popup header */
body.popup:not(.soft) section.browser,
body.dropping section.browser
{
	filter: blur(5px);
	transition: filter 0.25s ease;
}
body.popup:not(.soft) header,
body.dropping header
{
	filter: blur(5px);
	transition: filter 0.25s ease;
}

body.menu section.browser
{
	filter: blur(5px);
	transition: filter 0.25s ease;
	pointer-events: none;
}

.overlay
{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	/* background-color: #00000000; */
	background-color: #24262800;
	z-index: 3000;
	pointer-events: all;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
body.popup.soft .overlay
{
	/* background-color: #00000080; */
	background-color: #24262880;
}

section.popup
{
	animation: slideUpJiggle 0.2s ease;
}


body.popup:not(.soft) .overlay,
body.dropping .overlay,
body.loading .overlay
{
	/* background-color: #00000080; */
	background-color: #242628C0;
}
	body:not(.loading) .overlay .spinning {display: none;}

	.overlay .dragzone
	{
		font-size: 1em;
		text-transform: uppercase;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		/* border: 1px solid red; */
		max-width: 300px;
	}
	.overlay .dragzone h2 {margin: 0;}
	.overlay .dragzone i {font-size: 4em;}
	body:not(.dropping) .overlay .dragzone {display: none;}

	body.dropping .overlay section.popup {display: none;}
	.overlay section.popup
	{
		background-color: rgb(28,31,32);
		box-shadow: 0px 5px 10px #00000030;
		border-radius: 8px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	body.lading section.popup.dialog
	{
		display: none;
	}
	/* have it slide into the screen with a transition*/
	section.popup.dialog
	{
		max-width: 40vm;
		/* transform: translateY(100vw); */
		/* opacity: 0; */
	}
	section.popup.dialog.animated
	{
		animation: slideUpJiggle 0.2s ease;
	}
	section.popup.dialog.visible
	{
		/* transform: translateY(0vw);
		opacity: 1;
		transition: transform 0.15s ease, opacity 0.25s ease; */
	}
	@keyframes slideUpJiggle
	{
			0% {transform: translateY(100vw);}
			80% {transform: translateY(0);}
			90% {transform: translateY(-10px);}
			95% {transform: translateY(5px);}
			100% {transform: translateY(0);}
	  }

	@keyframes popinJiggle
	{
		0% { opacity: 0; transform:  scaleY(0%) scaleX(0%);}
		60% {transform: scaleY(45%) scaleX(100%);}
		90% {transform: scaleY(100%) scaleX(95%);}
		95% {transform: scaleY(96%) scaleX(100%);}
		100% {opacity: 1; transform: scaleY(100%) scaleX(100%);}
	}

	section.popup.dialog .content
	{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		text-transform: uppercase;
	}

		section.popup.dialog .content .top
		{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}


		section.popup.dialog .content .icon
		{
			flex-shrink: 0;
			font-size: 4em;
			margin-right: 30px;
		}
		section.popup.dialog .content .message
		{
			/* flex-grow: 1; */
			text-align: center;
			padding-right: 110px;
			max-width: 500px;
		}

		section.popup.dialog .content .bottom
		{
			display: flex;
			flex-direction: row;
			padding-top: 50px;
			justify-content: center;
		}
		section.popup.dialog .content button
		{
			/* flex-grow: 1; */
			width: 150px;
		}
		section.popup.dialog .content button:not(:first-child)
		{
			margin-left: 1em;
		}

div.gdpr
{
	background-color: #242424;
	text-transform: uppercase;
	position: fixed;
	left: 20px;
	bottom: 100px;
	z-index: 9000;
	padding: 1em;
	padding-left: 0;
	/* min-width: 560px; */
	max-width: calc(100vw - 40px);
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	text-align: justify;
	box-shadow: 0px 8px 4px #00000020;
	/* width: 200px; */
	/* height: 50px; */
}
div.gdpr p, div.gdpr h1 {padding: 0; margin: 0;  margin-bottom: 0.5em; max-width: 440px;}
div.gdpr h1 {text-transform: uppercase; }
/* div.gdpr i {color: #243b7a; font-size: 4em; margin-right: 0.25em;} */
div.gdpr img {height: 120px; margin-right: 1em;}
div.gdpr section
{
	display: flex;
	flex-direction: column;
	/* align-items: end; */
}
div.gdpr button
{
	background-color: #3d7a9f;
	margin-left: auto;
	max-width: 100px;
	white-space: nowrap;
}
div.gdpr:not(.hidden)
{
	animation: slideUpJiggle 0.75s ease;
}
div.gdpr.agree
{
	pointer-events: none;
	transform: translateY(100vh);
	transition: transform 0.5s ease;
}


.ArticulateFrame
{
	background-color: #353839;
	width: 248px;
	height: 266px;
	/* border: 1px solid #000000C0; */
	border-top: 1px solid #ffffff10;
	border-left: 1px solid #ffffff10;
	border-right: 1px solid #00000010;
	border-bottom: 1px solid #00000010;
	outline:  1px solid #00000070;
	display: flex;
	flex-direction: column;
}
.ArticulateFrame>span
{
	font-size: 0.7em;
	color: #aaa;
	text-align: left;
	padding: 4px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	direction: rtl;
}
.ArticulateWindow
{
	margin: 3px;
	background-color: #31373B;
	flex-grow: 1;
	border: 1px solid #00000060;
	box-shadow: inset 0px 0px 4px #00000030;
	display: flex;
	flex-direction: column;
}
	.ArticulateWindow .ArticulateNotation
	{
		background-color: #21272B;
		border: 1px solid #00000050;
		margin: 6px;
		height: 40%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		overflow: hidden;
	}
		.ArticulateWindow .ArticulateNotation .ArticulateNote
		{
			width: 12.2%;
			height: 36%;
			margin-bottom: 10px;
			/* border: 1px solid red; */
			position: relative;
			background-position-x: -2px;
			background-position-y:  5px;
			background-image: url('/images/Notation.png');
			opacity: 0.5;
			transition: opacity 0.1s;
			background-repeat: no-repeat;
		}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:not(.present)
		{
			opacity: 0;
		}
		/*Make it bounce up and down on activate*/
		.ArticulateWindow .ArticulateNotation .ArticulateNote.present
		{
			animation: bouncenote 0.24s;
		}

		.ArticulateWindow .ArticulateNotation .ArticulateNote .ArticulatePip
		{
			position: absolute;
			bottom: -24%;
			left: 32.5%;
			width: 30%;
			height: 20%;
			/* border: 1px solid red; */
			border-radius: 2px;
		}

		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 1) .ArticulatePip {background-color: #a5d19e;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 2) .ArticulatePip {background-color: #bad39f;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 3) .ArticulatePip {background-color: #d0d6a1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 4) .ArticulatePip {background-color: #d8caa3;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 5) .ArticulatePip {background-color: #dbb8a5;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 6) .ArticulatePip {background-color: #dea7a8;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 7) .ArticulatePip {background-color: #dea7bc;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 8) .ArticulatePip {background-color: #dea7d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type( 9) .ArticulatePip {background-color: #d6a7dd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(10) .ArticulatePip {background-color: #c0a5db;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(11) .ArticulatePip {background-color: #a9a3d9;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(12) .ArticulatePip {background-color: #a2afd6;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(13) .ArticulatePip {background-color: #a0c1d4;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(14) .ArticulatePip {background-color: #9ed2d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(15) .ArticulatePip {background-color: #9ed1bd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(16) .ArticulatePip {background-color: #9dd1a9;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(17) .ArticulatePip {background-color: #a5d19e;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(18) .ArticulatePip {background-color: #bad39f;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(19) .ArticulatePip {background-color: #d0d6a1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(20) .ArticulatePip {background-color: #d8caa3;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(21) .ArticulatePip {background-color: #dbb8a5;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(22) .ArticulatePip {background-color: #dea7a8;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(23) .ArticulatePip {background-color: #dea7bc;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(24) .ArticulatePip {background-color: #dea7d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(25) .ArticulatePip {background-color: #d6a7dd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(26) .ArticulatePip {background-color: #c0a5db;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(27) .ArticulatePip {background-color: #a9a3d9;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(28) .ArticulatePip {background-color: #a2afd6;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(29) .ArticulatePip {background-color: #a0c1d4;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(30) .ArticulatePip {background-color: #9ed2d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(31) .ArticulatePip {background-color: #9ed1bd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(32) .ArticulatePip {background-color: #9dd1a9;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(33) .ArticulatePip {background-color: #a5d19e;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(34) .ArticulatePip {background-color: #bad39f;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(35) .ArticulatePip {background-color: #d0d6a1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(36) .ArticulatePip {background-color: #d8caa3;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(37) .ArticulatePip {background-color: #dbb8a5;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(38) .ArticulatePip {background-color: #dea7a8;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(39) .ArticulatePip {background-color: #dea7bc;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(40) .ArticulatePip {background-color: #dea7d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(41) .ArticulatePip {background-color: #d6a7dd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(42) .ArticulatePip {background-color: #c0a5db;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(43) .ArticulatePip {background-color: #a9a3d9;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(44) .ArticulatePip {background-color: #a2afd6;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(45) .ArticulatePip {background-color: #a0c1d4;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(46) .ArticulatePip {background-color: #9ed2d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(47) .ArticulatePip {background-color: #9ed1bd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(48) .ArticulatePip {background-color: #9dd1a9;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(49) .ArticulatePip {background-color: #a5d19e;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(50) .ArticulatePip {background-color: #bad39f;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(51) .ArticulatePip {background-color: #d0d6a1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(52) .ArticulatePip {background-color: #d8caa3;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(53) .ArticulatePip {background-color: #dbb8a5;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(54) .ArticulatePip {background-color: #dea7a8;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(55) .ArticulatePip {background-color: #dea7bc;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(56) .ArticulatePip {background-color: #dea7d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(57) .ArticulatePip {background-color: #d6a7dd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(58) .ArticulatePip {background-color: #c0a5db;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(59) .ArticulatePip {background-color: #a9a3d9;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(60) .ArticulatePip {background-color: #a2afd6;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(61) .ArticulatePip {background-color: #a0c1d4;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(62) .ArticulatePip {background-color: #9ed2d1;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(63) .ArticulatePip {background-color: #9ed1bd;}
		.ArticulateWindow .ArticulateNotation .ArticulateNote:nth-of-type(64) .ArticulatePip {background-color: #9dd1a9;}


	.ArticulatePianoRoll
	{
		position: absolute;
		left: 80px;
		/* right: 200px; */
		z-index: -1;
		background: linear-gradient(to right,#394247,#50595E);
		border: 1px solid #00000050;
		font-size: 0.8em;
		width: 300px;
		display: flex;
		flex-direction: column;
		/*pan up and down*/
	}

	section.browser .entries>article:hover .preview .ArticulatePianoRoll
	{
		animation: pianoRollPan 20s ease-in-out infinite;
	}
	@keyframes pianoRollPan
	{
		0%   {transform: translateY(0%);   }
		50%  {transform: translateY(calc(-100% + 250px));}
		100%   {transform: translateY(0%);   }
	}
	.ArticulatePianoRoll .key
	{
		height: 24px;
		padding: 4px;
	}
	.ArticulatePianoRoll .key:nth-child(7n+1),
	.ArticulatePianoRoll .key:nth-child(7n+3),
	.ArticulatePianoRoll .key:nth-child(7n+6),
	.ArticulatePianoRoll .key:nth-child(7n+8),
	.ArticulatePianoRoll .key:nth-child(7n+10)
	{
		background-color: #00000010;
	}

	.ArticulatePianoRoll .key.present
	{
		background-color: #ffffff10;
	}

	.ArticulateWindow .ArticulatePanel
	{
		background-color: #363C40;
		border: 1px solid #00000050;
		margin: 6px;
		margin-top: 2px;
		height: 32%;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		overflow: hidden;
	}
	.ArticulateWindow .ArticulatePanel .ArticulateController
	{
		position: relative;
		margin: 0.3em;
		margin-top: 10%;
		/* position: absolute; */
		background-image: url('../images/Control_Knob.png');
		background-repeat:no-repeat;
		/* left: 32.5%; */
		width: 15%;
		height: 65%;
		/* border: 1px solid red; */
		border-radius: 2px;
	}
	.ArticulateWindow .ArticulatePanel .ArticulateController.Slider
	{
		background-image: url('../images/Control_VSlider.png');
	}
	.ArticulateWindow .ArticulatePanel .ArticulateController.Button
	{
		background-image: url('../images/Control_Button.png');
	}
	/* Every 6th child is positioned differently. so item 6, 12, 18 etc*/
	.ArticulateWindow .ArticulatePanel .ArticulateController:nth-child(6n+1)
	{
		position: absolute;
		right: 0px;
		top: -20px;
		background-image: url('../images/Control_Slider.png');
		width: 26%;
		height: 28%;
	}
	.ArticulateWindow .ArticulatePanel .ArticulateController:not(.present)
	{
		background-image: url('../images/Control_Empty.png');
	}
	.ArticulateWindow .ArticulatePanel .ArticulateController:nth-child(6n+1):not(.present)
	{
		background-image: url('../images/Control_EmptyTop.png');
	}

		.ArticulateWindow .ArticulatePanel .ArticulateController .ArticulateControllerName
		{
			/* border: 1px solid red; */
			position: absolute;
			width: 120%;
			left: -10%;
			overflow: hidden;
			bottom: 0em;
			font-size: 0.5em;
			text-overflow: clip;
			text-align: center;
			white-space: nowrap;
			font-weight: 200;
			z-index: 1;
		}

		.ArticulateWindow .ArticulatePanel .ArticulateController:nth-child(6n+1) .ArticulateControllerName
		{
			left: -100%;
			top: 16%;
			height: 100%;
		}

		/* scroll them up slowly to -200%, then back down */
		section.browser .entries>article:hover .ArticulatePanel.rows2 .ArticulateController {animation: showallcontrollers2 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows3 .ArticulateController {animation: showallcontrollers3 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows4 .ArticulateController {animation: showallcontrollers4 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows5 .ArticulateController {animation: showallcontrollers5 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows6 .ArticulateController {animation: showallcontrollers6 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows7 .ArticulateController {animation: showallcontrollers7 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows8 .ArticulateController {animation: showallcontrollers8 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows9 .ArticulateController {animation: showallcontrollers9 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows10 .ArticulateController {animation: showallcontrollers10 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows11 .ArticulateController {animation: showallcontrollers11 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows12 .ArticulateController {animation: showallcontrollers12 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows13 .ArticulateController {animation: showallcontrollers13 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows14 .ArticulateController {animation: showallcontrollers14 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows15 .ArticulateController {animation: showallcontrollers15 5s infinite;}
		section.browser .entries>article:hover .ArticulatePanel.rows16 .ArticulateController {animation: showallcontrollers16 5s infinite;}
		@keyframes showallcontrollers2  {0% {transform: translateY(0%);}	50% {transform: translateY(-76px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers3  {0% {transform: translateY(0%);}	50% {transform: translateY(-152px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers4  {0% {transform: translateY(0%);}	50% {transform: translateY(-228px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers5  {0% {transform: translateY(0%);}	50% {transform: translateY(-304px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers6  {0% {transform: translateY(0%);}	50% {transform: translateY(-380px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers7  {0% {transform: translateY(0%);}	50% {transform: translateY(-456px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers8  {0% {transform: translateY(0%);}	50% {transform: translateY(-532px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers9  {0% {transform: translateY(0%);}	50% {transform: translateY(-608px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers10 {0% {transform: translateY(0%);}	50% {transform: translateY(-684px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers11 {0% {transform: translateY(0%);}	50% {transform: translateY(-760px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers12 {0% {transform: translateY(0%);}	50% {transform: translateY(-836px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers13 {0% {transform: translateY(0%);}	50% {transform: translateY(-912px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers14 {0% {transform: translateY(0%);}	50% {transform: translateY(-988px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers15 {0% {transform: translateY(0%);}	50% {transform: translateY(-1064px);}	100% {transform: translateY(0%);}}
		@keyframes showallcontrollers16 {0% {transform: translateY(0%);}	50% {transform: translateY(-1140px);}	100% {transform: translateY(0%);}}


body>.warning
{
	left: -150px;
	top: 80px;
	text-align: center;
	transform: rotate(-45deg);
	position: fixed;
	background-color: rgb(124, 40, 40);
	padding: 0.5em;
	padding-left: 150px;
	padding-right: 150px;
	padding-top: 20px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.75em;
	z-index: 10000;
	animation:fadeout 5s linear 1 forwards 0s;
}

@keyframes fadeout
{
	0% {opacity: 0.8;}
	50% {opacity: 0.8;}
	100% {opacity: 0;}
}

@media screen and (max-width: 1600px)
{
	header nav .download
	{
		display: none;
	}
}

@media screen and (max-width: 1200px)
{
	header nav .signup span
	{
		display: none;
	}

	header nav section.signup
	{
		position: fixed;

		left: calc(50% - 200px);
		max-width: 400px;
		padding-bottom: 40px;
	}

	/* header nav.pagination>a>span
	{
		display: none;
	} */
}

/*max 1300 to min 1000*/
@media screen and (min-width: 1150px) and (max-width: 1265px)
{
	header nav.pagination>a:not(.control)
	{
		display: none;
	}
}

@media screen and (max-width: 1150px)
{
	header nav.pagination
	{
		position: fixed;
		width: 100%;
		left: 0px;
		bottom: 80px;
		background-color: #1f2224;
		padding: 20px;
		justify-content: space-between;
	}
	header nav.pagination>a
	{
		height: 20px;
	}
}


@media screen and (max-width: 1265px)
{
	header nav.search
	{
		position: fixed;
		width: 100%;
		left: 0px;
		bottom: 80px;
		background-color: #1f2224;
		padding: 10px;
	}

	header nav.search input
	{
		/* width: 80%; */
		margin-right: 0.5em;
	}
	header nav.search button
	{
		/* width: 20%; */
		margin-right: 1em;
	}
}

@media screen and (max-width: 1400px)
{
	header nav.account .register span
	/* header nav.account .register i */
	{
		display: none;
	}
}


@media screen and (max-width: 1124px)
{
	section.browser .entries
	{
		justify-content: space-evenly;
	}
}

@media screen and (max-width: 1000px)
{
	header .profile span
	{
		display: none;
	}
	header .profile i
	{
		padding-right: 20px;
		font-size: 1.5em;
	}
}

@media screen and (max-width: 920px)
{
	header nav.main a
	{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	header nav.main a>i
	{
		padding-bottom: 8px;
	}
	header nav.main:last-of-type a
	{
		flex-direction: column-reverse;
	}
}

@media screen and (max-width: 700px)
{
	header nav.main:not(:last-of-type) a span
	{
		display: none;
	}
	header nav.main:not(:last-of-type) h3:first-of-type
	{
		margin-left: 20px;
	}
	header nav.main:not(:last-of-type) h3
	{
		margin-left:    0px;
		margin-right:   0px;
		padding: 		0px;
	}
	header nav.main:not(:last-of-type) h3 a
	{
		padding-left:  16px;
		padding-right: 16px;
	}

	section.browser .entries
	{
		justify-content: space-evenly;
	}
}


@media screen and (max-width: 512px)
{
	header nav .signup strong
	{
		display: none;
	}
}