/*! DSAudioPlayer v1.0 | (c) 2016, Danial Sabagh | http://danialsabagh.com | http://mersadesign.com */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700|Slabo+27px|Questrial);

/*! roundSlider v1.0 | (c) 2015, Soundar | MIT license | http://roundsliderui.com/licence.html */
.rs-control {
    position: relative;
    outline: 0 none
}

.rs-container {
    position: relative
}

.rs-control *,
.rs-control *:before,
.rs-control *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.rs-animation .rs-transition {
    -webkit-transition: all .5s linear 0s;
    -moz-transition: all .5s linear 0s;
    -o-transition: all .5s linear 0s;
    transition: all .5s linear 0s
}

.rs-bar {
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

.rs-control .rs-split .rs-path,
.rs-control .rs-overlay1,
.rs-control .rs-overlay2 {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}

.rs-control .rs-overlay {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

.rs-control.rs-error {
    border: 1px dotted;
    text-align: center
}

.rs-readonly {
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    z-index: 100
}

.rs-disabled {
    opacity: .35
}

.rs-inner-container {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden
}

.quarter div.rs-block {
    height: 200%;
    width: 200%
}

.half.top div.rs-block,
.half.bottom div.rs-block {
    height: 200%;
    width: 100%
}

.half.left div.rs-block,
.half.right div.rs-block {
    height: 100%;
    width: 200%
}

.bottom>.rs-inner-container>.rs-block {
    top: auto;
    bottom: 0
}

.right .rs-inner-container>.rs-block {
    right: 0
}

div.rs-block {
    -webkit-border-radius: 100%;
    border-radius: 100%
}

.rs-block {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 3
}

.rs-block .rs-inner {
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    display: block;
    height: 100%;
    width: 100%;
    position: relative
}

.rs-overlay {
    width: 50%
}

.rs-overlay1,
.rs-overlay2 {
    width: 100%
}

.rs-overlay,
.rs-overlay1,
.rs-overlay2 {
    position: absolute;
    background-color: #fff;
    z-index: 3;
    top: 0;
    height: 50%
}

.rs-bar {
    position: absolute;
    height: 0;
    z-index: 10
}

.rs-bar .rs-seperator {
    height: 0;
    border-bottom: medium none;
    display: block;
    float: left
}

.full .rs-bar,
.half .rs-bar {
    width: 50%
}

.half.left .rs-bar,
.half.right .rs-bar,
.quarter .rs-bar {
    width: 100%
}

.full .rs-bar,
.half.left .rs-bar,
.half.right .rs-bar {
    top: 50%
}

.bottom .rs-bar {
    top: 0
}

.half.right .rs-bar,
.quarter.right .rs-bar {
    right: 100%
}

.rs-handle.rs-move {
    cursor: move
}

.rs-readonly .rs-handle.rs-move {
    cursor: default
}

.rs-path {
    display: block;
    height: 100%;
    width: 100%
}

.rs-split .rs-path {
    -webkit-border-radius: 1000px 1000px 0 0;
    border-radius: 1000px 1000px 0 0;
    overflow: hidden;
    height: 50%;
    position: absolute;
    top: 0;
    z-index: 2
}

.rs-tooltip {
    text-align: center;
    position: absolute;
    cursor: default;
    border: 1px solid transparent;
    z-index: 10
}

.full .rs-tooltip {
    top: 50%;
    left: 50%
}

.bottom .rs-tooltip {
    top: 0
}

.top .rs-tooltip {
    bottom: 0
}

.right .rs-tooltip {
    left: 0
}

.left .rs-tooltip {
    right: 0
}

.half.top .rs-tooltip,
.half.bottom .rs-tooltip {
    left: 50%
}

.half.left .rs-tooltip,
.half.right .rs-tooltip {
    top: 50%
}

.rs-tooltip .rs-input {
    outline: 0 none;
    border: none
}

.rs-tooltip-text {
    font-family: verdana;
    font-size: 13px;
    border-radius: 7px
}

.rs-tooltip.edit,
.rs-tooltip .rs-input {
    padding: 5px 8px
}

.rs-tooltip.hover,
.rs-tooltip.edit:hover {
    border: 1px solid #aaa;
    cursor: pointer
}

.rs-readonly .rs-tooltip.edit:hover {
    border-color: transparent;
    cursor: default
}

.rs-handle {
    border-radius: 1000px;
    outline: 0 none;
    float: left
}

.rs-handle.rs-handle-square {
    border-radius: 0
}

.rs-handle-dot {
    border: 1px solid #aaa;
    padding: 6px
}

.rs-handle-dot:after {
    display: block;
    content: "";
    border: 1px solid #aaa;
    height: 100%;
    width: 100%;
    border-radius: 100%
}

.rs-seperator {
    border: 1px solid #aaa
}

.rs-border {
    border: 1px solid #aaa
}

.rs-path-color {
    background-color: #fff
}

.rs-range-color {
    background-color: #54bbe0
}

.rs-bg-color {
    background-color: #fff
}

.rs-handle {
    background-color: #838383
}

.rs-handle-dot {
    background-color: #fff
}

.rs-handle-dot:after {
    background-color: #838383
}

div.DSAudioPlayer {
    top:-10px;
    margin:0px auto;
    width: 320px;
    height: 320px;
    border-radius:10px;
    overflow: hidden;
    position: relative;
}
div.DSAudioPlayer > .blur {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(7px);
    -webkit-filter: blur(7px);
    -moz-filter:blur(7px);
    -ms-filter: blur(7px);
    -o-filter: blur(7px);
}
div.mainSection, div.dashboard{
    position: absolute;
    left: 0px;
}
div.mainSection{
    width:100%;
    height:85%;
    top:0;
}
div.dashboard{
    width:100%;
    height:15%;
    bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
    width: 100%;
    Height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
div.mainSection > .panel2{
    overflow-y: scroll;
    overflow-x: hidden;
}
div.panel1 > div.top,
div.panel1 > div.middle{
    width: 100%;
}
div.panel1 > div.top{ height: 30%; }
div.panel1 > div.middle{ height: 70%; margin-top: -20px;}

div.middle > div:not(.centered-vertically){
    width: 64px;
    height: 64px;
    background-color: rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
div.middle > div:hover{
    background-color: rgba(255,255,255,0.3);
}
div.middle > div:not(.centered-vertically){margin: -10px 0px 10px 0px;}
div.dashboard > div:not(.centered-vertically){margin:10px;}
div.middle > div:not(.centered-vertically),
div.dashboard > div:not(.centered-vertically) {
    display: inline-block;
    vertical-align: middle;
}
div.middle > .centered-vertically,
div.dashboard > .centered-vertically {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
div.middle, div.dashboard {
    text-align: center;
}
div.dashboard > div:not(.centered-vertically) {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}
/** Buttons **/

div.middle > .play{
    width:138px !important;
    height:138px !important;
    position: relative;
}
div.middle > .play > #slider{
    float: left;
}
div.middle > .play > .playpausebtn{
    background-image: url(images/play.png);
    background-size: 64px auto;
    width:64px !important;
    height:64px !important;
    float: left;
    position: absolute;
    z-index: 4;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
div.middle > .play > .frontTiming{
    width: 90px;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    bottom: -40px; left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;

}

.backward{
    background: url(images/backward.png);
    background-size: 32px 32px;
}
.forward{
    background: url(images/forward.png);
    background-size: 32px 32px;
}
div.middle > .play, div.middle > .backward, div.middle > .forward{
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.shuffle, .share, .repeat, .sound{
    width: 32px;
    height: 32px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}
.shuffle {
    position: relative;
    background-color: transparent;
    border-radius: 50%;
}
.shuffle:after{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background-image: url(images/shuffle.png);
    margin-left: -15px;
    margin-top:1px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}
.shuffle:hover:after{
    transform:rotateX(180deg);
    -webkit-transform:rotateX(180deg);
    -ms-transform:rotateX(180deg);
    -moz-transform:rotateX(180deg);
    -o-transform:rotateX(180deg);
}
.repeat{
    background-image: url(images/repeat.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}
.repeat:hover{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}
.repeat .active{
    background-color: red !important;
}
.sound {
    background-image:url(images/volume-high.png);
    animation: 0.5s both ease-in-out;
    -webkit-animation: 0.5s both ease-in-out;
    -ms-animation: 0.5s both ease-in-out;
    -moz-animation: 0.5s both ease-in-out;
    -o-animation: 0.5s both ease-in-out;
}

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@-moz-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@-o-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@-ms-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-1px);}
    20%, 40%, 60%, 80% {transform: translateX(1px);}
}
.shake:hover {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}

.share {
    background:url(images/share.png);
    -webkit-animation: 0.5s both ease-in-out;
    -ms-animation: 0.5s both ease-in-out;
    -moz-animation: 0.5s both ease-in-out;
    -o-animation: 0.5s both ease-in-out;
    animation: 0.5s both ease-in-out;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@-ms-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
.share:hover {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
}


/** menu Button **/
.grid-button {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
}

.grid {
    display: inline-block;
    height: 4px;
    position: relative;
    width: 32px;
    transition: all 0.3s ease-in-out;
    margin-top: 15px;
}
.grid:after, .grid:before {
    content: '';
    position: absolute;
    background-color: #FFF;
    display: inline-block;
    height: 4px;
    left: 0;
    width: 32px;
    transition: all 0.3s ease-in-out;
}

.grid.open {
    background-color: #FFF;
}
.grid.open:after {
    top: 10px;
}
.grid.open:before {
    top: -10px;
}

.grid.close {
    background-color: transparent;
    transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
    top: 0;
    transform-origin: 50% 50%;
}
.grid.close:before {
    transform: rotate(135deg);
}
.grid.close:after {
    transform: rotate(45deg);
}


/** Top section **/
.trackTitle, .trackSinger{
    text-align: center;
    color:#FFF;
}
.trackTitle{
    font-size:30px;
    margin-top:20px;
    font-family: 'Oswald', sans-serif;
}
.trackSinger{
    margin-top: 10px;
    font-size:16px;
    font-family: 'Questrial', sans-serif;
}



/** Panel 2 setting **/
div.panel2> ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div.panel2 > ul > li{
    width:100%;
    height:80px;
    border-bottom:solid 1px rgba(255,255,255,0.5);
    background:rgba(255,255,255,0.5);
}
div.panel2 > ul > li:hover{
    background:rgba(255,255,255,0.8);
}
div.panel2 > ul > li > div.leftBox, div.panel2 > ul > li > div.rightBox{
    height:100%;
}
div.panel2 > ul > li > div.leftBox{float:left; width:58%;}
div.panel2 > ul > li > div.rightBox{float:right; width:42%;}
div.panel2 > ul > li > div.leftBox > .listNum{
    width:32%;
    height:100%;
    background:rgba(255,0,0,0.0);
    font-size:36px;
    font-family: 'Oswald', sans-serif;
    float:left;
    color:rgba(0,0,0,0.2);
    margin-top: -8px;
}
div.listNum > span{
    padding-left:5px;
}
div.leftBox > p{
    line-height:10px;
}
div.leftBox > p.title{
    font-size:20px;
    font-family: 'Oswald', sans-serif;
    color: #454545;
}
div.leftBox > p.singer{
    font-size:14px;
    font-family: 'Questrial', sans-serif;
    font-weight: 300;

}
div.leftBox > p.singer:before{
    content: 'By ';
}
/** Right side ***/
div.rightBox > .artwork{
    width:60px;
    height:60px;
    border-radius:50%;
    background-image: none;
    background-position: center !important;
    background-size:cover !important;
    float:right;
    margin:10px 5px 10px 0;
}
div.rightBox > p{
}
div.rightBox > .duration{
    font-size:14px;
    font-weight: bold;
    text-align: right;
    margin-right: 80px;
}
div.rightBox > .resources{
    margin: -3px 80px 0 0px;
}
div.resources > a{
    width:20px;
    height:20px;
    display: block;
    text-decoration: none;
    float:right;
    margin-left:5px;
    opacity:0.5;
}
div.resources > a:hover{
    opacity:1;
}
div.resources > a.apple{
    background: url(images/16-apple-24.png);
    background-size:20px;
}
div.resources > a.amazon{
    background: url(images/27-amazon-24.png);
    background-size:20px;
    margin-top: 2px;
}
div.resources > a.download{
    background: url(images/178_Download-24.png);
    background-size:20px;
}
.cur, .slash{
    display: none;
}

/** animations **/
div.panel2 > ul > li{
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}



/** Slider's Modifications **/
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-handle,
.rs-control .rs-bg-color,
.play .frontTiming,
.rs-seperator,
.rs-border{
    transition: all 0.5s ease-in-out !important;
    -webkit-transition: all 0.5s ease-in-out !important;
    -ms-transition: all 0.5s ease-in-out !important;
    -moz-transition: all 0.5s ease-in-out !important;
    -o-transition: all 0.5s ease-in-out !important;
}

.rs-control .rs-range-color {
    background-color: rgba(0,0,0,0.0);
}
.rs-control .rs-path-color {
    background-color: rgba(255,255,255,0.0);
}
.rs-control .rs-handle {
    background-color: rgba(255,255,255,0.9);
}
.rs-control .rs-bg-color {
    background-color: rgba(255,255,255,0.0);
}
.rs-border{
    border: 2px solid rgba(0, 0, 0, 0);
}
/** HOVER **/
.play:hover  .rs-border{
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.play:hover  .rs-handle{
    background-color: rgba(255,255,255,0.95);
}
.play:hover > .frontTiming{
    opacity: 1 !important;
}
div.rs-container.full{
    text-align: left;
}
.rs-seperator{
    border: 1px solid rgba(255,255,255,0.4);
}

/***********Social Button******************/
.share-button {
    width: 32px;
    height: 32px;
    line-height: 2em;
}

.social-toggle {
    width: 32px;
    height: 32px;
    transition: all 0.3s linear;
    background:url(images/share.png);
    -webkit-animation: 0.5s both ease-in-out;
    -moz-animation: 0.5s both ease-in-out;
    -o-animation: 0.5s both ease-in-out;
    -ms-animation: 0.5s both ease-in-out;
    animation: 0.5s both ease-in-out;
}
.social-toggle:hover {
    -webkit-animation-name: flash;
    animation-name: flash;
    -o-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
}

.social-toggle:hover {  }

.no-js .social-toggle,
.no-js .social-toggle:hover {  }

.social-networks {
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0) translateY(-190px);
    transform: scale(0) translateY(-190px);
    opacity: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    margin-left: -45%;
    /* stops flickering */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.social-facebook, .social-email, .social-gplus, .social-twitter{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}
.social-facebook{
    background-image: url(images/facebook.jpg);
}
.social-facebook:hover{
    background-color: rgba(59,89,152,.8);
}
.social-gplus{
    background-image: url(images/googleplus.jpg);
}
.social-gplus:hover {
    background-color: rgba(227,68,41,.8);
}
.social-twitter{
    background-image: url(images/twitter.jpg);
}
.social-twitter:hover {
    background-color: rgba(108,223,234,.8);
}
.social-email{
    background-image: url(images/email.jpg);
}
.social-email:hover {
    background-color: rgba(31, 128, 0,.8);
}

.social-networks.open-menu,
.no-js .social-networks {
    -webkit-transform: scale(1) translateY(-90px);
    -ms-transform: scale(1) translateY(-90px);
    -moz-transform: scale(1) translateY(-90px);
    -o-transform: scale(1) translateY(-90px);
    transform: scale(1) translateY(-90px);
    opacity: 1;
}

.social-networks ul {
    position: relative;
    top: 10px;
    right: 110px;
    width: 160px;
    height: 25px;
    color: #fff;
    background: rgba(255,255,255,.5);
    margin: auto;
    padding: 0;
    list-style: none;
}

.social-networks ul:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    /**left: 0;**/
    right: 10px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

.social-networks.open-menu ul:after,
.no-js .social-networks ul:after {
    margin: 25px 0;
    border-top: 12px solid rgba(255,255,255,.5);
}

.social-networks li {
    width: 40px;
    margin: 0;
    text-align: center;
    float: left;
    display: block;
    height: 25px;
    line-height: 40px;
    position: relative;
    z-index: 2;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    transition: background-color .3s ease;
}

.share-button a {
    text-decoration: none;
}

.social-networks a {
    width:100%;
    height: 100%;
    display: block;
    color: white;
}

.social-networks a:hover {  }
/** ------- **/

/** EQ PLAYER **/
.eq{
    float:left;
    margin:-5px 5px 0 0;
    width:14px;
    height:15px;
    position:relative;
}
.bar1, .bar2, .bar3{
    float:left;
    width:4px;
    height:100%;
    background:black;
    position:absolute;
    bottom:0;
}
.bar1{
    animation: bar1 4s ease-in-out infinite;
    -webkit-animation: bar1 4s ease-in-out infinite;
    -o-animation: bar1 4s ease-in-out infinite;
    -moz-animation: bar1 4s ease-in-out infinite;
    -ms-animation: bar1 4s ease-in-out infinite;

}
.bar2{
    animation: bar2 4s ease-in-out infinite; left:5px;
    -webkit-animation: bar2 4s ease-in-out infinite; left:5px;
    -moz-animation: bar2 4s ease-in-out infinite; left:5px;
    -ms-animation: bar2 4s ease-in-out infinite; left:5px;
    -o-animation: bar2 4s ease-in-out infinite; left:5px;
}
.bar3{
    animation: bar3 4s ease-in-out infinite; left:10px;
    -webkit-animation: bar3 4s ease-in-out infinite; left:10px;
    -moz-animation: bar3 4s ease-in-out infinite; left:10px;
    -ms-animation: bar3 4s ease-in-out infinite; left:10px;
    -o-animation: bar3 4s ease-in-out infinite; left:10px;
}
@keyframes bar1 {
    0%   {height: 100%;} 10%  {height: 80%;} 20%  {height: 90%;} 30%  {height: 1%;}
    40%  {height: 60%;} 50%  {height: 40%;} 60%  {height: 90%;} 70%  {height: 70%;}
    80%  {height: 100%;} 90%  {height: 5%;} 100%  {height: 100%;}
}
@keyframes bar2 {
    0%   {height: 10%;} 10%  {height: 60%;} 20%  {height: 20%;} 30%  {height: 80%;}
    40%  {height: 40%;} 50%  {height: 90%;} 60%  {height: 30%;} 70%  {height: 100%;}
    80%  {height: 5%;} 90%  {height: 50%;} 100%  {height: 10%;}
}
@keyframes bar3 {
    0%   {height: 50%;} 10%  {height: 20%;} 20%  {height: 70%;} 30%  {height: 50%;}
    40%  {height: 1%;} 50%  {height: 80%;} 60%  {height: 50%;} 70%  {height: 90%;}
    80%  {height: 30%;} 90%  {height: 1%;} 100%  {height: 10%;}
}


/** RESPONSIVE **/
@media only screen and (max-device-width : 768px) {
    .sound{ /** DISABLE THE BUTTON **/
        opacity: .5;
        pointer-events: none;
    }
}

.DSAudioPlayer {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
}

/** scroll **/
.DSAudioPlayer ::-webkit-scrollbar {
    width:11px;
}

.DSAudioPlayer ::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.1);
}

.DSAudioPlayer ::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background: rgba(255, 255, 255, 0.65);
}

.DSAudioPlayer ::-webkit-scrollbar-thumb:hover {
    background:rgba(255, 255, 255, 0.75);
}

.DSAudioPlayer ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.05);
}