.big_container {
	display: flex;
	/*min-width: 100vw;*/ /* old browser */
    min-width: 100svw;
    min-height: 100vh;
    color: #ffffff;
   	
   	/*background-image: url("../img/oscura_2.png");*/
   	/*background-image: url("../img/oscura.png");*/
   	background-image: url("../img/oscura.jpg");
    background-size: cover;
    background-attachment: fixed;
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-color: #303030;
  	  
}
.publi_izq, .publi_der {
	display: flex;
	justify-content: center;
}
.anuncio_izq, .anuncio_der {
	display: none;
	max-width: 60%;
	justify-content: center;
	text-align: center;
}
/* contenedor principal */
.container {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 360px;
	
	backdrop-filter: blur(10px);
  	  background-color: rgba(232, 212, 212, 0.2);
  	/*background-color: #303030;*/
}

/*
.funtify {
	
}
*/

/* fila 1 */

.fila_1 {
	display: flex;
}
.caja_duo {
	display: flex;
	width: 5rem;
	gap: 0.2rem;
}
.move {
	display: flex;
	flex-grow: 1;
}
.btn {
 	display: flex;
 	width: 2.5rem;
 	height: 2.5rem; 
 	justify-content: center;
 	align-items: center;
}
.pt_1 {
 	display: flex;
 	width: 50%;
 	height: 2.5rem;
 				/*font-size: 0.8rem;*/
 	justify-content: center;
 	align-items: center;
 	color: #fe98ce;
}

/* fila 2 */

.fila_2 {
	display: flex;
	height: 2.5rem;
	/*background-color: darkcyan;*/
}
.pt_2 {
 	display: flex;
 	/*justify-content: start;*/
 	align-items: center;
 /*margin-left: 1em;
 padding-left: 0.7em;*/
 	background-color: #737272;
 }
.logo {
	display: flex;
	/*width: 5rem;*/
	font-size: 1.3rem;
	margin-left: 0.3rem;
	margin-right: 0.8rem;
	/*background-color: darkgrey;*/
}
.servicio {
	display: flex;
	/*width: 4rem;*/
	margin-right: 0.3rem;
	/*background-color: darkorange;*/
}
.btn_servicio {
	display: flex;
	/*background-color: darksalmon;*/
}
.pt_3 {
 	display: flex;
 	flex-grow: 1;
 	flex-wrap: wrap;
 				/*font-size: 0.8rem;*/
 	justify-content: center;
 	align-items: center;
}
.grupo {
	display: flex;
}
.icono_bonus, .icono_audios {
	display: none;
	margin-right: 1rem;
}
.letras {
	margin-right: 0.4rem;
}
.funtis {

}
.audios {

}

/* container general audios-info  */

#ctn_general {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
}

/* container de audios */

.ctn_audios {
	display: flex;
	flex-direction: column;
	align-self: center;
	width: 96%;
	margin-top: 0.4rem;

	border-radius: 10px;
	border: 1px solid #b3d9fc;
	box-shadow: 0 0 15px 1px #b3d9fc;
}

/* votacion + reproductor 1280 -  fila 3 */

.fila_3 {
	display: flex;
	flex-wrap: wrap;
}

/* votacion */

.votacion {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 5rem;
	flex-direction: column;
}
.vota {
	display: flex;
	height: 2.5rem;
	justify-content: center;
	align-items: center;
}
.calificar {
	display: flex;
	height: 2.5rem;
	justify-content: space-evenly;
	align-items: center;
}

 /* reproductor 1280 */

.reproductor_1280 {
	display: none;
	width: 100%;
	height: 5rem;
}
/* bolas + btn back-next - fila 4 */

.fila_4 {
	display: flex;
	justify-content: space-evenly;
}
.bolas_izq, .bolas_der {
	display: flex;
	justify-content: center;
}
.back, .next {
	display: none;
	font-size: 4rem; /* quiza usar clamp para todo textos */
	justify-content: center;
	align-items: center;
}
#bolas {
  	display: grid;
  	grid-template-columns: minmax(360px, 480px);

  	/*grid-template-rows: 360px;*/
  	/*grid-template-rows: 420px;*/
  	grid-template-rows: 1fr;

  	justify-content: center;
}
.container_bolas {
  	display: grid;
  		height: 360px;
  		/*aspect-ratio: 1;*/
  	grid-template-columns: 1fr 1fr;
  	grid-template-rows: 1fr 1fr;
  	grid-template-areas: "C1 C3"
                       	 "C4 C2";
  	place-items: center;

  	/*background-color: darkgrey;*/
}

