img.cherie { float: right; clear: both; margin-top: 5px; margin-left: 5px; max-width: 100% }
img.tokio { float: left; margin-top: 5px; margin-right: 10px; max-width: 100% }
audio {display:none;margin:0;}
.playlist_container {margin:1em 0;}
.playlist_container h3 {cursor:pointer;margin:0; padding:0;}
.song {clear:left; margin:0; padding: .5em .5em .2em .5em}
.song:hover {background:#fafafa;}
.song:focus-within{background:#fafafa;}

.song input {margin: 0 1em .5em 0;float:left;padding:0;border-radius:6px;}
.song p {margin:0 0 1.5em 0;cursor:pointer;}
.song:after {
    content : ".";
    display : block;
    height : 0;
    clear : left;
    visibility : hidden;
}


@media only screen and (min-device-width:768px) {
/*	.playlist_container {margin-left:1em; padding:.5em; border: 4px solid #ddd;border-radius:10px;}*/
    audio {/*margin:0 -5px;*/border:0; background: none;}
/*	audio{max-width:75%;min-width:0;}*/
    audio:focus, audio:hover {border: 0; background: none;}
    .song p {font-size:1em;}
    .song input:hover {transform: scale(1.05);}
}
@media only screen and (max-device-width: 460px) {
    img.cherie { float: none; margin: 0; min-width: 100% }
    img.tokio { float: none; margin: 0; max-width: 100% }
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape) {
    audio{max-width:70%}
    .song { padding: 0}
    .song p {font-size:0.85em;}
}



@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
    {
    audio{max-width:40%;min-width:0}
    .song { padding: 0}
    .song p {font-size:0.85em;}
}


@media not all and (min-resolution:.001dpcm) { @media
{
    audio {border-radius:10px;}

}}