.preContainer{
  align-items: center;
  background-color: #1C3472;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;

 
}
#preloader {
  animation: bottom-ripple 1s ease-in-out infinite -50ms;
  background-color:#F4EE78;
  border-radius: 50%;
  box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
  height: 12em;
  position: relative;
  width: 12em;
  
}

#preloader::before,
#preloader::after {
  border-radius: inherit;
  box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
}

#preloader::before {
  animation: middle-ripple 1s ease-in-out infinite -25ms;
  background-color: #ff543e;
  height: 10em;
  margin: -5em 0 0 -5em;
  width: 10em;
}

#preloader::after {
  
  background-color:#6DD1C5;
  height: 6em;
  margin: -2em 0 0 -2em;
  width: 6em;
  content:url('assets/icons/silhouette.svg') ;
}

.bg--darkyellow{
  background: #fcf0ab;
}

.no-margin{
  padding: 0px!important;
}
@keyframes bottom-ripple {
  0% {
    box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
    transform: scale(1.25);
  }
}

@keyframes middle-ripple {
  0% {
    box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
    transform: scale(1.1);
  }
}

@keyframes top-ripple {
  0% {
    box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
    transform: scale(1.4);
  }
}