body {
	background-color: transparent;
}

body > .home-block {
	position: relative;
	width: 100%;
	margin-top: -4.375rem;
	z-index: 0;
}

.home-block {
	position: relative;
	padding-top: 4.375rem;
	height: 100vh;
	min-height: 36rem;
	max-height: 60rem;
	overflow-x: hidden;
	overflow-y: visible;
	text-align: center;
	color: white;
	/* This background-image serves as a fallback where the
	   video or ken burns images fail to work. */
	background-image: url('/static/images/home-bg.jpg');
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: fixed;
}

/* Safari mobile does not play nice with fixed
   background-attachment. There is little choice but to get
   shot of it in a Safari hack. */
.safari-browser .home-block { background-attachment: scroll; }

.home-block > video {
	position: fixed;
	left: 0;
	top: 0;
	min-width: 100%;
	height: inherit;
	max-height: inherit;
	width: auto;
	z-index: -100;
	background-size: cover;
	object-fit: cover;
	overflow: hidden;
	background-image: url('/static/images/home-bg.jpg');
	background-position: 50% 50%;
	background-size: cover;
}

.home-block > .unmute-thumb {
	position: absolute;
	right: 20px;
	bottom: 20px;
	background-color: yellow;
	width: 30px;
	padding-top: 30px;

	background-image: url('/static/images/sprites.svg?v=20241104');
	background-position: -77px -360px;
	background-color: transparent;
	background-size: auto;
}

.home-block > .mute-thumb {
	background-position: 0 -360px;
}
.home-block.with-logos > .unmute-thumb {
	bottom: 120px;
}

body > .home-block.with-logos + .white-block {
	margin-top: 0;
}

.home-block > .logos-index {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.82);
	/* width: 100%; */
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	z-index: 3;
}

