/* 
    Created on : 3 Jun, 2019, 5:16:14 PM
    Author     : Martin
*/
    .love {
        position: relative;
        margin-bottom: 6em;
        padding-top: 4em;
        text-align: center;
    }


    /* ================
    // Bursts
    // ============= */
    .bubbles {
        position: absolute;
        top: 0;
        left: 0;
        height: 95%;
        width: 100%;
        pointer-events: none;
    }

    .bubble {
        position: absolute;
        z-index: 200;
        border-radius: 50%;
    }
    .bubble:nth-child(1) {
        top: 100%;
        left: 89%;
        height: 8vmin;
        width: 8vmin;
        -webkit-animation: love-burst 3s infinite 0s;
        animation: love-burst 3s infinite 0s;
        box-shadow: inset 0 0 0 4vmin #fff;
        -webkit-transform: translate(0, 1.2em) scale(0);
        transform: translate(0, 1.2em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(2) {
        top: 61%;
        left: 96%;
        height: 4vmin;
        width: 4vmin;
        -webkit-animation: love-burst 3s infinite 0.15s;
        animation: love-burst 3s infinite 0.15s;
        box-shadow: inset 0 0 0 2vmin #fff;
        -webkit-transform: translate(0, 1em) scale(0);
        transform: translate(0, 1em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(3) {
        top: 49%;
        left: 83%;
        height: 5vmin;
        width: 5vmin;
        -webkit-animation: love-burst 3s infinite 0.3s;
        animation: love-burst 3s infinite 0.3s;
        box-shadow: inset 0 0 0 2.5vmin #fff;
        -webkit-transform: translate(0, 1.2em) scale(0);
        transform: translate(0, 1.2em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(4) {
        top: 6%;
        left: 6%;
        height: 18vmin;
        width: 18vmin;
        -webkit-animation: love-burst 3s infinite 0.45s;
        animation: love-burst 3s infinite 0.45s;
        box-shadow: inset 0 0 0 9vmin #fff;
        -webkit-transform: translate(0, 0.3em) scale(0);
        transform: translate(0, 0.3em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(5) {
        top: 73%;
        left: 11%;
        height: 6vmin;
        width: 6vmin;
        -webkit-animation: love-burst 3s infinite 0.6s;
        animation: love-burst 3s infinite 0.6s;
        box-shadow: inset 0 0 0 3vmin #fff;
        -webkit-transform: translate(0, 0.05em) scale(0);
        transform: translate(0, 0.05em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(6) {
        top: 38%;
        left: 13%;
        height: 13vmin;
        width: 13vmin;
        -webkit-animation: love-burst 3s infinite 0.75s;
        animation: love-burst 3s infinite 0.75s;
        box-shadow: inset 0 0 0 6.5vmin #fff;
        -webkit-transform: translate(0, 0.5em) scale(0);
        transform: translate(0, 0.5em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(7) {
        top: 34%;
        left: 41%;
        height: 11vmin;
        width: 11vmin;
        -webkit-animation: love-burst 3s infinite 0.9s;
        animation: love-burst 3s infinite 0.9s;
        box-shadow: inset 0 0 0 5.5vmin #fff;
        -webkit-transform: translate(0, 0.9em) scale(0);
        transform: translate(0, 0.9em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(8) {
        top: 76%;
        left: 3%;
        height: 5vmin;
        width: 5vmin;
        -webkit-animation: love-burst 3s infinite 1.05s;
        animation: love-burst 3s infinite 1.05s;
        box-shadow: inset 0 0 0 2.5vmin #fff;
        -webkit-transform: translate(0, 1.05em) scale(0);
        transform: translate(0, 1.05em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(9) {
        top: 86%;
        left: 5%;
        height: 12vmin;
        width: 12vmin;
        -webkit-animation: love-burst 3s infinite 1.2s;
        animation: love-burst 3s infinite 1.2s;
        box-shadow: inset 0 0 0 6vmin #fff;
        -webkit-transform: translate(0, 0.85em) scale(0);
        transform: translate(0, 0.85em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(10) {
        top: 64%;
        left: 54%;
        height: 1vmin;
        width: 1vmin;
        -webkit-animation: love-burst 3s infinite 1.35s;
        animation: love-burst 3s infinite 1.35s;
        box-shadow: inset 0 0 0 0.5vmin #fff;
        -webkit-transform: translate(0, 0.2em) scale(0);
        transform: translate(0, 0.2em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(11) {
        top: 94%;
        left: 8%;
        height: 16vmin;
        width: 16vmin;
        -webkit-animation: love-burst 3s infinite 1.5s;
        animation: love-burst 3s infinite 1.5s;
        box-shadow: inset 0 0 0 8vmin #fff;
        -webkit-transform: translate(0, 1.15em) scale(0);
        transform: translate(0, 1.15em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(12) {
        top: 21%;
        left: 87%;
        height: 5vmin;
        width: 5vmin;
        -webkit-animation: love-burst 3s infinite 1.65s;
        animation: love-burst 3s infinite 1.65s;
        box-shadow: inset 0 0 0 2.5vmin #fff;
        -webkit-transform: translate(0, 0.45em) scale(0);
        transform: translate(0, 0.45em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(13) {
        top: 33%;
        left: 21%;
        height: 4vmin;
        width: 4vmin;
        -webkit-animation: love-burst 3s infinite 1.8s;
        animation: love-burst 3s infinite 1.8s;
        box-shadow: inset 0 0 0 2vmin #fff;
        -webkit-transform: translate(0, 0.4em) scale(0);
        transform: translate(0, 0.4em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(14) {
        top: 97%;
        left: 89%;
        height: 14vmin;
        width: 14vmin;
        -webkit-animation: love-burst 3s infinite 1.95s;
        animation: love-burst 3s infinite 1.95s;
        box-shadow: inset 0 0 0 7vmin #fff;
        -webkit-transform: translate(0, 0.3em) scale(0);
        transform: translate(0, 0.3em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(15) {
        top: 53%;
        left: 95%;
        height: 11vmin;
        width: 11vmin;
        -webkit-animation: love-burst 3s infinite 2.1s;
        animation: love-burst 3s infinite 2.1s;
        box-shadow: inset 0 0 0 5.5vmin #fff;
        -webkit-transform: translate(0, 0.45em) scale(0);
        transform: translate(0, 0.45em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(16) {
        top: 41%;
        left: 6%;
        height: 13vmin;
        width: 13vmin;
        -webkit-animation: love-burst 3s infinite 2.25s;
        animation: love-burst 3s infinite 2.25s;
        box-shadow: inset 0 0 0 6.5vmin #fff;
        -webkit-transform: translate(0, 0.35em) scale(0);
        transform: translate(0, 0.35em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(17) {
        top: 25%;
        left: 85%;
        height: 12vmin;
        width: 12vmin;
        -webkit-animation: love-burst 3s infinite 2.4s;
        animation: love-burst 3s infinite 2.4s;
        box-shadow: inset 0 0 0 6vmin #fff;
        -webkit-transform: translate(0, 1.25em) scale(0);
        transform: translate(0, 1.25em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(18) {
        top: 22%;
        left: 21%;
        height: 14vmin;
        width: 14vmin;
        -webkit-animation: love-burst 3s infinite 2.55s;
        animation: love-burst 3s infinite 2.55s;
        box-shadow: inset 0 0 0 7vmin #fff;
        -webkit-transform: translate(0, 0.55em) scale(0);
        transform: translate(0, 0.55em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(19) {
        top: 87%;
        left: 73%;
        height: 12vmin;
        width: 12vmin;
        -webkit-animation: love-burst 3s infinite 2.7s;
        animation: love-burst 3s infinite 2.7s;
        box-shadow: inset 0 0 0 6vmin #fff;
        -webkit-transform: translate(0, 1.2em) scale(0);
        transform: translate(0, 1.2em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    .bubble:nth-child(20) {
        top: 91%;
        left: 5%;
        height: 17vmin;
        width: 17vmin;
        -webkit-animation: love-burst 3s infinite 2.85s;
        animation: love-burst 3s infinite 2.85s;
        box-shadow: inset 0 0 0 8.5vmin #fff;
        -webkit-transform: translate(0, 0.35em) scale(0);
        transform: translate(0, 0.35em) scale(0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

    @-webkit-keyframes love-burst {
        50%,
        100% {
            box-shadow: inset 0 0 0 0 red;
            -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
        }
    }

    @keyframes love-burst {
        50%,
        100% {
            box-shadow: inset 0 0 0 0 red;
            -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
        }
    }
    .svg-heart {
        fill: #fff;
        opacity: 0;
    }
    .bubble:nth-child(1) .heart {
        -webkit-animation: love 3s forwards infinite 0s;
        animation: love 3s forwards infinite 0s;
        -webkit-transform: scale(0.5) rotate(-34deg);
        transform: scale(0.5) rotate(-34deg);
    }
    .bubble:nth-child(2) .svg-heart {
        -webkit-animation: love 3s forwards infinite 0.15s;
        animation: love 3s forwards infinite 0.15s;
        -webkit-transform: scale(0.5) rotate(17deg);
        transform: scale(0.5) rotate(17deg);
    }
    .bubble:nth-child(3) .svg-heart {
        -webkit-animation: love 3s forwards infinite 0.3s;
        animation: love 3s forwards infinite 0.3s;
        -webkit-transform: scale(0.5) rotate(-20deg);
        transform: scale(0.5) rotate(-20deg);
    }
    .bubble:nth-child(4) .svg-heart {
        -webkit-animation: love 3s forwards infinite 0.45s;
        animation: love 3s forwards infinite 0.45s;
        -webkit-transform: scale(0.5) rotate(5deg);
        transform: scale(0.5) rotate(5deg);
    }
    .bubble:nth-child(5) .svg-heart {
        -webkit-animation: love 3s forwards infinite 0.6s;
        animation: love 3s forwards infinite 0.6s;
        -webkit-transform: scale(0.5) rotate(-6deg);
        transform: scale(0.5) rotate(-6deg);
    }
    .bubble:nth-child(6) .svg-heart {
        -webkit-animation: love 3s forwards infinite 0.75s;
        animation: love 3s forwards infinite 0.75s;
        -webkit-transform: scale(0.5) rotate(22deg);
        transform: scale(0.5) rotate(22deg);
    }
    .bubble:nth-child(7) .svg-heart {
        -webkit-animation: love 3s forwards infinite 0.9s;
        animation: love 3s forwards infinite 0.9s;
        -webkit-transform: scale(0.5) rotate(-11deg);
        transform: scale(0.5) rotate(-11deg);
    }
    .bubble:nth-child(8) .svg-heart {
        -webkit-animation: love 3s forwards infinite 1.05s;
        animation: love 3s forwards infinite 1.05s;
        -webkit-transform: scale(0.5) rotate(15deg);
        transform: scale(0.5) rotate(15deg);
    }
    .bubble:nth-child(9) .svg-heart {
        -webkit-animation: love 3s forwards infinite 1.2s;
        animation: love 3s forwards infinite 1.2s;
        -webkit-transform: scale(0.5) rotate(-7deg);
        transform: scale(0.5) rotate(-7deg);
    }
    .bubble:nth-child(10) .svg-heart {
        -webkit-animation: love 3s forwards infinite 1.35s;
        animation: love 3s forwards infinite 1.35s;
        -webkit-transform: scale(0.5) rotate(34deg);
        transform: scale(0.5) rotate(34deg);
    }
    .bubble:nth-child(11) .svg-heart {
        -webkit-animation: love 3s forwards infinite 1.5s;
        animation: love 3s forwards infinite 1.5s;
        -webkit-transform: scale(0.5) rotate(-18deg);
        transform: scale(0.5) rotate(-18deg);
    }
    .bubble:nth-child(12) .svg-heart {
        -webkit-animation: love 3s forwards infinite 1.65s;
        animation: love 3s forwards infinite 1.65s;
        -webkit-transform: scale(0.5) rotate(32deg);
        transform: scale(0.5) rotate(32deg);
    }
    .bubble:nth-child(13) .svg-heart {
        -webkit-animation: love 3s forwards infinite 1.8s;
        animation: love 3s forwards infinite 1.8s;
        -webkit-transform: scale(0.5) rotate(-22deg);
        transform: scale(0.5) rotate(-22deg);
    }
    .bubble:nth-child(14) .svg-heart {
        -webkit-animation: love 3s forwards infinite 1.95s;
        animation: love 3s forwards infinite 1.95s;
        -webkit-transform: scale(0.5) rotate(42deg);
        transform: scale(0.5) rotate(42deg);
    }
    .bubble:nth-child(15) .svg-heart {
        -webkit-animation: love 3s forwards infinite 2.1s;
        animation: love 3s forwards infinite 2.1s;
        -webkit-transform: scale(0.5) rotate(-8deg);
        transform: scale(0.5) rotate(-8deg);
    }
    .bubble:nth-child(16) .svg-heart {
        -webkit-animation: love 3s forwards infinite 2.25s;
        animation: love 3s forwards infinite 2.25s;
        -webkit-transform: scale(0.5) rotate(29deg);
        transform: scale(0.5) rotate(29deg);
    }
    .bubble:nth-child(17) .svg-heart {
        -webkit-animation: love 3s forwards infinite 2.4s;
        animation: love 3s forwards infinite 2.4s;
        -webkit-transform: scale(0.5) rotate(-1deg);
        transform: scale(0.5) rotate(-1deg);
    }
    .bubble:nth-child(18) .svg-heart {
        -webkit-animation: love 3s forwards infinite 2.55s;
        animation: love 3s forwards infinite 2.55s;
        -webkit-transform: scale(0.5) rotate(49deg);
        transform: scale(0.5) rotate(49deg);
    }
    .bubble:nth-child(19) .svg-heart {
        -webkit-animation: love 3s forwards infinite 2.7s;
        animation: love 3s forwards infinite 2.7s;
        -webkit-transform: scale(0.5) rotate(-15deg);
        transform: scale(0.5) rotate(-15deg);
    }
    .bubble:nth-child(20) .svg-heart {
        -webkit-animation: love 3s forwards infinite 2.85s;
        animation: love 3s forwards infinite 2.85s;
        -webkit-transform: scale(0.5) rotate(3deg);
        transform: scale(0.5) rotate(3deg);
    }

    @-webkit-keyframes love {
        50% {
            fill: red;
            opacity: 1;
        }
    }

    @keyframes love {
        50% {
            fill: red;
            opacity: 1;
        }
    }
