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

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

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

 */

#flipWindow{
  width:var(--displayAwidth);
  height:auto; /*4vw auto */
  margin-left:12.5%;
  /*margin:0 auto; handy default ... puts in center */
  z-index: auto;

}

#navbar,#navbar ul{
  overflow:visible;
  list-style: none outside none;
  margin: 0;
  padding: 0 0 2.25vw;
  /*opacity:1;*/

}

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

}

#navbar ul{
  position: absolute;
  background-color: #222;/*width: 100%;*/
  /* height:var(--navheight); */
  left: 900vw; /* 900vw 2vh */
  border:0.075vw solid #222;
  border-radius:50%;
  border-width:0 .1vw .1vw;
  -webkit-box-shadow:0 .15vw .15vw rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 .15vw .15vw rgba(0, 0, 0, 0.5);
  -ms-box-shadow:0 .15vw .15vw rgba(0, 0, 0, 0.5);
  -o-box-shadow:0 .15vw .15vw rgba(0, 0, 0, 0.5);
  box-shadow:0 .15vw .15vw rgba(0, 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:nth-of-type(1) {
  overflow: hidden;
  visibility:hidden;
  display:none;
  pointer-events:none;
  opacity:0;

}

#navbar li:nth-of-type(2),#navbar li:nth-of-type(3),#navbar li:nth-of-type(4),#navbar li:nth-of-type(5),#navbar li:nth-of-type(6) {
  position: relative;
  /*background: url('css/menu_line.png') no-repeat scroll right .2vw rgba(0,0,0,0);*/
  float: left;
  border-radius: 50%;
  top: 0; /* -.25vh move all up-down */
  margin-left:.7vw; /* move all L-R */
  padding: .6vw 0 0; /*1st - up/down in navbar ... 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(6){
  overflow:hidden;
  left:0;
  top: 0; /* move 5 up-down 
  padding: 1.3vw 0 0;  /*messes with #6 chit 
 -webkit-transition: padding 1.5s ease-out;
 -moz-transition:padding 1.5s ease-out;
 /*-ms-transition: padding 1.5s ease-out;
 -o-transition: padding 1.5s ease-out;
 transition: padding 1.5s ease-out;
 /*z-index:-1;

} --------------------------------------- */

/* 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; /* must be for bubble to fully show otherwise it only shows half */
  -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*/
  border-radius: 50%;
  border-top-left-radius: 0;
  border-top-right-radius: 50%;
  outline: 0 none;
  -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;
  /*z-index:1;*/

}

/* controls chit shadow */
#navbar li:nth-of-type(2):hover {
  /*left:-2.1vw;
  top:9vw;*/
  -webkit-box-shadow: -0.19vw 0.19vw 0.25vw .25vw #000000;
  -moz-box-shadow: -0.19vw 0.19vw 0.25vw .25vw #000000;
  -ms-box-shadow: -0.19vw 0.19vw 0.25vw .25vw #000000;
  -o-box-shadow: -0.19vw 0.19vw 0.25vw .25vw #000000;
  box-shadow: -0.19vw 0.19vw 0.25vw .25vw #000000;

}

#navbar li:nth-of-type(3):hover{
  /*left:-14.325vw;
  top:9vw;*/
  -webkit-box-shadow: -0.24vw 0.24vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.24vw 0.24vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.24vw 0.24vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.24vw 0.24vw 0.25vw 0.25vw #000000;
  box-shadow: -0.24vw 0.24vw 0.25vw 0.25vw #000000;

}

#navbar li:nth-of-type(4):hover{
  /*left:-29.75vw;
  top:9vw;*/
  -webkit-box-shadow: -0.31vw 0.31vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.31vw 0.31vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.31vw 0.31vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.31vw 0.31vw 0.25vw 0.25vw #000000;
  box-shadow: -0.31vw 0.31vw 0.25vw 0.25vw #000000;

}

#navbar li:nth-of-type(5):hover{
  /*left:-45.4vw;
  top:9vw;*/
  -webkit-box-shadow: -0.4vw 0.4vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.4vw 0.4vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.4vw 0.4vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.4vw 0.4vw 0.25vw 0.25vw #000000;
  box-shadow: -0.4vw 0.4vw 0.25vw 0.25vw #000000;

}

