* {
	box-sizing: border-box;
}

p, h4 {
	margin: 5px;
	user-select: none;
}

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}
body {
	height: 100%;
	overflow: hidden;
}
[class*="flex"] {
	flex: none;
	align-self: auto;
}

@media all {
	.flex2 {
		flex-basis: 200px;
	}
	.flex4 {
		flex-basis: 400px;
	}
	.flex6 {
		flex-basis: 600px;
	}
	.flex8 {
		flex-basis: 800px;
	}
	.flex10 {
		flex-basis: 1000px;
	}
	.flex12 {
		flex-basis: 1200px;
	}
	
	.flex4r {
		flex-basis: 400px;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}
	
	.flexa {
		flex-basis: 100%;
	}
}

@media all and (max-width: 1215px) {
	.flex4r {
		flex-basis: 800px;
		
	}	
	.flexa {
		flex-basis: 50%;
	}
}