.wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.music-container::after,
.music-container::before{
    box-sizing: unset!important;
}
.music-container {
    display: -webkit-box;
    display: flex;
    position: relative;
    width: 400px;
    height: 400px;
    box-shadow: 0 2px 4px -4px rgba(0, 0, 0, 0.4), 0 50px 45px -20px rgba(0, 0, 0, 0.2);
    padding: 0;
}
.music-container .flip-card {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}
.no-touch .music-container:hover .flip-card, .music-container.is-hovering .flip-card {
    -webkit-transform: rotateY(-60deg);
    transform: rotateY(-60deg);
}

.cover {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    pointer-events: none;
}
.cover img {
    height: 100%;
}
.cover .flip-card,
.cover .static-card {
    position: absolute;
    width: 50%;
    height: calc(100% - 14px);
    overflow: hidden;
    border: 7px solid #fff;
}
.cover .static-card {
    border-right: none;
}
.cover .flip-card {
    border-left: none;
    margin-left: 50%;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
    transition: transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
    transition: transform 0.5s cubic-bezier(0.45, 0, 0.55, 1), -webkit-transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}
.cover .flip-card:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    right: -20px;
    box-shadow: 29px 0px 52px 6px #bababa;
}
.cover .flip-card img {
    position: absolute;
    background-color: #fff;
    right: 0;
}

.controls {
    position: absolute;
    right: 0;
    width: 20%;
    height: 95%;
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    cursor: pointer;
}
.controls:after {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 20px 0px 37px -10px rgba(0, 0, 0, 0.75);
    pointer-events: none;
    -webkit-transition: width 0.5s cubic-bezier(0.45, 0, 0.55, 1);
    transition: width 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}
