/*  ------------- flipWINDOW / NAVBAR ------------  */

/* @keyframes name | duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state 

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state */

ul,#navbar{overflow:visible;list-style:none outside none;margin:0 auto;padding:0 0 0}

#navbar{position:relative;background:url('./css/menu_bg.png') no-repeat scroll 0 0 transparent;background-size:100% 100%;width:var(--navwidth);height:var(--navheight);margin-top:2.5%;margin-bottom:15%;clear:both}/*z-index:-2; margin-left:10%;*/

ul > ul{
position:absolute;
background-color:#222;/*width: 100%;*/
/* height:var(--navheight); */
left:-20vw; /* 900vw 2vh */
border:0.075vw solid #222;
border-radius:0%;
border-width:0 .1vw .1vw;
-webkit-box-shadow:0 .15vw .15vw rgba(0,0,0,.5);
-moz-box-shadow:0 .15vw .15vw rgba(0,0,0,.5);
-ms-box-shadow:0 .15vw .15vw rgba(0,0,0,.5);
-o-box-shadow:0 .15vw .15vw rgba(0,0,0,.5);
box-shadow:0 .15vw .15vw rgba(0,0,0,.5);
-webkit-transform:scaleY(0);
-moz-transform:scaleY(0);
-ms-transform:scaleY(0);
-o-transform:scaleY(0);
transform:scaleY(0)}
/*z-index:-1;*/
 
/*
  toggle this: z-index: 1;

use this below to possibly flip menu line into existence: 
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;

  -webkit-transition: -webkit-transform 0.1s linear;
  -moz-transition: -moz-transform 0.1s linear;
  -ms-transition: -ms-transform 0.1s linear;
  -o-transition: -o-transform 0.1s linear;
  transition: transform 0.1s linear;
*/

#navbar > li{position:relative;background:url('./css/menu_line.png') no-repeat scroll right .2vw rgba(0,0,0,0);float:left;top:0;border-radius:50%;margin-left:0;padding: 0 0 .25vw} /* top:-.25vh move all up-down ... margin-left:move all L-R .55vw ... padding: .6vw 1st - up/down in navbar (down is away from arrow) ... 2nd - width of lateral invis bubble(will push children aside!!! ... 3rd - height of chit messes with invisible 'before folding' chit ... will upper corner cut words if much larger */

#navbar > li:nth-of-type(1){overflow:hidden;visibility:hidden;display:none;pointer-events:none;opacity:0}

/* controls fancy most back chit 2-5 */
#navbar > li:nth-of-type(2):hover,#navbar > li:nth-of-type(3):hover,#navbar > li:nth-of-type(4):hover,#navbar > li:nth-of-type(5):hover,#navbar > li:nth-of-type(6):hover{overflow:visible;display:block;outline:0 none;height:100%;-webkit-animation:fadeIn 400ms ease-in-out;-moz-animation:fadeIn 400ms ease-in-out;-ms-animation:fadeIn 400ms ease-in-out;-o-animation:fadeIn 400ms ease-in-out;animation:fadeIn 400ms ease-in-out}/*height:175%;z-index:auto*//* must be 'overflow:visible' for bubble to fully show otherwise it only shows half */

#navbar > li:nth-of-type(2):hover,#navbar > li:nth-of-type(3):hover{-webkit-background:linear-gradient(45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);-moz-background:linear-gradient(45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);-ms-background:linear-gradient(45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);-o-background:linear-gradient(45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);background:linear-gradient(45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%); border-radius:50%;border-top-left-radius:0;border-top-right-radius:50%}/* controls bg gradient of chit*/

/* controls chit shadow */
#navbar > li:nth-of-type(2):hover{width:8.505vw;-webkit-box-shadow:-.48vw .48vw .25vw .25vw #000000;-moz-box-shadow:-.48vw .48vw .25vw .25vw #000000;-ms-box-shadow:-.48vw .48vw .25vw .25vw #000000;-o-box-shadow:-.48vw .48vw .25vw .25vw #000000;box-shadow:-.48vw .48vw .25vw .25vw #000000;}

