@charset "utf-8";

#paginacd { float: left; width: 90%; margin: 110px 5% 0; position: relative;}
#paginacd .capa { float: left; width: 20%;}
#paginacd .capa .img { float: left; width: 100%;}

#paginacd .texto { float: right; width: 78%;}
#paginacd .texto .nome { float: left; width: 100%; margin: 0 0 30px;}
#paginacd .texto .nome h2 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 2em; line-height: 1;}

#paginacd .texto .mod08 { float: left; width: 100%; margin: 0 0 15px;}
#paginacd .texto .cantor { float: left; padding: 3px 20px; margin: -5px 10px 0 0; background-color: #000110; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #FFFFFF;}

#paginacd .texto .mod08.semnun { display: flex; align-items: center;}
#paginacd .texto .mod08.semnun .baixar { margin: 0 0 0 10px;}
#paginacd .texto .mod08.semnun .perfil { margin: 0 0 0 10px;}

#paginacd .texto .reproduzir { float: left;}
#paginacd .texto .reproduzir b { padding: 11px 0 10px 35px; background-position: 0 50%; background-repeat: no-repeat;}
#paginacd .texto .reproduzir.play b { background-image: url('../imagens/reproduzir-play.png');}
#paginacd .texto .reproduzir.pause b { background-image: url('../imagens/reproduzir-pause.png');}
#paginacd .texto .reproduzir.continue b { background-image: url('../imagens/reproduzir-play.png');}
#paginacd .texto .reproduzir.pause { display: none;}
#paginacd .texto .reproduzir.continue { display: none;}
#paginacd .texto .reproduzir:hover { color: rgb(147, 40, 16);}

#paginacd .texto .nunplay { float: left; margin: 0 30px;}
#paginacd .texto .nunplay b { padding: 11px 0 10px 25px; background-image: url('../imagens/nunPlay.png'); background-position: 0 50%; background-repeat: no-repeat;}

#paginacd .texto .nundown { float: left;}
#paginacd .texto .nundown b { padding: 11px 0 10px 25px; background-image: url('../imagens/nunDown.png'); background-position: 0 50%; background-repeat: no-repeat;}

#paginacd .texto .baixar { float: left; padding: 20px; margin: 0 0 20px; background-color: rgb(220, 222, 233); text-align: center; font-size: 1.3em;}
#paginacd .texto .baixar b { padding: 0 0 0 35px; background-image: url('../imagens/nunDown.png'); background-position: 0 50%; background-repeat: no-repeat;}
#paginacd .texto .baixar:hover { background-color: #b7b9c3;}

#paginacd .perfil { float: left; padding: 20px; margin: 0 0 20px 10px; outline: 2px solid #000110; outline-offset: -2px; font-weight: bold; text-align: center; font-size: 1.3em;}
#paginacd .perfil.dek { display: block;}
#paginacd .perfil.mob { display: none;}
#paginacd .perfil:hover { background-color: #EEEEEE;}

#paginacd .compartilhar { display: flex; float: left; width: 100%; position: relative; z-index: 10;}
#paginacd .compartilhar .ico { width: 35px; height: 35px; margin: 2px; background-position: 50%; background-repeat: no-repeat;}
#paginacd .compartilhar .ico.whatsapp { background-image: url('../imagens/compartilhar-whatsapp.png?v1');}
#paginacd .compartilhar .ico.messenger { background-image: url('../imagens/compartilhar-messenger.png?v1');}
#paginacd .compartilhar .ico.facebook { background-image: url('../imagens/compartilhar-facebook.png?v1');}
#paginacd .compartilhar .ico.x { background-image: url('../imagens/compartilhar-x.png?v1');}
#paginacd .compartilhar .ico.link { background-image: url('../imagens/compartilhar-link.png?v1'); cursor: pointer;}
#paginacd .compartilhar .poplink { display: none; position: absolute; width: 250px; padding: 15px; top: 55px; left: 0; background-color: rgb(255 255 255); box-sizing: border-box; -webkit-box-shadow: 0px 0px 10px 1px rgb(5 5 5 / 30%); -moz-box-shadow: 0px 0px 10px 1px rgb(5 5 5 / 30%); box-shadow: 0px 0px 10px 1px rgb(5 5 5 / 30%); z-index: 20;}
#paginacd .compartilhar .poplink b { float: left; width: 100%;}
#paginacd .compartilhar .poplink input { float: left; width: 100%; height: 35px; box-sizing: border-box;}
#paginacd .compartilhar .poplink button { float: left; width: 100%; height: 35px; margin: 2px 0 0; background-color: #282938; font-size: 1.1em; color: rgb(255 255 255); cursor: pointer; border: 0;}
#paginacd .compartilhar .poplink button:hover { background-color: #494b68;}
#paginacd .compartilhar .poplink span { position: absolute; width: 24px; top: -12px; right: -12px; padding: 12px 0; background-color: rgb(200 40 40); text-align: center; color: rgb(255 255 255); line-height: 0; cursor: pointer;}
#paginacd .compartilhar .poplink span:hover {  background-color: rgb(200 10 10);}

#paginacd .baixarmob { display: none;}

#paginacd .separa { float: left; width: 100%; height: 1px; margin: 20px 0 0; background-color: rgb(0, 0, 0, 20%);}
#paginacd .linha { float: left; width: 100%; height: 1px;}
#paginacd .espaco { float: left; width: 100%; height: 30px;}

