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

    .animated-fade-in {
        scale: 0.8;
        opacity: 0;
        transition: opacity 500ms ease-in;
    }

        .animated-fade-in.appear {
            opacity: 1;
            scale: 1;
        }

    @keyframes grow-fade-in {
        from {
            transform: scale(0);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .animate-grow-fade-in {
        animation: grow-fade-in .3s linear;
    }

    /*This animation will make the element fade in from invisible to fully opaque*/

    @keyframes fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .animate-fade-in {
        animation: fade-in .3s linear;
    }


    /*This animation makes the element appear from a small circle until it grows into the full size element*/
    @keyframes circle-in-center {
        from {
            clip-path: circle(0%);
        }

        to {
            clip-path: circle(125%);
        }
    }

    .animate-circle-centre {
        animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
    }


    /*This animation makes the element appear from a small square until it grows into the full size element*/
    @keyframes square-in-center {
        from {
            clip-path: inset(100% 100% 100% 100%);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    .animate-square-centre {
        animation: 1s cubic-bezier(.25, 1, .30, 1) square-in-center both;
    }

    /*This animation makes the element appear from a small square until it grows into the full size element*/
    @keyframes square-in-center-fade-in {
        from {
            clip-path: inset(100% 100% 100% 100%);
            opacity: 0;
        }

        to {
            clip-path: inset(0 0 0 0);
            opacity: 1;
        }
    }

    .animate-square-centre-fade-in {
        animation: 1.5s cubic-bezier(.25, 1, .30, 1) square-in-center both;
    }

    /*This animation makes the element appear from a left to right screen wipe*/
    @keyframes wipe-in-right {
        from {
            clip-path: inset(0 100% 0 0);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    /*This animation makes the element appear from a right to left screen wipe*/
    .animate-wipe-right {
        animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
    }

    @keyframes wipe-in-left {
        from {
            clip-path: inset(0 0 0 100%);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    .animate-wipe-left {
        animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
    }

    /*This animation makes the element appear from a bottom to top screen wipe*/
    @keyframes wipe-in-up {
        from {
            clip-path: inset(100% 0 0 0);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    .animate-wipe-up {
        animation: 1.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
    }

    /*This animation makes the element appear from a top to bottom screen wipe*/
    @keyframes wipe-in-down {
        from {
            clip-path: inset(0 0 100% 0);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    .animate-wipe-down {
        animation: 1.5s cubic-bezier(.25, 1, .30, 1) wipe-in-down both;
    }

    /*This animation makes the element appear from the middle out*/
    @keyframes wipe-cinematic-in {
        0% {
            clip-path: inset(100% 0 100% 0);
        }

        30%, 70% {
            clip-path: inset(10% 0 10% 0);
        }

        100% {
            clip-path: inset(0 0 0 0);
        }
    }

    .animate-wipe-cinematic {
        animation-name: wipe-cinematic-in;
    }

    /*---------------Snowing effect------------------*/


    .snowflake {
        color: #fff;
        font-size: 1.75em;
        font-family: Arial, sans-serif;
        text-shadow: 0 0 5px #000;
    }


        .snowflake, .snowflake .inner {
            animation-iteration-count: infinite;
            animation-play-state: running
        }

    @keyframes snowflakes-fall {
        0% {
            transform: translateY(0)
        }

        100% {
            transform: translateY(110vh)
        }
    }

    @keyframes snowflakes-shake {
        0%,100% {
            transform: translateX(0)
        }

        50% {
            transform: translateX(80px)
        }
    }

    .snowflake {
        position: fixed;
        top: -10%;
        z-index: 9999;
        -webkit-user-select: none;
        user-select: none;
        cursor: default;
        pointer-events: none;
        animation-name: snowflakes-shake;
        animation-duration: 3s;
        animation-timing-function: ease-in-out
    }

        .snowflake .inner {
            animation-duration: 10s;
            animation-name: snowflakes-fall;
            animation-timing-function: linear
        }

        .snowflake:nth-of-type(0) {
            left: 1%;
            animation-delay: 0s
        }

            .snowflake:nth-of-type(0) .inner {
                animation-delay: 0s
            }

        .snowflake:first-of-type {
            left: 10%;
            animation-delay: 1s
        }

            .snowflake:first-of-type .inner, .snowflake:nth-of-type(8) .inner {
                animation-delay: 1s
            }

        .snowflake:nth-of-type(2) {
            left: 20%;
            animation-delay: .5s
        }

            .snowflake:nth-of-type(2) .inner, .snowflake:nth-of-type(6) .inner {
                animation-delay: 6s
            }

        .snowflake:nth-of-type(3) {
            left: 30%;
            animation-delay: 2s
        }

            .snowflake:nth-of-type(11) .inner, .snowflake:nth-of-type(3) .inner {
                animation-delay: 4s
            }

        .snowflake:nth-of-type(4) {
            left: 40%;
            animation-delay: 2s
        }

            .snowflake:nth-of-type(10) .inner, .snowflake:nth-of-type(4) .inner {
                animation-delay: 2s
            }

        .snowflake:nth-of-type(5) {
            left: 50%;
            animation-delay: 3s
        }

            .snowflake:nth-of-type(5) .inner {
                animation-delay: 8s
            }

        .snowflake:nth-of-type(6) {
            left: 60%;
            animation-delay: 2s
        }

        .snowflake:nth-of-type(7) {
            left: 70%;
            animation-delay: 1s
        }

            .snowflake:nth-of-type(7) .inner {
                animation-delay: 2.5s
            }

        .snowflake:nth-of-type(8) {
            left: 80%;
            animation-delay: 0s
        }

        .snowflake:nth-of-type(9) {
            left: 90%;
            animation-delay: 1.5s
        }

            .snowflake:nth-of-type(9) .inner {
                animation-delay: 3s
            }

        .snowflake:nth-of-type(10) {
            left: 25%;
            animation-delay: 0s
        }

        .snowflake:nth-of-type(11) {
            left: 65%;
            animation-delay: 2.5s
        }

        .snowflake:nth-of-type(12) {
            left: 85%;
            animation-delay: 1s
        }
            .snowflake:nth-of-type(12) .inner {
                animation-delay: 7s
            }

        .snowflake:nth-of-type(13) {
            left: 20%;
            animation-delay: 3s
        }

            .snowflake:nth-of-type(14) .inner, .snowflake:nth-of-type(13) .inner {
                animation-delay: 3.8s
            }

        .snowflake:nth-of-type(16) {
            left: 60%;
            animation-delay: 0.5s
        }

            .snowflake:nth-of-type(17) .inner, .snowflake:nth-of-type(16) .inner {
                animation-delay: 1.25s
            }

}