#recortar {

  display: block;

  width: 40px;

  position: relative;

  overflow: hidden;

  height: 45px;

  top: 35rem;

  left: 63%;

}



#jp_audio_usastreams {

  position: relative;

  width: 33%;

  height: 1rem;

  top: -2.8rem;

  left: 45%;

}



#recortar2 {

  width: auto;

  position: relative;

  overflow: hidden;

  height: auto;

  top: 2rem;

}



#iframe {

  position: relative;

  width: 320px;

  height: 100px;

  transform: translate(5px, 0px);

}



body {

  font-family: "Poppins", sans-serif;

}



.rounded-circular-borders {

  border-top-left-radius: 35px;

  border-top-right-radius: 35px;

  border-bottom-left-radius: 35px;

  border-bottom-right-radius: 35px;

}



.rounded-circular-borders-2 {

  border-top-left-radius: 25px;

  border-top-right-radius: 25px;

}



.rounded-circular-borders3 {

  border-top-left-radius: 4px;

  border-top-right-radius: 4px;

  border-bottom-left-radius: 4px;

  border-bottom-right-radius: 4px;

}



.rounded-circular-borders-4 {

  border-top-left-radius: 11px;

  border-top-right-radius: 11px;

  border-bottom-left-radius: 11px;

  border-bottom-right-radius: 11px;

}



.rounded-circular-borders-5 {

  border-bottom-left-radius: 25px;

  border-bottom-right-radius: 25px;

}



.rounded-circular-borders-6 {

  border-top-left-radius: 8px;

  border-top-right-radius: 11px;

  border-bottom-left-radius: 8px;

  border-bottom-right-radius: 11px;

}



.card {

  overflow: hidden;

  position: relative;

}



.content-container {

  width: 100%;

  transform: translateY(100%);

  transition: transform 1s ease-in-out;

  z-index: 1;

}



.content-container.active {

  transform: translateY(0);

}



.content-container.inactive1 {

  transform: translateY(-100%);

}



.content-container.inactive2 {

  transform: translateY(200%);

  opacity: 0;

}



.content-container-2 {

  position: relative;

  width: 100%;

  transform: translateY(100%);

  transition: transform 1s ease-in-out;

  z-index: 1;

}



.content-container-2.active {

  transform: translateY(0);

}



.content-container-2.inactive1 {

  transform: translateY(-100%);

}



.content-container-2.inactive2 {

  transform: translateY(200%);

  opacity: 0;

}



#divchat {

  position: relative;

  top: -16rem;

  left: 1rem;

}



#footer-container{

  position: relative;

  top: -15rem;

  left: 1rem;

}



#card-content{

  background-color: #00b1f4;

  height: 50rem;

}



.carousel-inner {

  background-image: url("img/Recss-Radio-MarcoSlides.png");

  background-position: center;

  background-repeat: no-repeat;

  width: 110%;

  margin-left: -1%;

}



#contendorcarrusel1 {

  background-image: url("img/Recss-Radio-OndasSlide.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 120%;

}



#contendorcarrusel2 {

  background-image: url("img/Recss-Radio-OndasSlide.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 120%;

}



#logo_radio1 {

  width: 50%;

  margin-left: 10%;

}



#logo_radio2 {

  width: 10%;

  animation: pulse 2s infinite;

  transform-origin: center;

}



#logo_radio3 {

  position: relative;

  width: 20%;

  left: -10px;

}



@keyframes pulse {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.2);

  }

  100% {

    transform: scale(1);

  }

}



#horario{

  font-size: large;

}



#cabecera2{

  display: none;

  background-color: #fca404;

}



