sakrecoer-mother-web/assets/css/music.css

---
---
{%include base.html %}
/* skipper */

#skipper {
 position: absolute; bottom:0; 
 z-index: 1; 
 
}

/* */


audio{
 position:fixed;
 right:0;
 bottom:0;
 min-width:100%;
 min-height:100%;
 width:100%;
 height:100%; 


 background:url({{ base }}/img/bg/frontpage.jpg) no-repeat;



 background-size:cover;
 opacity:0;
 -webkit-transition:1s opacity;transition:1s opacity;

 display: block;
}

.stopfade{
 opacity:.7;
}
#mu_pause {
 font-family: futurabold;
 font-weight: bold;
 line-height: 1em;
 font-size:3em;
 text-transform: uppercase;
 /* position: fixed;
 bottom: 30%;
 right: 40%; */
 display:block;
 width:250px;
 height: 250px;
 border-radius: 50%;
 border:none;
 background:rgba(255,0,0,1);
 cursor:pointer;
 -webkit-transition:.3s background;
 transition:.3s background;
 z-index: 10000;
  color: #fff;


}
#mu_pause:hover{
 background:rgba(0,255,255,.6);
 color: #fff;

} 
/* ---- hide divs  ---- */



#abc,#ab {
    display: none;
    background-color: transparent;

}
/*show .ab*/
#download:hover ~ #ab {
    display: block;
}
/*show .abc*/

#lyrics:hover ~ #abc {
    display: block;
    opacity: 1;
 -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;
}

#download:hover ~ #a,
#lyrics:hover ~ #a{
    display: none;
}
#download,
#lyrics{
  font-family: futurabold;
  text-transform: uppercase;
  font-weight: bold;
}

#a, #ab, #abc {
   position: fixed;
   bottom: 0px;
   right: 0px;
   width: 75%;
   height: 85%;
    background-color: transparent;
}

/* default */
#a{
   width: 1px;
   height: 1px;
}

/*  download  */
#ab {
    top:140px; left:350px;
    width: 600px; height: 120px;padding: 17px;
    background-color: rgba(0, 0, 0, .4);
    font-family: futura; font-size:24px; text-align: left;
    opacity: 1;
    text-transform:uppercase;
    border-radius:4px;
}

/*  lyrics  */
#abc{
    top:140px; left:350px;
    width: 600px; height:120px;padding: 17px;
    background-color: rgba(0, 0, 0, .4);
    font-family: futura; font-size:12px; text-align: left;
    opacity: 1;
    border-radius:4px;
}



#tracktime {
 position: fixed; right: 10px; bottom:-10px; 
 font-size: 272px; font-family: futurabold; line-height:288px; letter-spacing: -20px; color: rgba(0,255,255,.3);

}

#random_posts{
 position: fixed; right: 20px; top:140px;
 width: 300px;
 font-family: futura; font-size: 12px;
 line-height: 10px;
 background:rgba(0,0,0,1);
 border-radius: 4px;
 padding: 7px;
 -webkit-transition:1s opacity;transition:1s opacity;
 opacity: .3;
 z-index: 1000;
}
hr {
 border-color: #222;
}
#random_posts:hover{
 opacity: .7;

}