/* Additional CSS for the home page */

.home footer { border-bottom: 4px solid #fcfcfc; border-top: none; margin-top: 4px; background-color: #aeb7b5; color: #fff; }
.tiles { display: flex; flex-flow: column nowrap; align-items: center; width: 100%; color: #000; background-color: #f6f6f4; }
.tiles h1 { font-family: Foro-ExtraLight, serif; font-weight: 100; font-size: 2.8rem; line-height: 3.2rem; letter-spacing: 0.014em; margin-top: 0; }

.small-tiles { display: flex; flex-flow: row wrap; justify-content: center; max-width: 1680px; }
.small-tiles h1 { font-size: 2.8rem; line-height: 3.2rem; margin: 0 0 0.2em 0; }
.small-tiles h3 { color: #389f83; font-size: 1.3rem; font-weight: normal; margin-bottom: 1rem; }

.tile { background-color: #f6f6f4; outline: 4px solid #fff; margin: 4px 0 0 0; position: relative; overflow: hidden; }
.tile figure { position: absolute; line-height: 0; text-align: center; width: 100%; z-index: 0; }
.tile > div { display: flex; flex-flow: row nowrap; align-items: flex-start; position: relative; height: 100%; max-height: 100%; padding: 8%; }
.tile > div img.icon { margin-left: -1rem; width: 4rem; padding: 3.2rem 0.5rem 0 0; }
.tile .tile-text { z-index: 2; }
.tile p { margin-bottom: 1rem; }
.tile a { color: #fff; font-size: 1.5rem; background-color: #6bc7ae; border-radius: 4px; display: inline-block; padding: 0 0.65em 0.08em; margin-top: 0.6rem; white-space: nowrap; }
.tile a:active { background-color: #77dac0; }

.tile.blog-post > div { flex-flow: column nowrap; }
.tile.blog-post div.masthead-mini > a { background: transparent; padding: 0; margin: 0; }
.tile.blog-post img.masthead-mini { width: 12rem; margin: 0 0 1.2rem 3rem; height: auto; flex: 1 1 auto; }
.tile.blog-post .post-content { padding: 0.5rem 0 0 3rem; display: flex; flex-flow: column nowrap; justify-content: stretch; position: relative; max-width: 100%; overflow: hidden; flex: 3 1 auto; margin-top: -4rem; }
.tile.blog-post img.icon { position: relative; width: 4rem; height: 4rem; padding: 0 0.5rem 0 0; }
.tile.blog-post .cta { height: auto; margin-left: 3rem; flex: 1 1 auto; }

.tile.product h1 { font-size: 4.4rem; line-height: 4.6rem; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
.tile.product-1, .tile.product-18 { color: #fff; background-color: #6fd7eb; }
.tile.product-1 a, .tile.product-18 a { background-color: #4d4d4d; }
.tile.product-2 { color: #fff; background-color: #8fd6ad; }
.tile.product-2 a { background-color: #4d4d4d; }
.tile.product-3 { color: #fff; background-color: #c89da6; }
.tile.product-3 a { background-color: #4d4d4d; }
.tile.product-1 a:active, .tile.product-2 a:active, .tile.product-3 a:active { filter: brightness(133%); }

.tile.image-full { color: #fff; }
.tile.image-full > div { align-items: flex-end; }
.tile.image-full .darken { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); bottom: 0; z-index: 1; }
.tile.image-full h1 { font-size: 4.4rem; line-height: 4.6rem; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
.tile.image-full figure { left: 0; bottom: 0; height: 100%; max-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.tile.image-full img { width: 100%; height: auto; }
.tile.image-full a { background-color: #eb4600; }
.tile.image-full a:active { background-color: #eb5f1f; }
.tile.image-small { color: #fff; }
.tile.image-small > div { flex-flow: column nowrap; }
.tile.image-small figure { position: relative; padding: 0 25% 2%; }
.tile.image-small img { width: 100%; }
.tile.image-right h1 { font-size: 4.4rem; line-height: 4.6rem; }
.tile.image-right figure { width: auto; right: 0; bottom: 0; }
.tile.image-left > div { align-items: flex-end; }
.tile.image-left .tile-text { padding-bottom: 2%; }
.tile.image-left h1 { font-size: 4.4rem; line-height: 4.6rem; }
.tile.image-left figure { width: auto; left: -56px; top: -3%; }

.secondary-content { position: relative; width: 100%; display: flex; justify-content: center; }
.dummy-tiles { position: absolute; width: 100%; height: 392px; border-bottom: 4px solid #fff; display: none; margin: 8px 0 0 0; }

.tile.primary { width: 100%; height: 54vw; max-height: 780px; padding: 0; text-align: center; }
.tile.primary > div { padding: 14% 8% 4.8% 8%; flex-flow: column nowrap; align-items: center; justify-content: center; height: 100%; }
.tile.primary .tile-text { padding-bottom: 4%; }
.tile.primary figure { bottom: 0; }
.tile.primary img { max-width: 68%; }
.tile.primary.special img { max-width: 100%; }
.tile.primary h1
{
	text-align: center;
	margin-bottom: 3rem;
	font-family: Foro-ExtraLight, serif;
	font-size: 6.6rem;
	line-height: 6.7rem;
	font-weight: 100;
	margin-bottom: 2%;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
.tile.primary.special h1 { color: #fff; font-size: 9.0rem; line-height: 9.5rem; }
.tile.primary.product-1 .cta a { background-color: #00b3d6; }
.tile.primary.product-2 .cta a { background-color: #00c251; }
.tile.primary.product-3 .cta a { background-color: #d6002b; }

.tile.primary.special + .tile.primary { display: none; }

.tile.secondary { height: 23.3vw; max-height: 392px; width: 33.33%; max-width: 560px; }
.tile.secondary article.fragment { margin-bottom: 0; }
.tile.secondary.double .tile-text { flex: 1 1.5 auto; min-width: 25rem; }
.tile.secondary.double { width: 66.66%; max-width: 1120px; }
.tile.secondary.double > div { padding: 4%; }
.tile.secondary.double .tile-text { padding-right: 1.4rem; }
.tile.secondary.double div.tile-illustration { position: relative; padding-top: 1rem; flex: 1 1 auto; }
.tile.secondary.double img.tile-illustration { width: 100%; }

@media screen and (max-width: 600px)
{
	.tile.blog-post .post-paragraph { display: none; }
	.tile.image-small figure { display: none; }
	.tile.primary { min-height: 72vw; }
	.tile.primary > div { padding-top: 32%; }
	.tile.primary .tile-text { padding-bottom: 8%; }
	.tile.primary h1 { font-size: 2.8rem; line-height: 3.2rem; }
	.tile.primary img { max-width: 84%; }
	.tile img.tile-illustration { display: none; }
}
@media screen and (max-width: 640px)
{
	.tile.primary > div { padding-top: calc(82px + 10%); }
}
@media screen and (max-width: 1160px)
{
	.tile.secondary { height: 30vw; max-height: auto; }
}
@media screen and (min-width: 980px)
{
	.tile.image-full .tile-text { padding-bottom: 2%; }
	.tile.image-full h1, .tile.product h1 { max-height: 14vw; overflow: hidden; }
	.tile.image-full h1.shrink, .tile.product h1.shrink { font-size: 2.8rem; line-height: 3.2rem;  }
}
@media screen and (max-width: 980px)
{
	.tile > div { height: auto; padding: 4.2% 8% 4.8% 12%; }
	.tile > div img.icon { margin-left: -4rem; }
	.tile a { margin-top: 0; }
	.tile.blog-post > div { margin-left: -3rem; }
	.tile.blog-post img.icon { margin-left: -1rem; }
	.tile.image-full div { bottom: 0; }
	.tile.image-small > div { flex-flow: row nowrap; align-items: center; }
	.tile.image-small figure { width: 24vw; min-width: 172px; padding: 0 5% 0 0; }
	.tile.image-right figure { top: 8px; bottom: auto; }
	.tile.image-right img { top: 8px; bottom: auto; }
	.tile.image-left figure { left: 5%; top: -42%; }
	.tile.primary { min-height: 64vw; }
	.tile.primary img { max-width: 78%; }
	.tile.secondary { width: 100%; max-width: 100%; height: auto; }
	.tile.secondary.double { width: 100%; max-width: 100%; height: auto; }
	.tile.secondary.double > div { padding: 4.2% 8% 4.8% 12%; }
}
@media screen and (max-width: 600px)
{
	.tile.image-full h1, .tile.product h1 { font-size: 2.8rem; line-height: 3.2rem; }
	.tile.image-right h1 { font-size: 2.8rem; line-height: 3.2rem; }
	.tile.image-left h1 { font-size: 2.8rem; line-height: 3.2rem; }
}
@media screen and (max-width: 1000px)
{
	.tile.primary h1 { margin-bottom: 2.4rem; font-size: 5.2rem; line-height: 5.3rem; }
	.tile.primary.special h1 { font-size: 7.5rem; line-height: 7.8rem; }
}
@media screen and (max-width: 1160px)
{
	.tile.image-small figure { padding: 8% 25% 3%; }
}
@media screen and (max-width: 1280px)
{
	.tile.primary h1 { font-size: 6rem; line-height: 6.1rem; }
}
@media screen and (max-width: 1400px)
{
	.tile p { font-family: typoldbook, sans-serif; font-size: 1.3rem; line-height: 2.3rem; margin-bottom: 0.8rem; }
	.tile a { font-size: 1.3rem; }
}
@media screen and (min-width: 1600px)
{
	.tile > div { padding: 12%; }
	.dummy-tiles { display: block; }
}
@media screen and (max-width: 1600px)
{
	.small-tiles { width: 100%; max-width: 100%; }
}
@media screen and (min-width: 1600px) and (max-width: 980px)
{
	.tile.secondary.double > div { padding: 6%; }
}
@media (max-width: 84rem)
{
	.tile.primary h1 { margin-bottom: 2rem; font-size: 4.2rem; line-height: 4.3rem; }
}
@media (max-width: 800px)
{
	.tile.primary.special h1 { font-size: 5.5rem; line-height: 5.8rem; }
}
@media (max-width: 640px)
{
	.tile.primary h1 { margin-bottom: 1.4rem; font-size: 3.3rem; line-height: 3.4rem; }
	.tile.primary.special h1 { font-size: 4.0rem; line-height: 4.3rem; }
}
@media screen and (max-width: 532px)
{
	.tile.primary { min-height: 78vw; }
}