.player_demo_container {
  display: block;
  justify-content: flex-end;
  background-color: #282828;
}

.player__container {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  background-color: white;
  color: #282828;
  font-family: 'Open Sans', arial, 'Roboto', sans-serif;
}

.player__container.single-element {
  color: white;
  background: transparent;
  display: inline-flex;
}

.player__branding {
  height: 100%;
  margin-right: 1ex;
}

.player__branding__text {
  display: inline-flex;
  align-self: center;
  font-family: 'Futura Radio Regular';
  font-size: 2.5em;
  text-transform: uppercase;
  padding-left: .5em;
}

.player__content {
  display: flex;
  align-self: center;
  padding-right: 1ex;
  padding-left: 1ex;
  height: 100%;
}

.player__content.single-element {
  padding-left: 0;
  padding-right: 0;
  margin-left: -1rem;
}

.player__pad {
  width: .5ex;
}

.player__content img {
  height: 4em;
}

.player__control {
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: hidden;
  cursor: pointer;
}

.player__control > * {
  transition: margin-top .5s;
  transition: margin-bottom .5s;
}

.player__pause, .player__play {
  min-height: 100%;
  display: inline-flex;
}

.player__control > .player__pause {
  margin-top:    0%;
  margin-bottom: -100%;
}

.player__control > .player__play {
  margin-top:    0%;
  margin-bottom: 0%;
}

.player__content.playing .player__control > .player__pause {
  margin-bottom: 0%;
}

.player__content.playing .player__control > .player__play {
  margin-bottom: -100%;
}

.player__content.loading .player__play {
  animation: loading 2s infinite linear;
}


.player__nowplaying {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  min-width: 8em;
  min-height: 4vh;

  font-size: 4vh;
  font-style: italic;
  text-transform: lowercase;
}

.player__nowplaying.single-element {
  min-height: 1em;
}

.player__nowplaying--inner {
  width: 100%;
  position: relative;
}

.player__nowplaying--inner::before {
  content: '\00a0';
}

.player__currentshow {
  min-width: 100%;
  position: absolute;
  word-break: break-all;
  white-space: nowrap;
  vertical-align: middle;
  animation: marquee 15s cubic-bezier(0.6, 0.01, 0.8, 1.21) infinite;
}

@keyframes marquee {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0%);    }
  100% { transform: translateX(100%);  }
}

@keyframes loading {
  0%   { transform: rotateZ(0deg);   }
  100% { transform: rotateZ(359deg); }
}