#home-menu {
	margin: 0;
}

#home-menu .ui-li.ui-btn {
	width: 46%;
	height: 100px;
	margin: 9px 2% 0 2%;
	float: left;
	border-width: 0;
}

#home-menu .ui-btn-text {
font-size: 16px;
line-height: 20px;
}

#home-menu .ui-li.ui-btn-inner {
	border: none;
	border-width: 0;
	margin: 0;
	padding: 5px;
	border-radius: 4px;
}

#home-menu .ui-btn-text {
	text-align: center;
	text-shadow: none;
}

#home-menu .ui-btn-text a {
	color: white;
}

#home-menu .ui-btn-text .icon {
	float: none;
	margin: 10px auto 5px auto;
	width: 48px;
	height: 48px;
}

#home-menu .ui-btn-text .icon-transport {
	margin: 7px auto 2px auto;
	width: 54px;
	height: 54px;
}

#home-menu .ui-btn-text .icon-search {
	margin: 14px auto 9px auto;
	width: 40px;
	height: 40px;
}

#home-menu .ui-btn-inner,
#home-menu .ui-btn-text,
#home-menu .ui-link-inherit,
#home-menu .ui-li-thumb {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}

#home-menu .ui-link-inherit {
	padding: 0 !important;
	position: relative;
}

#home-menu .ui-li,
#home-menu .ui-btn-text,
#home-menu .ui-link-inherit,
#home-menu .ui-li-thumb {
	-webkit-border-radius: inherit;
	border-radius: inherit;
}

#home-menu .ui-icon {
	display: none;
}
	
#home-menu .ui-li-heading,
#home-menu .ui-li-desc {
	white-space: normal;
	overflow: visible;
	position: absolute;
	left: 0;
	right: 0;
}
	
@media all and (min-width: 341px){
	#home-menu .ui-content {
		padding: 10px;
	}

	#home-menu .ui-li.ui-btn {
	height: 110px;
	}
	
	#home-menu .ui-btn-text {
		font-size: 20px;
		line-height: 25px;
	}
}
	
/* 3 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
@media all and (min-width: 767px){
	#home-menu .ui-content {
		padding: 10px;
	}

	#home-menu .ui-li.ui-btn {
	width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
	margin: 9px 1.2%;
	height: 200px;
	}
	
	#home-menu .ui-btn-text .icon {
	float: none;
	margin: 40px auto 10px auto;
	width: 72px;
	height: 72px;
	}
	
	#home-menu .ui-btn-text .icon-search {
	margin: 43px auto 13px auto;
	width: 66px;
	height: 66px;
	}
	
	#home-menu .ui-btn-text {
		font-size: 24px;
		line-height: 24px;
	}
}

/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
@media all and (min-width: 1020px){
	#home-menu .ui-content {
		padding: 10px;
	}
	/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
	By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
	#home-menu {
		max-width: 1000px;
		margin: 0 auto;
	}
	/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
	but we stick to percentage values for demo purposes. */
	#home-menu .ui-li.ui-btn {
		width: 23%;
		margin: 10px 1%;
	}
}