html{color:#888;-webkit-user-select:none;user-select:none;background:#000;height:100%;overflow:hidden}html body{text-align:center;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0;padding:0;font-family:Quicksand,sans-serif;display:flex;overflow:hidden}html body #app{justify-content:center;align-items:center;width:100%;height:100%;display:flex}html body #app .main{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}html body #app .main:before{content:"";z-index:-1;opacity:0;background-color:#fff;width:100%;height:100%;transition:opacity 3s;position:absolute}html body #app .main .greeting{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-80%)}html body #app .main .greeting h2{color:#fff;margin:0;font-size:25px;font-weight:500}html body #app .main .greeting .slogan{aspect-ratio:2937/200;opacity:.5;background-image:url(slogan.3a4f2ab2.png);background-repeat:no-repeat;background-size:100%;width:18rem;margin-bottom:.5rem}html body #app .main .greeting .surprise{width:30rem;height:0;transition:margin-top 1s 1.5s,height 1s 1.5s;position:relative}html body #app .main .greeting .surprise .door-cover{z-index:1;justify-content:space-between;width:6rem;height:100%;display:flex;position:absolute;top:49%;left:50%;transform:translate(-50%)translateY(-50%)}html body #app .main .greeting .surprise .door-cover:before,html body #app .main .greeting .surprise .door-cover:after{content:"";background-color:#000;width:3rem;height:105%;display:inline-block}@keyframes door-show{50%{width:10rem;height:100%}to{width:10rem;height:0%}}html body #app .main .greeting .surprise .door-area{z-index:0;aspect-ratio:5/7;height:90%;position:absolute;top:50%;left:50%;transform:translate(-50%)translateY(-50%)}html body #app .main .greeting .surprise .door-area .door{box-sizing:border-box;background-color:#4b4b4b;border:0 solid #fff;border-radius:7px;width:100%;height:100%;transition:border-width 1s 2s;position:absolute}html body #app .main .greeting .surprise .door-area .door .lights{opacity:0;transition:opacity .5s .3s}html body #app .main .greeting .surprise .door-area .door .lights .light{z-index:0;aspect-ratio:700/226;background-image:url(light.cefd3cf7.png);background-size:100%;height:3rem;animation:infinite lights;position:absolute}html body #app .main .greeting .surprise .door-area .door .lights .light-1{animation-duration:2s;top:10%;left:-20%;transform:translateY(-50%)rotate(-30deg)}html body #app .main .greeting .surprise .door-area .door .lights .light-2{animation-duration:3s;top:30%;left:-25%;transform:translateY(-50%)rotate(-15deg)}html body #app .main .greeting .surprise .door-area .door .lights .light-3{animation-duration:2.3s;top:50%;left:-10%;transform:translateY(-50%)rotate(0)}html body #app .main .greeting .surprise .door-area .door .lights .light-4{animation-duration:2.5s;top:70%;left:-25%;transform:translateY(-50%)rotate(15deg)}html body #app .main .greeting .surprise .door-area .door .lights .light-5{animation-duration:2.7s;top:90%;left:-20%;transform:translateY(-50%)rotate(30deg)}@keyframes lights{0%{opacity:.5;margin-left:0}50%{opacity:.2}to{opacity:.5;margin-left:0}}html body #app .main .greeting .surprise .door-area .door .panel{background-color:#000;border:0 solid #fff;border-radius:7px;width:100%;height:100%;transition:border-width 1s 2s,transform 1s;position:absolute;top:-3px;left:-3px}html body #app .main .greeting .surprise .door-area .door .panel:before{content:"";aspect-ratio:1;opacity:0;background-color:#fff;border-radius:100%;width:15%;transition:opacity .5s 4s,transform 1s;position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}html body #app .main .greeting .surprise .tip{z-index:-1;aspect-ratio:3/2;opacity:0;background-repeat:no-repeat;background-size:100%;width:3.5rem;font-family:Caveat,cursive;transition:opacity .5s 4.5s;position:absolute;top:45%;right:24%}html body #app .main .greeting .surprise .tip:before,html body #app .main .greeting .surprise .tip:after{text-align:left;letter-spacing:.03rem;color:#fff;white-space:nowrap;opacity:0;font-size:1.2rem;font-weight:600;position:absolute;top:1.5rem;left:4.5rem;overflow:hidden}html body #app .main .greeting .surprise .tip:before{content:"It's the door..."}html body #app .main .greeting .surprise .tip:after{content:"to our creations";top:2.7rem;left:6rem}@media (max-width:414px){html body #app .main .greeting .surprise .tip{aspect-ratio:3/2;width:3rem;top:40%;right:30%}html body #app .main .greeting .surprise .tip:before,html body #app .main .greeting .surprise .tip:after{font-size:1.1rem;top:2.7rem;left:.5rem}html body #app .main .greeting .surprise .tip:after{padding-right:.1rem;top:3.8rem;left:1.3rem}}html body #app .main .greeting .say-hi{margin-top:40px;font-size:1.15rem}html body #app .main .greeting .say-hi a{color:#bbb;text-decoration:none;transition:color .2s linear}html body #app .main .greeting .say-hi a:hover{color:#fff;text-decoration:none}html body #app .main .links{justify-content:center;align-items:center;display:flex;position:absolute;bottom:15%}html body #app .main .links a{opacity:.5;margin-right:1.75rem;transition:opacity .2s}html body #app .main .links a:hover{opacity:.75}html body #app .main .links a:last-child{margin-right:0}html body #app .main .links a:after{content:"";aspect-ratio:1;background-repeat:no-repeat;background-size:contain;width:1.3rem;display:block}html body #app .main .links a.facebook:after{background-image:url(facebook.d3b3747d.png)}html body #app .main .links a.instagram:after{background-image:url(instagram.e9866583.png)}html body #app .main .links a.linkedin:after{background-image:url(linkedin.4fae1228.png)}html body #app .main .links a.cakeresume:after{background-image:url(cakeresume.6cb8632d.png)}html body #app .main .links .more-info{opacity:.5;width:1.3rem;height:1.3rem;position:relative}html body #app .main .links .more-info:hover{opacity:.75;cursor:pointer}html body #app .main .links .more-info .bar{background-color:#fff;border-radius:1vw;width:.2rem;height:1.3rem;transition:height .3s,transform .5s .3s,left .5s .3s;position:absolute}html body #app .main .links .more-info .bar:first-child{left:0}html body #app .main .links .more-info .bar:nth-child(2){left:calc(50% - .1rem)}html body #app .main .links .more-info .bar:nth-child(3){left:1.15rem}html body #app .main .links .more-info.unfold .bar:first-child{left:.6rem;transform:rotate(45deg)}html body #app .main .links .more-info.unfold .bar:nth-child(2){height:0}html body #app .main .links .more-info.unfold .bar:nth-child(3){left:.6rem;transform:rotate(-45deg)}html body #app .main .company{z-index:2;color:#bbb;opacity:0;font-size:1rem;transition:bottom .5s .75s,opacity .5s .75s;position:absolute;bottom:20%}html body #app .main .company div:last-child{margin-top:.5rem}@media (max-width:414px){html body #app .main .company{font-size:.85rem}html body #app .main .company div:last-child{margin-top:.15rem}}html body #app .main .company.show{opacity:1;bottom:22%}html body #app .main .floating-fish{z-index:0;-webkit-user-select:none;user-select:none;height:80vh;transition:transform .15s,margin-left 0s 2s;animation:120s linear infinite floating-fish;position:absolute;left:100%}html body #app .main .floating-fish.poke{transform:scale(1.025)}html body #app .main .floating-fish .rotate{height:100%;animation:150s linear infinite rotate-fish}html body #app .main .floating-fish .rotate .blow{height:100%}html body #app .main .floating-fish .rotate .blow.active-1 .dot-1,html body #app .main .floating-fish .rotate .blow.active-2 .dot-1,html body #app .main .floating-fish .rotate .blow.active-2 .dot-2,html body #app .main .floating-fish .rotate .blow.active-3 .dot-1,html body #app .main .floating-fish .rotate .blow.active-3 .dot-2,html body #app .main .floating-fish .rotate .blow.active-3 .dot-3,html body #app .main .floating-fish .rotate .blow.active-4 .dot-1,html body #app .main .floating-fish .rotate .blow.active-4 .dot-2,html body #app .main .floating-fish .rotate .blow.active-4 .dot-3,html body #app .main .floating-fish .rotate .blow.active-4 .dot-4,html body #app .main .floating-fish .rotate .blow.active-5 .dot-1,html body #app .main .floating-fish .rotate .blow.active-5 .dot-2,html body #app .main .floating-fish .rotate .blow.active-5 .dot-3,html body #app .main .floating-fish .rotate .blow.active-5 .dot-4,html body #app .main .floating-fish .rotate .blow.active-5 .dot-5,html body #app .main .floating-fish .rotate .blow.active-6 .dot-1,html body #app .main .floating-fish .rotate .blow.active-6 .dot-2,html body #app .main .floating-fish .rotate .blow.active-6 .dot-3,html body #app .main .floating-fish .rotate .blow.active-6 .dot-4,html body #app .main .floating-fish .rotate .blow.active-6 .dot-5,html body #app .main .floating-fish .rotate .blow.active-6 .dot-6{opacity:.5}html body #app .main .floating-fish .rotate .blow .dot-1{aspect-ratio:1;opacity:.1;z-index:1;background-color:#fff;border-radius:100%;width:6vh;transition:opacity .5s linear;position:absolute;bottom:29.3%;left:26%}html body #app .main .floating-fish .rotate .blow .dot-2{aspect-ratio:1;opacity:.1;z-index:1;background-color:#fff;border-radius:100%;width:3vh;transition:opacity .5s linear;position:absolute;bottom:33.3%;left:35.6%}html body #app .main .floating-fish .rotate .blow .dot-3{aspect-ratio:1;opacity:.1;z-index:1;background-color:#fff;border-radius:100%;width:8.5vh;transition:opacity .5s linear;position:absolute;bottom:15%;left:32.5%}html body #app .main .floating-fish .rotate .blow .dot-4{aspect-ratio:1;opacity:.1;z-index:1;background-color:#fff;border-radius:100%;width:5vh;transition:opacity .5s linear;position:absolute;bottom:23%;left:45%}html body #app .main .floating-fish .rotate .blow .dot-5{aspect-ratio:1;opacity:.1;z-index:1;background-color:#fff;border-radius:100%;width:6.8vh;transition:opacity .5s linear;position:absolute;bottom:10.5%;left:48%}html body #app .main .floating-fish .rotate .blow .dot-6{aspect-ratio:1;opacity:.1;z-index:1;background-color:#fff;border-radius:100%;width:4vh;transition:opacity .5s linear;position:absolute;bottom:16.5%;left:62%}html body #app .main .floating-fish .rotate .blow .dot.active{opacity:.5}html body #app .main .floating-fish .rotate .blow img{opacity:.1;height:100%;transition:opacity .5s}html body #app .main.show-JD .greeting .surprise{height:112px;margin-top:40px}html body #app .main.show-JD .greeting .surprise .door-cover{animation:1s linear 2.5s forwards door-show}html body #app .main.show-JD .greeting .surprise .door-area .door{cursor:pointer;border-width:3px}html body #app .main.show-JD .greeting .surprise .door-area .door .panel{border-width:3px}html body #app .main.show-JD .greeting .surprise .door-area .door .panel:before{opacity:1;border-width:.15rem}html body #app .main.show-JD .greeting .surprise .tip{opacity:1}html body #app .main.show-JD .greeting .surprise .tip:before,html body #app .main.show-JD .greeting .surprise .tip:after{animation:1s linear 5.5s forwards tip-show}@keyframes tip-show{to{opacity:1}}html body #app .main.show-JD .floating-fish,html body #app .main.show-JD .floating-fish .rotate{animation-play-state:paused}html body #app .main.show-JD .floating-fish .rotate .blow{animation:2s forwards fish-blow}html body #app .main.show-JD .floating-fish .rotate img{opacity:.5}html body #app .main.hold-door .door-area .door:hover .lights{opacity:1}html body #app .main.hold-door .door-area .door:hover .panel{transform:perspective(400px)rotateY(-50deg)translate(10px)translateZ(25px)}@media (max-width:414px){html body #app .main.hold-door .door-area .door:hover .lights{opacity:0}html body #app .main.hold-door .door-area .door:hover .panel{transform:unset}html body #app .main.hold-door .door-area .door.open .lights{opacity:1}html body #app .main.hold-door .door-area .door.open .panel{transform:perspective(400px)rotateY(-50deg)translate(10px)translateZ(25px)}}html body #app .main.hold-door .tip{background-image:url(arrow.24e16038.gif)}@media (max-width:414px){html body #app .main.hold-door .tip{background-image:url(arrow-down.891c545c.gif)}}html body #app .main.go-to-JD:before{animation:1s strong-light}@keyframes strong-light{0%{z-index:1}to{opacity:1;z-index:1}}@media (max-width:414px){html body #app .main.go-to-JD:before{animation:.3s .7s strong-light}}@keyframes floating-fish{0%{bottom:50%;left:100%}50%{bottom:-100%;left:-100vh}51%{bottom:100%;left:-100vh}to{bottom:-100%;left:100%}}@keyframes fish-blow{0%{opacity:1}99%{opacity:0;transform:scale(2)}to{opacity:0}}@keyframes rotate-fish{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes typing{0%{border-color:#bbb}20%{border-color:#bbb}30%{border-color:#000}70%{border-color:#000}80%{border-color:#bbb}to{border-color:#bbb}}.test{z-index:3;border:1px solid #fff;width:500px;height:750px;position:absolute}
/*# sourceMappingURL=web-v1.6fcbe19f.css.map */