@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;}
}