@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

#espacoplay { float: left; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 100;}

#play { float: left; width: 100%;}
#play *:focus { outline: none;}
#play button::-moz-focus-inner { border: 0;}
#play button::-moz-focus-inner { border: 0;}
#play button::-moz-focus-inner { border: 0;}

#play .video { position: absolute; right: 2%; width: 44%; bottom: 180px;}
#play .video img { display: none !important; border: 0;}
#play .video audio { display: none !important; border: 0;}
#play .video video { float: left; width: 100%;}
#play .video.minimiza { bottom: 80px;}

#play .controle { float: left; width: 100%;}
#play .controle .jp-interface { float: left; width: 100%; padding: 0 0 5px; background-color: #140C09; position: relative;}
#play .controle .jp-progress { float: left; width: 100%; height: 15px; margin: 0 0 5px; cursor: pointer; overflow: hidden;}
#play .controle .jp-progress .jp-seek-bar { float: left; height: 12px; background-color: #FF7D26;}
#play .controle .jp-progress .jp-play-bar { float: left; height: 12px; background-color: #690007;}
#play .controle .jp-title { float: left; width: 100%; padding: 7px 0; text-align: center; font-size: 0.8em; color: #FFFFFF; display: none; }
#play .controle .jp-current-time { position: absolute; top: 0; left: 2%; padding: 2px 5px 0; background-color: #140C09; line-height: 1; font-size: 0.7em; color: #FF7D26;}
#play .controle .jp-duration { position: absolute; top: 0; right: 2%; padding: 2px 5px 0; background-color: #140C09; line-height: 1; font-size: 0.7em; color: #FF7D26;}

#play .controle .chave { position: absolute; top: 35px; right: 2%; cursor: pointer;}
#play .controle .chave ico { float: left; width: 20px; height: 20px; background-repeat: no-repeat; background-position: 50%;}
#play .controle .chave strong { float: left; margin: 3px 0 0 3px; line-height: 1; font-size: 1em; color: #FF7D26;}
#play .controle .chave.abrirplay ico { background-image: url("../imagens/icoAbrir1.png");}
#play .controle .chave.fecharplay ico { background-image: url("../imagens/icoFechar1.png");}
#play .controle .chave:hover strong { color: #FFFFFF;}

#play .controle .holder { margin: 0 auto; width: 595px; position: relative;}
#play .controle .holder .volume { float: left; width: 167px; margin: 10px 0 0;}
#play .controle .holder .volume button { float: left; width: 30px; height: 30px; background-color: transparent; background-repeat: no-repeat; cursor: pointer; border: 0; font-size: 0; }
#play .controle .holder .volume .jp-mute { background-image: url("../imagens/icoMute1.png"); background-position: 0 0;}
#play .controle .holder .volume .jp-mute:focus { background-image: url("../imagens/icoMute1.png"); background-position: 0 100%;}
#play .controle .holder .volume .jp-volume-max { background-image: url("../imagens/icoMax1.png"); background-position: 0 0; margin: 0 0 0 5px;}
#play .controle .holder .volume .jp-volume-max:focus { background-image: url("../imagens/icoMax1.png"); background-position: 0 100%;}
#play .controle .holder .volume .jp-volume-bar { float: left; width: 100px; height: 10px; margin: 9px 0 0; overflow: hidden; background-color: #501C1C; cursor: pointer;}
#play .controle .holder .volume .jp-volume-bar-value { height: 10px; background-color: #FF7D26;}