#navbar > li:nth-of-type(3):hover{width:8.725vw;-webkit-box-shadow:-.24vw .24vw .25vw .25vw #000000;-moz-box-shadow:-.24vw .24vw .25vw .25vw #000000;-ms-box-shadow:-.24vw .24vw .25vw .25vw #000000;-o-box-shadow:-.24vw .24vw .25vw .25vw #000000;box-shadow:-.24vw .24vw .25vw .25vw #000000}

#navbar > li:nth-of-type(4):hover{
-webkit-background:linear-gradient(-45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);
-moz-background:linear-gradient(-45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);
-ms-background:linear-gradient(-45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);
-o-background:linear-gradient(-45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%);
background:linear-gradient(-45deg,rgba(2,0,36,1) 0%,rgba(2,0,36,1) 10%,rgba(0,180,255,0) 100%); /* controls bg gradient of chit*/
-webkit-box-shadow:0 0 0.35vw 0.35vw #000000;
-moz-box-shadow:0 0 0.35vw 0.35vw #000000;
-ms-box-shadow:0 0 0.35vw 0.35vw #000000;
-o-box-shadow:0 0 0.35vw 0.35vw #000000;
box-shadow:0 0 0.35vw 0.35vw #000000;
border-radius:50%;
border-top-left-radius:0;
border-top-right-radius:0}

#navbar > li:nth-of-type(5):hover,#navbar > li:nth-of-type(6):hover{-webkit-background:linear-gradient(-45deg,rgba(0,180,255,0) 0%,rgba(2,0,36,1) 10%,rgba(2,0,36,1) 100%);-moz-background:linear-gradient(-45deg,rgba(0,180,255,0) 0%,rgba(2,0,36,1) 10%,rgba(2,0,36,1) 100%);-ms-background:linear-gradient(-45deg,rgba(0,180,255,0) 0%,rgba(2,0,36,1) 10%,rgba(2,0,36,1) 100%);-o-background:linear-gradient(-45deg,rgba(0,180,255,0) 0%,rgba(2,0,36,1) 10%,rgba(2,0,36,1) 100%);background:linear-gradient(-45deg,rgba(0,180,255,0) 0%,rgba(2,0,36,1) 10%,rgba(2,0,36,1) 100%);border-radius:50%;border-top-left-radius:50%;border-top-right-radius:0}/* controls bg gradient of chit*/

#navbar > li:nth-of-type(5):hover{width:8.72vw;-webkit-box-shadow:.24vw .24vw .25vw .25vw #000000;-moz-box-shadow:.24vw .24vw .25vw .25vw #000000;-ms-box-shadow:.24vw .24vw .25vw .25vw #000000;-o-box-shadow:.24vw .24vw .25vw .25vw #000000;box-shadow:.24vw .24vw .25vw .25vw #000000}

/* switch upper chit corner with added border-radius stuff here on -type(6):hover */
#navbar > li:nth-of-type(6):hover{-webkit-box-shadow:.48vw .48vw .25vw .25vw #000000;-moz-box-shadow:.48vw .48vw .25vw .25vw #000000;-ms-box-shadow:.48vw .48vw .25vw .25vw #000000;-o-box-shadow:.48vw .48vw .25vw .25vw #000000;box-shadow:.48vw .48vw .25vw .25vw #000000}

#navbar > li:nth-of-type(2):not(:hover),#navbar > li:nth-of-type(3):not(:hover),#navbar > li:nth-of-type(4):not(:hover),#navbar > li:nth-of-type(5):not(:hover),#navbar > li:nth-of-type(6):not(:hover){overflow:visible;border-radius:50%}

