/*==================================================
  LOADER.CSS
  Zen Spa Home
==================================================*/

/*==============================================
  LOADER
==============================================*/

#loader{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-background);

    z-index:var(--z-loader);

    overflow:hidden;

}

/*==============================================
  LOGO
==============================================*/

.loader-logo{

    position:relative;

    z-index:2;

    width:180px;

    max-width:70%;

    opacity:1;

}

.loader-logo img{

    display:block;

    width:100%;

    height:auto;

}

/*==============================================
  PROGRESS
==============================================*/

.loader-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:var(--border-thin, 2px);
    
    background:var(--color-primary);

    transform:scaleX(0);

    transform-origin:left center;

    will-change:transform;

}

/*==============================================
  HIDDEN
==============================================*/

#loader.is-hidden{

    pointer-events:none;

}

/*==============================================
  BODY
==============================================*/

body.loading{

    overflow:hidden;

}

/*==============================================
  RESPONSIVE
==============================================*/

@media (max-width:768px){

    .loader-logo{

        width:140px;

    }

}