:root {
  --color-primary: #00b0c3;
  --color-secondary: #0e308e;
  --color-tertiary: #00b0c3;
  --color-gold: #bc9200;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark: #212121;
  --color-dark-azure: #2f4042;

  --menu-background: var(--color-primary);
  --menu-selected: var(--color-secondary);

  --easing: cubic-bezier(0.4, -0.3, 0.6, 1.3);
  --speed: 0s;
  --width: 70px;
  --ar: 8 / 3;
  --ray: #ffffff80;
  --sun: #f5cb32;
  --moon: #cbd1d7;
  --crater: #a0a9ba;
  --sky: #3885b7;
  --space: #1f2233;

  --toggle-shadow-1: #171a1c26;
  --toggle-shadow-2: #171a1ca6;
  --sun-shadow-1: #fffffff2;
  --sun-shadow-2: #2e333880;
  --moon-shadow-1: #171a1cf2;
  --crater-shadow-1: #0e0f1140;
  --crater-shadow-2: #ffffff40;
  --stars-bg-1: #ffffff40;
  --stars-bg-2: #00000080;
}

/* Header and footer */
.Logo p {
  line-height: 60px;
  color: var(--color-white);
  font-size: 50px;
  font-weight: bold;
}

.Logo span {
  color: var(--color-secondary);
}

.AccordionPanelTab {
  background: transparent url("../images/mobile_menu_icon_2x.png") no-repeat right center;
  background-size: contain;
  cursor: pointer;
}

.Header,
.Footer {
  background-color: var(--color-primary);
}

.MenuBar,
.MenuItem:hover,
.MenuItem.MuseMenuActive {
  background-color: var(--menu-background);
}

.MenuItem {
  background-color: var(--menu-selected);
  cursor: pointer;
}

.SubMenu .MenuItem {
  border-style: solid;
  border-color: var(--menu-background);
  border-width: 2px 1px 0px 0px;
}

.AccordionPanelContent .MenuItemLabel,
.SubMenu .MenuItemLabel {
  line-height: 20px;
  text-align: center;
  font-size: 17px;
  color: var(--color-white);
  font-weight: bold;
}

