.player {
    background: #F9F9F9;
    color: #000;
    min-height: 90px;
    display: block;
    position: relative;
    margin: 10px auto;
    width: 100%;
}
.player .left {
    position: absolute;
}

.player .left img,.player .left div#noimg{ 
    width: 80px;
    object-fit:scale-down;
    min-height: 80px;
    max-height: 80px;
    background-size: cover;
}

.player .right {
    margin-left: 80px;
}

.player .right .top {
    padding-left: 10px;
}

.player .right .top .title {
    font-size: 1.2em;
    font-weight: bold;
}

.player .right .bottom audio {
    height: 25px;
    width: 100%;
}

/*
record as vinyl css from
@see https://codepen.io/thebabydino/pen/HjJlL
by thebabydino
*/
.record {
    position: relative;
    /* margin: 19px auto; */
    width: 80px; height: 80px;
    border-radius: 50%;
    background: 
      linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,
      linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,
      repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
  }
  .record:after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -12px;
    border: solid 1px #d9a388;
    width: 22px; height: 22px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #da5b33,
      inset 0 0 0 7px #da5b33;
    background: #b5ac9a;
    content: '';
  }
  .record.on{
    animation: rotation 4s infinite linear;
  }
  @keyframes top-to-bottom{
    0%{top:-150px;}
    100%{top:0;}
   }
  @keyframes rotation {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
  }