.message {
   padding: 20px 0;
}

.message__wrapper 
{
	 position:relative;
	 margin:0 auto;
	 font-size:25px;	
}

.message__text-wrapper 
{
	position:absolute;	
    left:21%;
    top:33%;
    font-family:"Monotype Corsiva";
    font-weight:400;    
    font-size:23px;
    animation: hideMessage 2s ease-in forwards 5s;
    width:700px;  
}

.message--animated {
    display: block;
    margin: 0 auto 5px;
    border-radius: 10px;
    padding: 10px 20px;
    max-width: max-content;
    font-weight: 400;
    font-size: 25px;
    animation: messageAnime 0.7s ease-in forwards 1.3s;
    color: transparent;
}

.message--animated-delay-2 {
    animation-delay: 2.6s;
}

.message--animated-delay-3 {
    animation-delay: 3.9s;
}





@keyframes messageAnime {
    0% {
        background-color: #700904;
        color: #fff;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    100% {      
        background-color: #700904;
        color: #fff;  
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }  
}

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

    100% {      
        opacity: 0;
    }    
}