/* Additional CSS for the home page */

.home footer { border-top: none; margin-top: 4px; background-color: #aeb7b5; color: #fff; }
.home footer div.language a { color: #fff; border-color: #fff; }
.home footer div.language a:hover { color: #666; background-color: #fff;}

.tiles { display: flex; flex-flow: column nowrap; align-items: center; width: 100%; color: #000;  }
.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; margin: 2rem; }
.small-tiles h1
{
	font-size: clamp(2.0rem, 2vw, 2.8rem);
	line-height: 3.2rem;
	margin: 0 0 0.2em 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: wrap;
	text-wrap: balance;
	line-clamp: 4; -webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}
.small-tiles h3 { color: #389f83; font-size: 1.3rem; font-weight: normal; margin-bottom: 1rem; }

.tile { background-color: #f6f6f4; outline: none; margin: 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 .cta a { color: #fff; font-size: 1.5rem; background-color: #6bc7ae; border-radius: 1000px; display: inline-block; padding: 0.2rem 1.2rem 0.2rem; margin-top: 0.6rem; white-space: nowrap; }
.tile .cta a:hover, .tile .tile-text h1 a:hover { border-bottom-color: transparent; filter: brightness(96%); }
.tile .cta a:active, .tile .tile-text h1 a:active { border-bottom-color: transparent; filter: brightness(92%); }
.tile .tile-text h1 a { cursor: pointer; }

.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 0.9rem 3.5rem; height: auto; flex: 1 1 auto; }
.tile.blog-post h1 { line-clamp: 2; -webkit-line-clamp: 2; }
.tile.blog-post h3 { margin-left: 3.5rem; margin-bottom: 0.5rem;}
.tile.blog-post .post-content { padding: 1rem 0 0 3.5rem; 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 .post-paragraph
{ overflow: hidden;
	text-overflow: ellipsis;
	white-space: wrap;
	text-wrap: balance;
	line-clamp: 4; -webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}
.tile.blog-post img.icon { position: relative; width: 3.5rem; height: 3.5rem; padding: 0px; }
.tile.blog-post .cta { height: auto; margin-left: 3.5rem; flex: 1 1 auto; }

.tile.product h1 { text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
.tile.product-1, .tile.product-18
{
	color: #fff;
	background: linear-gradient(0deg, light-dark(#fcfcfc, #333) 0%, rgba(111, 215, 235, 0) 68%), url("assets/images/noise.png"), linear-gradient(0deg, light-dark(#fcfcfc, #333) 0%, #6fd7eb 33%);
}
.tile.product-1 .cta a, .tile.product-18 .cta a { background-color: #4d4d4d; }
.tile.product-2 { color: #fff; background-color: #8fd6ad; }
.tile.product-2 .cta a { background-color: #4d4d4d; }
.tile.product-3 { color: #fff; background-color: #c89da6; }
.tile.product-3 .cta a { background-color: #4d4d4d; }

.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 { text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
.tile.image-full figure
{
	left: 0; top: 0; height: inherit; display: flex; flex-direction: column; justify-content: center; 
}
.tile.image-full img { width: 100%; height: 100%; object-fit: cover; }
.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 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 figure { width: auto; left: -56px; top: -3%; }

.tile.image-left figure img, .tile.image-right figure img { width: 100%; }

.tile.image-full h1, .tile.product h1, .tile.image-right h1, .tile.image-left h1
{
    font-size: clamp(3.0rem, 2.5vw, 4rem);
    line-height: clamp(3.5rem, 2.8vw, 4.4rem);
}

.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%;
	min-height: 600px;
	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: clamp(min(90%, 600px), 75%, min(75%, 1680px)); /* max-height: 720px; filter: saturate(50%) contrast(75%); */ }
.tile.primary.special img { max-width: 100%; }
.tile.primary h1
{
	text-align: center;
	margin-bottom: 2vw;
	font-family: 'typoldbook', sans-serif;
	font-size: clamp(3rem, 5vw, 8rem);
	line-height: clamp(3rem, 5vw, 8rem);
	font-weight: bold;
	color: #FFF;
	text-wrap: balance;
	/* text-shadow: 0 0 20px rgba(0, 0, 0, 0.2) */
	text-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
	-webkit-text-stroke: 1px 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: calc(33.33% - 4rem);
	max-width: 560px;
	margin: 2rem;
	border-radius: 2rem;
	outline: none;
	box-shadow: 0px 0rem 2rem rgba(0, 0, 0, 0.15);
}
.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.primary > div { padding-top: 32%; }
	.tile.primary .tile-text { padding-bottom: 8%; }
	.tile img.tile-illustration { display: none; }
}
@media screen and (max-width: 640px)
{
	.tile.primary > div { padding-top: calc(82px + 10%); }
}
@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; }
}
@media screen and (max-width: 1280px)
{
	.tile.secondary { width: calc(50% - 4rem); max-width: 100%; height: auto; min-height: 30vw; }
}
@media screen and (max-width: 980px)
{
	.tile > div { height: auto; padding: 4.2% 8% 4.8% 12%; }
	.tile a { margin-top: 0; }
	.tile.blog-post > div { margin-left: -3rem; }
	.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; min-height: 30vw; }
	.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.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: 1400px)
{
	.tile:not(.primary) p { font-family: typoldbook, sans-serif; font-size: 1.3rem; line-height: 2.3rem; margin-bottom: 0.8rem; }
	.tile:not(.primary) 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: 640px)
{
	.tile.primary.special h1 { font-size: 4.0rem; line-height: 4.3rem; }
}

@media (prefers-color-scheme: dark)
{
	.tile { outline-color: #222; background-color: #2a2a2a; }
	.tiles { color: #fff; }
	.home footer { background-color: #2a2a2a; }
}