@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,900");
.wptpa_wrapper {
position: relative;
width: 100%;
height: auto;
}
.wptpa_wrapper *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wptpa_player_container {
position: relative;
width: 100%;
height: 200px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.wptpa_cvr_wrapper {
position: relative;
width: 200px;
height: 200px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 200px;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
overflow: hidden;
}
.wptpa_covers{
position: relative;
width: 100%;
height: auto;
padding: 0 !important;
margin: 0 !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
list-style-type: none !important;
}
.wptpa_cover{
position: relative;
width: 100%;
height: 200px;
padding: 0 !important;
margin: 0 !important;
list-style-type: none;
}
.wptpa_cover img{
position: relative;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wptpa_single_stats{
position: absolute;
width: 100%;
text-align: center !important;
left: 0;
bottom: 0;
z-index: 5;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wptpa_player {
position: relative;
min-width: 0;
width: 100%;
height: 200px;
padding: 0 20px !important;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.wptpa_heading {
position: relative;
display: inline-block;
width: 100%;
height: 35px !important;
padding: 0 !important;
margin: 20px 0 30px 0 !important;
white-space: nowrap;
overflow: hidden;
text-align: center !important;
}
.wptpa_heading:before,
.wptpa_heading:after {
position: absolute;
content: '';
width: 4px;
height: 26px;
top: 2px;
border-radius: 100% !important;
-webkit-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
opacity: 0;
-webkit-transition: all 500ms !important;
-o-transition: all 500ms !important;
transition: all 500ms !important;
}
.wptpa_heading:before {
left: -3px;
}
.wptpa_heading:after {
right: -3px;
}
.wptpa_heading.scrll:before,
.wptpa_heading.scrll:after {
opacity: 1;
}
.wptpa_song_infrmtn {
position: relative;
display: inline-block;
font-size: 30px;
font-weight: 100;
line-height: 30px;
}
.scrll .wptpa_song_infrmtn {
padding-left: 100% !important;
-webkit-animation: sngsld 10s linear infinite;
-o-animation: sngsld 10s linear infinite;
animation: sngsld 10s linear infinite;
}
@-webkit-keyframes sngsld {
from { 
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
to { 
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
@-o-keyframes sngsld {
from { 
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
to { 
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
@-moz-keyframes sngsld {
from { 
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
to { 
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
@keyframes sngsld {
from { 
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
to { 
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
.wptpa_song_infrmtn b{
font-weight: 400;
}
.wptpa_control {
position: relative;
width: 100%;
height: 20px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.wptpa_btn{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 20px;
-ms-flex: 0 0 20px;
flex: 0 0 20px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
position: relative;
width: 20px;
height: 20px;
margin: 0 0 0 20px !important;
cursor: pointer;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.wptpa_btn .wptpa_icon {
-webkit-transform-origin: 10px 10px 0;
-moz-transform-origin: 10px 10px 0;
-ms-transform-origin: 10px 10px 0;
-o-transform-origin: 10px 10px 0;
transform-origin: 10px 10px 0;
-webkit-transition: transform 250ms !important;
-o-transition: transform 250ms !important;
transition: transform 250ms !important;
}
.wptpa_btn:active .wptpa_icon {
-webkit-transform: scale(.75, .75);
-ms-transform: scale(.75, .75);
-o-transform: scale(.75, .75);
transform: scale(.75, .75);
}
.wptpa_additional .wptpa_btn{
margin: 0px !important;
width: 20px;
height: 20px;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 20px;
-ms-flex: 0 0 20px;
flex: 0 0 20px;
text-align: center !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
.wptpa_btn:before{
position: absolute;
content: '';
width: 40px;
height: 40px;
top: -10px;
left: -10px;
border-radius: 100px !important;
z-index: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
}
.wptpa_btn.clck:before{
-webkit-transition: all 500ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
-o-transition: all 500ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
transition: all 500ms cubic-bezier(0.075, 0.82, 0.165, 1) !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.wptpa_playback {
margin: 0 20px 0 0 !important;
}
.wptpa_player .wptpa_seek {
position: relative;
min-width: 0;
width: 100%;
height: 20px;
margin: 0 !important;
cursor: pointer;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
overflow: hidden;
font-size: 0;
border: 0 !important;
border-radius: 0 !important;
white-space: nowrap;
}
.wptpa_player .wptpa_seek .ui-slider-handle{
visibility: hidden;
}
.wptpa_player .wptpa_loader {
position: absolute;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 10;
}
.wptpa_player .wptpa_loader span {
position: absolute;
width: 8px;
height: 8px;
left: -10px;
top: 6px;
border-radius: 6px !important;
-webkit-animation: wptpa_loader 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
-o-animation: wptpa_loader 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
animation: wptpa_loader 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wptpa_player .wptpa_loader span:nth-child(1) {
-webkit-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
.wptpa_player .wptpa_loader span:nth-child(2) {
-webkit-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms;
}
.wptpa_player .wptpa_loader span:nth-child(3) {
-webkit-animation-delay: 200ms;
-o-animation-delay: 200ms;
animation-delay: 200ms;
}
@-webkit-keyframes wptpa_loader {
0% { left: -10px; }
50% { width: 12px; }
100% { left: 110%; }
}
@-o-keyframes wptpa_loader {
0% { left: -10px; }
50% { width: 12px; }
100% { left: 110%; }
}
@-moz-keyframes wptpa_loader {
0% { left: -10px; }
50% { width: 12px; }
100% { left: 110%; }
}
@keyframes wptpa_loader {
0% { left: -10px; }
50% { width: 12px; }
100% { left: 110%; }
}
.wptpa_progress {
position: absolute;
width: 0%;
height: 100%;
z-index: 1;
}
.wptpa_currenttime,
.wptpa_duration {
position: relative;
top: 0px;
display: inline-block;
width: 50%;
font-size: 15px;
font-weight: 400;
line-height: 20px;
z-index: 2;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wptpa_currenttime {
padding: 0 5px !important;
text-align: left !important;
}
.wptpa_duration {
padding: 0 5px !important;
text-align: right !important;
}
.wptpa_btn .wptpa_icon {
position: relative;
width: 20px;
height: 20px;
display: block;
}
.wptpa_prev {
}
.wptpa_repeat {
}
.wptpa_next {
}
.wptpa_shuffle {
}
.wptpa_share {
}
.wptpa_additional {
position: relative;
width: 100%;
height: 20px;
margin: 50px 0 0 0 !important;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.wptpa_pls_toggle {
margin: 0 0 0 0 !important;
}
.wptpa_volume_control {
position: relative;
width: 140px;
height: 20px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 140px;
-ms-flex: 0 0 140px;
flex: 0 0 140px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.wptpa_volume {
margin: 0 0 0 0 !important;
}
.wptpa_volume_control .wptpa_volume_seek {
position: relative;
width: 100px;
height: 20px;
margin: 0 0 0 20px !important;
cursor: pointer;
border: 0 !important;
border-radius: 0 !important;
background-color: transparent;
background: transparent;
}
.wptpa_volume_seek .ui-slider-handle {
visibility: hidden;
}
.wptpa_volume_seek:before {
position: absolute;
content: '';
width: 100%;
height: 4px;
top: 8px;
left: 0;
}
.wptpa_volume_value {
position: absolute;
width: 0%;
height: 4px;
top: 8px;
left: 0;
}
.wptpa_pllst_container {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.wptpa_pllst {
position: relative;
width: 100%;
height: auto;
margin: 0 !important;
padding: 0 !important;
list-style-type: none !important;
}
.wptpa_pllst_itm {
position: relative;
width: 100%;
height: 40px;
margin: 0 !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
text-align: left !important;
list-style-type: none !important;
padding: 0 !important;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wptpa_curent {
position: relative;
width: 40px;
height: 40px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 40px;
-ms-flex: 0 0 40px;
flex: 0 0 40px;
}
.wptpa_bars {
right: 0;
bottom: 0;
left: 0;
margin: auto !important;
}
.wptpa_bars,
.wptpa_bars:before,
.wptpa_bars:after{
-webkit-transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
-o-transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
.wptpa_bars,
.wptpa_bars:before,
.wptpa_bars:after{
position: absolute;
content: '';
width: 6px;
height: 6px;
top: 0;
border-radius: 3px !important;
margin-bottom: auto !important;
}
.wptpa_pllst_itm .wptpa_bars:before{
left: 0;
}
.wptpa_pllst_itm .wptpa_bars:after{
right: 0;
}
.wptpa_pllst_itm.sngldng .wptpa_bars:before{
left: 0;
-webkit-animation: sngldngL 1s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
-o-animation: sngldngL 1s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation: sngldngL 1s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.wptpa_pllst_itm.sngldng .wptpa_bars:after{
right: 0;
-webkit-animation: sngldngR 1s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
-o-animation: sngldngR 1s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation: sngldngR 1s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes sngldngL {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@-o-keyframes sngldngL {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@-moz-keyframes sngldngL {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@keyframes sngldngL {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@-webkit-keyframes sngldngR {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
}
@-o-keyframes sngldngR {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
}
@-moz-keyframes sngldngR {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
}
@keyframes sngldngR {
0%, 100% { 
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
50% { 
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
}
.wptpa_pllst_itm.crrnt .wptpa_bars,
.wptpa_pllst_itm.crrnt .wptpa_bars:before,
.wptpa_pllst_itm.crrnt .wptpa_bars:after{
top: auto;
width: 4px;
height: 20px;
-webkit-animation: wptpa_bars 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-o-animation: wptpa_bars 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: wptpa_bars 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wptpa_pllst_itm.crrnt .wptpa_bars {
bottom: 10px;
}
.wptpa_pllst_itm.crrnt .wptpa_bars:before,
.wptpa_pllst_itm.crrnt .wptpa_bars:after{
bottom: 0;
}
.wptpa_pllst_itm.crrnt .wptpa_bars:before {
-webkit-animation-delay: 50ms;
-o-animation-delay: 50ms;
animation-delay: 50ms;
}
.wptpa_pllst_itm.crrnt .wptpa_bars:after {
-webkit-animation-delay: 150ms;
-o-animation-delay: 150ms;
animation-delay: 150ms;
}
@-webkit-keyframes wptpa_bars {
0%, 100% { 
height: 20px;
}
50% { 
height: 4px;
}
}
@-o-keyframes wptpa_bars {
0%, 100% { 
height: 20px;
}
50% { 
height: 4px;
}
}
@-moz-keyframes wptpa_bars {
0%, 100% { 
height: 20px;
}
50% { 
height: 4px;
}
}
@keyframes wptpa_bars {
0%, 100% { 
height: 20px;
}
50% { 
height: 4px;
}
}
.wptpa_pllst_itm.crrnt .wptpa_bars:before{
left: -8px;
}
.wptpa_pllst_itm.crrnt .wptpa_bars:after{
right: -8px;
}
.wptpa_song {
position: relative;
width: 100%;
height: 40px;
margin: 0 !important;
padding: 0 10px 0 0 !important;
font-size: 14px;
font-weight: 300;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
cursor: pointer;
}
.wptpa_song b{
font-weight: 500;
}
.wptpa_dwn_cnt,
.wptpa_play_cnt,
.wptpa_like,
.wptpa_dwn,
.wptpa_buy {
position: relative;
width: 40px;
height: 40px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 40px;
-ms-flex: 0 0 40px;
flex: 0 0 40px;
text-align: center !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.wptpa_dwn_cnt:hover,
.wptpa_play_cnt:hover,
.wptpa_like:hover,
.wptpa_dwn:hover,
.wptpa_buy:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
.wptpa_dwn_cnt,
.wptpa_play_cnt {
font-size: 11px;
font-weight: 300;
line-height: 40px;
cursor: help;
}
.wptpa_play_cnt {
}
.wptpa_like,
.wptpa_buy,
.wptpa_dwn {
position: relative;
border-bottom: none !important;
outline: none !important;
}
.wptpa_pllst_itm .wptpa_icon {
position: relative;
width: 40px;
height: 40px;
}
.wptpa_line {
position: relative;
width: 1px !important;
height: 20px !important;
margin: 10px 0 !important;
padding: 0 !important;
border-width: 0px 0px 0px 1px !important;
border-style: solid solid solid solid !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; opacity: 0.25;
}
.wptpa_pllst_container .wptpa_scroll_rail {
position: absolute;
width: 10px;
top: 20px;
right: 0;
bottom: 20px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75;
border: 0 !important;
border-radius: 0 !important;
background-color: transparent;
height: auto;
}
.wptpa_scroll_rail .ui-slider-handle{
visibility: hidden;
}
.wptpa_scroll_bar {
position: absolute;
width: 4px;
height: 20px;
bottom: 100%;
right: 3px;
border-radius: 2px !important;
margin-bottom: -10px !important;
}
.wptpa_scroll_rail:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
.wptpa_icon path{
-webkit-transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
-o-transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
.wptpa_widget{
min-width: 260px;
}
.wptpa_widget .wptpa_player_container{
height: auto;
display: block;
}
.wptpa_widget .wptpa_cvr_wrapper{
width: 100%;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.wptpa_widget .wptpa_heading{
margin: 20px 0 25px 0 !important;
}
.wptpa_widget .wptpa_control{
height: 60px;
-webkit-box-orient: horizontal;
-webkit-flex-wrap: wrap;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
-o-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.wptpa_widget .wptpa_playback {
margin: 0 !important;
}
.wptpa_widget .wptpa_seek{
-ms-flex-order: 2;
margin-top: 20px !important;
-webkit-box-ordinal-group: 2;
-webkit-order: 2;
order: 2;
}
.wptpa_widget .wptpa_additional {
margin: 20px 0 0 0 !important;
}
.wptpa_volume_modal{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto !important;
width: 400px;
height: 200px;
background: rgba(0, 0, 0, 0.75) !important;
overflow: hidden;
z-index: 99999999;
-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30),
0 15px 12px rgba(0,0,0,0.22) !important;
box-shadow: 0 19px 38px rgba(0,0,0,0.30),
0 15px 12px rgba(0,0,0,0.22) !important;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 300ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 500ms !important;
-o-transition: all 300ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 500ms !important;
transition: all 300ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 500ms !important;
border-radius: 10px !important;
pointer-events: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;
pointer-events: none;
}
.wptpa_vol_show{
pointer-events: all; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
-o-transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
.wptpa_f_num,
.wptpa_s_num,
.wptpa_t_num{
position: relative;
top: 0;
margin: 0 !important;
padding: 0 !important;
height: auto;
list-style-type: none !important;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.wptpa_num{
position: relative;
padding: 0 !important;
margin: 0 !important;
width: 100%;
height: 200px;
font-size: 200px;
font-weight: 900;
line-height: 200px;
text-align: center !important;
color: #fff !important;
list-style-type: none !important;
}
.wptpa_share_modal {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto !important;
width: 300px;
height: 270px;
background: rgba(0, 0, 0, 0.75) !important;
-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) !important;
border-radius: 10px !important;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;
-webkit-transition: all 300ms cubic-bezier(0.6, 0.04, 0.98, 0.335) !important;
-o-transition: all 300ms cubic-bezier(0.6, 0.04, 0.98, 0.335) !important;
transition: all 300ms cubic-bezier(0.6, 0.04, 0.98, 0.335) !important;
z-index: 999999999;
pointer-events: none;
}
.wptpa_share_modal.opn {
pointer-events: all; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1 !important);
-o-transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
.wptpa_h2 {
position: relative;
margin: 0 !important;
padding: 10px 0 20px 0 !important;
font-size: 40px;
font-weight: 100;
line-height: 38px;
text-align: center !important;
color: #fff !important;
}
.wptpa_h2:before {
content: none !important;
}
.wptpa_close_share {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
cursor: pointer;
}
.wptpa_close_share line {
fill: none;
stroke: #fff;
}
.wptpa_close_share:hover line {
fill: none;
stroke: #3ec3d5;
}
.wptpa_links {
position: relative;
width: 100%;
height: auto;
text-align: center !important;
font-size: 0;
}
.wptpa_social_links {
position: relative;
height: 30px;
margin: 0 10px !important;
padding: 0 !important;
display: inline-block;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.wptpa_social_icon {
fill: #fff;
height: 30px;
}
.wptpa_social_links:hover .wptpa_social_icon {
fill: #3ec3d5;
}
.wptpa_ads{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0 5px;
text-align: center !important;
z-index: 10;
font-size: 15px;
font-weight: 400;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.wptpa_embed_code {
position: relative;
margin: 20px !important;
padding: 10px !important;
font-size: 12px;
line-height: 16px;
text-align: center !important;
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #f2f2f2 !important;
border: 1px dashed rgba(255, 255, 255, 0.25) !important;
border-radius: 10px !important;
-ms-word-break: break-all;
word-break: break-all;
}
@media screen and (max-width: 350px) {
.wptpa_window {
display: none;
}
}