@media screen {
	.imageSteps {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap;
		text-align: center;
		position: relative;
		z-index: 0px;
	}

	.imageSteps div {
		background: #d5d5d5;
		padding: 10px;
		margin-bottom: 10px;
		transition: transform .2s;
		box-shadow: 4px 4px 5px gray;
	}

	.imageSteps div img {
		max-width: 400px;
		height: auto;
		margin: 0 0 0;
		padding: 15px;
	}

	

	.imageSteps div:hover {
		transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
		position: relative;
		z-index: 10;
	}
}
@media only screen and (min-width: 768px)
{
	.imageSteps div {
		-webkit-box-flex: 0;
		-ms-flex: 0 1 29%;
		flex: 0 1 29%;
		margin-bottom: 20px;
	}

	.imageSteps {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-ms-flex-pack: distribute;
		justify-content: space-around;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}
}