*{margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden;font-family:Roboto,sans-serif;background-color:#000}.experience{overflow:hidden}.webgl{position:fixed;top:0;left:0;outline:none;background:#000}.vignette{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;background:radial-gradient(circle,#0000 40%,#000);z-index:10;transition:opacity 1s ease-in-out}.transparent{opacity:0}.opaque{opacity:1}.relative-container{position:relative;height:100%;width:100%}.splashscreen-video{position:absolute;z-index:999;top:50%;left:50%;transform:translate(-50%,-50%);width:384px;margin:0 auto}.loading-bar{position:absolute;top:50%;width:100%;height:2px;background:#003567;transform:scaleX(0);transform-origin:top left;transition:transform .5s;will-change:transform;opacity:0}.loading-bar.ended{transform-origin:100% 0;transition:transform .5s ease-in-out}.libre-bodoni-regular{font-family:Libre Bodoni,serif;font-weight:400;font-style:normal}.libre-bodoni-medium{font-family:Libre Bodoni,serif;font-weight:500;font-style:normal}.libre-bodoni-bold{font-family:Libre Bodoni,serif;font-weight:700;font-style:normal}header{position:absolute;display:flex;align-items:center;justify-content:center;top:0vh;left:0;width:100%;height:8vh;background-color:#003567;text-align:center;user-select:none}.logo{height:50%;position:absolute;left:5vw}.header-content,.footer-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.header-content{padding-left:70px}.header-text{margin:0;color:#fff}h1.header-text{font-size:calc(2.2rem + .5vw)}p.header-text{font-size:calc(.8rem + .5vw)}footer{position:absolute;display:flex;flex-direction:row;align-items:center;align-content:center;bottom:0vh;left:0;width:100%;height:6vh;background-color:#003567;color:#fff;text-align:center;font-size:.8rem;font-weight:400;font-family:Roboto,sans-serif}.footer-text{margin:0;color:#fff;font-size:calc(.75rem + .5vw)}footer div{width:100%;margin:auto;letter-spacing:.05rem}footer a{text-decoration:none;pointer-events:all;color:#fff}.ui{color:#000;font-family:Roboto,sans-serif;font-weight:300;font-size:1em;width:100vw;height:100vh;position:absolute;top:0;z-index:100;pointer-events:none}.ui-screen{width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity 2s;position:absolute}.ui-screen-container{position:relative}.ui-3d{width:100%;height:100%;position:absolute;top:0;left:0}.ui-3d-container{position:relative}.ui-3d-block{position:absolute;pointer-events:all;cursor:pointer;top:50%;left:50%;transition:opacity .5s;will-change:opacity}.ui-open,.ui-close{pointer-events:all;position:absolute;width:80px;transform:translate3d(-50%,0,0);line-height:20px}.open-close-container{position:absolute;width:210px;height:140px;right:1vw;top:50%;transform:translateY(-50%)}.open-close-title{color:#d3d3d3;text-align:center;font-weight:800;font-size:1rem;text-transform:uppercase;display:block}.open-close-button{background-size:100% 100%;width:100%;height:50%;border-radius:80px;border:1px #ffffff solid;pointer-events:all;cursor:pointer;margin:12px 0;opacity:.35;transition:opacity .5s}.opened{background-image:url(../ui/opinel-opened-a.jpg)}.closed{background-image:url(../ui/opinel-closed-a.jpg)}.material-selector-container{position:absolute;width:180px;height:490px;left:1vw;top:50%;transform:translateY(-50%)}.material-selector-title{color:#d3d3d3;text-align:center;font-weight:800;font-size:1rem;text-transform:uppercase;display:block}.material-selector-button{background-size:100% 100%;width:100%;height:13%;border-radius:80px;border:1px #ffffff solid;pointer-events:all;cursor:pointer;margin:12px 0;opacity:.35;transition:opacity .5s;box-shadow:inset 0 0 2px 2px #000}.material-selector-bois-1{background-image:url(../ui/opinel-material-bois-1-a.jpg)}.material-selector-bois-2{background-image:url(../ui/opinel-material-bois-2-a.jpg)}.material-selector-bois-3{background-image:url(../ui/opinel-material-bois-3-a.jpg)}.material-selector-bois-4{background-image:url(../ui/opinel-material-bois-4-a.jpg)}.material-selector-bois-5{background-image:url(../ui/opinel-material-bois-5-a.jpg)}.material-selector-bois-M2{background-image:url(../ui/opinel-material-bois-M2-a.jpg)}.selected{opacity:1}.button:hover{opacity:1;border-width:2px}.line-vertical-top{width:1px;height:2rem;margin:auto;background:linear-gradient(#fff0 5%,#fff 70%)}.line-vertical-bottom{width:1px;height:2rem;margin:auto;background:linear-gradient(#fff 30%,#fff0 95%)}.menu-bubble-small{text-align:center;border:solid #a0a0a0 1px;border-radius:4rem}.menu-bubble-small span{font-size:.7rem}.blade-engraving{position:absolute;display:flex;flex-direction:column;align-items:center;justify-items:center;bottom:7vh;left:37%;transform:translate(-50%,-50%)}.handle-engraving{position:absolute;display:flex;flex-direction:column;align-items:center;justify-items:center;bottom:7vh;right:30%;transform:translate(-50%,-50%)}.blade-text,.blade-font-selector,.handle-text,.handle-font-selector{margin:.6rem 0;pointer-events:all;width:12rem;border:2px black solid;border-radius:1rem;text-align:center;font-size:1.2rem}.blade-title,.handle-title{color:#fff;font-size:1.2rem;margin-bottom:-.4rem}.blade-text,.handle-text{height:3rem}.blade-text:focus,.handle-text:focus{outline:none}.blade-chars-left,.handle-chars-left{font-family:Roboto,sans-serif;font-style:italic;font-size:.8em;color:#fff}.blade-font-selector,.handle-font-selector{height:4rem}