/* controls round-ness, padding, text, shadow of bubble and ... ONLY font size */
/* 1 position of words 2 'accordian' or 3 position of bubble 'fat and tall' - true - use imagination self! :) */
#navbar > li a{
overflow:hidden; /* visible shows 'grazing' bubbles */
position:relative;
display:inline-block;
float:left;
border-radius:50%;
top:0;
padding:.6vw .25vw 1.6vw; /* helps to center words in black bubble ... too much 1st padding corner arcs words */
color:white;
font-weight:bold;
font-size:1.5vw;
font-family:Georgia,serif;
text-decoration:none;
/*-webkit-clip-path:ellipse(55% 55% at 50% 50%);-moz-clip-path:ellipse(55% 55% at 50% 50%);-ms-clip-path:ellipse(55% 55% at 50% 50%);-o-clip-path:ellipse(55% 55% at 50% 50%);clip-path:ellipse(55% 55% at 50% 50%);
*/
-webkit-animation:fadeIn 1000ms ease-in-out;
-moz-animation:fadeIn 1000ms ease-in-out;
-ms-animation:fadeIn 1000ms ease-in-out;
-o-animation:fadeIn 1000ms ease-in-out;
animation:fadeIn 1000ms ease-in-out}

/* controls the showing of black pallette 'a' chit 
#navbar li:nth-of-type(2):hover a,#navbar li:nth-of-type(2):not(:hover) a{
  } */

/* bubble grow and new text color #00B4FF 2-5 */
#navbar > li:hover :first-child a{
display:inline-block;
overflow:hidden; /* hidden shows grazing bubbles */
-webkit-background:none repeat scroll 0 0 #000000;
-moz-background:none repeat scroll 0 0 #000000;
-ms-background:none repeat scroll 0 0 #000000;
-o-background:none repeat scroll 0 0 #000000;
background:none repeat scroll 0 0 #000000; /*controls bg color of bubble */
-webkit-background-image:url('./smoke.mp4');
-moz-background-image:url('./smoke.mp4');
-ms-background-image:url('./smoke.mp4');
-o-background-image:url('./smoke.mp4');
background-image:url('./smoke.mp4'); /* http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2 controls bg img of bubble */
background-size:100% 100%;
color:#00B4FF;
text-shadow:.075vw .075vw 0vw #FFFFFF;
border-radius:50%;/*
-webkit-clip-path:ellipse(50% 50% at 50% 50%);-moz-clip-path:ellipse(50% 50% at 50% 50%);-ms-clip-path:ellipse(50% 50% at 50% 50%);-o-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%);
*/
-webkit-animation:bubblegrow 850ms ease-in-out; 
-moz-animation:bubblegrow 850ms ease-in-out;
-ms-animation:bubblegrow 850ms ease-in-out;
-o-animation:bubblegrow 850ms ease-in-out;
animation:bubblegrow 850ms ease-in-out}/*,shadowmovement 500ms ease-in-out*/

#navbar > li:nth-of-type(1):hover a{overflow:hidden;visibility:hidden;display:none;pointer-events:none;opacity:0}

#navbar > li:nth-of-type(6):hover :first-child a{color:red;text-shadow:0 0 0;/*-webkit-clip-path:ellipse(50% 50% at 50% 50%);-moz-clip-path:ellipse(50% 50% at 50% 50%);-ms-clip-path:ellipse(50% 50% at 50% 50%);-o-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)*/} /* --------------------------------------- */

