@font-face {
    font-family: 'pn';
    src: url('Metropolis-SemiBold.woff2') format('woff2'),
         url('Metropolis-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html,body,div,li,img,a {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html, body {
	height: 100%;
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
body {
	background-color: #001a3e;
	color: white;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-family: 'pn', '-apple-system','lato', 'Helvetica Neue', Arial, sans-serif;
}

#h, #set, #ph, #lib, #l2 li, #ms, #songs, #setDB {
	-webkit-transition: transform .3s ease;
	-moz-transition: transform .3s ease;
	-o-transition: transform .3s ease;
	transition: transform .3s ease;
}
.touch #set, .touch #lib, .touch #ms, .touch #songs, .touch #DB {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

/* HEADER */
#h, body.s #h.a, body.p #h.a, body.t #h.a, body.ms #h.a, body.ss #h.a, body.db #h.a {
	background-color: rgba(15, 41, 86, 0.8);
	backdrop-filter: blur(10px);  
	-webkit-backdrop-filter: blur(10px);
	text-align: center;
	box-shadow: 0 .5em .6em rgba(0, 17, 49, 0.5);
	/*box-shadow: 0 0 1em #001333;*/
	padding-left: 3em;
	padding-right: 3em;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 4;
	transform: translate(0, -101%);
	-webkit-font-smoothing: antialiased;
}
#ph {
	background-color: rgba(15, 41, 86, 1);
	text-align: center;
	box-shadow: 0 .5em .6em rgba(0, 17, 49, 0.5);
	/*box-shadow: 0 0 1em #001333;*/
	padding-left: 3em;
	padding-right: 3em;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 3;
	transform: translate(0, -101%);
	-webkit-font-smoothing: antialiased;
}
#h.a, body.p #ph {
	transform: translate(0, 0);
}
#h > div {
	display: inline-block;
}
.logo { /* LOGO */
	background-color: rgba(255, 255, 255, 0.5);
	display: inline-block;
	color: #0b2551;
	border-radius: 9em;
	border: none;
	font: 1.3em Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
	padding: .1em .2em .2em .25em;
	position: absolute;
	top: .5em;
	left: .5em;
}
.loogo {
	position: absolute;
	top: 0;
	left: 0;
	padding: .5em;
}
.loogo img {
	width: 1.6em;
	padding: .3em;
}
#h .c {
	position: relative;
	width: 100%;
	text-align: center;
}
#ph.accent {
	background-color: #005df4;
}
#ph.note {
	background-color: #143a7b;
}
/*#s {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
	box-sizing: border-box;
	border-radius: 0.3em;
	padding: 0.6em;
	border: none;
	outline: none;
	font: 1.2em 'pn', '-apple-system','lato', 'Helvetica Neue', Arial, sans-serif;
	background-color: rgba(200, 201, 200, 0);
	color: rgba(255, 255, 255, 0);
	z-index: 1;
	position: absolute;
	top: 0;
	display: block;
	margin-right: auto;
	margin-left: auto;
}*/
#h .c .d {
	position: absolute;
	top: 0.9em;
	right: 3.2em;
}
#h .st {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	font-size: 1.2em;
	padding-top: .3em;
	padding-bottom: .7em;
	transition: opacity .3s;
	opacity: .7;
	cursor: pointer;
}
.nt #h .st:hover {
	opacity: 1;
}
#h .st span {
	display: inline-block;
}
#h .st img {
	position: relative;
	top: .3em;
}
#t { /* SETTINGS */
	padding: .8em;
	position: absolute;
	right: 0;
	cursor: pointer;
	top: 0;
	transition: opacity .3s;
	opacity: .5;
}
.nt #t:hover {
	opacity: 1;
}
#settings, #DB {
	padding: 1em;
	max-width: 25em;
	margin-right: auto;
	margin-left: auto;
	overflow: auto;
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	top: 3em;
}
/* SETTINGS BOX */
.box {
	background-color: #0f2956;
	border-radius: .4em;
	text-align: center;
	padding: 1em;
	font-size: 1.2em;
	transition: background-color .3s;
	margin-bottom: 1em;
	color: white;
	display: block;
	cursor: pointer;
	text-decoration: none;
}
.box img {
	position: relative;
	opacity: .5;
	top: .25em;
	margin-right: .3em;
}
.nt .box:hover {
	background-color: #133671;
}
.box.dark, .nt .box.dark:hover {
	background-color: #001027;
	color: rgba(255, 255, 255, 0.5);
	font-size: 1em;
}
#set label {
	color: #808a9e;
	display: block;
	margin-bottom: .3em;
	margin-top: 1em;
	text-align: center;
}
/* TOGGLE BUTTONS */
.tog {
	margin-bottom: 1em;
	background-color: #001027;
	display: inline-block;
	border-radius: 5em;
	overflow: none;
	border: .2em solid #001027;
}
.tog > div {
	display: inline-block;
	color: #808a9e;
	padding: .5em 1em;
	border-radius: 5em;
	margin-right: -1px;
	cursor: pointer;
	transition: color .3s;
}
.tog > div.a {
	background-color: #015df4;
	color: #ffffff;
}
.nt .tog > div:hover {
	color: white;
}
/* PLAYBACK HEADER */
#ph .l, #ph .r {
	position: absolute;
	top: 0;
	opacity: .5;
	padding: 1.6em;
}
#ph .l {
	left: 0;
}
#ph .r {
	right: 0;
}
#ph img {
	width: 3em;
	height: 3em;
	padding: .5em;
	transition: opacity .3s;
	opacity: .7;
	cursor: pointer;
}
.nt #ph img:hover {
	opacity: 1;
}
#set, #ms, #setDB {
	background-color: #00193d;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2;
	transform: translate(0, -101%);
}
body.s #set, body.ms #ms, body.db #setDB {
	transform: translate(0, 0);
}
#set .s, #lib .s, #setDB .s {
	text-align: center;
	font-size: 1.5em;
	opacity: .5;
	padding-top: .5em;
	padding-bottom: .5em;
}
#set .h #cl img, #lib .h #clo img, #setDB .h #clDB img {
	padding: 1em;
	position: absolute;
	cursor: pointer;
	top: 0;
	right: 0;
}
#set .h .s img, #lib .h .s img, #setDB .h .s img {
	position: relative;
	opacity: .6;
	top: .15em;
	margin-right: .2em;
}
/* LIBRARY */
#lib, #songs {
	background-color: #00193d;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2;
	transform: translate(0, -101%);
}
body.t #lib, body.ss #songs {
	transform: translate(0, 0);
}
#lib .lh {
	z-index: 3;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: rgba(14, 39, 84, 0.8);
	padding-bottom: 1em;
	backdrop-filter: blur(10px);  
	-webkit-backdrop-filter: blur(10px);
}
#lib .h {
	cursor: pointer;
}
#lib #clo {
	transition: opacity .3s;
	opacity: .5;
}
.nt #lib .h:hover #clo {
	opacity: 1;
}
#newSet, #l4, #msc {
	background-color: #015df4;
	display: inline-block;
	padding: .5em 1em;
	border-radius: 5em;
	cursor: pointer;
	transition: background-color .3s;
}
.nt #newSet:hover, .nt #l4:hover, .nt #msc:hover {
	background-color: #1970fe;
}
#l4 {
	margin-bottom: 1em;
}
#setlists {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	padding-top: 6.5em;
	top: 0;
	overflow: auto;
	z-index: 2;
}
#items, #songLib {
	max-width: 26em;
	margin-right: auto;
	margin-left: auto;
	padding: 1em;
}
#songLib > div.green {
	background-color: #015df4;
}
.nt #songLib > div.green:hover {
	background-color: #1970fe;
}
#items > div, #songLib > div, #DB .max {
	overflow: hidden;
	position: relative;
	border-radius: .5em;
	background-color: #0f2956;
	cursor: pointer;
	transition: background-color .3s;
	margin-bottom: 1em;
}
.nt #items > div:hover, .nt #songLib > div:hover {
	background-color: #133671;
}
#items > div > div, #songLib > div > div {
	padding: 1em;
}
#items .r, #songLib .r {
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity .3s;
	opacity: .5;
}
.nt #items .r:hover, .nt #songLib .r:hover {
	opacity: 1;
}
#items .c, #songLib .c {
	padding-left: 4em;
	overflow: hidden;
	white-space: nowrap;
	padding-right: 4em;
	font-size: 1.1em;
	text-align: center;
}
#DB .c {
	font-size: 1.1em;
	padding: 1em;
}
#items .d, #songLib .d, #DB .max .d {
	position: absolute;
	top: 0;
	right: 0;
	transition: opacity .3s;
	opacity: .5;
}
.nt #items .d:hover, .nt #songLib .d:hover, .nt #DB .max .d:hover {
	opacity: 1;
}
.midi {
	margin-bottom: .5em;
}
.midi > div {
	display: inline-block;
}
.midi .t, .midi .l {
padding: .5em 1em;
}
.midi .t {
	opacity: .5;
}
.midi .l {
	border-radius: 5em;
	background-color: #001027;
	cursor: pointer;
	position: relative;
	transition: all .3s;
}
.midi.l .l, .nt .midi.l .l:hover {
	background-color: #0f2956;
}
.nt .midi .l:hover, .nt #l2 .midi .l:hover {
	background-color: #015df4;
}
.midi img {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 1.6em;
	padding: .35em;
	transition: opacity .3s;
	opacity: .5;
}
.nt .midi img:hover {
	opacity: 1;
}
.midi.a .l, .midi.l .l {
	padding-right: 2.4em;
}
.midi.a .l {
	background-color: #0f2956;
}
.midi.a img, .midi.l img {
	display: inline-block;
}
#l2 .midi .t {
	background-color: transparent;
	border-color: transparent;
	padding-left: 0;
	padding-right: .4em;
}
#l2 .midi .l {
	background-color: #00183c;
}
#l2 .midi.l .l, .nt #l2 .midi.l .l:hover {
	background-color: #163b7d;
}
#l2 .midi.l img, #l2 .midi.a img {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.6em;
	padding: .35em;
}
#l2 .midi span {
	white-space: nowrap;
	overflow: hidden;
}
/* MIDI-SEND EDITOR */
#ms {
	transform: translate(0, -101%);
	text-align: center;
}
#ms .h {
	text-align: center;
	cursor: pointer;
	padding-top: .5em;
	padding-bottom: .5em;
	opacity: .5;
	transition: opacity .3s;
}
.nt #ms .h:hover {
	opacity: 1;
}
#ms .h span {
	font-size: 1.5em;
}
#ms .h img {
	position: relative;
	top: .2em;
	left: .2em;
}
#ms p {
	padding: 1em;
	text-align: center;
	opacity: .5;
	max-width: 20em;
	margin-right: auto;
	margin-left: auto;
}
#ms label {
	display: block;
	opacity: .5;
	margin-top: .5em;
}
#ms select {
	font-size: 1em;
}
#msc {
	margin-top: 1em;
}



