.icon{display:inline-block;width:2em;height:2em;font-size:30px;fill:#d7dce2;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
body,html{height:100%}
body{background:black;position:relative}
.player,.player__album:before,.player__play svg{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.player.play .player__timeline{-webkit-transform:translateY(-90%);-ms-transform:translateY(-90%);transform:translateY(-90%)}
.player.play .player__album:after{-webkit-box-shadow:0 30px 28px -10px rgba(0,0,255,.5);box-shadow:0 30px 28px -10px rgba(0,0,255,.5)}
.player.play .player__album{top:-65px}
.player.play .pause{display:inline-block}
.player.play .play{display:none}
.player__album{width:112px;height:112px;margin-right:22px;position:relative;top:-50px;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.player__album:before{content:'';width:25px;height:25px;z-index:3;background:#fff}
.player__album,.player__album:after,.player__album:before,.player__albumImg{-webkit-border-radius:50%;border-radius:50%}
.player__album:after{content:'';top:0;right:0;bottom:0;left:0;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;position:absolute}
.player__albumImg{-webkit-background-size:cover;background-size:cover;background-position:center;background-repeat:no-repeat;width:100%;height:100%;position:relative;z-index:2;display:none}
.player__albumImg.active-song{display:block}
.player__bar,.player__controls,.player__play,.player__prev{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.player__bar{background:green;padding:10px 25px;height:80px;min-width:350px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-border-radius:15px;border-radius:15px;-webkit-box-shadow:0 30px 56px 6px rgba(0,0,0,.1);box-shadow:0 30px 56px 6px rgba(0,0,0,.1);position:relative;z-index:3}
.player__controls,.player__play,.player__prev{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.player__play,.player__prev{cursor:pointer;height:80px;width:80px;-webkit-border-radius:15px;border-radius:15px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin-right:3px}
.player__prev{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.player__next:hover,.player__play:hover,.player__prev:hover{background:grey}
.player__play:hover svg,.player__prev:hover svg{fill:#fff}
.player__play{position:relative}
.player__play svg{font-size:26px}
.player__play svg.pause{display:none}
.player__next,.player__play,.player__timeline{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.player__next{cursor:pointer;width:80px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-border-radius:15px;border-radius:15px;margin-left:-8px;height:80px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.player__next:hover svg{fill:#fff}
.player__timeline{background:purple;height:90px;position:absolute;bottom:0;left:10px;right:10px;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1;padding-left:160px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
.player #playhead,.player__timeline,.player__timelineBar{-webkit-border-radius:15px;border-radius:15px}
.player__timelineBar{background:#e7e7e7;margin-top:13px;width:0%;height:4px;position:relative}
.player #playhead{position:absolute;top:0;left:0;width:0;height:100%;background:green}
.player__author{line-height:1;font-weight:600;margin-bottom:6px;margin-top:15px}
.player__song{line-height:1;margin:0;font-size:16px;color:white}