.animated{
  opacity: 0;
  transform: translateY(75px);
  transition: all ease .8s;
}

.animated.on{
  transform: translateY(0);
  opacity: 1;
}



@keyframes bar1 {
  0% {
    top: 0;
    transform: rotate(0);
  }

  100% {
    top: 6px;
    transform: rotate(45deg);
  }
}


@keyframes bar2 {
  0% {
    top: 0;
    transform: rotate(0);
  }

  100% {
    top: -6px;
    transform: rotate(-45deg);
  }
}

@keyframes resetBar01 {
  0% {
    top: 6px;
    transform: rotate(45deg);
  }

  100% {
    top: 0px;
    transform: rotate(0);
  }
}

@keyframes resetBar02 {
  0% {
    top: -6px;
    transform: rotate(-45deg);
  }

  100% {
    top: 0;
    transform: rotate(0);
  }
}


@keyframes rolling {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


@keyframes stereo{
  0%{
    height: 13px;
  }
  50%{
    height: 1px;
  }
  100%{
    height: 13px;
  }
}