:root {
    --color-primary: #BC9200;
    --color-secondary: #0071BC;
    --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(.4, -0.3, .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: 1200px) {
    .Flex {
        width: 100vw !important;
        left: -49vw !important;
    }

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

    .Flex>img {
        width: 98% !important;
        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;
    }
}

/* 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,
.body-dark #phome {
    background: 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(.2, -0.6, .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);
    }
}