@media (min-width: 1980px) and (orientation: Landscape){
    #player{
        position: relative;
        background-color: #000;
        padding-bottom: 20px;
        min-height: calc(100vh - var(--header-s1));
    }

    .player-cover{
        position: relative;
        height: calc(var(--max-w) / 2);
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .player-cover-shadow{
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: linear-gradient(to top, #000, transparent 80%), linear-gradient(to bottom, #000, transparent 80%);
    }

     .player-cover-background{
        position: absolute;
        width: 100%;
        top: calc((0px - var(--max-w) / 2) / 2);
        opacity: 0.7;
    }

    p.player-cover-name{
        position: absolute;
        color: #ffffffe3;
        line-height: 100px;
        font-size: 100px;
        top: calc((var(--max-w) / 2 - 100px) / 2);
        text-align: center;
        width: 100%;
        font-family: Roboto-Medium;
    }

    p.player-cover-type{
        position: absolute;
        font-family: Roboto-Regular;
        color: #a4a4a4;
        line-height: 50px;
        font-size: 50px;
        padding: 10px 0px 0px 0px;
        text-align: center;
        text-transform: uppercase;
        top: calc((var(--max-w) / 2 - 100px) / 2 + 100px);
        width: 100%;
    }

    .player-track {
        position: relative;
        width: calc(100% - 40px);
        margin: 0px 20px 20px 20px;
        height: 50px;
        background-color: #151515;
    }

    .player-track-play-pause {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 40px;
        height: 40px;
        border-radius: 0px;
        background-color: transparent;
        background-image: url("/photo/sys/play.png");
        background-repeat: no-repeat;
        background-size: 40px 40px;
        border: 0px;
    }  

    .player-track-progressbar{
        position: absolute;
        top: 0px;
        background-color: rgb(183, 0, 64);
        width: 0px;
        height: 50px;
        background-image: linear-gradient(to right, transparent calc(100% - 30px), #ff1265);
    }      

    .player-track-time{
        position: relative;
        left: 50px;
        height: 50px;
        width: calc(100% - 50px);
    }   

    .player-track-touchpad{
        position: absolute;
        top: 0px;
        left: 50px;
        height: 50px;
        width: calc(100% - 50px);
    }

    .player-track-name{        
        font-family: Roboto-Regular;
        font-size: 25px;
        position: absolute;
        color: white;
        top: calc((50px - 25px) / 2);
        left: 75px;
        text-shadow: black 0px 0px 2px;
        line-height: 25px;
    }  

    .player-track-timer{        
        font-family: Roboto-Regular;
        font-size: 24px;
        position: absolute;
        color: #4f4f4f;
        top: calc((50px - 24px) / 2);
        right: 16px;
        line-height: 24px;
    }  
}

@media (min-width: 720px) and (max-width: 1980px) and (orientation: Landscape){
    #player{
        background-color: #000;
        padding-bottom: 20px;
    }

    .player-cover{
        position: relative;
        height: calc(100vh - var(--header-s2));
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
        min-height: calc(640px - var(--header-s2));
    }

    .player-cover-shadow{
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: linear-gradient(to top, #000, transparent 80%), linear-gradient(to bottom, #000, transparent 80%);
    }

     .player-cover-background{
        position: absolute;
        width: 100%;
        top: calc((100% - 100vw) / 2);
        opacity: 0.7;
    }

    p.player-cover-name{
        position: absolute;
        color: #ffffffe3;
        line-height: calc(3vw + 20px);
        font-size: calc(3vw + 20px);
        top: max(calc((100vh - 120px - 3vw) / 2), calc((640px - 3vw - 20px - 100px) / 2));
        text-align: center;
        width: 100%;
        font-family: Roboto-Medium;
    }

    p.player-cover-type{
        position: absolute;
        font-family: Roboto-Regular;
        color: #a4a4a4;
        line-height: calc(2vw / 2 + 10px);
        font-size: calc(2vw / 2 + 10px);
        padding: 10px 0px 0px 0px;
        text-align: center;
        text-transform: uppercase;
        top: max(calc((100vh - 100px + 20px + 3vw) / 2), calc((640px + 3vw + 20px - 100px) / 2));
        width: 100%;
    }

    .player-track {
        position: relative;
        width: calc(100% - 10vw);
        margin: 0px 5vw 1vw 5vw;
        height: 50px;
        background-color: #151515;
    }

    .player-track-play-pause {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 40px;
        height: 40px;
        border-radius: 0px;
        background-color: transparent;
        background-image: url("/photo/sys/play.png");
        background-repeat: no-repeat;
        background-size: 40px 40px;
        border: 0px;
    }  

    .player-track-progressbar{
        position: absolute;
        top: 0px;
        background-color: rgb(183, 0, 64);
        width: 0px;
        height: 50px;
        background-image: linear-gradient(to right, transparent calc(100% - 30px), #ff1265);
    }      

    .player-track-time{
        position: relative;
        left: 50px;
        height: 50px;
        width: calc(100% - 50px);
    }   

    .player-track-touchpad{
        position: absolute;
        top: 0px;
        left: 50px;
        height: 50px;
        width: calc(100% - 50px);
    }

    .player-track-name{        
        font-family: Roboto-Regular;
        font-size: 25px;
        position: absolute;
        color: white;
        top: calc((50px - 25px) / 2);
        left: 75px;
        text-shadow: black 0px 0px 2px;
        line-height: 25px;
    }  

    .player-track-timer{        
        font-family: Roboto-Regular;
        font-size: 24px;
        position: absolute;
        color: #4f4f4f;
        top: calc((50px - 24px) / 2);
        right: 16px;
        line-height: 24px;
    }  
}

@media (max-width: 720px), (orientation: Portrait){
    #player{
        background-color: #000;
        padding-bottom: 1vw;
        min-height: calc(100vh - var(--header-s3));
    }

    .player-cover{
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 75vw;
    }

    .player-cover-shadow{
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: linear-gradient(to top, #000, transparent 80%), linear-gradient(to bottom, #000, transparent 80%);
    }

     .player-cover-background{
        position: absolute;
        opacity: 0.7;
        width: 100%;
        top: calc((75vw - 100vw) / 2);
        height: 100vw;
    }

    p.player-cover-name{
        position: absolute;
        color: #ffffffe3;
        line-height: 10vw;
        font-size: 10vw;
        top: calc((75vw - 10vw) / 2);
        text-align: center;
        width: 100%;
        font-family: Roboto-Medium;
    }

    p.player-cover-type{
        position: absolute;
        font-family: Roboto-Regular;
        color: #7b7b7b;
        line-height: 5vw;
        font-size: 5vw;
        text-align: center;
        text-transform: uppercase;
        top: calc((75vw - 10vw) / 2 + 12vw);
        width: 100%;
    }

    .player-track {
        position: relative;
        width: calc(96%);
        margin: 1vw 2% 2vw 2%;
        height: 8vw;
        background-color: #151515;
        padding-bottom: 0vw;
    }

    .player-track-play-pause {
        position: absolute;
        top: 1vw;
        left: 1vw;
        width: 6vw;
        height: 6vw;
        border-radius: 0px;
        background-color: transparent;
        background-image: url("/photo/sys/play.png");
        background-repeat: no-repeat;
        background-size: 6vw 6vw;
        border: 0px;
    }  

    .player-track-progressbar{
        position: absolute;
        background-color: rgb(183, 0, 64);
        top: 0px;
        left: 0px;
        width: 0px;
        height: 8vw;
        background-image: linear-gradient(to right, transparent calc(100% - 3vw), #ff1265);
    }    

    .player-track-time{
        position: relative;
        left: 8vw;
        height: 8vw;
        width: calc(100% - 8vw);
    }   

    .player-track-touchpad{
        position: absolute;
        top: 0px;
        left: 8vw;
        height: 8vw;
        width: calc(100% - 8vw);
    }

    .player-track-name{        
        font-family: Roboto-Regular;
        font-size: 4vw;
        position: absolute;
        color: white;
        top: calc((8vw - 4vw) / 2);
        left: 10vw;
        text-shadow: black 0px 0px calc(1vw / 5);
        line-height: 4vw;
    }

    .player-track-timer{        
        font-family: Roboto-Regular;
        font-size: 3vw;
        position: absolute;
        color: #4f4f4f;
        top: calc((8vw - 3vw) / 2);
        right: 3vw;
        line-height: 3vw;
    }    
}