﻿
.collapsible-nav {
    padding: 34px 14px 52px;
    font-family: 'Roboto', sans-serif;
}

    .collapsible-nav .item .title {
        font-size: 18px;
        font-weight: bold;
        line-height: 22px;
        margin-bottom: 14px;
        cursor: pointer;
        user-select: none;
    }

    .collapsible-nav .item:not(:first-of-type) .title {
        margin-top: 5px;
    }

    .collapsible-nav .item.open .links {
        max-height: 2500px;
        opacity: 1;
        pointer-events: all;
        margin-bottom: 20px;
        transition: max-height 500ms ease-in-out, opacity 250ms ease-in-out, margin 250ms ease-in-out 0ms;
    }

    .collapsible-nav .item .links {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        user-select: none;
        display: flex;
        flex-direction: column;
        row-gap: 9px;
        transition: max-height 500ms ease-in-out, opacity 250ms ease-in-out, margin 250ms ease-in-out 250ms;
    }

        .collapsible-nav .item .links a {
            color: #888888;
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
        }

@media (min-width: 768px) {
    .collapsible-nav {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        column-gap: 100px;
        row-gap: 30px;
        padding: 34px 45px;
    }

        .collapsible-nav .item {
            padding-bottom: 0;
            transition: padding 250ms ease-in-out;
        }

            .collapsible-nav .item .title {
                cursor: default;
            }

            .collapsible-nav .item .links a:hover {
                color: #c30000;
            }

            .collapsible-nav .item .title {
                margin: 0;
            }

            .collapsible-nav .item:not(:first-of-type) .title {
                margin-top: 0px;
            }

            .collapsible-nav .item .links {
                max-height: unset;
                opacity: 1;
                pointer-events: all;
                user-select: initial;
                margin-top: 14px;
                margin-bottom: 0 !important;
            }
}