/* switch upper chit corner with added border-radius stuff here on -type(6):hover */
#navbar li:nth-of-type(6):hover {
  /*left:-45.4vw;
  top:9vw;*/
  -webkit-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,0) 100%);
  -moz-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,0) 100%);
  -ms-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,0) 100%);
  -o-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,0) 100%);
  background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,0) 100%); /* controls bg gradient of chit*/
  border-radius: 50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 0;
  -webkit-box-shadow: -0.48vw 0.48vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.48vw 0.48vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.48vw 0.48vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.48vw 0.48vw 0.25vw 0.25vw #000000;
  box-shadow: -0.48vw 0.48vw 0.25vw 0.25vw #000000;

}
/* 
#navbar li:nth-of-type(6):hover{
  overflow:hidden;
  -webkit-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,.1) 100%);
  -moz-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,.1) 100%);
  -ms-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,.1) 100%);
  -o-background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,.1) 100%);
  background: linear-gradient(-135deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 10%, rgba(0,180,255,.1) 100%);
  border-radius: 50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 0;
  /* left:3vw;
  top:1vw; 
  height: 2vw; /* controls height of chit 
  outline: 0 none;
  padding: 3vw 0 3vw;
  -webkit-box-shadow: 0.55vw 0.55vw 0.25vw #000000;
  -moz-box-shadow: 0.55vw 0.55vw 0.25vw #000000;
  -ms- box-shadow: 0.55vw 0.55vw 0.25vw #000000;
  -o-box-shadow: 0.55vw 0.55vw 0.25vw #000000;
  box-shadow: 0.55vw 0.55vw 0.25vw #000000;
  /* this controls both here and navbarbubble 
  -webkit-animation: fadeIn 750ms ease-in-out, shadowmovement 1000ms ease-in-out;
  -moz-animation: fadeIn 750ms ease-in-out, shadowmovement 1000ms ease-in-out;
  -ms-animation: fadeIn 750ms ease-in-out, shadowmovement 1000ms ease-in-out;
  -o-animation: fadeIn 750ms ease-in-out, shadowmovement 1000ms ease-in-out;
  animation: fadeIn 750ms ease-in-out, shadowmovement 1000ms ease-in-out;

} /* --------------------------------------- */

#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:hidden;
  border-radius:50%;

}

/* controls re-fadeIn */ /* --------------------------------------- */

/* 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: block;
  float: left;
  border-radius:50%;
  top: 0;
  padding: .8vw .7vw 1.45vw; /* 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-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;
  /* , bubblegrow 1500ms ease-in-out 'bubblegrow4' re-animates fade in on leave shortening the button as lense passes through on 'away' slide */
  /*text-shadow: rgba(0,0,0,.75) 0 .15vw 0;
  vertical-align: middle;*/

}

/* controls the showing of black pallette 'a' chit */
#navbar li:nth-of-type:hover a,#navbar li:nth-of-type:not(:hover) a{
  overflow:hidden;
  border-radius: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; /* 'bubblegrow4' re-animates fade in on leave shortening the button as lense passes through on 'away' slide */

}

/* bubble grow and new text color #00B4FF 2-5 */
#navbar li:nth-of-type(2):hover a,#navbar li:nth-of-type(3):hover a,#navbar li:nth-of-type(4):hover a,#navbar li:nth-of-type(5):hover a,#navbar li:nth-of-type(6):hover a{
  overflow: hidden; /* visible shows grazing bubbles */
  -webkit-background: none repeat scroll 0 0 #000000; /* controls bg color of bubble */
  -moz-background: none repeat scroll 0 0 #000000; /* controls bg color of bubble */
  -ms-background: none repeat scroll 0 0 #000000; /* controls bg color of bubble */
  -o-background: none repeat scroll 0 0 #000000; /* controls bg color of bubble */
  background: none repeat scroll 0 0 #000000; /* controls bg color of bubble */
  -webkit-background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4'); /* controls bg color of bubble */
  -moz-background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4'); /* controls bg color of bubble */
  -ms-background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4'); /* controls bg color of bubble */
  -o-background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4'); /* controls bg color of bubble */
  background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4'); /* controls bg color of bubble */
  background-size: 100% 100%;
  border-radius: 50%;
  color: #00B4FF;
  text-shadow: .075vw .075vw .06vw #FFFFFF;
  -webkit-clip-path: ellipse(50% 55% at 50% 50%);
  -moz-clip-path: ellipse(50% 55% at 50% 50%);
  -ms-clip-path: ellipse(50% 55% at 50% 50%);
  -o-clip-path: ellipse(50% 55% at 50% 50%);
  clip-path: ellipse(50% 55% at 50% 50%);
  -webkit-animation: bubblegrow 1000ms ease-in-out, shadowmovement 1000ms ease-in-out; 
  -moz-animation: bubblegrow 1000ms ease-in-out, shadowmovement 1000ms ease-in-out;
  -ms-animation: bubblegrow 1000ms ease-in-out, shadowmovement 1000ms ease-in-out;
  -o-animation: bubblegrow 1000ms ease-in-out, shadowmovement 1000ms ease-in-out;
  animation: bubblegrow 1000ms ease-in-out, shadowmovement 1000ms ease-in-out;
  
}
/* Use this to change text color and shadow!!!!!!!!!!!!
#navbar li:nth-of-type(6):hover a{ /* --------------------------------------- 
  overflow: hidden; /* visible shows grazing bubbles 
  border-radius: 50%;
  left:0;
  top:0; /* move up-down 
  color: #00B4FF;
  text-shadow: .2vw .2vw .1vw #000000, .15vw .2vw .1vw red;
  padding: .8vw .7vw 2vw; /* combine this with padding from 
  -webkit-animation: bubblegrow4 1500ms ease-in-out;
  -moz-animation: bubblegrow4 1500ms ease-in-out;
  -ms-animation: bubblegrow4 1500ms ease-in-out;
  -o-animation: bubblegrow4 1500ms ease-in-out;
  animation: bubblegrow4 1500ms ease-in-out;

}
/* 
 ... #navbar li - 0 .3vw 0
 ... #navbar li:nth-of-type(6) - .6vw .3vw 1vh ^ transition: all 1.5s ease-out
 ... #navbar li:nth-of-type(2-5):hover - .8vw .4vw 4vh ^ animation: fadeIn 500ms ease-in-out
 ... #navbar li:nth-of-type(6):hover - .8vw .4vw 4vh ^ animation: fadeIn 750ms ease-in-out, shadowmovement 1000ms ease-in-out
 ... #navbar li a - .7vw .7vw 3vh
 ... #navbar li:nth-of-type(6):hover a - .8vw .7vw 4vh ^ animation: bubblegrow4 1500ms ease-in-out
*/

