.stage{width:100%;padding:7rem 2rem 2rem;text-align:center}*,:after,:before{box-sizing:border-box}.swipe{display:inline-block;color:#000;animation-name:swipe,swipe-fadeout;animation-duration:2.7s,5s;animation-delay:.25s,0s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,1;animation-fill-mode:forwards}.swipe .fa-long-arrow-left,.swipe .fa-long-arrow-right{font-size:.65em;color:#595959;display:inline-block;margin:0 .5em}.swipe .fa-long-arrow-left{transform:scaleX(.75) skew(20deg) translateY(-.9em) translateX(1.25em)}.swipe .fa-long-arrow-right{transform:scaleX(.75) skew(20deg) translateY(-.9em) translateX(-.95em)}.swipe .fa-hand-o-up{transform:scaleY(1.4);animation-name:swipe-rotate,swipe-fadeout;animation-duration:2.7s,5s;animation-delay:.25s,0s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,1;animation-fill-mode:forwards;display:block;margin-top:1em}@keyframes swipe{0%{transform:translateX(0)}10%{transform:translateX(-.1em)}20%{transform:translateX(.1em)}30%{transform:translateX(-.1em)}40%{transform:translateX(.1em)}50%{transform:translateX(0)}to{transform:translateX(0)}}@keyframes swipe-rotate{0%{transform:scaleY(1.2) skew(0)}10%{transform:scaleY(1.2) skew(5deg)}20%{transform:scaleY(1.2) skew(-5deg)}30%{transform:scaleY(1.2) skew(5deg)}40%{transform:scaleY(1.2) skew(-5deg)}50%{transform:scaleY(1.2) skew(0)}to{transform:scaleY(1.2) skew(0)}}@keyframes swipe-fadeout{0%{opacity:1}80%{opacity:1}to{opacity:0;display:none}}.hidden-nav{opacity:0!important}.visible{opacity:1}#envelope{position:relative;width:280px;height:180px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin-left:auto;margin-right:auto;top:150px;background-color:#7552fa;box-shadow:0 4px 20px rgba(0,0,0,.2)}.front{position:absolute;width:0;height:0;z-index:3}.flap{border-color:#7552fa transparent transparent;border-style:solid;border-width:98px 140px 82px;transform-origin:top;pointer-events:none}.pocket{border-color:transparent #c4b5fd #b8a6fd;border-style:solid;border-width:90px 140px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.letter{position:relative;background-color:#fff;width:90%;margin-left:auto;margin-right:auto;height:90%;top:5%;border-radius:6px;box-shadow:0 2px 26px rgba(0,0,0,.12)}.letter:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;background-image:linear-gradient(180deg,hsla(0,0%,100%,0) 25%,rgba(215,227,239,.7) 55%,#d7e3ef)}.emoji{position:relative;content:"";font-size:80px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center}.emoji:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.words{position:absolute;left:10%;width:80%;height:14%;background-color:#eeeff0}.words.line1{top:15%;width:20%;height:7%}.words.line2{top:30%}.words.line3{top:50%}.words.line4{top:70%}.open .flap{transform:rotateX(180deg);transition:transform .4s ease,z-index .2s;z-index:1}.close .flap{transform:rotateX(0deg);transition:transform .4s ease .6s,z-index 1s;z-index:2}.close .letter{transform:translateY(0);transition:transform .4s ease,z-index 1s;z-index:1}.open .letter{animation:moveAndScale 3s ease forwards,z-index .2s;z-index:99}.close .emoji{transform:translateY(0);transition:transform .4s ease,z-index 1s;z-index:1}.open .emoji{animation:moveAndScaleEmoji 3s ease forwards,z-index .2s;z-index:99}.hearts{position:absolute;top:90px;left:0;right:0;z-index:2}.heart{bottom:0;right:10%}.heart,.heart:after,.heart:before{position:absolute;pointer-events:none}.heart:after,.heart:before{content:"";left:50px;top:0;width:50px;height:80px;background:#d00000;border-radius:50px 50px 0 0;transform:rotate(-45deg);transform-origin:0 100%;z-index:4}.heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}.close .heart{opacity:0;animation:none}.a1{left:20%;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);-webkit-animation:slideUp 2s linear 1,sideSway 2s ease-in-out 4 alternate;-moz-animation:slideUp 2s linear 1,sideSway 2s ease-in-out 4 alternate;animation-fill-mode:forwards;animation-delay:.7s}.a1,.a2{opacity:1}.a2{left:55%;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);-webkit-animation:slideUp 2s linear 1,sideSway 2s ease-in-out 2 alternate;-moz-animation:slideUp 2s linear 1,sideSway 2s ease-in-out 2 alternate;animation-fill-mode:forwards;animation-delay:.7s}.a3{left:10%;-webkit-transform:scale(.8);-moz-transform:scale(.8);transform:scale(.8);opacity:1;-webkit-animation:slideUp 2s linear 1,sideSway 2s ease-in-out 6 alternate;-moz-animation:slideUp 2s linear 1,sideSway 2s ease-in-out 6 alternate;animation-fill-mode:forwards;animation-delay:.7s}@-webkit-keyframes slideUp{0%{top:0}20%{z-index:4}to{top:-800px}}@keyframes slideUp{0%{top:0}20%{z-index:4}to{top:-800px}}@-webkit-keyframes sideSway{0%{margin-left:0}20%{z-index:4}to{margin-left:50px}}@keyframes sideSway{0%{margin-left:0}20%{z-index:4}to{margin-left:50px}}body{background-color:#fff}.envlope-wrapper{height:380px}.reset{text-align:center}.reset button{font-weight:800;font-style:normal;transition:all .1s linear;-webkit-appearance:none;background-color:transparent;border:2px solid #c4b5fd;border-radius:4px;color:#c4b5fd;display:inline-block;font-size:14px;text-transform:uppercase;margin:5px;padding:10px;line-height:1em;text-decoration:none;min-width:120px;cursor:pointer}.reset button:hover{background-color:#c4b5fd;color:#fff}@keyframes moveAndScale{0%{transition:transform .4s ease .6s,z-index .6s;z-index:2}50%{transform:translateY(-225px);transition:transform .4s ease .6s,z-index .6s;z-index:2}90%{transform:180px;transition:transform .4s ease .6s,z-index 1;scale:1;z-index:3}to{transform:180px;transition:transform .4s ease .6s,z-index 1;scale:2.5;z-index:3}}@keyframes moveAndScaleEmoji{0%{transition:transform .4s ease .6s,z-index .6s;z-index:2}50%{transform:translateY(-225px);transition:transform .4s ease .6s,z-index .6s;z-index:2}90%{transform:180px;transition:transform .4s ease .6s,z-index 1;scale:1;z-index:3}to{transform:180px;transition:transform .4s ease .6s,z-index 1;font-size:150px;z-index:3}}@media(max-width:768px){@keyframes moveAndScale{0%{transition:transform .4s ease .6s,z-index .6s;z-index:2}50%{transform:translateY(-225px);transition:transform .4s ease .6s,z-index .6s;z-index:2}90%{transform:180px;transition:transform .4s ease .6s,z-index 1;scale:1;z-index:3}to{transform:180px;transition:transform .4s ease .6s,z-index 1;scale:1.5;z-index:4}}@keyframes moveAndScaleEmoji{0%{transition:transform .4s ease .6s,z-index .6s;z-index:2}50%{transform:translateY(-225px);transition:transform .4s ease .6s,z-index .6s;z-index:2}90%{transform:180px;transition:transform .4s ease .6s,z-index 1;scale:1;z-index:3}to{transform:180px;transition:transform .4s ease .6s,z-index 1;font-size:140px;z-index:4}}}.cats{font-size:100px}