/*---------------------------------
     Preloader CSS
-----------------------------------*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 20000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.loader {
    text-align: center;
    margin: 5px;
    border-radius: 50%;
    border: 4px solid #f48020;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.loader-inner-1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation: change_first_circle 4s ease-in-out infinite;
    animation: change_first_circle 4s ease-in-out infinite;
}

.loader-inner-2 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation: change_second_circle 4s ease-in-out infinite;
    animation: change_second_circle 4s ease-in-out infinite;
}

.loader-inner-3 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    width: 40px;
    height: 40px;
    -webkit-animation: change_last_circle 4s linear infinite;
    animation: change_last_circle 4s linear infinite;
}

@-webkit-keyframes change_first_circle {
    50% {
        -webkit-transform: rotateX(360deg) scale(0.8);
        transform: rotateX(360deg) scale(0.8);
    }
}

@keyframes change_first_circle {
    50% {
        -webkit-transform: rotateX(360deg) scale(0.8);
        transform: rotateX(360deg) scale(0.8);
    }
}

@-webkit-keyframes change_second_circle {
    50% {
        -webkit-transform: rotateY(360deg) scale(0.8);
        transform: rotateY(360deg) scale(0.8);
    }
}

@keyframes change_second_circle {
    50% {
        -webkit-transform: rotateY(360deg) scale(0.8);
        transform: rotateY(360deg) scale(0.8);
    }
}

@-webkit-keyframes change_last_circle {
    50% {
        -webkit-transform: rotateX(360deg) scale(0.8);
        transform: rotateX(360deg) scale(0.8);
    }
}

@keyframes change_last_circle {
    50% {
        -webkit-transform: rotateX(360deg) scale(0.8);
        transform: rotateX(360deg) scale(0.8);
    }
}