/* to upward left cloud Stuff ,#navbar li:not(:hover) a::after */
#navbar > li :first-child a::after{
overflow:hidden;
display:inline-block;
position:absolute;
-webkit-background-image:linear-gradient(135deg,rgba(2,0,36,0.1),rgba(255,255,255,1),rgba(2,0,36,1));
-moz-background-image:linear-gradient(135deg,rgba(2,0,36,0.1),rgba(255,255,255,1),rgba(2,0,36,1));
-ms-background-image:linear-gradient(135deg,rgba(2,0,36,0.1),rgba(255,255,255,1),rgba(2,0,36,1));
-o-background-image:linear-gradient(135deg,rgba(2,0,36,0.1),rgba(255,255,255,1),rgba(2,0,36,1));
background-image:linear-gradient(135deg,rgba(2,0,36,0.1),rgba(255,255,255,1),rgba(2,0,36,1));
content:"";
width:175%;
height:175%;
top:-160%;
left:-160%;
border-radius:50%; /* 0% Square Corners */
-webkit-box-shadow:0 0 .5vw .5vw rgba(0,0,0,.75),inset 0 0 .5vw .5vw rgba(0,0,0,1);
-moz-box-shadow:0 0 .5vw .5vw rgba(0,0,0,.75),inset 0 0 .5vw .5vw rgba(0,0,0,1);
-ms-box-shadow:0 0 .5vw .5vw rgba(0,0,0,.75),inset 0 0 .5vw .5vw rgba(0,0,0,1);
-o-box-shadow:0 0 .5vw .5vw rgba(0,0,0,.75),inset 0 0 .5vw .5vw rgba(0,0,0,1);
box-shadow:0 0 .5vw .5vw rgba(0,0,0,.75),inset 0 0 .5vw .5vw rgba(0,0,0,1);
-webkit-transition:all 750ms ease-out;
-moz-transition:all 750ms ease-out;
/*-ms-transition:all 7500ms ease-out;*/
-o-transition:all 750ms ease-out;
transition:all 750ms ease-out;
opacity:1}

/* to upward left cloud Stuff */
#navbar li:not(:hover) :first-child a::after{overflow:hidden;display:inline-block;border-radius:50%;left:70%;top:70%;opacity:0;-webkit-clip-path:ellipse(55% 55% at 50% 50%);-moz-clip-path:ellipse(55% 55% at 50% 50%);-ms-clip-path:ellipse(55% 55% at 50% 50%);-o-clip-path:ellipse(55% 55% at 50% 50%);clip-path:ellipse(55% 55% at 50% 50%);
}

.navbarbubble{overflow:visible;display:block;position:relative;border-radius:50%;height:4.5vw;color:white;font-family:Georgia,serif;padding:.7vw .7vw 0;} /* ABSOLUITELY no clip-path .... affects, but not full control, of blue ring */

/* to lower right cloud Stuff removed:  */
.navbarbubble::before{
display:block;
position:absolute;
-webkit-background-image:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(112,66,20,0.25),rgba(0,0,0,1));
-moz-background-image:linear-gradient(135deg,rgba(255,255, 255,0.5),rgba(112,66,20,0.25),rgba(0,0,0,1));
-ms-background-image:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(112,66,20,0.25),rgba(0,0,0,1));
-o-background-image:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(112,66,20,0.25),rgba(0,0,0,1));
background-image:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(112,66,20,0.25),rgba(0,0,0,1));
border-radius:50%;
left:0;
top:0;
-webkit-transition:background 1000ms cubic-bezier(.96,.3,.99,.52) rgba(0,0,0,0);
-moz-transition:background 1000ms cubic-bezier(.96,.3,.99,.52) rgba(0,0,0,0);
/*-ms-transition:background 1000ms cubic-bezier(.96,.3,.99,.52 rgba(0,0,0,0));*/
-o-transition:background 1000ms cubic-bezier(.96,.3,.99,.52) rgba(0,0,0,0);
transition:background 1000ms cubic-bezier(.96,.3,.99,.52) rgba(0,0,0,0)/* 1s ease-out; bezier redefines words .eg. ease linear etc. */}

/*.navbarbubble:not(:hover){}
/* to lower right cloud Stuff */
.navbarbubble:hover::before{
--bubblecolorchange:#00B4FF;
overflow:visible;
/*display:inline-block;*/
content:""; /* ABSOLUTELY determines the blue bubble !!!!!!!!!! */
border-radius:50%;
width:100%;
height:100%;
left:0; /* 200% */
top:0; /* 200% */
-webkit-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-moz-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-ms-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-o-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-webkit-animation:perspectiveDown 960ms ease-in-out;
-moz-animation:perspectiveDown 960ms ease-in-out;
-ms-animation:perspectiveDown 960ms ease-in-out;
-o-animation:perspectiveDown 960ms ease-in-out;
animation:perspectiveDown 960ms ease-in-out;
}

