/* audio controls*/
.story {
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background: rgb(171,255,171);
    text-align: center;
}
.story p{
text-align:center;
margin-top:12px;
margin-bottom:12px;
}
.audioplayer audio {
    width: 360px;
    display: block;
    margin-top:12px;
    margin-bottom:12px;
    margin: auto;
}
.divaudio {
  text-align: center;
  margin: 3px auto;
  width: 100%;
}
.divaudio p {
  color: blue;
  text-align: center;
  width: 100%;
  margin:0px;
}
.headphone{
    color:darkred;
    margin:0;
}
.subtitle-display {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
  width: 100%;
  background: #f9f9f9;
  /*padding: 10px;*/
  border-radius: 6px;
  min-height: 24px;
  color: #222;
  transition: opacity 0.4s ease;
  line-height: 1.6;
}

/* spoken words (so far) in red */
.spoken-word {
  color: red; /*#222;red;*/
}

/* replay message and animation */
.part-message {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-top: 2px;
  color: darkgray;
  transition: opacity 0.8s ease-in-out, color 0.8s ease-in-out;
}
.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards ease-in-out;
}
.fade-out {
  opacity: 1;
  animation: fadeOut 0.8s forwards ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5px); }
}

/* responsive */
@media (max-width: 768px) {
  .divaudio {
    width: 90%;
    max-width: 400px;
    margin: 6px auto;
    flex-direction: column;
    padding: 1px;
  }
  .subtitle-display {
    font-size: 14px;
  }
}
/*horizontal line to separate audio controls */
.hraudio{
    background:green;
    color:green;
}