[data-animation^="animated"] {
    visibility:hidden;
}

.animated {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility:visible;
}




/* FadeInUp */

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: .8s;
            animation-duration: .8s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}



/* FadeIn */

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



/* FadeInRight */

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}

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

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




/* FadeInLeft */


.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}

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

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



/* FadeInDown */


.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}





/* Clipping */

.demoImageClipping {
    -webkit-animation-name: demoImageClippingShow;
    animation-name: demoImageClippingShow;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.demoImageClipping::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0D0D0D;
    -webkit-animation-name: demoImageClipping;
    animation-name: demoImageClipping;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes demoImageClipping {
    0% {
        -webkit-clip-path: inset(0 100% 0 -20px);
                clip-path: inset(0 100% 0 -20px);
    }
    50% {
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
    }
    100% {
        -webkit-clip-path: inset(0 0 0 100%);
                clip-path: inset(0 0 0 100%);
    }
}
@keyframes demoImageClipping {
    0% {
        -webkit-clip-path: inset(0 100% 0 -20px);
                clip-path: inset(0 100% 0 -20px);
    }
    50% {
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
    }
    100% {
        -webkit-clip-path: inset(0 0 0 100%);
                clip-path: inset(0 0 0 100%);
    }
}
@-webkit-keyframes demoImageClippingShow {
    0% {
        -webkit-clip-path: inset(0 100% 0 -20px);
                clip-path: inset(0 100% 0 -20px);
    }
    50% {
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
    }
}
@keyframes demoImageClippingShow {
    0% {
        -webkit-clip-path: inset(0 100% 0 -20px);
                clip-path: inset(0 100% 0 -20px);
    }
    50% {
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
    }
}




/* FadeInUpText */

.fadeInUpText {
    -webkit-animation-name: fadeInUpText;
    animation-name: fadeInUpText;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}
@-webkit-keyframes fadeInUpText {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeInUpText {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}