.navbarbubble:not(:hover)::before{
--bubblecolorchange:#00B4FF;
/*display:inline-block;*/
position:absolute;
overflow:visible;
content:""; /* ABSOLUTELY determines the blue bubble !!!!!!!!!! */
border-radius:50%;
width:100%;
height:100%;
left:0; /* 200% */
top:0; /* 200% */
-webkit-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-moz-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-ms-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-o-box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
box-shadow:0 0 .2vw .2vw var(--bubblecolorchange);
-webkit-animation:perspectiveUp 1200ms ease-in-out;
-moz-animation:perspectiveUp 1200ms ease-in-out;
-ms-animation:perspectiveUp 1200ms ease-in-out;
-o-animation:perspectiveUp 1200ms ease-in-out;
animation:perspectiveUp 1200ms ease-in-out;
opacity:0}

#navbar ul li,#navbar ul a,#navbar ul a,#navbar ul a{
border-radius:0%;

}

/* determines blue halo ... somethin weird about it ... HERE and above */
#navbar ul li:hover,#navbar ul a:focus,#navbar ul a:hover,#navbar ul a:active,.navbarbubble:hover,.navbarbubble:focus,.navbarbubble:active{
overflow:visible;
display:inline-block;/* inline-block/flex shows SUBMENU backgound ... block does not */
left:0;
outline:0 none;
border-radius:0%;/* ABSOLUTELY determine SUBMENU background square/ellipse */
-webkit-animation:fadeIn 250ms ease-in-out;
-moz-animation:fadeIn 250ms ease-in-out;
-ms-animation:fadeIn 250ms ease-in-out;
-o-animation:fadeIn 250ms ease-in-out;
animation:fadeIn 250ms ease-in-out}

/* #nav li:hover,#nav a:focus,#nav a:hover,#nav a:active{
  background:none repeat scroll 0 0 #121212;
  outline:0 none;}

#navbar li:hover > a{
color:#00B4FF;} */

/* #navbar li:hover a > ul{border-radius:0%} */
#navbar > ul li{
border-radius:0%

}

#navbar > li:hover ul,#navbar > a:focus ul,#navbar > a:hover ul,#navbar > a:active ul{overflow:hidden;border-radius:0%}

/* #navbar li:hover a > ul.subs{} */
#navbar > li:hover ul.subs,#navbar > a:focus ul.sub,#navbar > a:hover ul.subs,#navbar > a:active ul.subs{
/*background:none repeat scroll 0 0 #121212;*/
left:0;
width:120%;
height:200%;
border-radius:0%;
-webkit-transform:scaleY(1);
-moz-transform:scaleY(1);
-ms-transform:scaleY(1);
-o-transform:scaleY(1);
transform:scaleY(1)}

#navbar li:not(:hover) ul.subs,#navbar a:not(:focus) ul.subs,#navbar a:not(:hover) ul.subs,#navbar a:not(:active) ul.subs{
display:none;}
	
ul#navbar > ul li{overflow:hidden;background:none;top:20vw;border-radius:0%}

ul#navbar > ul li a{overflow:hidden;border-radius:0%;width:100%;float:none}

ul#navbar > ul li:hover a{overflow:visible;background-color:#00B4FF;border-radius:0%;width:100%}/*color:#121212;*/





