*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  overflow: hidden; }

.container {
  width: 90%;
  margin: 0 auto; }

html {
  font-size: 16px; }
  @media screen and (max-width: 1400px) {
    html {
      font-size: 15.52px; } }
  @media screen and (max-width: 1200px) {
    html {
      font-size: 15.2px; } }
  @media screen and (max-width: 1024px) {
    html {
      font-size: 14.88px; } }
  @media screen and (max-width: 600px) {
    html {
      font-size: 14.88px; } }
  @media screen and (max-width: 600px) {
    html {
      font-size: 14.56px; } }
  @media screen and (max-width: 400px) {
    html {
      font-size: 14.4px; } }

body {
  font-size: 1rem;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-family: 'Poppins', sans-serif;
  color: #212121; }

.text-uppercase {
  text-transform: uppercase; }

.text-capitalize {
  text-transform: capitalize; }

.page-wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; }

.header {
  height: 175px;
  width: 100%;
  display: flex;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .header {
      height: 100px; } }
  .header__content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 1024px) {
      .header__content {
        margin-top: 2rem; } }
    @media screen and (max-width: 500px) {
      .header__content {
      margin-top: 2rem;
      justify-content: center;
    } }

  @media screen and (max-width: 600px) {
    .header .btn--header {
      display: none; } }
  .header__logo {
    margin-top: 2rem;
    width: 20rem;
    height: auto; }
    @media screen and (max-width: 1024px) {
      .header__logo {
        margin-top: .5rem;
        width: 18rem; } }
    @media screen and (max-width: 600px) {
      .header__logo {
        margin-top: 0;
        width: 12.5rem; } }

.btn--header {
  margin-top: 1.5rem;
  padding: 0; }
  @media screen and (max-width: 600px) {
    .btn--header {
      margin: 0 !important;
      padding: 0 !important; } }
  .btn--header svg {
    width: 5rem; }
  @media screen and (max-width: 1024px) {
    .btn--header {
      margin-top: 1rem; }
      .btn--header svg {
        width: 4rem; } }
  @media screen and (max-width: 600px) {
    .btn--header {
      margin-top: 0; }
      .btn--header svg {
        width: 3rem; } }

@keyframes scaleUpOnMount {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }

.modal-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.25);
  z-index: 999999; }
  .modal-wrapper:not(.shown) {
    display: none; }
  .modal-wrapper.shown .modal {
    animation: scaleUpOnMount .4s ease; }

.modal {
  display: flex;
  width: 80%;
  padding: 2rem 3rem;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }
  @media screen and (max-width: 600px) {
    .modal {
      width: 100%;
      height: 100%;
      border-radius: 0;
      box-shadow: none; } }
  .modal__media {
    width: 45%;
    min-width: 300px;
    display: flex;
    align-items: flex-end; }
    @media screen and (max-width: 1024px) {
      .modal__media {
        display: none; } }
    .modal__media img {
      width: 100%;
      height: auto; }
  .modal__main {
    width: 100%; }
  .modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  .modal__content {
    font-size: 1.25rem; }
    @media screen and (max-width: 1400px) {
      .modal__content {
        font-size: 1.15rem; } }
    @media screen and (max-width: 1200px) {
      .modal__content {
        font-size: 1.10rem; } }
    @media screen and (max-width: 767px) {
      .modal__content {
        font-size: 1.15rem; } }

