/* Uncomment to start using intersection observer animations */

.anm {
    overflow: hidden;
}

.anm>*:not([class*=ani]) {
    visibility: hidden;
}



@media (prefers-reduced-motion: no-preference) {

    .animate-opacity {
        animation: opac 1.5s
    }

    @keyframes opac {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    .animate-top {
        position: relative;
        animation: animatetop 1.5s
    }

    @keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }

    .animate-left {
        position: relative;
        animation: animateleft 1.5s
    }

    @keyframes animateleft {
        from {
            left: -300px;
            opacity: 0
        }

        to {
            left: 0;
            opacity: 1
        }
    }

    .animate-right {
        position: relative;
        animation: animateright 1.5s
    }

    @keyframes animateright {
        from {
            right: -300px;
            opacity: 0
        }

        to {
            right: 0;
            opacity: 1
        }
    }

    .animate-bottom {
        position: relative;
        animation: animatebottom 1.5s
    }

    @keyframes animatebottom {
        from {
            bottom: -300px;
            opacity: 0
        }

        to {
            bottom: 0;
            opacity: 1
        }
    }

    .animate-zoom {
        animation: animatezoom 1.5s
    }

    @keyframes animatezoom {
        from {
            transform: scale(0)
        }

        to {
            transform: scale(1)
        }
    }

    .animate-middle {
        animation: animatemiddle 1.4s;
    }

    @keyframes animatemiddle {
        0% {
            transform: scale(0, .025);
        }

        50% {
            transform: scale(1, .025);
        }
    }

}

.animate-slower {
    animation-duration: 2s;
}