/* 1 position of words 2 'accordian' or 3 position of bubble 'fat and tall' - true - use imagination self! :) */
@-webkit-keyframes bubblegrow{from{padding:.6vw .25vw .75vw}to{padding:.6vw .25vw 1.6vw}}@-moz-keyframes bubblegrow{from{padding:.6vw .25vw .75vw}to{padding:.6vw .25vw 1.6vw}}@-ms-keyframes bubblegrow{from{padding:.6vw .25vw .75vw}to{padding:.6vw .25vw 1.6vw}}@-o-keyframes bubblegrow{from{padding:.6vw .25vw .75vw}to{padding:.6vw .25vw 1.6vw}}@keyframes bubblegrow{from{padding:.6vw .25vw .75vw}to{padding:.6vw .25vw 1.6vw}}

@-webkit-keyframes perspectiveDown{100%{
--bubblecolorchange:#00B4FF;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:perspective(80vw) rotateX(0deg); /*800px*/
transform:perspective(80vw) rotateX(0deg);opacity:1}0%{
--bubblecolorchange:red;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:perspective(80vw) rotateX(180deg);
transform:perspective(80vw) rotateX(180deg);opacity:1}}

@-moz-keyframes perspectiveDown{100%{
--bubblecolorchange:#00B4FF;
-moz-transform-origin:0 0;
transform-origin:0 0;
-moz-transform:perspective(80vw) rotateX(0deg);
transform:perspective(80vw) rotateX(0deg);opacity:1}0%{
--bubblecolorchange:red;
-moz-transform-origin:0 0;
transform-origin:0 0;
-moz-transform:perspective(80vw) rotateX(180deg);
transform:perspective(80vw) rotateX(180deg);opacity:1}}

@-ms-keyframes perspectiveDown{100%{
--bubblecolorchange:#00B4FF;
-ms-transform-origin:0 0;
transform-origin:0 0;
-ms-transform:perspective(80vw) rotateX(0deg);
transform:perspective(80vw) rotateX(0deg);opacity:1}0%{
--bubblecolorchange:red;
-ms-transform-origin:0 0;
transform-origin:0 0;
-ms-transform:perspective(80vw) rotateX(180deg);opacity:1}}

@-o-keyframes perspectiveDown{100%{
--bubblecolorchange:#00B4FF;
-o-transform-origin:0 0;
transform-origin:0 0;
-o-transform:perspective(80vw) rotateX(0deg);
transform:perspective(80vw) rotateX(0deg);opacity:1}0%{
--bubblecolorchange:red;
-o-transform-origin:0 0;
transform-origin:0 0;
-o-transform:perspective(80vw) rotateX(180deg);
transform:perspective(80vw) rotateX(180deg);opacity:1}}

@keyframes perspectiveDown{100%{
--bubblecolorchange:#00B4FF;
transform-origin:0 0;
transform:perspective(80vw) rotateX(0deg);opacity:1}0%{
--bubblecolorchange:red;
transform-origin:0 0;
transform:perspective(80vw) rotateX(180deg);opacity:1}}


@-webkit-keyframes perspectiveUp{0%{
--bubblecolorchange:#00B4FF;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:perspective(80vw) rotateX(0deg); /*800px*/
transform:perspective(80vw) rotateX(0deg);opacity:1}100%{/**/
--bubblecolorchange:red;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:perspective(80vw) rotateX(180deg);
transform:perspective(80vw) rotateX(180deg);opacity:0.1}}

@-moz-keyframes perspectiveUp{0%{
--bubblecolorchange:#00B4FF;
-moz-transform-origin:0 0;
transform-origin:0 0;
-moz-transform:perspective(80vw) rotateX(0deg);
transform:perspective(80vw) rotateX(0deg);opacity:1}100%{
--bubblecolorchange:red;
-moz-transform-origin:0 0;
transform-origin:0 0;
-moz-transform:perspective(80vw) rotateX(180deg);
transform:perspective(80vw) rotateX(180deg);opacity:0.1}}

