.transcript-player #audiofile {
      width: 100%;
    }
   .transcript-player {
      height: 180px;
      display: flex;
      flex-direction: row;

          padding: 0.5em;
    margin: 0.5em;
    }


    .transcript-player audio {
      width: 100%;
    }

   .transcript-player  .stage {
      display: flex;
      flex: 1;
      flex-direction: column;
    }

   .transcript-player  h1 {
      margin: 0;
      font-size: 1.4em;
    }

   .transcript-player  .image-box {
      padding: 1em;
      flex: 0 0 200px;
      display: flex;
    background-color: #717171;
    }

   .transcript-player  img {
      width: 100%;
      cursor: pointer;
    }

   .transcript-player  .video {
      flex: 1;
      display: flex;
      width: 100%;
      position: relative;
    }
   .transcript-player  #subtitles {
      flex: 1;
        padding: 2rem 4rem;
      font-family: sans-serif;
      font-size: 18pt;      
      background: #251d17;
      color: #c8c8c8;
      display: flex;
      align-items: center;
    }

    .transcript-player .spin {
      animation: spinAnimation 20s linear infinite;
    }

    .transcript-player .subtitles {
      display: flex;
      align-items: center;
      padding: 0 2em;
      background: black;
      flex: 1;
      cursor: pointer;
    }

    @keyframes spinAnimation {
      from {transform:rotate(0deg);}
      to {transform:rotate(360deg);}
  }

    @keyframes flickerAnimation {
      0%   { opacity:1; }
      50%  { opacity:0.95; }
      100% { opacity:1; }
    }
   .transcript-player  .animate-flicker {
        animation: flickerAnimation .1s infinite;
    }

   .transcript-player  .paused {
      animation-play-state:paused;
    }

   .transcript-player  .overlay {
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(86,64,46,0) 0%,rgba(33,38,12,0.5) 50%,rgba(0,0,0,0.81) 81%,rgba(0,0,0,1) 100%);
    }

   .transcript-player  h1 {

    font-family: sans-serif;
    font-weight: 100;
    }

@media (max-width: 880px) {
    .transcript-player {
       height: auto;
       position: relative;
       
    }
    .transcript-player .stage {
       flex-direction: column-reverse;
    }

    .transcript-player .image-box {
    display: block;
    padding: 0;
    position: absolute;
    background: none;
    z-index: 100;
    left: -1em;
    top: 3em;
    width: 3em;
     }

    .transcript-player .subtitles {
        padding: 2em;
        min-height: 10em;
     }
}