body {
text-align:center;
line-height:1.2em;
margin:0;
padding:0;
padding-top:80px;/*altura header*/
font-size:20px;
font-family: 'Abel', sans-serif, Arial, Helvetica, sans-serif;
background:#000;
color:#fff;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/*flexbox*/
.flex{
display: -webkit-flex;
display: flex;
display: -moz-box;
display: -ms-flexbox;
flex-flow: row wrap;
align-items:stretch;/*padrao = stretch  flex-start*/
justify-content:center;
-webkit-flex-flow: row wrap;
-webkit-align-items:stretch;/*padrao = stretch  flex-start*/
-webkit-justify-content:center;/*space-around;*/
}
.cont{flex:1 1 33%;-webkit-flex:1 1 33%;}
/*ALINHAMENTO VERTICAL
para texto ÚNICO solto dentro do .cont usar classe .vert -> ela alinha tudo no meio, independente do self de cada div - PARA DIVS OU TEXTOS  posicionados em cima, meio e embaixo, usar as classes .fv_t, c e b.
*/
.vert{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;  
flex-direction: column;
justify-content: center;
resize: vertical;
-webkit-flex-direction: column;
-webkit-justify-content: center;
-webkit-resize: vertical;
}
.fv_t{align-self:flex-start;-webkit-align-self:flex-start;}
.fv_c{align-self:center;-webkit-align-self:center;}
.fv_b{align-self:flex-end;-webkit-align-self:flex-end;}
/*fim flexbox*/
#menu_h{
background:#000;
margin:0 auto;
text-align:center;
width:100%;
height:80px;
position:fixed; left:0; top:0;
z-index:1000;
box-shadow:0 0 6px #333;
}
#redes{float:right; width:120px; height:80px;  padding-top:34px; background:#900;}
#redes a{color:#fff;} #redes a:hover{color:#0c0;}
#redes i{margin-left:12px;}
#menu{float:left; width:calc(100% - 120px); text-align:right; padding-top:30px; padding-left:20px;}/*medida logo mais redes*/
.menu_h{
-webkit-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease;
display:inline-block; height:60px; padding-top:18px; padding-left:6px; padding-right:6px; margin:0;
border-left:1px solid #e6e5e5;
}
.menu_h:hover{background:#da0101;-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
.menu_h:last-child{border-right:1px solid #e6e5e5 ;}
.menu_h a{font-weight:bold; color:#000!important;}
.menu_h a:hover{color:#fff!important;}
.logo_img{width:278px; height:80px;}
.separa_header{height:115px;}
@media screen and (max-width: 800px) {
body{padding-top:45px;}
#menu_h{height:45px; padding:0; margin:0;}
.separa_header{height:55px;}
#redes {padding-top:12px; height:45px; font-size:90%; width:100px;}
#redes i{margin-left:6px; font-size:18px;}
#logo{width:20%; width:calc(100% - 200px); height:45px; text-align:center; margin-left:100px;}
.logo_img{width:156px!important; height:45px;}
#menu{display:none;}
}
@media screen and (max-width: 600px) {
#redes{padding-top:12px;}
#redes i{margin-left:6px; font-size:14px;}
}
#pulsa{
color:#0c0;
}
.pulsa {animation: pulsa 1s ease infinite alternate;}
@keyframes pulsa{
   from { color:#fff; }
   to { color:#0c0;}
}
/*visível apenas*/
.vp{display:none;}
.vg{display: inherit;}
/*fim visível apenas*/
#topo{
width:100%;
margin-bottom:20px;
}
#topo_m{
margin:0 auto;
text-align:center;
width:100%;
}
#anima{
width:70%;
border-radius:12px;
overflow:hidden;
margin:0 auto;
box-shadow: 0 0 26px #06f;
text-align:center;
padding:0!important;}
#principal{
width:100%;
margin:0 auto;
text-align:center;
padding:10px 10%;
}
.clear{clear:both;}
.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;}
.centralizada{max-width:100%; text-align:center; margin:0 auto;}
.pg_unica{width:100%;}
.separa{width:50px; height:50px;}/*para compensar o header fixo*/
.zapzap{display:inline-block; background: #0c0; color:#fff; padding:4px 8px; border-radius:4px; margin-left:6px; font-size:70%; border:0;}
#img_rodape{width:100%;background:url(imagens/rodape.png) top repeat-x; height:93px;}
#rodape{
width:100%;
background:#333;
padding-bottom:80px;
}
#mapa{width:100%;}
#rodape_m {
margin:0 auto;
text-align:center;
width:80%;
max-width:960px;
padding-top:12px;
color:#fff;
}

