a.brand,a.footer-brand{position:relative}a.brand>img,a.footer-brand>img{visibility:hidden}a.brand>.animated-brand,a.footer-brand>.animated-brand{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.animated-brand .logo-part{transform-box:fill-box;transform-origin:center;animation-duration:8s;animation-iteration-count:1;animation-fill-mode:both;animation-timing-function:cubic-bezier(.15,.65,.25,1)}
.animated-brand .logo-three{animation-name:brand-three}.animated-brand .logo-two{animation-name:brand-two}.animated-brand .logo-one{animation-name:brand-one}.animated-brand .logo-host{animation-name:brand-host}.animated-brand .logo-nl{animation-name:brand-nl}
.animated-brand .logo-bar{animation:brand-bar 8s cubic-bezier(.15,.75,.2,1) 1 both}
@keyframes brand-three{0%,5%{opacity:0;transform:translateX(250px) rotate(720deg)}6%{opacity:1}28%,100%{opacity:1;transform:none}}
@keyframes brand-two{0%,15%{opacity:0;transform:translateX(225px) rotate(720deg)}16%{opacity:1}38%,100%{opacity:1;transform:none}}
@keyframes brand-one{0%,25%{opacity:0;transform:translateX(200px) rotate(720deg)}26%{opacity:1}48%,100%{opacity:1;transform:none}}
@keyframes brand-host{0%,49%{opacity:0;transform:translateX(170px)}62%,100%{opacity:1;transform:none}}
@keyframes brand-nl{0%,63%{opacity:0;transform:translateX(105px)}75%,100%{opacity:1;transform:none}}
@keyframes brand-bar{0%,79%{opacity:0;transform:translateX(260px)}80%{opacity:1}89%{opacity:1;transform:translateX(-3px)}94%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.animated-brand .logo-part,.animated-brand .logo-bar{animation:none!important;opacity:1;transform:none}}

/* Give rotating numerals room vertically while keeping entry within logo width. */
a.brand>.animated-brand,a.footer-brand>.animated-brand{
 overflow:visible;
 clip-path:inset(-100% 0 -100% 0);
}

/* Match the reference HTML: rotate each numeral around its own fixed center.
   SVG use-elements otherwise include the entire referenced logo in their bounds. */
.animated-brand .logo-part{transform-box:view-box}
.animated-brand .logo-three{transform-origin:18.5px 20.25805px}
.animated-brand .logo-two{transform-origin:54px 20.25805px}
.animated-brand .logo-one{transform-origin:80px 20.25805px}

/* Logo bovenaan */
a.brand > img {
    width: 240px;
}

/* Logo onderaan */
a.footer-brand > img {
    width: 120px;
}