@charset "utf-8";

#paginas { float:left; width:100%; min-height: 500px; padding: 74px 0 40px;}
#paginas h1 { float: left; width: 100%; padding: 10px 0 5px;  border-bottom: 1px solid #555555; margin-bottom: 30px; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.5em;}
#paginas h5 { float: left; width: 100%; line-height: 1.5; font-size: 1em;}
#paginas h5 strong { text-transform: uppercase; font-size: 1.2em; color: #DA2610;}

#margem { float: left; width: 100%; height: 80px;}

#banners { float: left; width: 100%; position: relative; z-index: 5; display: none;}
#banners .subtitulo { float: left; width: 100%;}
#banners .subtitulo h2 { float: left; width: 100%; padding: 12px 0 4px; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1em;}
#banners .item { float: left; width: 100%;}
#banners .item img { float: left; width: 100%;}
#banners .item strong { float: left; width: 100%; padding: 10px 0; background-color: #000000; text-align: center; font-size: 1.2em; color: #FFFFFF;}

#senha { float: left; width: 100%; margin: 200px 0 250px;}
#senha .centro { max-width: 90%; width: 550px; margin: 0 auto;}
#senha .fundo { float: left; width: 90%; padding: 8% 5%; -webkit-box-shadow: 0 0 15px 3px rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 15px 3px rgb(0 0 0 / 20%); box-shadow: 0 0 15px 3px rgb(0 0 0 / 20%);}
#senha .nomecampo { float: left; width: 100%; margin: 0 0 5px; text-align: center; font-size: 1.1em; line-height: 1.1;}
#senha .campo { float: left; width: 96%; height: 60px; padding: 1px 2% 0; border: 1px solid #AAAAAA; text-align: center; font-size: 1.1em; outline: 0; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#senha .campo:focus { border: 1px solid #089fdb; -webkit-box-shadow: 0 0 5px 0px rgb(8 159 219 / 35%); -moz-box-shadow: 0 0 5px 0px rgb(8 159 219 / 35%); box-shadow: 0 0 5px 0px rgb(8 159 219 / 35%);}
#senha .botao { float: left; width: 100%; margin: 15px 0 0; text-align: center;}
#senha .botao .bo { padding: 20px 30px 18px; cursor: pointer; background-color: rgb(20, 116, 76); font-weight: bold; text-transform: uppercase; font-size: 1.2em; color: #FFFFFF; border: 0; outline: 0; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#senha .botao .bo:hover { background-color: rgb(14, 90, 58);}
#senha .erro { float: left; width: 100%; margin: 10px 0 0; text-align: center; font-size: 1em; color: #AA0000;}

#estourado { display: none; position: fixed; width: 260px; height: 260px; top: 0; right: 1%; z-index: 1050;}
#estourado .imagem { float: left; width: 100%; background-color: #FFFFFF;}
#estourado .imagem .img { float: left; width: 94%; padding: 3%;}
#estourado .chave { float: left; width: 100%; position: relative;}
#estourado .chave .botao { position: absolute; top: 5px; right: 0; display: none; font-weight: bold; color: #FFFFFF; line-height: 0; cursor: pointer;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#estourado .chave .abrir { padding: 20px 5px 18px; background-color: #4CAF50;}
#estourado .chave .fechar { padding: 20px 15px 18px; background-color: #F53B2D; border: 5px solid #FFFFFF;}
#estourado .chave .fechar:hover { background-color: #D31D0F;}
#estourado .chave .prioridade { display: block;}
#estourado.desativado { top: -261px;}
#estourado.desativado .chave .botao { top: 20px;}