#play .controle .holder .jp-controls { float: left; width: 192px; margin: 0 35px; position: relative; z-index: 1;}
#play .controle .holder .jp-controls button { width: 40px; height: 40px; margin: 4px 0; background-color: transparent; background-repeat: no-repeat; cursor: pointer; border: 0; font-size: 0; }
#play .controle .holder .jp-controls .jp-play { position: absolute; top: -38px; left: 50px; width: 90px; height: 90px; background-image: url("../imagens/icoPlay1.png"); background-position: 0 0; margin: 0;}
#play .controle .holder .jp-controls .jp-play:hover { background-image: url("../imagens/icoPlay1.png"); background-position: 0 100%;}
#play .controle .holder .jp-controls .jp-play:focus { background-image: url("../imagens/icoPlay1.png"); background-position: 0 100%;}
#play .controle .holder .jp-controls .jp-previous { float: left; background-image: url("../imagens/icoPrevious1.png"); background-position: 0 0;}
#play .controle .holder .jp-controls .jp-previous:hover { background-image: url("../imagens/icoPrevious1.png"); background-position: 0 100%;}
#play .controle .holder .jp-controls .jp-previous:focus { background-image: url("../imagens/icoPrevious1.png"); background-position: 0 100%;}
#play .controle .holder .jp-controls .jp-next { float: right; background-image: url("../imagens/icoNext1.png"); background-position: 0 0;}
#play .controle .holder .jp-controls .jp-next:hover { background-image: url("../imagens/icoNext1.png"); background-position: 0 100%;}
#play .controle .holder .jp-controls .jp-next:focus { background-image: url("../imagens/icoNext1.png"); background-position: 0 100%;}
#play.jp-state-playing .controle .holder .jp-controls .jp-play { background-image: url("../imagens/icoPausa1.png"); background-position: 0 0;}
#play.jp-state-playing .controle .holder .jp-controls .jp-play:focus { background-image: url("../imagens/icoPausa1.png"); background-position: 0 100%;}

#play .controle .holder .jp-toggles { float: left; width: 100px; margin: 10px 0 0;}
#play .controle .holder .jp-toggles button { float: left; width: 30px; height: 30px; background-color: transparent; background-repeat: no-repeat; cursor: pointer; border: 0; font-size: 0;}
#play .controle .holder .jp-toggles .jp-stop { background-image: url("../imagens/icoStop1.png"); background-position: 0 0;}
#play .controle .holder .jp-toggles .jp-stop:hover { background-image: url("../imagens/icoStop1.png"); background-position: 0 100%;}
#play .controle .holder .jp-toggles .jp-shuffle { background-image: url("../imagens/icoShuffle1.png"); background-position: 0 0; margin: 0 0 0 5px;}
#play .controle .holder .jp-toggles .jp-shuffle:hover { background-image: url("../imagens/icoShuffle1.png"); background-position: 0 100%;}
#play .controle .holder .jp-toggles .jp-full-screen { background-image: url("../imagens/icoScreen1.png"); background-position: 0 0; margin: 0 0 0 5px;}
#play .controle .holder .jp-toggles .jp-full-screen:hover { background-image: url("../imagens/icoScreen1.png"); background-position: 0 100%;}
#play .controle .holder .jp-toggles .jp-repeat { display: none;}

#play .ativamusicas { float: left; width: 100%; display: none;}

