/*flex box*/
#conteudo {
margin:0 auto;
text-align:center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width:100%;
  align-items:flex-start;/*padrao = stretch  flex-start*/
  justify-content:space-between;
  -webkit-align-items:flex-start;/*padrao = stretch  flex-start*/
  -webkit-justify-content:space-between;
}
.cont{
  background:rgba(255,255,255,1);
flex:0 0 28%; /*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 28%;
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: 2%;
margin-top: -50px;
border-radius:12px;
padding:12px;
}
@media screen and (max-width: 500px) {
.cont{
flex:0 0 100%;  margin: 0;/*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 100%; margin: 0;
}
}