.seta{position:absolute; top:10px; left:10px; width:0; height:0; border:25px solid transparent; border-left: 25px solid #555;}
#rodape strong {font-size:115%; letter-spacing:2px; color: #fff;}
#parceiros{
width:100%;
height:60px;
overflow:auto;
font-size:70%;
color:#ccc;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#info{
width:100%;
margin:0 auto;
text-align:center;
padding:30px;
text-align:center;
background: #c60;
color:#fff;
margin-bottom:30px;
}
#info strong, #info a{color:#fff;}
#fone{width:30%; padding:12px 24px; display:inline-block; vertical-align:middle; text-align:center; line-height:1.3em;}
#fone a:hover{text-decoration:underline;-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
#fone i, #mp i{color:#fff; font-size:300%; margin-bottom:50px; display:block;}
.text_p{font-size:80%;}
#rs{width:30%; padding:12px 24px; display:inline-block; vertical-align:middle; text-align:center;}
#mp{width:30%; padding:12px 24px; display:inline-block; vertical-align:middle; text-align:center;}
/*newsletter*/
.form-newsletter {
	text-align: center;	
	width: 280px;
	margin: 0 auto;
}
.input-newsletter {
	font-family: 'Abel', sans-serif;
	width: 100%;
	padding:6px;
	height: 38px;
	border: 0;
	color: #000;
	font-style: italic;
	border-radius:5px;
	margin-bottom:6px;
}
.input-anexo {
	font-family: 'Abel', sans-serif;
	font-size:16px;
	width: 100%;
	padding:6px;
	height: 38px;
	border: 0;
	color: #000;
	font-style: italic;
	border-radius:5px;
	margin-bottom:6px;
}
.textarea {
	font-family: 'Abel', sans-serif;
	margin-bottom:6px;
	width: 100%;
	padding:6px;
	height: auto;
	border: 0;
	color: #000;
	font-style: italic;
	border-radius:5px;
}
.botao-newsletter {
	font-family: 'Abel', sans-serif;
	width: 70px;
	height: 38px;
	float: right;
	background-color: #CEB453;
	color: #FFF;
	border: 0;
	border-radius:5px;
	cursor: pointer;
}
	.botao-newsletter:hover {
		background-color:#06f;
	}
	.input-newsletter:hover, .textarea:hover{box-shadow: 0 0 12px #333; background:#cecece;}
/*fim newsletter*/
#mostrar{width:98%;padding:1%; font-size:70%;}
#mostrar, #mostrar a, #mostrar em, #mostrar strong{color:#5095cf;}	
#parceiros a{color:#5095cf;}
#parceiros a:hover{color:#5095cf;}
#parceiros em{color:#eee;}	
#footer{position:fixed; background:#333; width:100%; padding: 6px; color:#fff; bottom:0; left:0; font-size:22px;}
#footer a, #footer strong{color:#cecece;}
@media screen and (max-width: 800px) {
#footer{font-size:16px!important;}
#anima{padding:0;}
#anima_img{border:0;}
#fone, #rs, #mp{ width:100%;}
#mp{padding:0;}
#info{width:96%;}
#principal{padding:12px;}
.colunas{
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
.float_left, .float_right, #topo_left{ float:none; width:100%; padding:8px 20px;}
/*visível apenas*/
.vp{display: inherit;}
.vg{display:none; width:0; height:0; overflow:hidden;}
/*fim visível apenas*/
#menu{width:29.5%; padding:0;}
#ffb{position:fixed; right:10px; bottom:10px;  top:clear; font-size:150%;}
#menu h1, #menu h2{font-size:20px; margin:4px;}
}
/*COPIAR NO ESTILO DO /SITE   */
p {text-align:justify;}

h1 {
font-family: 'Merriweather', serif;
font-size:46px;
color: #f60;
text-align:left;
margin-top:20px;
line-height:1.3em;
}
h2 {
font-family: 'Merriweather', serif;
font-size:32px;
text-align:left;
color: #f60;
line-height:1.3em;
}
@media screen and (max-width: 800px) {
h1 {font-size:32px;}
h2 {font-size:28px;}
}
ul{
text-align:left!important;
list-style: inside;
}
em{
font-style:italic;
color: #81d0b1;
}
strong{
color:#333;
}
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 - pegar js*/
#tooltip
{
    text-align: center;
    color: #fff;
    background: #336051;
    position: absolute;
    z-index: 1000;
    padding: 12px;
}
 
    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }
/*css página padrao*/
.vejamais{

	font-style:italic;

	background:#eee;

	padding:3px;

	color:#009;

	text-align:left;

}

.mais{

	border:2px solid #ccc;

	padding:10px;

}

.ui-accordion .ui-accordion-header {

	display: block;

	cursor: pointer;

	position: relative;

	margin-top: 2px;

	padding: .5em .5em .5em .7em;

	min-height: 0; /* support: IE7 */

}

/*FANCY*/
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
@media screen and (max-width: 800px) {
.gal{display:none;}
}

.fancybox-wrap,

.fancybox-skin,

.fancybox-outer,

.fancybox-inner,

.fancybox-image,

.fancybox-wrap iframe,

.fancybox-wrap object,

.fancybox-nav,

.fancybox-nav span,

.fancybox-tmp

{

	padding: 0;

	margin: 0;

	border: 0;

	outline: none;

	vertical-align: top;

}



.fancybox-wrap {

	position: absolute;

	top: 0;

	left: 0;

	z-index: 8020;

}



.fancybox-skin {

	position: relative;

	background: #f9f9f9;

	color: #444;

	text-shadow: none;

	-webkit-border-radius: 4px;

	   -moz-border-radius: 4px;

	        border-radius: 4px;

}



.fancybox-opened {

	z-index: 8030;

}



.fancybox-opened .fancybox-skin {

	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

}



.fancybox-outer, .fancybox-inner {

	position: relative;

}



.fancybox-inner {

	overflow: hidden;

}



.fancybox-type-iframe .fancybox-inner {

	-webkit-overflow-scrolling: touch;

}



.fancybox-error {

	color: #444;

	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;

	margin: 0;

	padding: 15px;

	white-space: nowrap;

}



.fancybox-image, .fancybox-iframe {

	display: block;

	width: 100%;

	height: 100%;

}



.fancybox-image {

	max-width: 100%;

	max-height: 100%;

}



#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {

	background-image: url('images/fancybox_sprite.png');

}



