/*  ------------- 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

 */

#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{
  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:.55vw; /* move all L-R */
  padding: 0 0 0; /* .6vw 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(1) {
  overflow: hidden;
  visibility:hidden;
  display:none;
  pointer-events:none;
  opacity:0;

}


/* --------------------------------------- 
#navbar li{
  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(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-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%); /* controls bg gradient of chit*/
  border-radius: 50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 0;
  -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(-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%); /* 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(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 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;

}

/* 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;

}

/* 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;
  -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('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4');
  -moz-background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4');
  -ms-background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4');
  -o-background-image: url('http://www.richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_2/smoke.mp4');
  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%;
  -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(2):hover a:hover,#navbar li:nth-of-type(3):hover a:hover,#navbar li:nth-of-type(4):hover a:hover,#navbar li:nth-of-type(5):hover a:hover{ /* --------------------------------------- */
  color: #00B4FF;
  text-shadow: .075vw .075vw .06vw #FFFFFF;
  border-radius: 50%;

}

#navbar li:nth-of-type(6):hover a:hover{ /* --------------------------------------- */
  color: red;

}

/* 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;

}


.navbarbubble{
  overflow:hidden;
  display: inline-block;   
  position: relative;
  border-radius:50%;
  color: white;
  font-family: Georgia, serif;
  padding: .7vw .7vw .7vw; /* affects, but not full control, of blue ring */

}

/* 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 ... somethin weird about it ... 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-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 ------------  */