:root {
  --main-bg-color:  #f3eee6;
  --main-bar-color: #788983;
  --main-bg: #ffffff;
}
body::before{ position: absolute;content: "";height: 100%;width: 100%;left: 0;top: 0; transition: all 0.6s ease-out;z-index: 0;   }
#jpreOverlay {background-color: var(--main-bg-color); width: 100%;height: 100%;z-index: 9999 !important;position: fixed;top: 0;left: 0;min-height: 100vh;}
#jpreOverlay.setremove{ width: 0 !important; overflow: hidden;-webkit-transition: width 0.3s ease-out 0.6s;transition: width 0.3s ease-out 0.6s;}
#jpreOverlay:before{ background-color: var(--main-bg-color); }
#jpreOverlay.setremove:before{ width: 0; }
#jpreSlide{font-size:22px;font-weight:bold;color:#ccc;text-align:center;width:50%;height:30%;}
#jpreLoader{width: 260px;/* height: 100%; */top: calc(50% + 70px) !important;left: calc(50% - 130px) !important;}
#jpreBar {/* background: var(--main-bar-color); *//* height: 0; *//* position: absolute; *//* bottom: 0; *//* left: 0; */ display: none;}
#jprePercentage {color: var(--main-bar-color);font-size: 16px;font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;padding: 5px 10px;z-index: 9999;width: 160px;left: calc(50% - 80px);text-align: center;/* border: 1px solid #333; */display: block;margin: 10px auto 0;height: auto;position: absolute;top: 0;}

#wrap_loadingpage{height: 200px;top: auto !important;bottom: calc(50% - 80px);width: 200px;padding: 0;z-index: 100;left: calc(50% - 100px) !important;}
#loadingpage{ position: absolute;bottom: 0;left: calc(50% - 50px);width: 100px;margin: 0 auto;height: 100%;-webkit-transition: all 0.6s;transition: all 0.6s;display: none;}
#loadingpage .aminationloading{top: 50%; -webkit-transition: all 0.6s; transition: all 0.6s;}
#jpreOverlay > #wrap_loadingpage > #loadingpage{position: absolute;bottom: 0;left: calc(50% - 100px);width: 200px;margin: 0 auto;/* height: 100px; */display: block;height: auto;}


/* #Fix css
================================================== */
body.bodypreload:before{position: absolute;content: "";left: 0;right: 0;bottom: 0;top: 0;z-index: 999;background-color: var(--main-bg);}
.bodypreload{ height: 100%; overflow: hidden; }
.loading-logo{ 
  width: 180px;
   text-align: center; 
   margin: 0 auto 60px;  
  }
.loading-logo img{
  height: 170px;
  width: auto;
}
.hide{ -webkit-transition: all 1s ease 0.3s; transition: all 1s ease 0.3s ; }
#loadingpage.hide{ bottom: 20%; opacity: 0; 		}
#jprePercentage.hide{ opacity: 0; }
.loading-icon{ display: flex; justify-content: center; }
.loading-icon span{display: block; background-color: none; width: 4px; height: 4px; border-radius: 50%; border: 2px solid var(--main-bar-color); margin: 0 3px;}
.loading-icon span:nth-child(1){ opacity: 1; }
.loading-icon span:nth-child(2){ opacity: 0.9; }
.loading-icon span:nth-child(3){ opacity: 0.8;  }















		/*end*/