---
---
{% include base.html %}

@font-face {
 font-family: futura;
 src: url('{{ base }}/assets/fonts/free_avantgarde.woff');
}
@font-face {
 font-family: futurabold;
 src: url('{{ base }}/assets/fonts/free_avantgardeBOLD.woff');
}
/*! Track Pages */
html{
 -webkit-transition:.5s background;
 transition:.5s background;
 font-family: Futura, Helvetica, Arial, sans-serif, sans;
 font-size: 1em;
}
body, p{
 margin:0;
}
h1,
h2,
h3,
h4 {
 font-weight:bold;
 text-transform: uppercase;
}

b,
strong {
 font-weight:bold;
}
a:link,
a:visited,
a:hover,
a:active,
a:focus {
 text-decoration: none;
  -webkit-transition:.6s background;
  transition:.6s background;
}
a,
a:link,
a:visited {
 color: #fff;
 -webkit-transition-property: hover;
 -webkit-transition: color 0.15s ease-in-out;
 -moz-transition: color 0.15s linear 0s; /* firefox 4 */
 -o-transition-property: color; /* opera 10.5 */
 -o-transition-duration: 0.15s;
}
a:hover {
 color: rgba(0,76,255,0.9);
}
a:active {
 color: #f00;
}
#navigation {
 z-index: 100000;
 position: fixed; top:10px; left: 10px; z-index: 1000;
 width: 150px; height: 290px;padding: 10px;
 background-color: rgba(0,204,255,0.5);   
 text-align: center;
 border-radius: 75px ;
 opacity: .33;
 -webkit-transition-property: hover;
 -webkit-transition: opacity 0.7s ease-in-out;
 -moz-transition: opacity 0.7s linear 0s; /* firefox 4 */
 -o-transition-property: opacity; /* opera 10.5 */
 -o-transition-duration: 0.7s;
}
#navigation:hover {
 background-color: rgba(0,204,255,0.5); 
 opacity: 1;

}
#lyrics {
 position: absolute; left:350px; top:60px; z-index: 1000;
 min-width:600px;
 padding: 0 .75em 200px .75em;
 margin-right:20%;
 background-color: rgba(0,76,255,0);   
 text-align: left;
 font-size: .85em;
 color: rgba(0,204,255,0);
 border-radius: 2px ;
 opacity: 1;
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.7s ease-in-out;
 -moz-transition: background-color 0.7s linear 0s; /* firefox 4 */
 -o-transition-property: background-color; /* opera 10.5 */
 -o-transition-duration: 0.7s;
}
#lyrics:hover {
 background-color: rgba(0,76,255,1); 
 opacity: .9;
 z-index: 10;
 color: rgba(0,204,255,.9);
 border-radius: 3px;
}

.title{
 font-family: Futurabold, Helvetica, Arial, sans-serif, sans;
 font-size:6em;
 line-height:.8em;
 letter-spacing:-.1em;
 color:rgba(0,204,255,0);
  text-shadow: 1px 0px 27px rgba(0,204,255,.2),
	    -1px 0px 27px rgba(0,204,255,.2),
             0px -1px 27px rgba(0,204,255,.2),
	     0px 1px 27px rgba(0,204,255,.2);
}
h1 {
  -webkit-transition-property: hover;
  -webkit-transition: text-shadow 0.7s ease-in-out;
  -moz-transition: text-shadow 0.7s linear 0s; /* firefox 4 */
  -o-transition-property: text-shadow; /* opera 10.5 */
  -o-transition-duration: 0.7s;
}
h1:hover {
  text-shadow: 1px 0px 0px rgba(0,204,255,.5),
	    -1px 0px 0px rgba(0,204,255,.5),
             0px -1px 0px rgba(0,204,255,.5),
	     0px 1px 0px rgba(0,204,255,.5);
 -webkit-transition-property: hover;
 -webkit-transition: text-shadow 0.7s ease-in-out;
 -moz-transition: text-shadow 0.7s linear 0s; /* firefox 4 */
 -o-transition-property: text-shadow; /* opera 10.5 */
 -o-transition-duration: 0.7s;
}
audio{
 position:fixed;
 right:0;
 bottom:0;
 min-width:100%;
 min-height:100%;
 width:100%;
 height:100%; 
 background:#777 no-repeat;
 background-size:cover;
 opacity:0;
 -webkit-transition:1s opacity;transition:1s opacity;
 display: block;
}
.stopfade{
 opacity:.7;

}
#mu_pause {
 font-weight: bold;
 line-height: 1em;
 font-size:2em;
 font-family: Futurabold, Helvetica, Arial, sans-serif;
 text-transform: uppercase;
 /* position: fixed;
 bottom: 30%;
 right: 40%; */
 display:block;
 width:150px;
 height: 150px;
 border-radius: 50%;
 border:none;
 background:rgba(0,204,255,1);
 cursor:pointer;
 -webkit-transition:.3s background;
 transition:.3s background;
 z-index: 10000;
  color: #fff;
}
#mu_pause:hover{
 background:rgba(0,76,255,.9);
 color: #fff;
} 

#tracktime {
 position: fixed; right: 10px; bottom:0px; 
 font-size: 12em; line-height:0.9em; letter-spacing: -0.1em; color: rgba(119,119,119,0);
 font-family: Helvetica, Arial, Sans-serif, Sans;
 font-weight: bold;
  text-shadow: 1px 0px 14px rgba(0,204,255,.5),
	    -1px 0px 14px rgba(0,204,255,.5),
             0px -1px 14px rgba(0,204,255,.5),
	     0px 1px 14px rgba(0,204,255,.5);
 z-index: 100;
}
.arrow {
 font-size: 2em;
 line-height: .9em;
}
{% include navmenu.css %}