#nav_wrapper{
  height: 120px ;
  width: 100vw;
  background-color: #0c4da2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
}

#nav{position: fixed;
/*background-color: red;
*/height: 80px;
width: 200px;
bottom: 75px;
z-index: 400;}

#navleft{
	position: absolute;
	transform: rotateZ(30deg) rotateY(180deg);
	-webkit-transform: rotateZ(30deg) rotateY(180deg);
	top: 20px;
	left: 40px;
	background-color:;
	z-index: 20;
}

#navleft_filled{
	position: absolute;
	transform: rotateZ(30deg) rotateY(180deg);
	-webkit-transform: rotateZ(30deg) rotateY(180deg);
	top: 20px;
	left: 40px;
	opacity: 0;	
	z-index: 20;
}

#navright{
	position: absolute;
	transform: rotateZ(-30deg) rotateY(180deg);
	-webkit-transform: rotateZ(-30deg) rotateY(180deg);
	top: 20px;
	left: 54px;
	z-index: 20;
}

#navright_filled{
	position: absolute;
	transform: rotateZ(-30deg) rotateY(180deg);
	-webkit-transform: rotateZ(-30deg) rotateY(180deg);
	top: 20px;
	left: 54px;
	opacity: 0;
	z-index: 20;
}

#navbottom{
	position: absolute;
	top: 50px;
	left: 29px;
	z-index: 20;
}

#navbottom_filled{
	position: absolute;
	top: 50px;
	left: 29px;
	opacity: 0;
	z-index: 20;
}

/*CLASSES*/

.leftreflect{
 -webkit-animation: leftreflect 1s forwards cubic-bezier(.27,.52,.89,.65); /* Safari 4+ */
  -moz-animation:    leftreflect 2s forwards; /* Fx 5+ */
  -o-animation:      leftreflect 2s forwards; /* Opera 12+ */
  animation:         leftreflect 2s forwards; /* IE 10+, Fx 29+ */

}

.rightreflect{
	-webkit-animation: rightreflect 1s forwards cubic-bezier(.27,.52,.89,.65); /* Safari 4+ */
  -moz-animation:    rightreflect 2s forwards; /* Fx 5+ */
  -o-animation:      rightreflect 2s forwards; /* Opera 12+ */
  animation:         rightreflect 2s forwards; /* IE 10+, Fx 29+ */
}

.bottomreflect{
	-webkit-animation: bottomreflect 1s forwards cubic-bezier(.27,.52,.89,.65); /* Safari 4+ */
  -moz-animation:    bottomreflect 2s forwards; /* Fx 5+ */
  -o-animation:      bottomreflect 2s forwards; /* Opera 12+ */
  animation:         bottomreflect 2s forwards; /* IE 10+, Fx 29+ */

}

.unleftreflect{
 -webkit-animation: unleftreflect 1s forwards cubic-bezier(.27,.52,.89,.65); /* Safari 4+ */
  -moz-animation:    unleftreflect 2s forwards; /* Fx 5+ */
  -o-animation:      unleftreflect 2s forwards; /* Opera 12+ */
  animation:         unleftreflect 2s forwards; /* IE 10+, Fx 29+ */

}

.unrightreflect{
	-webkit-animation: unrightreflect 1s forwards cubic-bezier(.27,.52,.89,.65); /* Safari 4+ */
  -moz-animation:    unrightreflect 2s forwards; /* Fx 5+ */
  -o-animation:      unrightreflect 2s forwards; /* Opera 12+ */
  animation:         unrightreflect 2s forwards; /* IE 10+, Fx 29+ */
}

.unbottomreflect{
	-webkit-animation: unbottomreflect 1s forwards cubic-bezier(.27,.52,.89,.65); /* Safari 4+ */
  -moz-animation:    unbottomreflect 2s forwards; /* Fx 5+ */
  -o-animation:      unbottomreflect 2s forwards; /* Opera 12+ */
  animation:         unbottomreflect 2s forwards; /* IE 10+, Fx 29+ */

}

/*@keyframes leftreflect {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}*/

@-webkit-keyframes leftreflect {

  from {
    -webkit-transform: rotateY(180deg) rotateZ(-30deg); 
  }
  to {
    -webkit-transform: rotateY(0deg) rotateZ(30deg) translateX(-15px) ;
  }

}
@-webkit-keyframes rightreflect {
  from {
    -webkit-transform: rotateY(180deg) rotateZ(1deg) rotateZ(30deg) translateX(0px); 
  } 
  to {
    -webkit-transform: rotateY(0deg) rotateZ(-30deg) translateX(16px);
  }
}

@-webkit-keyframes bottomreflect {
  0% {
    -webkit-transform: rotateX(0deg) translateY(6px); 
  }
  1%{
  	-webkit-transform: translateY(1px);
  }
  100% {
    -webkit-transform: rotateX(180deg) translateY(-16px);
  }
}
/*@-moz-keyframes leftreflect {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes leftreflect {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes leftreflect {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
*/
@-webkit-keyframes unleftreflect {
  from {
    -webkit-transform: rotateY(0deg) rotateZ(30deg) translateX(-15px) ;
  }
  to {
    -webkit-transform: rotateY(180deg) rotateZ(-30deg); 
  }
}
@-webkit-keyframes unrightreflect {
  from {
    -webkit-transform: rotateY(0deg) rotateZ(-30deg) translateX(16px);
  }
  to {
    -webkit-transform: rotateY(180deg) rotateZ(1deg) rotateZ(30deg) translateX(0px); 
  } 
}

@-webkit-keyframes unbottomreflect {
  0% {
    -webkit-transform: rotateX(180deg) translateY(-16px);
  } 
  99%{
  	-webkit-transform: translateY(1px);
  }
  100% {
    -webkit-transform: rotateX(0deg) translateY(0px); 
  }

}