/* animaciones audios */

#idCaja_1 {
  	grid-area: C1;
  	z-index: 54;
  	/*animation: anima_audio 1500ms infinite;*/
}
#idCaja_2 {
  	grid-area: C2;
  	z-index: 53;
  	animation: move_2 1500ms linear alternate infinite;
}
#idCaja_3 {
  	grid-area: C3;
  	z-index: 52;
  	animation: move_3 2000ms linear alternate-reverse infinite;
}
#idCaja_4 {
  	grid-area: C4;
  	z-index: 51;
  	animation: move_4 2500ms linear infinite;
}
#anima_1 {
  	width: 76px;
  	border-radius: 50%;
  	border: solid 3px whitesmoke;
  	animation: scalar 0.5s linear both;
} 
#anima_2 {
  	width: 57px;
  	border-radius: 50%;
  	animation: scalar 0.5s linear both;
  	/*animation-delay: 250ms;*/
} 
#anima_3 {
  	width: 38px;
  	border-radius: 50%;
  	animation: scalar 0.5s linear both;
  	/*animation-delay: 500ms;*/
} 
#anima_4 {
  	width: 19px;
  	border-radius: 50%;
  	animation: scalar 0.5s linear both;
  	/*animation-delay: 750ms;*/
}
@keyframes anima_audio {
    
}
@keyframes move_2 {
    0% { transform: translateX(2px); } 
    25% { transform: translateY(-2px); } 
    50% { transform: translateX(-2px); }
    75% { transform: translateY(2px); }
    100% { transform: translateX(2px); }  
}
@keyframes move_3 {
     0% { transform: translateX(2px); } 
    25% { transform: translateY(-2px); } 
    50% { transform: translateX(-2px); }
    75% { transform: translateY(2px); }
    100% { transform: translateX(2px); }  
}
@keyframes move_4 {
    0% { transform: translateX(2px); } 
    25% { transform: translateY(-2px); } 
    50% { transform: translateX(-2px); }
    75% { transform: translateY(2px); }
    100% { transform: translateX(2px); }  
}
@keyframes scalar {
    100% { transform: scale(2); }
}

/* animaciones relleno de fondo */

.rellenos {
  	display: flex;
  	position: absolute;
  	justify-content: center;
  	align-items: center;
}
.relleno100 {
  	/*width: 32px;*/
  	width: 70px;
 	position: absolute;
  	z-index: 50;
}
.relleno1 {
  	/*width: 32px;*/
  	width: 70px;
 	position: absolute;
  	z-index: 50;
}
.relleno2 {
  	/*width: 26px;*/
  	width: 64px;
  	position: absolute;
  	z-index: 49;
}
.relleno3 {
  	/*width: 20px;*/
  	width: 58px;
  	position: absolute;
  	z-index: 48;
}
.relleno4 {
  	/*width: 14px;*/
  	width: 52px;
  	position: absolute;
  	z-index: 47;
}
.relleno5 {
  	/*width: 8px;*/
  	width: 46px;
  	position: absolute;
  	z-index: 46;
}
.ani_1 {
  	border-radius: 50%;
  	animation: ele5 45s both infinite;
}
.ani_2 {
  	border-radius: 50%;
  	animation: ele6 45s both infinite;
  	animation-delay: 12s;
}
.ani_3 {
  	border-radius: 50%;
  	animation: ele7 45s both infinite;
  	animation-delay: 14s;
}
.ani_4 {
  	border-radius: 50%;
  	animation: ele8 45s both infinite;
  	animation-delay: 22s;
}
.ani_5 {
  	border-radius: 50%;
  	animation: ele9 45s both infinite;
  	animation-delay: 25s;
}
@keyframes ele5 {
    0% { transform: translate(0px,0px); }
   10% { transform: translate(60px,60px); }
   20% { transform: translate(35px,105px); }
   35% { transform: translate(0px,141px); }
   75% { transform: translate(-141px,0px); }
  100% { transform: translate(0px,0px); }
}
@keyframes ele6 {
    0% { transform: translate(0px,0px); }
   10% { transform: translate(-70px,-70px); }
   25% { transform: translate(0px,-141px); }
   55% { transform: translate(141px,0px); }
   75% { transform: translate(60px,0px); }
  100% { transform: translate(0px,0px); }
}
@keyframes ele7 {
    0% { transform: translate(0px,0px); }
    5% { transform: translate(70px,-70px); }
   30% { transform: translate(141px,0px); }
   45% { transform: translate(0px,141px); }
   95% { transform: translate(0px,70px); }
   100% { transform: translate(0px,0px); }
}
@keyframes ele8 {
    0% { transform: translate(0px,0px); }
   20% { transform: translate(-70px,70px); }
   50% { transform: translate(-141px,0px); }
   75% { transform: translate(0px,-141px); }
   80% { transform: translate(0px,-70px); }
  100% { transform: translate(0px,0px); }
}
@keyframes ele9 {
    0% { transform: translate(0px,0px); }
   25% { transform: translate(-50px,-110px); }
   40% { transform: translate(-120px,-30px); }
   70% { transform: translate(70px,-70px); }
   95% { transform: translate(0px,141px); }
  100% { transform: translate(0px,0px); }
}

