/* CSS Document */

*, *:before, *:after {
  box-sizing: border-box;
}

.flex-grid, .flex-grid-2, .flex-grid-3, .flex-grid-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	box-sizing: border-box;
 	flex-flow: row wrap;
  /*display: inline-block; /WTF! */
}

.flex-container {
	border: solid 3px gold;
  display: block;
  box-sizing: content-box;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 2%;
}


.flex-grid .flex-item {
	-webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}



.flex-grid-2,
.flex-grid-3,
.flex-grid-4 {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;

  justify-content: space-between;
  justify-content: center;
	justify-content: space-around;
}



.flex-grid-4 .flex-item {
 	border: solid 10px lime;
  width: 80%;
	padding: 10px;
	margin: 10px;
}


.flex-item {
/*background: #f4f4f4;*/
  padding: 20px;
 	border: solid 0px #999;
	margin: 10 auto;
}


.flex-grid-2 .flex-item {
	width: 45%;
}

.flex-grid-3 .flex-item {
  width: 33%;
  x-max-width: 350px;
}

.flex-grid-4 .flex-item {
	border: solid 10px #ccc;
	width: 25%;
}

@media (max-width: 600px) {

  .flex-grid,
  .flex-grid-3 {
   display: block;
  }

  .flex-grid .flex-item,
  .flex-grid-2 .flex-item,
  .flex-grid-3 .flex-item,
  .flex-grid-4 .flex-item {
    width: 90%;
    margin: 0 0 10px 0;
  }
}