.logos-index {
	white-space: nowrap;
	min-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.logos-index > li {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

.logos-index > li > .partner-logo-thumb {
	width: 250px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.logos-index {
	-webkit-animation: slideshow 10s linear infinite;
	        animation: slideshow 10s linear infinite;
}

.n4-logos-index {
	-webkit-animation: slideshow 6s linear infinite;
	        animation: slideshow 6s linear infinite;
}

.n5-logos-index {
	-webkit-animation: slideshow 7.5s linear infinite;
	        animation: slideshow 7.5s linear infinite;
}

.n6-logos-index {
	-webkit-animation: slideshow 9s linear infinite;
	        animation: slideshow 9s linear infinite;
}

.n7-logos-index {
	-webkit-animation: slideshow 10.5s linear infinite;
	        animation: slideshow 10.5s linear infinite;
}

.n8-logos-index {
	-webkit-animation: slideshow 12s linear infinite;
	        animation: slideshow 12s linear infinite;
}

.n9-logos-index {
	-webkit-animation: slideshow 13.5s linear infinite;
	        animation: slideshow 13.5s linear infinite;
}

.n10-logos-index {
	-webkit-animation: slideshow 15s linear infinite;
	        animation: slideshow 15s linear infinite;
}

.n11-logos-index {
	-webkit-animation: slideshow 16.5s linear infinite;
	        animation: slideshow 16.5s linear infinite;
}

.n12-logos-index {
	-webkit-animation: slideshow 18s linear infinite;
	        animation: slideshow 18s linear infinite;
}

.n13-logos-index {
	-webkit-animation: slideshow 19.5s linear infinite;
	        animation: slideshow 19.5s linear infinite;
}

.n14-logos-index {
	-webkit-animation: slideshow 21s linear infinite;
	        animation: slideshow 21s linear infinite;
}

.n15-logos-index {
	-webkit-animation: slideshow 22.5s linear infinite;
	        animation: slideshow 22.5s linear infinite;
}

.n16-logos-index {
	-webkit-animation: slideshow 24s linear infinite;
	        animation: slideshow 24s linear infinite;
}

.n17-logos-index {
	-webkit-animation: slideshow 25.5s linear infinite;
	        animation: slideshow 25.5s linear infinite;
}

.n18-logos-index {
	-webkit-animation: slideshow 27s linear infinite;
	        animation: slideshow 27s linear infinite;
}

.n19-logos-index {
	-webkit-animation: slideshow 28.5s linear infinite;
	        animation: slideshow 28.5s linear infinite;
}

.n20-logos-index {
	-webkit-animation: slideshow 30s linear infinite;
	        animation: slideshow 30s linear infinite;
}

@-webkit-keyframes slideshow {
	0%    { -webkit-transform: translate3d(0,0,0); }
	100%  { -webkit-transform: translate3d(-50%,0,0); }
}

@keyframes slideshow {
	0%    { transform: translate3d(0,0,0); }
	100%  { transform: translate3d(-50%,0,0); }
}

/* Don't animate logos when the window is wide enough to
   accommodate them all. */

.n1-logos-index,
.n2-logos-index,
.n3-logos-index { -webkit-animation: none; animation: none; }
.n1-logos-index > .double-li,
.n2-logos-index > .double-li,
.n3-logos-index > .double-li { display: none; }

@media screen and (min-width: 30em) {
	.n4-logos-index { -webkit-animation: none; animation: none; }
	.n4-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 37.5em) {
	.n5-logos-index { -webkit-animation: none; animation: none; }
	.n5-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 45em) {
	.n6-logos-index { -webkit-animation: none; animation: none; }
	.n6-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 52.5em) {
	.n7-logos-index { -webkit-animation: none; animation: none; }
	.n7-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 60em) {
	.n8-logos-index { -webkit-animation: none; animation: none; }
	.n8-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 67.5em) {
	.n9-logos-index { -webkit-animation: none; animation: none; }
	.n9-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 75em) {
	.n10-logos-index { -webkit-animation: none; animation: none; }
	.n10-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 82.5em) {
	.n11-logos-index { -webkit-animation: none; animation: none; }
	.n11-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 90em) {
	.n12-logos-index { -webkit-animation: none; animation: none; }
	.n12-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 97.5em) {
	.n13-logos-index { -webkit-animation: none; animation: none; }
	.n13-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 105em) {
	.n14-logos-index { -webkit-animation: none; animation: none; }
	.n14-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 105em) {
	.n15-logos-index { -webkit-animation: none; animation: none; }
	.n15-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 105em) {
	.n16-logos-index { -webkit-animation: none; animation: none; }
	.n16-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 105em) {
	.n17-logos-index { -webkit-animation: none; animation: none; }
	.n17-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 105em) {
	.n18-logos-index { -webkit-animation: none; animation: none; }
	.n18-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 105em) {
	.n19-logos-index { -webkit-animation: none; animation: none; }
	.n19-logos-index > .double-li { display: none; }
}

@media screen and (min-width: 105em) {
	.n20-logos-index { -webkit-animation: none; animation: none; }
	.n20-logos-index > .double-li { display: none; }
}

.home-block > video {
	/* This little bit of magic fills the screen with a 16:9
	   video without relying on object-fit, which does not
	   work in IE anything. */
	width: 178vh;
	max-width: none;
	left: 50%;

	-webkit-transform: translate3d(-50%, 0, 0);
	    -ms-transform:   translate(-50%, 0);
	        transform: translate3d(-50%, 0, 0);
}

.home-block > .text-0 {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
	margin-top: 1.875rem;
	z-index: 3;
	position: relative;
}

.home-block > .text-00,
.home-block > .home-button,
.home-block > .more-thumb {
	position: absolute;
	bottom: 0;
	z-index: 3;
}

.home-block > .text-00,
.home-block > .home-button {
	left: 1.25rem;
	right: 1.25rem;
}

.home-block > .text-00       {
	bottom: 11.25rem;
}

.home-block > .home-button {
	bottom: 5.5rem;
}

.home-block > .more-thumb    {
	left: 50%;
	bottom: 0.9375rem;
	margin-left: -2.5rem;
}
.home-block.with-logos > .more-thumb {
	bottom: 7rem;
}

@media screen and (min-width: 37.5em) {
	.home-block {
		min-height: 50rem;
		max-height: 70rem;
	}

	.home-block > .text-0 {
		margin-left: auto;
		margin-right: auto;
		max-width: 80%;
	}

	.home-block > .text-00 {
		left: 10%;
		right: 10%;
	}

	.home-block > .home-button {
		left: 50%;

		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);

		right: auto;
		width: auto;
	}
}


@media screen and (min-width: 60em) {
	.home-block {
		min-height: 50rem;
		max-height: 90rem;
	}

	.home-block > .text-0 {
		margin-top: 5rem;
		max-width: 83.3333%;
	}

	.home-block > .text-00 {
		bottom: 13.5rem;
		left: 16.6667%;
		right: 16.6667%;
	}

	.home-block > .home-button {
		bottom: 8rem;
	}

	.home-block > .more-thumb    {
		bottom: 3.125rem;
	}

	.home-block.with-logos > .more-thumb    {
		bottom: 7.125rem;
	}
}

@media screen and (min-width: 60em) and (min-height: 55rem) {
	/* Only make it this big if the window is high enough. */
	.home-block > .text-0 {
		margin-top: 8.125rem;
	}
}

@media screen and (min-width: 88.5rem) {
	.home-block > .text-0 {
		max-width: 73.75rem;
	}

	.home-block > .text-00 {
		left: 50%;
		right: auto;
		max-width: 50%;

		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
	}
}


.home-block > .img-block {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: 50% 40%;
	background-size: cover;
	background-color: white;
}

.home-block > .button {
	background-color: rgba(255, 255, 255, 0.8);
	color: black;
	padding: 8px;
	border-radius: 0.375rem;
	vertical-align: middle;

	font-size: 1.5rem;
	text-transform: uppercase;
	font-family: Theinhardt;
	line-height: 1.6rem;
	text-align: center;
}

.home-block > .button:hover {
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
}

.img-block {
	z-index: 1;
	opacity: 0;
	transition: opacity 1200ms linear;
	transition-delay: 1200ms;
}

.img-block.active {
	z-index: 2;
	opacity: 1;
	transition-delay: 0ms;
}

.img-block.animated {
	-webkit-transform: scale3d(1.125,1.125,1) translate3d(-6%, 2%, 0);
	        transform: scale3d(1.125,1.125,1) translate3d(-6%, 2%, 0);
}

.img-block.animated.active {
	-webkit-animation-duration: 8s;
	-webkit-animation-name: kenburns-top-right;
	-webkit-animation-fill-mode: both;

	animation-duration: 8s;
	animation-name: kenburns-top-right;
	animation-fill-mode: both;
}

@-webkit-keyframes kenburns-top-right {
	0% {
		-webkit-transform: scale3d(1,1,1) translate3d(0, 0, 0);
		        transform: scale3d(1,1,1) translate3d(0, 0, 0);
	}

	100% {
		-webkit-transform: scale3d(1.125,1.125,1) translate3d(-6%, 2%, 0);
		        transform: scale3d(1.125,1.125,1) translate3d(-6%, 2%, 0);
	}
}

@-webkit-keyframes kenburns-top-left {
	0% {
		-webkit-transform: scale3d(1,1,1) translate3d(0, 0, 0);
		        transform: scale3d(1,1,1) translate3d(0, 0, 0);
	}

	100% {
		-webkit-transform: scale3d(1.125,1.125,1) translate3d(6%, 2%, 0);
		        transform: scale3d(1.125,1.125,1) translate3d(6%, 2%, 0);
	}
}



/*
@media screen and (max-device-width: 800px) {
	.home-block > video {
		display: none;
	}
}
*/
.teasers {
	background-color: white;
}
.home-block > .more-thumb {

	margin-top: 1.875rem;
}
.white-block {
	overflow: hidden;
}
.white-block .ff-wrap {
	margin: 1rem 0;
}
.white-block .teaser-block + .ff-wrap {
	margin-top: 3rem;
}
@media all and (min-width: 50rem) {
	.white-block .ff-wrap {
		margin: 1rem 12px;
	}
}