.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%);}
}