/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

/* VARIABLES */



/* LOADER */
.loader{
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loader__dots{
  width: 100%;
  margin: 0 0 10px;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.loader__dot{
  color: #fff;
  font-size: 20px;
  border-radius: 50px;
  width: 20px;
  height: 20px;
  animation: bounce .55s ease infinite alternate;
}

.loader__dot:nth-child(2){
  animation-delay: .17s;
}

.loader__dot:nth-child(3){
  animation-delay: .34s;
}



.loader__text{
  color: #fff;
  font-weight: 500;
  font-size: 25px;
}

.loader__text::after{
  content: "...";
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  animation: dots steps(4, end) 2s infinite alternate;
}


@keyframes bounce{
  0%{
    transform: translateY(0);
    box-shadow: 0 5px 1px rgba(71,34,86,.3);
  }
  100%{
    transform: translateY(-50px);
    box-shadow: 0 55px 12px rgba(0,0,0,.1);
  }
}

@keyframes dots{
  from{
    width: 0;
  }to{
    width: 25px;
  }
}