body {
  background: #eeeded;
}
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
	}
	.button {
		-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		-webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		-ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		display: inline-block;
		color: inherit;
		background: none;
		text-decoration: none;
		border: solid 1px #c2c7cc;
		border-radius: 0.35em;
		padding: 0.8em 2em 0.8em 2em;
		cursor: pointer;
	outline: 0;}
	
	.buttonmenu {
		-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		-webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		-ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		display: inline-block;
		color: inherit;
		background: blue;
		text-decoration: none;
		border: solid 1px #c2c7cc;
		border-radius: 0.35em;
		padding: 0.8em 2em 0.8em 2em;
		cursor: pointer;
		outline: 0;
	}
	.button:hover {
			color: #ffffff;
			background-color:#87CEFA;
			text-decoration: none;
			border-color:#F0F8FF;
		}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 25px;
  padding-left: 25px;
  width: 100%;
}
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  margin-top:10px;
  margin-bottom:10px;
  background-color:#FFF;
  display: inline-block;
}
/* Oefeitos de sombra em volta de um elemento.*/
.card:hover {
  box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card > .card-inner {
  padding:10px;
}
.card .header h3 {
  margin-bottom: 0px;
  margin-top:0px;
  font-family: 'Source Sans Pro', sans-serif;
}
.card .header {
  margin-bottom:5px;
}
.card img{
  width:350px;
  height:250px;
  
}
.col-sm-4 {
    -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
max-width: 33.333333;}
	
@media (max-width: 767px) {
  .container {
    flex-wrap: wrap;
  }
  .container .card {
    flex: 0 0 100%;
  }
  
}

	
/*O Flex Container é a tag que envolve os itens flex, ao indicar display: flex, essa tag passa a ser um Flex Container.*/