.anim-block {
    opacity: 0;
    /* overflow-x: hidden; */
}

.anim-zoom {
    animation: zoomIn 1s ease-out;
    animation-delay: 500ms;
}
  
@keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.anim-left.visible,
.anim-sides > div:nth-child(odd).visible {
    animation: animLeft var(--anim-duration) ease-in-out forwards;
}

@-webkit-keyframes animLeft {
    0% {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes animLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.anim-right.visible,
.anim-sides > div:nth-child(even).visible {
    animation: animRight var(--anim-duration) ease-in-out forwards;
}

@-webkit-keyframes animRight {
    0% {
        -webkit-transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes animRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.anim-top.visible,
.anim-content .main-content > *.visible:not(.entry-content),
.anim-content .heading-number-wrap > *.visible,
.anim-content .main-content .entry-content > *.visible {
    animation: animTop var(--anim-duration) ease-in-out forwards;
}

@keyframes animTop {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.anim-bottom.visible {
    animation: animBottom var(--anim-duration) ease-in-out forwards;
}

@keyframes animBottom {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.anim-zoom-in.visible {
    animation: animZoomIn var(--anim-duration) ease-in-out forwards;
}

@keyframes animZoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.anim-opacity.visible {
    animation: animOpacity var(--anim-duration) ease-in-out forwards;
}

@keyframes animOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}