.cls-1 {
    fill: none;
    stroke: #070707;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 25px;
}

.cls-1, .cls-2 {
    fill-rule: evenodd;
}

.cls-2 {
    fill: #070807;
}

/* ----------------------------------------------------------------------------------------------------------------------- */

#svg-logo-1 .svg-nuthings-logo-1 {
    stroke-dashoffset: 2883.166015625px;
    stroke-dasharray: 2883.166015625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
}

#svg-logo-1.active .svg-nuthings-logo-1 {
    stroke-dashoffset: 0;
}

#svg-logo-1 .svg-nuthings-logo-2 {
    stroke-dashoffset: 188.49014282226562px;
    stroke-dasharray: 188.49014282226562px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.35s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.35s;
}

#svg-logo-1.active .svg-nuthings-logo-2 {
    stroke-dashoffset: 0;
}

#svg-logo-1 .svg-nuthings-logo-3 {
    stroke-dashoffset: 8546.791015625px;
    stroke-dasharray: 8546.791015625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
}

#svg-logo-1.active .svg-nuthings-logo-3 {
    stroke-dashoffset: 0;
    fill: rgb(7, 8, 7);
}

/* ----------------------------------------------------------------------------------------------------------------------- */

#svg-logo-2 .svg-nuthings-logo-1 {
    stroke-dashoffset: 2883.166015625px;
    stroke-dasharray: 2883.166015625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
}

#svg-logo-2.active .svg-nuthings-logo-1 {
    stroke-dashoffset: 0;
}

#svg-logo-2 .svg-nuthings-logo-2 {
    stroke-dashoffset: 188.49014282226562px;
    stroke-dasharray: 188.49014282226562px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.35s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.35s;
}

#svg-logo-2.active .svg-nuthings-logo-2 {
    stroke-dashoffset: 0;
}

#svg-logo-2 .svg-nuthings-logo-3 {
    stroke-dashoffset: 8546.791015625px;
    stroke-dasharray: 8546.791015625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
}

#svg-logo-2.active .svg-nuthings-logo-3 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

/* ----------------------------------------------------------------------------------------------------------------------- */

#svg-walnut .svg-walnut-1 {
    stroke-dashoffset: 4626.71142578125px;
    stroke-dasharray: 4626.71142578125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

#svg-walnut.active .svg-walnut-1 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

#svg-walnut .svg-walnut-2 {
    stroke-dashoffset: 880.4673461914062px;
    stroke-dasharray: 880.4673461914062px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

#svg-walnut.active .svg-walnut-2 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

#svg-walnut .svg-walnut-3 {
    stroke-dashoffset: 197.98228454589844px;
    stroke-dasharray: 197.98228454589844px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

#svg-walnut.active .svg-walnut-3 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

#svg-walnut .svg-walnut-4 {
    stroke-dashoffset: 198.62295532226562px;
    stroke-dasharray: 198.62295532226562px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

#svg-walnut.active .svg-walnut-4 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

#svg-walnut .svg-walnut-5 {
    stroke-dashoffset: 184.34451293945312px;
    stroke-dasharray: 184.34451293945312px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

#svg-walnut.active .svg-walnut-5 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

#svg-walnut .svg-walnut-6 {
    stroke-dashoffset: 198.62295532226562px;
    stroke-dasharray: 198.62295532226562px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

#svg-walnut.active .svg-walnut-6 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

#svg-walnut .svg-walnut-7 {
    stroke-dashoffset: 184.34451293945312px;
    stroke-dasharray: 184.34451293945312px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

#svg-walnut.active .svg-walnut-7 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}

#svg-walnut .svg-walnut-8 {
    stroke-dashoffset: 183.8090057373047px;
    stroke-dasharray: 183.8090057373047px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

#svg-walnut.active .svg-walnut-8 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}