/* reproductor - fila 5 */

.reproductor {
	display: flex;
	width: 94%;
	height: 2.5rem;
	align-self: center;
	margin-bottom: 0.4rem;
}
.abuso, .reiniciar, .pausar, .reanudar, .filtrar {
	display: flex;
	width: 20%;
	justify-content: center;
	align-items: center;
}

/* grabacion - fila 6 */

.grabacion {
	display: flex;
	width: 94%;
	height: 3.5rem;
	align-self: center;
	/*justify-content: space-evenly;*/
	border-radius: 10px;
	border: 1px solid #ff8bc9;
	box-shadow: 0 0 15px 1px #ff8bc9;
	margin-bottom: 0.8rem;
}
.eliminar, .revisar, .segundos, .grabar, .enviar {
	display: flex;
	width: 20%;
	justify-content: center;
	align-items: center;
}

/* container de info */


.ctn_info {
	display: flex;
	flex-direction: column;
	align-self: center;
	width: 96%;
	height: 3rem;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	margin-top: 1rem;
	margin-bottom: 1rem;

	border-radius: 10px;
	border: 1px solid #b3d9fc;
	box-shadow: 0 0 15px 1px #b3d9fc;
}


/* responsive - media queries */

@media screen and (min-width: 768px) {
	body {
		font-size: 1rem;
	}
	/* anuncios laterales */
	.publi_izq, .publi_der {
		max-width: 12.5%;
	}
	.anuncio_izq, .anuncio_der {
      	display: flex;
      	visibility: hidden; /* anuncios ocupan pero no son visibles */
  	}
  	/* contenedor principal */
  	.container {
  		width: 75%; /* 576 px - -> */
  	}
  	/* boton atras-adelante audios */
  	.back, .next {
  		display: flex;
  	}
  	.icono_bonus, .icono_audios {
  		display: flex;
  	}
  	.letras {
  		margin-right: 1rem;
  	}
}
@media screen and (min-width: 960px) {
	/* anuncios laterales */
	.publi_izq, .publi_der {
		max-width: 17.5%;
	}
	.anuncio_izq, .anuncio_der {
      	display: flex;
      	/*visibility: visible;*/ /* descomentar para mostrar anuncios */
  	}
  	/* contenedor principal */
  	.container {
  		width: 65%; /* 624 px - -> */
  	}
} 
@media screen and (min-width: 1280px) {
	/* anuncios laterales */
	.publi_izq, .publi_der {
		max-width: 21.87%;
	}
	/* contenedor principal */
  	.container {
  		width: 56.25%; /* 720 px - -> */
  	}
  	.reproductor {
  		display: none;
  	}
  	.fila_3 {
  		flex-wrap: nowrap;
  	}
  	.reproductor_1280 {
  		display: flex;
  	}
  	.grabacion {
  		width: 70%;
  	}
} 




/* botones control de audio */

.botones {
  	display: grid;
  	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  	grid-template-rows: 1fr;
}
#btnBack, #btnNext {
  	background-color: darkorange; 
  	border-radius: 12px;
  	color: white;
  	padding: 15px 12px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
}
#btnPlay, #btnPause, #btnReset {
  	background-color: #04AA6D;
  	border-radius: 12px;
  	color: white;
  	padding: 15px 15px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
}



svg {
  background: #aaa;
}
path {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}