#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #ff4800;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #ff5f00;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #ff7700;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}





/*
.loadercontainer {
    position: relative;
    display: flex;
    height: 100px;
    width: 100%;
    justify-content: center;
    align-items: center;
    -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);
}

.loader {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    animation: animate 2s linear infinite;
}

    .loader:nth-child(2),
    .loader:nth-child(4) {
        filter: hue-rotate(290deg);
        animation-delay: -1s;
    }

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader:nth-child(1)::before,
.loader:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to top, transparent, #ff3c00);
    background-size: 100px 180px;
    background-repeat: no-repeat;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.LoaderI {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 20px;
    height: 20px;
    background: #ff3c00;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 10px #ff3c00, 0 0 20px #ff3c00, 0 0 30px #ff3c00, 0 0 40px #ff3c00, 0 0 50px #ff3c00, 0 0 60px #ff3c00, 0 0 70px #ff3c00, 0 0 80px #ff3c00, 0 0 90px #ff3c00, 0 0 100px #ff3c00;
}

.loader .LoaderSpan {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1;
}*/