@import url(banner.css);
@import url(contenedor.css);
@import url(header.css);

* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

body{
    margin: auto;
    background-image: url(../img/fondo.webp);
    width: 100%;
    background-size: 100vw 100vh;
    background-attachment: fixed;
    -webkit-box-shadow: inset 0 10px 25px rgba(255,255,255, 0.25);
    -moz-box-shadow: inset 0 10px 25px rgba(255,255,255, 0.25);
        box-shadow: inset 0 10px 25px rgba(255,255,255, 0.25);
}

#landscape{
    display: none;
    z-index: -100;
}

.fondo{
    width: 100%;
    background: -webkit-linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.8), rgba(0,0,0,.7), rgba(0,0,0,.6), rgba(0,0,0,.5)); 
    background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.8), rgba(0,0,0,.7), rgba(0,0,0,.6), rgba(0,0,0,.5));
}

::-webkit-scrollbar{
    display: none;
}

.btn_pag{
    display: block;
    margin: .15rem auto;
    width: 100%;
    max-width: 200px;
    background: -webkit-linear-gradient(to right, #000, #0d0d0d, #343e63, #345363, #0d0d0d, #000); 
    background: linear-gradient(to right, #000, #0d0d0d, #343e63, #345363, #0d0d0d, #000);
    box-shadow: 0 0 .2rem #b8b9b9;
    border-radius: 5px;
    border: 1px solid #5a8ed8;
    padding: 5px;
    cursor: pointer;
    transition: all 0.5s;
}

.btn_pag:hover{
    box-shadow: 0 0 .75rem #b8b9b9;
    transform: scale(1.1);
}

.song_side {
    margin: .625rem auto 0;
    position: relative;
    width: 100%;
    height: auto;
/* border: 1px solid #fff; */
    color: #fff;
    padding-left: 5px;
    padding-right: 5px;
}

h1{
    margin: auto;
    width: 98%;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: #e1e1e1;
    text-shadow: -1px -2px 1px black;
}

.song_side .text_app {
    margin: auto;
    width: 98%;
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    color: #e1e1e1;
    text-shadow: -1px -2px 1px black;
    background: -webkit-linear-gradient(to top, #000, #020305, #05070d, #0a0d1a, #0f1426, #1f274d, #0f1426, #0a0d1a, #05070d, #020305, #000);
    background: linear-gradient(to bottom, black, #0d0d0d, rgba(52,83,99,.75), #0d0d0d, black);
    padding: .625rem;
    box-shadow: 0 0 .5rem rgba(255,255,255,.5);
    border-radius: .625rem;
    opacity: .75;
}

.song_side .text_app:hover {
    opacity: 1;
}

.song_side .text_app p {
    margin: .625rem auto 0;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 400;
    text-shadow: -1px -2px 1px black;
    text-align: justify;
    color: #e1e1e1;
}

.apk {
    color: #e1e1e1;
    font-weight: 550;
    background: -webkit-linear-gradient(to top, black, #101426, #20264a, #404d95, #20264a, #101426, black);
    background: linear-gradient(to top, black, #101426, #20264a, #404d95, #20264a, #101426, black);
    padding: .25rem .5rem;
}

.resalt{
    color: #f3e281;
    font-weight: 550;
}

.song_side .popular_song {
    margin: 2rem auto 0;
    width: 98%;
    height: auto;
    padding: .625rem .625rem 0;
    background: linear-gradient(to bottom, #000, #0d0d0d, rgba(52,83,99,.5), rgba(52,94,99,.35), rgba(52,83,99,.5), #0d0d0d, #000);
    box-shadow: 0 0 .375rem rgba(255,255,255,.5);
    opacity: .75;
}

.song_side .popular_song:hover {
    opacity: 1;
}

.song_side .popular_song .h4{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.125rem;
    text-shadow: -1px -2px 1px black;
    background: linear-gradient(to bottom, black, rgba(52,83,99,.95));
    box-shadow: 0 0 .5rem rgba(134,154,255,.5);
    padding: .3125rem;
    border-radius: .3125rem;
}

.song_side .popular_song .h4 .bi{
    color: yellow;
    cursor: pointer;
    transition: .3s linear;
}

.song_side .popular_song .h4 .bi:hover{
    color: #fff;
}

/*--------------------------------*/

.song_side .popular_song .pop_song {
    margin: .9375rem auto 0;
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px
}

.song_side .popular_song .pop_song::-webkit-scrollbar{
    display: none;
}

.song_side .popular_song .pop_song li{
    min-width: 10rem;
    height: auto;
    list-style-type: none;
    margin-right: 1.25rem;
    transition: all 0.5s;
    border: .125rem solid rgba(140,110,70,.1875);
    border-radius: .3125rem;
    padding-bottom: 5px;
}

.song_side .popular_song .pop_song li:hover{
    transform: scale(.95);
    opacity: .75;
}

.song_side .popular_song .pop_song li .img_play{
    position: relative;
    width: auto;
    height: 9.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song_side .popular_song .pop_song li .img_play img{
    width: auto;
    height: 100%;
    padding: .5rem;
}

.song_side .popular_song .pop_song li .img_play .bi{
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    font-size: 2.5rem;
    color: #927963;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    opacity: .875;
    transition: all 0.5s;
}

.song_side .popular_song .pop_song li .img_play:hover .bi{
    opacity: 1;
    transform: scale(.95);
}

.song_side .popular_song .pop_song li h5{
    line-height: .9375rem;
    color: #e5e5e5;
    font-size: .75rem;
    text-shadow: -1px -2px 1px black;
}

.song_side .popular_song .pop_song li h5 .subtitle{
    font-size: .6875rem;
    color: #999999;
    text-shadow: -1px -2px 1px black;
}

/*--------------------------------*/

.song_side .popular_song .art_bnd {
    margin: .9375rem auto 0;
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.song_side .popular_song .art_bnd::-webkit-scrollbar{
    display: none;
}

.song_side .popular_song .art_bnd li{
    min-width: 10rem;
    height: auto;
    list-style-type: none;
    margin-right: 1.25rem;
    transition: all 0.5s;
    border: .0625rem solid rgba(130,221,160,.1875);
    border-radius: .3125rem;
    padding-bottom: 5px;
}

.song_side .popular_song .art_bnd li:hover{
    transform: scale(.95);
    opacity: .75;
}

.song_side .popular_song .art_bnd li .img_play{
    position: relative;
    width: auto;
    height: 9.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song_side .popular_song .art_bnd li .img_play img{
    width: auto;
    height: 100%;
    padding: .5rem;
}

.song_side .popular_song .art_bnd li .img_play .bi{
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    font-size: 2.5rem;
    color: #26a880;
    background-color: black;
    border-radius: 50%;
    cursor: pointer;
    opacity: .875;
    transition: all 0.5s;
}

.song_side .popular_song .art_bnd li .img_play:hover .bi{
    opacity: 1;
    transform: scale(.95);
}

.song_side .popular_song .art_bnd li h5{
    line-height: .9375rem;
    color: #e5e5e5;
    font-size: .75rem;
    text-shadow: -1px -2px 1px black;
}

.song_side .popular_song .art_bnd li h5 .subtitle{
    font-size: .6875rem;
    color: #999999;
    text-shadow: -1px -2px 1px black;
}

/*--------------------------------*/

.song_side .popular_song .discos {
    margin: .9375rem auto 0;
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.song_side .popular_song .discos::-webkit-scrollbar{
    display: none;
}

.song_side .popular_song .discos li{
    min-width: 10rem;
    height: auto;
    list-style-type: none;
    margin-right: 1.25rem;
    transition: all 0.5s;
    border: .125rem solid rgba(130,162,221,.1875);
    border-radius: .3125rem;
    padding-bottom: 5px;
}

.song_side .popular_song .discos li:hover{
    transform: scale(.95);
    opacity: .75;
}

.song_side .popular_song .discos li .img_play{
    position: relative;
    width: auto;
    height: 9.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song_side .popular_song .discos li .img_play img{
    width: auto;
    height: 100%;
    padding: .5rem;
}

.song_side .popular_song .discos li .img_play .bi{
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    font-size: 2.5rem;
    color: royalblue;
    background-color: lightgrey;
    border-radius: 50%;
    cursor: pointer;
    opacity: .875;
    transition: all 0.5s;
}

.song_side .popular_song .discos li .img_play:hover .bi{
    opacity: 1;
    transform: scale(.95);
}

.song_side .popular_song .discos li h5{
    line-height: .9375rem;
    color: #e1e1e1;
    font-size: .75rem;
    text-shadow: -1px -2px 1px black;
}

.song_side .popular_song .discos li h5 .subtitle{
    font-size: .6875rem;
    color: #999999;
    text-shadow: -1px -2px 1px black;
}

/*--------------------------------*/

.song_side .popular_song .metal {
    margin: .9375rem auto 0;
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.song_side .popular_song .metal::-webkit-scrollbar{
    display: none;
}

.song_side .popular_song .metal li{
    min-width: 10rem;
    height: auto;
    list-style-type: none;
    margin-right: 1.25rem;
    border: .0625rem solid rgba(255,130,130,.1875);
    border-radius: .3125rem;
    transition: all 0.5s;
    padding-bottom: 5px;
}

.song_side .popular_song .metal li:hover{
    transform: scale(.95);
    opacity: .75;
}

.song_side .popular_song .metal li .img_play{
    position: relative;
    width: auto;
    height: 9.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song_side .popular_song .metal li .img_play img{
    width: auto;
    height: 100%;
    padding: .5rem;
}

.song_side .popular_song .metal li .img_play .bi{
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    font-size: 2.5rem;
    color: #e83a46;
    background-color: black;
    border-radius: 50%;
    cursor: pointer;
    opacity: .875;
    transition: all 0.5s;
}

.song_side .popular_song .metal li .img_play:hover .bi{
    opacity: 1;
    transform: scale(.95);
}

.song_side .popular_song .metal li h5{
    line-height: .9375rem;
    color: #e5e5e5;
    font-size: .75rem;
    text-shadow: -1px -2px 1px black;
}

.song_side .popular_song .metal li h5 .subtitle{
    font-size: .6875rem;
    color: #999999;
    text-shadow: -1px -2px 1px black;
}

/*--------------------------------*/

.song_side .popular_song .en_esp {
    margin: .9375rem auto 0;
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px
}

.song_side .popular_song .en_esp::-webkit-scrollbar{
    display: none;
}

.song_side .popular_song .en_esp li{
    min-width: 10rem;
    height: auto;
    list-style-type: none;
    margin-right: 1.25rem;
    border: .0625rem solid rgba(255,171,130,.1875);
    border-radius: .3125rem;
    transition: all 0.5s;
    padding-bottom: 5px;
}

.song_side .popular_song .en_esp li:hover{
    transform: scale(.95);
    opacity: .75;
}

.song_side .popular_song .en_esp li .img_play{
    position: relative;
    width: auto;
    height: 9.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song_side .popular_song .en_esp li .img_play img{
    width: auto;
    height: 100%;
    padding: .5rem;
}

.song_side .popular_song .en_esp li .img_play .bi{
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    font-size: 2.5rem;
    color: #cc695e;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    opacity: .875;
    transition: all 0.5s;
}

.song_side .popular_song .en_esp li .img_play:hover .bi{
    opacity: 1;
    transform: scale(.95);
}

.song_side .popular_song .en_esp li h5{
    line-height: .9375rem;
    color: #e5e5e5;
    font-size: .75rem;
    text-shadow: -1px -2px 1px black;
}

.song_side .popular_song .en_esp li h5 .subtitle{
    font-size: .6875rem;
    color: #999999;
    text-shadow: -1px -2px 1px black;
}

/*--------------------------------*/

.song_side .popular_song .himnos {
    margin: .9375rem auto 0;
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px
}

.song_side .popular_song .himnos::-webkit-scrollbar{
    display: none;
}

.song_side .popular_song .himnos li{
    min-width: 10rem;
    height: auto;
    list-style-type: none;
    margin-right: 1.25rem;
    border: .0625rem solid rgba(0,255,96,.1875);
    border-radius: .3125rem;
    transition: all 0.5s;
    padding-bottom: 5px;
}

.song_side .popular_song .himnos li:hover{
    transform: scale(.95);
    opacity: .75;
}

.song_side .popular_song .himnos li .img_play{
    position: relative;
    width: auto;
    height: 9.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song_side .popular_song .himnos li .img_play img{
    width: auto;
    height: 100%;
    padding: .5rem;
}

.song_side .popular_song .himnos li .img_play .bi{
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    font-size: 2.5rem;
    color: #26d36a;
    background-color: black;
    border-radius: 50%;
    cursor: pointer;
    opacity: .875;
    transition: all 0.5s;
}

.song_side .popular_song .himnos li .img_play:hover .bi{
    opacity: 1;
    transform: scale(.95);
}

.song_side .popular_song .himnos li h5{
    line-height: .9375rem;
    color: #e5e5e5;
    font-size: .75rem;
    text-shadow: -1px -2px 1px black;
}

.song_side .popular_song .himnos li h5 .subtitle{
    font-size: .6875rem;
    color: #999999;
    text-shadow: -1px -2px 1px black;
}

/*-----------------------------------------*/

.menu_side{
    margin: 0 auto .3125rem;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow-y: auto;
    border-radius: .5rem;
    padding: .25rem;
    color: white;
}

.menu_side .cover{
    display: block;
    margin: -.3125rem auto 0;
    width: 100%;
    max-width: 27%;
    background: -webkit-linear-gradient(to top, #000, #040a0a, #071413, #0f2b28, #071413, #040a0a, #000);
    background: linear-gradient(to bottom, #000, #040a0a, #071413, #0f2b28, #071413, #040a0a, rgba(0,0,0,.025));
    padding-left: .625rem;
    padding-right: .625rem;
    z-index: 100;
}

.menu_side .playlist {
    margin:  2.5rem 0 0 1.25rem;
}

.menu_side .playlist h4 {
    font-size: .875rem;
    font-weight: 400;
    padding-bottom: .625rem;
    color: #999999;
    text-shadow: -1px -2px 1px black;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: .3s linear;
}

.menu_side .playlist h4:hover {
    color: #fff;
}
.menu_side .playlist h4 span{
    position: relative;
    margin-right: 2.1875rem;
}

.menu_side .playlist h4 span::before{
    content: '';
    position: absolute;
    width: .25rem;
    height: .25rem;
    border: .125rem solid #999999;
    border-radius: 50%;
    top: -.25rem;
    transition: .3s linear;
}

.menu_side .playlist h4:hover span::before{
    border: .125rem solid #fff;
}

.menu_side .playlist h4 .bi{
    display: none;
}

.menu_side .playlist .active{
    color: goldenrod;
}

.menu_side .playlist .active span{
    display: none;
}

.menu_side .playlist .active .bi{
    display: flex;
    margin-right: 1.25rem;
}

.menu_side .menu_song {
    margin-top: 8.5rem;
    width: 100%;
    height: auto;
    max-height: 25rem;
    /* border: 1px solid #fff; */
}

.menu_side .menu_song li{
    position: relative;
    list-style-type: none;
    padding: .3125rem 0 .3125rem .6125rem;
    display: flex;
    align-items: center;
    margin-bottom: .6125rem;
    cursor: pointer;
    opacity: .75;
    transition: .3s linear;
}

.menu_side .menu_song li:hover{
    background: rgba(121,121,242,.2);
    opacity: 1;
}

.menu_side .menu_song li span{
    font-size: .75rem;
    font-weight: 600;
    color: #999999;
}

.menu_side .menu_song li img{
    width: 2.5rem;
    height: 2.5rem;
    margin-left: .625rem;
    box-shadow: 0 0 .5rem #adc2fe;
    border-radius: .125rem;
}

.menu_side .menu_song li h5{
    font-size: .75rem;
    margin-left: .625rem;
    text-align: left;
    text-shadow: -1px -2px 1px black;
    color: #e5e5e5;
}

.menu_side .menu_song li h5 .subtitle{
    font-size: .6875rem;
    color: #999999;
    text-align: left;
    text-shadow: -1px -2px 1px black;
}

.menu_side .menu_song li .bi{
    position: absolute;
    right: .625rem;
    top: .5rem;
    font-size: 1.625rem;
    color: #b3aa59;
    transition: all 0.5s;
}

.menu_side .menu_song li .bi:hover{
    transform: scale(1.2);
}

/*-----------------------------------------*/

.master_play {
    display: flex;
    align-items: center;
    padding: .625rem;
    width: 100%;
    height: 3.75rem;
    background: -webkit-linear-gradient(360deg, #000, rgba(0,0,0,.75), rgba(0,0,0,.75), rgba(0,0,0,.75), #000, #29304d);
    background: linear-gradient(360deg, #000, rgba(0,0,0,.75), rgba(0,0,0,.75), rgba(0,0,0,.75), #000, #29304d);
    border-top-left-radius: .3125rem;
    border-top-right-radius: .3125rem;
    position: fixed;
    bottom: 0;
    z-index: 100;
}
.master_play .contenedor{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.master_play .wave{
    width: 30px;
    height: 30px;
    /* border: 1px solid #fff; */
    padding-bottom: 5px;
    display: flex;
    align-items: flex-end;
}
.master_play .wave .wave1{
    width: 3px;
    height: 10px;
    margin-right: 3px ;
    border-radius: 10px 10px 0px 0px ;
    background: goldenrod;
    animation: unset;
}
.master_play .wave .wave1:nth-child(2){
    height: 13px;
    /* animation-delay: .4s; */
}
.master_play .wave .wave1:nth-child(3){
    height: 8px;
    /* animation-delay: .8s; */
}
/* javascript class wave  */
.master_play .active2 .wave1{
    animation: wave .5s linear infinite;
}
.master_play .active2 .wave1:nth-child(2){
    animation-delay: .4s;
}
.master_play .active2 .wave1:nth-child(3){
    animation-delay: .8s;
}

@keyframes wave {
    0%{
    height: 10px;
    }
    50%{
    height: 15px;
    }
    100%{
    height: 10px;
    }
}

.master_play img {
    width: 2rem;
    height: 2rem;
}
.master_play h5 {
    margin-top: 4px;
    width: 180px;
    font-size: .75rem;
    margin-left: 15px;
    color: #e5e5e5;
    line-height: 15px;
    text-shadow: -1px -2px 1px black;
}
.master_play h5 .subtitle{
    font-size: .6875rem;
    color: #7b7d7d;
    text-shadow: -1px -2px 1px black;
}
.master_play .icon{
    font-size: 1.75rem;
    color: #e1e1e1;
    margin: auto;
    outline: none;
    transition: all 0.5s;
}
.master_play .icon .bi{
    cursor: pointer;
    outline: none;
}
.master_play .icon .bi:nth-child(2){
    border: 1px solid rgba(105, 105, 170,.1);
    border-radius: 50%;
    padding: 1px .15625rem;
    margin: auto;
    transition: .3s linear;
}
.master_play span {
    color: #e1e1e1;
    width: 100%;
    max-width: 35px;
    font-size: 11px;
    font-weight: 400;
    margin: auto;
    margin-left: 10px;
    margin-right: 0;
}
.master_play #currentStart{
    margin: auto;
    margin-left: 0;
    margin-right: 10px;
}

.master_play .bar {
    position: relative;
    width: 35%;
    height: .1875rem;
    background: rgba(105, 105, 170,.1);
    margin: auto;
    margin-left: 0;
    margin-right: 0;
}
.master_play .bar .bar2{
    position: absolute;
    background: goldenrod;
    width: 0%;
    height: 100%;
    top: 0;
    transition: 1s linear;
}
.master_play .bar .dot{
    position: absolute;
    width: 5px;
    height: 5px;
    background: goldenrod;
    border-radius: 50%;
    left: 0%;
    top: -1px;
    transition: 1s linear;
}
.master_play .bar .dot::before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border:1px solid goldenrod;
    border-radius: 50%;
    left: -6px;
    top: -6px;
    box-shadow: inset 0px 0px 3px goldenrod;
}
.master_play .bar input{
    position: absolute;
    width: 100%;
    top: -6px;
    left: 0;
    cursor: pointer;
    z-index: 99999999;
    transition: 3s linear;
    opacity: .0625;
}
.master_play .vol{
    position: relative;
    width: 150px;
    height: .1875rem;
    background: rgb(105, 105, 170,.1);
    margin: auto;
    margin-left: 3.125rem;
    margin-right: .75rem;
}
.master_play .vol .bi{
    position: absolute;
    color: #e1e1e1;
    font-size: 1.375rem;
    top: -.75rem;
    left: -1.625rem;
}
.master_play .vol input{
    position: absolute;
    width: 100%;
    top: -.4375rem;
    left: 0;
    cursor: pointer;
    z-index: 99999999;
    transition: 3s linear;
    opacity: 0;
}
.master_play .vol .vol_bar{
    position: absolute;
    background: goldenrod;
    width: 0%;
    height: 100%;
    top: 0;
    transition: 1s linear;
}
.master_play .vol .dot{
    position: absolute;
    width: 5px;
    height: 5px;
    background: goldenrod;
    border-radius: 50%;
    left: 100%;
    top: -1px;
    transition: 1s linear;
}
.master_play .vol .dot::before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 1px solid goldenrod;
    border-radius: 50%;
    left: -6px;
    top: -6px;
    box-shadow: inset 0px 0px 3px goldenrod;
}

@media(max-width: 768px) and (orientation: landscape){
    #landscape{
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    background-image: url(../img/fondo.jpg);
    z-index: 990000;
    width: 100%;
    height: 100vh;
    text-shadow: -1px -2px 1px black;
    color: #e5e5e5;
    text-align: center;
    align-items: center;
    justify-content: center;
    }
}

@media (max-width: 359px){
    .song_side{
     margin-top: .0625rem;
     height: 90%;
    }
    h1{
        font-size: 1.125rem;
    }
    .song_side .text_app {
    margin: 5px auto 0;
    font-size: 1rem;
	background: -webkit-linear-gradient(to bottom, #000, rgba(0,0,0,.5), #000); 
    background: linear-gradient(to bottom, #000, rgba(0,0,0,.5), #000);
    }
    .song_side .text_app p {
     width: 98%;
     font-size: .875rem;
    }
    .apk {
     padding: .03125rem .125rem;
    }
    .song_side .popular_song .h4{
     font-size: 1rem;
    }
    .menu_side{
    margin-bottom: 1rem;
    max-width: 25rem;
    }
    .menu_side .cover{
    position: relative;
    max-width: 25rem;
    padding-top: .625rem;
    }
    .menu_side .menu_song li img{
        width: 2rem;
        height: 2rem;
    }
    .menu_side .menu_song li h5{
        font-size: .875rem;
        margin-left: .5rem;
    }
    .menu_side .menu_song li h5 .subtitle{
        font-size: .75rem;
    }
    .master_play{
    margin: .75rem auto 0;
    width: 98%;
    max-width: 24rem;
    height: auto;
    border-top: .125rem solid rgba(225,225,225,.25);
    border-top-left-radius: .46875rem;
    border-top-right-radius: .46875rem;
    padding: .25rem;
    filter: contrast(1);
    }
    .master_play .wave {
    margin: .5rem .25rem .25rem;
    }
    .master_play img {
    margin: .5rem .25rem .25rem;
    width: 1.75rem;
    height: 1.75rem;
    }
    .master_play h5 {
    width: 100%;
    max-width: 10rem;
    margin: .5rem .25rem .25rem;
    }
    .master_play h5 .subtitle {
    color: #a2a6a6;
    }
.master_play .bar .dot::before{
    display: none;
}
    .master_play span {
    /*margin: .75rem auto .5rem .1rem;
    padding-left: .25rem;
    padding-right: .25rem;*/
        display: none;
    }
    .master_play #currentStart{/*
    margin: .75rem 0 .5rem;*/
        display: none;
    }
    .master_play .bar{
        display: none
    }
    .master_play .vol{
        display: none
    }
    .master_play .icon{
    width: 100%;
    max-width: 100%;
    margin: auto;
    font-size: 2.5rem;
    padding: 0;
    }
    .menu_side .menu_song {
    margin-top: 10px;
    }
    .master_play .vol .bi{
        top: -.95rem;
        left: -1.625rem;
    }
    .master_play .vol{
        margin-right: 1rem;
    }
}

@media (max-width: 599px) and (min-width: 360px){
    .song_side{
     margin-top: .0625rem;
     height: 90%;
    }
    h1{
        font-size: 1.375rem;
    }
    .song_side .text_app {
    margin: auto;
    width: 98%;
    font-size: 1.25rem;
    background: linear-gradient(to bottom, #010a09, #031412, #041f1b, #052924, #07332d, #083d36, #07332d, #052924, #041f1b, #031412, #010a09);
    }
    .song_side .text_app p {
     width: 98%;
     font-size: 1rem;
    }
    .menu_side{
    margin-bottom: .75rem;
    max-width: 100%;
    }
    .menu_side .cover{
        margin: auto;
    position: relative;
        width: 100%;
    max-width: 98%;
    padding-top: .625rem;
    }
    .menu_side .menu_song li h5{
        font-size: .9375rem;
        margin-left: .5rem;
    }
    .menu_side .menu_song li h5 .subtitle{
        font-size: .8125rem;
    }
    .master_play{
    margin: .5rem auto 0;
    width: 98%;
    max-width: 100%;
    height: 5.75rem;
    border-top: .125rem solid rgba(225,225,225,.25);
    border-top-left-radius: .3125rem;
    border-top-right-radius: .3125rem;
    padding: .25rem;
    filter: contrast(1);
    }
    .master_play .wave {
    margin: 1rem .5rem .25rem;
    }
    .master_play img {
    margin: 1rem .5rem .25rem;
    width: 1.75rem;
    height: 1.75rem;
    }
    .master_play h5 {
    width: 100%;
    max-width: 12rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: auto;
    font-size: .875rem;
    }
    .master_play h5 .subtitle {
    font-size: .75rem;
    }
    .master_play span {
    /*margin: 1.25rem auto .5rem .1rem;
    padding-left: .25rem;
    padding-right: .25rem;*/
        display: none;
    }
    .master_play #currentStart{
    /*margin: 1.25rem 0 .5rem;*/
        display: none;
    }
    .master_play .bar{
    /*margin: 1.25rem .15625rem .75rem;
    width: 42.5%;
    max-width: 200px;*/
        display: none
    }
    .master_play .vol{
    /*margin: 1.25rem .78125rem .75rem .78125rem;
    width: 17%;*/
        display: none
    }
    .master_play .icon{
    width: 100%;
    max-width: 100%;
    margin: 0 auto .75rem;
    font-size: 2.5rem;
    padding: 0;
    }
    .menu_side .menu_song {
    margin-top: 10px;
    }
    .master_play .vol .bi{
        top: -.75rem;
        left: -1.625rem;
    }
    .master_play .vol{
        margin-right: 1rem;
    }
}

@media (max-width: 700px) and (min-width: 600px){
    .song_side{
     margin-top: .625rem;
     height: auto;
    }
    h1{
        font-size: 1.125rem;
    }
    .song_side .text_app p {
     width: 98%;
     font-size: 1rem;
    }
    .menu_side .cover{
    position: relative;
    max-width: 100%;
    }
    .menu_side{
    max-width: 100%;
    position: relative;
    border-bottom: .032rem solid rgba(255,255,255,.15);
    }
    .menu_side .menu_song li h5{
        font-size: 1rem;
    }
    .menu_side .menu_song li h5 .subtitle{
        font-size: 80%;
    }
    .master_play{
    margin: auto;
    width: 98%;
    height: 5.75rem;
    border-top: .0625rem solid rgba(255,255,255,.25);
    }
    .master_play .wave {
    margin-left: .3125rem;
    margin-right: 0;
    }
    .master_play h5 {
    width: 180px;
    margin-left: 10px;
    line-height: 15px;
    }
    .master_play span {
    display: none;
    }
    .master_play #currentStart{
    display: none;
    }
    .master_play .bar{
    display: none;
    }
    .master_play .icon{
    font-size: 1.5rem;
    padding: 0;
    }
    .menu_side .menu_song {
    margin-top: 0;
    }
}

@media (max-width: 949px) and (min-width: 701px){
    .song_side{
     margin-top: 0rem;
     height: auto;
    }
    h1{
        font-size: 1.375rem;
    }
    .song_side .text_app {
    margin: auto;
    font-size: 1.25rem;
    background: -webkit-linear-gradient(to top, #181716, #544e44, #181716); 
    background: linear-gradient(to top, black, #181716, #544e44, #181716, black);
    }
    .song_side .text_app p {
     width: 98%;
     font-size: 1rem;
    }
    .menu_side{
    margin-bottom: .75rem;
    max-width: 30.5rem;
    }
    .menu_side .cover{
    position: relative;
    max-width: 100%;
    }
    .menu_side .menu_song li h5{
        font-size: .6875rem;
    }
    .menu_side .menu_song li h5 .subtitle{
        font-size: .5625rem;
    }
    .master_play{
    margin: .3125rem auto 0;
    width: 98%;
    height: 3rem;
    }
    .master_play .wave {
    margin-left: 5px;
    margin-right: 0;
    }
    .master_play h5 {
    width: 180px;
    margin-left: 10px;
    line-height: 15px;
    }
    .master_play span {
    display: none;
    }
    .master_play #currentStart{
    display: none;
    }
    .master_play .bar{
    display: none;
    }
    .master_play .icon{
    font-size: 1.25rem;
    padding: 0;
    }
    .menu_side .menu_song {
    margin-top: 0;
    }
}

@media (max-width: 1199px) and (min-width: 950px){
    .song_side{
     margin-top: 0;
     height: 96%;
    }
    h1{
        font-size: 1.25rem;
    }
    .song_side .text_app {
    margin: auto;
    width: 98%;
    font-size: 1.25rem;
    background: -webkit-linear-gradient(to bottom, #12060b, #951f33, #12060b); 
    background: linear-gradient(to bottom, #000, #12060b, #400d16, #12060b, #000);
    }
    .song_side .text_app p {
     width: 98%;
     font-size: 1rem;
    }
    .menu_side{
    max-width: 30.5rem;
    position: relative;
    border-bottom: .032rem solid rgba(255,255,255,.15);
    }
    .menu_side .cover{
    position: fixed;
    width: 34%;
    max-width: 26rem;
    }
    .menu_side .menu_song {
    margin-top: 10rem;
    }
    .menu_side .menu_song li h5{
    font-size: .875rem;
    }
    .menu_side .menu_song li h5 .subtitle{
    font-size: .75rem;
    }
    .master_play{
    margin: .625rem auto 0;
    width: 100%;
    height: 6rem;
    }
    .master_play .wave {
    margin-left: .3125rem;
    margin-right: 0;
    }
    .master_play h5 {
    width: 180px;
    margin-left: 10px;
    line-height: 15px;
    }
    .master_play .bar{
    width: 25%;
    }
    .master_play .icon{
    font-size: 1.5rem;
    padding: 0;
    }
}

@media (max-width: 1359px) and (min-width: 1200px){
    .menu_side .cover{
    max-width: 380px;
    position: fixed;
    }
    .menu_side .menu_song {
    margin-top: 9rem;
    }
}

@media (max-width: 1520px) and (min-width: 1360px){
    .menu_side{
    max-width: 380px;    
    }
    .menu_side .cover{
    width: 100%;
    max-width: 370px;
    margin: -.325rem auto 0;
    position: fixed;
    }
    .menu_side .menu_song {
    margin-top: 9rem;
    }
}

@media (max-width: 1680px) and (min-width: 1521px){
    .menu_side{
    max-width: 440px;    
    }
    .menu_side .cover{
    width: 440px;
        max-width: 27%;
    position: fixed;
    }
    .menu_side .menu_song {
    margin-top: 10rem;
    }
}

@media (max-width: 1900px) and (min-width: 1681px){
    .menu_side{
    max-width: 440px;    
    }
    .menu_side .cover{
    width: 440px;
        max-width: 27%;
    position: fixed;
    }
    .menu_side .menu_song {
    margin-top: 10.5rem;
    }
}

@media only screen and (min-width: 1901px){
    .menu_side{
    max-width: 440px;    
    }
    .menu_side .cover{
    width: 440px;
        max-width: 27%;
    position: fixed;
    }
    .menu_side .menu_song {
    margin-top: 10.5rem;
    }
}