.mip-helpboek{
--help-cover-main:#0799a6;
--help-cover-light:#18adb7;
--help-cover-dark:#056b76;
--help-flying-question:#fff;
}
.mip-helpboek__scene{width:450px;max-width:96%;height:410px;display:flex;align-items:flex-end;justify-content:center;perspective:900px;padding-bottom:35px;box-sizing:border-box}
.mip-helpboek__book{position:relative;width:145px;height:210px;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-48deg) rotateZ(-9deg)}
.mip-helpboek__cover,.mip-helpboek__page,.mip-helpboek__front-group{position:absolute;inset:0;transform-origin:left center;box-sizing:border-box}
.mip-helpboek__cover{width:145px;height:210px;border-radius:5px 10px 10px 5px;background:linear-gradient(135deg,var(--help-cover-light),var(--help-cover-main) 55%,var(--help-cover-dark));border:3px solid var(--help-cover-dark);box-shadow:inset 7px 0 14px rgba(0,0,0,.18),5px 7px 13px rgba(0,0,0,.18)}
.mip-helpboek__front-group{z-index:30;transform-style:preserve-3d}
.mip-helpboek__front{display:flex;align-items:center;justify-content:center;transform:translateZ(1.5px)}
.mip-helpboek__inner{transform:translateZ(-1.5px)}
.mip-helpboek__back{z-index:5;transform:translateZ(-36px)}
.mip-helpboek__spine{position:absolute;left:0;top:0;width:36px;height:210px;transform-origin:left center;transform:rotateY(90deg);background:linear-gradient(90deg,var(--help-cover-dark),var(--help-cover-main),var(--help-cover-dark));border:2px solid var(--help-cover-dark);box-sizing:border-box;z-index:6}
.mip-helpboek__page{top:7px;bottom:7px;left:5px;right:5px;background:#fff8e8;border:1px solid #ded3bd;border-radius:3px 8px 8px 3px;box-shadow:inset 3px 0 5px rgba(0,0,0,.09)}
.mip-helpboek__page.p6{z-index:14;transform:translateZ(-31px)} .mip-helpboek__page.p5{z-index:15;transform:translateZ(-26px)}
.mip-helpboek__page.p4{z-index:16;transform:translateZ(-21px)} .mip-helpboek__page.p3{z-index:17;transform:translateZ(-16px)}
.mip-helpboek__page.p2{z-index:18;transform:translateZ(-11px)} .mip-helpboek__page.p1{z-index:19;transform:translateZ(-6px)}
.mip-helpboek__mark{font:700 132px Arial,sans-serif;line-height:1;color:#fff;text-shadow:3px 4px 2px rgba(0,70,78,.35)}
.mip-helpboek__questions{position:absolute;left:0;top:48%;width:0;height:0;z-index:60;pointer-events:none;transform-style:preserve-3d}
.mip-helpboek__questions .q{position:absolute;left:0;top:0;font:700 34px Arial,sans-serif;line-height:1;color:var(--help-flying-question);opacity:0;text-shadow:2px 3px 3px rgba(0,70,78,.28);will-change:transform,opacity}
.mip-helpboek__book.run{animation:cqWhole 3s cubic-bezier(.4,0,.2,1) forwards}
.mip-helpboek__book.run .mip-helpboek__back{animation:cqBack 3s cubic-bezier(.4,0,.2,1) forwards}
.mip-helpboek__book.run .mip-helpboek__spine{animation:cqSpine 3s cubic-bezier(.4,0,.2,1) forwards}
.mip-helpboek__book.run .mip-helpboek__front-group{animation:cqFront 3s cubic-bezier(.4,0,.2,1) forwards}
.mip-helpboek__book.run .p1{animation:cqP1 2.05s ease .82s forwards}.mip-helpboek__book.run .p2{animation:cqP2 2.1s ease .96s forwards}
.mip-helpboek__book.run .p3{animation:cqP3 2.1s ease 1.10s forwards}.mip-helpboek__book.run .p4{animation:cqP4 2.1s ease 1.24s forwards}
.mip-helpboek__book.run .p5{animation:cqP5 2.1s ease 1.38s forwards}.mip-helpboek__book.run .p6{animation:cqP6 2.1s ease 1.52s forwards}
.mip-helpboek__book.run .q1{animation:cqFly1 4s ease-out 2.10s forwards}.mip-helpboek__book.run .q2{animation:cqFly2 4s ease-out 2.22s forwards}
.mip-helpboek__book.run .q3{animation:cqFly3 4s ease-out 2.34s forwards}.mip-helpboek__book.run .q4{animation:cqFly4 4s ease-out 2.46s forwards}
.mip-helpboek__book.run .q5{animation:cqFly5 4s ease-out 2.58s forwards}.mip-helpboek__book.run .q6{animation:cqFly6 4s ease-out 2.70s forwards}
.mip-helpboek__book.run .q7{animation:cqFly7 4s ease-out 2.82s forwards}
@keyframes cqWhole{from{transform:rotateX(5deg) rotateY(-48deg) rotateZ(-9deg)}to{transform:rotateX(0) rotateY(0) rotateZ(0)}}
@keyframes cqBack{from{transform:translateZ(-36px)}to{transform:translateZ(0)}}
@keyframes cqSpine{from{width:36px;transform:rotateY(90deg)}to{width:8px;transform:rotateY(0)}}
@keyframes cqFront{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes cqP1{from{transform:translateZ(-6px) rotateY(0)}to{transform:translateZ(0) rotateY(-155deg)}}
@keyframes cqP2{from{transform:translateZ(-11px) rotateY(0)}to{transform:translateZ(0) rotateY(-140deg)}}
@keyframes cqP3{from{transform:translateZ(-16px) rotateY(0)}to{transform:translateZ(0) rotateY(-115deg)}}
@keyframes cqP4{from{transform:translateZ(-21px) rotateY(0)}to{transform:translateZ(0) rotateY(-90deg)}}
@keyframes cqP5{from{transform:translateZ(-26px) rotateY(0)}to{transform:translateZ(0) rotateY(-55deg)}}
@keyframes cqP6{from{transform:translateZ(-31px) rotateY(0)}to{transform:translateZ(0) rotateY(-25deg)}}
@keyframes cqFly1{0%{opacity:0;transform:translate(-12px,10px) translateZ(0) scale(.25)}12%{opacity:1}60%{opacity:.7}100%{opacity:0;transform:translate(-92px,-155px) translateZ(105px) scale(1.9) rotate(-23deg)}}
@keyframes cqFly2{0%{opacity:0;transform:translate(-5px,12px) translateZ(0) scale(.25)}12%{opacity:.95}60%{opacity:.68}100%{opacity:0;transform:translate(74px,-180px) translateZ(130px) scale(2.1) rotate(22deg)}}
@keyframes cqFly3{0%{opacity:0;transform:translate(0,10px) translateZ(0) scale(.22)}12%{opacity:.9}60%{opacity:.62}100%{opacity:0;transform:translate(-22px,-225px) translateZ(150px) scale(1.7) rotate(-11deg)}}
@keyframes cqFly4{0%{opacity:0;transform:translate(4px,12px) translateZ(0) scale(.23)}12%{opacity:.88}60%{opacity:.58}100%{opacity:0;transform:translate(116px,-130px) translateZ(115px) scale(1.6) rotate(29deg)}}
@keyframes cqFly5{0%{opacity:0;transform:translate(-7px,11px) translateZ(0) scale(.22)}12%{opacity:.84}60%{opacity:.54}100%{opacity:0;transform:translate(-130px,-118px) translateZ(130px) scale(1.5) rotate(-31deg)}}
@keyframes cqFly6{0%{opacity:0;transform:translate(2px,10px) translateZ(0) scale(.2)}12%{opacity:.8}60%{opacity:.5}100%{opacity:0;transform:translate(48px,-235px) translateZ(165px) scale(1.4) rotate(14deg)}}
@keyframes cqFly7{0%{opacity:0;transform:translate(-2px,10px) translateZ(0) scale(.2)}12%{opacity:.78}60%{opacity:.46}100%{opacity:0;transform:translate(-82px,-245px) translateZ(145px) scale(1.3) rotate(-18deg)}}
@media(prefers-reduced-motion:reduce){.mip-helpboek__book.run,.mip-helpboek__book.run .mip-helpboek__back,.mip-helpboek__book.run .mip-helpboek__spine,.mip-helpboek__book.run .mip-helpboek__front-group,.mip-helpboek__book.run .mip-helpboek__page,.mip-helpboek__book.run .q{animation:none}}