#daleplay{

  background-image: url("img/Logo Radio II/RADIO-GuiaMusical-OFF.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}



#cancion{

  background-image: url("img/Logo Radio II/RADIO-GuiaMusical-ON.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}



#cancion_span {

  animation: desplazamiento 5s linear infinite; /* Modifica el valor de 5s para cambiar la duración de la animación */

  display: inline-block;

  width: 30rem;

  padding-left: 11%;

  padding-right: 11%;

  font-size: small;

}

/* Define la animación de desplazamiento */

@keyframes desplazamiento {

  0% { transform: translateX(-100%); }

  100% { transform: translateX(100%); }

}



/* Aplica la animación al contenedor del span */

#cancion_span_container {

  overflow: hidden; /* Oculta el desbordamiento del contenido */

}



#titulo_chat{

  background-color: #fca404; 

  font-size:13px

}



#input_quisiera_escuchar{

  background-color: #ebeef8; 

  font-size:x-small;

}

/*

#contenedor5, #contenedor5_2{

  width: 150px;

  animation: desplazamiento2 4s linear infinite;

  display: inline-block;

  width: 30rem;

  font-size: small;

}

@keyframes desplazamiento2 {

  0% { transform: translateY(150%); }

  100% { transform: translateY(-150%); }

}

*/

#img_locutor{

  width: 100%;

}



audio::-webkit-media-controls-mute-button{

  display: none !important;

}

audio::-webkit-media-controls-play-button{

  display: none !important;

}

audio::-webkit-media-controls-timeline-container{

  display: none !important;

}

audio::-webkit-media-controls-current-time-display{

  display: none !important;

}

audio::-webkit-media-controls-time-remaining-display{

  display: none !important;

}

audio::-webkit-media-controls-timeline{

  display: none !important;

}

audio::-webkit-media-controls-fullscreen-button{

  display: none !important;

}

audio::-webkit-media-controls-rewind-button{

  display: none !important;

}

audio::-webkit-media-controls-return-to-realtime-button{

  display: none !important;

}

audio::-webkit-media-controls-toggle-closed-captions-button{

  display: none !important;

}

audio::-webkit-media-controls-mute-button {

  display: block !important;

}

audio::-webkit-media-controls-volume-slider {

  display: block !important;

}

/*

.hidden {

  display: none;

}*/



/*tablets*/

@media screen and (max-width: 1050px) {

  #radio {

    width: 100%;

    height: 100%;

  }



  #contenedorradio {

    height: 600px;

  }



  #recortar {

    width: 40px;

    position: relative;

    overflow: hidden;

    height: 45px;

    top: 498px;

    left: 458px;

    z-index: 1;

  }



  #jp_audio_usastreams {

    position: relative;

    width: 222px;

    height: 40px;

    transform: translate(-5px, 0px);

    z-index: 2;

    top: -3rem;

    height: 2rem;

    left: 17rem;

  }



  #recortar2 {

    margin-left: 0%;

  }



  #contendorcarrusel1 {

    top: 160px;

  }



  #contendorcarrusel2 {

    top: 160px;

  }



  #divchat {

    top: -41rem;

  }

  

  #cabecera1{

    height: 50px;

  }

  

  #contenedor5{

    opacity: 0;

  }



  #cabecera2{

    display: block;

    height: 40px;

  }

  

  #contenedor4_2{

    width: 250px;

  }

  

  #contenedor5_2{

    width: auto;

  }

  

  #contenedor6_2{

    width: auto;

  }

  

  #icono_cabecera1{

    width: 33px;

  }

  

  #icono_cabecera2{

    width: 33px;

  }



  #icono_cabecera3{

    width: 33px;

  }

  

  #img_locutor{

    width: 50%;

  }

  

  .carousel-inner {

    background-size: cover;

  }

  

  #card-content{

    background-color: #00b1f4;

    height: 93rem;

  }

  

  #footer-container{

    position: relative;

    top: -8.5rem;

    left: 0rem;

  }

}



/*celulares*/

