@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'novecento';
    src: url('https://embeds.datpiff.com/fonts/novecentowide-bold-webfont-webfont.eot');
    src: url('https://embeds.datpiff.com/fonts/novecentowide-bold-webfont-webfont.eot#iefix') format('embedded-opentype'),
         /*url('https://embeds.datpiff.com/fonts/novecentowide-normal-webfont-webfont.woff2') format('woff2'),*/
         url('../../fonts/novecentowide-bold-webfont.woff') format('woff'),
         url('../../fonts/novecentowide-bold-webfont.ttf') format('truetype'),
         url('https://embeds.datpiff.com/fonts/novecentowide-bold-webfont-webfont.svg#novecento_widenormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

body, html{ margin:0; background:#1e1e1e; height:100%; width:100%; }
div#embed{ width:100%; height:100%; max-height:100%; display:flex; flex-direction:column; align-items:stretch; font-family:'novecento', sans-serif; font-weight:500; }
section#top_area{ flex-basis:292px; position:relative; }
section#track_area{ flex-basis:231px; flex-grow:1; background-color:#ffffff; border-top:1px solid #8e979a; overflow-y:scroll; }

#top_area .artbg{
	filter:blur(5px);
	webkit-filter:blur(5px);
	/*filter:gray blur(5px);
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") blur(5px);*/
	position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
	/*-moz-filter:url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") blur(5px);
	-o-filter:url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") blur(5px);
	webkit-filter:grayscale(100%) blur(5px);*/
	overflow:hidden;opacity:.3 !important;
	background-position:center; background-size:cover;
}
#top_area .mainContent{ position:absolute; left:3.8%; top:10%; width:92%; min-height:30%; max-height:50%; display:flex; flex-direction:row; align-items:stretch; overflow:none; }
#top_area .mainContent .artwork{ flex-grow:0; flex-shrink:1; max-width:20%; }
#top_area .mainContent .artwork img{ 
	height:100%; width:auto;;
	-webkit-box-shadow: 0px 0px 36px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 36px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 36px 1px rgba(0,0,0,0.75);
}
#top_area .mainContent .metadata{ flex-basis:80%; flex-grow:1; margin-left:3.8%; }
#top_area .mainContent .metadata .title{ color:#ffffff; font-size:1.2em; }
#top_area .mainContent .metadata .artist{ color:#3fc6fd; font-size:.9em; margin-top:.3em; }
#top_area .mainContent .metadata #currentTrack{ color:#d8d7d7; font-size:.7em; margin-top:2.5em; }

#top_area .mainContent .metadata .scrubarea{ position:relative; width:100%; height:.8em; margin-top:.6em; }
#top_area .mainContent .metadata .scrubarea>*{ position:absolute; }
#top_area .mainContent .metadata .scrubarea .scrubbar{ border-radius:.4em; width:100%; height:.6em; top:.1em; z-index:1; }
#top_area .mainContent .metadata .scrubarea .scrubbackground{ background-color:rgba(71,71,71,1.00); z-index:3; }
#top_area .mainContent .metadata .scrubarea .scrubLoaded{ background-color:#0e0e11; z-index:4; width:100%; }
#top_area .mainContent .metadata .scrubarea .scrubprogress{ background-color:#3fc6fd; width:0%; z-index:5; }
#top_area .mainContent .metadata .scrubarea .scrubHit{ background-color:rgba(248,0,4,0.00); width:100%; z-index:6; cursor:pointer; }
#top_area .mainContent .metadata .scrubarea .scrubber{ border:none; cursor:pointer; color:#ffffff; border-radius:50%; height:1em; width:1em; padding:0; margin:0; top:0; left:0; z-index:10; }
#top_area .mainContent .metadata .scrubarea.error .scrubbackground{ background-color:rgba(215,27,31,1.00); }

#top_area .mainContent .metadata .timers{ display:flex; flex-direction:row; margin-top:.4em; }
#top_area .mainContent .metadata .timers>div{ flex-grow:1; flex-basis:1; color:#696f72; font-size:.6em; }
#top_area .mainContent .metadata .timers>div:last-child{ text-align:right; }

