/*flex box*/
#conteudo {
margin:0 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:center;
  -webkit-flex-flow: row wrap;
  -webkit-align-items:stretch;/*padrao = stretch  flex-start*/
  -webkit-justify-content:center;
}
.cont{
flex:0 0 30%; /*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 30%;
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:6px;
position:relative;
overflow:hidden;
font-size:80%;
font-weight:100;
}
/*alinhas dentro flex 3*/
.foto{text-align:center;width:100%;}
.foto img{width:100%;}
.meio{
align-self:auto;
width: 80%;
padding:3%;
border:2px solid #fff;
margin: 0 auto;
text-align:center;
background:#0e99f1;
background-image:linear-gradient(#666,#ccc);
border-radius:6px;
-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;
	}
.meio a, .meio strong{color:#fff!important;}
.meio a:hover, meio strong:hover{color:#ccc;}
/*PERSONALIZAÇÃO HOVER*/
	.sobre{
	width:100%;
	height:100%;
	color:#fff;
	background:rgba(0,159,227,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;
	 -webkit-flex-direction: column;
	 -webkit-align-items:center;
	 -webkit-justify-content: center;
	}
	.cont:hover > .sobre {top:0;}
	.cont:hover > .meio {background-image:linear-gradient(#06f,#03c);}
	@media screen and (max-width: 680px) {
	.cont{
	flex:0 0 80%; /*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 80%;
	}
	.sobre{width:0; height:0;  overflow:hidden; top:-400px;}
	#conteudo { width:90%; margin:0 auto;}
	}