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

@import url('_Color.css');

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

.Tile {
	border: 1px solid var( --color-light );

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

.Tile.Large {
	width: 240px;
	height: 240px;
	padding: 20px;
	margin: 20px;
	border-radius: 28px;
}

.Tile.Mini {
	width: 120px;
	height: 120px;
	padding: 10px;
	margin: 10px;
	border-radius: 18px;
}

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

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

.TileIcon.Large > .SvgIcon {
    width: 110px;
}

.TileIcon.Mini > .SvgIcon {
    width: 55px;
}

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

.TileHead.Large {
	height: 15px; 
}

.TileHead.Mini {
	height: 12px; 
}

h1.TileHead.Mini 
{
	font-size: 17px;
	padding-top: 1px;
}


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


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

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


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

	.TileHead.Large {
		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 );
}

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