/*
Fonts
*/
:root {
  --theme-font-serif: "Source Serif 4", serif;
  --theme-font-sans-serif: "Source Sans 3", Helvetica, arial, sans-serif;
}

/*
Colors
*/
:root {
  --color-red: #8c1515;
  --color-bright-red: #b1040e;
  --color-cardinal-red: #8c1515;
  --color-cardinal-bright-red: #b1040e;
  --color-gold: #E6A926;
  --color-orange: #e98300;
  --color-green: #1F5E54;
  --color-teal: #007c92;
  --color-light-teal: #3FAF91;
  --color-dark: #4d4f53;
  --color-darker: #3c3c3c;
  --color-darkest: #2e2d29;
  --color-medium: #cecece;
  --color-light: #f4f4f4;
  --color-cardinal-red: #8c1515;
  --color-digital-red: #b1040e;
  --color-palo-alto-green: #175e54;
  --color-palo-verde: #279989;
  --color-light-palo-verde: #59b3a9;
  --color-dark-sky-blue: #016895;
  --color-light-sky-blue: #6fc3ff;
  --color-poppy-orange: #e98300;
  --color-light-poppy: #f9a44a;
  --color-dark-yellow: #fec51d;
  --color-archway-brown: #5d4b3c;
  --color-dark-beige: #9c9477;
  --color-beige: #d1c298;
  --color-light-beige: #ddd1b6;
  --color-medium-brown: #c0875c;
  --color-light-brown: #edc5a4;
  --color-mint-green: #a6dac8;
  --color-black: #2e2d29;
  --color-cool-gray: #53565a;
  --color-light-stone-gray: #d4d1d1;
  --color-light-gray: #f4f4f4;
  --color-white: #ffffff;
  interpolate-size: allow-keywords;
}

/*
Gutters
*/
/*
Animations
*/
/*
Misc
*/
:root {
  --font-base-size: 18px;
  --gutter: calc((100vw - 1200px) / 2);
  --gutter-left: calc((100vw - 1200px) / 2);
  --gutter-right: calc((100vw - 1200px) / 2);
}
@media screen and (max-width: 1324.1379310345px) {
  :root {
    --gutter-left: 4.6875vw;
    --gutter-right: 4.6875vw;
    --gutter: 4.6875vw;
  }
}
:root {
  --scrollbarWidth: 0px;
  --viewportWidth: calc(100vw - var(--scrollbarWidth, 0));
  --block-margin: 4rem;
}
@media screen and (max-width: 1200px) {
  :root {
    --block-margin: 3.6rem;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --block-margin: 3.2rem;
  }
}

@keyframes loading {
  100% {
    background-position: 0px -570px;
  }
}
@keyframes loop {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-50%, 0%);
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*
Author: Joe Tan (joetan54@gmail.com)

Copyright (c) 2018 Joe Tan
THIS CODE MAY NOT BE REDISTRIBUTED WITHOUT EXPLICIT PERMISSION
*/
/*
@mixin icon-char($what) {
    @if map-has-key($icons, $what) {

        content: make-icon(map-get($icons, $what));
    }
    @else {
        content: '???';
    }

}
@mixin icon-font($what) {
    font-family: $font-icon;
    font-weight: normal;
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
    text-transform:none !important;
    @if map-has-key($icons, $what) {
        @include icon-char($what);
    }
}
*/
@keyframes pulse {
  0%, 100% {
    scale: 1;
  }
  50% {
    scale: 1.02;
  }
}
@keyframes hub-height {
  0%, 100% {
    padding-top: 0;
  }
  50% {
    padding-top: 0.75rem;
  }
}
:root body {
  padding-top: 0;
}

.main-content.data-hubs-landing > .layout {
  padding-bottom: var(--block-margin);
  grid-template-areas: ". . ." ". blocks ." "hub hub hub";
  grid-template-rows: var(--wrapper-padding-top, 80px) auto auto;
}
@media screen and (max-width: 768px) {
  .main-content.data-hubs-landing > .layout {
    grid-template-areas: ". . ." ". blocks ." "hub hub hub" ". . .";
    grid-template-rows: var(--wrapper-padding-top, 80px) auto auto calc(var(--block-margin, 4rem) * 0.5);
  }
  .main-content.data-hubs-landing > .layout::before {
    content: "";
    position: absolute;
    bottom: 0vh;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../images/data-hubs/graphic_greenwaves_mobile.png) top 10px left no-repeat;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .main-content.data-hubs-landing > .layout::before {
    width: 100%;
    height: 63%;
    background-position: top center;
  }
}
@media screen and (max-width: 1440px) {
  .main-content.data-hubs-landing > .layout {
    --wrapper-padding-top:80px;
  }
}

#main {
  background: url(../images/data-hubs/graphic-data-waves-1440-tint.jpg) no-repeat 50% 50%;
  background-size: cover;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #main {
    background: #E8F5F1;
  }
}
#main .page-blocks {
  --page-blocks-padding-top:0rem;
  --page-blocks-padding-bottom: 0rem;
  min-height: 0;
}
@media screen and (max-width: 900px) {
  #main .page-blocks {
    --page-blocks-padding-top:1rem;
    --page-blocks-padding-bottom: 0rem;
  }
}

