:root{
	--boxGap: 20px;
	--boxGapBottom: 20px;
}


.iconbox_wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.iconbox{
	background-color: #f8f8f8;
	height: 300px;
	margin: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px; 
	-moz-background-clip: padding; 
	-webkit-background-clip: padding-box; 
	background-clip: padding-box;
}


.iconbox:nth-child(2n ){
	background-color: #181719;
}

.iconbox:nth-child(3n ){
	background-color: #e0d5ce;
}



.iconbox.w1_4{
	width:calc(25% - 6px); 
	margin-bottom: 12px;
	padding: 20px;
}

.iconbox.w1_3{
	width:calc(33.332% - 6px);
	max-width: 300px;
	margin-bottom: 12px;
	padding: 20px;
}

.iconbox.w1_2{
	width:calc(50%  - 6px); 
	margin-bottom: 12px;
	padding: 20px;
}

.iconbox.w2_3{
	width:calc(66.662% - 6px);
	margin-bottom: 12px;
	padding: 20px;
}

.iconbox.w1_1{
	width:calc(100% - 6px); 
	margin-bottom: 12px;
	padding: 20px;
}


.icon{
	margin: -60px auto 20px auto;
	width: 50%;
	/*height: 100px;*/
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%; 
	-moz-background-clip: padding; 
	-webkit-background-clip: padding-box; 
	background-clip: padding-box;
	

}


.iconbox h2{
	font-family: zs;
	color: var(--h1color);
	text-transform: uppercase;
	font-size: 21px;
	text-align: center;
}

/*Die Eigenarten der einzelnen Grid-Variationen */

.th3_gap{	margin: 20px; }


@media screen and (max-width: 1025px) {
	.iconbox.w1_4, .iconbox.w1_3,	.iconbox.w1_2,	.iconbox.w2_3, .iconbox.w1_1{	width: calc(50% - 6px); }
}
@media screen and (max-width: 768px) {
	.iconbox.w1_4,	.iconbox.w1_3,	.iconbox.w1_2,	.iconbox.w2_3,	.iconbox.w1_1{ width: 100%; margin-bottom: 60px	}
}