#carrosel { float: left; width: 100%; padding: 10px 0; position: relative; z-index: 1;}
#carrosel .owl-carousel { float: left; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; display: none; }
#carrosel .owl-carousel.owl-loaded { display: block;}
#carrosel .owl-carousel.owl-loading { opacity: 0; display: block;}
#carrosel .no-js .owl-carousel { display: block;}
#carrosel .owl-stage-outer { position: relative; overflow: hidden;}
#carrosel .owl-stage-outer .owl-item { float: left; position: relative; -webkit-tap-highlight-color: transparent;}
#carrosel .owl-stage-outer .owl-item .item { float: left; width: 100%;}
#carrosel .owl-nav { position: absolute; width: 100%; top: -25px; left: 0;}
#carrosel .owl-nav button { position: absolute; width: 30px; top: 0; padding: 8px 0 13px; background-color: rgb(1, 3, 16); font-size: 2em; line-height: 0; color: #FFFFFF; cursor: pointer; line-height: 0; border: 0; outline: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#carrosel .owl-nav button.owl-prev { left: 5px;}
#carrosel .owl-nav button.owl-next { right: 5px;}
#carrosel .owl-nav button:hover { background-color: rgb(86, 93, 102);}
#carrosel .owl-nav button.disabled { background-color: #CCCCCC; color: #AAAAAA;}
#carrosel .owl-nav button.disabled:hover { background-color: #CCCCCC;}
#carrosel .owl-dots { display: none;}

#videos { float: left; width: 100%;}
#videos.index { padding: 30px 0;}
#videos .titulo { float: left; width: 100%; margin-bottom: 25px;}
#videos .titulo h2 { float: left; width: 100%; margin: 0 0 5px; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 2em; color: #000110;}
#videos .titulo em { float: left; width: 10%; margin-left: 45%; height: 1px; background-color: #CCCCCC;}
#videos .tab { width: 23%; margin-bottom: 25px;}
#videos .tab.ta1 { float: left;}
#videos .tab.ta2 { float: left; margin-left: 2.7%;}
#videos .tab.ta3 { float: left; margin-left: 2.7%;}
#videos .tab.ta4 { float: right;}
#videos .tab .img { float: left; width: 99%; position: relative; padding: 0.5%; background-color: #FFFFFF;}
#videos .tab .img .obs { position: absolute; width: 97%; height: 96%; right: 1.5%; top: 1.8%; background-color: #000000; z-index: 100; opacity: 0;}
#videos .tab .img .obs:hover { opacity: 0.8;}
#videos .tab .img .obs img { float: none; width: auto;}
#videos .tab h3 { float: left; width: 100%; margin: 12px 0 0; font-weight: bold; font-size: 1.2em; color: #222222;}
#videos .linha2 { float: left; width: 100%; display: none;}
#videos .linha4 { float: left; width: 100%;}
#videos .center { width: 90%;}

#categorias { float: left; width: 100%;}
#categorias .link { float: left; width: 90%; padding: 17px 5% 15px; border-bottom: 1px solid #555555; text-transform: uppercase; font-weight: bold; color: #000000;}
#categorias .link:hover { background-color: #EEEEEE;}

#completos { float: left; width: 100%;}
#completos .tab { float: left; width: 28.333%; margin: 20px 2%; position: relative;}
#completos .tab .capa { float: left; width: 100px;}
#completos .tab .capa img { float: left; width: 100%;}
#completos .tab .texto { position: absolute; top: 10px; left: 110px;}
#completos .tab .texto h2 { float: left; width: 100%; font-size: 1em; color: #555555;}
#completos .tab .texto h3 { float: left; width: 100%; margin: 5px 0; font-weight: bold; font-size: 1.1em; line-height: 1.1;}
#completos .tab .texto h4 { float: left; width: 100%; font-size: 0.9em; color: #555555;}
#completos .linha2 { display: none; float: left; width: 100%; height: 1px;}
#completos .linha3 { float: left; width: 100%; height: 1px;}

#contato { float: left; width: 100%;}
#contato h5 { float: left; width: 90%; margin: 30px 5%; text-align: center; font-size: 1.2em; line-height: 1.1;}

#paginacao { float:left; width:100%; margin: 0 0 30px; text-align: center; line-height: 2.2em;}
#paginacao .nome { float:left; width: 100%; border-bottom: 5px solid #FFFFFF; text-transform: uppercase; font-weight: bold; font-size: 2em; line-height: 1;}
#paginacao .nun { padding: 7px 10px 5px; background-color: #008665; font-size:1em; color:#FFFFFF;}
#paginacao .nun.ativo { background-color:#E93337;}
#paginacao .nun:hover { background-color:#E93337;}

#exibiartista { float: left; width: 100%; margin:  0 0 20px;}
#exibiartista .nome { float: left; width: 90%; padding: 20px 5% 18px; background-color: #EEEEEE;}
#exibiartista .nome h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 2em; line-height: 1.2;}
#exibiartista .nuns { float: left; width: 90%; padding: 0 5%;}
#exibiartista .nuns .item { float: left; width: 33.33%; padding: 20px 0 18px;}
#exibiartista .nuns .item b { float: left; width: 100%; text-align: center; font-weight: normal; color: #555555;}
#exibiartista .nuns .item strong { float: left; width: 100%; text-align: center;}

