.animate-img-up {
    animation: animate_img_up 0.2s normal forwards ease-in-out;
}

.animate-img-down {
    animation: animate_img_down 0.2s normal forwards ease-in-out;
}

.animate-text-up {
    animation: animate_text_up 0.2s normal forwards ease-in-out;
}

.animate-text-down {
    animation: animate_text_down 0.2s normal forwards ease-in-out;
}

.menu-top {
    margin-top: 0px !important;
    position: sticky !important;
    width: 100%;

}

@keyframes animate_img_up {
    from {height: 100px;}
    to {height: 175px;}
}

@keyframes animate_img_down {

    from {height: 175px;}
    to {height: 100px;}
}

@keyframes animate_text_up {
    from {height: 0px; opacity: 0;display: none;}
    to {height: 140px;opacity: 1;display: block;}
}

@keyframes animate_text_down {
    from {height: 140px;opacity: 1; display: block;}
    to {height: 0px;opacity: 0;display: none;}
}

@media screen and (max-width: 1024px) {
    @keyframes animate_img_up {
        from {height: 100px;}
        to {height: 175px;}
    }

    @keyframes animate_img_down {

        from {height: 175px;}
        to {height: 100px;}
    }

    @keyframes animate_text_up {
        from {height: 0px; opacity: 0;}
        to {height: 95px;opacity: 1;}
    }

    @keyframes animate_text_down {
        from {height: 95px;opacity: 1;}
        to {height: 0px;opacity: 0;}
    }
    /*.menu-top {
        top: 210px!important;

    } */
}


@media screen and (max-width: 768px) {
    @keyframes animate_img_up {
        from {height: 75px;}
        to {height: 100px;}
    }

    @keyframes animate_img_down {

        from {height: 100px;}
        to {height: 75px;}
    }

    @keyframes animate_text_up {
        from {height: 0px; opacity: 0;}
        to {height: 83px;opacity: 1;}
    }

    @keyframes animate_text_down {
        from {height: 83px;opacity: 1;}
        to {height: 0px;opacity: 0;}
    }
/*
    .menu-top {
        top: 210px!important;

    }*/
}