#fancybox-loading {

	position: fixed;

	top: 50%;

	left: 50%;

	margin-top: -22px;

	margin-left: -22px;

	background-position: 0 -108px;

	opacity: 0.8;

	cursor: pointer;

	z-index: 8060;

}



#fancybox-loading div {

	width: 44px;

	height: 44px;

	background: url('images/fancybox_loading.gif') center center no-repeat;

}



.fancybox-close {

	position: absolute;

	top: -18px;

	right: -18px;

	width: 36px;

	height: 36px;

	cursor: pointer;

	z-index: 8040;

}



.fancybox-nav {

	position: absolute;

	top: 0;

	width: 40%;

	height: 100%;

	cursor: pointer;

	text-decoration: none;

	background: transparent url('images/blank.gif'); /* helps IE */

	-webkit-tap-highlight-color: rgba(0,0,0,0);

	z-index: 8040;

}



.fancybox-prev {

	left: 0;

}



.fancybox-next {

	right: 0;

}



.fancybox-nav span {

	position: absolute;

	top: 50%;

	width: 36px;

	height: 34px;

	margin-top: -18px;

	cursor: pointer;

	z-index: 8040;

	visibility: hidden;

}



.fancybox-prev span {

	left: 10px;

	background-position: 0 -36px;

}



.fancybox-next span {

	right: 10px;

	background-position: 0 -72px;

}



.fancybox-nav:hover span {

	visibility: visible;

}



.fancybox-tmp {

	position: absolute;

	top: -99999px;

	left: -99999px;

	visibility: hidden;

	max-width: 99999px;

	max-height: 99999px;

	overflow: visible !important;

}



