.custom-top-menu {
	display: none;
}
@media (min-width: 990px) {
	.custom-top-menu {
	    display: block;
	    width: 100%;
        height: 100%;
        position: relative;
	}
	.custom-top-menu .menu-wrapper {
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
    }
    .custom-top-menu .item {
        display: none;
    }
    .custom-top-menu .item[data-level="1"] {
        display: block;
    }
    .custom-top-menu .item > a {
        color: #1d2029;
        font-weight: 500;
        font-size: 1rem;
        text-decoration: none;
    }
    .custom-top-menu .item:hover > a {
        color: var(--theme-base-color);
    }
	.custom-top-menu .item.catalog > a {
	    vertical-align: middle;
	    cursor: pointer;
	    border: 1px solid transparent;
	    white-space: nowrap;
	    border-radius: .25rem;
	    margin: 0;
	    overflow: hidden;
	    transition: background-color .3s ease;
	    -moz-transition: background-color .3s ease;
	    -ms-transition: background-color .3s ease;
	    -o-transition: background-color .3s ease;
	    -webkit-transition: background-color .3s ease;
	    
	    background-color: var(--theme-base-color);
	    border-color: var(--theme-base-color);
	    color: #ffffff;
	    
        padding: .6875rem 1.25rem;
        font-weight: 600;
        
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
	}
	.custom-top-menu .item.catalog:hover > a {
	    background-color: #e04949;
	    border-color: #e04949;
	    color: #ffffff;
	}
	
	.custom-top-menu .item.catalog > a > i {
        background: url(/local/templates/aspro_next/images/svg/Catalog_menu.svg) center center no-repeat;
        display: block;
        height: 1rem;
        width: 1rem;
        background-size: contain;
	}
	.custom-top-menu .item.catalog.open > a > i {
        background: url(/local/templates/aspro_next/images/svg/Close_white.svg) center center no-repeat;
    }
    .catalog-menu {
        position: absolute;
        top: 101%;
        top: calc(100% + .4rem);
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 5px 30px rgba(34, 34, 34, .1);
        transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
        
        display: flex;
	    flex-flow: row nowrap;
	    justify-content: flex-start;
	    align-items: stretch;
	    gap: 0;
	    z-index: -1;
	    opacity: 0;
	    visibility: hidden;
    }
    .catalog-menu.open {
        z-index: 100;
        opacity: 1;
        visibility: visible;
    }
    .catalog-menu__left {
        flex: 0 0 312px;
        border-right: 1px solid #f2f2f2;
        box-sizing: border-box;
        overflow: auto;
	    height: 100%; 
    }
    .catalog-menu__left > .menu {
        padding: 1.25rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
    }
    .catalog-menu__left > .menu > a {
        color: #222222;
        display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-between;
	    align-items: center;
	    gap: .4rem;
	    width: 100%;
	    font-size: 1rem;
	    font-weight: 500;
	    padding: .5625rem .4rem .625rem 1rem;
    }
    .catalog-menu__left > .menu > a.hover {
        background-color: #f4f4f4;
    }
    .catalog-menu__left > .menu > a > i,
    .catalog-menu__left > .menu > a:hover > i {
        top: 0;
        min-height: 1rem;
        background-color: transparent;
    }
    .catalog-menu__right {
        flex: 0 1 calc(100% - 313px);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
    }
    .catalog-menu__right .title {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: .4rem;
        color: #333;
        font-size: 1.25rem;
        font-weight: 600;
        padding: 2.0625rem 2.5rem 1.75rem;
        transition: color ease-out 70ms;
    }
    .catalog-menu__right .title:hover {
        color: var(--theme-base-color);
        padding-bottom: 40px;
    }
    .catalog-menu__right .title > i {
        background: #f4f4f4;
        height: 1.75rem;
        width: 1.75rem;
        display: flex;
	    flex-flow: row wrap;
	    justify-content: center;
	    align-items: center;
    }
    .catalog-menu__right .title > i > svg * {
        stroke: #333;
        transition: stroke ease-out 70ms;
    }
    .catalog-menu__right .title:hover > i > svg * {
        stroke: var(--theme-base-color);
    }
    .catalog-menu__right .menu {
	    overflow: auto;
	    padding: 0 2.5rem 2.5rem;
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	    grid-gap: 2rem;
    }
    .catalog-menu__right .menu a {
	    display: flex;
	    flex-flow: row nowrap;
	    justify-content: flex-start;
	    align-items: flex-start;
	    gap: 1.5rem;
	    color: #333;
	    font-size: 1rem;
        font-weight: 600;
        transition: color ease-out 70ms;
    }
    .catalog-menu__right .menu a:hover {
        color: var(--theme-base-color);
    }
    .catalog-menu__right .menu .icon {
        width: 56px;
        height: 56px;
    }
    .catalog-menu__right .menu .icon > img {
        width: 100%;
        height: 100%;
        objet-fit: contain;
    }
}