:root{
    --mode : color-burn;
    --cap-height: 2.5em;
    --img-size:200px;
    --cap-top: 200px; 
    --border-color: silver;
    --radius: 20px;
    --border-size: 1px;
   }

nav{position:relative;}

nav.cj_menu_full_monty {
}
nav.cj_menu_json {
    white-space:pre;
}

.cj_menu_buttons ul {
    list-style:none;
    display:flex !important;
    flex-direction:row;
    flex-wrap: wrap;
    position:relative;
    flex-grow:0;
    flex-shrink:0;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap:10px;
    background: none;
    border: none;
    
}

.cj_menu_buttons li{
    border:var(--border-size) solid var(--border-color);
    width:200px;
    height:calc(var(--img-size) + 4em);
    box-shadow: inset white 7px 5px 10px, inset gray -7px -7px 10px;
    isolation:isolate;
    position:relative;
    border-radius:var(--radius);
    z-index:998;
    margin-right:0.5em;
}
.cj_menu_buttons img, .cj_menu_buttons iframe{
    border-radius:var(--radius) var(--radius) 0 0;
    width:100%;
    height:var(--img-size);
    mix-blend-mode: var(--mode);
    position:absolute;
    top:0px;
    left:0px;
    z-index:999;
}
.cj_menu_buttons p.caption {
    border-radius:0 0 var(--radius) var(--radius);
    position:absolute;
    bottom:1em;
    padding-left:0.5em;
    padding-right:0.5em;
    height:var(--cap-height);
    text-align:center;
    mix-blend-mode: var(--mode);
    width:100%;
/*    font-family:sans-serif;
    color: #005555; */
}

nav.cj_menu_links, nav.cj_menu_non_links {
}
nav.cj_menu_full_monty {
}
nav.cj_menu_full_monty {
}
div.breadbin {
    display:flex;
    grid-auto-flow: column;
    align-self:center;
    justify-content:center;
    position:relative;
}
div.breadbin > div {
    clip-path: polygon(0 0, 90% 0%, 100% 50%, 90% 100%, 100% 100%, 0 100%);
    /*
    clip-path: path("M 0.4148338,0.0929903 142.60779,0.23926139 153.5545,9.9742508 142.60779,19.85444 0.4148338,19.708168 Z");
    */
    align-self:center;
    justify-content:center;
    height:2em;
    width:10em;
    margin-left:-2.5em;
    background-color:rgb(255, 255, 255);
    position:relative;
}
div.breadbin > div > div {
    width:inherit;
    height:inherit;
    clip-path:inherit;
    background:linear-gradient(rgb(110, 108, 129), white, rgb(110, 108, 129));
    opacity:0.8;
    transform:scale(95%);
    border-radius:5px;
}
div.breadbin > div > div > div {
    xxpadding-top:4%;
}
ul.cj_menu_links li, 
ol.cj_menu_links li,
ul.cj_menu_non_links li, ol.cj_menu_non_links li {
    list-style:none;
}
ul.cj_menu_links, 
ol.cj_menu_links,
ul.cj_menu_non_links, 
ol.cj_menu_non_links {
    
}
.textcrumbs {
    padding-left:300px;
    color:white;
}
.textcrumbs a {
    color:white;
}
.xxtextcrumbs {
    background:linear-gradient( white, rgb(183, 226, 226), white);
    border: 1px solid gray;
    height:2em;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:0.5em;
    margin-bottom:1em;
    margin-collapse:none;
    min-width:100%;
    position:relative;
}