/*
Theme Name: Regispel - Market Game
Theme URI: http://regispel.com.br
Author: Pedro Silva
Author URI: https://pedrosilva.blog.br
Description: Layout para o site da campanha Market Game da Regispel
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Regispel, responsivo, novo, 2019, mobile
Text Domain: Regispel

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,700&display=swap');
@font-face { font-family: 'PeaceSans'; src: url('fontes/PeaceSans.eot') format('embedded-opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PeaceSans'; src: url('fontes/PeaceSans.otf')  format('opentype'), url('fontes/PeaceSans.ttf') format('truetype'), url('fontes/PeaceSans.svg#PeaceSans') format('svg'); font-weight: normal; font-style: normal; }

body { overflow: hidden; font-family: 'Ubuntu', sans-serif; font-size: 14px; min-height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
html { min-height: 100%; }

a:hover { text-decoration: none; }
.animacao, a, img, input, textarea, select, header, button { transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; }

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.size-full { display: block; max-width: 100%; height: auto; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone {  margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 100%; padding: 5px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 5px; }

.wpcf7 input, .wpcf7 textarea { font-size: 14px; }
.wpcf7-response-output { float: left; width: 100%; margin: 0 !important; padding: 10px !important; text-align: center; font-size: 14px; }
.wpcf7-validation-errors { width: 100%; margin: 0 !important; padding: 10px !important; text-align: center; font-size: 14px; color: #FFFFFF; background: #F00000; border: 0 !important; }
.wpcf7-not-valid-tip { display: none !important; }
.wpcf7-not-valid { background: #FBB4B4 !important; }
.wpcf7-mail-sent-ok { background: #398f14 !important; color: #FFFFFF !important; }

.f-peacesans { font-family: 'PeaceSans', sans-serif; }
.bg-roxo { background-image: url(img/bg-roxo.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.bg-azul { background-image: url(img/bg-roxo.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.bg-roxo-translucido { background-color: rgba(0,62,134, 0.8); }
.btn-universidade { text-transform: initial; }
.overflow-hidden { overflow: hidden; }

.bola-pontos { background-color: #444795; color: #FFFFFF; width: 80px; height: 80px; border-radius: 50%; text-align: center; position: relative; }
.bola-pontos .miolo { position: absolute; top: 50%; left: 50%; width: 70%; height: 70%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.bola-pontos .mais { font-size: 26px; line-height: 26px; }
.bola-pontos .pontos { font-size: 24px; margin: 0; line-height: 12px; }

.btn-menu, .btn-fechar { overflow: hidden; display: inline-block; width: 50px; height: 50px; background: rgba(0,40,86, 0.8); border-radius: 50px; color: #FFFFFF; position: relative; font-size: 22px; }
.btn-menu i, .pagina .btn-fechar i { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.btn-menu:hover, .pagina .btn-fechar:hover { background: rgba(0,173,238, 0.8); color: #FFFFFF; }

.sidebar { z-index: 5; top: 0; left: 0; }
.sidebar .logo { padding: 30px; width: 220px; height: 220px; border-radius: 50%; }
.sidebar .logo a { margin: 20px; width: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }
.sidebar .menu { display: none; background: rgba(0,40,86, 0.8); border-top-left-radius: 10px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; }
.sidebar .menu a { color: #FFFFFF; display: block; padding: 6px 0; }
.sidebar .menu li { text-transform: uppercase; font-weight: bold; text-align: center; }
.sidebar .menu li.ativo a, .sidebar .menu a:hover { color: #00adee; }
.sidebar .menu li:not(:last-of-type) { border-bottom: 2px solid #00adee; }
.sidebar .menu li ul { display: none; list-style: none; margin: 0 0 10px 0; padding: 0; }
.sidebar .menu li ul li { text-transform: initial; text-align: left; font-weight: normal; border-bottom: none !important; }
.sidebar .menu li ul li a { padding: initial; }
.sidebar .menu li.ativo ul li a { color: #FFFFFF; }
.sidebar .menu li.ativo ul li a:hover { color: rgba(255,255,255,0.3); }
.sidebar .menu:before { content: ""; position: absolute; left: 15px; top: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(0,40,86, 0.8); }
.sidebar .perfil .nome { font-size: 12px; }
.sidebar .perfil .foto { max-width: 50%; padding-top: 47%; height: 0; margin: 0 auto; border: 3px solid #FFFFFF; }
.sidebar .perfil .foto img { transform: scale(2.7); margin-top: -7%; margin-left: -7%; }

.mapa { width: 85%; margin-left: 15%; z-index: 6; display: none; }
.loading { display: none; background: #002856 url(img/loading.gif) no-repeat center center; background-size: 50px; z-index: 1; top: 0; left: 0; position: fixed; width: 100%; height: 100%; }

.pagina { display: none; top: 0; left: 0; z-index: 8; }
.pagina .btn-fechar { z-index: 1; top: 40px; right: 40px; overflow: initial; }
.pagina .btn-fechar:after { content: "Fechar"; font-size: 12px; position: absolute; bottom: -20px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
/*.pagina .conteudo.scroll { max-height: initial; overflow: initial; }*/
.pagina .scroll { max-height: 500px; }

