.preload{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
  transition: all 0.5s ease-in;
  background-color: black;
}
.preload-finish {
  opacity: 0;
  pointer-events: none;
}
.preload-content-wrapper{
  width: 100%;
  max-width: 400px;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}





#preload-img {
  height: 5vh;
  position: absolute;
  top: 0;
}
.img{
  display: flex;
  justify-content: center;
  align-items: center;
}
.preload-img{
  position: relative;
  transition: all 1s ease;

}
.img::before{
  content: "";
  position: absolute;
  background-color: black;
  top: 0;
  left: 0;
  height: 5vh;
  width: 100%;
  z-index: 50;
}
.img::after{
  content: "";
  position: absolute;
  background-color: black;
  bottom: 0;
  left: 0;
  height: 5vh;
  width: 100%;
  z-index: 50;
}

.preload-img-animate-one{
  transform: translateY(5vh);
}
.preload-img-animate{
  transform: translateY(10vh);
  
}  

@media screen and (max-width:768px){
  
  #preload-img{
    height: 4vh;
  }
  .preload-content-wrapper{
    top: 60%;
  }
  .preload-img-animate-one{
    transform: translateY(-5vh);
  }
  .preload-img-animate{
    transform: translateY(0vh);
    
  } 
  .preload-content-wrapper{
    top: 55%;
  }
  
}