:root{--leftTranX:0deg;--leftTranY:90deg;}

*{margin:0;padding:0}
/* check */
body{font:1.6vw/1.3 Arial,sans-serif;background-color:#212121}
/* check url('menu_bg.png') *//**/
ul *{list-style:none outside none}

#nav li,#nav > li,#nav li div,.meXt,#lavalamp,#lavalamp li,#lavalamp div,#lavalamp div img,#nav > li ul li,#nav > li ~ #lavalamp,
#nav > li ~ #lavalamp div,#nav > li ~ #lavalamp div a,#nav > li ~ #lavalamp div img,#nav > li ~ #lavalamp div .img,#nav > li:hover ~ #lavalamp,#nav > li ~ #lavalamp:hover,
#nav > li:hover ~ #lavalamp div,#nav > li:hover ~ #lavalamp div a,#nav > li:hover ~ #lavalamp div img{
position:absolute}

#nav{overflow:visible;display:flex;position:relative;background:transparent repeat scroll 0 0;background-size:100% 100%;left:7.5vw;top:3vw;width:85vw;height:auto;clear:both;font-size:223%;text-align:center;align-items:center;justify-content:center}

#nav li ul li,#nav > li,#nav > li div,.animate{-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}

#nav > li{display:block;background:none no-repeat scroll right .07vw;left:var(--left);top:1vw;width:14vw;height:6vw;float:left;padding:0 2vw 0 1.25vw}

     /* try this one in the morning for fadeIn *//* height:2.25vw; controls height of chit *//* padding:3vw 2.75vw 0; position of words and chit 'fat and tall' or 'accordian' */
#nav > li div{left:var(--left);top:0;height:3vw;color:red;font-weight:normal;padding:0 0 0;z-index:1}
#nav div img{--noneOp:0.0}
#nav div .img{--noneOp:1.0;--leftTranX:180deg}

#nav li:nth-child(1) div{}
#nav li:nth-child(2) div{}
#nav li:nth-child(3) div{}
#nav li:nth-child(4) div{}
#nav li:nth-child(5) div{}

#nav li ul li{display:block;background:transparent;left:var(--left);top:-1vw;width:var(--width);height:10vw;float:left;box-shadow:var(--boxShad);z-index:auto}

#nav li:nth-child(1) ul li{--mColor:blue}
#nav li:nth-child(2) ul li{--mColor:yellow}
#nav li:nth-child(3) ul li{--mColor:green}
#nav li:nth-child(4) ul li{--mColor:red}
#nav li:nth-child(5) ul li{--mColor:gray}

#nav > li ~ #lavalamp div{--lampTD:1s;left:var(--left);color:var(--mColor);z-index:-1;-webkit-transition:var(--lampTD);-moz-transition:var(--lampTD);-o-transition:var(--lampTD);transition:var(--lampTD)}
#nav > li ~ #lavalamp div a{opacity:0}
#nav > li ~ #lavalamp div img{--noneOp:1.0;--lampTD:1s;left:-10vw;top:10vw;width:6vw;height:4vw;-webkit-transform:rotateX(var(--leftTranX)) rotateY(var(--leftTranY));-moz-transform:rotateX(var(--leftTranX)) rotateY(var(--leftTranY));-ms-transform:rotateX(var(--leftTranX)) rotateY(var(--leftTranY));-o-transform:rotateX(var(--leftTranX)) rotateY(var(--leftTranY));transform:rotateX(var(--leftTranX)) rotateY(var(--leftTranY));-webkit-transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s;-moz-transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s;-o-transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s;transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s}
#nav > li ~ #lavalamp div .img{--left:-5vw;--noneOp:1.0;--lampTD:1s;background:url('lavalamp.png') no-repeat scroll 0 0;left:var(--left);top:9vw;width:6vw;height:4vw;-webkit-transform:rotateX(var(--leftTranX));-moz-transform:rotateX(var(--leftTranX));-ms-transform:rotateX(var(--leftTranX));-o-transform:rotateX(var(--leftTranX));transform:rotateX(var(--leftTranX));-webkit-transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s;-moz-transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s;-o-transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s;transition:var(--lampTD) cubic-bezier(.01,1,.24,1),left .75s,top .5s .25s,transform .5s;-webkit-transition-delay:200ms;-moz-transition-delay:200ms;-o-transition-delay:200ms;transition-delay:200ms}
#nav > li:hover div{top:-4vw}
#nav > li:hover ~ #lavalamp li{--mColor:lightgreen}
#nav > li:hover ~ #lavalamp ul li{background:purple;box-shadow:var(--boxShad);outline:0 none}