/* to upward left cloud Stuff */
#navbar li a::after,#navbar li:not(:hover) a::after{
  display: 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%;
  -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 1000ms ease-out;
  -moz-transition: all 1000ms ease-out;
  /*-ms-transition: all 1000ms ease-out;*/
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  opacity:1;

}

/* to upward left cloud Stuff */
#navbar li:not(:hover) a::after{
  overflow:hidden;
  border-radius: 50%;
  left: 70%;
  top: 70%;
  opacity:0;

}
/* 
#navbar li:nth-of-type(6) a::after,#navbar li:nth-of-type(6):not(:hover) a::after {
  display:none;

} --------------------------------------- */

.navbarbubble{
  overflow:hidden;
  display: inline-block;   
  position: relative;
  border-radius:50%;
  color: white;
  font-family: Georgia, serif;/*
  text-shadow: rgba(0,0,0,0) 0 .15vw 0;
  text-shadow: rgba(0,0,0,.6) 0 .3vw 0;
  text-decoration: none;*/
  padding: .7vw .7vw .7vw; /* affects, but not full control, of blue ring */
  /*vertical-align: middle;*/

}

/* to lower right cloud Stuff */
.navbarbubble::before,.navbarbubble:not(:hover)::before{
  overflow:hidden;
  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%;
  content: "";
  left: 0; /* -225% */
  top: 0; /* -200% */
  -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. */
  /*opacity:1;*/

}

/* to lower right cloud Stuff */
.navbarbubble:hover::before{
  overflow:hidden;
  content: "";
  border-radius:50%;
  width: 100%;
  height: 100%;
  left: 0; /* 200% */
  top: 0; /* 200% */
  -webkit-box-shadow: 0 0 .2vw .2vw #00B4FF;
  -moz-box-shadow: 0 0 .2vw .2vw #00B4FF;
  -ms-box-shadow: 0 0 .2vw .2vw #00B4FF;
  -o-box-shadow: 0 0 .2vw .2vw #00B4FF;
  box-shadow: 0 0 .2vw .2vw #00B4FF;
  -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:1;*/

}

/* determines blue halo */ /* HERE and above */
#navbar li .navbarbubble:focus,#navbar li .navbarbubble:hover,#navbar li .navbarbubble:active{
  overflow:visible;
  outline: 0 none;
  border-radius:50%;
  left:0;
  -webkit-box-shadow: -0.3vw 0.3vw 0.3vw 0.4vw #101010;  /*associated to shadowmovement */
  -moz-box-shadow: -0.3vw 0.3vw 0.3vw 0.4vw #101010;  /*associated to shadowmovement */
  -ms-box-shadow: -0.3vw 0.3vw 0.3vw 0.4vw #101010;  /*associated to shadowmovement */
  -o-box-shadow: -0.3vw 0.3vw 0.3vw 0.4vw #101010;  /*associated to shadowmovement */
  box-shadow: -0.3vw 0.3vw 0.3vw 0.4vw #101010;  /* associated to shadowmovement */
  -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;

}

/* 1 position of words 2 'accordian' or 3 position of bubble 'fat and tall' - true - use imagination self! :) */
@-webkit-keyframes bubblegrow{
 from {padding: .8vw .7vw .5vw;}
 to {padding: .8vw .7vw 1.25vw;}

}

@-moz-keyframes bubblegrow{
 from{padding: .8vw .7vw .5vw;}
 to{padding: .8vw .7vw 1.25vw;}

}

