#principal{position:relative;}
.fixar {
position:fixed;
width:94%;
padding:6px 3%;
left:0;
	text-align:center;
    margin-top: 0px !important;
	top:45px;
	z-index:2000;
}
#menuResumo{
width:100%;
padding:6px 3%;
margin:0 auto;
text-align:center;
z-index:800000;
background:#f90;
background-image:linear-gradient(#f90, #ff0);
}	
@media screen and (max-width: 800px) {
.fixar{position:relative; left:0;}
}


/*flex box*/
#conteudo {
margin:0 auto;
margin-top:-150px;
text-align:center;
  display: -webkit-flex;
  display: flex;
  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;
}

.men_r{
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;
-webkit-align-items:flex-start;
justify-content:center;
-webkit-justify-content:center;
text-align:center;
margin:20px;
padding:10px;
background:#fff;
position:relative;

border:1px solid #cecece;
border-radius:6px;
}
.men_r i{display:block; font-size:200%; margin:-20px 0; color:#fff; border:3px solid #fff; background:#06f; padding: 25px; z-index:10;}
.men_r i:hover{background:#09f;-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;}
.fotomr{text-align:center; width:100%; height:auto; overflow:hidden!important;}
.fotomr img{width:100%; height:auto; margin:0; padding: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;}
.fotomr img:hover {transform:scale(1.2); -webkit-transform:scale(1.2)); -moz-transform:scale(1.2); -o-transform:scale(1.2);}
.div100{width:100%; margin:8px 0;}
.men_r h1{text-align:center; font-size:28px; width:100%;}
.men_r h1:before{content:""!important;}
/*alinhas dentro flex 3*/
.btv{width:120px; padding:6px 16px;
border-radius:8px; box-shadow: 6px 6px 6px #ccc;
border: 2px solid #cecece;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#449eed+1,4ba0ea+49,3690f0+51,003dcc+100 */
background: #449eed; /* Old browsers */
background: -moz-linear-gradient(top, #449eed 1%, #4ba0ea 49%, #3690f0 51%, #003dcc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #449eed 1%,#4ba0ea 49%,#3690f0 51%,#003dcc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #449eed 1%,#4ba0ea 49%,#3690f0 51%,#003dcc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#449eed', endColorstr='#003dcc',GradientType=0 ); /* IE6-9 */
}
.men_r img{max-width:100%;}
.men_r:hover{box-shadow:0 0 12px #06f; -webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
#conteudo a{color:#fff!important;}
#conteudo a:hover{color:#000!important;}
	@media screen and (max-width: 800px) {
	.men_r{
	flex:0 0 94%; /*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 94%;
	margin:6px;
	border:none;border-bottom: 1px solid #cecece;
	}
	#conteudo { width:100%; margin:0 auto;}
	}