#exibiblog { float: left; width: 100%;}
#exibiblog h3 { text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.3em; color: #000000;}
#exibiblog h4 { margin-top: 10px; text-align: center; font-size: 1.1em; color: #555555;}
#exibiblog .descricao { float: left; width: 100%; margin-top: 10px;}
#exibiblog .descricao iframe { max-width: 100% !important;}
#exibiblog .descricao img { max-width: 100% !important;}
#exibiblog .sociais { float: left; width: 100%; margin-top: 40px;}
#exibiblog .sociais .interagir { float: left;}
#exibiblog .sociais .interagir form { float: left; padding: 0 5px 0 0;}
#exibiblog .sociais .interagir form .botao { float:left; width: 45px; height: 45px; background-color: rgba(0,0,0,0.00); cursor: pointer; font-size: 0; outline: 0; border: 0;}
#exibiblog .sociais .interagir form .botao.curtir { background-image: url(../imagens/icoCurti.png);}
#exibiblog .sociais .interagir form .botao.amei { background-image: url(../imagens/icoAmei.png);}
#exibiblog .sociais .interagir form #nuncurtir { float: left; width: 30px; padding: 16px 0 0 5px; font-weight: bold; color: #555555; border: 0; outline: 0;}
#exibiblog .sociais .interagir form #nunamei { float: left; width: 30px; padding: 16px 0 0 5px; font-weight: bold; color: #555555; border: 0; outline: 0;}
#exibiblog .sociais .interagir form .n { display: none;}
#exibiblog .sociais .interagir form .error { display: none;}
#exibiblog .sociais .links { float: right;}
#exibiblog .sociais .links img { padding: 0 5px;}
#exibiblog .sociais .links .zap { display: none;}

#exibivideo { float: left; width: 70%; margin-left: 15%;}
#exibivideo h3 { padding: 30px 0 0; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 1.3em; color: #000000;}
#exibivideo .sociais { float: right; width: 100%; margin-top: 40px;}
#exibivideo .sociais .interagir { float: left;}
#exibivideo .sociais .interagir form { float: left; padding: 0 5px 0 0;}
#exibivideo .sociais .interagir form .botao { float:left; width: 45px; height: 45px; background-color: rgba(0,0,0,0.00); cursor: pointer; font-size: 0; outline: 0; border: 0;}
#exibivideo .sociais .interagir form .botao.curtir { background-image: url(../imagens/icoCurti.png);}
#exibivideo .sociais .interagir form .botao.amei { background-image: url(../imagens/icoAmei.png);}
#exibivideo .sociais .interagir form #nuncurtir { float: left; width: 30px; padding: 16px 0 0 5px; font-weight: bold; color: #555555; border: 0; outline: 0;}
#exibivideo .sociais .interagir form #nunamei { float: left; width: 30px; padding: 16px 0 0 5px; font-weight: bold; color: #555555; border: 0; outline: 0;}
#exibivideo .sociais .interagir form .n { display: none;}
#exibivideo .sociais .interagir form .error { display: none;}
#exibivideo .sociais .links { float: right;}
#exibivideo .sociais .links img { padding: 0 5px;}
#exibivideo .sociais .links .zap { display: none;}
#exibivideo iframe { float: left; width: 100%; height: 550px; margin-top: 15px;}

#semplay { float: left; width: 90%; padding: 130px 5% 120px; background-color: #181921;}
#semplay .capa { float: left; width: 25%; text-align: center; font-size: 0;}
#semplay .capa .img { width: 400px; max-width: 100%;}
#semplay .detalhes { float: right; width: 73%;}
#semplay .detalhes .nome { float: left; width: 100%; margin: 0 0 15px;}
#semplay .detalhes .nome h1 { float: left; width: 100%; border: 0; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.7em; line-height: 1; color: #FFFFFF;}
#semplay .detalhes .baixarcd { float: left; width: 30%; padding: 15px 9% 12px; margin: 10px 0 0 2%; line-height: 1.1; background-color: #FF0000; background-image: url("../../imagens/icoDown.png"); background-position: 15px 50%; background-repeat: no-repeat; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.1em; color: #FFFFFF; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#semplay .detalhes .baixarcd:hover { background-color: #AA0000;}

