.ima-flexcontainer
{
	display: flex;
	flex-wrap: wrap;
}

.ima-flex
{
	flex: 25%;
	text-align: center;
}

.eingabefeld 
{
    width: 160px;
    text-align: center;	
    margin-bottom: 30px;
}

.ima-checkflex
{
	flex: 8%;
}
.ima-checktext
{
	flex: 42%;
}

.ima-checkbox
{
	width: 30px;
	height: 30px;
	border: 1px solid #ffcc00;
	cursor: pointer;
	text-align: center;
	margin-bottom: 20px;
}
.ima-checkbox >span
{
	font-size: 28px;
	color: #ffcc00;
	opacity: 0;
	padding: 0;
	margin: -1px 0 0 0; /* hier je nach border-dicke das x zentrieren */
}

.ima-checkbox-checked >span
{
	opacity: 1;
}

.ima-richtig
{
	border: 1px solid #218838;	
}
.ima-richtig >span
{
	color: #218838;	
}

.ima-falsch
{
	border: 1px solid #d30000;
}
.ima-falsch >span
{
	color: #d30000;	
}



@media only screen and (max-width: 1000px) {

	.ima-flex
	{
		flex: 50%;
	}
	
	.ima-bild1
	{
		order: 1;
	}
	.ima-bild2
	{
		order: 2;
	}
	.ima-eingabe1
	{
		order: 3;
	}
	.ima-eingabe2
	{
		order: 4;
	}
	.ima-bild3
	{
		order: 5;
	}
	.ima-bild4
	{
		order: 6;
	}
	.ima-eingabe3
	{
		order: 7;
	}
	.ima-eingabe4
	{
		order: 8;
	}						
}

@media only screen and (max-width: 560px) {
	.ima-checkflex
	{
		flex: 20%;
	}
	.ima-checktext
	{
		flex: 80%;
	}
	
	.ima-item1
	{
		order: 1;
	}
	.ima-item2
	{
		order: 2;
	}
	.ima-item3
	{
		order: 5;
	}
	.ima-item4
	{
		order: 6;
	}
	.ima-item5
	{
		order: 3;
	}
	.ima-item6
	{
		order: 4;
	}
	.ima-item7
	{
		order: 7;
	}
	.ima-item8
	{
		order: 8;
	}	
	
}
@media only screen and (max-width: 480px) {

	.ima-flex
	{
		flex: 100%;
	}
	
	.ima-bild1
	{
		order: 1;
	}
	.ima-eingabe1
	{
		order: 2;
	}
	.ima-bild2
	{
		order: 3;
	}
	.ima-eingabe2
	{
		order: 4;
	}
	.ima-bild3
	{
		order: 5;
	}
	.ima-eingabe3
	{
		order: 6;
	}
	.ima-bild4
	{
		order: 7;
	}
	.ima-eingabe4
	{
		order: 8;
	}
	
	.img-fluid
	{
		max-width: 300px;
	}				
}