/* Disable horizontal scroll */
html,
body {
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

/* Hide lines around footer */
.Footer {
  margin-top: -2px !important;
  bottom: 0px !important;
}

.verticalspacer,
.Svg,
.TabbedPanelsContent > .grpelem {
  min-height: 0px !important;
}

/* City map animation */
iframe.animation {
  border-width: 0px;
  border-radius: 35px;
}

/* Hide word art attribution message */
.wordart-attribution {
  display: none !important;
}

/* Lists */
.Waikiki-list-style .list1 {
  margin-left: -50px;
}

.Waikiki-list-style .list2 {
  margin-right: -38px;
}

.Waikiki-list-style .list2 li {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.Waikiki-list-style .list2 span {
  max-width: 100%;
}

.Waikiki-list-style .list2 img {
  max-width: 100%;
  height: auto;
}

.SubMenu {
  position: fixed !important;
  right: 380px !important;
  left: unset !important;
  margin-top: 70px;
}

@media (max-width: 760px) {
  .SubMenu {
    right: unset !important;
    left: 0px !important;
    margin-top: 105px;
  }
}

/* Grid and row */
@media (max-width: 1920px) {
  .Row:not(.TabbedPanelsContent),
  .Row.TabbedPanelsContentVisible,
  .Row .ThumbGroup,
  .Grid:not(.TabbedPanelsContent),
  .Grid.TabbedPanelsContentVisible {
    display: flex !important;
    position: unset !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 2.5%;
    row-gap: 20px;
  }

  .Row.TabbedPanelsContentVisible,
  .Grid.TabbedPanelsContentVisible {
    padding-top: 40px;
  }

  .Row .ThumbGroup > .popup_anchor,
  .Grid > div,
  .Grid > .position_content > div {
    display: contents !important;
  }

  .Grid > div > .colelem:first-child {
    order: -1;
  }

  .Grid > div > .colelem:last-child {
    order: 1;
  }

  .Row > .PamphletWidget {
    padding: unset !important;
    width: 100% !important;
    height: auto !important;
  }

  .Row > *,
  .Row .ThumbGroup > .popup_anchor > .Thumb,
  .Grid > *,
  .Grid > * > *,
  .Grid > .position_content > * > * {
    position: unset !important;
    margin: unset !important;
  }

  .Row .wp-panel:not(.museBGSize),
  .Row .Thumb.popup_element.rounded-corners:not(.museBGSize),
  .Grid > .PamphletWidget {
    visibility: hidden !important;
  }

  .Row > .anchor_item,
  .Row.clearfix:after,
  .Row.clearfix:before,
  .Row .clearfix:after,
  .Row .clearfix:before,
  .Grid > .anchor_item,
  .Grid.clearfix:after,
  .Grid.clearfix:before,
  .Grid .clearfix:after,
  .Grid .clearfix:before {
    display: none !important;
  }

  .Row .Card,
  .Grid .Card {
    margin-bottom: 100px !important;
  }

  .Row > div.museBGSize:not(.Flex),
  .Grid > div > div.museBGSize:not(.Flex) {
    max-width: 98vw;
  }

  .Row > .Flex > iframe,
  .Grid > div > .Flex > iframe {
    max-width: 98vw;
    margin-left: 1%;
  }

  .Row > .Flex > img,
  .Grid > div > .Flex > img {
    width: 100% !important;
  }
}

/* Zoom */
@media (max-width: 1200px) {
  .Zoom {
    transform: perspective(100vw) translateZ(calc(100vw - 1200px));
    transform-origin: top;
    margin-bottom: calc(80vw - 850px);
  }
}

/* Flex */
@media (max-width: 1000px) {
  .Flex:not(.clip_frame.colelem) {
    width: 100vw !important;
    left: -49vw !important;
  }

  .Flex > iframe {
    width: 98% !important;
  }

  .Flex > img {
    width: 98% !important;
  }
}

.Flex > img {
  height: auto !important;
}

/* Panel */
@media (max-width: 1200px) {
  .Panel * {
    transform: none !important;
  }

  .Panel {
    border-width: 0px !important;
    transform: none !important;
    top: 10px !important;
    left: 0px !important;
    margin: 0px !important;
  }

  .Panel > .AccordionPanel > .AccordionPanelTab {
    display: none !important;
  }

  .Panel > .AccordionPanel > .AccordionPanelContent {
    width: 100vw !important;
    height: auto !important;
  }

  .Panel
    > .AccordionPanel
    > .AccordionPanelContent
    > .AccordionPanelContentClip
    > .clearfix {
    display: flex !important;
    flex-direction: column-reverse;
    align-items: center;
    width: 100vw !important;
    padding: 0px !important;
  }

  .Panel
    > .AccordionPanel
    > .AccordionPanelContent
    > .AccordionPanelContentClip
    > .clearfix
    > div {
    left: unset !important;
    margin: 0px !important;
  }

  .Panel
    > .AccordionPanel
    > .AccordionPanelContent
    > .AccordionPanelContentClip
    > .clearfix
    > div:not(.museBGSize) {
    width: 98% !important;
  }
}

/* Scroll */
@media (max-width: 1000px) {
  .Scroll {
    overflow: scroll;
    width: 100vw !important;
    left: -50% !important;
  }
}

/* Image */
@media (max-width: 1000px) {
  .Image {
    width: 98vw !important;
    left: 1% !important;
  }
}

/* Typography */
@media (max-width: 1000px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    box-sizing: border-box;
  }

  :not(.rgba-background) > h1 {
    font-size: 56px !important;
    line-height: 56px !important;
    margin-top: -100px !important;
  }

  :not(.rgba-background) > h2 {
    font-size: 40px !important;
    line-height: 40px !important;
  }

  :not(.rgba-background) > h3 {
    font-size: 22px !important;
    line-height: 22px !important;
    width: calc(100vw - 10px);
    margin-left: calc((1000px - 100vw) / 2 + 5px);
  }

  :not(.rgba-background) > h4 {
    width: calc(100vw - 10px);
    margin-left: calc((1000px - 100vw) / 2 + 5px);
  }

  :not(.rgba-background) > h5 {
    width: calc(100vw - 20px);
    margin-left: calc((800px - 100vw) / 2 + 10px);
  }

  :not(.rgba-background) > h6 {
    width: calc(100vw - 20px);
    margin-left: calc((600px - 100vw) / 2 + 10px);
  }

  :not(.rgba-background) > .h7 {
    width: calc(100vw - 20px);
    margin-left: calc((400px - 100vw) / 2 + 10px);
  }
}

.TextLine p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layout adjustments on small screens */
@media screen and (max-width: 1920px) {
  .anchor_item.grpelem {
    margin-top: 0px !important;
  }

  div[id$="bw"],
  div[id$="bw"] > div:not(.museBGSize) {
    min-height: 0px !important;
  }
}

/* Infographics space adjustments */
.Infogram > .verticalspacer {
  height: 0px !important;
}

.Infogram > div[id$="bw"],
.Infogram > div[id$="bw"] > div:not(.museBGSize) {
  min-height: 0px !important;
}

/* SVG */
text {
  font-family: Helvetica;
}

text.small {
  font-size: 10px;
}

text.medium {
  font-size: 16px;
}

text.large {
  font-size: 22px;
}

/* Dark mode */
.body-dark,
.body-dark .TabbedPanelsContent,
.body-dark #page {
  background-color: var(--color-dark) !important;
}

.body-dark .infogram-embed {
  filter: invert(0.88);
}

.body-dark
  :is(p, h1, h2, h3, h4, h5, h6, li):not(a:not(.colelem) *):not(
    .WhiteBackground *
  ):not(.WhiteBackgroundRound *) {
  color: var(--color-white) !important;
}

.body-dark text {
  fill: var(--color-white);
}

.body-dark .LightBlueBackground {
  background-color: var(--color-dark-azure) !important;
}

#dark-mode-switch {
  position: fixed;
  top: 25px;
  right: 310px;
  z-index: 1000;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  #dark-mode-switch {
    right: 86px;
  }
}