#nav > li:nth-child(n):hover ~ #lavalamp div{opacity:1;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}
#nav > li:nth-child(1):hover ~ #lavalamp div{left:2.5vw}
#nav > li:nth-child(2):hover ~ #lavalamp div{left:2vw}
#nav > li:nth-child(3):hover ~ #lavalamp div{left:.5vw}
#nav > li:nth-child(4):hover ~ #lavalamp div{left:.5vw}
#nav > li:nth-child(5):hover ~ #lavalamp div{left:.5vw}
/* ,#nav a:focus,#nav a:hover,#nav a:active 
#nav > li:nth-child(1):hover ~ #lavalamp ~ div{left:-40vw}
#nav > li:nth-child(2):hover ~ #lavalamp ~ div{left:-22.25vw}
#nav > li:nth-child(3):hover ~ #lavalamp ~ div{left:-5vw}
#nav > li:nth-child(4):hover ~ #lavalamp ~ div{left:11.5vw}
#nav > li:nth-child(5):hover ~ #lavalamp ~ div{left:27.5vw}*/

#nav > li:nth-child(n):hover #lavalamp div a{left:var(--left)}
/*
#nav > li:nth-child(1):hover #lavalamp div a{--left:-45vw}
#nav > li:hover ~ #lavalamp div a{--lampTD:1s;opacity:0}

#nav > li:nth-child(2):hover #lavalamp div a{--left:-22.25vw}
#nav > li:nth-child(3):hover #lavalamp div a{--left:-5vw}
#nav > li:nth-child(4):hover #lavalamp div a{--left:10vw}
#nav > li:nth-child(5):hover #lavalamp div a{--left:20vw}
*/
/*
#nav > li:not(hover) ~ #lavalamp div a{display:none}
#nav > li:nth-child(1):hover ul li{top:2vw}
#nav > li:nth-child(2):hover ul li{top:2vw}
#nav > li:nth-child(3):hover ul li{top:2vw}
#nav > li:nth-child(4):hover ul li{top:2vw}
#nav > li:nth-child(5):hover ul li{top:2vw}
*/
#nav > li:nth-child(n):hover ~ #lavalamp div img{--noneOp:1.0;top:-2vw;width:16vw;height:16vw;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}

#nav > li:nth-child(1):hover ~ #lavalamp div img{--lampTD:750ms;--leftTranY:-720deg;left:-45.9vw}
#nav > li:nth-child(2):hover ~ #lavalamp div img{--lampTD:825ms;--leftTranY:-360deg;left:-29.5vw}
#nav > li:nth-child(3):hover ~ #lavalamp div img{--lampTD:900ms;--leftTranY:0deg;left:-11vw}
#nav > li:nth-child(4):hover ~ #lavalamp div img{--lampTD:825ms;--leftTranY:360deg;left:5.9vw}
#nav > li:nth-child(5):hover ~ #lavalamp div img{--lampTD:750ms;--leftTranY:-180deg;left:22vw}

#nav > li:nth-child(n):hover ~ #lavalamp div .img{--leftTranX:0deg;--noneOp:1.0;top:-2vw;width:16vw;height:16vw}

#nav > li:nth-child(1):hover ~ #lavalamp div .img{left:-42.25vw}
#nav > li:nth-child(2):hover ~ #lavalamp div .img{left:-25.25vw}
#nav > li:nth-child(3):hover ~ #lavalamp div .img{left:-5vw}
#nav > li:nth-child(4):hover ~ #lavalamp div .img{left:13.25vw}
#nav > li:nth-child(5):hover ~ #lavalamp div .img{left:29vw}

#nav > li:hover ~ #lavalamp div img:hover{background:white}

.animate{--aniY:1vw;opacity:1;-webkit-transform:translateY(var(--aniY));-moz-transform:translateY(var(--aniY));-ms-transform:translateY(var(--aniY));-o-transform:translateY(var(--aniY));transform:translateY(var(--aniY))}
.footer{position:fixed;background:#000;left:0;right:0;bottom:0;padding:.83vw .83vw;color:#fff;font-size:90%;text-transform:uppercase}

/*
#nav ul{position:absolute;background-color:none;left:900vw;z-index:2;-webkit-transform:scaleY(0);-moz-transform:scaleY(0);-o-transform:scaleY(0);transform:scaleY(0)}

#nav ul li{display:none;background:blue;width:100%}
#nav ul li a{background:blue;float:none;width:100%}

#nav li:hover ul.subs{left:-46%;top:3.2vw;width:8vw;-webkit-transform:scaleY(1);-moz-transform:scaleY(1);-ms-transform:scaleY(1);-o-transform:scaleY(1);transform:scaleY(1)}

#nav ul li:hover > a{background-color:#121212;color:#00B4FF;opacity:.2}
*/