/**************************************************************/
/* tiles                                                      */
/**************************************************************/

@import url('_Color.css');

.TileWrapper {
	display: table;
	width: 100%;
	text-align: center;
}

.Tile {
	width: 240px;
	height: 240px;
	padding: 20px;
	margin: 20px;
	border: 1px solid var( --color-light );

	display: inline-block;
	
	border-radius: 28px;

	background-color: #f7f7f7;
    opacity: 0.7;
    transition: opacity .9s ease;
}

.TileIcon {
	height: 50%;
	display: block;
}

.TileIcon > .SvgIcon {
    stroke: var(--color-light);
    width: 110px;
}

.TileHead {
	height: 15px; 
	
	color: var( --color-dark );
	text-align: center;
	font-style: italic;
}

.TileText {
	height: 30%;
	overflow: hidden;
}

 
@media ( max-width: 900px ) 
{
	.Tile {
		width: 120px;
		height: 120px;
		padding: 10px;
		margin: 10px;
	
	}

	.TileIcon {
		padding-top: 12px;
		height: 40%;
		display: block;
	}
	
	.TileIcon > .SvgIcon {
		stroke: var(--color-light);
		width: 55px;
	}


	h1.TileHead 
	{
		font-size: 14px;
		padding-top: 8px;
	}

	.TileHead {
		height: 12px; 
	}

	.TileText {
		height: 40%;
		font-size: 2vh;
		line-height: 150%;
		overflow: hidden;
		visibility: hidden;
	}
}


a.Tile
{
	color: #000;
	text-decoration: none;
}

a.Tile:hover .SvgIcon {
    cursor: pointer;
    stroke: var( --color-bright );
    /*color: #8eb824;*/
}


.Tile:hover {
	box-shadow: 2px 2px 5px 3px #ccc;
	opacity: 1.0;
}