/* ALERTS */
.lame {
	padding: 1em;
	text-align: center;
	font-size: 1.2em;
}
.lame a, .box.dark a {
	display: inline-block;
	background-color: #035ef4;
	color: #00193d;
	text-decoration: none;
	border-radius: 5em;
	padding: .4em 1em;
	margin-top: .5em;
}
.lame .logo { /* LOGO */
	font-size: 2em;
	position: relative;
	top: 0;
	left: 0;
	margin-bottom: .2em;
}


/* SETLIST */
#l1 {
	position: absolute;
	width: 100%;
	transition: padding-top .3s;
	padding-top: 2.2em;
}
body.p #l1 {
	padding-top: 3.4em;
}
#l2 {
	padding: 1em 1em 0;
}
#l2 li {
	background-color: #0f2956;
	margin-bottom: 1em;
	border-radius: .5em;
	box-shadow: 0 .5em .6em #001231;
	cursor: pointer;
	transition: all .3s;
	opacity: 1;
	position: relative;
	overflow: hidden;
	transform: scale(1);
}
#l2 li.loading {
	opacity: .3;
}
#l2 li.failure .h {
	opacity: .3;
	background-color: #000610;
}
#l2 li.failure .more, .nt #l2 li.failure:hover .more {
	background-color: #000610;
}
#l2 li.failure .tt.fail .tdel {
	display: inline-block;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }

  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } 
}
#l2 li:before, #DB .loady:before, #sl1:before {
	content: '';
	width: 2em;
	opacity: 0;
	transition: opacity .3s;
	height: 2em;
	border-radius: 100%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	border: 4px solid white;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0) !important;
	display: inline-block;
	-webkit-animation: rotate 0.75s 0s linear infinite;
	animation: rotate 0.75s 0s linear infinite;
	margin: 0 0 0 -1em;
	position: absolute;
	left: 50%;
	top: 1em;
}
#l2 li.loading:before {
	opacity: 1;
}
#DB .loady:before {
	opacity: .5;
}
#l2 li.failure:after {
	margin-top: 1.2em;
	position: absolute;
	opacity: 1;
	top: 0;
	content: 'Audio failed to load';
	left: 50%;
	text-align: center;
	background-color: rgba(204, 79, 97, 0.7);
	z-index: -1;
	padding: .5em 1em;
	border-radius: 5em;
	margin-left: -5.3em;
	overflow: hidden;
	white-space: nowrap;
}
#l2 li.notracks:after {
	margin-top: 1.2em;
	position: absolute;
	opacity: 1;
	top: 0;
	content: 'Tracks Missing';
	text-align: center;
	background-color: rgba(204, 79, 97, 1);
	z-index: -1;
	padding: .5em 1em;
	border-radius: 5em;
	overflow: hidden;
	white-space: nowrap;
	right: 4em;
}
#l2 li.sortable-chosen {
	transform: scale(1.02);
	border-radius: .5em;
	overflow: hidden;
	opacity: .7;
}
#l2 li .h {
	transition: height .3s;
	height: 4.5em;
	overflow: hidden;
}
#l2 li.x .h {
	height: 0;
}
#l2 li.sortable-ghost {
	
}
#l2 li.sortable-fallback {
	visibility: hidden;
}
.nt #l2 li:hover, .nt #l2 li:hover .more {
	background-color: #133671;
}
#l2 li.a, .nt #l2 li.a:hover {
	background-color: #005df4;
}
#l2 li.a .key {
	border-color: rgb(0, 78, 207);
}
#l2 li.a .key.b {
	background-color: rgb(0, 78, 207);
}
#l2 li.a .more, #l2 li.a:hover .more {
	background-color: #005df4;
}
#l2 .key {
	position: absolute;
	border: .2em solid #005df4;
	border-radius: 5em;
	width: 1.4em;
	height: 1.4em;
	margin-top: 1.4em;
	margin-left: 1.4em;
	text-align: center;
}
#l2 .key.b {
	background-color: #005df4;
}
#l2 .key b {
	font-weight: normal;
	font-style: normal;
	display: block;
	margin-top: .1em;
}
#l2 .n {
	padding-left: 4em;
	padding-top: 1em;
	padding-bottom: 1em;
}
#l2 .n b {
	font-weight: normal;
	font-style: normal;
	font-size: 1.2em;
	overflow: hidden;
	white-space: nowrap;
}
#l2 .n span {
	display: block;
	opacity: .5;
	font-size: .9em;
}
#l2 .n img {
position: absolute;
height: 1.4em;
margin-left: .3em;
	margin-top: -.1em;
}
#l2 .more {
	position: absolute;
	display: inline-block;
	padding: 1.5rem 1.2em 1em 1em;
	top: 0;
	right: 0;
	background-color: #0f2956;
	transition: background-color .3s;
	border-radius: 5em;
}
#l2 .more img {
	transition: all .3s;
	opacity: .5;
	
}
.nt #l2 .more:hover img {
	opacity: 1;
}
#l2 li.o .more img {
	transform: rotate(180deg);
}
#l3 {
	text-align: center;
}
#l2 .e {
	height: 0;
	overflow: hidden;
	transition: height .3s;
	background-color: #0e2855;
	position: relative;
}
#l2 li.o .e {
	height: 11em;
}
#l2 .t, #l2 .snd, .tpan {
	background-color: #00193d;
	display: inline-block;
	border-radius: 5em;
	border: .2em solid #00193d;
	margin-left: 1.3em;
	margin-top: 1em;
}
#l2 .t > div, #l2 .snd > div, .tpan > div {
	display: inline-block;
	padding: .3em 1em;
	border-radius: 5em;
	cursor: pointer;
}
#l2 .t > div.a, #l2 .snd > div.a, .tpan > div.a {
	background-color: #005df4;
}
.tpan span {
	display: inline;
}
#l2 .snd > div {
	padding: .1em .7em 0;
}
#l2 .rm {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	color: #98a1b5;
	text-align: center;
}
#l2 .rm div {
	padding-bottom: .7em;
	padding-top: .7em;
	background-color: rgba(12, 38, 84, 0);
	transition: all .3s;
	display: inline-block;
	width: 50%;
}
#l2 li.o .rm {
	opacity: 1;
}
.nt #l2 .rm div:hover {
	background-color: #cc4f62;
	color: white;
}
.nt #l2 .rm div.rm1:hover {
	background-color: #005df3;
}
/* SONG EDIT TOGGLES/TABS */
#l2 .k {
	background-color: red;
}
#l2 .k > div {
	display: inline-block;
	float: left;
	width: 33.3333333333333333333%;
}
#l2 .k.pad > div {
	width: 50%;
}
#l2 .k label {
	display: block;
	padding-left: 2em;
	color: #98a1b5;
	font-size: .8em;
	padding-top: 1em;
}
#l2 .k > div > div > * {
	display: inline-block;
}
#l2 .k input[type=text], #l2 .k select, input[type=range], #songs input {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
	box-sizing: border-box;
	border-radius: 5em;
	padding-bottom: 0;
	border: none;
	outline: none;
	font: 1.2em 'pn', '-apple-system','lato', 'Helvetica Neue', Arial, sans-serif;
	background-color: rgb(0, 24, 60);
	color: white;
	width: 3em;
	text-align: center;
	position: relative;
	padding-top: .1em;
}
#l2 .k select {
	font-size: large;
	margin-left: 1.4em;
	margin-top: .4em;
	padding-left: .7em;
}
input[type=range] {
	width: 80%;
	height: 1.8em;
	cursor: pointer;
	margin-top: .4em;
	margin-left: 1em;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #005df4;
  width: 1.8em;
  border-radius: 5em;
  height: 1.8em;
  transition: background-color .3s;
}
input[type=range]::-moz-range-thumb {
	background-color: #005df4;
	width: 1.8em;
	border-radius: 5em;
	height: 1.8em;
	transition: background-color .3s;
}
input[type=range]::-ms-thumb {
	background-color: #005df4;
	width: 1.8em;
	border-radius: 5em;
	height: 1.8em;
	transition: background-color .3s;
}
input[type=range]::-webkit-slider-thumb:hover {
	background-color: #1970fe;
}
input[type=range]::-moz-range-thumb:hover {
	background-color: #1970fe;
}
input[type=range]::-ms-thumb:hover {
	background-color: #1970fe;
}
#l2 .k > div > div img {
	position: relative;
	top: .4em;
	padding-left: .2em;
	padding-right: .2em;
	transition: opacity .3s;
	opacity: .5;
}
.nt #l2 .k > div > div > div:hover img {
	opacity: 1;
}
#l2 .k .down {
	margin-left: 1.3em;
}
#l2 .snd {
	margin-top: .4em;
}
#l2 .e p {
	text-align: center;
}
#l2 .e p a {
	text-decoration: none;
	background-color: #005df4;
	color: white;
	display: inline-block;
	border-radius: 5em;
	padding: .5em 1em;
	margin-top: .3em;
}
#l2 .k.pad select {
	width: 4em;
	text-align: center;
	padding-top: .4em;
	padding-bottom: .4em;
}
#padcfs {
	background-color: #001027;
	margin-left: 0;
}
/* SONG LIBRARY */
.si .hh {
	text-align: center;
	opacity: .5;
	transition: opacity .3s;
	cursor: pointer;
	padding-top: .5em;
	padding-bottom: .5em;
}
.nt .si .hh:hover {
	opacity: 1;
}
.si .hh span {
	font-size: 1.4em;
}
.si .hh img {
	position: relative;
	top: .3em;
	left: .2em;
}
.si .hh img.f {
	left: -.3em;
	opacity: .7;
}
.si .h {
	position: relative;
	max-width: 28em;
	margin-right: auto;
	margin-left: auto;
}
#songs .h input {
	width: 100%;
	border-radius: .5em;
	text-align: left;
	transition: background-color .3s;
	background-color: #072149;
	padding: 1em 1em 1em 1.4em;
	font-size: 1.2em;
	color: black;
}
#songs .h input:focus {
	background-color: white;
}
.si .j {
	margin-right: auto;
	margin-left: auto;
	padding-right: 1em;
	padding-left: 1em;
}
.si .j > div {
	
}
#clS {
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity .3s;
	opacity: 0;
	cursor: pointer;
	padding: 1.3em 2.2em 1.2em 1.2em;
}
#clS.a {
	opacity: .5;
}
.nt #clS.a:hover {
	opacity: 1;
}
#songLib {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
	top: 7em;
}
#songLib .max.f, .nt #songLib .max.f:hover {
	opacity: .5;
	font-style: italic;
	background-color: #072149;
	cursor: default;
}
#l2 li .ft {
	text-align: center;
}
#l2 li .ft > div {
	display: inline-block;
	margin-left: .5em;
	margin-right: .5em;
}
#l2 li .fi {
	text-align: center;
	cursor: pointer;
	position: relative;
	margin-top: 1.6em;
}
#l2 li .fi > div, #l2 li .fj > div {
	display: inline-block;
	padding: .5em 1em;
	background-color: #015df4;
	border-radius: 5em;
	transition: background-color .3s;
}
.nt #l2 li .fi:hover > div {
	background-color: #1970fe;
}
#l2 li .fj > div {
	background-color: #00183c;
}

