/*--- core ---*/
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
	ol, ul { list-style:none; }
	blockquote, q { quotes:none; }
	blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
	table { border-collapse:collapse; border-spacing:0; }
	body, html { background-color:#f4f4f4; -webkit-tap-highlight-color:transparent; }
	html {  }
	body { color:#222; font-family:'Open Sans',sans-serif; font-size:16px; line-height:1.5; overflow-x:hidden; overflow-y:scroll; /*-webkit-font-smoothing:antialiased;*/ }
	body.lock { overflow:hidden; }
	a { text-decoration:none; color:#ffa200; }
	img { max-width:100%; }
	h1, h2, h3, h4, h5, h6 { padding:0.75rem 0; }
	h1 { font-size:2.5em; }
	h2 { font-size:2.25em; }
	h3 { font-size:1.5em; }
	h4 { font-size:1.25rem; }

	*,*:before,*:after, *:focus {
		outline:0;
	    -webkit-box-sizing: inherit;
	    box-sizing: inherit;
	}

	input, textarea, select { display:inline-block; width:calc(100% - 1rem); margin:0; padding:0.5rem; border:none; border-bottom:#ccc solid 1px; font-size:1em; line-height:1.5; background-color:transparent; font-family:'Open Sans',sans-serif; }
	input:focus, select:focus, textarea:focus { outline:0; border-bottom-color:#e60112; }
	input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
	input:-webkit-autofill { -webkit-text-fill-color:rgb(0,0,0); -webkit-box-shadow:0 0 0 1000px rgb(255,255,255) inset; }
	a.mi, i.mi, span.mi { font-family:'Material Icons'; font-weight:normal; font-style:normal; font-size:24px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }


	.hidden { display:none; }
	.clear { clear:both; }
	.ns { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
	.t0 { opacity:0; }
	.ib { display:inline-block; }
	.cond { font-family:'Open Sans Condensed',sans-serif; }

	/*--- transitions ---*/
		.tso { -webkit-transition:opacity 0.30s ease-in-out; -moz-transition:opacity 0.30s ease-in-out; -o-transition:opacity 0.30s ease-in-out; transition:opacity 0.30s ease-in-out; }
		.tsc { -webkit-transition:color 0.30s ease-in-out; -moz-transition:color 0.30s ease-in-out; -o-transition:color 0.30s ease-in-out; transition:color 0.30s ease-in-out; }
		.tsb { -webkit-transition:background-color 0.30s ease-in-out; -moz-transition:background-color 0.30s ease-in-out; -o-transition:background-color 0.30s ease-in-out; transition:background-color 0.30s ease-in-out; }
		.tsa { -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; transition:all 0.30s ease-in-out; }

		.tsa10 { -webkit-transition:all 0.10s ease-in-out; -moz-transition:all 0.10s ease-in-out; -o-transition:all 0.10s ease-in-out; transition:all 0.10s ease-in-out; }
	/*--- transitions ---*/

	/*--- button ---*/
		.btn { display:inline-block; padding:0.5rem 0.75rem; cursor:pointer; background-color:#ffa200; color:rgb(255,255,255); text-align:center; -webkit-border-radius:0.25em; -moz-border-radius:0.25em; border-radius:0.25em; font-family:'Open Sans Condensed',sans-serif; text-transform:uppercase; font-size:0.92em; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-user-select:none; }
		.btn.hidden { display:none; }
		.btn.disabled { background-color:rgb(75,75,75); color:rgb(180,180,180); cursor:default; }
		.btn.disabled:active, .btn.disabled:focus, .btn.disabled:hover { background-color:rgb(75,75,75); }
	/*--- button ---*/

	/*--- flexboxer ---*/
		.flex { display:flex; flex-wrap:wrap; margin:0 -0.375rem; padding:0; }
		.flex.hidden { display:none; }
		.flex .box { display:flex; flex-wrap:wrap; width:100%; }
		.flex .box>.content { position:relative; width:100%; margin:0.375rem; padding:0.75rem; display:flex; flex-direction:column; background-color:rgb(100,105,117); overflow:hidden; }
		@media only screen and (min-width:400px){ 
			.flex .box { width:50%; }
		}
		@media only screen and (min-width:600px){ 
			.flex .box { width:33.33333%; }
		}
		@media only screen and (min-width:800px){ 
			.flex .box { width:25%; }
		}
	/*--- flexboxer ---*/

	/*--- mat ---*/
		.mat { box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); -webkit-border-radius:2px; border-radius:2px; -webkit-transition-duration:0.218s;  transition-duration:0.218s; -webkit-transition-property:background,opacity,-webkit-box-shadow,-webkit-transform; transition-property:background,opacity,box-shadow,transform; -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; }
		.mat:hover { -webkit-box-shadow:0 2px 15px rgba(0,0,0,0.3); box-shadow:0 2px 15px rgba(0,0,0,0.3); }
	/*--- mat ---*/

	/*--- spinner ---*/
		.spinner { display:block; margin:-19px auto 0 auto; width:38px; height:38px; position:relative; text-align:center; -webkit-animation:sk-rotate 2.0s infinite linear; animation:sk-rotate 2.0s infinite linear; }
		.spinner .dot1,
		.spinner .dot2 { width:60%; height:60%; display:inline-block; position:absolute; top:0; background-color:#fff; border-radius:100%; -webkit-animation:sk-bounce 2.0s infinite ease-in-out; animation:sk-bounce 2.0s infinite ease-in-out; }
		.spinner .dot2 { top:auto; bottom:0; -webkit-animation-delay:-1.0s; animation-delay:-1.0s; }
		@-webkit-keyframes sk-rotate { 100% { -webkit-transform:rotate(360deg) }}
		@keyframes sk-rotate { 100% { transform:rotate(360deg); -webkit-transform:rotate(360deg) }}
		@-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform:scale(0.0) } 50% { -webkit-transform:scale(1.0) } }
		@keyframes sk-bounce { 0%, 100% { transform:scale(0.0); -webkit-transform:scale(0.0); } 50% { transform:scale(1.0); -webkit-transform:scale(1.0); } }
		.spinner.hidden { display:none; }
	/*--- spinner ---*/

	/*--- jumper ---*/
		/*.jumper { position:fixed; bottom:1.15rem; bottom:0.25rem; right:0.75rem; opacity:0;  }
		.jumper i { background-color:#161616; color:#fff; padding:0.5rem; }*/
		/*.jumper i { background-color:#26a69a; color:#fff; padding:0.5rem; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); -webkit-transition:0.3s ease-out; transition:0.3s ease-out; }
		.jumper i:hover { -webkit-box-shadow:0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2); box-shadow:0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2); }*/
		/*.jumper.on { opacity:1; }
		.jumper.on i { cursor:pointer; }*/
	/*--- jumper ---*/
/*--- core ---*/


nav { position:sticky; top:0; background-color:#fff; box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); z-index:10; text-align:center; }
nav ul { margin:0 auto; padding:0; display:flex; }
nav ul li { display:inline-block; margin:0; padding:0; }
/*nav ul li:last-child { flex-grow:1; text-align:right; }*/
nav ul li a { display:inline-block; padding:0.75rem; color:#222; text-transform:uppercase; }
nav ul li a.on { font-weight:600; }
nav ul li select { width:auto; padding:0; font-size:; }

footer { position:fixed; bottom:0; left:0; right:0; display:flex; flex-wrap:wrap; background-color:#161616; color:#fff; }
footer .mi { padding:0.75rem 0.375rem; font-size:1.5rem; vertical-align:middle; cursor:default; color:#696969; }
footer .mi.solo { cursor:pointer; }
footer .mi.on { color:#fff; cursor:pointer; }
footer .mi.off { display:none; }
footer .vr { display:inline-block; border-right:#696969 solid 1px; line-height:1; padding-left:1rem; margin-right:1rem; height:24px; vertical-align:middle; }

footer .ops { flex-grow:1; font-size:0; }
footer .ops .break { border-right:#4e4e4e solid 1px; padding:0.75rem 0; margin:0 1rem; }
footer .misc { padding-right:0.375rem; text-align:right; font-size:0; }
footer .track-info { display:none; width:100%; padding:0.375rem 0.75rem; font-size:0.9em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background-color:rgba(255,255,255,0.1); }
footer .track-info > div { display:inline; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer; }
footer .bar { position:relative; display:block; margin:-7px -0.75rem 7px -0.75rem; height:7px; background-color:#676767; cursor:pointer; }
footer .bar .meter { position:absolute; top:0; left:0; bottom:0; background-color:#37bb72; border-right:#fff solid 2px; }

footer canvas { position:relative; display:block; /*margin:2px 0 -5px 0;*/ width:100%; height:2px; background-color:#bbb; }

footer *, footer *:before, footer *:after { -webkit-user-select:none; }
body.audio footer .track-info { display:block; }
/*
footer .ops { text-align:center; }
footer .track-info { align-self:center; padding:0.375rem 0.75rem; font-size:0.8em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
footer .track-info > div { display:inline; }
footer .track-info .producer,
footer .track-info .released,
footer .track-info a { display:none; }
footer .track-info .show { cursor:pointer; vertical-align:middle; font-size:initial; }

*/

/*footer > div { width:100%; }*/





section.view { padding-bottom:7rem; }

section .btn { font-size:1.1em; -webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); -webkit-transition:0.3s ease-out; transition:0.3s ease-out; }
section .btn:hover { -webkit-box-shadow:0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2); box-shadow:0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2); }

.errors { display:none; margin:0.75rem 1.5rem; }
.errors.on { display:block; }
.errors p { padding:0.75rem; background-color:#fff; text-align:center; }

.list { margin:0.375rem; display:flex; flex-wrap:wrap; }
.list a { color:#ffa200; }
.list .loading { width:100%; margin:3rem auto; }
.list .spinner > div { background-color:#ffa200; }
.list .load-more { width:100%; margin:1rem 0.75rem 0.375rem 0.75rem; text-align:center; }
.list .load-more .btn { margin-left:-200vw; }
.genre-area { padding:0.75rem; }
.genre-area select { text-transform:uppercase; }

.track { width:100%; font-size:0; line-height:0; display:flex; flex-direction:column; /*justify-content:space-evenly;*/ }
.track .mat { display:flex; margin:0.375rem; height:100%; padding:0; background-color:#fff; }
.track .art { position:relative; display:inline-block; margin-bottom:auto; }
.track .art::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: inset 0 0 0.5rem rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 0 0.5rem rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 0 0.5rem rgba(0,0,0,0.25);
}
.track .art img { background-color:#ccc; /*max-width:25vw; border:rgba(0,0,0,0.15) solid 1px;*/ }
.track .art img:before { padding-bottom:100%; content:''; display:block; }
.track .shade { display:block; position:absolute; top:0; right:0; left:0; bottom:0; background-color:rgba(0,0,0,0.5); opacity:0; cursor:pointer; }
.track .shade i { position:absolute; top:50%; right:auto; bottom:auto; left:50%; margin-top:-2rem; margin-left:-2rem; font-size:4rem; padding:0; line-height:1; color:#fff; }
.desktop .track .art:hover .shade, .track.on .shade { opacity:1; }


.track .content { position:relative; display:flex; padding:0.375rem 0.75rem; font-size:15px; line-height:1.5; 
flex-direction:column;
margin:auto 0;
width:100%;
overflow:hidden;

/*overflow:hidden; flex-direction:column; justify-content:center; width:100%;*/ }

.track .artist, .track .title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.track .title { font-weight:600;  }
.track .feat, .track .producer { overflow:hidden; font-size:0.85em; white-space:nowrap; text-overflow:ellipsis; }
.track .feat span, .track .producer span { }
.track .download { display:inline-block; margin-top:0.375rem; margin-right:auto; font-weight:600; }

.track .ops { margin:auto auto 0.375rem -0.375rem; }
.track .ops a.mi { display:none; color:#222; font-size:2em; }
.track .ops .mi { padding:0.1875rem; font-size:2.75em; cursor:pointer; }
.track .pause,
.track.on .play,
.track.on.no .pause { display:none; }
.track.on.no .play,
.track.on .pause { display:inline-block; }

/*
nav { margin-bottom:1rem; }
.list { margin:0.75rem; }
.track .mat { margin:1rem 0.75rem; }
.track .art { padding-right:0.75rem; }
*/


.search-form { margin:0.75rem; padding:0.75rem; background-color:#fff; }
.search-form input:focus, .search-form select:focus, .search-form textarea:focus { border-color:#ffa200; }

@media only screen and (min-width:400px){
	footer .mi { font-size:1.75rem; }
}

@media only screen and (min-width:600px){
	nav { margin-bottom:1rem; text-align:left; }
	nav ul { margin:0 1.5rem; }
	footer .ops { padding-left:0.375rem; }
	.list { margin:0.75rem; }
	.track .mat { margin:1rem 0.75rem; }
	/*.track .art { padding-right:0.75rem; }
	.track .shade { right:0.75rem; }*/
	.track .content { padding:0.75rem 0.75rem 0.75rem 1.5rem; font-size:16px; }
	.search-form { margin:0.75rem 1.5rem; }

	.genre-area { position:fixed; top:0; right:2rem; padding:0; z-index:11; }
	.genre-area select { width:auto; padding:0.75rem 0.375rem; border-bottom:none; direction:rtl; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
}

@media only screen and (min-width:800px){
	.track { width:50%; }
	.track .art img { max-width:15vw; }
}

@media only screen and (min-width:1400px){
	.track { width:33.333%; }
}

.list.single .track { width:100%; }
.list.single .load-more .btn { display:none; }

body[p0="search"] .genre-area { display:none; }