.envelope{perspective:800px}.envelope.open .top{animation-delay:.8s;animation-duration:1s;animation-fill-mode:forwards;animation-name:flip}.envelope.closing .top,.envelope.open .top{perspective:800;transform-origin:top;transform-style:preserve-3d}.envelope.closing .top{animation-duration:3.5s;animation-fill-mode:forwards;animation-name:closeFlip;animation-timing-function:ease-in-out}.envelope .letter{animation-delay:1s;animation-duration:5s;animation-fill-mode:forwards;height:0;left:50%;position:absolute;top:50%;width:0;z-index:2}.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:1s;animation-duration:4s;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:1}25%{top:-50%}50%{z-index:3}to{top:50%;z-index:3}}@keyframes scaleLetter{0%{transform:scale(.3) rotate(90deg)}50%{transform:scale(.3) rotate(0)}to{transform:scale(1) rotate(0)}}@keyframes flip{to{transform:rotateX(180deg);z-index:1}}@keyframes closeTakeOff{0%{opacity:1;top:50%;z-index:3}25%{opacity:1;top:-50%;z-index:3}50%{bottom:60%;opacity:1;z-index:1}to{bottom:60%;z-index:1}}@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 closeFlip{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 .8s;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}