.dropdown-menu {
    z-index: 10000;   
}
    
    @media (max-width: 599px) {.dropdown-menu {
        margin: 0 var(--space-16) var(--space-64)   
}
    }
    
    .dropdown-menu {    

    margin-bottom: var(--space-64);   
}
    
    .dropdown-menu .layout__region {
        overflow: visible;
    }
    
    .dropdown-menu h2 {
        text-align: center;
        font-weight: var(--light-weight);
        font-family: var(--clocktower-serif);
    }
    
    .dropdown-menu p {
        text-align: center;
        margin: 0 auto;
        padding-top: var(--space-32);
    }
    
    @media (max-width: 599px) {
    
    .dropdown-menu ul:first-of-type {
            width: 100%;
            padding: 0;
            box-sizing: border-box
    }
        }
    
    .dropdown-menu ul:first-of-type {

        list-style: none;
        display: flex;
        flex-direction: column;
        padding-left: 0;
        height: auto;
        max-width: none;
        margin: 0 auto;   
}
    
    /* width: 50%; */
    
    @media (min-width: 1025px) {
    
    .dropdown-menu ul:first-of-type {
            flex-flow: row wrap;
            justify-content: center;
            width: 75%
    }
            
        }
    
    @media (min-width: 1280px) {
    
    .dropdown-menu ul:first-of-type {
            width: 60%;
            padding-top: var(--space-32)
    }

        }
    
    .dropdown-menu ul:first-of-type .top-level {
            height: auto;
            display: block;
            flex: 1 1 auto;
            text-align: center;
            position: relative;
            padding: var(--space-8) var(--space-0);
            z-index: 1;
        }
    
    @media (max-width: 599px) {
    
    .dropdown-menu ul:first-of-type .top-level {
                text-align: left
        }
            }
    
    .dropdown-menu ul:first-of-type .top-level::before {
                position: absolute;
                background: #ccc;
                left: 0;
                content: '';
                z-index: 0;
                width: 100%;
                height: 1px;
                bottom: 0;
                
            }
    
    @media (min-width: 1025px) {
    
    .dropdown-menu ul:first-of-type .top-level::before {
                    height: 30%;
                    width: 1px;
                    top: 50%;
                    transform: translate(0, -50%)
                
            }
    
                }
    
    @media (min-width: 1025px) {
                    .dropdown-menu ul:first-of-type .top-level:first-of-type::before {
                        display: none;
                        
                    }   
                }
    
    @media (min-width: 1025px) {
                .dropdown-menu ul:first-of-type .top-level::before {

                }

                .dropdown-menu ul:first-of-type .top-level:last-of-type {
    
                }
            }
    
    .dropdown-menu ul:first-of-type .top-level .toggle-menu {
                background: transparent;
                border: none;
                cursor: pointer;
                position: relative;
                margin: var(--space-8) 0 0;
                display: flex;
                padding: 0;
                font-size: var(--step-1);
                width: 100%;
                align-items: center;
                justify-content: center;
            }
    
    @media (max-width: 599px) {
    
    .dropdown-menu ul:first-of-type .top-level .toggle-menu {
                    justify-content: space-between
            }
                }
    
    .dropdown-menu ul:first-of-type .top-level .toggle-menu {
                
                color: hsl(var(--text-black-dm, var(--text-black)) 1);   
}
    
    .dropdown-menu ul:first-of-type .top-level .toggle-menu::after {
                    content: '\f078';
                    color: hsl(var(--carnelian-dm, var(--carnelian)) 1);
                    font-family: var(--font-awesome);
                    font-size: var(--step--1);
                    margin-left: var(--space-16);
                    display: inline-block;
                }
    
    .dropdown-menu ul:first-of-type .top-level.active .toggle-menu::after {
                        transform: rotate(180deg);
                    }
    
    .dropdown-menu ul:first-of-type .top-level.active ul.sub-menu {
                    display: block;
                    position: relative;
                                
                }
    
    @media (min-width: 1025px) {
    
    .dropdown-menu ul:first-of-type .top-level.active ul.sub-menu {
                        position: absolute;
                        box-shadow:
                        0  5px 10px hsl(var(--card-shadow-one) .05),
                        0 10px 15px hsl(var(--card-shadow-two) .2)
                                
                }
                    }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu {
                list-style: none;
                padding-left: 0;
                background: hsl(var(--menuBackground) 1);
                display: none;
                position: absolute;
                z-index: 100;
                max-width: unset;
                width: 100%; 
                left: 0;
                padding: var(--space-16) 0 0;

                
            }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li {
                    border-bottom: 0;
                    line-height: 3em;
                }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a {
                        display: block;
                        color: hsl(var(--text-black-dm, var(--text-black)) 1);
                        text-decoration: none;
                        font-size: var(--step-1);
                        padding: var(--space-8) var(--space-16);
                        position: relative;
                        animation: unset;
                        background: transparent;

                       
                    }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a::before {
                            content: unset;
                        }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a::after {
                            bottom: 0;
                            content: '';
                            width: 100%;
                            height: 1px;
                            background-color: rgb(240 240 240);
                            display: block;
                            position: absolute;

                        
                        }
    
    @media (min-width: 1025px) {
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a::after {
                                width: 50%;
                                left: 50%;
                                transform: translate(-50%, 0)

                        
                        }

                            }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a:hover, .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a:focus  {
                            background: #b31b1b;
                            color: hsla(var(--text-white-dm, var(--text-white)));
                        }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a:hover::after, .dropdown-menu ul:first-of-type .top-level ul.sub-menu li a:focus::after {
                                background-color: transparent;
                                
                            }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li:last-of-type a::after {
                                content: unset;
                            }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li > ul:first-of-type {
                        position: absolute;
                        top: 0;
                        left: 100%;
                        width: 100%;
                        display: none;
                        list-style: none;
                        padding-left: 0;

                    }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li.active {
                        display: block;
                    }
    
    .dropdown-menu ul:first-of-type .top-level ul.sub-menu li.active > ul {
                            display: block;
                        }