section#rj-player {
  height: 100px;
  color: #fff;
  background-color: #4A8EDB;
  overflow: hidden; }
  @media screen and (max-width: 600px) {
    section#rj-player {
      height: 200px;
      background-color: transparent; } }
  section#rj-player .jp-no-solution {
    display: none; }
  section#rj-player .rjp-player-container {
    height: 100%; }
  section#rj-player .jp-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  section#rj-player .rj-player-controls,
  section#rj-player .rj-player-message,
  section#rj-player .rj-player-volume {
    display: flex;
    align-items: center;
    flex: 0 0 33.333333%; }
  @media screen and (max-width: 600px) {
    section#rj-player .rj-player-controls {
      order: 1;
      justify-content: center; } }
  section#rj-player .rj-player-message {
    flex: 33.333333%; }
    @media screen and (max-width: 600px) {
      section#rj-player .rj-player-message {
        order: 2; } }
  section#rj-player .rj-player-volume {
    justify-content: center; }
    @media screen and (max-width: 600px) {
      section#rj-player .rj-player-volume {
        order: 0;
        justify-content: flex-start; }
        section#rj-player .rj-player-volume .song-time {
          display: none; } }
  section#rj-player .rj-player-message {
    justify-content: flex-end; }
  section#rj-player .song-time {
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1rem;
    letter-spacing: 3px; }
    @media screen and (max-width: 600px) {
      section#rj-player .song-time {
        color: #000000;
        margin-right: 0; 
        font-size: 22px;
      } }
  section#rj-player .container {
    display: flex;
    height: 100px;
    justify-content: space-between; }
    @media screen and (max-width: 600px) {
      section#rj-player .container {
        height: 200px; } }
  section#rj-player .song-card {
    margin-left: 1rem;
    font-size: 1rem;
    width: 300px;
    text-align: left;
    line-height: 125% !important; }
    @media screen and (max-width: 1024px) {
      section#rj-player .song-card {
        display: none; } }
    section#rj-player .song-card__title {
      font-size: 1rem; }
    section#rj-player .song-card__song, section#rj-player .song-card__genre {
      display: block;
      font-size: .85rem;
      font-weight: 300; }
  section#rj-player .jp-controls__main {
    width: 75px; }
    @media screen and (max-width: 600px) {
      section#rj-player .jp-controls__main {
        width: auto;
        height: 75px; } }
  section#rj-player .jp-play {
    position: relative; }
    section#rj-player .jp-play .lds-ring {
      margin-top: -24px;
      display: none; }
      @media screen and (max-width: 600px) {
        section#rj-player .jp-play .lds-ring {
          margin-top: 0;
          margin-left: -15px;
          color: #4A8EDB; } }
  @media screen and (max-width: 600px) {
    section#rj-player .toggle-message,
    section#rj-player .jp-mute,
    section#rj-player .jp-unmute {
      margin-top: -25px; } }
  section#rj-player .player-loading .play-icon {
    display: none; }
  section#rj-player .player-loading .lds-ring {
    display: block; }
  section#rj-player svg {
    width: 60px;
    height: 60px;
    fill: #fff !important; }
    @media screen and (max-width: 600px) {
      section#rj-player svg {
        fill: #4A8EDB !important; } }

#rjp-chat {
  transform: translateX(100%);
  background: #fff;
  position: absolute;
  right: 0;
  bottom: 100px;
  height: 25rem;/*was 40*/
  transition: transform .3s ease;
  z-index: 9999999; }
  @media screen and (max-width: 600px) {
    #rjp-chat {
      width: 100vw;
      height: calc(100vh - 40px);
      bottom: 0 !important;
      top: 50px;/*was 40*/
    } }
  #rjp-chat.shown {
    transform: translateX(0%); }
    @media screen and (max-width: 600px) {
      #rjp-chat.shown iframe {
        width: 100% !important; }
      #rjp-chat.shown + #rjp-chat__header {
        display: flex; } }
  #rjp-chat iframe {
    height: 100%;
    display: block; }
  @media screen and (max-width: 767px) {
    #rjp-chat {
      bottom: 100px; } }

#rjp-chat__header {
  width: 100vw;
  background: #fff;
  position: absolute;
  top: 0;
  z-index: 9999999;
  display: none;
  height: 40px;
  align-items: center;
  justify-content: flex-end; }

.jp-controls__time-xs,
.jp-controls__menu-xs {
  display: none; }
  @media screen and (max-width: 600px) {
    .jp-controls__time-xs,
    .jp-controls__menu-xs {
      display: block; } }

@media screen and (max-width: 600px) {
  .jp-controls__time-xs {
    margin-bottom: 1rem;
   } }

.radio-action {
  cursor: pointer; }

.stream {
  margin-left: 2rem; }
  .stream__title {
    font-size: 30px; }
  .stream__description, .stream__time {
    display: block;
    font-weight: bold;
    margin-top: .3rem; }
  .stream__description {
    font-style: italic; }
/**/
@media screen and (max-width: 600px) {
  .stream {
    margin: auto;
  } }
@media screen and (max-width: 600px) {
  .stream__title {
    font-size: 20px; } }
