:root { --color-0: #000; --color-1: #151f16; --color-2: #194b22; --color-3: #1b7921; --color-4: #2a9c31; --color-5: #43c14b; --color-6: #56d65e; --color-7: #66e66e; --color-8: #76f17e; --color-9: #83fc8b; --square-size: 80px }
.mask-primary { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--color-0); opacity: .3 }
/* .mask-secondary { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: radial-gradient(circle at 25% center, rgba(0,0,0,.7), transparent 70%); } */
.custom-theme .material-md-card { background-color: rgba(20,40,25,.85); color: white }

@media (max-width: 1083px) {
	:root { --square-size: 90px }
}

@media (max-width: 859px) {
	.card-foreground.custom-theme { background-color: var(--color-0) }
	:root { --square-size: 60px }
}

.bg-custom-brand { background-color: var(--color-0) }

.card-background.bg-black>picture:before {content:'';display:block;position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.2);}

.squares { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; }
	.squares > * { width: var(--square-size); height: var(--square-size); position: absolute; opacity:0; }
	.squares > *:nth-of-type(n) {opacity:0; transition:opacity .25s linear;}
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(1) { background-color: var(--color-0); transition-delay:0s; opacity:1; right:calc(var(--square-size) / 2 * -1) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(2) { background-color: var(--color-1); transition-delay:.1s; opacity:.95; right:calc(var(--square-size) / 2) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(3) { background-color: var(--color-2); transition-delay:.2s; opacity:.9; right:calc(var(--square-size) / 2 * 3) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(4) { background-color: var(--color-3); transition-delay:.3s; opacity:.85; right:calc(var(--square-size) / 2 * 5) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(5) { background-color: var(--color-4); transition-delay:.4s; opacity:.8; right:calc(var(--square-size) / 2 * 7) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(6) { background-color: var(--color-5); transition-delay:.5s; opacity:.75; right:calc(var(--square-size) / 2 * 9) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(7) { background-color: var(--color-6); transition-delay:.6s; opacity:.7; right:calc(var(--square-size) / 2 * 11) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(8) { background-color: var(--color-7); transition-delay:.7s; opacity:.75; right:calc(var(--square-size) / 2 * 13) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(9) { background-color: var(--color-8); transition-delay:.8s; opacity:.8; right:calc(var(--square-size) / 2 * 15) }
		.squares.s-fade-in:nth-of-type(even) > *:nth-of-type(10) { background-color: var(--color-9); transition-delay:.9s; opacity:.85; right:calc(var(--square-size) / 2 * 17) }

		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(1) { background-color: var(--color-0); transition-delay:.1s; opacity:1; right:calc(var(--square-size) / 2 * -1) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(2) { background-color: var(--color-1); transition-delay:.2s; opacity:.95; right:calc(var(--square-size) / 2) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(3) { background-color: var(--color-2); transition-delay:.3s; opacity:.9; right:calc(var(--square-size) / 2 * 3) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(4) { background-color: var(--color-3); transition-delay:.4s; opacity:.85; right:calc(var(--square-size) / 2 * 5) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(5) { background-color: var(--color-4); transition-delay:.5s; opacity:.8; right:calc(var(--square-size) / 2 * 7) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(6) { background-color: var(--color-5); transition-delay:.6s; opacity:.75; right:calc(var(--square-size) / 2 * 9) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(7) { background-color: var(--color-6); transition-delay:.7s; opacity:.7; right:calc(var(--square-size) / 2 * 11) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(8) { background-color: var(--color-7); transition-delay:.8s; opacity:.75; right:calc(var(--square-size) / 2 * 13) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(9) { background-color: var(--color-8); transition-delay:.9s; opacity:.8; right:calc(var(--square-size) / 2 * 15) }
		.squares.s-fade-in:nth-of-type(odd) > *:nth-of-type(10) { background-color: var(--color-9); transition-delay:1s; opacity:.85; right:calc(var(--square-size) / 2 * 17) }

	.squares:nth-of-type(1) > * {top:20px; animation:fade-anim 4s infinite 4s;}
	.squares:nth-of-type(2) > * {top:calc(var(--square-size) + 40px); animation:fade-anim 4s infinite 3s;}
	.squares:nth-of-type(3) > * {top:calc(var(--square-size) * 2 + 60px); animation:fade-anim 4s infinite 2s;}
	.squares:nth-of-type(4) > * {top:calc(var(--square-size) * 3 + 80px); animation:fade-anim 4s infinite 5s;}
	.squares:nth-of-type(5) > * {top:calc(var(--square-size) * 4 + 100px); animation:fade-anim 4s infinite 8s;}
	.squares:nth-of-type(6) > * {top:calc(var(--square-size) * 5 + 120px); animation:fade-anim 4s infinite 5s;}
	.squares:nth-of-type(7) > * {top:calc(var(--square-size) * 6 + 140px); animation:fade-anim 4s infinite 6s;}

.s-animate-on-reveal { opacity: 0; transition: opacity .6s ease-out, margin-left .2s ease-out, margin-right .2s ease-out }
	.s-animate-on-reveals.s-in-view { opacity: 1; margin-left: 0 !important; margin-right: 0 !important }

.s-broadcasting { position: relative; display: inline-block; width: 30px; height: 10px; }
	.s-broadcasting > span { position: absolute; width: 6px; height: 6px; top: 50%; left: 50%; margin-top: -3px; margin-left: -3px; background-color: #fff; border: 2px solid white; border-radius: 50%; z-index: 2; }
	.s-broadcasting:before, .s-broadcasting:after { content: ''; display: block; position: absolute; height: 50px; width: 50px; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; opacity: 0; border: 5px solid white; border-radius: 50%; box-sizing: border-box; z-index: 1; }
	.s-broadcasting:before { animation: pulse 3000ms 0ms ease-out infinite; }
	.s-broadcasting:after { animation: pulse 3000ms 1200ms ease-out infinite; }

@keyframes pulse {
	0% { transform: scale(0); opacity: 0.0; }
	25% { transform: scale(0); opacity: 0.1; }
	50% { transform: scale(0.1); opacity: 0.3; }
	75% { transform: scale(0.5); opacity: 0.5; }
	100% { transform: scale(1); opacity: 0.0; }
}

@media (min-width: 1084px) {
	.bg-lg-none { background-color: transparent }
}

@keyframes fade-anim {
	50% {opacity:.95;}
}