*{padding:0;margin:0}.section{position:absolute;z-index:0;width:25%;height:33.3%;overflow:hidden;cursor:pointer;transform:scale(1);will-change:transform,contents;transition-property:all;transition-duration:.5s;transition-timing-function:cubic-bezier(0.4,0,0.2,1)}.section:first-child{top:0;left:0}.section:nth-child(2){top:0;left:25%}.section:nth-child(3){top:0;left:50%}.section:nth-child(4){top:0;left:75%}.section:nth-child(5){top:33.3%;left:0}.section:nth-child(6){top:33.3%;left:25%}.section:nth-child(7){top:33.3%;left:50%}.section:nth-child(8){top:33.3%;left:75%}.section:nth-child(9){top:66.6%;left:0}.section:nth-child(10){top:66.6%;left:25%}.section:nth-child(11){top:66.6%;left:50%}.section:nth-child(12){top:66.6%;left:75%}.section.is-expanded{top:0;left:0;width:100%;height:100%;cursor:initial}.has-expanded-item .section:not(.is-expanded){transform:scale(0)}.close-section{position:absolute;top:0;right:0;display:flex;width:3rem;height:3rem;align-items:center;justify-content:center;line-height:1;font-size:2rem;text-align:center;color:#fff;opacity:0;cursor:pointer;pointer-events:none;transition:opacity 150ms linear;will-change:opacity}.section.is-expanded .close-section{opacity:1;transition-delay:0.5s;pointer-events:initial}*{box-sizing:border-box}html{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body{margin:0;font:16px/1.5 "Roboto Slab",sans-serif;background:#000;overflow:hidden}.demo-box{display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column;color:#fff;font-size:2rem;font-weight:300;z-index:9999}.expanded-content{display:none;transform:translateY(100px);transition:.8s all ease-in-out;opacity:0;text-align:center;overflow:hidden}.is-expanded .expanded-content{display:block;padding:20px}.expanded-content.showing{transform:translateY(0);opacity:1}#answer{background:0 0;border:none;font-size:30px;border-bottom:2px solid #fff;padding:10px;color:#fff;border-radius:10px 10px 0 0;font-weight:700}#answer:focus{border:none;border-bottom:2px solid #fff;outline:0}.bg-image.is-expanded::before{position:absolute;width:100%;height:100%;left:0;top:0;content:'';background:url('../img/map.jpg') no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:-9999}.bg-img::after{position:absolute;width:100%;height:100%;left:0;top:0;content:'';z-index:-9999;transition:1s all ease-in-out}#win{object-fit:cover;position:absolute;z-index:9999;top:0;left:0;width:100%;height:100%;animation:slide-in 1s}.section::before{position:absolute;width:100%;height:100%;left:0;top:0;content:'';background:radial-gradient(transparent,#0000007d);transition:.3s all ease-in-out}.section::after{position:absolute;width:100%;height:100%;left:0;top:0;content:'';z-index:-1;transition:1s all ease-in-out}.section img{transition:1s all ease-in-out;width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1}.section.is-expanded img{opacity:1}.is-expanded:after{backdrop-filter:blur(10px)}@keyframes slide-in{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}.section .title-content{text-shadow:0 0 10px #000,0 0 20px #fff;font-weight:700;transition:.3s all ease-in-out;transform:translateY(0)}.section:not(.is-expanded):hover .title-content{transform:translateY(-10px)}.section:not(.is-expanded):hover::before{transform:scale(1.5)}.section:not(.is-expanded):hover img{transform:scale(1.1)}.btn,.btn::after{-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}.btn{background:0 0;border:3px solid #fff;border-radius:5px;color:#fff;display:block;font-size:30px;font-weight:700;margin:20px 0;position:relative;text-transform:uppercase;backdrop-filter:blur(200px);cursor:pointer;transition:.7s all ease-in-out}.btn::after,.btn::before{background:#fff;content:'';position:absolute;z-index:-1}.btn:hover,.btn:hover .btn-text{background:-webkit-linear-gradient(45deg,#d800ff,#00f9c0);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.btn-5{overflow:hidden}.btn-5::after{height:100%;left:-35%;top:0;transform:skew(50deg);transition-duration:.6s;transform-origin:top left;width:0}.btn-5:hover:after{height:100%;width:135%}#toast{visibility:hidden;max-width:50px;height:50px;margin:auto;background:linear-gradient(45deg,#0000002e,#0000002e);color:#fff;text-align:center;border-radius:2px;position:fixed;z-index:1;left:0;right:0;bottom:30px;font-size:17px;white-space:nowrap;overflow:hidden;line-height:50px;box-shadow:0 0 10px #ffffff40;backdrop-filter:blur(200px)}#toast #img{width:50px;height:50px;float:left;box-sizing:border-box;background:radial-gradient(#ff0000a8,#a10202bf);color:#fff}#toast #desc{color:#fff;overflow:hidden;white-space:nowrap}#toast.show{visibility:visible;-webkit-animation:fadein .5s,expand .5s .5s,stay 3s 1s,shrink .5s 2s,fadeout .5s 2.5s;animation:fadein .5s,expand .5s .5s,stay 3s 1s,shrink .5s 4s,fadeout .5s 4.5s}@-webkit-keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes expand{from{min-width:50px}to{min-width:350px}}@keyframes expand{from{min-width:50px}to{min-width:350px}}@-webkit-keyframes stay{from{min-width:350px}to{min-width:350px}}@keyframes stay{from{min-width:350px}to{min-width:350px}}@-webkit-keyframes shrink{from{min-width:350px}to{min-width:50px}}@keyframes shrink{from{min-width:350px}to{min-width:50px}}@-webkit-keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:60px;opacity:0}}@keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:60px;opacity:0}}.is-expanded:not(.submit-section) .expanded-content p{text-shadow:0 0 10px #000;background:#04040466;padding:10px;border-radius:5px;box-shadow:0 0 5px #ffffff4f}.title-content::after,.title-content::before{content:'';background:#fff;position:absolute;top:-10px;left:-30%;width:160%;height:3px;transform:scaleX(0);transition:.5s .7s all ease-in-out;transform-origin:left;box-shadow:0 0 5px #ffffff87}.title-content::after{top:unset;bottom:-10px;transform-origin:right}.is-expanded .title-content::after,.is-expanded .title-content::before{transform:scaleX(1)}.stage-container{position:absolute;top:0;left:0;display:none}a{color:#fff;text-decoration:none}#instructions{position:absolute;background:#000000a8;color:#fff;padding:10px;border-radius:10px;bottom:10px;left:10px;cursor:pointer;transition:.3s all ease-in-out}#instructions:hover{transform:scale(1.2)}