@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); 
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
img{max-width:100%;}
#main {font-family: 'Muli',sans-serif; font-size: 15px; color: #555; background: #fafafa; margin: 0;transition: .3s all ease; overflow: hidden;}
.header-bottom-panel .logo {max-width: 202px; width: 100%; float: left; margin-right: 15px;}
.header-bottom-panel .logo img {max-width: 100%;}
header{position:fixed;left:0;right:0;top:30px;z-index:900;padding:10px 0;-webkit-transition:all .6s ease;-o-transition:all .6s ease;transition:all .6s ease}
.header-wrap{position:relative;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.highlit header{top:0;background:rgba(71,187,246,1)!important}
.inner.highlit .header-wrap{top:10px}
.inner.highlit header{min-height:85px}
.inner header{top:0;background:#5741c9;background:-moz-linear-gradient(left,#5741c9 0%,#b376dd 100%);background:-webkit-linear-gradient(left,#5741c9 0%,#b376dd 100%);background:linear-gradient(to right,#5741c9 0%,#b376dd 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5741c9',endColorstr='#b376dd',GradientType=1);min-height:85px;padding:0}
.inner .header-wrap{top:10px}
.inner #main{margin-top:85px;}
.inner.highlit #main{margin-top:85px}

.access-box{width: 100%; max-width: 340px; margin: 7% auto;}
.access-box-body{background: #fff; padding: 20px; border-top: 0; color: #666;}
.access-box-body .form-control {border-radius: 0;box-shadow: none; border-color: #d2d6de;max-height: 42px;}
.access-box-body .access-button {background: #7460ee; width: 100%; border: 0px}


.player{background:#242628;background:-moz-linear-gradient(top,#242628 0,#000 100%); position:absolute;}
.icons,.splitTxt{color:#fff}
.trackDetails{text-align:center;margin:4px auto;width:300px;height:38px;border:1px solid #1e1e1e;background:#000;border-radius:4px;padding:6px}
.artist,.title{color:#999;-moz-user-select:none;left:167px}.title{font-size:14px;font-weight:700}
.artist{font-size:12px}
.playlistIcon,.volumeIcon{position:absolute;right:6px;cursor:pointer;height:34px;width:32px}
.volumeIcon{bottom:15px;display:block}
.controls{cursor:pointer;height:47px;width:170px;float: left;margin-top: 7px;}
.controls .fwd,.controls .pause,.controls .play,.controls .rew{float:left;height:40px;width:40px;line-height:40px;text-align:center}
.controls .fwd,.controls .rew{padding-top:1px}
.controls .pause,.controls .play,.plIcon,.volumeIcon{font-size:26px}
.controls .pause{display:none}
.hidden{display:none}
.controls .visible{display:inline-block}
.tracker{cursor:pointer;height:5px}
.ui-widget.ui-widget-content{border:0}
.ui-corner-all{border-radius:0}
.ui-slider .ui-slider-handle{display:block;height:14px;border-radius:14px;width:14px;-webkit-transition:all ease-in-out .3s;transition:all ease-in-out .3s}
.tracker .ui-slider-range{background:#00dbde;background:-moz-linear-gradient(left,#00dbde 0,#fc00ff 100%);background:-webkit-linear-gradient(left,#00dbde 0,#fc00ff 100%);background:linear-gradient(to right,#00dbde 0,#fc00ff 100%);-webkit-transition:all ease-in-out .3s;transition:all ease-in-out .3s;height:100%;top:0}
.volume .ui-slider-range{background:#333;-webkit-transition:all ease-in-out .3s;transition:all ease-in-out .3s}
.volume.ui-widget-content{background:#00dbde}
.ui-slider-handle{cursor:pointer;height:10px;margin-left:-5px;top:2px;width:10px;z-index:2}.volume{display:none;right:12px;position:absolute;top:-98px;height:100px;width:20px;box-shadow:0 0 10px #000}.volume .ui-slider-handle{display:none}.playlist{background-color:#1e1e1e;list-style-type:none;padding-bottom:10px;padding:15px;position:relative;width:100%;z-index:1;display:none;-webkit-transition:all ease-in-out .1s;transition:all ease-in-out .1s}
.playlist li{color:#eee;cursor:pointer;margin-bottom:4px;padding:6px 12px;-webkit-transition:all ease-in-out .1s;transition:all ease-in-out .1s}
.playlist li:hover{background:#333}.playlist li.active{font-weight:700;background:#000}.show{display:block}
.ui-button,.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,html .ui-button.ui-state-disabled:active,html .ui-button.ui-state-disabled:hover{border:0}.ui-widget-content{background:#666}.cr{color:#f9f9f9;text-align:center}
.album.inner header{padding:3px 0; min-height:53px;}
.album.inner .header-wrap{top:0;}
.album .logo {max-width: 135px;}
.album img{max-width:100%;}
.album  .date,.album .name{text-shadow: #000 1px 1px 1px;}
footer {padding: 45px 0; background: #f4f7f9; color: #3e4a57;}
.social a {border-radius: 50%; font-size: 20px; line-height: 0; border: solid 1px #d6dbe1; width: 44px; height: 44px; display: -webkit-inline-box; margin-right: 10px; padding: 11px 13px; color: #7d8a99;}
.fa {display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.fa-facebook-f:before, .fa-facebook:before {content: "\f09a";}
.fa-instagram:before {content: "\f16d";}
.copyrights {font-size: 13px; color: #7d8a99; text-align: right; width: 100%; display: inline-block; line-height: 13px;}
#copyright a{color: #fff; font-size: 12px; font-weight: 400;}
.fa-play:before {content: "\f04b";}
.fa-step-forward:before {content: "\f051";}
.fa-step-backward:before {content: "\f048";} 
.fa-pause:before {content: "\f04c";}
.fa-volume-up:before {content: "\f028";}
.fa-share-alt:before {content: "\f1e0";}
.fa-music:before {content: "\f001";}

body.menu-opend .overlay {opacity: 1; visibility: visible;}
.overlay {background: rgba(0,0,0,.8); position: fixed; left: 0;  right: 0; bottom: 0; top: 0; z-index: 990; opacity: 0; visibility: hidden;transition: .4s all ease;}
.nav-menu {position: fixed; right: -251px; top: 0; width: 250px;height: 100%; background-color: #47bbf6; border-left: 1px solid #47bbf6; z-index: 999; transition: .3s all ease;padding-top: 10px;}
body.menu-opend .nav-menu {right: 0;}
.menu-logo {text-align: center; display: inline-block; width: 100%; border-bottom: 1px solid #4d6c97;padding: 0 35px; padding-bottom: 9px; margin-bottom: 0;}
.menu-icon {font-size: 15px; color: #fff; margin-top: 12px;}
.menu-icon i{border-radius: 50%; border: solid 1px #fff; padding: 2px 8px;  margin-right: 5px;}
.nav-menu p{font-size: 13px; padding: 5px; line-height: 17px;}
.contact-container{display: flex;  margin-top: 15px;}
.contact-container .contact{flex: auto; font-family: Muli;}
.contact-container .contact:hover{background: #5741c9;
    background: -moz-linear-gradient(left,#5741c9 0%,#b376dd 100%);
    background: -webkit-linear-gradient(left,#5741c9 0%,#b376dd 100%);
    background: linear-gradient(to right,#5741c9 0%,#b376dd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5741c9',endColorstr='#b376dd',GradientType=1);
    color:#fff;}
.contact-container .fa-phone{margin-right:5px;}