@-webkit-keyframes rotated {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    50% {
        -webkit-transform: rotate(175deg);
        transform: rotate(175deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotated {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    50% {
        -webkit-transform: rotate(175deg);
        transform: rotate(175deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes testimonial-zoom-in-out {
    0% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    40% {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    100% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
}

@keyframes testimonial-zoom-in-out {
    0% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    40% {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    100% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
}

@keyframes cs-zoom-in-out {
    0% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
}

@-webkit-keyframes down-up-one {
    0% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px)
    }
    50% {
        -webkit-transform: rotateX(0deg) translateY(18px);
        transform: rotateX(0deg) translateY(18px)
    }
    100% {
        -webkit-transform: rotateX(0deg) translateY(0px);
        transform: rotateX(0deg) translateY(0px)
    }
}

@-webkit-keyframes down-up-two {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px)
    }
    50% {
        -webkit-transform: translate(0px, 18px);
        transform: translate(0px, 18px)
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px)
    }
}

@keyframes down-up-two {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px)
    }
    50% {
        -webkit-transform: translate(0px, 18px);
        transform: translate(0px, 18px)
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px)
    }
}

@-webkit-keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

@keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

@-webkit-keyframes animationRoundTopBottom {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(0px, 150px) rotate(90deg);
        transform: translate(0px, 150px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(150px, 150px) rotate(180deg);
        transform: translate(150px, 150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(150px, 0px) rotate(270deg);
        transform: translate(150px, 0px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes animationRoundTopBottom {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(0px, 150px) rotate(90deg);
        transform: translate(0px, 150px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(150px, 150px) rotate(180deg);
        transform: translate(150px, 150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(150px, 0px) rotate(270deg);
        transform: translate(150px, 0px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@-webkit-keyframes animationRoundTopBottomTwo {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(150px, 0px) rotate(90deg);
        transform: translate(150px, 0px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(150px, 150px) rotate(180deg);
        transform: translate(150px, 150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(0px, 150px) rotate(270deg);
        transform: translate(0px, 150px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes animationRoundTopBottomTwo {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(150px, 0px) rotate(90deg);
        transform: translate(150px, 0px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(150px, 150px) rotate(180deg);
        transform: translate(150px, 150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(0px, 150px) rotate(270deg);
        transform: translate(0px, 150px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes group-border-infinite {
    100% {
        transform: translateY(-400px)
    }
}

.customFadeInUp {
    -webkit-animation-name: customFadeInUp;
    animation-name: customFadeInUp
}

@-webkit-keyframes customFadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes customFadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.customFadeInLeft {
    -webkit-animation-name: customFadeInLeft;
    animation-name: customFadeInLeft
}

@-webkit-keyframes customFadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes customFadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.customFadeInRight {
    -webkit-animation-name: customFadeInRight;
    animation-name: customFadeInRight
}

@-webkit-keyframes customFadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes customFadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes shapeAnimationOne {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(0px, 150px) rotate(90deg);
        transform: translate(0px, 150px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(150px, 150px) rotate(180deg);
        transform: translate(150px, 150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(150px, 0px) rotate(270deg);
        transform: translate(150px, 0px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes shapeAnimationTwo {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(-150px, -0px) rotate(270deg);
        transform: translate(-150px, -0px) rotate(270deg)
    }
    50% {
        -webkit-transform: translate(-150px, -150px) rotate(180deg);
        transform: translate(-150px, -150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(-0px, -150px) rotate(90deg);
        transform: translate(-0px, -150px) rotate(90deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes shapeAnimationThree {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(50px, 150px) rotate(90deg);
        transform: translate(50px, 150px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(150px, 150px) rotate(180deg);
        transform: translate(150px, 150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(150px, 50px) rotate(270deg);
        transform: translate(150px, 50px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes shapeAnimationFour {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(-150px -50px) rotate(90deg);
        transform: translate(-150px -50px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(-150px, -150px) rotate(180deg);
        transform: translate(-150px, -150px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(-50px, -150px) rotate(270deg);
        transform: translate(-50px, -150px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes shapeAnimationFive {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        -webkit-transform: translate(-100px -100px) rotate(90deg);
        transform: translate(-100px -100px) rotate(90deg)
    }
    50% {
        -webkit-transform: translate(100px, 50px) rotate(180deg);
        transform: translate(100px, 50px) rotate(180deg)
    }
    75% {
        -webkit-transform: translate(-100px, 150px) rotate(270deg);
        transform: translate(-100px, 150px) rotate(270deg)
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(360deg);
        transform: translate(0px, 0px) rotate(360deg)
    }
}

@keyframes animPulse {
    0%,
    40%,
    60%,
    100% {
        transform: translate(0)
    }
    30% {
        transform: translate(20px, 40px)
    }
    50% {
        transform: translate(40px, 80px)
    }
    80% {
        transform: translate(80px, 100px)
    }
}

@keyframes landingBubble {
    0%,
    40%,
    60%,
    100% {
        transform: translate(0)
    }
    30% {
        transform: translate(10px, -40px)
    }
    50% {
        transform: translate(40px, -80px)
    }
    80% {
        transform: translate(80px, -100px)
    }
}

.delay-0-1s {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}

.delay-0-2s {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.delay-0-3s {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

.delay-0-4s {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.delay-0-5s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.delay-0-6s {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.delay-0-7s {
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}

.delay-0-8s {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

.delay-0-9s {
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}

.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.delay-1-2s {
    -webkit-animation-delay: 1.2s;
    animation-delay: .1s;
}

.delay-1-3s {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.2s;
}

.delay-1-4s {
    -webkit-animation-delay: 1.4s;
    animation-delay: .3s;
}

.delay-1-5s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.delay-1-6s {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

.delay-1-7s {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}

.big-shape {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 30%;
    animation: shapeAnimationOne 20s infinite linear;
    animation-delay: 0s
}

.big-shape.shape1 {
    left: 50%;
    top: 30%;
    animation: shapeAnimationOne 20s infinite linear
}

.big-shape.shape2 {
    left: 90%;
    top: 55%;
    -webkit-animation: shapeAnimationTwo 20s infinite linear;
    animation: shapeAnimationTwo 20s infinite linear;
    animation-delay: 1s
}

.big-shape.shape3 {
    left: 90%;
    top: 75%;
    -webkit-animation: shapeAnimationThree 20s infinite linear;
    animation: shapeAnimationThree 20s infinite linear;
    animation-delay: .5s
}

.big-shape.shape4 {
    left: 65%;
    top: 65%;
    -webkit-animation: shapeAnimationFour 20s infinite linear;
    animation: shapeAnimationFour 20s infinite linear
}

.big-shape.shape5 {
    left: 75%;
    top: 75%;
    -webkit-animation: shapeAnimationFive 20s infinite linear;
    animation: shapeAnimationFive 20s infinite linear
}

.big-shape.shape6 {
    left: 88%;
    top: 35%;
    -webkit-animation: shapeAnimationFive 20s infinite linear;
    animation: shapeAnimationFive 20s infinite linear
}

.big-shape.shape7 {
    left: 80%;
    top: 50%;
    -webkit-animation: shapeAnimationThree 20s infinite linear;
    animation: shapeAnimationThree 20s infinite linear;
    animation-delay: .5s
}

.big-shape.shape8 {
    left: 40%;
    top: 80%;
    -webkit-animation: shapeAnimationFive 20s infinite linear;
    animation: shapeAnimationFive 20s infinite linear
}

.big-shape.shape9 {
    left: 8%;
    top: 50%;
    -webkit-animation: shapeAnimationFive 20s infinite linear;
    animation: shapeAnimationFive 20s infinite linear
}

.big-shape.shape10 {
    left: 10%;
    top: 5%;
    -webkit-animation: shapeAnimationThree 20s infinite linear;
    animation: shapeAnimationThree 20s infinite linear;
    animation-delay: .5s
}

.big-shape.shape11 {
    left: 10%;
    top: 100%;
    -webkit-animation: shapeAnimationFive 20s infinite linear;
    animation: shapeAnimationFive 20s infinite linear
}

.big-shape.shape12 {
    left: 85%;
    top: 50%;
    -webkit-animation: shapeAnimationFive 20s infinite linear;
    animation: shapeAnimationFive 20s infinite linear
}

.big-shape.shape13 {
    left: 10%;
    top: 0%;
    animation: rotated 20s infinite linear
}

.big-shape.shape14 {
    left: 90%;
    top: 10%;
    animation: cs-zoom-in-out 20s infinite linear
}

.big-shape.shape15 {
    left: 10%;
    top: 10%;
    animation: cs-zoom-in-out 20s infinite linear
}

.big-shape.shape16 {
    left: 90%;
    top: 10%;
    animation: rotated 20s infinite linear
}

.big-shape.shape17 {
    left: 10%;
    top: 0%;
    animation: rotated 20s infinite linear
}

.big-shape.shape18 {
    left: 90%;
    top: 65%;
    animation: rotated 20s infinite linear
}

.live-shape1 svg {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 5%;
    left: 10%
}

.live-shape1 svg .muz {
    stroke: #ff8aac;
    stroke-width: 1px;
    fill: transparent;
    stroke-dasharray: 122;
    stroke-dashoffset: 122;
    animation: footer-animate 5s ease-out infinite
}

@keyframes footer-animate {
    to {
        stroke-dashoffset: 0
    }
}

.live-shape1 svg .muz2 {
    fill: #ff8aac
}

.small-shape {
    position: absolute;
    z-index: 2
}

.small-shape.sp1 {
    left: 45%;
    top: 13%;
    animation: shapeAnimationOne 20s infinite linear
}

.small-shape.sp2 {
    left: 40%;
    top: 27%;
    animation: shapeAnimationTwo 20s infinite linear
}

.small-shape.sp3 {
    left: 58%;
    top: 29%;
    animation: shapeAnimationThree 10s infinite linear
}

.small-shape.sp4 {
    left: 64%;
    top: 21%;
    animation: shapeAnimationFour 20s infinite linear
}

.small-shape.wt1 {
    left: 38%;
    top: 36%;
    animation: shapeAnimationFive 30s infinite linear
}

.small-shape.wt2 {
    left: 63%;
    top: 32%;
    animation: shapeAnimationFour 20s infinite linear
}

.small-shape.wt3 {
    left: 51%;
    top: 13%;
    animation: shapeAnimationThree 10s infinite linear
}

.small-shape.wt4 {
    left: 40%;
    top: 16%;
    animation: shapeAnimationFive 20s infinite linear
}

.small-shape.uiux1 {
    left: 61%;
    top: 9%;
    animation: shapeAnimationThree 30s infinite linear
}

.small-shape.uiux2 {
    left: 44%;
    top: 13%;
    animation: shapeAnimationFive 20s infinite linear
}

.small-shape.uiux3 {
    left: 55%;
    top: 30%;
    animation: shapeAnimationOne 30s infinite linear
}

.small-shape.wd1 {
    left: 45%;
    top: 12%;
    animation: shapeAnimationOne 30s infinite linear
}

.small-shape.wd2 {
    left: 35%;
    top: 23%;
    animation: shapeAnimationTwo 20s infinite linear
}

.small-shape.wd3 {
    left: 54%;
    top: 29%;
    animation: shapeAnimationFour 10s infinite linear
}

.small-shape.cm1 {
    left: 42%;
    top: 16%;
    animation: shapeAnimationOne 10s infinite linear
}

.small-shape.cm2 {
    left: 58%;
    top: 18%;
    animation: shapeAnimationFive 20s infinite linear
}

.small-shape.cm3 {
    left: 38%;
    top: 31%;
    animation: shapeAnimationThree 10s infinite linear
}

.small-shape.cm4 {
    left: 8%;
    top: 50%;
    animation: shapeAnimationOne 20s infinite linear
}

.small-shape.ba1 {
    left: 41%;
    top: 13%;
    animation: shapeAnimationFive 10s infinite linear
}

.small-shape.ba2 {
    left: 45%;
    top: 29%;
    animation: shapeAnimationThree 20s infinite linear
}