#play .musicas { float: left; width: 99%; padding: 8px 0.5% 9px; background-color: #FFFFFF; position: relative; display: none;}
#play .musicas ul { float: left; width: 96%; height: 80px; overflow: hidden; padding: 0; margin: 0;}
#play .musicas ul li { float: left; width: 18.4%; padding: 0 0.5%; height: 80px; margin: 0 0 20px 0.5%; background-color: #DCDCDC; position: relative; font-size: 1em; overflow: hidden; list-style: none; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#play .musicas ul li div { float: left; width: 100%;}
#play .musicas ul li div img { float: left; width: 26%; margin: 10px 7px 0 0;}
#play .musicas ul li div strong { float: left; width: 69%; height: 15px; margin: 10px 0 0; font-weight: normal; font-size: 0.8em; color: #140C09; overflow: hidden; }
#play .musicas ul li div b { float: left; width: 69%; margin: 4px 0 0; font-weight: normal; font-size: 0.7em; color: #140C09;}
#play .musicas ul li div a:hover strong { text-decoration: underline;}
#play .musicas ul li div a:hover b { text-decoration: underline;}
#play .musicas ul li div em.play { float: left; width: 20px; height: 20px; margin: 4px 3px 0 0; background-image: url("../imagens/listaPlay1.png"); background-position: 50% 100%; background-repeat: no-repeat;}
#play .musicas ul li div em.play:hover { background-position: 50% 0;}
#play .musicas ul li div a.baixar { float: left; width: 20px; height: 20px; margin: 4px 0 0; background-image: url("../imagens/listaDown1.png"); background-position: 50% 100%; background-repeat: no-repeat;}
#play .musicas ul li div a.baixar:hover { background-position: 50% 0;}
#play .musicas ul li.jp-playlist-current { background-color: #FFC49E;}
#play .musicas ul li.jp-playlist-current div strong { font-weight: bold;}
#play .musicas ul li.jp-playlist-current div b { font-weight: bold;}
#play .musicas a.left { float: left; width: 2%; height: 80px; background-image: url("../imagens/icoLeft1.png"); background-position: 50%; background-repeat: no-repeat; cursor: pointer; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#play .musicas a.right { float: left; width: 2%; height: 80px; background-image: url("../imagens/icoRight1.png"); background-position: 50%; background-repeat: no-repeat; cursor: pointer; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#play .musicas a.left:hover { background-color: #FFFFFF;}
#play .musicas a.right:hover { background-color: #FFFFFF;}

#espacoplay.jp-video-full { position: static;}
#espacoplay.jp-video-full .musicas { position: fixed; top: 0; left: 0; z-index: 3;}
#espacoplay.jp-video-full .controle { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
#espacoplay.jp-video-full .controle .jp-interface { position: absolute !important; position: relative; bottom: 0; left: 0;}
#espacoplay.jp-video-full .video { position: fixed !important; position: relative; top: 0; left: 0; overflow: hidden;}
#espacoplay.jp-video-full #paginas { display: none;}