#the-hub-background {
  position: relative;
  grid-column: 1/-1;
  grid-row: 3/span 1;
}
@media screen and (max-width: 768px) {
  #the-hub-background {
    grid-row: 3/span 1;
    display: none;
  }
}
#the-hub-background {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#the-hub-background #the-hub-background-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vw;
  height: 100vw;
  translate: -50% -50%;
  background: url(../images/data-hubs/wavesbg.jpg) no-repeat 50% 50%;
  background-size: cover;
  border-radius: 0;
  transition: 0.75s ease-in-out;
  margin-top: 0;
  -webkit-mask-image: url(../images/data-hubs/blob.svg);
          mask-image: url(../images/data-hubs/blob.svg);
  opacity: 0;
}
body.reduced-animations #the-hub-background #the-hub-background-blob, #the-hub-background #the-hub-background-blob.loaded {
  top: 50%;
  width: 890px;
  height: 95%;
  opacity: 1;
}

.wp-block-columns.hub-content {
  display: grid;
  -moz-column-gap: 10vw;
       column-gap: 10vw;
  grid-template-areas: "title copy";
  font-weight: 600;
}
.wp-block-columns.hub-content h1, .wp-block-columns.hub-content h2 {
  grid-area: title;
}
@media screen and (min-width: 769px) {
  .wp-block-columns.hub-content {
    margin: 2rem 0 0;
  }
}
@media screen and (max-width: 768px) {
  .wp-block-columns.hub-content {
    margin: 2rem 0 2rem;
  }
}
@media screen and (max-width: 900px) {
  .wp-block-columns.hub-content {
    display: block;
  }
}
@media screen and (max-width: 500px) {
  .wp-block-columns.hub-content {
    line-height: 1.3;
  }
  .wp-block-columns.hub-content p {
    font-size: 0.8em;
  }
}
.wp-block-columns.hub-content .wp-block-column:nth-of-type(2) {
  display: grid;
  grid-template-areas: "button copy ";
  gap: 1rem;
}
@media screen and (max-width: 900px) {
  .wp-block-columns.hub-content .wp-block-column:nth-of-type(2) {
    margin-top: 1rem;
    box-sizing: border-box;
    gap: 0;
  }
}
.wp-block-columns.hub-content .wp-block-column:nth-of-type(2) #more-button {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  grid-area: button;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #007c92;
  background: url(../images/data-hubs/graphic_read_more.svg) no-repeat;
  background-position: center;
}
.wp-block-columns.hub-content .wp-block-column:nth-of-type(2) #more-button.active {
  transform: rotate(-90deg);
}

#the-hub {
  grid-area: hub;
  --hub-icon-size: 80px;
  position: relative;
  min-height: 600px;
  height: 75vh;
  max-height: 900px;
}
@media screen and (max-width: 1024px) {
  #the-hub {
    max-height: 75vw;
  }
}
#the-hub #white-blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: var(--white-blob-padding, calc(var(--block-margin, 4rem) * 1.5));
  background: url(../images/data-hubs/white-blob.svg) no-repeat 50% 50%;
  background-size: 100% 100%;
  text-align: center;
  transition: padding 0.2s ease, opacity 0.2s ease, scale 0.3s ease-out;
  opacity: 0;
  scale: 1.3;
}
#the-hub #white-blob.loaded {
  scale: 1;
  opacity: 1;
}
#the-hub #white-blob h1, #the-hub #white-blob .heading.h1 {
  font-family: var(--theme-font-sans-serif);
  font-size: clamp(2.222rem, 2.731vw + 1.63rem, 3.556rem);
  line-height: 0.8;
  color: #8c1515;
  text-transform: uppercase;
  opacity: 1;
  scale: 1;
  transition: 0.2s ease;
}
#the-hub #white-blob .hub-info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  padding: 2rem;
  translate: -50% -50%;
  line-height: 1.2;
  z-index: -1;
}
#the-hub #white-blob .hub-info img {
  display: block;
  width: 100%;
  margin: 0 auto 1rem auto;
}
#the-hub #white-blob .hub-info {
  transition: 0.2s ease;
  opacity: 0;
  scale: 0.5;
}
#the-hub #white-blob .hub-info.on {
  z-index: 1;
  opacity: 1;
  scale: 1;
}
#the-hub #white-blob.on {
  --white-blob-padding:calc(var(--block-margin, 4rem) * 2);
}
#the-hub #white-blob.on h1 {
  opacity: 0;
  scale: 0.5;
}
@media screen and (max-width: 1024px) {
  #the-hub #white-blob .hub-info {
    width: 200px;
    padding: 1rem;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 768px) {
  #the-hub #white-blob {
    --white-blob-padding: calc(var(--block-margin, 4rem) * 1);
  }
}
@media screen and (max-width: 500px) {
  #the-hub #white-blob {
    --white-blob-padding: calc(var(--block-margin, 4rem) * 0.75);
  }
}
#the-hub .hubs > .hub {
  position: absolute;
}
#the-hub .hubs > .hub.has-button {
  z-index: 1;
}
#the-hub .hubs > .hub {
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  height: calc(var(--hub-height, 50%) * var(--hub-height-scale, 1));
  width: 5px;
  transform-origin: 0% 100%;
  rotate: var(--hub-rotate, 45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#the-hub .hubs > .hub.finished {
  transform: translate(-50%, 0%) rotate(var(--hub-rotate)) !important;
  --hub-button-animation: pulse 5s infinite ease-in-out var(--hub-delay, 0s);
  animation: hub-height 8s infinite ease-in-out var(--hub-delay, 0s);
  animation-play-state: var(--hub-button-animation-play-state, running);
}
#the-hub .hubs > .hub.active {
  opacity: 1;
}
#the-hub .hubs > .hub.has-line:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hub-line-height, 0%);
  background: #b1040e;
  transition: height 0.2s ease;
}
#the-hub .hubs > .hub > a {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  display: grid;
  align-items: center;
  grid-template-columns: var(--hub-icon-size) auto;
  background: #b1040e;
  color: #ffffff;
  border-radius: 50px 1rem 1rem 50px;
  font-family: var(--theme-font-serif) ;font-optical-sizing: none;
  font-size: clamp(0.889rem, 1.366vw + 0.593rem, 1.556rem);
  text-decoration: none;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  transition: top 5s ease-in-out;
  rotate: calc(var(--hub-rotate) * -1);
  animation: var(--hub-button-animation, none);
  animation-play-state: var(--hub-button-animation-play-state, running);
}
#the-hub .hubs > .hub .hub-icon {
  position: relative;
  display: inline-flex;
  width: var(--hub-icon-size);
  height: var(--hub-icon-size);
  border: 2px solid #b1040e;
  background: var(--hub-icon-background-color, #8c1515);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  translate: 0 0;
  transition: background-color 0.2s ease;
}
#the-hub .hubs > .hub .hub-icon img {
  display: block;
  width: calc(var(--hub-icon-size) * 0.87);
  height: calc(var(--hub-icon-size) * 0.87);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
