#loadingPage{margin:auto;display:flex;align-items:center;justify-content:center;height: 100vh;position: fixed;overflow:hidden;padding: 20px;top:0;left:0;width:100%;z-index:999999999;background-color:#fff;transition:all ease-in-out 1s}
#loadingPage:after{content:'';position: absolute;top:0;left:0;width:100%;height:100%;background:url('../images/loading/background.jpg') no-repeat center;background-size:cover;transition:all ease 4s;z-index: 9;opacity: 0;}        
#loadingPage.body-active:after{transform:scale(106%);opacity: 1;}
#loadingPage:before{content:'';position: absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index: 10;transition:all ease 0.5s;}
#loadingPage.body-active:before{}
#loadingPage.hidden-loadingPage{opacity:0;z-index:-99}

.logoDev{position: relative;width:320px;aspect-ratio: 1 / 0.77;z-index:999}

/* PIEACE 1 */
.logo-piece-1{position: absolute;top:0;left:0;width:100%;height:100%;display: flex;}
.logoDev img{width:100%;}
.one{mask-image: url('../images/loading/p1-1.png');mask-size: contain;mask-repeat: no-repeat;mask-position: left;}
.logo-piece-1 span{background:var(--color-main);width:100%;height:0;transition:all ease 1.5s;}        
.logoDev-active .logo-piece-1 span{height:100%;}

/* PIEACE 2 */
.logo-piece-2{position: absolute;top:0;right:0;width:100%;height:100%;display: flex;}
.logoDev img{width:100%;}
.two{mask-image: url('../images/loading/p2-1.png');mask-size: contain;mask-repeat: no-repeat;mask-position: right;}
.logo-piece-2 span{background:var(--color-main);width:100%;height:0;transition:all ease 1.5s;}        
.logoDev-active .logo-piece-2 span{height:100%;}

/* PIEACE 3 */
.logo-piece-3{position: absolute;top:0;right:0;width:100%;height:100%;display: flex;}
.logoDev img{width:100%;}
.three{mask-image: url('../images/loading/p3-1.png');mask-size: 55%;mask-repeat: no-repeat;mask-position: 50% 78%;}
.logo-piece-3 span{width:100%;position: relative;}
.logo-piece-3 span:after{content:'';position: absolute;top:0;left:0;width:0;height:100%;background:var(--color-main);transition:all ease 1s;transition-delay:0.3s;}   
.logoDev-active .logo-piece-3 span:after{width:50%;}
.logo-piece-3 span:before{content:'';position: absolute;top:0;right:0;width:0;height:100%;background:var(--color-main);transition:all ease 1s;transition-delay:0.3s;}   
.logoDev-active .logo-piece-3 span:before{width:50%;}
/* .logoDev-active .logo-piece-3 span{width:100%;} */


/* PIEACE 4 */
.logo-piece-4{position: absolute;bottom:0;left:0;width:100%;height:100%;display: flex;}
.logoDev img{width:100%;}
.four{mask-image: url('../images/loading/p4-1.png');mask-size: 16%; mask-repeat: no-repeat; mask-position: 20% 100%;}
.logo-piece-4 span{background:var(--color-main);width:100%;height:0;transition:all ease 1.2s;transition-delay:0.5s;}         
.logoDev-active .logo-piece-4 span{height:100%;}

/* PIEACE 5 */
.logo-piece-5{position: absolute;bottom:0;right:0;width:100%;height:100%;display: flex;}
.logoDev img{width:100%;}
.five{mask-image: url('../images/loading/p5-1.png');mask-size: 16%; mask-repeat: no-repeat; mask-position: 80% 100%;}
.logo-piece-5 span{background:var(--color-main);width:100%;height:0;transition:all ease 1.2s;transition-delay:0.5s;}         
.logoDev-active .logo-piece-5 span{height:100%;}

/* LOGO CONTAINER */
.logo-container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;transition:all ease 1.5s;transition-delay:0.5s;}
.logo-container-active{}

/* LOGO NAME */
.logo-name{color:#fff;text-transform:uppercase;position: relative; z-index: 9999; font-size: 135px; margin-left: -32px;}        
.logo-name p{opacity: 0;}
.logoName-active{opacity: 1;}
.logoName-active .logo-name-text{top:0;}
.logo-name-text{display: flex;align-items:center;justify-content:center;transition:all ease 1.2s;position: absolute;top:50%;left:0;width:100%;height:100%;}
.logo-name span:nth-child(1){opacity: 0;transition:all ease 1s;transition-delay:0.5s;}
.logo-name span:nth-child(2){opacity: 0;transition:all ease 1s;transition-delay:0.7s;}
.logo-name span:nth-child(3){opacity: 0;transition:all ease 1s;transition-delay:0.9s;}
.logo-name span:nth-child(4){opacity: 0;transition:all ease 1s;transition-delay:1.1s;}

.logoName-active .logo-name-text span:nth-child(1){opacity: 1;}
.logoName-active .logo-name-text span:nth-child(2){opacity: 1;}
.logoName-active .logo-name-text span:nth-child(3){opacity: 1;}
.logoName-active .logo-name-text span:nth-child(4){opacity: 1;}

/* LOGO TITLE */
.logo-title{color: #fff; text-align: center; position: relative; z-index: 99; font-family: sans-serif; font-weight: 600; font-size: 28px; letter-spacing: 2px; margin-top: -25px;opacity: 0;transition:all ease 2s;transition-delay:1.5s;}
.logo-title-active{opacity: 1;}