#home {
	padding: 4% 0;
}
div#home[role="main"] ul#tiles-panel li {
	display: inline-block;
	list-style: none outside none;
	vertical-align: top;
}

.tile {
	-moz-box-sizing: border-box;
	background: none repeat scroll 0 0 #F0F1F4;
	border-bottom: 3px solid #06b0c6;
	display: inline-block;
	height: 176px;
	text-decoration: none;
	vertical-align: top;
	width: 176px;
	margin: 5px 5px;
}

.tile h1 {
	color: #253340;
	display: block;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 10px;
	text-decoration: none;
	white-space: nowrap;
	text-overflow : ellipsis;
	overflow : hidden;
	text-align : center;
}

.tile img {
	position: relative;
	width:48px;
	height:48px;
	transition: transform 0.15s ease 0s;
    transform: scale3d(1, 1, 1);
}
.tile:hover img {
	transform: scale3d(1.1, 1.1, 1.1);
}

.tile p {
	color: #6A747E;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 0 10px;
	text-align: center;
}

@media only screen and (max-width: 480px) {
	h1 {
		font-size : 24px;
	}

	div[role=main]#home   ul#tiles-panel  li {
		display: block; /*passage en block pour affichage les uns en dessous des autres */
		position : relative;
	}

	/*Tiles*/
	ul {
		padding : 0;
	}

	.tile {
		width : 97%;
		height : auto;
		display : block;
		border-bottom : 0px;
		border-left: 3px solid #06b0c6;
	}

	.tile  h1 {
		padding : 0;
	}

	.tile  h1, .tile p {
		margin-left : 50px;
	}

	.tile img {
		position: absolute;
		top : 5px;
		left : 5px;
		width : 45px;
		height : 45px;
		margin : 0 5px;
	}
}
/*
Architechture :

<div id="home" role="main">
	<ul id="tiles-panel">
		<li>
			<a class="tile" href="gestionMembre.php">
				<h1>Membres</h1>
				<img src="../ATTAC_Images/team.png">
				<p>Tu pourras ajouter des membres, et gérer leurs espaces.</p>
			</a>
		</li>
	</ul>
</div>

*/