@media screen and (max-width: 799px) {

  #carouselExampleIndicators1 {

    display: none;

  }



  #contendorcarrusel2 {

    position: relative;

    top: 0px;

    margin-left: 0%;

  }



  #divchat {

    position: relative;

    top: -815px;

    margin-right: 0px;

  }



  #footer3 {

    top: -100px;

    font-size: 0.7rem;

  }



  #recortar2 {

    width: 300px;

    margin-left: -7%;

  }



  #lineas {

    margin-left: 0px;

  }



  #logo_radio1 {

    width: 59%;

  }



  #logo_radio2 {

    width: 12%;

    animation: pulse 2s infinite; /* Aplica la animación llamada "pulse" durante 1 segundo, de forma infinita */

    transform-origin: center;

  }



  #logo_radio3 {

    position: relative;

    width: 25%;

    left: -10px;

  }



  #content{

    height: 1400px;

  }



  #cabecera1{

    height: 40px;

  }

  

  #cabecera2{

    display: block;

    height: 40px;

  }



  #contenedor1{

    width: auto;

    margin-left: 5%;

  }

  

  #horario{

    font-size: x-small;

  }



  #contenedor2{

    width: auto;

  }

   

  #locutor{

    font-size: x-small;

  }



  #contenedor3{

    width: auto;

  }



  #contenedor5{

    opacity: 0;

  }

  

  #contenedor4_2{

    width: 135px;

  }

  

  #contenedor5_2{

    width: 97px;

  }

  

  #contenedor6_2{

    width: 60px;

  }



  #icono_cabecera1{

    width: 15px;

  }



  #icono_cabecera2{

    width: 15px;

  }



  #icono_cabecera3{

    width: 15px;

  }

  

  #contenedorradio_1 {

    margin-left: -5%;

  }

  

  #img_locutor{

    width: 50%;

  }

  

  #jp_audio_usastreams {

    position: relative;

    width: 222px;

    transform: translate(-5px, 0px);

    z-index: 2;

    top: -4.3rem;

    height: 1rem;

    left: 13rem;

  }



  #logo_radio1 {

    width: 50%;

  }



  #card-content{

    background-color: #00b1f4;

    height: 85rem;

  }

  

  #footer-container{

    position: relative;

    top: -11rem;

    left: 0rem;

  }

}

@media screen and (min-width: 2000px) {

  #recortar2{

    margin-left: 5%;

    top: 5rem;

    height: 3.5rem;

  }

  

  #horario{

    font-size: x-large;

  }

 

  #locutor{

    font-size: x-large;

  }

 

  #fecha{

    font-size: x-large;

  }

 

  #climaActual{

    font-size: x-large;

  }

 

  #horaActual{

    font-size: x-large;

  }



  .rounded-circular-borders {

    border-top-left-radius: 188px;

    border-top-right-radius: 188px;

    border-bottom-left-radius: 188px;

    border-bottom-right-radius: 188px;

  }

  

  #cancion_span {

    animation: desplazamiento 6s linear infinite; /* Modifica el valor de 5s para cambiar la duración de la animación */

    display: inline-block;

    width: 55rem;

    padding-left: 11%;

    padding-right: 11%;

    font-size: xx-large;

  }



  #flecha1,

  #flecha2,

  #daleplay_span {

    font-size: xx-large;

  }



  #daleplay{

    height: 52px;

  }



  #titulo_chat{

    font-size: 1.5rem;

  }



  #input_quisiera_escuchar{

    font-size:medium;

  }

  

  .rounded-circular-borders-4 {

    border-top-left-radius: 18px;

    border-top-right-radius: 18px;

    border-bottom-left-radius: 18px;

    border-bottom-right-radius: 18px;

  }



  .carousel-inner {

    background-size: cover;

  }

  

  #jp_audio_usastreams {

    position: relative;

    width: 100%;

    height: 3rem;

    top: 0;

    left: 0;

  }



  .audio-wrapper {

    position: relative;

    width: 17%;

    height: 3rem;

    top: -6.4rem;

    left: 82%;

    background-color: #f1f3f4;

  }



  #card-content{

    background-color: #00b1f4;

    height: 88rem;

  }

  

  #divchat {

    position: relative;

    top: -27rem;

    left: 1rem;

  }



  #footer-container{

    position: relative;

    top: -22rem;

    left: 1rem;

  }

  

}