*,*:after, *:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}
body{
    font-family: arial;
    font-size: 16px;
    margin: 0;
    background: #000;
    color: #000;
}
.loader {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2d3436;
    background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
    z-index: 99999;
    perspective: 500px;
    transition: all 0.5s ease;
}

.preloader-wrap{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preloader{
    position: relative;
    width: 200px;
    height: 200px;
    perspective: 750px;
}
.loading-circle{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.loading-circle-one{
    left: 0;
    top: 0;
    border-bottom: 8px solid #00deff;
    animation: loading-circle-one 1.2s infinite linear;
}
.loading-circle-two{
    left: 0;
    top: 0;
    border-right: 8px solid #00deff;
    animation: loading-circle-two 1.2s infinite linear;
}
.loading-circle-three{
    left: 0;
    top: 0;
    border-top: 8px solid #00deff;
    animation: loading-circle-three 1.2s infinite linear;
}

@keyframes loading-circle-one{
    0%{
        transform: rotateX(40deg) rotateY(-40deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(40deg) rotateY(-40deg) rotateZ(360deg);
    }
}
@keyframes loading-circle-two{
    0%{
        transform: rotateX(50deg) rotateY(15deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(50deg) rotateY(15deg) rotateZ(360deg);
    }
}
@keyframes loading-circle-three{
    0%{
        transform: rotateX(15deg) rotateY(50deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(15deg) rotateY(50deg) rotateZ(360deg);
    }
}