.preloader {
    overflow: hidden;
  }
  .container_preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    overflow: hidden;
  }
  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .circle:before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  }
  .circle-1 {
    background-color: #000000;
  }
  .circle-1:before {
    background-color: #000000;
    animation-delay: 200ms;
  }
  .circle-2 {
    background-color: #544506;
  }
  .circle-2:before {
    background-color: #544506;
    animation-delay: 400ms;
  }
  .circle-3 {
    background-color: #8b710a;
  }
  .circle-3:before {
    background-color: #8b710a;
    animation-delay: 600ms;
  }
  .circle-4 {
    background-color: #c49f0d;
  }
  .circle-4:before {
    background-color: #c49f0d;
    animation-delay: 800ms;
  }
  .circle-5 {
    background-color: #F5C710;
  }
  .circle-5:before {
    background-color: #F5C710;
    animation-delay: 1000ms;
  }
  @keyframes scale {
    0% {
      transform: scale(1);
    }
    50%, 75% {
      transform: scale(2.5);
    }
    78%, 100% {
      opacity: 0;
    }
  }