#top_area .buttonbar{ position:absolute; z-index:1; bottom:0px; width:100%; height:20%; background:rgba(0,0,0,.51); display:flex; flex-direction:row; align-items:stretch; }
#top_area .buttonbar .controls{ flex-grow:1; flex-basis:168; margin-left:3.8%; }
#top_area .buttonbar .controls button{ border:2px solid #3fc6fd; background:none; height:80%; border-radius:50%; cursor:pointer; margin:-50% 2% 0 2%; padding:0; color:white; /*font-size:1em;*/ text-align:center; }
#top_area .buttonbar .controls button:hover{ background-color:#3fc6fd; }
#top_area .buttonbar .controls button:focus{ outline:none; }
#top_area .buttonbar .controls button.play,
#top_area .buttonbar .controls button.pause{ height:113%; font-size:1.2em; background-color:#3fc6fd; }
#top_area .buttonbar .controls button.play{ position:relative; }
/*#top_area .buttonbar .controls button.play:hover,
#top_area .buttonbar .controls button.pause:hover{ background-color:white; color:#3fc6fd; }*/
#top_area .buttonbar .actions{ flex-grow:1; flex-basis:28%;/*358;*/ display:flex; flex-direction:row; justify-content:flex-end; padding-right:1%; box-sizing:border-box; }
#top_area .buttonbar .actions button{ border:none; background:none; color:rgba(255,255,255,0.39); cursor:pointer; font-size:1.2em; /*width:20%;*/ width:auto; margin:0 2%; }
#top_area .buttonbar .actions button:hover{ color:rgba(255,255,255,0.8);}
#top_area .buttonbar .actions button:focus{ outline:none; }
#top_area .buttonbar .actions button.active{ color:#3fc6fd; }

#track_area .track{ display:flex; justify-content:space-evenly; align-items:center; border-bottom:1px solid #ececec; font-size:1em; min-height:4em; cursor:pointer; }
#track_area .track>span{ color:#c4c4c4;  }
#track_area .track .position{ order:1; flex-basis:10%; text-align:center; }
#track_area .track .title{ order:2; flex-basis:82%; font-weight:500; }
#track_area .track .title>span{ display:block; color:#14181a; }
#track_area .track .title>span:last-child{ color:#3fc6fd; font-size:.76em; margin-top:.5em; }
#track_area .track .duration{ order:3; flex-basis:8%; }

#track_area .track:hover, #track_area>.track.active{ background-color:#3fc6fd; }
#track_area .track:hover>span, #track_area>.track.active>span{ color:#319bc6; }
#track_area .track:hover .title>span:last-child, #track_area>.track.active .title>span:last-child{ color:#fff; }

/* IE 11 hacks */
_:-ms-fullscreen, :root #top_area .mainContent .artwork img{ max-height:100%; }
_:-ms-fullscreen, :root #track_area .track{ padding:1em 0; box-sizing:border-box; }

/* smaller height */
@media screen and (max-height: 272px),
screen and (max-height: 640px) and (orientation: landscape) {
#top_area .mainContent .artwork{ overflow:hidden; }
#top_area .mainContent .artwork img{ max-width:100%; }
#top_area .mainContent .metadata{ font-size:.88em; }
#top_area .mainContent .metadata #currentTrack{ margin-top:1em;  }
#top_area .buttonbar .actions button{ font-size:1em; }
#track_area>.track{ font-size:.8em;  }
#track_area>.track .duration{ font-size:.68em; }

/* IE 11 */
_:-ms-fullscreen, :root #track_area .track{ padding:1em 0; box-sizing:border-box; }

}

/* vertical content */
@media screen and (orientation: portrait) {
section#top_area{ flex-basis:200px; }
#top_area .mainContent .artwork{ max-width:30%; }
#top_area .mainContent .artwork img{ height:auto; width:100%; }
#top_area .mainContent .metadata .title{ font-size:1em; }
#top_area .mainContent .metadata .artist{ font-size:.8em; }
#track_area>.track{ font-size:.8em;  }
#track_area>.track .duration{ font-size:.8em; padding-right:5%;}
/* IE 11 */
_:-ms-fullscreen, :root #track_area .track{ padding:1em 0; box-sizing:border-box; }
}

