/*
    Loader AbieSoft
*/

.loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader.hide {
    display: none;
}

.loader div:nth-child(1) {
    position: absolute;
    width: 100px;
    height: 100px;
    clip-path: polygon(0% 10%, 50% 40%,30% 80%);
    /* background-color: var(--color-primary); */
    margin-top: -50px;
    margin-left: 50px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader div:nth-child(1) div:nth-child(1) {
    position: absolute;
    width: 1000px;
    height: 1000px;
    margin-left: 200px;
    background: rgba(237, 237, 237, 1);
}

.loader div:nth-child(1) div:nth-child(2) {
    position: absolute;
    width: 1000px;
    height: 1000px;
    margin-left: -200px;
    background-color: var(--color-primary);
    animation-name: animationGeserKekanan;
    animation-duration: 1s;
    animation-delay: .5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes animationGeserKekanan {
    from {
        margin-left: -200px;
    }
    to {
        margin-left: 200px;
    }
}

.loader div:nth-child(2) {
    position: absolute;
    width: 100px;
    height: 100px;
    clip-path: polygon(40% 10%, 50% 40%,30% 80%);
    /* background-color: var(--color-primary-variant); */
    margin-top: -50px;
    margin-left: 50px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader div:nth-child(2) div:nth-child(1) {
    position: absolute;
    width: 1000px;
    height: 1000px;
    margin-right: -200px;
    background: rgba(237, 237, 237, 1);
}

.loader div:nth-child(2) div:nth-child(2) {
    position: absolute;
    width: 1000px;
    height: 1000px;
    margin-top: 600px;
    background-color: var(--color-primary-variant);
    animation-name: animationGeserKekiri;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    transform: rotate(20deg);
}

@keyframes animationGeserKekiri {
    from {
        margin-top: 600px;
    }
    to {
        margin-top: 200px;
    }
}

.loader div:nth-child(3) {
    position: absolute;
    font-size: 24pt;
    font-weight: 600;
    margin-top: 50px;
    z-index: 9999;
}

.loader div:nth-child(4) {
    position: absolute;
    width: 0px;
    height: 0px;
    background: rgba(237, 237, 237, 0);
    z-index: 999;
    border-radius: 50%;
    animation-name: animBackLoad;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count:infinite;
}


@keyframes animBackLoad {
    from {
        width: 400px;
        height: 400px;
        background: rgba(237, 237, 237, .4);
    }
    to {
        width: 800px;
        height: 800px;
        background: rgba(237, 237, 237, 0);
    }
}





/*
    Logo
*/

.logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding-left: 30px;
}

.logo div:nth-child(1) {
    position: absolute;
    width: 80px;
    height: 80px;
    clip-path: polygon(0% 10%, 50% 40%,30% 80%);
    background-color: var(--color-primary);
}

.logo div:nth-child(2) {
    position: absolute;
    width: 80px;
    height: 80px;
    clip-path: polygon(40% 10%, 50% 40%,30% 80%);
    background-color: var(--color-primary-variant);
}