@charset "utf-8";

#esquerda { float: left; width: 62%; margin: 30px 3% 0 5%;}
#direita { float: left; width: 25%; margin: 30px 0 0;}

#popcd { position: fixed; width: 100%; height: 100%; background-color: rgb(0, 0, 0, 98%); z-index: 100000;}
#popcd .fundo { position: fixed; width: 100%; height: 100%; z-index: 2;}
#popcd .centro { margin: 0 auto; width: 700px; max-width: 90%; position: relative; z-index: 5;}
#popcd .conteudo { float: left; width: 90%; padding: 30px 5%; margin: 100px 0 0; background-color: rgb(255, 255, 255); position: relative;}
#popcd .conteudo .tab { float: left; width: 100%; display: none;}
#popcd .conteudo .tab.ativo { display: block;}
#popcd .conteudo .imagem { float: left; width: 40%;}
#popcd .conteudo .imagem img { float: left; width: 100%;}
#popcd .conteudo .texto { float: right; width: 55%;}
#popcd .conteudo .texto .nome { float: left; width: 100%;}
#popcd .conteudo .texto .nome h2 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 2em; line-height: 1;}
#popcd .conteudo .texto .play { float: left; width: 100%; padding: 20px 0; margin: 30px 0; background-color: rgb(80, 115, 143); text-transform: uppercase; text-align: center; font-size: 1.3em; color: rgb(255, 255, 255);}
#popcd .conteudo .texto .play b { padding: 10px 0 10px 45px; background-image: url('../imagens/icoPlay.png'); background-size: 40px; background-position: 0 50%; background-repeat: no-repeat;}
#popcd .conteudo .texto .play:hover { background-color: rgb(80, 95, 143);}
#popcd .seta { position: absolute; width: 110px; top: 50%; padding: 15px 0; margin: -20px 0 0; cursor: pointer; text-align: center; color: rgb(255, 255, 255); line-height: 0; background-position: 50%; background-repeat: no-repeat;}
#popcd .seta.left { left: -110px; background-image: url('../imagens/seta1.png'); background-position: 0 50%;}
#popcd .seta.right { right: -110px; background-image: url('../imagens/seta2.png'); background-position: 100% 50%;}
#popcd .x { position: absolute; width: 40px; top: 5px; right: 5px; padding: 20px 0; background-color: rgb(155, 159, 177); text-align: center; font-weight: bold; font-size: 1.4em; color: rgb(255, 255, 255); line-height: 0; cursor: pointer;}
#popcd .x:hover { background-color: rgb(155, 159, 135);}

#popimg { position: fixed; width: 100%; height: 100%; background-color:rgb(0, 0, 0); z-index: 1000000;}
#popimg .fundo { position: fixed; width: 100%; height: 100%; z-index: 2;}
#popimg .conteudo { position: absolute; width: 40%; height: 60%; top: 20%; left: 30%; z-index: 5;}
#popimg .conteudo .exibir { position: absolute; display: none;}
#popimg .conteudo .exibir img { float: left; width: 100%;}
#popimg .conteudo .exibir.pos1 { width: 40%; top: 50%; left: 0; margin: -20% 0 0; display: block; z-index: 1;}
#popimg .conteudo .exibir.pos2 { width: 70%; top: 50%; left: 50%; margin: -35% 0 0 -35%; display: block; z-index: 2;}
#popimg .conteudo .exibir.pos3 { width: 40%; top: 50%; right: 0; margin: -20% 0 0; display: block; z-index: 1;}
#popimg .conteudo .seta { position: absolute; width: 110px; top: 50%; padding: 15px 0; margin: -20px 0 0; cursor: pointer; text-align: center; color: rgb(255, 255, 255); line-height: 0; background-position: 50%; background-repeat: no-repeat;}
#popimg .conteudo .seta.left { left: -110px; background-image: url('../imagens/seta1.png'); background-position: 0 50%;}
#popimg .conteudo .seta.right { right: -110px; background-image: url('../imagens/seta2.png'); background-position: 100% 50%;}
#popimg .x { position: absolute; width: 200px; bottom: 10%; left: 50%; padding: 22px 0 20px; margin: 0 0 0 -100px; background-color: #EE0000; z-index: 5; text-align: center; font-weight: bold; font-size:1.2em; color:#FFFFFF; cursor:pointer; line-height: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#popimg .nome { position: absolute; width: 300px; top: 10%; left: 50%; padding: 22px 0 20px; margin: 0 0 0 -150px; z-index: 5; text-transform: uppercase; text-align: center; font-weight: bold; font-size:1.2em; color:#FFFFFF; line-height: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

