.demo{ background: #92aef4; }

.text-effect{
    color: #fff;
    font-family: 'Inika', serif;
    font-size: 100px;
    font-weight: 600;
    text-align: center;
    margin: 30px auto 0;
}

.text-effect span{
    display: inline-block;
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    animation: 2.2s animate cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.text-effect span:nth-child(1){ animation-delay: 140ms; }

.text-effect span:nth-child(2){ animation-delay: 280ms; }

.text-effect span:nth-child(3){ animation-delay: 420ms; }

.text-effect span:nth-child(4){ animation-delay: 560ms; }

.text-effect span:nth-child(5){ animation-delay: 700ms; }

.text-effect span:nth-child(6){ animation-delay: 840ms; }

.text-effect span:nth-child(7){ animation-delay: 980ms; }

.text-effect span:nth-child(8){ animation-delay: 1120ms; }

.text-effect span:nth-child(9){ animation-delay: 1260ms; }

.text-effect span:nth-child(10){ animation-delay: 1400ms; }

@keyframes animate{
    20%{
        text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;
        transform: scale(0.9, 1) rotateY(-9deg);
    }

    40%{
        text-shadow: -10px 0px #e8332e, -20px 0 #fc9e05, -30px 0 #891696;
        transform: scale(0.9, 1.8) translateY(16px);
    }

    60%{
        text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;
        transform: scale(0.9, 1) rotateY(-4deg);
    }

    80%{
        text-shadow: 10px 0px #e8332e, 20px 0 #fc9e05, 30px 0 #891696;
        transform: scale(0.9, 1.8) translateY(16px);
    }
}

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

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

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

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