.audiojs {
  position: relative;
  width: 100%;
  padding: 25px 40px 0 60px;
  margin: 0 auto;
  height: 50px;
  background: #363636;
  font-family: "Open Sans", sans-serif;
  font-size: 9px;
  letter-spacing: 0.8px;
  line-height: 20px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.audiojs .play-pause {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  margin: 0px;
  overflow: hidden; }

.audiojs p {
  display: none;
  position: relative;
  cursor: pointer;
  height: 28px;
  margin-top: 12px;
  color: white; }
  .audiojs p:hover {
    color: #e74c3c; }

.audiojs p:before {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -14px;
  line-height: 28px;
  font-size: 28px;
  width: 100%;
  text-align: center;
  font-family: 'FontAwesome';
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease; }

.audiojs .play {
  display: block; }

.audiojs .scrubber {
  position: relative;
  cursor: pointer;
  background: #282828;
  height: 4px;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.audiojs .progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  background: white;
  z-index: 1; }

.audiojs .progress:after {
  content: '';
  position: absolute;
  right: -10px;
  top: -3px;
  width: 10px;
  height: 10px;
  background: white;
  z-index: 5; }

.audiojs .loaded {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100% !important;
  background: black; }

.audiojs .time {
  color: white; }

.audiojs .error-message {
  position: absolute;
  left: 0;
  top: 42px;
  display: none;
  margin: 0px 10px;
  overflow: hidden;
  line-height: 36px;
  color: #e5e5e5;
  z-index: 1; }

.close-button {
  cursor: pointer;
  position: absolute;
  right: 0;
  margin-right: 10px;
  font-size: 24px;
  top: 0px;
  color: white;
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease; }
  .close-button:before {
    line-height: 50px; }
  .close-button:hover {
    color: #e74c3c; }

.audiojs .play:before {
  content: '\f0da '; }

.audiojs .loading:before {
  content: '\f110'; }

.audiojs .error:before {
  content: '\f00d'; }

.audiojs .pause:before {
  content: '\f04c';
  font-size: 14px; }

.playing .play, .playing .loading, .playing .error {
  display: none; }

.playing .pause {
  display: block; }

.loading .play, .loading .pause, .loading .error {
  display: none; }

.loading .loading {
  display: block; }

.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
  display: none; }

.error .error {
  display: block; }

.error .play-pause p {
  cursor: auto; }

.error .error-message {
  display: block; }