body.loading {
  overflow: hidden;
  width: 100vw;
  height: 100vh; 
}

#loading-modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  opacity: 0.8;
  z-index: 9999999;
}

#loading-modal .loader-logo 
{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
}
  
#loading-modal .loader-logo div {
  width: 100px;
  height: 100px;
  position: absolute;
  background-size: contain; 
}

#loading-modal .loader-logo div.p {
  background-image: url("../images/logos/p.jpg");
  left: 0;
  top: 0; 
}

#loading-modal .loader-logo div.a {
  background-image: url("../images/logos/a.jpg");
  right: 0;
  top: 0; 
}

#loading-modal .loader-logo div.w {
  background-image: url("../images/logos/w.jpg");
  left: 0;
  bottom: 0; 
}

#loading-modal .loader-logo div.c {
  background-image: url("../images/logos/c.jpg");
  right: 0;
  bottom: 0; 
}

#loading-modal .load-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #F8F8F8; 
}

#loading-modal .load-bar .bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center; 
}

#loading-modal .load-bar .bar:nth-child(1) {
  background-color: #BACBB9;
  animation: loading 3s linear infinite; 
}

#loading-modal .load-bar .bar:nth-child(2) {
  background-color: #8FA8B5;
  animation: loading 3s linear 2s infinite; 
}

#loading-modal .load-bar .bar:nth-child(3) {
  background-color: #898989;
  animation: loading 3s linear 4s infinite; 
}