.header-main .animation-title,
.header-main .animation-description,
.header-main .animation-button {
    opacity: 0;
}

.header-main.active .animation-title{
    animation: 0.3s linear animating-transition;
    animation-fill-mode: forwards;
}

.header-main.active .animation-description{
    overflow: hidden;
    animation: 0.3s linear animating-transition;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.header-main.active .animation-button{
    overflow: hidden;
    animation: 0.3s linear animating-transition;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

.animation-content {
    animation: 1s linear animating-opacity;
    animation-fill-mode: forwards;
    animation-delay: 1.1s;
    opacity: 0;
}
.default_animation_block{
    opacity: 0;
    animation: 0.3s linear animating-opacity;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
}
.default_animation_block .logo{
    opacity: 0;
    animation: 0.3s linear transform-scale;
    animation-fill-mode: forwards;
    animation-delay: 0.6s;
}
.default_animation_block .top{
    animation: 0.3s linear animating-transition-top;
    animation-fill-mode: forwards;
    animation-delay: 0.9s;
    opacity: 0;
}
.default_animation_block .bottom{
    animation: 0.3s linear animating-transition;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    opacity: 0;
}
@keyframes animating-transition {
    from {
        opacity: 1;
        transform: translateY(3vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animating-transition-top {
    from {
        opacity: 1;
        transform: translateY(-3vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animating-opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes transform-scale {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}