.menu,.menu ul{list-style:none;margin:0;padding:0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}
.menu{height:8vw}
.menu li{background:#252525}

.menu > li{display:block;position:absolute;left:var(--left);top:0;width:var(--width);height:var(--height)}
.menu > li:first-child{border-radius:.416vw 0 0}
.menu > li .submenu li:last-child{left:0}

.menu li > .submenu li:first-child,.menu li:hover:first-child,
.menu li:hover > .submenu li:first-child,.menu .submenu li:hover:first-child a{margin-left:0;border:none}

.menu > li a{display:block;left:40%;color:#808080;font-family:'Lucida Console';font-size:1.5vw;height:var(--height);text-decoration:none;text-transform:uppercase;-webkit-transition:.5s,-webkit-transform .5s;-moz-transition:.5s,-moz-transform .5s;-o-transition:.5s,-o-transform .5s;transition:.5s,transform .5s}

.submenu{--subTrY:-5vw;--subTrZ:-10000vw;--subRoX:-90deg;position:relative;max-height:0;top:100%;margin-top:-5vw;opacity:0;z-index:-1;-webkit-transform:translateY(var(--subTrZ)) translateZ(var(--subTrZ)) rotateX(var(--subRoX));-moz-transform:translateY(var(--subTrY)) translateZ(-10000px) rotateX(var(--subRoX));-ms-transform:translateY(var(--subTrY)) translateZ(-10000px) rotateX(var(--subRoX));-o-transform:translateY(var(--subTrY)) translateZ(-10000px) rotateX(var(--subRoX));transform:translateY(var(--subTrY)) translateZ(-10000px) rotateX(var(--subRoX));-webkit-perspective:33.3vw;-moz-perspective:33.3vw;-ms-perspective:33.3vw;-o-perspective:33.3vw;perspective:33.3vw;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}
.submenu li:nth-child(odd){--liTrX:8.5vw;--liRoX:180deg;--liRoY:90deg}
.submenu li:nth-child(even){--liTrX:8.5vw;--liRoX:-90deg;--liRoY:90deg}
.submenu li{position:relative;top:var(--top);left:var(--left);margin-top:var(--mTop);margin-left:var(--mLeft);z-index:auto;-webkit-transform:translateX(var(--liTrX)) translateZ(-400vw) rotateX(var(--liRoX)) rotateY(var(--liRoY)) rotateZ(90deg);-moz-transform:translateX(var(--liTrX)) translateZ(-400vw) rotateX(var(--liRoX)) rotateY(var(--liRoY)) rotateZ(90deg);-ms-transform:translateX(var(--liTrX)) translateZ(-400vw) rotateX(var(--liRoX)) rotateY(var(--liRoY)) rotateZ(90deg);-o-transform:translateX(var(--liTrX)) translateZ(-400vw) rotateX(var(--liRoX)) rotateY(var(--liRoY)) rotateZ(90deg);transform:translateX(var(--liTrX)) translateZ(-400vw) rotateX(var(--liRoX)) rotateY(var(--liRoY)) rotateZ(90deg);-webkit-transition:5s,-webkit-transform .5s;-moz-transition:5s,-moz-transform .5s;-o-transition:5s,-o-transform .5s;transition:5s,transform .5s;-webkit-transition-delay:var(--dlay);-moz-transition-delay:var(--dlay);-o-transition-delay:var(--dlay);transition-delay:var(--dlay)}
.submenu li a{display:block;position:absolute;background:blue;left:var(--left);width:var(--width);height:var(--height);color:#808080;font-family:'Lucida Console';font-size:1.5vw;text-decoration:none;text-transform:uppercase;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s}
.submenu li:first-child a,.submenu li:last-child a{-webkit-transition:.500s;-moz-transition:.500s;-o-transition:.500s;transition:.500s}

.submenu li > .div{--top:1.25vw;--leftForce:5.75vw;position:absolute;top:var(--top);left:var(--leftForce);-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}
.submenu li:nth-child(odd) > div{--leftForce:-.5vw}
.light{display:block;position:relative;cursor:pointer}
.saber{box-shadow:.25vw 0 .25vw .05vw rgba(255,255,255,1)}
.light .saber{--BoR:2.25vw solid #fff;--BoL:.55vw solid #d6d6d6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;display:block;width:3vw;height:.25vw;margin:.15vw;border-right:var(--BoR);border-left:var(--BoL);-webkit-transform:rotateY(var(--lightR)) scale(var(--scale));-moz-transform:rotateY(var(--lightR)) scale(var(--scale));-ms-transform:rotateY(var(--lightR)) scale(var(--scale));-o-transform:rotateY(var(--lightR)) scale(var(--scale));transform:rotateY(var(--lightR)) scale(var(--scale));-webkit-transition-property:height,margin,border-right-color,box-shadow,border-top-right-radius,border-bottom-right-radius,-webkit-transform;-moz-transition-property:height,margin,border-right-color,box-shadow,border-top-right-radius,border-bottom-right-radius,-moz-transform;-o-transition-property:height,margin,border-right-color,box-shadow,border-top-right-radius,border-bottom-right-radius,-o-transform;transition-property:height,margin,border-right-color,box-shadow,border-top-right-radius,border-bottom-right-radius,transform;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;transition-duration:4s}
.light .saber:nth-of-type(3){-webkit-transition:1.5s;-moz-transition:1.5s;-o-transition:1.5s;transition:1.5s}

/*margin-top:var(--MT);*/
.pushed .saber{left:5vw;height:.15vw;margin-left:var(--ML);border-left-color:var(--BLC);border-right-color:var(--BRC);box-shadow:var(--BS);border-top-right-radius:50%;border-bottom-right-radius:50%;-webkit-transform:rotateX(var(--TRoX)) rotateY(var(--TRoY)) rotateZ(var(--TRoZ)) translateX(var(--TrX)) translateY(var(--TrY)) scale(var(--scale2));-moz-transform:rotateX(var(--TRoX)) rotateY(var(--TRoY)) rotateZ(var(--TRoZ)) translateX(var(--TrX)) translateY(var(--TrY)) scale(var(--scale2));-ms-transform:rotateX(var(--TRoX)) rotateY(var(--TRoY)) rotateZ(var(--TRoZ)) translateX(var(--TrX)) translateY(var(--TrY)) scale(var(--scale2));-o-transform:rotateX(var(--TRoX)) rotateY(var(--TRoY)) rotateZ(var(--TRoZ)) translateX(var(--TrX)) translateY(var(--TrY)) scale(var(--scale2));transform:rotateX(var(--TRoX)) rotateY(var(--TRoY)) rotateZ(var(--TRoZ)) translateX(var(--TrX)) translateY(var(--TrY)) scale(var(--scale2))}
.pushed .saber:nth-of-type(3){opacity:0}

.menu li:hover{background:#1b1b1b}
/* Note: use/create origin of first-child and last-child":hover to make rotating Marquee like Welcome to and Enjoy*/
.menu li:hover > .submenu li:first-child:hover a,.menu li:hover > .submenu li:last-child:hover a{background:orange;left:var(--left);height:0}

/*.menu li:hover > .submenu li:hover a --- .grow*/ 
.menu li:hover > .submenu li:hover a{background:violet;left:-3.75vw;width:17vw;height:var(--Height);color:#C4302B;border-radius:.416vw 0 0 0}
.menu li:hover > .submenu li:nth-child(odd):hover a{left:-1vw}

.menu li:hover > .submenu li:hover > .div{--top:calc(var(--divTop) + 2vw);--leftForce:8.75vw}
.menu li:hover > .submenu li:nth-child(odd):hover > div{--leftForce:.1vw}
.menu > li:hover .submenu,.menu > li:focus .submenu{--subTrY:0vw;--subTrZ:0vw;--subRoX:0deg;margin-top:-.1vw;opacity:1}

.menu > li:hover .submenu li,.menu > li:focus .submenu li{--subRoX:0deg;pointer-events:all;top:5vw;margin-left:var(--mLeft);opacity:1;-webkit-transform:translateX(0) translateY(0) translateZ(10vw) rotateY(var(--subTran));-moz-transform:translateX(0) translateY(0) translateZ(10vw) rotateY(var(--subTran));-ms-transform:translateX(0) translateY(0) translateZ(10vw) rotateY(var(--subTran));-o-transform:translateX(0) translateY(0) translateZ(10vw) rotateY(var(--subTran));transform:translateX(0) translateY(0) translateZ(10vw) rotateY(var(--subTran));-webkit-transition:var(--dlay1) var(--dlay2);-moz-transition:var(--dlay1) var(--dlay2);-o-transition:var(--dlay1) var(--dlay2);transition:var(--dlay1) var(--dlay2);-webkit-transition-delay:var(--Dlay);-moz-transition-delay:var(--Dlay);-o-transition-delay:var(--Dlay);transition-delay:var(--Dlay)}
.menu > li:hover .submenu li,.menu > li:focus .submenu li{top:var(--hTop)}
.menu > li:hover .submenu li:hover,.menu > li:focus .submenu li:hover{pointer-events:all;margin-left:var(--mLeft2);width:var(--width);height:auto;z-index:1;-webkit-transform:translateX(var(--tranX)) translateY(var(--tranY)) translateZ(var(--tranZ)) rotateY(var(--liTran));-moz-transform:translateX(var(--tranX)) translateY(var(--tranY)) translateZ(var(--tranZ)) rotateY(var(--liTran));-ms-transform:translateX(var(--tranX)) translateY(var(--tranY)) translateZ(var(--tranZ)) rotateY(var(--liTran));-o-transform:translateX(var(--tranX)) translateY(var(--tranY)) translateZ(var(--tranZ)) rotateY(var(--liTran));transform:translateX(var(--tranX)) translateY(var(--tranY)) translateZ(var(--tranZ)) rotateY(var(--liTran))}
.menu > li:hover .submenu li:last-child:hover,.menu > li:focus .submenu li:last-child:hover{top:var(--hTop2)}
/*
.menu > li:hover .submenu li:hover ~ .submenu li:nth-child(1) ~ .submenu li:nth-child(3) ~ .submenu li:nth-child(5){}
.submenu li:last-child:hover a{height:var(--height);color:#fff;border:none;border-radius:0}*/
.submenu li:hover .theForce{top:1vw;left:5vw}
/*.menu li:hover .submenu li{-webkit-transition-delay:var(--Dlay);-moz-transition-delay:var(--Dlay);-o-transition-delay:var(--Dlay);transition-delay:var(--Dlay)}*/