/*flex box*/
#conteudo {
margin:0 auto;
text-align:center;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  width:100%;
  align-items:stretch;/*padrao = stretch  flex-start*/
  justify-content:center;
}
#conteudo > *{flex-flow:row wrap;display: -webkit-flex;display: flex;padding: 1em; text-align:center; jus}

.cont{
flex:1;
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;
min-width:160px;
max-width:240px;
justify-content:center;
position:relative;
overflow:hidden;
border-radius:12px;
}

.cont div{margin:3px; width:100%;}
/*alinhas dentro flex 3*/
.foto{text-align:center;}
.foto img{width:50%;}
.meio{align-self:auto; padding:10px 0;}
.meio a, .meio strong{color:#dc9832!important;}
.meio a:hover, meio strong:hover{color:#fff;}
/*PERSONALIZAÇÃO HOVER*/
	.sobre{
	width:100%;
	height:100%;
	color:#fff;
	background:rgba(220,152,50,0.5);
	position:absolute;
	top:-300px; 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;}
	@media screen and (max-width: 680px) {
	
	}