@media only screen and (max-width: 475px) {
	/* Don't mess with the page width please! */
	div.multi-step												{ overflow:hidden; }

	/* Move the background, try to use all the available space */
	div.multi-step ol > li										{ background-position:-8px 50%; }

	/* Hide title and subtitles */
	div.multi-step ol > li .title,
	div.multi-step ol > li .subtitle							{ display:none; }

	/* Make the steps more compact, try to keep the layout from falling apart! */
	div.multi-step ol > li .wrap								{ min-height:1px; padding:4px 0 4px 1em; }
	div.multi-step ol > li:first-child .wrap					{ padding-left:1em; }

	/* The numbers should change style and position, since it is the only thing that is visible now */
	div.multi-step ol > li .wrap:before							{ display:inline-block; position:static; background:none; border:none; width:auto; height:auto; line-height:1; font-size:1.5em; font-weight:bold; text-align:left; }
}


@media only screen and (min-width: 476px) and (max-width: 620px) {
	/* Don't mess with the page width please! */
	div.multi-step												{ overflow:hidden; }

	/* And another decrease in font size */
	div.multi-step ol > li p									{ font-size:.8em; }

	/* Loose the bolds, might get save some space, to keep the contents inside the “box” */
	/*div.multi-step ol > li .title								{ font-weight:normal; word-break:break-all; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }*/

	/* Hide the subtitles */
	div.multi-step ol > li .subtitle							{ display:none; }

	/* Make the steps more compact */
	div.multi-step ol > li .wrap								{ min-height:1px; padding:32px 0 4px 24px; }
	div.multi-step ol > li:first-child .wrap					{ padding-left:28px; }

	/* Make the number a little smaller */
	div.multi-step ol > li .wrap:before							{ width:20px; height:20px; line-height:19px; font-size:0.7em; }

	/* Five steps, with text, in less than 480 pixels, cannot really work, but please try to keep it -kind of- nice! */
	div.multi-step.five-steps ol > li .title					{ max-height:4em; }

	/* specific widths are needed for each step (LI) since table-cell are only as wide as it's content needs by default
	   you should not really need less than three or more than five steps! */
	div.multi-step.three-steps ol > li							{ width:35%; }
	div.multi-step.three-steps ol > li:first-child				{ width:30%; }

	div.multi-step.four-steps ol > li							{ width:26%; }
	div.multi-step.four-steps ol > li:first-child				{ width:22%; }

	div.multi-step.five-steps ol > li							{ width:21%; }
	div.multi-step.five-steps ol > li:first-child				{ width:16%; }
}



@media only screen and (min-width: 621px) and (max-width: 700px) {
	/* Don't mess with the page width please! */
	div.multi-step												{ overflow:hidden; }

	/* And another decrease in font size */
	div.multi-step ol > li p									{ font-size:.9em; }

	/* Loose the bolds, might get save some space, to keep the contents inside the “box” */
	/*div.multi-step ol > li .title								{ font-weight:normal; word-break:break-all; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }*/

	/* Hide the subtitles */
	div.multi-step ol > li .subtitle							{ display:none; }

	/* Make the steps more compact */
	div.multi-step ol > li .wrap								{ min-height:1px; padding:8px 0 8px 48px; }
	div.multi-step ol > li:first-child .wrap					{ padding-left:52px; }
	/* Make the number a little smaller */
	div.multi-step ol > li .wrap:before							{ width:20px; height:20px; line-height:19px; font-size:0.7em; }

	/* Numbers AND Titles don't reaaly fit but try to keep it nice anyway */
	div.multi-step.five-steps ol > li .wrap						{ padding-top:32px; padding-left:20px; }
	div.multi-step.five-steps ol > li:first-child .wrap			{ padding-left:24px; }

	/* specific widths are needed for each step (LI) since table-cell are only as wide as it's content needs by default
	   you should not really need less than three or more than five steps! */
	div.multi-step.five-steps ol > li							{ width:21%; }
	div.multi-step.five-steps ol > li:first-child				{ width:16%; }
}