@keyframes slideAnimation {
  0% { opacity: 0; }
  4% { opacity: 1; }
  20% { opacity: 1; }
  24% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fade {
  0%,70%{
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes arow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}




@keyframes loda1{
  0%{
    opacity:1;
    transform: translateX(-200%);
  }
  20%,80% {
    opacity:1;
    transform: translateX(0);
  }
  100%{
    opacity:0;
    transform: translateX(200%);
  }
}

@keyframes loda2{
  0%{
    opacity:1;
    transform: translateY(-200%);
  }
  20%,80% {
    opacity:1;
    transform: translateY(0);
  }
  100%{
    opacity:0;
    transform: translateY(200%);
  }
}

@keyframes loda3{
  0%{
    opacity:1;
    transform: translateY(200%);
  }
  20%,80% {
    opacity:1;
    transform: translateY(0);
  }
  100%{
    opacity:0;
    transform: translateY(-200%);
  }
}

@keyframes loda4{
  0%,70%{
    opacity:0;
    transform: translateY(200%);
  }
  90%{
    opacity:0;
  }
  100%{
    opacity:0.9;
    transform: translateY(0);
  }
}

@keyframes loda5{
  0%,70%{
    opacity:0;
    transform: translateY(-200%);
  }
  100%{
    opacity:0.9;
    transform: translateY(0);
  }
}

@keyframes loda6{
  0%,80%{
    opacity:1;
    transform: translateY(0);
  }
  100%{
    opacity:0;
    transform: translateY(-200);
  }
}

@keyframes main{
  0%,80% {
    display:none;
  }
  90%{
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


@keyframes loda1m{
  0%{
    opacity:1;
    transform: translateY(-200%);
  }
  20%,80% {
    opacity:1;
    transform: translateY(0);
  }
  100%{
    opacity:0;
    transform: translateY(200%);
  }
}

@keyframes loda2m{
  0%{
    opacity:1;
    transform: translateX(-200%);
  }
  20%,80% {
    opacity:1;
    transform: translateX(0);
  }
  100%{
    opacity:0;
    transform: translateX(200%);
  }
}

@keyframes loda3m{
  0%{
    opacity:1;
    transform: translateX(200%);
  }
  20%,80% {
    opacity:1;
    transform: translateX(0);
  }
  100%{
    opacity:0;
    transform: translateX(-200%);
  }
}

@keyframes rinji1{
  0%,80%{
    opacity:0;
    transform: translate(-90%, -20%);
  }
  100%{
    opacity:1;
    transform: translate(-90%, -20%);
  }
}

@keyframes rinji2{
  0%,80%{
    opacity:0;
    transform: translate(-90%, -70%);
  }
  100%{
    opacity:1;
    transform: translate(-90%, -70%);
  }
}

@keyframes rinjim1{
  0%,80%{
    opacity:0;
    transform: translate(-50%, -65%);
  }
  100%{
    opacity:1;
    transform: translate(-50%, -65%);
  }
}

@keyframes rinjim2{
  0%,80%{
    opacity:0;
    transform: translate(-50%, -85%);
  }
  100%{
    opacity:1;
    transform: translate(-50%, -85%);
  }
}