main-navigation::part(nav-root), nav-sub-menu::part(nav-sub-menu), bread-crumbs::part(bread-crumbs-list) {
    margin: 0;
    padding: 0
}

.main-nav-wrap {
    width: 100%;
    position: absolute;
    overflow: hidden
}

main-navigation {
    --menu-height: 70vh;
    --menu-root-items-min-width: 200px;
    --preview-width: 38%;
    --brand-0: #003765;
    --brand-1: #0077ad;
    --brand-2: #3e9bcf;
    --brand-3: #59acdf;
    --brand-4: #76b8ec;
    --highlight: white;
    --selected: #f2b969;
    --nav-wrap-bg: var(--brand-0);
    --nav-wrap-root-bg: var(--brand-0);
    --nav-tree-bg: var(--brand-0);
    --nav-item-padding: 12px;
    --nav-item-color: white;
    --nav-item-bg: transparent;
    --nav-item-hover-color: var(--brand-0);
    --nav-item-hover-bg: var(--highlight);
    --nav-item-open-color: var(--brand-0);
    --nav-item-open-bg: var(--selected);
    display: block;
    position: relative
}

main-navigation::part(main-navigation-wrap) {
    height: var(--menu-height);
    background: var(--nav-wrap-bg);
    transition: all .4s;
    display: grid;
    overflow: hidden
}

main-navigation.is-closed::part(main-navigation-wrap) {
    height: 0
}

main-navigation::part(main-navigation-wrap) {
    grid:none/100vw 0fr 0fr
}

nav-tree {
    width: 100vw;
    z-index: 99;
    position: relative
}

nav-sub-menu {
    width: 100vw;
    animation: slide-in-from-right .4s
}

nav-preview {
    display: none
}

@media (min-width: 640px) {
    main-navigation::part(main-navigation-wrap) {
        grid:none/1fr 1.6fr 0
    }

    main-navigation::part(nav-wrap-root) {
        z-index: 90
    }

    main-navigation.is-open::part(menu-back-button-wrap) {
        display: none
    }

    nav-tree {
        width: unset;
        position: static;
        overflow-x: hidden
    }

    nav-tree nav-sub-menu {
        animation: slide-in-from-left .4s
    }

    nav-sub-menu.fade-out + nav-sub-menu:not(.fade-out) {
        border: 2px solid red;
        display: none
    }

    nav-sub-menu {
        width: 33%
    }
}

@media (min-width: 768px) {
    main-navigation::part(main-navigation-wrap) {
        grid:auto-flow/1fr 1.6fr var(--preview-width)
    }

    nav-sub-menu {
        width: 50%
    }

    nav-preview {
        display: flex
    }
}

@media (min-width: 1024px) {
    main-navigation::part(main-navigation-wrap) {
        grid:auto-flow/1fr 1.6fr var(--preview-width)
    }

    nav-sub-menu {
        width: 33%
    }
}

bread-crumbs {
    height: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(100 116 139/var(--tw-bg-opacity));
    flex-direction: row;
    display: flex
}

bread-crumbs nav-item {
    border-style: none;
    display: inline
}

bread-crumbs nav-item.open::part(nav-item), bread-crumbs nav-item::part(nav-item) {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105/var(--tw-bg-opacity));
    border-style: none;
    padding: .25rem;
    display: inline-flex
}

bread-crumbs nav-item div[slot=submenu-hint] {
    display: none
}

@keyframes preview-fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

nav-preview {
    background: 0 0
}

nav-preview div[slot=preview] {
    min-width: var(--preview-width);
    animation: preview-fade-in .6s ease-in-out
}

nav-preview h2 {
    font-size: 1.875rem;
    line-height: 2.25rem
}

nav-preview .style-dummy .image {
    height: 16rem;
    width: 16rem;
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59/var(--tw-bg-opacity))
}

nav-preview > div.style-fill {
    height: 100%;
    position: absolute
}

nav-preview .style-fill .text {
    z-index: 2;
    margin-top: 4rem;
    margin-left: 1rem;
    position: relative
}

