.venn .venn-circle {
    fill: none;
    stroke: #fff;
    stroke-width: 20;
}

.venn .circle-left {
    animation: circleLeftLoop 7.92s cubic-bezier(.76, 0, .24, 1) 1.2s infinite alternate;
}

.venn .circle-right {
    animation: circleRightLoop 7.92s cubic-bezier(.76, 0, .24, 1) 1.2s infinite alternate;
}

.venn .circle-bottom {
    animation: circleBottomLoop 7.92s cubic-bezier(.76, 0, .24, 1) 1.2s infinite alternate;
}




.venn .o-fill {
    fill: #000;
    opacity: 0;
    animation: oFillLoop 7.92s cubic-bezier(.76, 0, .24, 1) 1.2s infinite alternate;
}




.venn .o-outer-mask-rect,
.venn .o-outer-mask-circle {
    fill: #000;
    opacity: 0;
}

.venn .o-outer-mask-rect {
    animation: oOuterMaskRectLoop 7.92s cubic-bezier(.76, 0, .24, 1) 1.2s infinite alternate;
}

.venn .o-outer-mask-circle {
    animation: oOuterMaskCircleLoop 7.92s cubic-bezier(.76, 0, .24, 1) 1.2s infinite alternate;
}




.venn .label {
    fill: #fff;
    font-family: "Google Sans", Raleway, sans-serif;
    font-weight: 700;
    font-size: 82px;
    text-anchor: middle;
    animation: labelLoop 7.92s ease 1.2s infinite alternate;
}




.venn .logo-o {
    fill: #fff;
    opacity: 0;
    animation: logoOLoop 7.92s linear 1.2s infinite alternate;
}

.venn .logo-nze {
    fill: #fff;
    opacity: 0;
    animation: nzeLoop 7.92s cubic-bezier(.76, 0, .24, 1) 1.2s infinite alternate;
}





@keyframes circleLeftLoop {

    
    0%,
    15.1515% {
        cx: 690px;
        cy: 1180px;
        r: 515px;
        stroke-width: 20px;
        opacity: 1;
    }

    
    42.4242% {
        cx: 1000px;
        cy: 1000px;
        r: 515px;
        stroke-width: 150px;
        opacity: 1;
    }

    
    87.8788% {
        cx: 468px;
        cy: 1000px;
        r: 143px;
        stroke-width: 60px;
        opacity: 1;
    }

    
    100% {
        cx: 468px;
        cy: 1000px;
        r: 143px;
        stroke-width: 60px;
        opacity: 1;
    }
}




@keyframes circleRightLoop {

    0%,
    15.1515% {
        cx: 1310px;
        cy: 1180px;
        r: 515px;
        stroke-width: 20px;
        opacity: 1;
    }

    42.4242% {
        cx: 1000px;
        cy: 1000px;
        r: 515px;
        stroke-width: 150px;
        opacity: 1;
    }

    
    45.4545% {
        cx: 1000px;
        cy: 1000px;
        r: 515px;
        stroke-width: 150px;
        opacity: 0;
    }

    100% {
        cx: 1000px;
        cy: 1000px;
        r: 515px;
        stroke-width: 150px;
        opacity: 0;
    }
}




@keyframes circleBottomLoop {

    0%,
    15.1515% {
        cx: 1000px;
        cy: 670px;
        r: 515px;
        stroke-width: 20px;
        opacity: 1;
    }

    42.4242% {
        cx: 1000px;
        cy: 1000px;
        r: 515px;
        stroke-width: 150px;
        opacity: 1;
    }

    
    45.4545% {
        cx: 1000px;
        cy: 1000px;
        r: 515px;
        stroke-width: 150px;
        opacity: 0;
    }

    100% {
        cx: 1000px;
        cy: 1000px;
        r: 515px;
        stroke-width: 150px;
        opacity: 0;
    }
}




@keyframes oFillLoop {

    
    0%,
    39.2424% {
        cx: 278.333px;
        cy: 150px;
        r: 0px;
        opacity: 0;
    }

    
    39.3939%,
    42.4242% {
        cx: 278.333px;
        cy: 150px;
        r: 146.667px;
        opacity: 1;
    }

    
    87.8788% {
        cx: 101px;
        cy: 150px;
        r: 35.667px;
        opacity: 1;
    }

    100% {
        cx: 101px;
        cy: 150px;
        r: 35.667px;
        opacity: 1;
    }
}




@keyframes oOuterMaskCircleLoop {

    0%,
    39.2424% {
        cx: 278.333px;
        cy: 150px;
        r: 0px;
        opacity: 0;
    }

    
    39.3939%,
    42.4242% {
        cx: 278.333px;
        cy: 150px;
        r: 196.667px;
        opacity: 1;
    }

    87.8788% {
        cx: 101px;
        cy: 150px;
        r: 59.52px;
        opacity: 1;
    }

    100% {
        cx: 101px;
        cy: 150px;
        r: 59.52px;
        opacity: 1;
    }
}


@keyframes oOuterMaskRectLoop {

    0%,
    39.2424% {
        x: -600px;
        y: 150px;
        width: 0px;
        height: 0px;
        opacity: 0;
    }

    
    39.3939%,
    42.4242% {
        x: -600px;
        y: -46.667px;
        width: 878.333px;
        height: 393.334px;
        opacity: 1;
    }

    87.8788% {
        x: -600px;
        y: 90.48px;
        width: 701px;
        height: 119.04px;
        opacity: 1;
    }

    100% {
        x: -600px;
        y: 90.48px;
        width: 701px;
        height: 119.04px;
        opacity: 1;
    }
}


@keyframes logoOLoop {
    0%,
    100% {
        opacity: 0;
    }
}




@keyframes nzeLoop {

    0%,
    40.9091% {
        opacity: 0;
        transform: translateX(-320px);
    }

    
    42.4242% {
        opacity: 1;
        transform: translateX(-320px);
    }

    
    87.8788% {
        opacity: 1;
        transform: translateX(0px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}




@keyframes labelLoop {

    0%,
    22.7273% {
        opacity: 1;
    }

    31.8182% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


@media(prefers-reduced-motion:reduce){.venn *{animation:none!important}}