.tw {
	padding-right: 1em;
	padding-left: 1em;
}
.tw .ttwrap .tt {
	display: inline-block;
	width: 50%;
	float: left;
}
.tw .tt {
	position: relative;
	background-color: #00183c;
	border-radius: 5em;
	margin-top: 1em;
	margin-right: auto;
	height: 2.2em;
	max-width: 30em;
	margin-left: auto;
	overflow: hidden;
}
.tw .tt.fail {
	background-color: rgba(204, 79, 96, 0.3);
}
.tw .tt.fail .nn:after {
	content: ' (Not Found)';
	color: rgba(204, 79, 97, 1);
	white-space: nowrap;
}
.tw .tt.fail .r, .tw .tt.loading .r {
	display: none;
}
.tw .tt.loading {
	opacity: .3;
}
.tw img {
	position: absolute;
	top: 0;
	right: 0;
	padding: .35em;
	display: none;
	cursor: pointer;
	transition: opacity .3s;
	opacity: .5;
}
.nt .tw img:hover {
	opacity: 1;
}
#l2 .sn.edit .tw .r {
	display: none;
}
#l2 .sn.edit .tw img {
	display: inline-block;
}
#l2 .sn.edit .tw .tt {
	background-color: rgba(203, 78, 96, 0.3);
}
#l2 .sn.edit .fj > div {
	background-color: #cc4f62;
}
#l2 .sn.edit .tw .nn {
	color: #cc4e61;
}
.tw .p {
	height: 2em;
	background-color: #005df4;
	position: absolute;
	z-index: 1;
}
#l2 .tw .nn {
	position: absolute;
	padding-left: 1em;
	padding-top: .5em;
}
.tw .r {
	width: 100%;
	opacity: .7;
	margin-left: 0;
	margin-top: 0;
}
#l2 li .file {
	opacity: 0;
	background-color: red;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
	outline: none;
	width: 100%;
	height: 3.4em;
}

