nav.menu--main {
    margin: var(--space-l) 0;
    justify-self: flex-end;
    min-height: 50px;
    min-width: 50px;
    position: relative;
    z-index: 100;
    width: 100%;
}
    @media (min-width: 1025px) {nav.menu--main {
        max-width: 1366px;
        margin: 0 auto
}
    }
    nav.menu--main > * {
        font-family: var(--sans-serif);
    }
    nav.menu--main .toggle--menu-mobile {
        width: 100%;
        height: 50px;
        background: #636466;
        color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: var(--step-1);
        text-transform: uppercase;
        padding: .5em 2.5%;
        border: 0;
        align-items: center;
    }
    @media (min-width: 1025px) {
    nav.menu--main .toggle--menu-mobile {
            display: none
    }
        }
    nav.menu--main .toggle--menu {
        position: relative;
        right: 2.5%;
        height: 50px;
        width: 50px;
        background-color: transparent;
        border: 0;
    }
    nav.menu--main .toggle--menu span:not(.sr-only) {
            height: 5px;
            background: #FFF;
            width: 50px;
            position: relative;
            display: block;
            position: absolute;
            left: 0;
        }
    nav.menu--main .toggle--menu span:not(.sr-only):first-of-type {
                top: 0;
            }
    nav.menu--main .toggle--menu span:not(.sr-only):nth-of-type(2) {
                top: 50%;
                transform: translateY(-50%);
            }
    nav.menu--main .toggle--menu span:not(.sr-only):last-of-type{
                bottom: 0;
                z-index: 10000;
            }
    nav.menu--main > ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
        flex-direction: column;
        display: none;
        position: absolute;
        width: 100%;
        z-index: var(--layer-short);
    }
    nav.menu--main > ul.menu--active {
            display: flex;
        }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu {
            display: flex;
            position: relative;
            flex-direction: row
    }

            nav.menu--main > ul.menu:before {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                box-shadow: 0px 11px 12px -1px rgba(0,0,0,.25);
                content: '';
                clip-path: inset(0px -1px -24px 0px);
                z-index: -2;
            }

        }
    nav.menu--main > ul.menu > li {
            margin: 0;
            padding: 0;
            position: relative;
            min-height: 50px;
            border-right: 1px solid #FFF;
            background-color: var(--color);
            display: flex;
            flex-direction: column;
            background: var(--color);
            
        }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li {
                flex-direction: row
            
        }

            }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li a:hover {
                        
                    background-color: var( --menu-hover);
                    text-decoration: underline
            }
                }
    nav.menu--main > ul.menu > li a:focus {
                background-color: var( --menu-hover);
                text-decoration: none;
            }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li button:hover {
                        
                    background-color: var( --menu-hover);
                    text-decoration: underline
            }
                }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li button:focus {
                        
                    background-color: var( --menu-hover);
                    text-decoration: none
            }
                }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li button:hover {
                        
                    background-color: var( --menu-hover);
                    text-decoration: underline
            }
                }
    nav.menu--main > ul.menu > li:last-of-type { 
                border-right: 0;
            }
    nav.menu--main > ul.menu > li.parent--active {
            }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li {
                min-height: unset;
                flex: 1 1 225px
            
        }
            }
    nav.menu--main > ul.menu > li button {
                background: transparent;
            }
    nav.menu--main > ul.menu > li > div {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
            }
    nav.menu--main > ul.menu > li a {
                color: hsla(var(--menu-text),1);
                font-weight: var(--regular-weight);
                font-size: var(--step-0);
                padding: var(--space-sm) var(--space-md);
                align-self: stretch;
                line-height: 2.25;
                text-transform: uppercase;
                font-weight: var(--bold-weight);
                display: inline-block;
                position: relative;
                z-index: 10;
            }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li a {
                    width: 100%;
                    box-sizing: border-box;
                    text-align: left
            }

                    nav.menu--main > ul.menu > li a:hover, nav.menu--main > ul.menu > li a:focus {
                        background-color: var(--menu-hover);
                    }     
                    
                }
    nav.menu--main > ul.menu > li a:focus {
                    z-index: 15;
                }
    nav.menu--main > ul.menu > li a.is-active {
                    
                }
    nav.menu--main > ul.menu > li .toggle--menu {
                color: hsla(var(--menu-text), 1);
                font-weight: var(--regular-weight);
                font-size: var(--step-0);
                position: relative;
                right: 0;
                height: 50px;
                width: 50px;
                z-index: 20;
                cursor: pointer;


            }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li .toggle--menu {
                    height: 100%


            }
                }
    nav.menu--main > ul.menu > li .toggle--menu:after {
                    content: '\f078';
                    font-family: var(--font-awesome);
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: hsla(var(--menu-text), 1);

                }
    nav.menu--main > ul.menu > li .toggle--menu[aria-expanded=true]:after {
                        content: '\f077';
                    }
    @media (min-width: 1025px) {


                   
                }
    nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu {
                    display: none;
                    list-style: none;
                    position: relative;
                    margin-left: 0;
                    background-color: var(--color) !important;
                    padding: 0;
                }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu {
                        position: absolute;
                        top: 100%;
                        margin: 0
                }

                    }
    nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu--active {
                        display: block;
                    }
    @media (min-width: 1025px) {
    nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu--active {
                            @include box-shadow
                    }
                        }
    nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu li {
                        list-style: none;
                        padding-top: 0;
                        background-color: var(--color) !important;

                       
                    }
    nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu li a {
                            font-weight: var(--regular-weight);
                            color: hsla(var(--menu-text),1);
                            text-transform: capitalize;
                            text-align: left;
                            white-space: nowrap;
                            display: block;
                            padding: .25em 1em;
                        }
    nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu li:hover a {
                                text-decoration: underline;
                            }