.arow {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -85%);
  margin: 80px auto;
  padding:10px;
  animation: arow 3s infinite, fade 7s;
  z-index:9995;
}

.navb {
  position: absolute;
  margin: 80px auto;
  padding:10px;
  z-index:9995;
}

.nav100{
  display: block;
  transition: transform 0.3s ease;
  font-size: clamp(100%, 2vw, 150%);
  margin-left:50px;

}

.nav100:hover{
  transform: scale(1.05);
}




#yoso1{
  top: 90%;
  left: 15%;
  transform: translate(-15%, -90%);
  cursor: pointer;
  animation:fade 7s;
}

#yoso2{
  top: 90%;
  left: 30%;
  transform: translate(-30%, -90%);
  cursor: pointer;
  animation:fade 7s;
}

#yoso3{
  top: 90%;
  left: 70%;
  transform: translate(-70%, -90%);
  cursor: pointer;
  animation:fade 7s;
}

#yoso4{
  top: 90%;
  left: 85%;
  transform: translate(-85%, -90%);
  cursor: pointer;
  animation:fade 7s;
}

.arow2{
  display:none;
}
.arow:hover{
  cursor: pointer;
}

.arowimg{
  top: 80%;
  left: 50%;
  transform: translate(-50%, -80%);
  width:60%;
  z-index:9995;
}

.top1 {
    display: block;
    width: 100%;
    height: auto;
}


.lota1{
  position:absolute;
  opacity:0;
  animation:loda1 3s;
  z-index:9998;
  top: 10%;
  left: 2%;

}

.lota2{
  position:absolute;
  opacity:0;
  animation:loda2 3s;
  z-index:9998;
  top: 20%;
  left: 50%;
}

.lota3{
  position:absolute;
  opacity:0;
  animation:loda3 3s;
  z-index:9998;
  top: 50%;
  left: 50%;
}

.lota1,.lota2,.lota3{
  width:40%;
}

.lota4{
  position:absolute;
  animation:loda4 4.5s;
  z-index:9990;
  width: 100vw;
  height: 100vh;
  opacity:0.9;
}

.lota5{
  position:absolute;
  animation:loda5 4.5s;
  z-index:9990;
  width: 100vw;
  height: 100vh;
  opacity:0.9;
}

.lota6{
  opacity:0;
  position:absolute;
  animation:loda6 4s;
  z-index:9989;
  width: 100vw;
  height: 100vh;
}

.lota7{
  position:absolute;
  width:30%;
  animation:fade 7s;
  z-index:9999;
  top: 1%;
  left: 50%;
  transform: translate(-50%, -1%);
}