/* TRACKS SPACING */
#l2 li.o .e.e0 {
	height: 11em;
}
#l2 li.o .e.e1 {
	height: 14em;
}
#l2 li.o .e.e2 {
	height: 17em;
}
#l2 li.o .e.e3 {
	height: 20em;
}
#l2 li.o .e.e4 {
	height: 23em;
}
#l2 li.o .e.e5 {
	height: 26em;
}
#l2 li.o .e.e6 {
	height: 29em;
}
#l2 li.o .e.e7 {
	height: 32em;
}
#l2 li.o .e.e8 {
	height: 35em;
}
#l2 li.o .e.e9 {
	height: 38em;
}
#l2 li.o .e.e10 {
	height: 41em;
}
#DB > div {
	padding: 1em;
	margin-right: auto;
	margin-left: auto;
	max-width: 30em;
}
#DB label {
	display: block;
	opacity: .5;
	text-transform: uppercase;
	margin-bottom: .5em;
}
#DB .c div {
	opacity: .5;
	font-size: .8em;
	cursor: default;
}
#DB .d {
	padding: 1.6em 1em 1em;
}
#DB .max.a {
	font-size: 1.2em;
	text-align: center;
	padding: 1em;
	background-color: #005df4;
	margin-bottom: 1em;
}
#DB .max.e {
	font-size: 1.2em;
	text-align: center;
	padding: 1em;
	background-color: #001330;
	color: rgba(255, 255, 255, 0.5);
}
/* CLICK SOUND LOADER */
#sl0 {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 25, 61, 0.9);
	color: white;
	text-align: center;
	transition: opacity .3s;
	opacity: 0;
}
#sl0.a {
	opacity: 1;
}
#sl0 > div {
	position: relative;
}
#sl1 {
	padding-top: 9em;
}
#sl1:before {
	content: '';
	width: 2em;
	opacity: 1;
	transition: opacity .3s;
	height: 2em;
	border-radius: 100%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	border: 4px solid #005df4;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0) !important;
	display: inline-block;
	-webkit-animation: rotate 0.75s 0s linear infinite;
	animation: rotate 0.75s 0s linear infinite;
	margin-top: 5em;
}


@media only screen and (max-width : 550px) {
	.tpan span {
		display: none;
	}
	.tpan > div {
		padding-left: .8em;
		padding-right: .8em;
	}
}
@media only screen and (max-width : 460px) {
	#l2 li.o .e {
		height: 18em;
		text-align: center;
	}
	#l2 li.o .t {
		margin-left: 0;
	}
	#l2 .k > div, #l2 .k.pad > div {
		display: inline-block;
		float: left;
		width: 100%;
	}
	#l2 .k > div label {
		padding-left: 0;
	}
	#l2 .k > div select, #l2 .k input[type=range] {
		margin-left: 0;
	}
	
}
@media only screen and (max-width : 360px) {
	#ph img {
		padding-right: 0;
		padding-left: 0;
	}
	
}
@media print {
	
}