/*body {*/
/*    padding: 40px 0;*/
/*    font-family: 'bebas', sans-serif;*/
/*    background-color: #fff;*/
/*}*/

body .textcontainer {
    padding: 40px 0;
    text-align: center;
}

body .particletext {
    text-align: center;
    /*font-size: 48px;*/
    position: relative;
}

body .particletext.bubbles > .particle {
    opacity: 0;
    position: absolute;
    background-color: rgba(33, 150, 243, 0.5);
    -webkit-animation: bubbles 3s ease-in infinite;
    animation: bubbles 3s ease-in infinite;
    border-radius: 100%;
}

body .particletext.hearts > .particle {
    opacity: 0;
    position: absolute;
    background-color: #cc2a5d;
    -webkit-animation: hearts 3s ease-in infinite;
    animation: hearts 3s ease-in infinite;
}

body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after {
    position: absolute;
    content: '';
    border-radius: 100px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #cc2a5d;
}

body .particletext.hearts > .particle:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

body .particletext.hearts > .particle:after {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

body .particletext.lines > .particle {
    position: absolute;
    background-color: rgba(244, 67, 54, 0.5);
    -webkit-animation: lines 3s linear infinite;
    animation: lines 3s linear infinite;
}

body .particletext.confetti > .particle {
    opacity: 0;
    position: absolute;
    -webkit-animation: confetti 3s ease-in infinite;
    animation: confetti 3s ease-in infinite;
}

body .particletext.confetti > .particle.c1 {
    background-color: rgba(76, 175, 80, 0.5);
}

body .particletext.confetti > .particle.c2 {
    background-color: rgba(156, 39, 176, 0.5);
}

body .particletext.fire > .particle {
    position: absolute;
    background-color: rgba(255, 193, 7, 0.5);
    border-radius: 40px;
    border-top-right-radius: 0px;
    -webkit-animation: fires 0.8s linear infinite;
    animation: fires 0.8s linear infinite;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
}

body .particletext.fire > .particle:before {
    position: absolute;
    content: '';
    top: 60%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    border-radius: 40px;
    border-top-right-radius: 0px;
    background-color: rgba(251, 140, 0, 0.5);
}

body .particletext.sunbeams > .particle {
    position: absolute;
    background-color: rgba(253, 216, 53, 0.5);
    -webkit-animation: sunbeams 3s linear infinite;
    animation: sunbeams 3s linear infinite;
}

@-webkit-keyframes bubbles {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        -webkit-transform: translate(0, -20%);
        transform: translate(0, -20%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%);
        transform: translate(0, -1000%);
    }
}

@keyframes bubbles {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        -webkit-transform: translate(0, -20%);
        transform: translate(0, -20%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%);
        transform: translate(0, -1000%);
    }
}

@-webkit-keyframes hearts {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0%) rotate(45deg);
        transform: translate(0, 0%) rotate(45deg);
    }
    20% {
        opacity: 0.8;
        -webkit-transform: translate(0, -20%) rotate(45deg);
        transform: translate(0, -20%) rotate(45deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%) rotate(45deg);
        transform: translate(0, -1000%) rotate(45deg);
    }
}

@keyframes hearts {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0%) rotate(45deg);
        transform: translate(0, 0%) rotate(45deg);
    }
    20% {
        opacity: 0.8;
        -webkit-transform: translate(0, -20%) rotate(45deg);
        transform: translate(0, -20%) rotate(45deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%) rotate(45deg);
        transform: translate(0, -1000%) rotate(45deg);
    }
}

@-webkit-keyframes lines {
    0%, 50%, 100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    25% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    75% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes lines {
    0%, 50%, 100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    25% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    75% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@-webkit-keyframes confetti {
    0% {
        opacity: 0;
        -webkit-transform: translateY(0%) rotate(0deg);
        transform: translateY(0%) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    35% {
        -webkit-transform: translateY(-800%) rotate(270deg);
        transform: translateY(-800%) rotate(270deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000%) rotate(1440deg);
        transform: translateY(2000%) rotate(1440deg);
    }
}

@keyframes confetti {
    0% {
        opacity: 0;
        -webkit-transform: translateY(0%) rotate(0deg);
        transform: translateY(0%) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    35% {
        -webkit-transform: translateY(-800%) rotate(270deg);
        transform: translateY(-800%) rotate(270deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000%) rotate(1440deg);
        transform: translateY(2000%) rotate(1440deg);
    }
}

@-webkit-keyframes fires {
    0% {
        -webkit-transform: rotate(-70deg) translateY(0%);
        transform: rotate(-70deg) translateY(0%);
    }
    25% {
        -webkit-transform: rotate(-20deg) translateY(-5%);
        transform: rotate(-20deg) translateY(-5%);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(-70deg) translateY(-10%);
        transform: rotate(-70deg) translateY(-10%);
    }
    75% {
        -webkit-transform: rotate(-20deg) translateY(-20%);
        transform: rotate(-20deg) translateY(-20%);
    }
    100% {
        -webkit-transform: rotate(-70deg) translateY(-40%);
        transform: rotate(-70deg) translateY(-40%);
        opacity: 1;
    }
}

@keyframes fires {
    0% {
        -webkit-transform: rotate(-70deg) translateY(0%);
        transform: rotate(-70deg) translateY(0%);
    }
    25% {
        -webkit-transform: rotate(-20deg) translateY(-5%);
        transform: rotate(-20deg) translateY(-5%);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(-70deg) translateY(-10%);
        transform: rotate(-70deg) translateY(-10%);
    }
    75% {
        -webkit-transform: rotate(-20deg) translateY(-20%);
        transform: rotate(-20deg) translateY(-20%);
    }
    100% {
        -webkit-transform: rotate(-70deg) translateY(-40%);
        transform: rotate(-70deg) translateY(-40%);
        opacity: 1;
    }
}

@-webkit-keyframes sunbeams {
    0% {
        -webkit-transform: translateY(40%) rotate(0deg);
        transform: translateY(40%) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-40%) rotate(180deg);
        transform: translateY(-40%) rotate(180deg);
    }
    100% {
        -webkit-transform: translateY(40%) rotate(360deg);
        transform: translateY(40%) rotate(360deg);
    }
    0%, 14%, 17%, 43%, 53%, 71%, 80%, 94%, 100% {
        opacity: 0;
    }
    6%, 15%, 24%, 28%, 48%, 55%, 78%, 82%, 99% {
        opacity: 1;
    }
}

@keyframes sunbeams {
    0% {
        -webkit-transform: translateY(40%) rotate(0deg);
        transform: translateY(40%) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-40%) rotate(180deg);
        transform: translateY(-40%) rotate(180deg);
    }
    100% {
        -webkit-transform: translateY(40%) rotate(360deg);
        transform: translateY(40%) rotate(360deg);
    }
    0%, 14%, 17%, 43%, 53%, 71%, 80%, 94%, 100% {
        opacity: 0;
    }
    6%, 15%, 24%, 28%, 48%, 55%, 78%, 82%, 99% {
        opacity: 1;
    }
}