@media screen and (max-width: 600px) {
  .stream__description, .stream__time {
    display: block;
    font-weight: bold;
    margin-top: .3rem;  } }
/**/
.btn {
  background: transparent;
  text-decoration: none;
  padding: .5rem 1rem;
  border: 1px solid #212121;
  cursor: pointer; }
  .btn:focus {
    outline: none; }

.lds-ring {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px; }

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent; }
  @media screen and (max-width: 600px) {
    .lds-ring div {
      border: 3px solid #4A8EDB;
      border-color: #4A8EDB transparent transparent transparent; } }

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s; }

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s; }

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s; }

@keyframes lds-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.btn--header {
  border: none; }
  .btn--header svg {
    width: 5rem;
    height: 5rem;
    fill: white;
    transform: scale(0.9);
    transition: all .2s ease; }
    .btn--header svg:hover {
      transform: scale(1);
      fill: #4A8EDB; }

.btn--stream {
  background-color: #ef5350;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  border: none;
  transition: all .2s ease;
  padding: .7rem 1.3rem;
  border-radius: .5rem; }
  .btn--stream:hover {
    background-color: #e53935; }
  .btn--stream:focus {
    box-shadow: #e53935 0px 7px 29px 0px; }

.btn--close {
  border: none;
  border-radius: 50%;
  padding: 10px 10px 5px 10px; }
  .btn--close:hover {
    background-color: #ef5350; }
    .btn--close:hover svg {
      fill: #fff; }
  .btn--close svg {
    width: 1rem;
    height: 1rem;
    fill: #ef5350;
    transition: all .2s ease; }

@media screen and (max-width: 767px) {
  .btn--stream{
    height: 50px;
    width: 100px; 
    font-size: 1rem;
} }
.content {
  width: 100%;
  height: calc(100vh - 175px - 100px);
  position: relative; }
  @media screen and (max-width: 767px) {
    .content {
      height: calc(100vh - 100px - 100px); } }
  @media screen and (max-width: 600px) {
    .content {
      height: calc(100vh - 100px - 200px); } }
  .content .container, .content__main {
    height: 100%; }
  .content__left {
    position: relative;
    z-index: 10; }
  .content__centered--bottom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    display: flex;
    align-items: flex-end;
    max-height: 90%; }
    @media screen and (max-width: 875px) {
      .content__centered--bottom {
        top: 50%;
        transform: translate(-50%, -50%); } }
    .content__centered--bottom img {
      height: 80%;
      width: auto; 
      width: 250px;
      height: 250px;
    }
      @media screen and (max-width: 875px) {
        .content__centered--bottom img {
          width: 100%;
          height: auto !important;
          object-fit: over; 
          margin-top: 80%;
        } }
      @media screen and (max-width: 767px) {
        .content__centered--bottom img {
          height: calc(100vh - 100px - 50px); } }
  .content__main {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100%; }
    @media screen and (max-width: 875px) {
      .content__main {
        flex-direction: column;
        align-items: stretch; 
        /*bottom: 0px;*/
        } }
    .content__main .btn--stream {
      margin-bottom: 1rem; }

  @media screen and (max-width: 600px) {
    #windowPlay {
    display: none !important;
  }
}

/*Scroll Animation*/
.scroll-left {
  height: 30px;	
  width: 1000px;
  position: absolute;
 }
 
 #idOff {
  bottom: 140px;
 }

 #trackInfoMob  {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 10px;
  text-align: center;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);	
  transform:translateX(100%);
  /* Apply animation to this element */	
  -moz-animation: scroll-left 10s linear infinite;
  -webkit-animation: scroll-left 10s linear infinite;
  animation: scroll-left 10s linear infinite;
  color: #000000;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-left {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
 }
 @-webkit-keyframes scroll-left {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
 }
 @keyframes scroll-left {
  0%   { 
  -moz-transform: translateX(100%); /* Browser bug fix */
  -webkit-transform: translateX(100%); /* Browser bug fix */
  transform: translateX(100%); 		
  }
  100% { 
  -moz-transform: translateX(-100%); /* Browser bug fix */
  -webkit-transform: translateX(-100%); /* Browser bug fix */
  transform: translateX(-100%); 
  }
 }