
.hero {
    margin: 0 auto;
    backface-visibility: hidden;
    max-width: 900px;
    animation: 842.19ms ease 157.81ms 1 normal forwards running hero-animation;}

@media (min-width: 1200px) {
    .hero {
        max-width:100%
    }
}

@keyframes hero-animation {
    0% {
        opacity: 0;
        transform: scale(0.96)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.hero-icon {
    transform-origin: 50% 50%;
    stroke: black;
    stroke-width: 5;
    stroke-linecap: round
}

.hero-icon.dot {
    fill: black;
    stroke: none
}

.hero-icon--line {
    stroke-dasharray: 170;
    stroke-dashoffset: 170
}

.hero-icon--circle {
    stroke-dasharray: 70;
    stroke-dashoffset: 70
}

.hero-icon-1 {
    animation: hero-icon-animation 1s .7s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-2 {
    animation: hero-icon-animation 1s .8s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-3 {
    animation: hero-icon-animation 1s .9s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-4 {
    animation: hero-icon-animation 1s 1s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-5 {
    animation: hero-icon-animation 1s 1.1s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-6 {
    animation: hero-icon-animation 1s 1.2s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-7 {
    animation: hero-icon-animation 1s 1.3s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-8 {
    animation: hero-icon-animation 1s 1.4s cubic-bezier(0.05, 0.35, 0.2, 1) forwards
}

.hero-icon-9 {
    animation: 1000ms cubic-bezier(0.05, 0.35, 0.2, 1) 1500ms 1 normal forwards running hero-icon-animation;}

@keyframes hero-icon-animation {
    100% {
        stroke-dashoffset: 0
    }
}

.hero-app {
    fill: black;
    transform-origin: 50% 50%
}

@keyframes hero-app-animate-left {
    0% {
        transform: scale(1) translateX(30px);
        opacity: .1;
        animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5)
    }

    20% {
        transform: scale(1.1) translateX(20px);
        animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1)
    }

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

@keyframes hero-app-animate-right {
    0% {
        transform: scale(1) translateX(-30px);
        opacity: .1;
        animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5)
    }

    20% {
        transform: scale(1.1) translateX(-20px);
        animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1)
    }

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

.hero-app-1 {
    fill: black;
    animation: hero-app-animate-right .8s 1.54s both
}

.hero-app-2 {
    fill: black;
    animation: hero-app-animate-left .8s 1.58s both
}

.hero-app-3 {
    fill: black;
    animation: hero-app-animate-right .8s 1.62s both
}

.hero-app-4 {
    fill: black;
    animation: hero-app-animate-left .8s 1.66s both
}

.hero-app-5 {
    fill: black;
    animation: hero-app-animate-right .8s 1.7s both
}

.hero-app-6 {
    fill: black;
    animation: hero-app-animate-left .8s 1.74s both
}

.hero-app-7 {
    fill: black;
    animation: hero-app-animate-right .8s 1.78s both
}

.hero-app-8 {
    fill: black;
    animation: hero-app-animate-left .8s 1.82s both
}

.hero-app-9 {
    fill: black;
    animation: hero-app-animate-right .8s 1.86s both
}

.hero-app-10 {
    fill: black;
    animation: hero-app-animate-left .8s 1.9s both
}

.hero-app-11 {
    fill: black;
    animation: hero-app-animate-right .8s 1.94s both
}

.hero-app-12 {
    fill: black;
    animation: hero-app-animate-left .8s 1.98s both
}

.hero-app-13 {
    fill: black;
    animation: hero-app-animate-right .8s 2.02s both
}

.hero-app-14 {
    fill: black;
    animation: hero-app-animate-left .8s 2.06s both
}

.hero-app-15 {
    fill: black;
    animation: hero-app-animate-right .8s 2.1s both
}