#carregando { float: left; width: 100%; height: 200px; top: 0; left: 0; z-index: 30; position: relative;}
#carregando .ico { position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; margin: -45px 0 0 -45px; animation: loader 1s infinite; border: 20px solid rgb(235, 235, 235); border-top-color: rgb(20, 20, 20);}

#installPWA { float: left; width: 100%; padding: 15px; background-color: #C9CAD1; box-sizing: border-box; text-align: center;}
#installPWA span { padding: 20px 0 20px 40px; background-image: url('../imagens/app.png?v1'); background-position: 0 50%; background-repeat: no-repeat; text-transform: uppercase; font-weight: bold;}

@media only screen and (max-width: 1200px){
	#categorias a { font-size: 0.9em;}
}
@media only screen and (max-width: 1000px){
	#paginas { padding: 0;}

	#margem { height: 0;}

	#banner { display: none;}
	#videos.index { display: none;}
	#senha { margin: 60px 0 50px;}

	#completos .tab {  width: 46%;}
	#completos .linha2 { display: block;}
	#completos .linha3 { display: none;}

	#estourado { position: absolute; right: 0;}
	#estourado .chave .botao { top: 3px; right: 2%;}
	#estourado.desativado .chave .botao { top: 14px;}
	#estourado.desativado .chave .botao.semapp { top: 14px;}

	#videos .tab { width: 90%; margin-bottom: 25px;}
	#videos .tab.ta1 { float: left; margin-left: 5%;}
	#videos .tab.ta2 { float: left; margin-left: 5%;}
	#videos .tab.ta3 { float: left; margin-left: 5%;}
	#videos .tab.ta4 { float: left; margin-left: 5%;}

	#semplay { padding: 30px 5% 120px}
	#semplay .capa { width: 100%;}
	#semplay .detalhes { float: left; width: 100%; margin: 20px 0 0;}
	#semplay .detalhes .baixarcd { width: 70%; padding: 15px 15% 12px; margin: 10px 0 0;}
}
@media only screen and (max-width: 950px){
	#paginas h1 { padding: 14px 0 7px; margin-bottom: 15px;}
	#exibiblog .sociais .links .zap { display: unset;}
	#exibivideo .sociais .links .zap { display: unset;}
}
@media only screen and (max-width: 900px){
	#exibivideo { width: 100%; margin-left: 0;}
	#exibivideo iframe { height: 400px;}
}
@media only screen and (max-width: 800px){
	#exibiartista .nuns .item { width: 100%; border-bottom: 1px solid #EEEEEE;}
}
@media only screen and (max-width: 700px){
	#exibivideo iframe { height: 300px;}
}
@media only screen and (max-width: 600px){
	#banners { display: block;}
}
@media only screen and (max-width: 550px){
	#exibivideo iframe { height: 250px;}
}
@media only screen and (max-width: 500px){
	#carrosel .owl-dots { display: none;}

	#completos .tab {  width: 100%; margin: 10px 0;}
	#completos .linha2 { display: none;}
	#completos .linha3 { display: none;}
}
@media only screen and (max-width: 450px){
	#exibiblog .sociais .links { margin-top: 2px;}
	#exibiblog .sociais .links img { width: 30px; padding: 0;}
	#exibiblog .sociais .interagir form .botao { width: 30px; height: 30px; background-size: 100%;}
	#exibiblog .sociais .interagir form #nuncurtir { padding: 9px 0 0 3px;}
	#exibiblog .sociais .interagir form #nunamei { padding: 9px 0 0 3px;}
	
	#exibivideo .sociais .links { margin-top: 2px;}
	#exibivideo .sociais .links img { width: 30px; padding: 0;}
	#exibivideo .sociais .interagir form .botao { width: 30px; height: 30px; background-size: 100%;}
	#exibivideo .sociais .interagir form #nuncurtir { padding: 9px 0 0 3px;}
	#exibivideo .sociais .interagir form #nunamei { padding: 9px 0 0 3px;}
}
@media only screen and (max-width: 300px){
	#exibivideo iframe { height: 200px;}
}
@keyframes loader {
  to{
    transform: rotate(1turn);
  }
}