#paginacd .faixas { float: left; width: 65%;}
#paginacd .faixas .mp3 { float: left; width: 100%; padding: 22px 0 20px; position: relative; border-bottom: 1px solid rgb(0, 0, 0, 20%);}
#paginacd .faixas .mp3 .ouvir { float: left; width: 100%; font-size: 1em; color: rgb(0, 0, 0, 80%); line-height: 1; outline: 0;}
#paginacd .faixas .mp3 .baixar { position: absolute; top: 50%; right: 0; margin: -15px 0 0; padding: 2px; outline: 1px solid; outline-offset: -1px; -webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}
#paginacd .faixas .mp3 .baixar .nome { float: left; padding: 16px 0 14px; margin: 0 2px 0 35px; text-transform: uppercase; line-height: 0;}
#paginacd .faixas .mp3 .baixar .vet { position: absolute; width: 26px; height: 26px; top: 4px; left: 4px; background-color: #000110; background-image: url('../imagens/icoDown.png'); background-repeat: no-repeat; background-position: 45%; background-size: 16px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#paginacd .faixas .mp3 .baixar:hover { background-color: rgb(90 90 90 / 10%);}

#paginacd .faixas.naobaixar .mp3 .baixar { display: none;}

#paginacd .lateral { float: right; width: 30%; padding: 20px 0 0;}

#paginamusica { float: left; width: 90%; margin: 90px 5%; position: relative;}
#paginamusica .nome { float: left; width: 100%; margin: 0 0 10px;}
#paginamusica .nome h1 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2em;}
#paginamusica .nome h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em;}

#paginamusica .capa { float: left; width: 100%; text-align: center; font-size: 0;}
#paginamusica .capa .img { height: 200px;}

#paginamusica .nuns { display: flex; justify-content: center; float: left; width: 100%; margin: 10px 0 0;}
#paginamusica .nuns .nun { display: flex; padding: 10px;}
#paginamusica .nuns .nun b { padding: 11px 0 10px 25px; background-position: 0 50%; background-repeat: no-repeat;}
#paginamusica .nuns .nunplay b { background-image: url('../imagens/nunPlay.png');}
#paginamusica .nuns .nundown b { background-image: url('../imagens/nunDown.png');}

#paginamusica .bm { float: left; width: 100%; padding: 10px 0; margin: 5px 0; text-align: center;}

#paginamusica .reproduzir { padding: 10px; outline: 2px solid;}
#paginamusica .reproduzir b { padding: 10px 0 10px 35px; background-position: 0 50%; background-repeat: no-repeat;}
#paginamusica .reproduzir.play b { background-image: url('../imagens/reproduzir-play.png');}
#paginamusica .reproduzir.pause b { background-image: url('../imagens/reproduzir-pause.png');}
#paginamusica .reproduzir.continue b { background-image: url('../imagens/reproduzir-play.png');}
#paginamusica .reproduzir.pause { display: none;}
#paginamusica .reproduzir.continue { display: none;}

#paginamusica .baixar { padding: 10px; background-color: #000110; text-align: center; font-size: 1.3em; color: rgb(255, 255, 255);}
#paginamusica .baixar b { padding: 10px 0 10px 30px; background-image: url('../imagens/icoDown.png'); background-size: 20px; background-position: 0 50%; background-repeat: no-repeat;}
#paginamusica .baixar:hover { background-color: #282938;}

@media only screen and (max-width: 1000px){
  #paginacd { margin: 20px 5% 0;}
  #paginacd .faixas { width: 100%;}
  #paginacd .lateral { float: left; width: 100%;}
  #paginacd .capa { width: 30%;}
  #paginacd .texto { width: 68%;}
  #paginacd .texto .baixar.dek { display: none;}

  #paginacd .compartilhar { justify-content: center; padding: 14px 0 0; border-top: 1px solid rgb(0, 0, 0, 20%);}
  #paginacd .compartilhar .poplink { top: 62px;}

  #paginacd .perfil { width: 100%; padding: 8px 0; margin: 21px 0 0;}
  #paginacd .perfil.dek { display: none;}
  #paginacd .perfil.mob { display: block;}

  #paginacd .baixarmob { display: block; float: left; width: 100%; padding: 15px 0; margin: 5px 0 0; background-color: rgb(220, 222, 233); text-align: center; font-size: 1.3em;}
  #paginacd .baixarmob b { padding: 0 0 0 35px; background-image: url('../imagens/nunDown.png'); background-position: 0 50%; background-repeat: no-repeat;}
  #paginacd .baixarmob:hover { background-color: #b7b9c3;}

  #paginamusica { margin: 20px 5% 0;}
}
@media only screen and (max-width: 700px){
  #paginacd .capa { width: 37%;}
  #paginacd .texto { width: 61%;}
  #paginacd .texto .nome { margin: 0 0 15px;}
  #paginacd .texto .cantor { width: 100%; padding: 3px 0; margin: 0 0 15px; text-align: center;}
  #paginacd .texto .reproduzir { width: 100%; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid rgb(0, 0, 0, 20%); text-align: center;}
  #paginacd .texto .nunplay { width: 50%; margin: 0; text-align: center;}
  #paginacd .texto .nundown { width: 50%; text-align: center;}
}
@media only screen and (max-width: 500px){
  #paginacd { margin: 10px 5% 0;}
  #paginacd .capa { width: 60%; margin: 0 20%;}
  #paginacd .texto { width: 100%; margin: 15px 0 0;}
  #paginacd .texto .nome { margin: 0 0 10px;}
  #paginacd .texto .nome h2 { text-align: center; font-size: 1em;}
  #paginacd .texto .baixar { width: 100%; padding: 12px 0; margin: 0 0 15px;}
  #paginacd .texto .reproduzir { padding: 0 0 15px; margin: 15px 0;}
  #paginacd .separa { margin: 14px 0 0;}

  #paginamusica { margin: 10px 5% 0;}
}