@-ms-keyframes perspectiveUp{0%{
--bubblecolorchange:#00B4FF;
-ms-transform-origin:0 0;
transform-origin:0 0;
-ms-transform:perspective(80vw) rotateX(0deg);
transform:perspective(80vw) rotateX(0deg);opacity:1}100%{
--bubblecolorchange:red;
-ms-transform-origin:0 0;
transform-origin:0 0;
-ms-transform:perspective(80vw) rotateX(180deg);
transform:perspective(80vw) rotateX(180deg);opacity:0.1}}

@-o-keyframes perspectiveUp{0%{
--bubblecolorchange:#00B4FF;
-o-transform-origin:0 0;
transform-origin:0 0;
-o-transform:perspective(80vw) rotateX(0deg);
transform:perspective(80vw) rotateX(0deg);opacity:1}100%{
--bubblecolorchange:red;
-o-transform-origin:0 0;
transform-origin:0 0;
-o-transform:perspective(80vw) rotateX(180deg);
transform:perspective(80vw) rotateX(180deg);opacity:0.1}}

@keyframes perspectiveUp{0%{
--bubblecolorchange:#00B4FF;
transform-origin:0 0;
transform:perspective(80vw) rotateX(0deg);opacity:1}100%{/*opacity:0;*/
--bubblecolorchange:red;
transform-origin:0 0;
transform:perspective(80vw) rotateX(180deg);opacity:0.1}}/*opacity:1;*/

@-webkit-keyframes shadowmovement{from{
-webkit-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-moz-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-ms-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-o-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
box-shadow:-.4vw -.4vw .25vw .25vw #000000}to{
-webkit-box-shadow:.45vw .45vw .25vw #000000;
-moz-box-shadow:.45vw .45vw .25vw #000000;
-ms-box-shadow:.45vw .45vw .25vw #000000;
-o-box-shadow:.45vw .45vw .25vw #000000;
box-shadow:.45vw .45vw .25vw #000000}}

@-moz-keyframes shadowmovement{from{
-webkit-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-moz-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-ms-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-o-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
box-shadow:-.4vw -.4vw .25vw .25vw #000000}to{
-webkit-box-shadow:.45vw .45vw .25vw #000000;
-moz-box-shadow:.45vw .45vw .25vw #000000;
-ms-box-shadow:.45vw .45vw .25vw #000000;
-o-box-shadow:.45vw .45vw .25vw #000000;
box-shadow:.45vw .45vw .25vw #000000}}

@-ms-keyframes shadowmovement{from{
-webkit-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-moz-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-ms-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-o-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
box-shadow:-.4vw -.4vw .25vw .25vw #000000}to{
-webkit-box-shadow:.45vw .45vw .25vw #000000;
-moz-box-shadow:.45vw .45vw .25vw #000000;
-ms-box-shadow:.45vw .45vw .25vw #000000;
-o-box-shadow:.45vw .45vw .25vw #000000;
box-shadow:.45vw .45vw .25vw #000000}}

@-o-keyframes shadowmovement{from{
-webkit-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-moz-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-ms-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-o-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
box-shadow:-.4vw -.4vw .25vw .25vw #000000}to{
-webkit-box-shadow:.45vw .45vw .25vw #000000;
-moz-box-shadow:.45vw .45vw .25vw #000000;
-ms-box-shadow:.45vw .45vw .25vw #000000;
-o-box-shadow:.45vw .45vw .25vw #000000;
box-shadow:.45vw .45vw .25vw #000000}}

@keyframes shadowmovement{from{
-webkit-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-moz-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-ms-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
-o-box-shadow:-.4vw -.4vw .25vw .25vw #000000;
box-shadow:-.4vw -.4vw .25vw .25vw #000000}to{
-webkit-box-shadow:.45vw .45vw .25vw #000000;
-moz-box-shadow:.45vw .45vw .25vw #000000;
-ms-box-shadow:.45vw .45vw .25vw #000000;
-o-box-shadow:.45vw .45vw .25vw #000000;
box-shadow:.45vw .45vw .25vw #000000}}

/* -------------  END flipWINDOW / NAVBAR ------------  */