.vamos-comecar { z-index: 2; }
.vamos-comecar .titulo { width: 100%; height: 400px; background-image: url(img/vamos-comecar-2.png); background-repeat: no-repeat; background-size: 60%; background-position: center center; }
.vamos-comecar .titulo .box { bottom: 30px; right: 0; max-width: 55%; }
.vamos-comecar .titulo h1 { font-size: 50px; line-height: 50px; }

footer { bottom: 0; left: 0; z-index: 7; }
footer .conquistas { padding: 17px 35px; border-radius: 100px; color: #FFFFFF; }
footer .conquistas .etapas li { vertical-align: middle; }
footer .conquistas .etapas img { width: 20px; }
.progress { height: 8px; border: 1px solid rgba(255,255,255,0.7); background-color: initial; }
.progress .progress-bar  { background-color: #00adee; }
footer .regispel img { max-width: 200px; }

.pagina .regulamento { display: none; }
.pagina .regulamento .icone { width: 50px; height: auto; }
.pagina .regulamento .periodo span { font-size: 18px; }
.pagina .regulamento .dados li { float: left; width: 100%; }
.pagina .regulamento .dados li:not(:last-of-type) { margin-bottom: 20px; }
.pagina .regulamento .dados span { margin-left: 10px; max-width: 80%; float: left; }
.pagina .regulamento .dados img { float: left; }
.pagina .regulamento .texto { max-width: 80%; }
.separador, .separador.branco { width: 20%; margin-right: 80%; background-color: #00adee; height: 8px; border-radius: 10px; }
.separador.branco { background-color: #FFFFFF; }
.separador.t-50 { width: 50%; margin-right: 50%; }
.separador.t-80 { width: 80%; margin-right: 20%; }
.linha-p p:not(:last-of-type) { border-bottom: 1px solid #FFFFFF; padding-bottom: 1rem; }
.z-index-1 { z-index: 1; }
.z-index-0 { z-index: 0; }

.pagina .mecanica { display: none; }

.pagina .desafio-do-mes-regulamento { display: none; }

.pagina .super-premio-regulamento { display: none; }
.pagina .super-premio-regulamento .valor-do-premio { top: -15px; left: 160px; }
.pagina .super-premio-regulamento .valor-do-premio .moedas { top: 0; left: 0; max-width: 70px; z-index: 1; }
.pagina .super-premio-regulamento .valor-do-premio .pontos { top: 40px; left: 50px; max-width: 80px; }
.pagina .super-premio-regulamento .valor-minimo { top: -15px; left: 140px; max-width: 80px; }
.pagina .super-premio-regulamento .valor-minimo .moedas { top: 0; left: 0; max-width: 70px; z-index: 1; }

.pagina .premiacao-final { display: none; }
.pagina .premiacao-final .primeiro h1 { line-height: 40px; }
.pagina .premiacao-final .primeiro .trofeu { top: -15px; left: 90px; width: 180px; }
.pagina .premiacao-final h3 { font-size: 26px; }
.pagina .premiacao-final h5 { font-size: 15px; }

.pagina .premio-adesivos { display: none; }
.pagina .premio-adesivos .trofeu { margin-top: -90px; }
.pagina .premio-adesivos .premio-surpresa { left: 0; bottom: 80px; }
.pagina .premio-adesivos .premio-surpresa span { font-size: 12px; }

.pagina .premio-viagem { display: none; }
.pagina .premio-viagem .moedas { top: -20px; left: -20px; z-index: 2; width: 70px; }
.pagina .premio-viagem .vale-viagem h3 { font-size: 27px; }

.pagina .premio-campanha-social { display: none; }
.pagina .premio-campanha-social .premios span { position: absolute; left: 0; bottom: -50px; width: 100%; text-align: center; font-weight: bold; }
.pagina .premio-campanha-social .premios img { max-width: 60%; }
.pagina .premio-campanha-social .bordas-redonda { border-radius: 100px; }

.pagina .supermercado-completo { display: none; }
.pagina .supermercado-completo .valor { line-height: 30px; }
.pagina .supermercado-completo .trofeu { top: -47%; left: -17%; width: 180px; }
.pagina .supermercado-completo .pessoa { margin-top: -120px; }

.pagina .penalidades { display: none; }
.pagina .penalidades .imagem { /*margin-top: -120px;*/ }

table.tabela, .tabela table { /*width: 100%;*/ text-align: center; font-size: 11px; table-layout: auto; }
table.tabela th, .tabela table thead td, .tabela table thead th { background: #00adee; color: #FFFFFF; padding: 10px; }
table.tabela td, table.tabela th, .tabela table thead td, .tabela table td, .tabela table thead th { padding: 5px; text-align: center; }
table.tabela tr:not(:last-of-type):not(:first-of-type), .tabela table tr:not(:last-of-type) { border-bottom: 1px solid #FFFFFF; }
table.tabela td:not(:first-of-type), .tabela table td:not(:first-of-type), .tabela table th:not(:first-of-type) { border-left: 1px solid #FFFFFF; }
table.tabela th:first-of-type, .tabela table thead td:first-of-type, .tabela table thead th:first-of-type  { border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
table.tabela th:last-of-type, .tabela table thead td:last-of-type, .tabela table thead th:last-of-type { border-top-right-radius: 40px; border-bottom-right-radius: 40px; }
.tabela table thead td, .tabela table thead tr, .tabela table thead th { border: none !important; }
.tabela table tr { height: auto !important; }
.tabela table td { width: auto !important; }

.sua-meta .tabela table { table-layout: auto !important; }
.sua-meta .tabela table thead td { border-radius: 0; }
.sua-meta .tabela table thead tr:first-of-type td:last-of-type { border-top-right-radius: 40px; }
.sua-meta .tabela table thead tr:first-of-type td:first-of-type { border-top-left-radius: 40px; }
.sua-meta .tabela table thead tr:last-of-type td:last-of-type { border-bottom-right-radius: 40px; }
.sua-meta .tabela table thead tr:last-of-type td:first-of-type { border-bottom-left-radius: 40px; }

.pagina .pontuacao { display: none; }

.pagina .tabela-de-pontos { display: none; }
.pagina .tabela-de-pontos .tabelas li a, .ranking-mensal li a { display: inline-block; padding: 5px 15px; border-radius: 20px; background: #00adee; color: #FFFFFF; }
.pagina .tabela-de-pontos .tabelas li a:hover, .pagina .tabela-de-pontos .tabelas li.ativo a, .ranking-mensal li.ativo a, .ranking-mensal li a:hover { color: #00adee; background: #FFFFFF; }
.pagina .tabela-de-pontos .tabela { display: none; }
.pagina .tabela-de-pontos .tabela.ativo { display: flex; }
.pagina .tabela .titulo { font-size: 13px; }
.pagina .tabela-de-pontos .scroll { margin-top: 10px; }

.pagina .sua-meta { display: none; }
.pagina .sua-meta .nome { font-size: 14px; }

.pagina .ranking-mensal { display: none; }
.pagina .ranking-mensal .ranking { display: none; }
.pagina .ranking-mensal .ranking.ativo { display: flex; }

/*.pagina .ranking-mensal .tabela table { width: 300% !important; }*/
.pagina .ranking-mensal .ranking.scroll { padding-bottom: 15px; margin: 0; }
.pagina .ranking-mensal .ranking.scroll .tabela { margin: 0 5px; padding: 0; }

.pagina .ranking-geral { display: none; }

.scroll { overflow: auto; }
.scroll::-webkit-scrollbar-button { display: none; height: 13px; border-radius: 0px; background-color: #AAA; } 
.scroll::-webkit-scrollbar-button:hover { background-color: #AAA; } 
.scroll::-webkit-scrollbar-thumb { background-color: rgba(0,173,238, 0.5); border-radius: 10px; } 
.scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(0,173,238, 0.9); border-radius: 10px; } 
.scroll::-webkit-scrollbar-track { background-color: rgba(255,255,255,0.3); border-radius: 15px; }
.scroll::-webkit-scrollbar-track:hover { background-color: rgba(255,255,255,0.5); border-radius: 15px; } 
.scroll::-webkit-scrollbar { width: 6px; height: 6px; }

.pagina .oportunidade { display: none; }
.pagina .oportunidade.bg { background-repeat: no-repeat; background-position: center center; background-size: cover; }
.pagina .oportunidade .cabecario { top: -195px; left: -70px; width: 300px; z-index: 0; }
.pagina .oportunidade .texto { z-index: 1; }
.pagina .oportunidade .universidade a, .pagina .universidade-regispel .universidade a { color: #FFFFFF; }
.pagina .oportunidade .universidade a:hover, .pagina .universidade-regispel .universidade a:hover { color: rgba(255,255,255,0.3); }
.pagina .oportunidade .zoom img { opacity: 0; max-width: 50%; }

.pagina .desafio-do-mes { display: none; }
.pagina .desafio-do-mes .trofeu, .pagina .super-desafio .trofeu { top: -50px; left: -30px; }
.pagina .desafio-do-mes .moedas, .pagina .super-desafio .moedas { top: 0; right: 0; }
.pagina .desafio-do-mes .bola-pontos, .pagina .super-desafio .super-desafio { margin-top: -15px; }

.pagina .super-desafio { display: none; }

.orientacao { display: none; z-index: 50; position: relative; top: 0; left: 0; z-index: 100; }
.orientacao .miolo { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.orientacao img { max-width: 100px; }

.btn-conquistas { display: none; padding: 5px 10px 5px 25px; background: rgba(0,173,238, 0.5) url(img/clique-aqui.gif) no-repeat 4px center; background-size: 20%; color: #FFFFFF; border-top-left-radius: 5px; border-top-right-radius: 5px; }

/*@media (width: 1024px) and (height: 768px){

	.sidebar .menu { max-width: initial !important; }
	aside.sidebar { max-width: 20% !important; }
	.scroll { max-height: 400px !important; overflow: auto !important; }
	.pagina .conteudo.col-lg-6 { max-width: 65% !important; flex: 0 0 65% !important; }
	.sidebar .perfil .foto { border: 2px solid #FFFFFF; }
	.tabela.scroll { overflow: initial !important; }
	.pagina .supermercado-completo .trofeu { top: -43px; left: -28px; width: 180px; }
	.pagina .oportunidade .cabecario { top: 2px; left: -103px; width: 200px; }
	.pagina .oportunidade .zoom { margin-top: 140px; }

	footer { z-index: 0; }
	footer .conquistas { display: none; background-color: rgba(0,62,134, 0.8); }
	footer .regispel img { max-width: 100%; }


	.oportunidades.botoes .botao { width: 20px !important; height: 20px !important; font-size: 10px !important; }
	footer .align-items-lg-center { align-items: flex-end !important; }

	

	.pagina .penalidades .imagem { margin-top: -70px; }

	h1 { font-size: 1.5rem; }

}*/

@media (min-width: 1920px){
	.sidebar .menu { max-width: 70%; }
	.pagina .premio-campanha-social .conteudo.scroll { overflow: initial; }
}

@media (max-width: 1366px){

	h1 { font-size: 2rem; }
	body { font-size: 13px; }

	.cabecario.d-none.d-xl-block { display: none !important; }
	.cabecario.d-xl-none { display: block !important; }

	.btn-conquistas { display: inline-block; }
	.align-items-xl-center { align-items: flex-end !important; }
	.pagina .super-premio-regulamento .d-xl-block { display: none !important; }
	.pagina .premio-campanha-social .premios span { bottom: -57px; }
	.pagina .oportunidade .cabecario { top: initial; left: initial; width: 100%; margin-right: -24%; margin-bottom: -40%; float: right; }

	.sidebar .logo { width: initial; height: initial; padding: initial; }
	.sidebar .logo a { position: initial; top: initial; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial; }
	.sidebar .menu li { font-size: 12px; }

	.vamos-comecar .titulo { background-size: 83%; }

	.tabela.scroll { overflow: initial !important; }

	.premiacao-final .col-4 span { font-size: 9px; }

	/*footer { z-index: 0; }*/
	footer .conquistas { display: none; background-color: rgba(0,62,134, 0.8); }
	footer .regispel img { max-width: 100%; }

}

/* TABLET */
@media (max-width: 900px){

	h1 { font-size: 18px; }
	p { font-size: 13px; }

	.btn-menu, .btn-fechar { width: 30px; height: 30px; font-size: 15px; }
	.pagina .btn-fechar { top: 15px; right: 20px; }
	.pagina .btn-fechar:after { display: none; }
	.sidebar .menu li { font-size: 12px; }
	.sidebar .perfil .nome { font-size: 11px; }

	.sidebar .menu { max-width: initial; border-top-left-radius: 10px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }

	.sidebar .scroll, .pagina .scroll, .pagina .conteudo.scroll { max-height: 300px; }
	.pagina .conteudo.scroll { overflow: auto; }

	.oportunidades.botoes .botao { width: 20px !important; height: 20px !important; font-size: 10px !important; }

	.pagina .regulamento .periodo span { font-size: 16px; }

	.pagina .penalidades .imagem { margin-top: initial; }
	.pagina .premiacao-final .primeiro h1 { line-height: initial; }

	.pagina .premiacao-final .primeiro .trofeu { top: -19px; left: 90px; width: 150px; }

	.pagina .premio-adesivos .trofeu { margin-top: initial; text-align: center; }
	.pagina .premio-adesivos .premio-surpresa { left: initial; }

	.bg-white.premios { background: none !important; }
	.pagina .premio-campanha-social .premios span { position: initial; float: left; bottom: initial; margin-top: 15px; }
	.pagina .premio-campanha-social .premios img { max-width: 70%; background: #FFFFFF; padding: 15px; border-radius: 20px; }
	.pagina .supermercado-completo .pessoa { margin-top: -55px; }

	/*.pagina .oportunidade .cabecario { top: 0; left: -88px; width: 145px; }*/
	.pagina .oportunidade .zoom { z-index: 1; }

	/*.pagina .ranking-mensal .tabela table { width: 400% !important; }
	.pagina .ranking-geral .tabela table { width: 150% !important; }
	.pagina .sua-meta .tabela table { width: 150% !important; }*/
	.ranking.scroll { padding-bottom: 15px; margin: 0; }
	.ranking.scroll .tabela { margin: 0 5px; padding: 0; }
}

/* MOBILE */
@media (max-width: 570px){

	p { font-size: 11px; }
	.sidebar .menu li { font-size: 10px; }
	.sidebar .menu li ul li { font-size: 11px; }
	.sidebar .perfil .nome { font-size: 10px; }

}