:root {
  --primary-color-enlighted: color-mix(in srgb, var(--primary-color) 2%, #EEE 98%);
}
@keyframes menu {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
.sb-toggle.sb-toggle-fixed {
  z-index: 100;
  background-color: #0004;
  border-radius: 5px;
}
.sb-toggle > button::before,
.sb-toggle.open > button::before {
  content: '';
}
.sb-toggle > button {
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image: url('/content/custom/files/images/list.svg');
  transform: none;
  color: white;
}
.sb-toggle.open > button {
  animation-name: menu;
  animation-duration: 300ms;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  mask-image: url('/content/custom/files/images/x.svg');
}
.sb-site-container > div {
  background: var(--primary-color-enlighted);
}
@media only screen and (min-width: 641px) {
  .sb-toggle {
    right: 20px;
  }
}
body {
  background-color: var(--primary-color-enlighted);
}
@media (min-width: 1024px) {
  body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    background: fixed radial-gradient(ellipse at center, transparent 50%, #0003 85%, #0008 100%);
    z-index: 9;
  }
}
body, h1, h2, h3, h4, h5, h6 {
  font-family: "Alan Sans",Helvetica,Roboto,Arial,sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3em;
}
.images a p {
  font-size: 1.2rem;
  color: #48545a;
  margin-bottom: 10px;
  font-family: 'Alan Sans';
  font-weight: 300;
  line-height: 1.4em;
}
body[class*="topbar"] .menu > li > a {
  font-size: 1.1rem;
  font-family: 'Alan Sans';
  font-weight: 500;
  letter-spacing: -0.01em;
}
body[class*="topbar"] .menu p, body[class*="topbar"] .menu ul,
body[class*="topbar"] .menu a, body[class*="topbar"] .menu span {
  font-family: 'Alan Sans';
  font-weight: 400;
  font-size: 1rem;
}
h2.subheader {
  font-family: 'Alan Sans';
  font-weight: 300;
}
.images figcaption > span,
.images figcaption > time,
.context figcaption > span,
.context figcaption > time {
  font-family: 'Alan Sans';
  font-weight: 300;
}
@media only screen and (min-width: 641px) {
  h1 {
    font-size: 3.125rem;
  }
}
@media only screen and (min-width: 641px) {
  .main p {
    font-size: 1.1rem;
  }
}
@media only screen and (min-width: 641px) {
  h2.subheader {
    font-size: 1.4rem;
    text-wrap-style: balance;
  }
}
.popup-caption-title {
  font-size: 1.0rem;
  font-weight: 400;
}
.popup-caption-description {
  font-size: 0.85rem;
  font-weight: 300;
}
.menu-absolute-100 .logo > img,
.menu-absolute-50 .logo > img,
.menu-absolute-20 .logo > img,
.menu-absolute .logo > img {
  filter: invert();
}
.images figcaption .title, .context figcaption .title {
  font-weight: 400;
}
.image-intro-content h1 {
  font-size: 3.5em;
  text-shadow: 0px 0.4em 1em black, 0px 0px 1em black;
  text-wrap-style: balance;
}
.image-intro-content p.styled {
  font-size: 1.3em;
  font-weight: 300;
  text-wrap-style: balance;
  text-shadow: 0px 0.1em 0.4em black, 0px 0.1em 1em black;
}
@media (max-width: 599px) {
  .image-intro-content h1 {
    font-size: 2.5em;
    line-height: 1.1em;
  }
  .image-intro-content p.styled {
    font-size: 1.0em;
  }
}
.ow-figure {
  padding: 6px;
  background-color: white;
  box-shadow: 0px 1px 3px rgba(0,0,0,.1);
  margin-bottom: 1em;
}
.ow-figure img {
  width: 100%;
}
.ow-figure figcaption {
  opacity: 1;
  position: inherit;
  background: white;
  color: inherit;
  font-weight: 300;
}
.ow-figure figcaption > time {
  display: inline-block;
}
.ow-figure figcaption:hover {
  background: white;
  color: inherit;
}
body[class*="topbar"] .menu > li.child-active > a,
body[class*="topbar"] .menu > li > a.active {
  background: #0005;
}
body[class*="topbar"] .menu > li.child-active > a,
body[class*="topbar"] .menu > li.active > a.active {
  background: #0001;
}
body[class*="topbar"] .menu > li.sfHover > a,
body[class*="topbar"] .menu > li > a:hover {
  background: #FFFA !important;
  color: #000 !important;
  backdrop-filter: blur(10px);
}
.mega {
  background: #FFFA;
  backdrop-filter: blur(10px);
}
.mega.carousel a:hover {
  background: #FFF8;
}
.mega.carousel a.active {
  background: #FFFA;
}
body[class*="topbar"] .menu h2 {
  font-size: 1.0rem;
}
body[class*="topbar"] .menu p, body[class*="topbar"] .menu ul,
body[class*="topbar"] .menu a, body[class*="topbar"] .menu span {
  font-size: 0.8rem;
}
.mega.carousel img {
  border-radius: 4px;
}
.mega.carousel .image-container {
  outline: 3px solid #FFF;
  border-radius: 4px;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea {
  border: 1px solid #DDD;
  background-color: white;
  &:focus {
    background-color: white;
    border-color: #BBB;
  }
}
form[data-abide] .error input,
form[data-abide] .error textarea {
  border: 1px dashed darkred !important;
  &:focus {
    background-color: white;
  }
}

@media (max-width: 599px) {
  h6 {
    font-size: 0.8rem;
  }
  .images.title-normal .title:not(span) {
    font-size: 1.2rem;
  }
  .images a p {
    font-size: 0.9rem;
  }
}

.scroll-nav button,
.scroll-nav .index {
  color: #333;
}

.popup-caption-description a {
  color: yellowgreen;
  text-decoration: underline;
  font-weight: 500;
}

.tooltip {
  background: #333 !important;
  padding: 0.7em 1em;
}
.tooltip.item-tip .title {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 300;
}
.tooltip.tip-top > .nub {
  border-color: #333 rgba(0,0,0,0) rgba(0,0,0,0) !important;
}