#dark-mode-switch * {
  box-sizing: border-box;
}

.toggle__backdrop:first-of-type .clouds path:first-of-type {
  fill: var(--ray);
}

.toggle {
  -webkit-tap-highlight-color: transparent;
  width: var(--width);
  z-index: 10;
  will-change: transform;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  aspect-ratio: var(--ar);
  border-radius: 100vh;
  border: 0;
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--speed) var(--easing);
  outline-color: transparent;
  background: hsl(
    calc(204 + (var(--dark, 0) * 25)) calc((53 - (var(--dark, 0) * 28)) * 1%)
      calc((47 - (var(--dark, 0) * 31)) * 1%)
  );
}

.toggle:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 calc(var(--width) * -0.025) calc(var(--width) * 0.025) 0
      var(--toggle-shadow-1) inset,
    0 calc(var(--width) * 0.025) calc(var(--width) * 0.025) 0
      var(--toggle-shadow-2) inset;
  border-radius: 100vh;
}

.toggle__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 100vh;
  display: block;
  clip-path: inset(0 0 0 0 round 100vh);
  container-type: inline-size;
}

.toggle__backdrop {
  overflow: visible !important;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  transition: translate var(--speed) var(--easing);
  translate: 0 calc(var(--dark, 0) * (100% - (3 / 8 * var(--width))));
}

.body-light .toggle__backdrop:last-of-type {
  transition-timing-function: cubic-bezier(0.2, -0.6, 0.7, 1.6);
}

.body-light .stars path {
  transition-delay: 0s;
}

.stars path {
  transform-box: fill-box;
  transform-origin: 25% 50%;
  scale: calc(0.25 + (var(--dark, 0) * 0.75));
  transition: scale var(--speed) calc(var(--speed) * 0.5) var(--easing);
}

.toggle__indicator {
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0%;
  display: grid;
  place-items: center;
  padding: 3%;
  transition: translate var(--speed) var(--easing);
  translate: calc(var(--dark, 0) * (100cqi - 100%)) 0;
}

.toggle__star {
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  transition: translate var(--speed) var(--easing);
  translate: calc((var(--dark, 0) * -10%) + 5%) 0;
}

.sun {
  background: var(--sun);
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: calc(var(--width) * 0.01) calc(var(--width) * 0.01)
      calc(var(--width) * 0.02) 0 var(--sun-shadow-1) inset,
    calc(var(--width) * -0.01) calc(var(--width) * -0.01)
      calc(var(--width) * 0.02) 0 var(--sun-shadow-2) inset;
}

.moon {
  position: absolute;
  inset: -1%;
  border-radius: 50%;
  background: var(--moon);
  transition: opacity var(--speed) var(--easing);
  opacity: var(--dark, 0);
  box-shadow: calc(var(--width) * 0.01) calc(var(--width) * 0.01)
      calc(var(--width) * 0.02) 0 var(--sun-shadow-1) inset,
    calc(var(--width) * -0.01) calc(var(--width) * -0.01)
      calc(var(--width) * 0.02) 0 var(--moon-shadow-1) inset;
}

.moon__crater {
  position: absolute;
  background: var(--crater);
  border-radius: 50%;
  width: calc(var(--size, 10) * 1%);
  aspect-ratio: 1;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  box-shadow: calc(var(--width) * 0.01) calc(var(--width) * 0.01)
      calc(var(--width) * 0.01) 0 var(--crater-shadow-1) inset,
    0 calc(var(--width) * 0.005) calc(var(--width) * 0.01) 0
      var(--crater-shadow-2);
}

.moon__crater:nth-of-type(1) {
  --size: 18;
  --x: 40;
  --y: 15;
}

.moon__crater:nth-of-type(2) {
  --size: 20;
  --x: 65;
  --y: 58;
}

.moon__crater:nth-of-type(3) {
  --size: 34;
  --x: 18;
  --y: 40;
}

.toggle__star:before {
  content: "";
  z-index: -1;
  width: 356%;
  background: radial-gradient(var(--stars-bg-1) 40%, transparent 40.5%),
    radial-gradient(var(--stars-bg-1) 56%, transparent 56.5%) var(--stars-bg-1);
  border-radius: 50%;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: translate var(--speed) var(--easing);
  translate: calc((50 - (var(--dark, 0) * 4)) * -1%) -50%;
}

.toggle__star:after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: var(--stars-bg-2);
  filter: blur(4px);
  translate: 2% 4%;
  border-radius: 50%;
  z-index: -1;
}

.toggle__indicator-wrapper {
  position: absolute;
  inset: 0;
}

.body-dark {
  --dark: 1;
}

.stars g {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.stars g:nth-of-type(3) {
  animation: twinkle 4s -2s infinite;
}

.stars g:nth-of-type(11) {
  animation: twinkle 6s -2s infinite;
}

.stars g:nth-of-type(9) {
  animation: twinkle 4s -1s infinite;
}

@keyframes twinkle {
  0%,
  40%,
  60%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0);
  }
}

.browser_width.colelem,
.browser_width.colelem > div:not(.museBGSize) {
  min-height: 0px !important;
}