/* == HOW TO == */
#how-to { padding: 100px 0; height: 238px; }
#how-to .step { float: left; width: 180px; height: 238px; text-align: center; overflow: hidden; }
#how-to .step .icon { height: 160px; }
#how-to .step.step-1 .icon {  background: url('../img/step-1.png') no-repeat 50% 50%; }
#how-to .step.step-2 .icon {  background: url('../img/step-2.png') no-repeat 50% 50%;}
#how-to .step.step-3 .icon {  background: url('../img/step-3.png') no-repeat 50% 50%;}
#how-to .step.step-4 .icon {  background: url('../img/step-4.png') no-repeat 50% 50%;}
#how-to .arrow { float: left; width: 90px; height: 238px;}
#how-to .arrow.arrow-1,
#how-to .arrow.arrow-3 { background: url('../img/ht-arrow-1.png') no-repeat 50% 60%;}
#how-to .arrow.arrow-2 { background: url('../img/ht-arrow-2.png') no-repeat 50% 10%;}

@media all and (max-width: 1025px) {
	#how-to .step  {
		width: 25%;
	}
	#how-to .arrow  {
		display: none;
	}
}

@media all and (max-width: 769px) {
	#how-to {
		width: 100%;
		height: auto;
		padding: 10px 0 30px 0; 
		overflow: hidden;
	}
	#how-to .step {
		width: 50%;
		height: auto;
	}
}

@media all and (max-width: 481px) {
	#how-to .step {
		float: none;
		width: 100%;
	}
}