/*--------------------------------------------------------------------------*\
    Animation on scrolling (only on desktops)
\*--------------------------------------------------------------------------*/

@media only screen and (min-width: 600px) {

    .is-animation-scroll-js {
        /*transition*/
        -webkit-transition: transform 1s, visibility 1s;
        transition: transform 1s, visibility 1s;
    }

    /*--------------------------------------------------------------------------*\
            Direction
    \*--------------------------------------------------------------------------*/

    .is-animation-scroll-js--top {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateY(-100vh);
        transform: translateY(-100vh);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    .is-animation-scroll-js--top-right {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateX(100vw) translateY(-100vh);
        transform: translateX(100vw) translateY(-100vh);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    .is-animation-scroll-js--right {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateX(100vw);
        transform: translateX(100vw);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    .is-animation-scroll-js--bottom-right {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateX(100vw) translateY(100vh);
        transform: translateX(100vw) translateY(100vh);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    .is-animation-scroll-js--bottom {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateY(100vh);
        transform: translateY(100vh);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    .is-animation-scroll-js--bottom-left {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateX(-100vw) translateY(100vh);
        transform: translateX(-100vw) translateY(100vh);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    .is-animation-scroll-js--left {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    .is-animation-scroll-js--top-left {
        /*box*/
        visibility:hidden;

        /*transform*/
        -webkit-transform: translateX(-100vw) translateY(-100vh);
        transform: translateX(-100vw) translateY(-100vh);

        /*transition*/
        -webkit-transition: none !important;
        transition: none !important;
    }

    /*--------------------------------------------------------------------------*\
            SVG
    \*--------------------------------------------------------------------------*/

    svg.is-animation-scroll-js {
        /*box*/
        overflow: visible;
    }

}