:root{--menu-width:37.5em;--items:6;--item-width:calc(var(--menu-width) / var(--items))}#menu{width:var(--menu-width);justify-content:space-evenly;position:relative;z-index:2;margin:0 auto;perspective:2000px}#menu,#menu .menu-item{display:flex;transform-style:preserve-3d}#menu .menu-item{color:#000;font-weight:600;flex-grow:1;flex-basis:var(--item-width);box-sizing:border-box;padding:1em 1.5em;justify-content:center;perspective:200px;letter-spacing:.5px;min-height:1em}#menu .menu-text,#menu .menu-text a{font-size:1em;color:#000;text-decoration:none;text-shadow:0 1px 5px rgba(0,0,0,.1);transition:color .1s ease-out;text-align:center}#menu .menu-text a:hover{color:#464646}#sub-menu-holder{pointer-events:none;color:rgba(0,0,0,.5);font-weight:400;padding:1em;position:absolute;transition:opacity 2 ease-out;transform:rotateX(-25deg) scale(1);transform-origin:50% 7em 0;opacity:0;box-shadow:0 2px 7px rgba(0,0,0,.1),0 2px 20px rgba(0,0,0,.3);box-sizing:border-box;top:3rem;border-radius:10px;border:1px solid #000;background:#fff;display:block;height:300px;width:calc(var(--menu-width) * 1.5)}#sub-menu-container{position:absolute;z-index:-1;min-width:100%;top:2.5em;width:100%}#menu .menu-item:hover~#sub-menu-container #sub-menu-holder{animation:clipPath .25s ease-out 1 forwards;transition:left .15s ease-out,height .15s ease-out,-webkit-clip-path .25s ease-out;transition:clip-path .25s ease-out,left .15s ease-out,height .15s ease-out;transition:clip-path .25s ease-out,left .15s ease-out,height .15s ease-out,-webkit-clip-path .25s ease-out;opacity:1;right:auto}#menu .menu-item:first-of-type:hover~#sub-menu-container #sub-menu-holder,#menu .menu-item:nth-of-type(4):hover~#sub-menu-container #sub-menu-holder{-webkit-clip-path:inset(0 28.75em 0 0 round 10px);clip-path:inset(0 28.75em 0 0 round 10px);height:14em}#menu .menu-item:nth-of-type(2):hover~#sub-menu-container #sub-menu-holder,#menu .menu-item:nth-of-type(3):hover~#sub-menu-container #sub-menu-holder{-webkit-clip-path:inset(0 15em 0 0 round 10px);clip-path:inset(0 15em 0 0 round 10px)}#menu .menu-item:first-of-type:hover~#sub-menu-container #sub-menu-holder{left:calc(-10em + -1px)}#menu .menu-item:nth-of-type(2):hover~#sub-menu-container #sub-menu-holder{left:calc(-6.5em + -1px);height:18.75em}#menu .menu-item:nth-of-type(3):hover~#sub-menu-container #sub-menu-holder{left:calc(2.75em + 1px);height:24.5em}#menu .menu-item:nth-of-type(4):hover~#sub-menu-container #sub-menu-holder{left:calc(19em + 1px)}.menu-item .sub-menu{position:absolute;top:3.5em;color:rgba(0,0,0,.5);border-radius:10px;background-color:#fff;min-width:27.5em;pointer-events:none;box-sizing:border-box;z-index:999;margin-left:-5em;-webkit-clip-path:inset(0 7em 10em 15em);clip-path:inset(0 7em 10em 15em);border:1px solid #eee;opacity:0;font-weight:400;padding:1em;transition:all .25s ease-out,opacity .25s ease-in,margin-left .25s ease-out,-webkit-clip-path .15s ease-out;transition:all .25s ease-out,opacity .25s ease-in,margin-left .25s ease-out,clip-path .15s ease-out;transition:all .25s ease-out,opacity .25s ease-in,margin-left .25s ease-out,clip-path .15s ease-out,-webkit-clip-path .15s ease-out}.menu-item:hover .sub-menu{pointer-events:all;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);opacity:1;margin-left:0}.has-sub-menu:after{transition:bottom .25s ease-out,opacity .01s ease-out .01s;opacity:0;content:"";position:absolute;pointer-events:none;bottom:-1em;left:calc(50% - 10px);border:10px solid transparent;border-bottom-color:red}.no-pointer:hover{cursor:default!important}.menu-item:hover .menu-text:after{bottom:0;opacity:1;transition:bottom .25s ease-out,opacity .01s ease-out .15s}.menu-item:hover~#sub-menu-container #sub-menu-holder{transition:transform .25s ease-out,opacity .25s ease-out,-webkit-clip-path .25s ease-out;transition:transform .25s ease-out,opacity .25s ease-out,clip-path .25s ease-out;transition:transform .25s ease-out,opacity .25s ease-out,clip-path .25s ease-out,-webkit-clip-path .25s ease-out}@keyframes clipPath{0%{opacity:0}to{transform:rotateX(0deg) scale(1);top:1em;opacity:1}}.menu-item .title{font-weight:500;color:#2c4656;margin:0 0 .25em;display:flex;align-items:center}.menu-item .title-text{padding-left:8px}.menu-item .icon-box *{transition:all .1s ease-out;position:relative}.menu-item .icon,.menu-item .text{float:left;color:#9ea9af}.menu-item .icon-box{cursor:pointer;float:left;width:100%;margin:0;padding:8px;row-gap:0;line-height:1em}.menu-item .icon-box .text i{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);font-size:.75em;position:relative;top:-1px}.icon-box.gb .icon i:before{background:linear-gradient(45deg,#0c86ef,#0cef9b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding-left:1px}.icon-box.gb.a .icon i:before{background-image:linear-gradient(45deg,#2ca7ff 35%,#31d078 75%)}.icon-box.gb.b .icon i:before{background-image:linear-gradient(45deg,#f32b2b 35%,#efbe0c 75%)}.icon-box.gb.c .icon i:before{background-image:linear-gradient(45deg,#7176ff 35%,#b26cea 75%)}.icon-box.gb.d .icon i:before{background-image:linear-gradient(45deg,#79c76f 35%,#bed09b 75%)}.icon-box.gb.e .icon i:before{background-image:linear-gradient(45deg,#6082ff 35%,#ff5dbe 75%)}.icon-box.gb.f .icon i:before{background-image:linear-gradient(45deg,grey 35%,#bbb 75%)}.menu-item .icon-box:hover .text i{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);transition:-webkit-clip-path .1s ease-out;transition:clip-path .1s ease-out;transition:clip-path .1s ease-out,-webkit-clip-path .1s ease-out}.menu-item .icon-box:hover{background-color:#f8d8d8}.menu-item .icon-box:hover .icon,.menu-item .icon-box:hover .sub-text,.menu-item .icon-box:hover .title{color:#596e7b}#sub-menu-bottom{background:#d4e3ea70;position:absolute;bottom:0;opacity:0;transition:all .25s ease-out,height .1s ease-out;left:0;width:100%;height:5em}#menu .menu-item:nth-of-type(3).highlight:hover~#sub-menu-container #sub-menu-holder #sub-menu-bottom{height:7.5em}.bottom-container{grid-area:4/-3/4/3;padding-top:1.5em;color:#3a5260;font-weight:500}.top-container{grid-area:1/-3/1/3;margin:0 0 2em}.bottom-container a{float:right;background:linear-gradient(90deg,#8ea4b166,#a3b5bf6b);padding:.5em 1em;border-radius:100px;position:absolute;color:#2c4655bf;font-weight:700;text-decoration:none;right:1.5em;bottom:1.5em}.bottom-container a:hover{background:linear-gradient(90deg,#8ea4b136,#a3b5bf33)}.sub-menu h3{font-size:1em;text-transform:uppercase;letter-spacing:.5px;color:rgba(44,70,86,.68);margin:.75em 0}.sub-menu .box a{width:100%;float:left;font-size:1em;line-height:1.75em;color:#7a8a94;text-decoration:none}.sub-menu .box a:hover{color:#2c4656}.box{margin:0 0 3em}.icon.big i{font-size:1.25em;top:.2em}#menu .menu-item.highlight:hover~#sub-menu-container #sub-menu-holder #sub-menu-bottom{opacity:1}#info-box{position:absolute;bottom:2em;right:2em}#info-box ul{list-style:none}#info-box a{color:#fff;text-decoration:none;text-align:right;padding:.5em 0;transition:all .1s ease-out;display:block;text-transform:uppercase;font-size:1.25em;font-weight:900;letter-spacing:1px}#info-box a:hover{color:hsla(0,0%,100%,.5)}