.tiles {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
}

.tiles.col1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media only screen and (min-width: 0px) {
	.tiles.col2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.tiles.col4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.tiles.col5 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.tiles.col6 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

	a.tile {
		display: inline-block;
	}

	.tile {
		width:100%;
		max-width: 100%;
		height: auto;
		border-radius: 7px;
		transition: .2s ease all;
		background-color: #fff;
		text-align: center;
		color:#000;
		box-sizing: border-box;
		padding: 8px 15px;

		margin-bottom: 0px;

		background-color: var(--box-bg-color);
		color:var(--box-text-color);
		border:1px solid var(--box-border-color);
	}

	.tile:hover {
		box-shadow:0 5px 20px rgba(0,0,0,.18);
		-webkit-transform:scale(1.03);
		transform:scale(1.03);
		outline: 0px;
		color:#000;
		color:var(--box-text-hover-color) !important;
	}

	.tile .icon {
		display:block;
		color: #0060d0;
		fill: #f4f8fd;
		stroke: #0060d0;
		stroke-width: .9px;
		margin-bottom: 1.2em;
		pointer-events: none;
	}
	/*.tile-lg span.tile-icon .svg-inline--fa { font-size:3rem; }*/
	.tile .title {
		display:block;
		width: 100%;
		font-weight: 500;
		font-size: 1.1em;
		line-height: 1.2em;
		text-align: center;
		white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	}

	.tile .description {
		display:block;
		margin-top:5px;
		padding-bottom: 8px;
		font-size: 0.8rem;
		width: 100%;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}


	.tile .icon {
		/* display:block; */
		text-align:center;
		height:auto;
		padding-top:10px;

		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.tile .icon.icon-img { padding: 0px 20%; }
	/* .tile .icon img { width: 55%; } */
	.tile .icon img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
	.tile .icon .svg-inline--fa { font-size:2.4rem; padding-top:5px; }

	.tile .icon.fixed-height { height: 120px; }
}


@media only screen and (min-width: 389px) {
	.tiles.col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tiles.col4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tiles.col5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tiles.col6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* .tile .icon img { width:auto; max-height: 100px; } */
	.tile .icon.icon-img { padding: 10px 30%; }
	.tile .icon.fixed-height { height: 70px; }
}



@media only screen and (min-width: 992px) {
	.tiles.col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tiles.col4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tiles.col5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.tiles.col6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	/* .tile { height: auto; } */

	.tile .title { font-size: 1.4em; }
	.tile .icon .svg-inline--fa { font-size:3rem; padding-top:5px; }

	.tile .icon.icon-img { padding: 10px 20%; }
	.tile .icon.fixed-height { height: 100px; }
	/* .tiles.col6 .tile .icon img { width: 40%; } */
}




/* Tile colors */
.tile-lightblue { background-color: #88aebe; color:#fff; }
.tile-lightblue:hover { color:#fff; }
.tile-blue { background-color: #0a5ac3; color:#fff !important; }
.tile-blue:hover { color:#fff; }
.tile-darkblue { background-color: #0b335e; color:#fff; }
.tile-darkblue:hover { color:#fff; }
.tile-navy { background-color: #5f7978; color:#fff; }
.tile-navy:hover { color:#fff; }
.tile-green { background-color: #00a400; color:#fff; }
.tile-green:hover { color:#fff; }
.tile-lightred { background-color: #b9513e }
.tile-red { background-color: #b9090b; color:#fff !important; }
.tile-purple { background-color: #5535af; color:#fff; }
.tile-purple:hover { color:#fff; }
.tile-pink { background-color: #ff6780; color:#fff; }
.tile-pink:hover { color:#fff; }
.tile-lightpurple { background-color: #bf56bc; color:#fff; }
.tile-lightpurple:hover { color:#fff; }
.tile-lightgrey { background-color: #ebebeb; color:#333; }
.tile-lightgrey:hover { color:#333; }
.tile-gray { background-color: #5d5d5d; color:#fff; }
.tile-gray:hover { color:#fff; }
.tile-dark { background-color: #1f1f1f; color:#fff; }
.tile-dark:hover { color:#fff; }
.tile-red { background-color: #b9090b }
.tile-orange { background-color: #d44a27; color:#fff; }
.tile-orange:hover { background-color: #CB3915; color:#fff; }
.tile-lightorange { background-color: #d9712b; color:#fff; }
.tile-lightorange:hover { color:#fff; }
.tile-yellow { background-color: #f4f71b; color:#4d4d4d; }
.tile-yellow:hover { color:#4d4d4d !important; }
.tile-lightyellow { background-color: #c7b05e; color:#4d4d4d; }
.tile-white { background-color: var(--box-bg-color); color:var(--box-text-color); border:1px solid var(--box-border-color); }
.tile-white:hover { color:var(--box-text-hover-color) !important; }

.tile-faded {
	border: 3px dotted var(--box-border-color);
	color: var(--muted-text-color);
}

.tile-faded .svg-inline--fa { color: var(--muted-text-color); }