@-ms-keyframes bubblegrow{
 from {padding: .8vw .7vw .5vw;}
 to {padding: .8vw .7vw 1.25vw;}

}

@-o-keyframes bubblegrow {
 from{padding: .8vw .7vw .5vw;}
 to{padding: .8vw .7vw 1.25vw;}

}

@keyframes bubblegrow{
 from{padding: .8vw .7vw .5vw;}
 to{padding: .8vw .7vw 1.25vw;}

}

/* 1 position of words 2 'accordian' or 3 position of bubble 'fat and tall' - true - use imagination self! :) */
@-webkit-keyframes bubblegrow4{
 from {padding: .8vw .7vw 1vw;}
 to {padding: .8vw .7vw 1vw;}

}

@-moz-keyframes bubblegrow4 {
 from {padding: .8vw .7vw 1vw;}
 to {padding: .8vw .7vw 1vw;}

}

@-ms-keyframes bubblegrow4 {
 from {padding: .8vw .7vw 1vw;}
 to {padding: .8vw .7vw 1vw;}

}

@-o-keyframes bubblegrow4 {
 from {padding: .8vw .7vw 1vw;}
 to {padding: .8vw .7vw 1vw;}

}

@keyframes bubblegrow4 {
 from {padding: .8vw .7vw 1vw;}
 to {padding: .8vw .7vw 1vw;}

}
/*
@-webkit-keyframes movement {
 from {left: ;top: 9vw;}
 to {left: ;top: 9vw;}

}

@-moz-keyframes movement {
 from {left: ;top: 9vw;}
 to {left: ;top: 9vw;}

}

@-ms-keyframes movement {
 from {left: ;top: 9vw;}
 to {left: ;top: 9vw;}

}

@-o-keyframes movement {
 from {left: ;top: 9vw;}
 to {left: ;top: 9vw;}

}

@keyframes movement {
 from {left: ;top: 9vw;}
 to {left: ;top: 9vw;}

} */

@-webkit-keyframes shadowmovement {
 from {
  -webkit-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
 } to {
  -webkit-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -moz-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -ms-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -o-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  box-shadow: 0.45vw 0.45vw 0.25vw #000000;
 }
}

@-moz-keyframes shadowmovement {
 from {
  -webkit-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
 } to {
  -webkit-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -moz-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -ms-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -o-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  box-shadow: 0.45vw 0.45vw 0.25vw #000000;
 }
}

@-ms-keyframes shadowmovement {
 from {
  -webkit-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
 } to {
  -webkit-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -moz-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -ms-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -o-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  box-shadow: 0.45vw 0.45vw 0.25vw #000000;
 }
}

@-o-keyframes shadowmovement {
 from {
  -webkit-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
 } to {
  -webkit-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -moz-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -ms-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -o-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  box-shadow: 0.45vw 0.45vw 0.25vw #000000;
 }
}

@keyframes shadowmovement {
 from {
  -webkit-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -moz-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -ms-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  -o-box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
  box-shadow: -0.4vw -0.4vw 0.25vw 0.25vw #000000;
 } to {
  -webkit-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -moz-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -ms-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  -o-box-shadow: 0.45vw 0.45vw 0.25vw #000000;
  box-shadow: 0.45vw 0.45vw 0.25vw #000000;
 }
}

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

@-moz-keyframes perspectiveUp {
  100% {
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform: perspective(80vw) rotateX(0deg); /*800px*/
    transform: perspective(80vw) rotateX(0deg);
	/*opacity:0;*/
  }
  0% {
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform: perspective(80vw) rotateX(180deg);
    transform: perspective(80vw) rotateX(180deg);
	/*opacity:1;*/
  }
}

@-ms-keyframes perspectiveUp {
  100% {
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform: perspective(80vw) rotateX(0deg); /*800px*/
    transform: perspective(80vw) rotateX(0deg);
	/*opacity:0;*/
  }
  0% {
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform: perspective(80vw) rotateX(180deg);
    transform: perspective(80vw) rotateX(180deg);
	/*opacity:1;*/
  }
}

@-o-keyframes perspectiveUp {
  100% {
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -o-transform: perspective(80vw) rotateX(0deg); /*800px*/
    transform: perspective(80vw) rotateX(0deg);
	/*opacity:0;*/
  }

  0% {
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -o-transform: perspective(80vw) rotateX(180deg);
    transform: perspective(80vw) rotateX(180deg);
	/*opacity:1;*/
  }
}

@keyframes perspectiveUp {
  100% {
    transform-origin: 0 0;
    transform: perspective(80vw) rotateX(0deg);
	/*opacity:0;*/
  }

  0% {
    transform-origin: 0 0;
    transform: perspective(80vw) rotateX(180deg);
	/*opacity:1;*/
  }
}

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