.controls input[type="radio"] {
    position: absolute;
    left: -1000px;
}
.controls label {
    -webkit-box-flex: 1;
    flex-grow: 1;
    display: block;
    width: 100%;
    border-top: 1px #e6e6e6 solid;
    border-bottom: 1px #9c9c9c solid;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #dcdcdc;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFDCDCDC', endColorstr='#FFF8F8F6');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZGNkYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, left bottom, right top, from(#dcdcdc), to(#f8f8f6));
    background-image: linear-gradient(to right top, #dcdcdc 0%, #f8f8f6 100%);
}
.controls label span {
    background-repeat: no-repeat;
    background-position: 16px 42px;
    width: 80px;
    height: 125px;
    display: block;
    pointer-events: none;
}
.controls input:checked + label,
.controls label:active {
    background-color: #BCBCBC;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD5D5D5', endColorstr='#FFF8F8F6');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZDVkNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#f8f8f6));
    background-image: linear-gradient(to bottom, #d5d5d5 0%, #f8f8f6 100%);
    box-shadow: inset 0px 0px 10px 5px rgba(120, 120, 120, 0.2);
    border: 1px solid #fff;
}
.controls .lbl-btn-play span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABP0lEQVRoQ+2YwW3DMAxFX4ZNT7knE7QrNB0iWSKZIZ2g9/aYS4oPxECPpUSKFkCdZEAW+Pit729vmHxsJq+fAshWsBQoBTo7UI9QZwO7by8FgBOwA76629mwgYcCD+AbOABHQNfDhhfAUvAFeAFuowi8AVT3HXgDXp/zUJYIgKVgqbAFrpEEkQCqW+dB52IP/ESARAMsNcuh5FRnb4hRAEvdAnC13NEAAnG13AwAV8vNBHCx3GyAbstdC0Cz5a4JoMlyC8Axfeqt/f5Mtf9+a69FgebclA2g5KrUqvSquXlkAujbQWn101z1nxsyABQllE4/PM7PaIBpw9y0cbrJGi1nIvIRarbGbIBua8wEcLHGDABXaxwNMP2vRUvD3Nd6uJB7UZYNC8DSrYi1pUBEVy17lgKWbkWsLQUiumrZ8xeQiV4xsW8UvQAAAABJRU5ErkJggg==");
}
.controls .lbl-btn-pause span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAsElEQVRoQ+2YSw6AIAxEh9vqifS2utAF0YgtpBCS57raz0wHxqTJnzR5/aKB0QiCAAg0TgAKNQ6w+fUaBI5C1lXS/lPVImkrxLhqcgXfSWkABDL+QaHHMrLEku+CCYWg0PtEc7HCFcxBdk2Aq0TOOiiECqFCfk+EH8AP4Ae+9wY/gB8wqCoyiowio8jo2J+7BqHqF1LjyPpVZ8hEA4YhhYaAQOh4DR8HAcOQQkOmR+AEspRaMYlt9skAAAAASUVORK5CYII=");
}
.controls .lbl-btn-reset span {
    background-size: 42px 42px;
    background-position: 22px 42px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEAklEQVRoQ+3Zd+i2YxQH8M9rlZVSJJEyQmZSZiS7SJS9MqKQlS1EKCt7lKJk/sEfkhEZ2SN7ZKSsvyQze/V9u5+3n7vrfu7xPK+3X/3On899ru853+uc61znXM88s1zmzXL/zRFY1BGci8Bsj8C62BXbYH2shuUqUj/gM7yP5/EwPp824SEptAQOxgnYvIdD/1RErsf9+KvH2kbVvgT2wLVYc0Lj7+AkPDUhTucyuixuwmGTGpyxPhG5Dmfg96G4XSKwCh7FJkONtKx7Bnvj2yH4bQTi/LNYuyP43/iJ+ZHNYW7DH8G+hp3wfUc7C9TGGVimOnSbtoC+hLvxND6ckQ5LY0PsiEOwQQvO49i97+EeR+A2HDHG6Ks4pSLZZeP2xFVYZ4zyRbigC9hIp4lAdiJ1u0kuxfl9dwuJaorB4Q3Af1al+a2uJEoEFscHY3bq+MqJrjZKepfj9AaAJ7BzV/ASgVxSdzYAZOfP7Qreoncf9mvQ2RovdrFTIpBDuUVhcSrFlgPSpsmPFao2Y9WCQjbw0CEEUi4/bli4bY8D28V2dI7GrQXlH7ESfmsDqkcg+X1DYVGislUb2IDvS+HLytn68pyDnIexUieQen5gYcWJSBO2MOQWHFsAPg8XtxmsE3gDpYtrI7zbBjbw+wG4p7A2vx3Uhlkn8A1WrC1K25tb9Y82sJbv22PJgk4uttwNdcldcHLh91+RlJ4vdQLpCutG0mTVSQ3hsj/uQu6ZoZIONlG5d1EQiM3cMXdgsYEMzkQuwQXyf6bQyGjaiPRZfUkkzVIl/yNdD/HGyBQ1LTmqqv9d2+0HsU/pEu1aRjP+ZXqapqR03txhZngFO+DnkvE6geNwY0Hx5aqNmCaBYDVdnCM7n1Z2v24yXCewFj5pUN6ums6mTSKl8uoCaEp6mrqPxhks5eALDW3D61WTl5592nIarpgBmlqfSS6+jJUSgdTZ1OuSXIaz2kAHfj8badczV++LB7rgNA007yGvbiVZmH1Rpry86F3TxfnoNJWxXfDYGJCE+xz0Taflq/bgSvzS1cm+Z2Cknz49/XqTvIlTO76uZaOSFrlF18Aj2GsK/dXYd5s0cM9hs5adyuFO55hnwszSo3qdd6F0senrM13V35YyUua8JecHS9tNuHJFYtxTSN14UiNNV14g2iRRPqZNaWgKjdaFRELeFomhfhyJ24cubovACDfplFEzxqYlmTMuwYWTpFFXAiOnd6t6oj4pVSKc1iT/L+SlYyLpSyDGMpBkbo4DpeeXJodyLp6savxDE3k9Y/EQAjNtp7LkL6Y8uayH1ZFan17/O3yBt2f8xfTVtBwf4UxKYNr+9MabI9B7y6a8YC4CU97Q3nCzPgL/AjMxrTHE4jFOAAAAAElFTkSuQmCC");
}

.info {
    font-style: italic;
    color: #dddd80;
    margin-top: 70px;
}