.active_container {
    animation: toggle-off 0.7s ease-in forwards;
}

.active_container.notification_active {
    animation: toggle 0.7s ease-out forwards 1s;
}

@keyframes toggle {
    0% {
        padding-top: 0px;
    }
    100% {
        padding-top: 40px;
    }
}

@keyframes toggle-off {
    0% {
        padding-top: 40px;
    }
    100% {
        padding-top: 0px;
    }
}

@media screen and (max-width: 430px) {
    .active_container {
        animation: toggle-off 0.7s ease-in forwards;
    }

    .active_container.notification_active {
        animation: toggle 0.7s ease-out forwards 1s;
    }

    @keyframes toggle {
        0% {
            padding-top: 0px;
        }
        100% {
            padding-top: 60px;
        }
    }

    @keyframes toggle-off {
        0% {
            padding-top: 60px;
        }
        100% {
            padding-top: 0px;
        }
    }
}