.player.full {
    background: #00b4ab;
    background: -webkit-linear-gradient(left,#00b4ab, #04bf7b);
    background: -o-linear-gradient(right,#00b4ab, #04bf7b);
    background: -moz-linear-gradient(right,#00b4ab, #04bf7b);
    background: linear-gradient(right,#00b4ab, #04bf7b);
    padding:5px;
    color:white;
    overflow:hidden;
}

.player.full a {
    color:white;
}

.player.full .play_button {
    background:none;
    background-color:transparent;
    border:2px solid white;
    float:left;
    margin-right:20px;
}
.player.full.playing .play_button .pause:before,
.player.full.playing .play_button .pause:after {
    background-color: white;
}

.player .mute {
    font-size:25px;
    float:left;
    margin-right:20px;
    margin-top:5px;
}
.player .mute.active {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.player .track_progress {
    overflow:hidden;
    margin:17px 0px;
    background-color:white;
    margin-right:20px;
}

.player .progress {
    margin:0px;
    width:0px;
    height:7px;
    background-color:#d7d7d7;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

.player .before_after {
    background-color: white;
    overflow: hidden;
}

.player .before_after a {
    display: block;
    float: left;
    height: 40px;
    width: 50%;
    padding: 7px 0px;
    text-align: center;
    color: #272e2b;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;
}

.player .before_after a:hover {
    background-color: #ebebeb;
}

.player .before_after .active {
    background-color: #d7d7d7;
}









.play_button {
    background: #02b899;
    background: -webkit-linear-gradient(#02b899, #04bf7b);
    background: -o-linear-gradient(#02b899, #04bf7b);
    background: -moz-linear-gradient(#02b899, #04bf7b);
    background: linear-gradient(#02b899, #04bf7b);
    color:white;
    display:inline-block;
    width:38px;
    height:38px;
    text-align:center;
    line-height:29px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size:30px;
    border:2px solid #02b899;
    transition: none;
}
.play_button .play {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9.5px 0 9.5px 10px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 3px;
    line-height: 30px;
}

.play_button:hover {
    opacity: 0.8;
    border:2px solid #02b899;
    color:#02b899;
}

.playing .play_button {
    background: white;
}
.play_button .pause {
    display: none;
}
.play_button .pause:before,
.play_button .pause:after {
    content: '';
    width: 7px;
    height: 18px;
    margin-bottom: 1px;
    background-color: #02b899;
    display: inline-block;
}
.play_button .pause:before {
    margin-right: 4px;
}

.playing .play_button .play {
    display:none;
}
.playing .play_button .pause {
    display: inline-block;
}



.play_button.white {
    background: white;
    border-color: white;
}
.play_button.white .play {
    border-color: transparent transparent transparent #6755dc;
}