@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadein:not(.animated) {
    animation: fadein .7s
}

.fadeInDelayed:not(.animated) {
    opacity: 0;
    animation-name: fadein;
    animation-duration: .8s;
    animation-delay: 1.4s;
    animation-fill-mode: forwards
}

@keyframes fadeInFast {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeInFast:not(.animated) {
    animation-name: fadeInFast;
    animation-duration: .4s
}

@keyframes fadeout {
    from {
        opacity: 100;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

.fadeout:not(.animated) {
    animation: fadeout .3s forwards
}

@keyframes loading {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.dd-loading {
    animation: loading 1s infinite !important
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.fadeInDown:not(.animated):not(.yz_effect) {
    opacity: 0;
    animation-name: fadeInDown;
    animation-duration: .5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    opacity: 0
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp:not(.animated) {
    animation-name: fadeInUp;
    animation-duration: .5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0
}

.fadeInUp.delayed:not(.animated) {
    animation-delay: 1.3s
}

@keyframes fadeInLeft {
    from {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        visibility: visible;
        transition: visibility 0s 0s;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft:not(.animated) {
    animation-name: fadeInLeft;
    animation-duration: .3s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    visibility: visible
}

@keyframes fadeOutLeft {
    from {
        visibility: visible;
        transition: visibility 0s 0s;
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft:not(.animated) {
    animation-name: fadeOutLeft;
    animation-duration: .3s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    visibility: hidden
}

@keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.bounceInDown:not(.animated) {
    opacity: 0;
    animation-name: bounceInDown;
    animation-duration: .9s;
    animation-delay: .3s;
    animation-fill-mode: forwards
}

@keyframes bounceInLeft {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.bounceInLeft:not(.animated) {
    animation-name: bounceInLeft;
    animation-duration: .9s;
    animation-delay: .7s;
    animation-fill-mode: forwards;
    opacity: 0
}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada:not(.animated) {
    animation-name: tada;
    animation-duration: 1s;
    animation-delay: 5s
}

@keyframes animateShape-1 {
    0% {
        right: 3%;
        top: 3%;
    }

    50% {
        right: 2%;
        top: 5%;
    }

    100% {
        right: 3%;
        top: 3%;
    }
}

@keyframes animateShape-2 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(60deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes animateShape-3 {
    0% {
        right: -2%;
        bottom: 6%;
    }

    50% {
        right: -3%;
        bottom: 4%;
    }

    100% {
        right: -2%;
        bottom: 6%;
    }
}

@keyframes animateShape-4 {
    0% {
        left: -2%;
        bottom: 6%;
    }

    50% {
        left: 2%;
        bottom: 6%;
    }

    100% {
        left: -2%;
        bottom: 6%;
    }
}

@keyframes animateShape-5 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes animateShape-6 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}