/* --- TILE LIST (WHITE WITH ICON AND BUTTON) ----------------------------- */
.tile-list-white {background-color: #ffffff; padding: 50px 0 50px 0;}

.tile-list {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
	.tile-list .tile {
		display: inline-block;
		background-color: #fff;
		text-align: center;
		width: 30%;
		padding: 25px 1% 25px 1%;
		font-size: 14px; line-height: 20px;
		position: relative;
	}
	.tile-list .tile:nth-child(n+4) {
		margin-top: 20px;  
	}
	
		.tile-list .tile img {
			max-width: 100%;
		}
		.tile-list .tile img.icon {
			display: inline-block;
			margin: 0 0 10px 0;
			height: 55px;
			width: auto;
		}
		
		.tile-list .tile h2 {
			display: block;
			margin: 0 0 10px 0;
			font-size: 17px; line-height: 23px;
			text-transform: uppercase;
		}
		
		.tile-list .tile p {
			font-size: 14px; line-height: 20px;
			margin: 0 0 20px 0;
		}
		
		.tile-list .tile a.button {
			display: inline-block;
			font-size: 15px; line-height: 15px;
			background-color: #fdda24; /* yellow */
			color: #004330; /* dark green */
			text-decoration:none; text-align:center;
			padding: 10px 30px 10px 30px;
			font-weight: 700;
			cursor: pointer;
		}
			.tile-list .tile a.button:hover {
				background-color: #ffe661; /* light yellow */
				text-decoration:none;
				cursor: pointer;
			}
			
/* --- TILE LIST (GRAY BG WITH ORANGE CORNERS) ----------------------------- */
.tile-list-gray  {background-color: #f1f1f1; padding: 50px 0 50px 0;}

	.tile-list-gray .tile-list .tile {
		text-align: left;
		width: 28%;
		padding: 25px 2% 25px 2%;
	}
	
	.tile-list-gray .tile-list .tile::before {
		content: ''; position: absolute; top: 0; left: 0;
		border-bottom: 15px solid transparent;
		border-right: 15px solid transparent;
		border-top: 15px solid #e47d44; /* orange */
		border-left: 15px solid #e47d44; /* orange */
	}
	
		.tile-list-gray .tile-list .tile .tag {
			color: #c05131; /* orange */
			font-size: 11px; line-height: 17px;
			font-weight: 700; text-transform: uppercase;
		}
	
		.tile-list-gray .tile-list .tile h2 {
			font-size: 22px; line-height: 28px;
			font-weight: 500; text-transform: none;
		}

        .tile-list-gray .tile-list .tile a {
		    font-weight: 700; 
	    }

/* --- TILE LIST CONTACTS ----------------------------- */
.tile-list-contacts  {background-color: #f1f1f1;}

	.tile-list-contacts .tile-list .tile {
		text-align: left;
		width: 28%;
		padding: 40px 2% 20px 2%;
        box-shadow: #c4c4c4 0 1px 3px 1px;
        border-radius: 3px;
        margin-bottom: 40px;
	}
    .tile-list-contacts .tile:last-of-type {border: 0; box-shadow:none; background: none;}

        .tile-list-contacts .tile-list .tile h3 {
            font-size: 25px; line-height: 33px; 
            text-align:center; display:block; margin: 0 0 30px 0; 
        }
        .tile-list-contacts .tile-list .tile p {
			font-size: 17px; line-height: 27px;
			text-align:left; display:block; padding: 25px 5px 0 5px; margin: 0 0 25px 0; border-top: 1px solid #e8e8e8;
		}

/* --- MOBILE MEDIA QUERIES ----------------------------- */
@media screen and (max-width: 1300px) {		
	.tile-list-white  {padding: 50px 5% 50px 5%;}
    /* TILE LIST (GRAY) */
	.tile-list-gray  {padding: 50px 5% 50px 5%;}
}
@media screen and (max-width: 980px) {
    .tile-list .tile {
		text-align: left;
		width: 94%;
		padding: 25px 5% 25px 5%;
		margin-top: 20px;
	}
	.tile-list .tile:nth-child(1) {
		margin-top: 0px;  
	}
		.tile-list .tile img.icon {
			display: block;
			margin: 0 0 0 0;
			float: left;
			width: 65px;
			height: auto;
		}
		.tile-list .tile h2, .tile-list .tile p, .tile-list .tile a.button {
			margin-left: 100px;
		}
		
	/* TILE LIST (GRAY) */
	.tile-list-gray .tile-list .tile {
		text-align: left;
		width: 94%;
		padding: 25px 5% 25px 5%;
		margin-top: 20px;
	}	
	.tile-list-gray .tile-list .tile:nth-child(1) {
		margin-top: 0px;  
	}
		.tile-list-gray .tile-list .tile h2, .tile-list-gray .tile-list .tile p, .tile-list-gray .tile-list .tile a.button {
			margin-left: 0px;
		}

    /* TILE LIST CONTACTS */
    .tile-list-contacts .tile-list .tile {
		text-align: left;
		width: 44%;
		padding: 40px 2% 20px 2%;
        margin-top:0;
	}
}
@media screen and (max-width: 750px) {
    /* TILE LIST CONTACTS */
    .tile-list-contacts .tile-list .tile {
		text-align: left;
		width: 94%;
		padding: 40px 5% 20px 5%;
	}
}