/* vertical phone */
@media screen and (max-width: 700px) and (orientation: portrait) {
#top_area .buttonbar .controls{ flex-grow:0; flex-basis:25%; justify-content:center; text-align:center; }
#top_area .buttonbar .controls button.prev,
#top_area .buttonbar .controls button.next{ display:none; }
#top_area .buttonbar .controls button.play,
#top_area .buttonbar .controls button.pause{ font-size:2em; height:125%; }
#top_area .buttonbar .actions #btnDownload{ display:none; }
}


noscript{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.58); z-index:20; display:flex; align-items:center; }
noscript>div{ width:100%; height:auto; background:#C82729; font-weight:bold; color:#fff; font-family:'novecento', sans-serif; padding:2vh 1%; text-align:center; }

#share{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.58); z-index:20; display:none; align-items:center; }
#share>div{ position:relative; width:100%; height:auto; background:#3fc6fd; font-weight:bold; color:#fff; font-family:'novecento', sans-serif; padding:2vh 1%; text-align:center; }
#shareClose{ cursor:pointer; position:absolute; top:1vw; right:1vw; }
#share div.buttons{ display:flex; justify-content:center; flex-wrap:wrap; }
#share div.buttons a{ display:inline-block; text-align:center; width:5vw; height:5vw; padding:2vw; margin:1vw; font-size:4vw; border-radius:5px; color:#fff; }
#share div.buttons a.facebook{ background-color:#3b5998; }
#share div.buttons a.twitter{ background-color:#0084bd; }
#share div.buttons a.google{ background-color:#ea4335; }
#share div.buttons a:hover{ background-color:#fff; color:#3b5998; }
#share div.buttons a:hover.twitter{ color:#0084bd; }
#share div.buttons a:hover.google{ color:#ea4335; }
#share div.link{ font-size:.65em; margin-top:2vw; }


#chromestart{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.58); z-index:20; display:none; align-items:center; }
#chromestart>div{ position:relative; width:100%; height:auto; background:#3fc6fd; font-weight:bold; color:#fff; font-family:'novecento', sans-serif; padding:2vh 1%; text-align:center; }
#chromestart>div{ display: flex; flex-direction: column; }
#chromestart>div .fa-chrome{ color:#F9F32D; }
#chromestart>div>button{ width: auto; background: #3fc6fd; border: none; margin: .1em 0; color: white; font-size: 6em; cursor: pointer;}

#underconstruction{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.58); z-index:20; display:none; align-items:center; }
#underconstruction>div{ position:relative; width:100%; height:auto;  font-weight:bold; color:#fff; font-family:'novecento', sans-serif; padding:2vh 1%; text-align:center; font-size: .8em;
	background:repeating-linear-gradient(
	  45deg,
	  #606dbc,
	  #606dbc 10px,
	  #465298 10px,
	  #465298 20px
	);
}
#underconstruction>div .timeleft{ font-size: 3em; margin: .1em 0; }


#offline{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:50; display:flex; align-items:center; }
#offline>section{ position:relative; width:100%; height:auto; /*border-top:2px solid #f73b3b; border-bottom:2px solid #f73b3b;*/ background:#3fc6fd; font-weight:bold; color:#fff; font-family:'novecento', sans-serif; padding:2vh 1%; text-align:center; }
#offline>section .icon{ color:rgba(30,30,30,0.4);  font-size:2em; }
#offline>section a, #offline>section>div{ display:block; font-size:.6em; color:#f1f1f1; text-decoration:none; }
#offline.DMCA div.icon{ font-size:4em; }
#offline.DMCA section div:last-child{ /*margin-top:2vh;*/ font-size:.7em; }
#offline.DMCA section div a{ font-size:1em; color:rgba(30,30,30,0.4); }
#offline.comingsoon, #offline.countdown{ background:rgba(0,0,0,0.8); }

/* get rid of hovers on touch devices */
@media ( hover: none ){
	#track_area .track:hover{ background:none; }
	#track_area .track:hover>span{ color:#c4c4c4; }
	#track_area .track:hover .title>span:last-child{ color:#3fc6fd; }
	#track_area>.track.active{ background-color:#3fc6fd; }
	#track_area>.track.active>span{ color:#319bc6; }
	#track_area>.track.active .title>span:last-child{ color:#fff; }
}

/* Don't show volume controls on iOS */ 
@supports ( -webkit-overflow-scrolling: touch) {
	#btnVolume{ display:none; }
}