@keyframes revealText {
    0% {
        clip-path: inset(0px 100% 0px 0%);
        -webkit-clip-path: inset(0px 100% 0px 0%);
    }
    
    20% {
        clip-path: inset(0px 100% 0px 0%);
        -webkit-clip-path: inset(0px 100% 0px 0%);
    }
    40% {
        left: 0;
        opacity: 1;
    }
    100% {
        clip-path: inset(0px 0px 0px 0px);
        -webkit-clip-path: inset(0px 0px 0px 0px);
        left: 0;
        opacity: 1;
    }
}

@keyframes revealTextback {
    0% {
        clip-path: inset(0px 50% 0px 50%);
        -webkit-clip-path: inset(0px 50% 0px 50%);
    }
    
    100% {
        clip-path: inset(0px 0px 0px 0px);
        -webkit-clip-path: inset(0px 0px 0px 0px);
        left: 0;
        opacity: 1;
    }
}

.animated{
    opacity: 0;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animateHead {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(50%, 0, 50%);
        transform: translate3d(50%, 0, 50%);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}