@media only screen and (max-width: 1300px) {
     #play .musicas ul li { width: 23.4%;}

     #play .musicas ul li div img { width: 23%;}
     #play .musicas ul li div strong { width: 72%;}
     #play .musicas ul li div b { width: 72%;}
}
@media only screen and (max-width: 1200px) {
     #play .musicas ul li div img { width: 25%;}
     #play .musicas ul li div strong { width: 70%;}
     #play .musicas ul li div b { width: 70%;}
}
@media only screen and (max-width: 1100px) {
     #play .musicas ul li div img { width: 28%;}
     #play .musicas ul li div strong { width: 68%;}
     #play .musicas ul li div b { width: 68%;}
}
@media only screen and (max-width: 1000px) {
     #play .controle .holder { float: left; width: 96%; margin: 0 2%;}
     #play .controle .holder .volume { display: none;}
     #play .controle .holder .jp-controls { margin: 0 35px 0 0;}
     #play .controle .jp-progress { margin: 0;}

     #play .musicas ul li { width: 24.3%; padding: 0;}
     #play .musicas ul li a { float: left; margin: 10px 30px 0 5%;}
     #play .musicas ul li div img { display: none;}
     #play .musicas ul li div strong { width: 100%; height: auto; margin: 0;}
     #play .musicas ul li div b { width: 100%; margin: 5px 0 0;}
     #play .musicas ul li div em.play { position: absolute; top: 8px; right: 3px; margin: 0;}
     #play .musicas ul li div a.baixar { position: absolute; top: 30px; right: 3px; margin: 0;}
}
@media only screen and (max-width: 900px) {
     #play .controle .holder .jp-controls { margin: 0 20px 0 0;}
}
@media only screen and (max-width: 700px) {
     #play .controle .chave { top: 30px;}

     #play .musicas a.left { width: 4%;}
     #play .musicas a.right { width: 4%;}
     #play .musicas ul { width: 92%;}
     #play .musicas ul li { width: 49%;}
}
@media only screen and (max-width: 500px) {
     #play .video { width: 60%;}
     #play .musicas a.left { width: 8%;}
     #play .musicas a.right { width: 8%;}
     #play .musicas ul { width: 84%;}
}
@media only screen and (max-width: 400px) {
     #play .controle .holder .jp-toggles { display: none;}
}
/* Mesmo formulário da página de senha */
#pedir_senha.com-pix { padding-bottom: 25px; }
#pedir_senha.com-pix .auto::after, #pedir_senha.pix-resgate .auto::after,
.pix-compra .auto::after { content: ""; display: block; clear: both; }
.pix-compra { float: left; width: 100%; padding: 35px 0 55px; }
.pix-compra .auto { width: 500px; max-width: 90%; margin: 0 auto; }
.pix-compra .informacao { float: left; width: 100%; text-align: center; }
.pix-compra .informacao h1 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2em; }
.pix-compra .informacao h2 { float: left; width: 100%; text-align: center; font-size: 1.2em; }
.pix-compra .informacao p { float: left; width: 100%; margin: 15px 0 0; }
.pix-compra .c1 { float: left; width: 100%; margin: 21px 0 0; }
.pix-compra .c100 { float: left; width: 100%; margin: 10px 0 0; text-align: center; }
.pix-compra form::after { content: ""; display: block; clear: both; }
.pix-compra .nomecampo { float: left; width: 100%; margin: 0 0 2px; text-align: left; }
.pix-compra .nomecampo em { font-style: normal; color: rgb(200 0 0); }
.pix-compra .campo, #pedir_senha.pix-resgate .campo {
  box-sizing: border-box; float: left; width: 100%; height: 50px; padding: 0 12px;
  outline: 1px solid rgb(90 90 90 / 70%); border: 0; font-size: 1em;
}
.pix-compra .c1 small { float: left; width: 100%; margin-top: 8px; color: #666; }
.pix-compra .botao { padding: 20px 30px; border: 0; background-color: rgb(10 100 50); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: #fff; cursor: pointer; }
.pix-compra .botao:hover { background-color: rgb(10 80 50); }
.pix-compra .botao:disabled { opacity: .6; cursor: wait; }
.pix-compra #pix-resultado { float: left; width: 100%; margin: 25px 0 0; text-align: center; }
.pix-compra #pix-resultado p { margin: 0 0 15px; }
.pix-compra #pix-qr { display: block; max-width: 260px; width: 100%; height: auto; margin: 0 auto 16px; }
.pix-compra #pix-link { display: inline-block; margin-top: 16px; }
.pix-compra [hidden] { display: none !important; }
.pix-senha-liberada { width: 100%; box-sizing: border-box; padding: 16px; margin-bottom: 20px; background: #e6f6ea; border: 1px solid #8ac795; font-size: 18px; }
.pix-senha-liberada strong { display: inline-block; padding: 6px; user-select: all; }
.pix-resgate-link { float: left; width: 100%; box-sizing: border-box; margin: 100px 0 0; padding: 12px; text-align: center; }
#pedir_senha ~ .pix-resgate-link, .pix-compra ~ .pix-resgate-link { margin-top: 20px; }
body .pix-resgate-link a:link, body .pix-resgate-link a:visited,
body .pix-resgate-lista a:link, body .pix-resgate-lista a:visited { color: rgb(0 100 200); }
body .pix-resgate-link a:hover, body .pix-resgate-lista a:hover { text-decoration: underline; }
#pedir_senha.pix-resgate .botao { border: 0; }
.pix-resgate-resultado { margin-top: 35px; }
.pix-resgate-lista { float: left; width: 100%; box-sizing: border-box; padding: 0; margin: 15px 0 0; list-style: none; }
.pix-resgate-lista li { padding: 12px 0; border-bottom: 1px solid #ddd; text-align: center; }
@media only screen and (max-width: 1000px) {
  .pix-resgate-link { margin-top: 20px; }
}
@media only screen and (max-width: 500px) {
  .pix-compra { padding: 25px 0 40px; }
}