.demo{ background: #eb3b5a; }
.text-effect{
    color: #fff;
    font-family: "Russo One", sans-serif;
    font-size: 100px;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    animation: flipOutX 2s linear alternate infinite;
}

@keyframes flipOutX{
    from{
        transform: perspective(400px) rotateX(0);
    }
    30%{
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1;
    }
    to{
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@media only screen and (max-width: 990px){
    .text-effect{ font-size: 70px; }
}

@media only screen and (max-width: 767px){
    .text-effect{ font-size: 60px; }
}

@media only screen and (max-width: 576px){
    .text-effect{ font-size: 35px; }
}