/*MOBILE*/

	.temas-centro{
		width:100%;
		display:flex;
		align-items: center;
		justify-content: center;
	}

	.temas-box{
		width:80%;
	}

	.btn{
		font-size:20px;
		border:solid 2px #000;
		display:inline-block;
		margin:20px 0;
		font-family:lobster;
		font-weight: 500;
		background: #cccccc;
	    background: -webkit-linear-gradient(#cccccc 0%, #7a7a7a 100%);
	    background: -o-linear-gradient(#cccccc 0%, #7a7a7a 100%);
	    background: linear-gradient(#cccccc 0%, #7a7a7a 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#7a7a7a',GradientType=0 );
	}

	.izq{
		border-top-left-radius:8px;
		border-bottom-left-radius:8px;
		width:35%;
		text-align:center;
		display:inline-block;
		margin-left: 15%;
		border:solid 2px #fff;
	}

	.der{
		border-top-right-radius:8px;
		border-bottom-right-radius:8px;
		width:35%;
		text-align:center;
		display:inline-block;
		border:solid 2px #fff;
	}

	.temas-box input[name=genero]{
		display:none;
	}

	input[id=originales]:checked ~ .izq{
		background: #6dcbce;
	    background: -webkit-linear-gradient(#6dcbce 0%, #0073a0 100%);
	    background: -o-linear-gradient(#6dcbce 0%, #0073a0 100%);
	    background: linear-gradient(#6dcbce 0%, #0073a0 100%);
	 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dcbce', endColorstr='#0073a0',GradientType=0 );
		color:#fff;
		box-shadow: 7px 7px #000;
	}

	input[id=covers]:checked ~ .der{
		background: #6dcbce;
	    background: -webkit-linear-gradient(#6dcbce 0%, #0073a0 100%);
	    background: -o-linear-gradient(#6dcbce 0%, #0073a0 100%);
	    background: linear-gradient(#6dcbce 0%, #0073a0 100%);
	 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dcbce', endColorstr='#0073a0',GradientType=0 );
		color:#fff;
		box-shadow: 7px 7px #000;
	}
	
	.originales{
		width:100%;
		height:1000px;
		display:none;
	}

	input[id=originales]:checked ~ .originales {
		display:block;
	}

	.covers{
		width:100%;
		height:1000px;
		display:none;
	}

	input[id=covers]:checked ~ .covers {
		display:block;
	}

	.title{
		height:25px;
		font-size: 25px;
		padding:20px;
		text-align: center;
		color: #fff;
		font-family: montserrat;
		font-weight:500;
		text-shadow: 4px 4px #000;
	}

	.audio-center{
		width:100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.audio-controller{
		width:85%;
		height:40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius:15px;
		margin-top:20px;
		border:solid 4px #2E2E2E;
		box-shadow: 10px 10px #454E53;
		background-color:#F2F2F2;
	}

	.content{
		width:100%;
		height:80%;
	}

	.band-img{
		width:100%;
		display:flex;
		justify-content: center;
		margin:20px 0;
	}

	.logo-banda{
		width: 75%;
		border:solid 2px #000;
	}

	.band-info{
		width:100%;
		display:flex;
		justify-content: center;
	}

	.band-info h1{
		font-size:25px;
		padding:0 13px;
		font-family:roboto;
		font-weight:900;
	}

	.band-info h3{
		padding:0 20px;
		font-family:roboto;
		font-weight:300;
		font-style: italic;
	}

	.controls{
		width:100%;
		margin-top:10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.play-btn{
		height:72px;
		width:72px;
	}

	.play-control{
		display:block;
		width:100%;
		height:100%;
		filter: invert(50%);
		cursor: pointer;
	}

	#btn-conex, #btn-todo, #btn-zomb, #btn-furia {
		display:none;
	}

	.duracion{
		width:100%;
		display: flex;
		justify-content: center;
	}

	.estilosrep {
		background-color:#F2F2F2;
	}

/*TABLET*/
@media only screen and (min-width:500px){
	.izq{
		height:30px;
		line-height: 30px;
		font-size:25px;
	}

	.der{
		height:30px;
		line-height: 30px;
		font-size:25px;
	}

	.title{
		font-size:35px;
	}

	.audio-center{
		margin-top:20px;
	}

	.audio-controller{
		width:60%;
		margin-top:40px;
	}

	.play-btn{
		width:80px;
		height:80px;
	}

	.logo-banda{
		width:80%;
	}

	.temas-centro label img{
		width:100%;
		height:100%;
	}
	
	.footer{
		margin-top:130px;
	}
}

/*TABLET 2*/	
@media only screen and (min-width:700px){
	
	.play-btn{
		width:90px;
		height:90px;
	}

	.audio-controller{
		width:45%;
	}
}

/*NOTEBOOK1*/
@media only screen and (min-width:1024px){

	.audio-center{
		flex-direction: row;
	}
	
	.audio-controller{
		width:30%;
		height:500px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin:0 40px;
	}

	.originales{
		height:800px;
	}

	.covers{
		height:800px;
	}

	.content{
		height:90%;
	}

	.duracion{
		height:10%;
	}
}

/*AJUSTE REPRODUCTOR*/
@media only screen and (min-width:1250px){

	.audio-controller{
		height:600px;
	}

	.controls{
		margin-top:30px;
	}

	.play-btn{
		height:100px;
		width:100px;
	}
}

/*NOTEBOOK2*/
@media only screen and (min-width:1650px){

	.band-info h1{
		font-size: 35px;
	}

	.band-info h3{
		padding:0 13px;
		font-size:25px;
	}

	.play-btn{
		width:100px;
		height:100px;
		margin-top:30px;
	}

	.izq{
		margin-left:15%;
	}

	.audio-center{
		margin-top:40px;
	}

	.audio-controller{
		height:600px;
		width:25%;	
	}
}

/*PC*/
@media only screen and (min-width:1890px){
	
	.title{
		font-size:50px;
		margin-top:20px;
	}

	.audio-controller{
		width:25%;
		margin-top:50px;
		height:570px;
	}

	.logo-banda{
		width:75%;
	}

	.band-info h1{
		font-size: 35px;
	}

	.band-info h3{
		padding:0 20px;
		font-size:25px;
	}

	.controls{
		margin-top:0;
	}

	.play-btn{
		width:90px;
		height:90px;
		margin-top:0px;
	}

	.izq{
		height:35px;
		line-height: 35px;
		font-size:30px;
		margin-top:50px;
		width:30%;
		margin-left:20%;
	}

	.der{
		height:35px;
		line-height: 35px;
		font-size:30px;
		width:30%;
	}
}