#the-hub .hubs > .hub .hub-icon .icon {
  --icon-size: 18px;
  --icon-width:3px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(var(--icon-size) * 2.5);
  height: calc(var(--icon-size) * 2.5);
  background: #8c1515;
  color: #ffffff;
  border-radius: 50%;
  transition: opacity 0.2s ease;
  opacity: var(--hub-icon-opacity, 0);
}
#the-hub .hubs > .hub .title {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 1em;
  font-weight: bold;
}
#the-hub .hubs > .hub.on {
  --hub-icon-opacity: 1;
  --hub-icon-background-color: #ffffff;
}
#the-hub .hubs > .hub.on + .hub.has-line {
  --hub-line-height:100%;
}
@media screen and (max-width: 1200px) {
  #the-hub .hubs > .hub {
    --hub-height: 45%;
  }
}
@media screen and (max-height: 1024px), (max-width: 1200px) {
  #the-hub .hubs > .hub {
    --hub-icon-size:60px;
  }
  #the-hub .hubs > .hub .title {
    padding: 0.2em 0.8em;
  }
}
@media screen and (max-width: 600px) {
  #the-hub .hubs > .hub {
    --hub-icon-size:40px;
  }
  #the-hub .hubs > .hub .hub-icon .icon {
    --elem-icon-size:12px;
    --icon-width:2px;
  }
}
#the-hub.hover-off {
  --hub-line-height: 100%;
}
#the-hub:not(.hover-off) {
  --hub-button-animation-play-state: paused;
}
#the-hub #play-pause {
  --icon-size: 1.6em;
  position: absolute;
  margin: 0;
  padding: 0;
  bottom: 1rem;
  right: 1rem;
  width: var(--icon-size);
  height: var(--icon-size);
  line-height: var(--icon-size);
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  background: #d4d1d1;
  color: #2e2d29;
  border: 0;
  cursor: pointer;
}
body.animations-off #the-hub #play-pause .icon:before {
  content: "\f04b";
}
body.animations-off #the-hub {
  --hub-button-animation-play-state: paused;
}
body.reduced-animations #the-hub {
  max-height: none;
  min-height: 0px;
  height: auto;
  margin: 0 0 2rem 0;
}
body.reduced-animations #the-hub #play-pause {
  display: none;
}
body.reduced-animations #the-hub .hubs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
body.reduced-animations #the-hub .hubs > .hub:before {
  display: none;
}
body.reduced-animations #the-hub .hubs > .hub {
  --hub-rotate: 0deg !important;
  position: relative;
  z-index: 5;
  opacity: 1;
  bottom: auto;
  left: auto;
  transform: none !important;
  height: auto;
  width: auto;
}
body.reduced-animations #the-hub .hubs > .hub > a {
  position: relative;
  top: auto;
  left: auto;
  translate: none;
}
body.reduced-animations #the-hub #white-blob {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  translate: none;
  opacity: 1;
  box-sizing: border-box;
  margin-bottom: 2rem;
}

#footer.site-footer .block-image img {
  display: none;
}/*# sourceMappingURL=datahubs.css.map */