body{
height:100%;
width:100%;
margin:0;
padding:0;
font-size:20px;
font-family: 'Abel', sans-serif, Arial, Helvetica, sans-serif;
line-height:1.1em;
background:#FEF9F1;
}

#header{
width:100%;
margin:0!important;
}
#header img{width:100%;}
#menuFixo {
margin-top:-5px;
width:100%;
background:#533826;
background-size: 100% auto;
text-align:center;
z-index:200;
	/*flex box*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;  
flex-direction: column;
justify-content: center;
-webkit-flex-direction: column;
-webkit-justify-content: center;
}
#cssmenu{width:auto; margin:0 auto; text-align:center;}
@media screen and (max-width: 800px) {
#header{width:100%;}
#header img{width:100%; margin:0!important;}
}
#principal{
margin:16px auto;
text-align:center;
width:80%;
padding:1% 2%;
background:rgba(255,255,255,0.9);
border-radius:4px;
}

.whats{width:0; height:0; overflow:hidden; visibility:hidden;}
.flags{ width: 40px; position:absolute; top:45%; left:0; background:#fff; border:2px solid #960; border-radius: 6px 0 0 6px; color:#960; font-size:30px; padding:8px 0;}
#rs:hover{background:rgba(59,39,36,0.8); right:0;}
#rs:hover > .flags{ visibility:hidden; width:0; height:0; overflow:hidden;}
.rs{width:100%; margin:6px 0;}
/*voltar ao topo*/
.top, .top a{position:fixed; left:3px; top:51%; font-size:40px; color:#600; z-index:30000;}
.bot, .bot a{position:fixed; left:3px; bottom:51%; font-size:40px; color:#600; z-index:30000;}
.top a:hover, .bot a:hover{color:#06f;}
#anima{width:100%;}
@media screen and (max-width: 800px) {
body{padding:0;}
#principal_h, #anima{float:none; width:96%; padding:3px 2%; text-align:center;}
#principal{ width:90%; padding:6px 3% 6px 7%; margin:0;}
#rs {position:relative; width:94%; padding:1% 3%; right:0; bottom:0; height:auto;}
.flags{width:0; height:0; overflow:hidden; visibility:hidden;}
.top, .top a{font-size:30px;}
.bot, .bot a{font-size:30px;}
.whats{visibility:visible;  overflow:visible; width:auto; height:auto;}
}

.m_45{float:left; width:45px; margin-right:12px;}
.m_35{float:right; width:15%;}
.m_35 img{width:100%;}
#m_form{float:left; width:83%;}
#m_form input{ padding:2px; background:#eee; border:1px solid #ccc; border-radius:6px; font-size:16px; width: 100%; font-size:70%;}
#div_busca{margin:6px 0;}
.centralizada{text-align:center; width:100%;}
.centralizada img{max-width:100%; margin: 6px auto;}
.separa, .clear{clear:both;}
.clear_h{clear:both; margin:0 auto; width: 80%; padding:0 10%; text-align:center; background:rgba(59,39,36,0.3);}
.pull{ width:30%; height:auto; float:left;  padding: 20px 12px; margin: 12px; font-weight:bold; font-size:36px; color:#ccc; line-height:1.3em; border-top: 5px solid #ccc;border-bottom: 5px solid #ccc;}
.pull strong, .pull h1, .pull h2{font-weight:bold; font-size:36px; color:#ccc;}
.float_left{ width:auto; height:auto; float:left; margin:0 10px 10px 0;}
.float_right{width:auto; height:auto; float:right; margin: 0 0 10px 10px;}
/*DIVIDIR COLUNAS*/
.colunas{
padding:10px 0;
	column-width: 240px;
    column-gap: 20px;
    column-rule: 0;
   -moz-column-width: 240px;
   -moz-column-gap: 20px;
   -moz-column-rule: 0;
   -webkit-column-width: 240px;
   -webkit-column-gap: 20px;
   -webkit-column-rule: 0;
}
#rodape{
background: #663300;
color: #000;
width:80%;
padding:12px 10%;
text-align:center;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
align-items:stretch;/*padrao = stretch  flex-start*/
justify-content:flex-start;
-webkit-flex-flow: row wrap;
-webkit-align-items:stretch;/*padrao = stretch  flex-start*/
-webkit-justify-content:flex-start;
padding-bottom:100px;
}
#rodape a{color:#ccc;}
#rodape i{display: block; width:100%; color: rgba(255,255,255,0.5); font-size:200%;}
.rodape, .rodapeg, .rodape_g{
padding: 12px 1%;
text-align:center;
display: flex;
-webkit-flex-flow: row;
flex-flow: row wrap;/*se colocar column nao vai pra baixo - se não colocar wrap não funciona*/
align-items:center;
justify-content:center;
-webkit-align-items:center;
-webkit-justify-content:center;
/*alinhamento vertical*/
-webkit-resize: vertical;
resize: vertical;
background:rgba(0,0,0,0.3);
border:1px solid #5f8779;
border-radius:4px;
margin:1%;
color:#fff;
}
.rodape{
flex:1 1 19%; /*flex-grow, flex-shrink e flex-basis -> relação de aumento dos box entre si no responsivo, diminuição, MIN-WHIDTH */
-webkit-flex:1 1 19%;
}
.rodapeg{
flex:1 1 94%; /*flex-grow, flex-shrink e flex-basis -> relação de aumento dos box entre si no responsivo, diminuição, MIN-WHIDTH */
-webkit-flex:1 1 94%;
padding: 12px 1%;
}
.rodape_g{
flex:1 1 38%; /*flex-grow, flex-shrink e flex-basis -> relação de aumento dos box entre si no responsivo, diminuição, MIN-WHIDTH */
-webkit-flex:1 1 38%;
padding: 12px 1%;
}
@media screen and (max-width: 800px) {
#rodape i{font-size:100%;}
.rodape, .rodape_g{
flex:0 0 92%;
-webkit-flex:0 0 92%;
padding:4px 1%;
margin: 1% 2%;
}
}
#rodape strong {font-size:115%; letter-spacing:2px; color: #ff0;}
#mostrar{width:98%;padding:1%; font-size:70%;opacity: 0.6;filter: alpha(opacity=60); color:#333;}
#mostrar a{color:#333;}
#mostrar a:hover{color:#333;}
#mostrar em{color:#333;}	

#parceiros{
width:100%;
height:42px;
overflow:auto;
opacity: 0.6;
filter: alpha(opacity=60);
}
#parceiros img{width:40px;}
#parceiros a, #parceiros em, #parceiros strong{color:#333;}
#parceiros a:hover{color:#333;}
#mercado{position:fixed; right:0; top:60%; width:8%; box-shadow: 0 0 20px #fff; padding: 6px; z-index:300000; background:rgba(0,0,0,0.6);}
p { text-align:justify;}
h1 {
font-size:40px;
font-family: 'Open Sans', sans-serif;
letter-spacing:.2em;
font-weight:bold;
color: #663300;
text-align:left;
margin-bottom:12px;
line-height:1.3em;
}
h2 {
font-size:34px;
font-family: 'Open Sans', sans-serif;
letter-spacing:.2em;
text-align:left;
color:#630;
line-height:1.3em;
text-shadow: 4px 4px 6px #333;
}
@media screen and (max-width: 780px) {
h1 {font-size:32px; text-align:center;}
h2 {font-size:28px;text-align:center;}
@media screen and (max-width: 500px) {
h1 {font-size:20px;}
h2 {font-size:18px;}
}
ul{
text-align:left;
list-style:circle;
}
em{
font-style:italic;
color: #003040;
}
strong{
color:#003040;
}
a {color: #03c;
text-decoration:none!important;

	}

a:hover
	{
	color: #00CC00;
	}

/* PARA MAPA DO GOOGLE RESPONSIVO declarar classe abrindo e fechando iframe*/
.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*tooltip legal - apenas css por no link tooltip="Documento na lotérica" class="tooltip" */
.tooltip { display:inline;position:relative; }
.tooltip:hover { text-decoration:none; }
.tooltip:hover:after{
   background: #eee;
	box-shadow: 0 0 10px #000;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;

   opacity: 0.9;
   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   filter: alpha(opacity=90);
   -moz-opacity:0.9;
   -webkit-opacity:0.9;

   bottom: 18px;
   color: #EEE;
   content: attr(tooltip); /* O macete */
   display: block;
   left: 50%;
   padding: 5px 15px;
   position: absolute;
   white-space: normal;
   z-index: 98;
   font-family: sans-serif;
   font-size: 14px;
}
.tooltip:hover:before{ /* O triângulo */
   border: solid;
   border-color: #111 transparent;
   border-width: 6px 6px 0 6px;
   bottom: 12px;
   content: "";
   display: block;
   left: 75%;
   position: absolute;
   z-index: 99;
}
/*COR TRADUTOR GOOGLE*/
.goog-te-gadget-simple .goog-te-menu-value{color:#fff!important;}
.goog-te-gadget-simple{border:0!important; color:#fff!important;}
.goog-te-gadget-simple{background: #614a79!important; }

/*MENU COM FOTO NA INDEX*/
/*flex box*/

#menu_foto, #menu_foto2 {
margin:12px auto;
position:relative;
width:96%;
padding:1% 2%;
text-align:center;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  align-items:stretch;/*padrao = stretch  flex-start*/
  justify-content:center;/*space-around*/
  -webkit-flex-flow: row wrap;
  -webkit-align-items:stretch;/*padrao = stretch  flex-start*/
  -webkit-justify-content:center;
}
.mf{
flex:0 0 12%; /*flex-grow, flex-shrink e flex-basis -> relação de aumento dos box entre si no responsivo, diminuição, MIN-WHIDTH */
-webkit-flex:0 0 12%;
display: flex;
-webkit-flex-flow: row;
flex-flow: row wrap;/*se colocar column nao vai pra baixo - se não colocar wrap não funciona*/
align-items:flex-start;
justify-content:center;
-webkit-align-items:flex-start;
-webkit-justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
margin:6px;
}
/*alinhas dentro flex 3*/
.mft{width:98%; text-align:center; overflow: hidden; font-size:300%; color:#960;}
.mft img{width:100%; margin:0 auto; text-align:center; margin-top:6px;}
.meiomn{align-self:auto; padding:10px 0;  width:90%; margin:0 5%; color:#960; font-size:80%;font-family: 'Abel', sans-serif, Arial, Helvetica, sans-serif;}
.meiomn a, .meiomn strong{color:#960!important; font-family: 'Open Sans', sans-serif; letter-spacing:.2em; padding-bottom:12px;}
.meiomn a:hover, meiomn strong:hover{color:#06f;}
/*PERSONALIZAÇÃO HOVER*/
	.sobremn{
	width:100%;
	height:100%;
	color:#fff;
	background:rgba(156,200,180,0.8);
	position:absolute;
	top:-500px; left:0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition:  all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	/*para centralizar*/
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;  
	flex-direction: column;
	align-items:center;
	justify-content: center;
	-webkit-flex-direction: column;
	-webkit-align-items:center;
	-webkit-justify-content: center;
	}
	.mf:hover > .sobremn {top:0;}
	@media screen and (max-width: 800px) {
	.sobremn{width:0; height:0; overflow:hidden; visibility:hidden;}
	.mf{flex:0 0 80%; -webkit-flex:0 0 80%;}
	}
	/*ABRE FECHA COM CLIQUE*/
#r_esq{width:50%; height:94%; padding:5%; position:fixed; left:-60%; top:0;
background:#b0dfc9;
z-index:100000;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
/*para centralizar*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;  
flex-direction: column;
align-items:center;
justify-content: center;
}
#text{position:absolute;visibility:hidden;}
#text:checked ~ #r_esq{left:0; border-right:2px solid #f90;}
input[type=checkbox] + label:after
{
font-family: 'FontAwesome';
display:inline-block;
font-size:500%;
content:"\f0c9";
  position:fixed;
  left:0px;
  top:45%;
  z-index:2000;
  -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index:100000;
}
@media screen and (max-width: 780px) {
input[type=checkbox] + label:after, #r_esq, #text{display:none; width:0; height:0; overflow:hidden;
}
}
input[type=checkbox]:checked + label:after
{
font-family: 'FontAwesome';
display:inline-block;
font-size:500%;
content:"\f100";
  position:fixed;
  left:55%;
  top:45%;
  z-index:10000000;
}

.checkbox_label
{
  height:0px;
  width:0px;
  display:inline-block;
  float:left;
  position:relative;
  left:20px;
  z-index:100;
}
#r_esq a, #r_esq strong, #r_esq h1, #r_esq h2{color:#f90;}
/*FIM ABRE FECHA COM CLIQUE*/
/* formulário*/
#rodape form{
width:80%;
text-align:left;
margin:0 10%;
margin-top:16px;
border-top: 2px dotted #fff;
}

#rodape input {
background:#fff;
width:100%;
margin-bottom: 3px;
/*border:1px solid #CC9933;*/
}
#rodape .textarea {
background:#fff;
width:100%;
margin-bottom: 3px;
}
#rodape select {
background:#fff;
width:100%;
margin-bottom: 3px;
/*border:1px solid #CC9933;*/
}
#rodape .submit {
clear:both;
width:100px;
background:#eee;
color:#000;
}
#left{
float:left;
width:48%;
height:auto;
}
#right{
float:right;
width:48%;
height:auto;
}
#clear{
margin-top: 10px;
padding-top:10px;
border-top:1px solid #fff;
clear:both;
width:100%;
text-align:center;
}
.submit, #rodape .submit {
 clear:both;
 color:#333;
 width:100px;
}
.submit:hover, #rodape .submit:hover {
 clear:both;
 background:#8AD55E;
 color:#333;
 width:100px;
 border:1px solid #999;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
 border-radius:3px;
 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.5);
 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.5);
 box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.5);
 -webkit-transition:border linear 0.2s,box-shadow linear 0.2s;
 -moz-transition:border linear 0.2s,box-shadow linear 0.2s;
 -ms-transition:border linear 0.2s,box-shadow linear 0.2s;
 -o-transition:border linear 0.2s,box-shadow linear 0.2s;
 transition:border linear 0.2s,box-shadow linear 0.2s;
}
.senha, #rodape .senha {
 clear:both;
 color:#333;
 width:200px!important;
 text-align:center;
}
input, #rodape input, select, #principal select {
 height:22px;
 background:#fff;
 width:100%;
 margin-bottom: 5px;
}
select, #rodape select { padding:3px; height:25px;}
label{font-size:20px;font-weight:normal;line-height:30px; color:#587cf0;}
input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
label{display:block;margin-bottom:5px;}
input, select, .textarea{
 background-color:#ffffff;
 border:1px solid #cccccc;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
 border-radius:3px;
 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
 box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -webkit-transition:border linear 0.2s,box-shadow linear 0.2s;
 -moz-transition:border linear 0.2s,box-shadow linear 0.2s;
 -ms-transition:border linear 0.2s,box-shadow linear 0.2s;
 -o-transition:border linear 0.2s,box-shadow linear 0.2s;
 transition:border linear 0.2s,box-shadow linear 0.2s;
}
input:focus, select:focus, .textarea:focus{
 border-color:rgba(82, 168, 236, 0.8);
 outline:0;
 outline:thin dotted \9;
 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
 box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}