.brunch {
font-family: -apple-system, Sans-Serif;
text-align: center;
font-size: 24pt;
color: #3f894a; }
.header-ribbonBanner {
position: relative;
font-size: 1em;
height: 2;
line-height: 2em;
padding-left: 1em;
text-align: center;
background-color: var(--highlight-color); }
.header-ribbonBanner-content {
position: absolute;
opacity: 0;
display: inline-block;
width: 100%;
left: 0;
transition: all ease-in 750ms;
text-align: center;
color: #fff; }
.header-ribbonBanner--change {
opacity: 1; }
#water-usage-slider {
max-width: 100%; }