/*
Theme Name: (custom)
Description: Flexbox CSS - (theme independend)
Version: 1.0
Author: px
Author URI: http://www.peki.at
Template: (generic)
------------------------------------------
170929: creation
250831: cleanup
------------------------------------------
Issues:
.flex-grid-2 .flex-item: no definition, why?
------------------------------------------
*/


*, *: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 {
/* 250831: hier nix? - */

}

.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;
	
}