.slideDown-enter-active{
  transition: all 0.5s ease-out, opacity 0.75s ease-out;
}
.slideDown-leave-active {
   transition:all 0.5s ease-out,opacity 0.1s ease-out;
}

.slideDown-enter-from,
.slideDown-leave-to {
  margin-top: -40%;
  opacity: 0;
  transform: translateY(-25%);
}

.slideDownEarly-enter-active{

}
.slideDownEarly-leave-active {
   transition:all 0.25s ease-out,opacity 0.1s ease-out;
   z-index: 0;
  position: relative;
}

.slideDownEarly-enter-from,
.slideDownEarly-leave-to {
  margin-top: -45%;
  opacity: 0;
  transform: translateY(-25%);
}

.fadeIn-enter-active,
.fadeIn-leave-active {
  transition: all 0.25s ease-out;
}

.fadeIn-enter-from,
.fadeIn-leave-to {
  opacity: 0;
}

.slideUp-enter-active,
.slideUp-leave-active {
  transition: all 0.5s ease-out, opacity 0.65s ease-out;
}

.slideUp-enter-from,
.slideUp-leave-to {
  transform: translateY(50%);
  opacity: 0;
}

.sidebar-enter-active,
.sidebar-leave-active{
  transition: all 0.4s ease-out, opacity 0.4s ease-out;
}

.sidebar-enter-from,
.sidebar-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slideProfile-enter-active,
.slideProfile-leave-active{
  transition: all 0.4s ease-out, opacity 0.6s ease;
}

.slideProfile-enter-from,
.slideProfile-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.slideUpParley-enter-active,
.slideUpParley-leave-active{
  transition: all 0.4s ease-out, opacity 0.6s ease;
}

.slideUpParley-enter-from,
.slideUpParley-leave-to {
  transform: translateY(100%);
  opacity: 0;
}


.slideDownResult-enter-active{
  transition: all 0.4s ease-out, opacity 1.4s ease-out;
}
.slideDownResult-leave-active {
   transition:all 0.5s ease-out,opacity 0.1s ease-out;
}

.slideDownResult-enter-from,
.slideDownResult-leave-to {
  margin-top: -50%;
  opacity: 0;
  transform: translateY(-25%);
}


.slideUpParlayWrap-enter-active,
.slideUpParlayWrap-leave-active {
  transition: all 0.4s ease-out, opacity 0.2s ease-out;
}

.slideUpParlayWrap-enter-from,
.slideUpParlayWrap-leave-to {
  transform: translateY(25%);
  opacity: 0;
}
/*
.slideUpRight-enter-active{
  transition: all 0.1s ease-out;
}
.slideUpRight-leave-active {
  transition: all 1s ease-in-out;

}

.slideUpRight-enter-from{
  opacity: 0;
},
.slideUpRight-enter-to{
  opacity: 1;
},
.slideUpRight-leave-from {
  transform: translate(0,0) scale(1.0);
  opacity: 1;
}
.slideUpRight-leave-to {
  transform: translate(85vw,-60vw) scale(0.3);
  opacity: 0;
}
*/
.animated_star{
  animation: slideUpRight 1.5s ease-in forwards;
  position: absolute;
  z-index: 30;
}
@keyframes slideUpRight{
  0%{
    transform: translateX(9px) scale(0.8);
    opacity: 1;
  }
  20%{
    transform: translateX(9px) scale(1.35);
    opacity: 1;
  }
  40%{
    transform: translateX(9px) scale(1.25);
    opacity: 1;
  }
  95%{
    transform: translateX(9px) scale(1.25);
    opacity: 1;
  }
  100%{
    transform: translateX(9px) scale(1.25);
    opacity: 0.1;
  }
}


.pulse {
  animation: pulse 0.5s alternate-reverse linear infinite;
  top: 10px !important;
}


@keyframes pulse{
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.05);
  }
}
@keyframes loading-spin{
  0%{
    transform: rotateZ(0deg);
  }
  25%{
    transform: rotateZ(90deg);
  }
  50%{
    transform: rotateZ(180deg);
  }
  75%{
    transform: rotateZ(270deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}
@keyframes load-appear{
  0%{
    opacity: 0;
    transform: scale(0.5);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes gain{
  0%{
    transform: translateY(0);
    opacity: 0;
  }
  100%{
    transform: translateY(-30px);
    opacity: 1;
  }
}
@keyframes loss{
  0%{
    transform: translateY(-30px);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes gain-add{
  0%{
    transform: translateY(0);
    opacity: 0;
  }
  100%{
    transform: translateY(-140%);
    opacity: 1;
  }
}
@keyframes loss-add{
  0%{
    transform: translateY(-100%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes gain-outright{
  0%{
    transform: translateY(-5px);
    opacity: 0;
  }
  100%{
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes loss-outright{
  0%{
    transform: translateY(-28px);
    opacity: 0;
  }
  100%{
    transform: translateY(-8px);
    opacity: 1;
  }
}

.spinReload{
  animation: spinReload 0.5s linear infinite;
}
.spinSmall{
  margin: 5px 0;
  animation: spinReload 1s linear infinite;
}

@keyframes spinReload{
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
@keyframes bounce {
  45% {
    transform: translateY(100px);
  }
}
@keyframes shadowScale {
  50% {
    transform: scaleX(1);
    opacity: 0.8;
  }
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}