#popanuncio { position: fixed; width: 100%; height: 100%; background-color: rgb(0, 0, 0, 98%); z-index: 100000;}
#popanuncio .fundo { position: fixed; width: 100%; height: 100%; z-index: 2;}
#popanuncio .centro { margin: 0 auto; width: 700px; max-width: 90%; position: relative; z-index: 5;}
#popanuncio .conteudo { float: left; width: 100%; margin: 100px 0 0; position: relative;}
#popanuncio .conteudo .tab { float: left; width: 100%; display: none;}
#popanuncio .conteudo .tab.ativo { display: block;}
#popanuncio .conteudo .imagem { float: left; width: 100%;}
#popanuncio .conteudo .imagem img { float: left; width: 100%;}
#popanuncio .seta { position: absolute; width: 110px; top: 50%; padding: 15px 0; margin: -20px 0 0; cursor: pointer; text-align: center; color: rgb(255, 255, 255); line-height: 0; background-position: 50%; background-repeat: no-repeat;}
#popanuncio .seta.left { left: -110px; background-image: url('../imagens/seta1.png'); background-position: 0 50%;}
#popanuncio .seta.right { right: -110px; background-image: url('../imagens/seta2.png'); background-position: 100% 50%;}
#popanuncio .x { position: absolute; width: 40px; top: 5px; right: 5px; padding: 20px 0; background-color: rgb(155, 159, 177); text-align: center; font-weight: bold; font-size: 1.4em; color: rgb(255, 255, 255); line-height: 0; cursor: pointer;}
#popanuncio .x:hover { background-color: rgb(155, 159, 135);}

#busca { float: left; width: 90%; margin: 25px 5% 20px; position: relative;}
#busca .campo { float: left; width: 95%; height: 60px; padding: 3px 2% 0; border: 1px solid #555555; outline: 0; font-size: 1.2em;}
#busca .botao { position: absolute; width: 65px; height: 65px; top: 0; right: 0; background-color: #000110; background-image: url(../imagens/icoBus.png); background-repeat: no-repeat; background-position: 50%; font-size: 0; border: 0; outline: 0;}
#busca .botao:hover { background-color: #111111;}

#recomendados { float: left; width: 90%; padding: 0 5% 25px;}
#recomendados .principal { float: left; width: 48.95%;}
#recomendados .demais { float: left; width: 23.5%; margin: 0 0 20px 2%;}
#recomendados .tab { float: left;}
#recomendados .tab .imagem { float: left; width: 100%; position: relative;}
#recomendados .tab .imagem img { float: left; width: 100%;}
#recomendados .obs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0, 5%);}
#recomendados .tab:hover .obs { background-color: rgb(0, 0, 0, 50%);}

#topcd { float: left; width: 100%;}
#topcd .tab { width: 32%;}
#topcd .tab.ta1 { float: left;}
#topcd .tab.ta2 { float: left; margin: 0 0 0 2%;}
#topcd .tab.ta3 { float: right;}
#topcd .tab.ta4 { float: left; margin: 20px 0 0;}
#topcd .tab.ta5 { float: left; margin: 20px 0 0 2%;}
#topcd .tab.ta6 { float: right; margin: 20px 0 0;}
#topcd .imagem { float: left; width: 100%; position: relative}
#topcd .imagem img { float: left; width: 100%;}
#topcd .texto { float: left; width: 100%; margin: 10px 0 0;}
#topcd .texto h2 { float: left; width: 100%; text-align: center; font-size: 1.1em; color: rgb(86, 93, 102);}
#topcd .obs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0, 5%);}
#topcd .tab:hover .obs { background-color: rgb(0, 0, 0, 50%);}
#topcd .linha3 { float: left; width: 100%; height: 1px;}

#slides { float: left; width: 100%; margin: 30px 0;}
#slides .tab { float: left; width: 100%;}
#slides .tab .imagem { float: left; width: 100%;}
#slides .tab .imagem img { float: left; width: 100%;}

#noticias { float: left; width: 100%; margin: 0 0 20px;}
#noticias .tab { width: 32%; position: relative;}
#noticias .tab.ta1 { float: left;}
#noticias .tab.ta2 { float: left; margin: 0 0 0 2%;}
#noticias .tab.ta3 { float: right;}
#noticias .imagem { float: left; width: 100%; position: relative}
#noticias .imagem img { float: left; width: 100%;}
#noticias .texto { float: left; width: 100%; margin: 10px 0 0;}
#noticias .texto h2 { float: left; width: 100%; text-align: center; font-size: 1em; color: rgb(86, 93, 102);}
#noticias .linha3 { float:left; width:100%; height: 1px;}
#noticias .obs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0, 5%);}
#noticias .tab:hover .obs { background-color: rgb(0, 0, 0, 50%);}

