/******************************************************************************/
/**************************** ROTATE NAME BUTTON ******************************/

.rotateNameButtonDown {
  animation: rotateDown 2.5s;
  animation-fill-mode: forwards;
}
@keyframes rotateDown{
  0% {transform: rotate(-90deg);}
  20% {transform: rotate(5deg);}
  30% {transform: rotate(-3deg);}
  40% {transform: rotate(2deg);}
  50% {transform: rotate(-2deg);}
  60% {transform: rotate(0deg);}
}

.rotateNameButtonUp {
  animation: rotateUp 0.5s;
  animation-fill-mode: forwards;
}
@keyframes rotateUp{
  0% {transform: rotate(0deg)}
  100% {transform: rotate(-90deg)}
}

/******************************************************************************/
/**************************** ROTATE NAV BUTTONS ******************************/

.rotateNavBtnDown1 {
  animation: rotateNavBtnDown1 2s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown1{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(-18deg);}
  50% {transform: rotate(-38deg);}
  75% {transform: rotate(-28deg);}
  100% {transform: rotate(-33deg);}
}

.rotateNavBtnDown2 {
  animation: rotateNavBtnDown2 2.2s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown2{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(9deg);}
  50% {transform: rotate(-12deg);}
  75% {transform: rotate(-10deg);}
  100% {transform: rotate(-13deg);}
}

.rotateNavBtnDown3 {
  animation: rotateNavBtnDown3 2.4s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown3{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(20deg);}
  50% {transform: rotate(0deg);}
  75% {transform: rotate(10deg);}
  100% {transform: rotate(7deg);}
}

.rotateNavBtnDown4 {
  animation: rotateNavBtnDown4 2.6s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown4{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(35deg);}
  50% {transform: rotate(19deg);}
  75% {transform: rotate(29deg);}
  100% {transform: rotate(27deg);}
}

.rotateNavBtnDown5 {
  animation: rotateNavBtnDown5 2.8s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown5{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(61deg);}
  50% {transform: rotate(41deg);}
  75% {transform: rotate(51deg);}
  100% {transform: rotate(47deg);}
}

.rotateNavBtnDown6 {
  animation: rotateNavBtnDown6 3s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown6{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(82deg);}
  50% {transform: rotate(63deg);}
  75% {transform: rotate(73deg);}
  100% {transform: rotate(67deg);}
}

.rotateNavBtnDown7 {
  animation: rotateNavBtnDown7 3.2s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown7{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(104deg);}
  50% {transform: rotate(84deg);}
  75% {transform: rotate(92deg);}
  100% {transform: rotate(87deg);}
}

.rotateNavBtnDown8 {
  animation: rotateNavBtnDown8 3.4s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown8{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(119deg);}
  50% {transform: rotate(99deg);}
  75% {transform: rotate(109deg);}
  100% {transform: rotate(107deg);}
}

.rotateNavBtnDown9 {
  animation: rotateNavBtnDown9 3.6s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown9{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(136deg);}
  50% {transform: rotate(119deg);}
  75% {transform: rotate(129deg);}
  100% {transform: rotate(127deg);}
}

.rotateNavBtnDown10 {
  animation: rotateNavBtnDown10 3.8s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown10{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(156deg);}
  50% {transform: rotate(137deg);}
  75% {transform: rotate(149deg);}
  100% {transform: rotate(147deg);}
}

.rotateNavBtnDown11 {
  animation: rotateNavBtnDown11 4s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown11{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(176deg);}
  50% {transform: rotate(153deg);}
  75% {transform: rotate(170deg);}
  100% {transform: rotate(167deg);}
}

.rotateNavBtnDown12 {
  animation: rotateNavBtnDown12 4.2s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown12{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(194deg);}
  50% {transform: rotate(175deg);}
  75% {transform: rotate(189deg);}
  100% {transform: rotate(187deg);}
}

.rotateNavBtnDown13 {
  animation: rotateNavBtnDown13 4.4s;
  animation-fill-mode: forwards;
}
@keyframes rotateNavBtnDown13{
  0% {transform: rotate(-90deg);}
  25% {transform: rotate(216deg);}
  50% {transform: rotate(193deg);}
  75% {transform: rotate(209deg);}
  100% {transform: rotate(207deg);}
}

/******************************************************************************/
/**************************** END ROTATE NAV BUTTONS **************************/

.slideRight {
  animation: slideRight 1.5s;
  animation-fill-mode: forwards;
}
@keyframes slideRight{
  0% {transform: translate(0px,0px);}
  100% {transform: translate(200px,0px);}
}