@keyframes anim {
    0% {
        display: block;
    }
    10% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dm-1 {
    0% {
        display: block;
        opacity: 0;
        height: 0px;
        /* height: 100%; */
    }
    80% {
        opacity: 0.8;
    }
    100% {
        /* height: 100%; */
        /* height: 400px; */
        height: calc(55px*4);
        opacity: 1;
    }
}

@keyframes dm-1-out {
    0% {
        display: block;
        opacity: 1;
        /* height: 400px; */
        height: calc(55px*4);
    }
    80% {
        opacity: 0.1;
    }
    100% {
        display: none!important;
        height: 0px;
        opacity: 0;
    }
}

@keyframes dm-2 {
    0% {
        display: block;
        opacity: 0;
        height: 0px;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        height: calc(55px*6);
        opacity: 1;
    }
}

@keyframes dm-2-out {
    0% {
        display: block;
        opacity: 1;
        height: calc(55px*6);
    }
    80% {
        opacity: 0.1;
    }
    100% {
        display: none!important;
        height: 0px;
        opacity: 0;
    }
}

@keyframes dm-2_1 {
    0% {
        display: block;
        opacity: 0;
        height: 0px;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        height: calc(55px*3);
        opacity: 1;
    }
}

@keyframes dm-2_1-out {
    0% {
        display: block;
        opacity: 1;
        height: calc(55px*3);
    }
    80% {
        opacity: 0.1;
    }
    100% {
        display: none!important;
        height: 0px;
        opacity: 0;
    }
}

@keyframes dm-2_2 {
    0% {
        display: block;
        opacity: 0;
        height: 0px;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        height: calc(55px*4);
        opacity: 1;
    }
}

@keyframes dm-2_2-out {
    0% {
        display: block;
        opacity: 1;
        height: calc(55px*4);
    }
    80% {
        opacity: 0.1;
    }
    100% {
        display: none!important;
        height: 0px;
        opacity: 0;
    }
}

@keyframes dm-2_3 {
    0% {
        display: block;
        opacity: 0;
        height: 0px;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        height: calc(55px*4);
        opacity: 1;
    }
}

@keyframes dm-2_3-out {
    0% {
        display: block;
        opacity: 1;
        height: calc(55px*4);
    }
    80% {
        opacity: 0.1;
    }
    100% {
        display: none!important;
        height: 0px;
        opacity: 0;
    }
}

@keyframes dm-2_4 {
    0% {
        display: block;
        opacity: 0;
        height: 0px;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        height: calc(55px*2);
        opacity: 1;
    }
}

@keyframes dm-2_4-out {
    0% {
        display: block;
        opacity: 1;
        height: calc(55px*2);
    }
    80% {
        opacity: 0.1;
    }
    100% {
        display: none!important;
        height: 0px;
        opacity: 0;
    }
}

@keyframes expandDropdown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}