nav-preview .style-fill .image {
    height: 100%;
    width: 130%;
    position: absolute;
    bottom: 0;
    mask-image: linear-gradient(110deg, #0000 0% 28%, #000 50% 100%)
}

nav-preview .style-fill .image img {
    max-width: unset;
    height: 100%;
    width: auto;
    float: right
}

main-navigation::part(nav-wrap-root) {
    height: var(--menu-height);
    min-width: var(--menu-root-items-min-width);
    background: var(--nav-wrap-root-bg)
}

nav-tree {
    background: var(--nav-tree-bg);
    height: 101%
}

nav-tree::part(nav-tree) {
    height: 100%;
    display: flex
}

nav-sub-menu {
    height: var(--menu-height);
    background: var(--brand-1);
    z-index: 6;
    overflow-x: hidden;
    overflow-y: auto
}

nav-sub-menu.fade-out {
    opacity: 0;
    margin-left: -50% !important
}

nav-sub-menu:nth-child(2) {
    background: var(--brand-2);
    z-index: 5
}

nav-sub-menu:nth-child(3) {
    background: var(--brand-3);
    z-index: 4
}

nav-sub-menu:nth-child(4) {
    background: var(--brand-4);
    z-index: 3
}

nav-sub-menu:nth-child(5) {
    background: var(--brand-5);
    z-index: 2
}

nav-item {
    cursor: pointer;
    color: var(--nav-item-color);
    background: var(--nav-item-bg);
    border: var(--nav-item-border);
    border-width: var(--nav-item-border-width);
    -webkit-touch-callout: none;
    user-select: none;
    margin-bottom: -1px;
    display: block
}

nav-item > * {
    pointer-events: none
}

nav-item span {
    flex-grow: 10
}

nav-item span[slot=submenu-count] {
    flex-grow: 0
}

nav-item::part(nav-item) {
    padding: var(--nav-item-padding);
    border-top: 1px solid #0000;
    border-bottom: 1px solid #0000;
    gap: 10px;
    display: flex
}

nav-item.open::part(nav-item) {
    color: var(--selected);
    border-top: 1px solid var(--selected);
    border-bottom: 1px solid var(--selected)
}

nav-item::part(link) {
    color: var(--nav-item-color);
    flex-grow: 1;
    text-decoration: none
}

nav-item.open::part(link) {
    color: var(--selected)
}

nav-item::part(nav-item) {
    transition: all .3s
}

nav-item:hover::part(nav-item) {
    background: var(--nav-item-hover-bg)
}

nav-item:hover::part(link), nav-item:hover div[slot=submenu-hint] {
    color: var(--nav-item-hover-color)
}

nav-item.open div[slot=submenu-hint] {
    rotate: -90deg
}

nav-item div[slot=submenu-hint] {
    transition: rotate .4s;
    position: absolute;
    right: 13px
}

nav-item div[slot=submenu-hint]:after {
    content: "";
    border: 5px solid #0000;
    border-top: 10px solid;
    border-bottom: 0;
    display: inline-block
}

main-navigation.is-closed::part(menu-back-button-wrap) {
    display: none
}

main-navigation.is-open::part(menu-back-button-wrap) {
    width: 100%;
    background-color: var(--brand-0);
    z-index: 100;
    justify-content: center;
    position: sticky;
    bottom: 0
}

main-navigation::part(menu-back-button) {
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.25rem;
    line-height: 1.75rem
}

@keyframes slide-in-from-left {
    0% {
        opacity: 0;
        transform: translate(-200px)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slide-in-from-right {
    0% {
        opacity: .5;
        transform: translate(200px)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

main-navigation > nav-item {
    transition: background-color .3s, color .3s, transform .3s cubic-bezier(.57, -.01, .25, 1.48);
    transform: translate(-100%)
}

main-navigation.is-open > nav-item {
    transform: translate(0)
}

main-navigation nav-tree {
    margin-left: -100%;
    transition: all .6s cubic-bezier(.57, -.01, .25, 1.48)
}

main-navigation nav-sub-menu {
    margin-left: -100%;
    margin-right: -100%;
    transition: all .4s ease-out;
    transform: translate(0)
}

main-navigation.is-open nav-sub-menu, main-navigation.is-open nav-tree {
    margin-left: 0;
    margin-right: -1px;
    transform: translate(0)
}