/* Overlay helper */



.fancybox-lock {

    overflow: hidden !important;

    width: auto;

}



.fancybox-lock body {

    overflow: hidden !important;

}



.fancybox-lock-test {

    overflow-y: hidden !important;

}



.fancybox-overlay {

	position: absolute;

	top: 0;

	left: 0;

	overflow: hidden;

	display: none;

	z-index: 8010;

	background: url('images/fancybox_overlay.png');

}



.fancybox-overlay-fixed {

	position: fixed;

	bottom: 0;

	right: 0;

}



.fancybox-lock .fancybox-overlay {

	overflow: auto;

	overflow-y: scroll;

}



/* Title helper */



.fancybox-title {

	visibility: hidden;

	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;

	position: relative;

	text-shadow: none;

	z-index: 8050;

}



.fancybox-opened .fancybox-title {

	visibility: visible;

}



.fancybox-title-float-wrap {

	position: absolute;

	bottom: 0;

	right: 50%;

	margin-bottom: -35px;

	z-index: 8050;

	text-align: center;

}



.fancybox-title-float-wrap .child {

	display: inline-block;

	margin-right: -100%;

	padding: 2px 20px;

	background: transparent; /* Fallback for web browsers that doesn't support RGBa */

	background: rgba(0, 0, 0, 0.8);

	-webkit-border-radius: 15px;

	   -moz-border-radius: 15px;

	        border-radius: 15px;

	text-shadow: 0 1px 2px #222;

	color: #FFF;

	font-weight: bold;

	line-height: 24px;

	white-space: nowrap;

}



.fancybox-title-outside-wrap {

	position: relative;

	margin-top: 10px;

	color: #fff;

}



.fancybox-title-inside-wrap {

	padding-top: 10px;

}



.fancybox-title-over-wrap {

	position: absolute;

	bottom: 0;

	left: 0;

	color: #fff;

	padding: 10px;

	background: #000;

	background: rgba(0, 0, 0, .8);

}



/*Retina graphics!*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

	   only screen and (min--moz-device-pixel-ratio: 1.5),

	   only screen and (min-device-pixel-ratio: 1.5){



	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {

		background-image: url('images/fancybox_sprite@2x.png');

		background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/

	}



	#fancybox-loading div {

		background-image: url('images/fancybox_loading@2x.gif');

		background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/

	}

}

.fancy{margin:12px 0; width:100%; padding:2%; background: rgba(0,0,0,0.1); text-align:center;}
.fancybox{margin:2px;}
.fancybox div{margin:3px; position:relative; border:2px solid #eee; border-radius: 4px; width:200px; height:200px; overflow:hidden!important; display:inline-block;}
.fancybox div img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  min-width:100%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

.fancybox img:hover{opacity:0.6;}

/*FIM FANCY*/

/*FOTO DESCRIÇÃO*/

/*flex box*/

.conteudo {

margin:12px auto;

text-align:center;

  text-align: center;

  display: -webkit-flex;

  display: flex;

  flex-flow: row wrap;

  align-items:stretch;/*padrao = stretch  flex-start*/

  justify-content:space-around;

  -webkit-flex-flow: row wrap;

  -webkit-align-items:stretch;/*padrao = stretch  flex-start*/

  -webkit-justify-content:space-around;

}

.cont{

flex:0 0 22%; /*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 22%;

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;

text-align:center;

margin:6px;

border-radius:12px;

justify-content:center;

background:#eee;

padding:6px;

}

.sobre{

	width:100%;

	height:100%;

	color:#fff;

	background:rgba(0,0,0,0.5);

	position:absolute;

	top:-400px; 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;

	}

.cont:hover > .sobre{top:0;}

.cont div{width:100%;}

/*alinhas dentro flex 3*/

.foto{border:0;}

.foto img{max-width:100%; max-height:150px;}

.meio{align-self:flex-end;}

.meio a{color:#333;}

.meio a:hover{color:#03c;}

.comprar{background:#06c; background-image: linear-gradinet(#03c, #06c); color:#fff; align-self:flex-end; max-width:140px; padding:4px; border-radius:6px;}

.comprar a{color:#fff;}

.comprar a:hover{color:#f90;}

