.st1 {
    fill: #3d1152;
}

#logo {
    display: block;
    width: 55%;
    margin: auto auto;
}

#arrow {
    position: relative;
    animation-name: arrow;
    animation-duration: 0.8s;
    transform-origin: 5% 90%;
    display: inline-block;
}

#rect {
    animation-name: rect;
    animation-duration: 0.4s;
    animation-delay: 0.3s;
    transform-origin: 5% 43%;
    transform: translateX(10px) scaleX(0) rotateZ(2deg);
    animation-fill-mode: forwards;
}

#S,
#A,
#F,
#I,
#R,
#A2 {
    transform: translateY(-30px);
    opacity: 0;
    animation-name: letter;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

#S {
    animation-delay: 0.5s;
}
#A {
    animation-delay: 0.55s;
}
#F {
    animation-delay: 0.6s;
}
#I {
    animation-delay: 0.65s;
}
#R {
    animation-delay: 0.7s;
}
#A2 {
    animation-delay: 0.75s;
}

#shadow {
    animation-name: shadow;
    animation-duration: 0.55s;
    animation-delay: 0.9s;
    animation-fill-mode: forwards;
    transform: translate(-1.25%, -1.75%);
    opacity: 0;
}

#logobase {
    animation-name: logobase;
    animation-duration: 0.45s;
    animation-delay: 1s;
    transform: translate(1.25%, 1.75%);
    animation-fill-mode: forwards;
}

#content,
#management,
#systeem {
    animation-name: cms;
    animation-duration: 0.45s;
    transform: translateY(-20px);
    animation-delay: 1s;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes arrow {
    0% {
        transform: scale(0) rotateZ(0deg);
    }
    30% {
        transform: scale(0.8) rotateZ(-10deg);
    }
    50% {
        transform: scale(1) rotateZ(2deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: scale(1) rotateZ(0deg);
    }
}

@keyframes rect {
    0% {
        transform: translateX(10px) scaleX(0) scaleY(0.75) skew(-0.01turn, 6deg);
    }
    30% {
        animation-timing-function: ease-out;
        transform: translateX(10px) scaleX(1.05) scaleY(1) skew(0turn, 0deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: scaleX(1) scaleY(1) skew(0);
    }
}
@keyframes letter {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    70% {
        transform: translatey(10px);
        opacity: 1;
    }
    100% {
        animation-timing-function: ease-out;
        transform: translatey(0px);
        opacity: 1;
    }
}

@keyframes logobase {
    0% {
        transform: translate(1.25%, 1.75%);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes shadow {
    0% {
        opacity: 0;
        transform: translate(-1.25%, -1.75%);
    }
    8% {
        opacity: 1;
        transform: translate(-1.25%, -1.75%);
    }
    100% {
        opacity: 1;
        transform: translate(0%, 0%);
    }
}