#paravoce { float: left; width: 100%;}
#paravoce .tab { float: left; width: 100%; margin: 0 0 11px;}
#paravoce .tab .imagem { float: left; width: 100%; position: relative;}
#paravoce .tab .imagem img { float: left; width: 100%;}
#paravoce .tab .botao { float: left; width: 100%; padding: 15px 0; margin: 10px 0 0; text-align: center;}
#paravoce .tab .botao b { padding: 12px 20px 10px; border: 2px solid; color: rgb(86, 93, 102);}
#paravoce .tab .botao:hover b { color: rgb(1, 3, 16);}
#paravoce .obs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0, 5%);}
#paravoce .tab:hover .obs { background-color: rgb(0, 0, 0, 50%);}

#mais { float: left; width: 100%; margin: 0 0 15px;}
#mais .baixados { float: left; width: 100%; margin: 20px 0 0;}
#mais .ouvidos { float: left; width: 100%; margin: 20px 0 0;}
#mais .tab { float: left; width: 100%; padding: 8px 0 6px; border-bottom: 1px solid rgb(220, 222, 233); background-color: rgb(244, 244, 245);}
#mais .tab .imagem { float: left; width: 20%; position: relative;}
#mais .tab .imagem img { float: left; width: 100%;}
#mais .tab .imagem em { position: absolute; width: 20px; top: 50%; left: -10px; padding: 3px 0 1px; margin: -14px 0 0; background-color: rgb(86, 93, 102); border: 4px solid rgb(244, 244, 245); color: #FFFFFF; font-style: normal; text-align: center; font-weight: bold; line-height: 1; font-size: 1em; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#mais .tab .texto { float: right; width: 75%;}
#mais .tab .texto h2 { float: left; width: 100%; margin: 10px 0 0; font-weight: bold; font-size: 1.1em; color: rgb(86, 93, 102);}
#mais .tab .texto h3 { float: left; width: 100%; margin: 2px 0 0; font-weight: normal; font-size: 0.9em; color: rgb(155, 159, 177);}
#mais .tab:hover { background-color: rgb(235, 235, 235);}
#mais .tab:hover .imagem em { border: 4px solid rgb(235, 235, 235);}

#videoslateral { float: left; width: 100%;}
#videoslateral .tab { float: left; width: 100%; margin: 0 0 20px;}
#videoslateral .tab .imagem { float: left; width: 100%; position: relative;}
#videoslateral .tab .imagem img { float: left; width: 100%;}
#videoslateral .tab .imagem em { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0, 50%); background-image: url('../imagens/icoVideo.png'); background-position: 50%; background-repeat: no-repeat;}
#videoslateral .tab .detalhes { float: left; width: 100%; margin: 10px 0 0;}
#videoslateral .tab .detalhes h3 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1em; color: rgb(100 100 100);}

@media only screen and (max-width: 1000px){
	#busca { margin: 25px 5%;}
}
@media only screen and (max-width: 900px){
	#popcd .seta { top: auto; bottom: -40px;}
	#popcd .seta.left { left: 0;}
	#popcd .seta.right { right: 0;}

	#popimg .conteudo { width: 60%; left: 20%;}

	#popanuncio .seta { top: auto; bottom: -40px;}
	#popanuncio .seta.left { left: 0;}
	#popanuncio .seta.right { right: 0;}
}
@media only screen and (max-width: 700px){
	#esquerda { width: 90%; margin: 10px 5%;}
	#direita { width: 90%; margin: 0 5%;}
	
	#recomendados .principal { float: left; width: 100%;}
	#recomendados .demais { float: left; width: 23%; margin: 1%;}
}
@media only screen and (max-width: 600px){
	#popcd .conteudo { margin: 50px 0 0;}
	#popcd .conteudo .imagem { width: 50%; margin: 0 25%;}
	#popcd .conteudo .texto { width: 100%; margin: 20px 0 0;}
	#popcd .conteudo .texto .nome h2 { text-align: center; font-size: 1.5em;}
	#popcd .conteudo .texto .baixar { float: left; width: 100%;}
	
	#popimg .conteudo { width: 80%; left: 10%;}
	#popimg .conteudo .seta { top: auto; bottom: 0;}
	#popimg .conteudo .seta.left { left: -20px;}
	#popimg .conteudo .seta.right { right: -20px;}

	#popanuncio .conteudo { margin: 50px 0 0;}
}