.envelope{perspective:800px}.envelope.open .top{animation-delay:1.2s;animation-duration:1.5s;animation-fill-mode:forwards;animation-name:flipX;perspective:800;transform-origin:top}.envelope.open .top,.top{transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.top-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;top:0;right:0;bottom:0;left:0;position:absolute}.top-face-inside{transform:rotateX(180deg)}.envelope.closing .top{animation-duration:3.5s;animation-fill-mode:forwards;animation-name:closeFlipX;animation-timing-function:ease-in-out;perspective:800;transform-origin:top;transform-style:preserve-3d}.envelope .letter{animation-delay:2.5s;animation-duration:6s;animation-fill-mode:forwards;height:0;left:50%;position:absolute;top:50%;width:0;z-index:3}.envelope.open .letter{animation-name:takeOff}.envelope.closing .letter{animation-delay:0s;animation-duration:3s;animation-fill-mode:forwards;animation-name:closeTakeOff}.envelope .letter #designer-canvas{animation-delay:2.5s;animation-duration:5s;animation-fill-mode:forwards;transform:scale(.3) rotate(90deg);translate:50% -50%;width:320px}.envelope.open .letter #designer-canvas{animation-name:scaleLetter}.envelope.closing .letter #designer-canvas{animation-delay:0s;animation-duration:3s;animation-fill-mode:forwards;animation-name:closeScaleLetter}@keyframes takeOff{0%{top:50%;z-index:3}25%{top:-50%}50%{z-index:6}to{top:50%;z-index:6}}@keyframes scaleLetter{0%{transform:scale(.3) rotate(90deg)}50%{transform:scale(.3) rotate(0)}to{transform:scale(1) rotate(0)}}@keyframes flipX{0%{animation-timing-function:ease-out;transform:rotateX(0)}to{transform:rotateX(180deg);z-index:1}}@keyframes closeTakeOff{0%{opacity:1;top:50%;z-index:6}25%{opacity:1;top:-50%;z-index:6}50%{bottom:60%;opacity:1;z-index:3}to{bottom:60%;z-index:3}}@keyframes closeScaleLetter{0%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:1;transform:scale(.3) rotate(90deg)}to{transform:scale(.3) rotate(90deg);z-index:0}}@keyframes closeFlipX{0%{transform:rotateX(180deg);z-index:1}40%{z-index:1}80%{z-index:7}to{transform:rotateX(0);z-index:5}}@keyframes fold-up{to{transform:rotateX(140deg)}}@keyframes fold-down{to{transform:rotateX(-140deg)}}.box-back{z-index:3}.box-back,.box-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;transition:all 1.5s;translate:50% -50%}.box-front{z-index:2}.box-front,.box.closing .box-back,.box.open .box-back{transform:rotateY(180deg)}.box.closing .box-back{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:all 10s;z-index:3}.box.open .box-front{transform:rotateY(0);z-index:3}.box.closing .box-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(0);transition:all 10s;z-index:2}